/* The Contractors Plan — redesign stylesheet.
 *
 * Implements the design delivered in the Claude Design handoff (orange + charcoal, Rubik,
 * card-based layouts) as real classes. The prototypes carried ~2,700 inline style attributes and
 * explicitly asked that they NOT be ported literally; every value below comes from the handoff's
 * token and component tables, so this file is the single place to change the look.
 *
 * The layout system is deliberately the same as americanworker/assets/redesign.css -- the handoff
 * says so outright ("identical to the AWP handoff system") -- but the two sites deploy separately
 * and have different palettes, so they stay as two files rather than a shared one.
 *
 * Conventions: everything is prefixed `cp-`, matching the site's existing cp-chrome-* / CP_CONFIG
 * naming; layout is flex/grid with `gap`; card grids keep the `min(100%, X)` guard in minmax() or
 * narrow viewports overflow.
 */

/* ---------------------------------------------------------------- font (self-hosted)
 * Rubik, SIL Open Font License 1.1, latin subset. Self-hosted rather than loaded from Google Fonts:
 * this site makes no other third-party request and the origin sits behind Front Door. */
@font-face{font-family:Rubik;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-400.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:Rubik;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-500.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:Rubik;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/rubik-600.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:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rubik-700.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:Rubik;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/rubik-800.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}

/* ---------------------------------------------------------------- tokens */
:root{
  --cp-orange:#F57B20;         /* primary pill fill, eyebrow rules, active-nav underline */
  --cp-orange-hover:#DC6A12;
  --cp-tile:#DCE7F5;           /* icon chips, callouts, Blog badge — blue tint, was #FBE8CC */
  /* Interactive TEXT orange is deliberately darker than the fill orange. The handoff lists #F57B20
   * for links and "Learn more" too, but that is 2.8:1 on white -- unreadable as text. The fill
   * orange is only ever used behind --cp-on-orange, where it is fine; text gets these instead. */
  --cp-burnt:#B05C00;          /* interactive text: links, "Learn more", taglines */
  --cp-burnt-hover:#8A4700;
  /* Navy, not the old warm charcoal #2B2622. The 2026-08-17 rebuild moved the whole site onto a
   * navy-led palette -- #003366 is the single most common colour in the export (668 uses across all
   * 57 pages, where the repo used #2B2622 398 times and navy not once). Changed here rather than
   * per page so the shift is one edit and cannot go half-applied. */
  --cp-ink:#003366;            /* headings, strong text */
  --cp-body:#3D3831;
  --cp-body-long:#5C554C;
  --cp-body-alt:#4A443C;
  --cp-muted:#6A6156;          /* secondary copy, idle nav */
  /* Neutral grey band. It replaced the warm charcoal in an earlier rebuild, and this export has now
   * retired it in turn: #848484 / #5A5A59 / #3B3B3A appear nowhere in the 57 exported pages, and
   * every band and promo card that used to be grey is painted with --cp-orange-band below. The
   * gradient is kept defined only because --cp-char-3 still backs .cp-verdict--small; nothing on the
   * site paints with --cp-grey-band any more. Delete it if the verdict pill ever moves too. */
  --cp-char-1:#848484;         /* grey band gradient start */
  --cp-char-2:#5A5A59;         /* grey band gradient middle (55%) */
  --cp-char-3:#3B3B3A;         /* grey band gradient end; also the full-bleed dark */
  --cp-grey-band:linear-gradient(135deg,var(--cp-char-1),var(--cp-char-2) 55%,var(--cp-char-3));
  /* Solid white on the grey band. The handoff is explicit that no orange-family accent TEXT goes
   * there -- it fails contrast against #5A5A59 -- so orange survives only as the 22x2px rule and
   * as button fills. */
  --cp-on-dark:#fff;           /* eyebrow/links on the grey band */
  --cp-tint:#EDF2FA;           /* page heroes, footer, alternating sections — was warm #F6F1E9 */
  /* The homepage hero, the CTA bands and every sidebar promo card ride this warm orange ramp. It is
   * now the only band treatment the design ships. */
  --cp-orange-band:linear-gradient(105deg,#9A3F06,#C2540C 48%,#F57B20);
  --cp-steel:#3D618B;          /* News badge only */
  --cp-steel-bg:rgba(61,97,139,.12);
  --cp-line:rgba(59,47,32,.15);
  --cp-line-field:rgba(59,47,32,.2);
  /* Orange is only legible under dark text. The handoff is explicit: do NOT switch this to white. */
  --cp-on-orange:#231A10;

  --cp-r-card:18px;
  --cp-r-band:34px;
  --cp-r-field:11px;
  --cp-r-chip:12px;
  --cp-r-tile:14px;
  --cp-r-pill:999px;

  --cp-sh-hover:0 14px 40px -16px rgba(58,47,32,.3);
  --cp-sh-card:0 8px 30px -18px rgba(58,47,32,.28);
  /* Warm, matching the orange pill it sits under -- a neutral-brown drop shadow read as grime
   * beneath the fill. Both remaining orange pills (the contact form's submit and the 404's home
   * button) carry this exact value in the export. */
  --cp-sh-btn:0 8px 22px -10px rgba(120,70,0,.5);

  --cp-header-h:74px;
  --cp-wrap:1180px;
  /* The header bar gets its own, wider measure. The nav cluster needs 1158.7px and --cp-wrap leaves
   * it 1124px after padding, so at 1180 it was 35px over budget with nowhere to put the overflow --
   * see the header section below. Chrome is not reading content; it does not have to sit in the same
   * column as the prose. */
  --cp-wrap-header:1280px;
}

/* ---------------------------------------------------------------- base */
.cp *,.cp *::before,.cp *::after{box-sizing:border-box}
body.cp{
  margin:0;font-family:Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--cp-body);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Wrapped in :where() so it carries ZERO specificity. A bare `body.cp a` rule scores 0,1,2 and
 * therefore outranks every single-class component rule (.cp-btn--primary, .cp-nav__link,
 * .cp-card__more, .cp-link-row ... all 0,1,0), silently replacing their colour with the body
 * colour -- the primary pill rendered #3D3831 instead of the #231A10 the handoff mandates on
 * orange, and the nav sat at #3D3831 instead of muted. :where() still beats the UA default,
 * because author rules always do, while losing to anything that names a class. */
:where(body.cp a){color:inherit;text-decoration:none}
:where(body.cp a:hover){color:var(--cp-burnt)}
body.cp img{max-width:100%}
body.cp h1,body.cp h2,body.cp h3,body.cp h4,body.cp p,body.cp ul,body.cp ol,body.cp figure{margin:0;padding:0}
body.cp ul,body.cp ol{list-style:none}
body.cp :focus-visible{outline:3px solid rgba(176,92,0,.5);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- layout */
.cp-container{max-width:var(--cp-wrap);margin:0 auto;padding:0 28px}
.cp-container--narrow{max-width:820px}
.cp-section{padding:76px 0}
.cp-section--tight{padding:56px 0}
.cp-section--tint{background:var(--cp-tint)}
/* Closing 'related' band on detail pages. */
.cp-section--related{padding:64px 0 84px;background:var(--cp-tint);border-top:1px solid var(--cp-line)}
.cp-stack{display:flex;flex-direction:column}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.cp-grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cp-grid--narrow{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.cp-split{display:flex;flex-wrap:wrap;gap:44px}
/* The 2026-08-28 export narrowed the sidebar site-wide, 300/400 -> 260/300, so body copy holds its
   measure instead of the aside crowding it. The reading column did NOT move with it here: the export
   ships two body variants, "flex:1 1 540px" and "flex:1 1 520px;min-width:0", and the 520 one is
   confined to the pages it rebuilt this round. Every page still on this class maps to a 540 source,
   so the basis stays; the rebuilt pages set 520 inline. (min-width:0 is ours either way -- without it
   a long unbreakable string in the body overflows the flex item.) */
.cp-split__body{flex:1 1 540px;min-width:0}
.cp-split__aside{flex:1 1 260px;max-width:300px;align-self:start;display:flex;flex-direction:column;gap:20px}

/* The retirement page's three worked examples ship as <details>. The export sets list-style:none
   inline on the summary, which inline CSS cannot do for the WebKit pseudo-element, so the disclosure
   triangle is suppressed here instead -- the row already carries its own + badge. */
.cp-details__summary{list-style:none}
.cp-details__summary::-webkit-details-marker{display:none}

/* Premium Reserve's four-step cycle is laid out as a 2x2 with an arrowed ring in the gutter between
   the cards. Below 640px there is no gutter to sit in, so the ring is hidden and the four steps
   stack in reading order 1-2-3-4. The export carries this as a page <style> block; pages here do not
   inline styles, so it lives with the rest of the design system. */
@media (max-width:640px){
  #reserve-cycle{grid-template-columns:1fr;grid-template-areas:'one' 'two' 'three' 'four';column-gap:0;row-gap:12px}
  #reserve-cycle-ring{display:none}
}

/* Same shape, second instance: service-contractors' contract-lifecycle timeline is five steps in a
   row with a horizontal rule threaded behind their dots. Once the row wraps to one column there is
   no horizontal run to thread, so the rule is hidden and the timeline turns vertical -- a left
   border down the stack with each dot pulled out onto it, and the last step's border cleared so the
   line stops at Recompete rather than running past it. The export carries this as a page <style>
   block; pages here do not inline styles, so it lives with the rest of the design system.
   The `!important` is load-bearing: #sc-grid's gap is an inline style, which no stylesheet rule can
   outrank without it. */
@media (max-width:700px){
  #sc-track{display:none}
  #sc-grid{gap:0 !important}
  .sc-step{padding-left:22px;padding-bottom:24px;border-left:2px solid rgba(0,51,102,.22)}
  .sc-step:last-child{border-left-color:transparent}
  .sc-step .sc-dot{margin-left:-34px}
}

/* ---------------------------------------------------------------- typography */
/* 22x2px orange rule + uppercase label: the signature device before nearly every section heading. */
/* The 14px below is the export's default gap between an eyebrow and the heading under it (57 of the
 * 77 eyebrows in this export carry it; the rest override with 10/12/16/18px inline, which still
 * wins). It was missing here, so every page hero on the site ran its H1 hard up against the eyebrow
 * -- the kind of whole-site spacing pass that a text-only comparison cannot see. */
.cp-eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-ink);
}
.cp-eyebrow::before{content:"";width:22px;height:2px;background:var(--cp-orange);display:inline-block;flex:0 0 auto}
/* On a band the rule turns white with the label. It has to: every band on this site is now the
 * orange ramp, and a #F57B20 rule laid on #C2540C–#F57B20 is invisible. The export paints it #fff
 * in all seven places an eyebrow sits on a band. */
.cp-eyebrow--on-dark{color:var(--cp-on-dark)}
.cp-eyebrow--on-dark::before{background:#fff}
a.cp-eyebrow:hover{color:var(--cp-burnt)}

.cp-h1{font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--cp-ink);max-width:18em;text-wrap:pretty}
.cp-h1--overview{font-size:clamp(2.1rem,3.8vw,3.2rem)}
.cp-h1--hero{font-size:clamp(2.2rem,3.9vw,3.3rem);color:#fff;max-width:15em}
.cp-h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--cp-ink)}
.cp-h3{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;color:var(--cp-ink)}
.cp-h3--lg{font-size:1.2rem}
.cp-tagline{font-size:.98rem;font-weight:600;color:var(--cp-burnt)}
.cp-lead{margin-top:16px;font-size:1.12rem;color:var(--cp-muted);max-width:46em}
.cp-p{margin-top:12px;font-size:1rem;color:var(--cp-body-long)}
.cp-p--lg{margin-top:12px;font-size:1.03rem;color:var(--cp-body-long)}
.cp-p--sm{margin-top:8px;font-size:.9rem;color:var(--cp-muted)}
.cp-small{font-size:.82rem;color:var(--cp-muted)}
.cp-burnt{color:var(--cp-burnt);font-weight:600}
a.cp-burnt:hover{color:var(--cp-burnt-hover)}
/* A link that reads as heading text until you hover it -- pillar-card titles, and any anchor the
 * prototypes gave an explicit ink colour. */
.cp-ink-link{color:var(--cp-ink);transition:color .2s}
.cp-ink-link:hover{color:var(--cp-burnt)}
.cp-on-dark{color:#fff}
.cp-on-dark .cp-h2,.cp-on-dark .cp-h3{color:#fff}
.cp-on-dark p{color:rgba(255,255,255,.9)}
/* A link on the grey band. It cannot hover to orange -- the handoff rules orange text off that
 * background -- so the affordance is an underline, which is what the export uses for the other
 * on-dark links anyway. */
a.cp-on-dark:hover{color:#fff;text-decoration:underline}

.cp-h3--md{font-size:1.14rem}
/* Small uppercase label above a sub-section (no orange rule -- that is the eyebrow's job). */
.cp-sublabel{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-ink);margin-bottom:10px}
/* Spacing utilities: the prototypes set margin-top per element rather than using a flow rule. */
.cp-mt5{margin-top:5px}
.cp-mt10{margin-top:10px}
.cp-mt16{margin-top:16px}
.cp-mt28{margin-top:28px}
/* Partner/carrier logo row. */
.cp-logo-row{display:flex;flex-wrap:wrap;gap:24px;align-items:center;background:#fff;border:1px solid var(--cp-line);border-radius:var(--cp-r-card);padding:22px 26px}
.cp-logo-cell{flex:0 0 190px;height:76px;display:grid;place-items:center;background:#fff}
.cp-logo-cell img{max-width:180px;max-height:72px;width:auto;height:auto;display:block}
.cp-logo-row__text{flex:1 1 400px;min-width:0}

/* ---------------------------------------------------------------- buttons */
.cp-btn{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:.95rem;line-height:1.2;font-weight:600;
  padding:12px 22px;border-radius:var(--cp-r-pill);border:0;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.cp-btn svg{width:16px;height:16px;flex:0 0 auto}
/* Dark text on orange -- white fails contrast here and the handoff says not to "fix" it. */
.cp-btn--primary{background:var(--cp-orange);color:var(--cp-on-orange);font-weight:700;box-shadow:var(--cp-sh-btn)}
.cp-btn--primary:hover{background:var(--cp-orange-hover);color:var(--cp-on-orange);transform:translateY(-2px)}
/* The export ships three pill sizes, not one, and the port had collapsed them all to the base
 * size: --sm was written for the sidebar sales-card CTA and the homepage "Watch on YouTube"
 * (30 controls) but wired to nothing, and the chunkier band CTA had no class at all. Both are
 * spacing the handoff calls final, so they are expressed here rather than inline per page. */
.cp-btn--sm{font-size:.9rem;padding:11px 20px}
/* The small pill takes a 14px glyph, not the base 16px. `.cp-btn svg` is (0,1,1) and beats the
 * .cp-i14 the markup already carries, so the size has to be restated at the same weight here. */
.cp-btn--sm svg{width:14px;height:14px}
.cp-btn--lg{padding:13px 24px}
.cp-btn--secondary{background:transparent;color:var(--cp-ink);border:1.5px solid rgba(59,47,32,.25)}
.cp-btn--secondary:hover{background:var(--cp-tint);color:var(--cp-ink);transform:translateY(-2px)}
/* Secondary pill standing ON the pale tint, where a transparent fill would disappear: white by
 * default, warming to the tile colour on hover. */
.cp-btn--secondary-solid{background:#fff}
.cp-btn--secondary-solid:hover{background:var(--cp-tile)}
/* Two different secondary pills live on the orange band, and they are not interchangeable -- the
 * export picks between them by what the control DOES, not by where it sits:
 *
 *   --ghost-dark  the "Contact Us" secondary in a full CTA band: transparent, 60%-white hairline,
 *                 600 weight. It is the quieter of the two, standing beside a white primary.
 *   --phone       the 1-800-328-1519 pill: filled with #8A3B08 (the ramp's darkest stop) behind a
 *                 full-strength white hairline, 700 weight. It is the only control on the band
 *                 where it appears, so it carries the weight the ghost gives up.
 *
 * Both hover to a white fill with navy text. */
.cp-btn--ghost-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.cp-btn--ghost-dark:hover{background:#fff;color:var(--cp-ink);transform:translateY(-2px)}
.cp-btn--phone{background:#8A3B08;color:#fff;font-weight:700;border:1.5px solid #fff}
.cp-btn--phone:hover{background:#fff;color:var(--cp-ink);transform:translateY(-2px)}
/* White pill on an orange band or promo card -- the dominant CTA treatment in this export (44 of
 * the 46 "primary" calls to action; only the contact form's submit and the 404 use an orange fill).
 * It hovers to the pale tint, not to a flat white-on-white no-op. */
.cp-btn--light{background:#fff;color:var(--cp-ink);font-weight:700}
.cp-btn--light:hover{background:var(--cp-tint);color:var(--cp-ink);transform:translateY(-2px)}
/* The two homepage band CTAs are the only white pills the export labels in the near-black
 * --cp-on-orange rather than in navy; every other one reads #003366. Kept as a modifier rather than
 * moved into --light so the 44 sidebar pills are not repainted for the sake of two. The hover still
 * lands on navy, which is why this cannot be an inline style -- inline would outrank the hover. */
.cp-btn--light-on-band{color:var(--cp-on-orange)}
/* Dark pill: the header's Log In control, and the only place ink-on-white inverts. */
/* Sizing lives here rather than in a shared modifier because this pill is the Log In control and
 * nothing else: the export gives it .9rem/11px 22px in the bar and the drawer, a step tighter than
 * the base pill so it sits inside a 74px header without crowding the nav. */
.cp-btn--dark{background:var(--cp-ink);color:#fff;font-weight:700;font-size:.9rem;padding:11px 22px;border:1.5px solid rgba(255,255,255,.35);box-shadow:0 6px 18px -10px rgba(43,38,34,.7)}
.cp-btn--dark:hover{background:#161310;color:#fff;transform:translateY(-2px)}
.cp-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------------------------------------------------------------- hover states lifted out of markup
 * The prototypes express every hover as a style-hover="" attribute, which means nothing outside the
 * design tool. Deleting those attributes is NOT the fix -- that is how the last port lost the hover
 * on every pill and card on the site. Each class below supplies only the hover declarations, so the
 * element keeps the exact base styling the export shipped and the state lives in CSS where it
 * belongs. Card lift already had a home: see .cp-card--link above. */
.cp-h-pill:hover{background:var(--cp-orange-hover);color:var(--cp-on-orange);transform:translateY(-2px)}
.cp-h-ondark:hover{color:#fff;text-decoration:underline}
.cp-h-burnt:hover{color:var(--cp-burnt-hover)}
.cp-h-invert:hover{background:#fff;color:var(--cp-ink)}
.cp-h-tint:hover{background:var(--cp-tint)}
.cp-h-tile:hover{background:var(--cp-tile);color:var(--cp-ink)}
.cp-h-lift:hover{transform:translateY(-2px);color:var(--cp-ink)}
.cp-h-glass:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ---------------------------------------------------------------- cards */
.cp-card{
  display:block;background:#fff;border:1px solid var(--cp-line);border-radius:var(--cp-r-card);padding:24px;
}
a.cp-card,.cp-card--link{transition:transform .3s,box-shadow .3s}
a.cp-card:hover,.cp-card--link:hover{transform:translateY(-6px);box-shadow:var(--cp-sh-hover);color:inherit}
.cp-card--standing{box-shadow:var(--cp-sh-card)}
.cp-card--pad2{padding:24px 26px}
/* A pillar card standing on a WHITE section rather than a tinted one -- the homepage Services grid,
 * and so far only that. The export inverts the treatment there so the cards still read as raised
 * against the page: the card takes the page tint, its icon tile goes white, and the hairline warms
 * from the brown --cp-line to a navy-derived one that belongs with the tint. Every other card grid
 * on the site sits on --cp-tint already and keeps the white default above, which is why this is a
 * modifier and not a change to .cp-card. */
.cp-card--tinted{background:var(--cp-tint);border:1px solid rgba(0,51,102,.12)}
.cp-card--tinted .cp-card__icon{background:#fff}
.cp-card__icon{
  width:52px;height:52px;border-radius:var(--cp-r-tile);background:var(--cp-tile);
  display:grid;place-items:center;color:var(--cp-burnt);margin-bottom:16px;
}
.cp-card__icon svg{width:26px;height:26px}
.cp-card__more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.85rem;font-weight:600;color:var(--cp-burnt)}
.cp-card__more svg{width:14px;height:14px}
.cp-card--image{padding:0;overflow:hidden}
.cp-card--image>img{width:100%;aspect-ratio:10/6.5;object-fit:cover;display:block}
.cp-card--image .cp-card__pad{padding:22px 24px 24px}

/* ---------------------------------------------------------------- savings-calculator preview
 * New in this export: the homepage's orange calculator band gained a mock of the tool beside the
 * copy -- the four inputs and the two figures they produce -- wrapped in the anchor that opens the
 * real thing. It is a picture of the calculator, not a calculator: no form controls, no handler, and
 * the numbers are the defaults savings-calculator.html itself loads with, so the two pages agree.
 * The anchor carries an aria-label because everything inside it reads as sample figures rather than
 * as a destination.
 *
 * Expressed as classes rather than the page's usual inline styles because it is eleven elements deep
 * and four of them repeat; the band around it stays inline like the rest of the homepage. */
.cp-calccard{
  display:block;background:#fff;border-radius:20px;padding:22px;
  box-shadow:0 26px 60px rgba(35,26,16,.28);transition:transform .25s;
}
.cp-calccard:hover{transform:translateY(-6px)}
/* The three window dots. Warm grey, the one place this colour appears -- it is chrome on a mock, not
 * a palette member, so it stays a literal rather than becoming a token. */
.cp-calccard__dots{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.cp-calccard__dots span{width:9px;height:9px;border-radius:50%;background:#E2D9CC;display:inline-block}
.cp-calccard__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-calccard__label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cp-muted)}
/* A field's worth of value. Drawn as a bordered box so it reads as an input without being one. */
.cp-calccard__value{
  margin-top:4px;border:1px solid rgba(59,47,32,.18);border-radius:9px;padding:7px 14px;
  font-size:.95rem;font-weight:700;color:var(--cp-ink);
}
.cp-calccard__sub{
  margin-top:14px;background:var(--cp-tint);border-radius:var(--cp-r-chip);padding:12px 14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.cp-calccard__sub-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-muted)}
.cp-calccard__sub-value{font-size:1.05rem;font-weight:800;color:var(--cp-ink)}
.cp-calccard__total{margin-top:10px;background:var(--cp-orange-band);border-radius:var(--cp-r-tile);padding:16px 18px;color:#fff}
.cp-calccard__total-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cp-calccard__total-value{margin-top:2px;font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.cp-calccard__note{margin-top:12px;font-size:.72rem;color:var(--cp-muted)}

/* ---------------------------------------------------------------- checklist rows */
.cp-check{
  display:flex;gap:10px;align-items:center;
  background:#fff;border:1px solid var(--cp-line);border-radius:var(--cp-r-chip);padding:13px 16px;
  font-size:.93rem;font-weight:500;color:var(--cp-ink);
}
.cp-check--sm{padding:12px 15px;font-size:.9rem}
/* The roomier row the Services pages use: no fill, a slightly larger measure in body colour rather
 * than ink, and the tick top-aligned so it sits on the first line of a wrapping label instead of
 * floating in the middle of a two-line row. */
.cp-check--loose{
  align-items:flex-start;gap:12px;background:transparent;padding:14px 18px;
  font-size:.97rem;color:var(--cp-body);
}
.cp-check svg{width:16px;height:16px;flex:0 0 auto;color:var(--cp-orange)}
.cp-check--loose svg{width:17px;height:17px;margin-top:3px}

/* "As of 2026" callout -- fences dated ACA-era claims. */
.cp-callout{background:var(--cp-tile);border-radius:var(--cp-r-tile);padding:18px 20px}
.cp-callout__label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-burnt-hover);margin-bottom:8px}

/* ---------------------------------------------------------------- charcoal CTA band */
.cp-cta{
  background:var(--cp-grey-band);
  border-radius:var(--cp-r-band);margin:0 28px;padding:56px 48px;color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
}
.cp-cta__text{flex:1 1 420px}
.cp-cta--bleed{border-radius:0;margin:0;padding:80px 0}

/* ---------------------------------------------------------------- homepage hero
 * The audience-chip hero (chevron-clipped charcoal field + swappable worker cutout) was retired in
 * this export: the homepage now leads with a grey band and a single construction photograph, so the
 * .cp-hero-left / .cp-hero-panel / .cp-aud-chip rules went with it.
 *
 * .cp-hero__figure keeps position:relative because the photograph inside it is inset-positioned.
 * That is load-bearing, not decoration -- the prototype expressed it as a style="{{...}}" hole, and
 * the last time such a hole was stripped the hero image escaped its box and covered the whole page
 * in DEV. */
.cp-hero{background:var(--cp-orange-band)}
.cp-hero__inner{
  max-width:var(--cp-wrap);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:40px;align-items:center;min-height:340px;
}
.cp-hero__copy{padding:52px 0}
/* Right-pinned and capped, exactly as the export has it: the figure column is a flex row with
 * justify-content:flex-end and 32px of vertical padding, around a width:100%/max-width:490px frame
 * that is 320px tall.
 *
 * This used to be an absolutely-positioned frame stretched to the band's height. That is the
 * pattern rule 8 of the port spec exists to warn about -- an absolutely-positioned child inside a
 * container whose position:relative arrived from somewhere else -- and it also fought the export in
 * two visible ways: the frame grew with the band instead of staying 320px, and the image was
 * object-fit:cover. Cover CROPS, and the artwork here is an illustration of workers on a jobsite,
 * so cropping cut heads and equipment off its edges. The export says contain: the whole illustration
 * sits inside the frame and the pale tint shows as letterboxing, which is why the frame has a
 * background colour at all. */
.cp-hero__figure{display:flex;justify-content:flex-end;align-items:center;padding:32px 0}
.cp-hero__frame{
  width:100%;max-width:490px;height:320px;
  border-radius:var(--cp-r-card);overflow:hidden;background:var(--cp-tint);
}
.cp-hero__frame img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}

/* ---------------------------------------------------------------- page hero */
.cp-page-hero{background:var(--cp-tint);padding:72px 0 60px}

/* Breadcrumb trail, new in this export: it sits above the eyebrow on every page below the root.
 * .cp-crumbs__sep carries aria-hidden in the markup, so the slash is decoration rather than
 * something a screen reader announces between every step. */
.cp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px;font-size:.86rem}
.cp-crumbs a{font-weight:700;color:var(--cp-ink);transition:color .2s}
.cp-crumbs a:hover{color:var(--cp-burnt)}
.cp-crumbs__sep{color:rgba(59,47,32,.35)}
.cp-crumbs__here{color:var(--cp-muted)}

/* ---------------------------------------------------------------- sidebar */
.cp-side{background:#fff;border:1px solid var(--cp-line);border-radius:var(--cp-r-card);padding:24px 26px}
.cp-side--dark{background:var(--cp-grey-band);border-color:transparent;color:#fff}
/* The rebuild's sidebar promo cards ride the orange ramp rather than the grey band. Separate
 * variant rather than repainting --dark, so the grey treatment stays available.
 * The promo card is a notch taller than the plain one -- 28px against 24px -- in every page that
 * carries it, so the padding lives with the variant. */
.cp-side--warm{background:var(--cp-orange-band);border-color:transparent;color:#fff;padding:28px 26px}
.cp-side--dark .cp-h3,.cp-side--warm .cp-h3{color:#fff}
.cp-side--warm .cp-side__note{color:#fff}
.cp-side__phone{display:block;margin-top:14px;font-size:1.3rem;font-weight:800;color:#fff}
.cp-side__note{margin-top:8px;font-size:.92rem;color:rgba(255,255,255,.75)}
.cp-side__list{display:flex;flex-direction:column}
.cp-side__list a,.cp-link-row{
  display:block;font-size:.92rem;font-weight:500;color:var(--cp-muted);padding:6px 0;
  transition:color .2s,padding-left .2s;
}
.cp-side__list a:hover,.cp-link-row:hover{color:var(--cp-burnt);padding-left:4px}

/* ---------------------------------------------------------------- long-form */
.cp-article{font-size:1.03rem;color:var(--cp-body-alt)}
.cp-article p{margin:0 0 16px}
.cp-article h2{font-size:1.5rem;font-weight:800;color:var(--cp-ink);margin:32px 0 12px;letter-spacing:-.01em}
.cp-article h3{font-size:1.2rem;font-weight:800;color:var(--cp-ink);margin:26px 0 10px}
.cp-article ul,.cp-article ol{margin:0 0 16px;display:flex;flex-direction:column;gap:10px}
.cp-article li{margin-left:6px;padding-left:14px;font-size:1rem;border-left:2px solid var(--cp-tile)}
.cp-article a{color:var(--cp-burnt);text-decoration:underline;text-underline-offset:2px}
.cp-article a:hover{color:var(--cp-burnt-hover)}
.cp-article hr{border:0;border-top:1px solid var(--cp-line);margin:28px 0}
.cp-article strong{color:var(--cp-ink)}

/* ---------------------------------------------------------------- forms */
.cp-form{display:flex;flex-direction:column;gap:14px}
.cp-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.cp-field{display:flex;flex-direction:column;gap:6px}
.cp-label{display:block;font-size:.82rem;font-weight:600;color:var(--cp-ink);margin-bottom:6px}
.cp-input,.cp-select,.cp-textarea{
  font:inherit;font-size:.95rem;color:var(--cp-body);width:100%;
  padding:12px 14px;border-radius:var(--cp-r-field);border:1.5px solid var(--cp-line-field);background:#fff;
  transition:border-color .2s;
}
.cp-input:focus,.cp-select:focus,.cp-textarea:focus{outline:none;border-color:var(--cp-orange)}
.cp-textarea{min-height:120px;resize:vertical}
/* A field whose value IS the answer -- the savings calculator's four inputs. */
.cp-input--figure{font-size:1rem;font-weight:600;color:var(--cp-ink)}
/* Revealed when the routing select is set to "member" -- steers benefit questions away from sales. */
.cp-form__note{display:none;gap:10px;align-items:flex-start;background:var(--cp-tile);border-radius:var(--cp-r-chip);padding:13px 15px;font-size:.9rem;color:var(--cp-ink)}
.cp-form__note.is-shown{display:flex}
.cp-form__note a{color:var(--cp-burnt);font-weight:600;text-decoration:underline}
.cp-form__confirm{display:none;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:34px 20px}
.cp-form__confirm.is-shown{display:flex}
.cp-form__error{display:none;font-size:.9rem;color:#B3261E;font-weight:600}
.cp-form__error.is-shown{display:block}

/* ---------------------------------------------------------------- blog */
.cp-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.cp-chips{display:flex;gap:8px;flex-wrap:wrap}
/* The filter chips went ink-on-tint in this export -- the selected chip is now the dark one, not the
 * orange one, so the orange pill stays unambiguously "this is a call to action". */
.cp-chip{
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;padding:10px 18px;
  border-radius:var(--cp-r-pill);border:0;background:var(--cp-tint);color:var(--cp-body);
  transition:background .2s,color .2s;
}
.cp-chip:hover{color:var(--cp-burnt)}
.cp-chip.is-active{background:var(--cp-ink);color:#fff}
.cp-search{font:inherit;font-size:.9rem;padding:10px 18px;border-radius:var(--cp-r-pill);border:1px solid var(--cp-line);background:#fff;min-width:min(100%,260px)}
.cp-search:focus{outline:none;border-color:var(--cp-orange)}
.cp-badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--cp-r-pill)}
.cp-badge--blog{background:var(--cp-tile);color:var(--cp-burnt)}
.cp-badge--news{background:var(--cp-steel-bg);color:var(--cp-steel)}
.cp-post-meta{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--cp-muted)}
.cp-empty{padding:40px 0;text-align:center;color:var(--cp-muted)}
.cp-back{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--cp-burnt);transition:gap .2s}
.cp-back:hover{gap:12px}
.cp-back svg{width:16px;height:16px}
.cp-post-foot{margin-top:38px;padding-top:22px;border-top:1px solid var(--cp-line);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:.92rem;color:var(--cp-muted)}

/* ---------------------------------------------------------------- ACA wizard
 * Progress dots and the worksheet's verdict pill. Both were dynamic style="{{...}}" holes in the
 * prototype; as classes the state lives in one attribute and nothing recomputes inline CSS. */
.cp-dots{display:flex;gap:8px;margin-bottom:18px}
.cp-dot{display:inline-block;width:34px;height:4px;border-radius:2px;background:var(--cp-line);transition:background .3s}
.cp-dot.is-on{background:var(--cp-orange)}
.cp-verdict{padding:12px 20px;border-radius:var(--cp-r-pill);font-weight:700;font-size:.95rem;background:var(--cp-tint);color:var(--cp-muted)}
/* Dark text on orange again -- see the button rules above. */
.cp-verdict--large{background:var(--cp-orange);color:var(--cp-on-orange)}
.cp-verdict--small{background:var(--cp-char-3);color:#fff}

/* Disclosure chevron on a Read more / Read less control. The prototype flipped this through a
 * dynamic style="{{chevStyle}}" hole; here it is keyed off the button's own aria-expanded, so the
 * state lives in one place and nothing has to be re-rendered. */
.cp-chev{width:13px;height:13px;flex:0 0 auto;transition:transform .2s}
[aria-expanded="true"]>.cp-chev{transform:rotate(180deg)}

/* ---------------------------------------------------------------- portal screen switcher
 * The 2026-08-28 export merged Easy-to-Use Portal's two screenshots -- a small employee frame beside
 * the copy and a wide employer frame below it -- into ONE framed viewer with arrows and a pair of
 * caption tabs. The prototype drove it from `state = { i: 1 }` through {{ slideLabel }},
 * {{ tab0Color }} and two sc-if screens; here both screens ship in the markup, the inactive one
 * carries [hidden], and -/js/redesign.js swaps them.
 * The stage is pinned to the screenshots' own 1894x950 so the frame does not resize as they swap;
 * object-fit:cover anchored to the top keeps each screenshot's header row in view. */
.cp-shots{margin-top:52px;border:1px solid var(--cp-line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 12px 28px rgba(0,51,102,.09)}
.cp-shots__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--cp-tint);border-bottom:1px solid rgba(59,47,32,.12)}
.cp-shots__dot{width:8px;height:8px;border-radius:var(--cp-r-pill);background:rgba(0,51,102,.25)}
.cp-shots__dot:first-child{background:var(--cp-orange)}
.cp-shots__label{margin-left:6px;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cp-ink)}
.cp-shots__stage{position:relative;aspect-ratio:1894/950;overflow:hidden}
.cp-shots__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
/* An author `display:block` outranks the UA sheet's [hidden]{display:none}, so the hidden screen
 * would render on top of the visible one without this. */
.cp-shots__img[hidden]{display:none}
.cp-shots__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border:0;border-radius:var(--cp-r-pill);background:rgba(0,51,102,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.18);transition:background .2s,color .2s;
}
/* The export hovers these to the fill orange with the chevron left white. Orange only carries dark
 * marks -- see --cp-on-orange -- so the fill is the export's and the chevron darkens with it. */
.cp-shots__nav:hover{background:var(--cp-orange);color:var(--cp-on-orange)}
.cp-shots__nav--prev{left:12px}
.cp-shots__nav--next{right:12px}
.cp-shots__nav svg{width:18px;height:18px}
.cp-shots__tabs{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 14px;border-top:1px solid rgba(59,47,32,.12);background:#fff}
.cp-shots__tab{font:inherit;font-size:.82rem;font-weight:700;border:0;background:none;padding:4px 2px;cursor:pointer;color:var(--cp-muted);transition:color .2s}
/* The export marks the selected tab #F57B20. That is the fill orange, which is 2.8:1 on white as
 * text -- interactive TEXT takes --cp-burnt here, the same substitution links and "Learn more"
 * already make site-wide (see the token block). */
.cp-shots__tab.is-active{color:var(--cp-burnt)}
.cp-shots__sep{width:1px;height:14px;background:rgba(59,47,32,.2)}

/* ---------------------------------------------------------------- icon sizing */
.cp-i14{width:14px;height:14px;flex:0 0 auto}
.cp-i16{width:16px;height:16px;flex:0 0 auto}
.cp-i26{width:26px;height:26px;flex:0 0 auto}

/* ---------------------------------------------------------------- header
 * Fixed, so every page carries a spacer of --cp-header-h beneath it. Hairline and shadow appear only
 * past 8px of scroll (partials.js toggles .is-scrolled). Note the burger threshold is wider here than
 * the 1080px on American Worker -- this nav is wider.
 *
 * Sizing, measured, because this bar was shipped 35px over budget:
 *
 *   logo 172.11 + nav 700.03 + actions 254.59 + two 16px gaps = 1158.73px
 *
 * It was laid out inside --cp-wrap (1180px), which leaves 1124px after the 28px side padding. With
 * nothing setting white-space, the browser paid the 35px difference by breaking five labels
 * mid-phrase -- "Complete / Solution", "Get a / Quote" -- and by squeezing the logo from its
 * intrinsic 172.11px down to 137.38px, a 20% horizontal squash of the mark.
 *
 * Three changes keep it in one line: the bar uses --cp-wrap-header, the nav gap comes down to 18px,
 * and the logo is opted out of flex shrinking so it can never be distorted again. That leaves ~81px
 * of slack at 1280px -- enough to absorb the fallback font during the swap, DPI rounding and a
 * notch of browser zoom, none of which the old zero-slack fit could survive. The burger threshold
 * moves to match: below 1280 the bar cannot hold the nav, so the drawer takes over. */
.cp-header{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--cp-header-h);
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
.cp-header.is-scrolled{border-bottom-color:var(--cp-line);box-shadow:0 6px 24px -18px rgba(58,47,32,.5)}
.cp-header__inner{
  max-width:var(--cp-wrap-header);margin:0 auto;padding:0 28px;height:var(--cp-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* The logo is the one thing here that must not be shrunk: its img is height-constrained with
 * width:auto, so any squeeze compresses the mark horizontally instead of scaling it. */
.cp-header__logo{flex:0 0 auto}
.cp-header__logo img{height:48px;width:auto;display:block}
.cp-header-spacer{height:var(--cp-header-h)}
/* Same reasoning as .cp-nav__link, but scoped to the bar: "Get a / Quote" was breaking too. Left off
 * .cp-btn globally on purpose -- in-page CTAs sit in narrow cards and grids where wrapping is the
 * right behaviour. */
.cp-header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.cp-header__actions .cp-btn{white-space:nowrap}

.cp-nav{display:flex;align-items:center;gap:18px}
.cp-nav__item{position:relative}
/* A nav label is a phrase, not a paragraph: "Complete Solution" broken across two lines reads as two
 * separate menu items. Never wrap -- if the bar ever runs out of room again, the burger is the
 * intended answer, not a two-line nav. */
.cp-nav__link{
  display:inline-flex;align-items:center;gap:5px;height:var(--cp-header-h);white-space:nowrap;
  font-size:.92rem;font-weight:500;color:var(--cp-muted);transition:color .2s;
}
.cp-nav__link:hover{color:var(--cp-burnt)}
.cp-nav__item.is-active>.cp-nav__link{color:var(--cp-burnt);box-shadow:inset 0 -3px 0 var(--cp-orange)}
.cp-nav__link svg{width:12px;height:12px;opacity:.55}

.cp-drop{
  position:absolute;top:calc(var(--cp-header-h) - 12px);left:0;min-width:236px;
  background:#fff;border:1px solid var(--cp-line);border-radius:var(--cp-r-tile);
  box-shadow:var(--cp-sh-hover);padding:10px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);visibility:hidden;
  transition:opacity .22s,transform .22s,visibility .22s;
}
.cp-nav__item:hover>.cp-drop,.cp-nav__item.is-open>.cp-drop{opacity:1;transform:translateY(0);visibility:visible}
.cp-drop a{padding:9px 13px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--cp-muted);transition:background .15s,color .15s}
.cp-drop a:hover{background:var(--cp-tint);color:var(--cp-burnt)}

/* Login dropdown — back in the bar as of the 2026-08-17 rebuild, after an earlier export had
 * collapsed it to a single pill. Right-anchored: the trigger sits at the bar's right edge, so a
 * left-anchored dropdown would overflow the viewport. */
.cp-drop--right{left:auto;right:0;min-width:290px}
.cp-login{position:relative;display:flex;align-items:center}
.cp-login__btn{cursor:pointer;font-family:inherit}
.cp-login__btn svg:last-child{width:11px;height:11px;opacity:.85}
.cp-login__item{display:block;white-space:nowrap}
/* The label keeps the dropdown's own weight/colour; only the sub-line is quieter. Both lines are
 * spans inside one anchor, so the whole two-line block stays a single click target. */
.cp-login__item>span:first-child{display:block;font-size:.9rem;font-weight:700;color:var(--cp-ink)}
.cp-login__item:hover>span:first-child{color:var(--cp-burnt)}
.cp-login__sub{display:block;margin-top:2px;font-size:.78rem;font-weight:500;color:var(--cp-muted)}
/* Drawer: stacked, and allowed to wrap — 360px cannot hold these labels on one line. */
.cp-login__stack{display:flex;flex-direction:column;gap:8px}
.cp-login__pill{justify-content:flex-start;text-align:left;white-space:normal;height:auto;padding-top:10px;padding-bottom:10px}
.cp-login__pill .cp-login__sub{color:rgba(255,255,255,.82)}

.cp-burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--cp-line);border-radius:11px;cursor:pointer;color:var(--cp-ink);
}
.cp-burger svg{width:20px;height:20px}

.cp-scrim{position:fixed;inset:0;background:rgba(20,16,12,.5);z-index:940;opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s}
.cp-scrim.is-open{opacity:1;visibility:visible}
.cp-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:950;background:#fff;
  box-shadow:-20px 0 50px -30px rgba(58,47,32,.5);display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.cp-drawer.is-open{transform:translateX(0)}
.cp-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--cp-line)}
.cp-drawer__close{background:transparent;border:0;cursor:pointer;width:40px;height:40px;color:var(--cp-ink)}
.cp-drawer__close svg{width:22px;height:22px}
.cp-drawer__body{padding:12px 10px 26px;display:flex;flex-direction:column}
.cp-drawer__group>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:inherit;font-size:1rem;font-weight:600;color:var(--cp-ink);
  background:transparent;border:0;cursor:pointer;padding:13px 14px;text-align:left;
}
.cp-drawer__group>button svg{width:16px;height:16px;transition:transform .2s}
.cp-drawer__group.is-open>button svg{transform:rotate(180deg)}
.cp-drawer__sub{display:none;flex-direction:column;padding:0 0 8px 14px}
.cp-drawer__group.is-open .cp-drawer__sub{display:flex}
.cp-drawer__sub a,.cp-drawer__link{padding:10px 14px;font-size:.94rem;color:var(--cp-muted)}
.cp-drawer__sub a:hover,.cp-drawer__link:hover{color:var(--cp-burnt)}
.cp-drawer__foot{margin-top:10px;padding:14px;border-top:1px solid var(--cp-line);display:flex;flex-direction:column;gap:10px}
.cp-drawer__phone{font-size:.86rem;color:var(--cp-muted)}
.cp-drawer__phone b{display:block;color:var(--cp-ink);font-size:1.02rem}

/* Paired with --cp-wrap-header: one under the width at which the bar can hold the nav in one line. */
@media (max-width:1279px){
  .cp-nav,.cp-header__actions{display:none}
  .cp-burger{display:inline-flex}
}

/* ---------------------------------------------------------------- footer */
.cp-footer{background:var(--cp-tint);border-top:1px solid var(--cp-line);padding:64px 0 30px}
.cp-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:34px}
.cp-footer h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-ink);margin:0 0 14px}
.cp-footer__col{display:flex;flex-direction:column}
.cp-footer__col a{font-size:.92rem;color:var(--cp-muted);padding:5px 0;transition:color .2s,padding-left .2s}
.cp-footer__col a:hover{color:var(--cp-burnt);padding-left:4px}
.cp-footer__blurb{font-size:.88rem;color:var(--cp-muted);margin:12px 0 16px}
.cp-social{display:flex;gap:10px}
.cp-social a{
  width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--cp-line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--cp-burnt);
  transition:background .2s,color .2s,border-color .2s;padding:0;
}
.cp-social a:hover{background:var(--cp-burnt);color:#fff;border-color:var(--cp-burnt);padding-left:0}
.cp-social svg{width:16px;height:16px}
.cp-social img{width:18px;height:18px;display:block}
.cp-footer__bar{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--cp-line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.82rem;color:var(--cp-muted);
}

/* ---------------------------------------------------------------- reduced motion
 * The handoff flagged this as outstanding; every lift and slide above is decorative. */
@media (prefers-reduced-motion:reduce){
  body.cp *,body.cp *::before,body.cp *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  body.cp a.cp-card:hover,body.cp .cp-card--link:hover,body.cp .cp-btn:hover,
  body.cp .cp-calccard:hover{transform:none}
}