/* The American Worker — redesign stylesheet.
 *
 * Implements the design delivered in the Claude Design handoff (navy + red, Rubik, card-based
 * layouts) as real classes. The handoff's prototypes carried ~1,200 inline style attributes and
 * explicitly asked that they NOT be ported literally; every value below is taken from its documented
 * token and component tables, so this file is the single place to change the look.
 *
 * Conventions:
 *   - everything is prefixed `aw-` so it cannot collide with the OnePress/Elementor CSS that is
 *     still present on the pages not yet ported;
 *   - layout is flex/grid with `gap`, never margin-spaced siblings;
 *   - 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:
 * the rest of the site serves its own fonts and makes no third-party requests, and the app services
 * sit behind Front Door with locked-down origins. */
@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{
  --aw-navy:#003366;          /* buttons, links, active nav, icon glyphs, gradient start */
  --aw-navy-deep:#001B31;     /* gradient end on dark bands */
  --aw-navy-ink:#12294A;      /* all headings, strong body text */
  --aw-navy-band:#0B2440;     /* full-bleed dark section background */
  --aw-navy-hover:#002347;    /* primary button hover */
  --aw-login:#0B2545;         /* header/drawer "Log In" pill fill */
  --aw-login-edge:#061B33;    /* its hairline, and its hover fill */
  --aw-red:#B22A2B;           /* eyebrow rules, active-nav underline, emphasis */
  --aw-red-hero-1:#C0393A;
  --aw-red-hero-2:#A62526;
  --aw-red-hero-3:#8F1F20;
  --aw-body:#1A2B3C;          /* default body copy */
  --aw-body-long:#31445A;     /* article / legal paragraph text */
  --aw-muted:#4A5768;         /* secondary copy, captions, idle nav */
  --aw-tint:#EEF3F9;          /* page hero, footer, alternating section */
  --aw-tile:#DCEAFF;          /* icon chips, tags, Blog badge background */
  --aw-on-dark:#BCD7F2;       /* eyebrow text and links on navy/red */
  --aw-stat-accent:#8FBEEF;   /* stats-band figures and the "+" glyph */
  --aw-line:rgba(0,51,102,.14);
  --aw-line-strong:rgba(0,51,102,.18);

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

  --aw-sh-card:0 8px 30px -18px rgba(0,35,71,.25);
  --aw-sh-hover:0 14px 40px -16px rgba(0,35,71,.25);
  --aw-sh-btn:0 8px 22px -10px rgba(0,35,71,.5);

  --aw-header-h:74px;
  --aw-wrap:1180px;
}

/* ---------------------------------------------------------------- base */
.aw *,.aw *::before,.aw *::after{box-sizing:border-box}
body.aw{
  margin:0;font-family:Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--aw-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.aw a` rule scores 0,1,2 and
 * therefore outranks every single-class component rule (.aw-btn--primary, .aw-nav__link,
 * .aw-link-row, .aw-back ... all 0,1,0), silently replacing their colour with the body colour.
 * Measured on the built chc-landing page before this fix: the primary button rendered #1A2B3C
 * text on #003366, a contrast ratio of 1.14:1 against WCAG AA's 4.5:1 minimum. :where() still
 * beats the UA default -- author rules always do -- while losing to anything naming a class. */
:where(body.aw a){color:inherit;text-decoration:none}
:where(body.aw a:hover){color:var(--aw-navy)}
body.aw img{max-width:100%}
body.aw h1,body.aw h2,body.aw h3,body.aw h4,body.aw p,body.aw ul,body.aw ol,body.aw figure{margin:0;padding:0}
body.aw ul,body.aw ol{list-style:none}

/* Keyboard users must be able to see where they are. The repo added this ring while the prototypes
 * still styled input focus only; THIS export adopted one of its own, in brand red rather than
 * translucent navy, so the two now agree on the design's value. */
body.aw :focus-visible{outline:3px solid var(--aw-red);outline-offset:2px;border-radius:4px}

/* Skip to main content. Off-screen until focused, then it drops in at the top-left corner over the
 * fixed header; assets/partials.js emits both the link and its #main target so every page on the
 * site has one, not only the pages this export ships. Named .aw-skip rather than the export's
 * unprefixed .skip-link to match the one naming convention this whole file keeps. */
.aw-skip{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--aw-navy);color:#fff;
  font-weight:700;font-size:.9rem;padding:12px 20px;border-radius:0 0 10px 0;
}
.aw-skip:focus{left:0}
:where(body.aw .aw-skip:hover),:where(body.aw .aw-skip:focus){color:#fff}
/* #main is a focus target only -- it must not become a tab stop or take a visible ring of its own. */
#main:focus{outline:none}

/* Respect a reduced-motion preference: neutralise every transition and animation rather than
 * enumerate them, so the card lifts, the nav dropdowns, the drawer slide and the slider all settle
 * instantly instead of moving. New in this export, and the last open item on the handoff's
 * interaction table. */
@media (prefers-reduced-motion:reduce){
  body.aw,body.aw *{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------- layout */
.aw-container{max-width:var(--aw-wrap);margin:0 auto;padding:0 28px}
.aw-container--narrow{max-width:820px}
.aw-section{padding:76px 0}
.aw-section--tight{padding:56px 0}
.aw-section--tint{background:var(--aw-tint)}
.aw-stack{display:flex;flex-direction:column;gap:16px}
.aw-stack--lg{gap:26px}

/* Card grids. The min(100%, X) guard stops a fixed minimum from overflowing narrow viewports. */
.aw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.aw-grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
/* The post-card grid is auto-FILL, which is what the export writes on the blog index and what the
 * handoff spells out. It matters because this is the one grid whose item count changes at runtime:
 * under auto-fit, filtering the blog to a single match stretched that one card across the full
 * 1124px container, and the twelve one- and two-post tag archives sharing this class looked the
 * same way. Scoped with :has() rather than by editing 56 archive pages, and rather than
 * changing .aw-grid--wide itself -- chc-landing uses that class for a fixed pair of image cards
 * that should keep filling the row. Where :has() is unsupported this falls back to the auto-fit
 * line above, i.e. exactly today's rendering. */
.aw-grid--wide:has(.aw-post-card){grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.aw-grid--narrow{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}

/* Body + sidebar detail pages. */
.aw-split{display:flex;flex-wrap:wrap;gap:44px}
.aw-split__body{flex:1 1 540px;min-width:0}
.aw-split__aside{flex:1 1 300px;max-width:400px;align-self:start;display:flex;flex-direction:column;gap:20px}

/* ---------------------------------------------------------------- typography */
/* The red 22x2 rule before an uppercase label is the signature brand device; it precedes nearly
 * every section heading, so it lives on the eyebrow itself rather than being repeated in markup. */
.aw-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--aw-navy-ink);
}
.aw-eyebrow::before{content:"";width:22px;height:2px;background:var(--aw-red);display:inline-block;flex:0 0 auto}
/* On navy and red fields only the label lightens -- the rule stays red, which is what the design
 * shows on both dark bands that carry an eyebrow (the homepage Customers panel and About Us). */
.aw-eyebrow--on-dark{color:var(--aw-on-dark)}
a.aw-eyebrow:hover{color:var(--aw-navy)}

/* Breadcrumb trail in the interior page hero. This export replaced the single parent-section eyebrow
 * ("Our Services") with the full trail, so the eyebrow now doubles as navigation; it keeps the red
 * rule, and the separators and the current page are dimmer than the links. */
.aw-crumbs a{transition:color .2s}
.aw-crumbs a:hover{color:var(--aw-red)}
.aw-crumbs__sep{color:#8399B2;font-weight:500}
.aw-crumbs__here{color:var(--aw-muted)}

.aw-h1{font-size:clamp(2.3rem,4vw,3.2rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--aw-navy-ink);max-width:17em}
.aw-h1--hero{font-size:clamp(2.2rem,3.9vw,3.3rem);color:#fff;max-width:14em}
.aw-h2{font-size:clamp(2rem,3.4vw,2.85rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--aw-navy-ink)}
.aw-h2--sub{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.aw-h3{font-size:1.18rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--aw-navy-ink)}
.aw-lead{font-size:1.12rem;color:var(--aw-muted);max-width:46em}
.aw-body{font-size:1.02rem;color:var(--aw-muted)}
.aw-small{font-size:.82rem;color:var(--aw-muted)}
.aw-on-dark{color:#fff}
.aw-on-dark .aw-h2,.aw-on-dark .aw-h3{color:#fff}
.aw-on-dark p,.aw-on-dark .aw-lead{color:var(--aw-on-dark)}

/* Paragraph rhythm. The prototypes set margin-top per paragraph rather than using a flow rule;
 * these three cover almost every occurrence. */
.aw-p{font-size:1.02rem;color:var(--aw-body-long);margin-top:12px}
/* Two paragraph rhythms, not one. The repo originally collapsed the export's 12px and 14px muted
 * paragraphs into a single 14px class -- a reasonable normalisation at the time, since the two were
 * only 2px apart. The 2026-08-14 export then pulled them further apart, to 16px and 20px, and the
 * merged class could no longer express both: whichever value it took, ten or nineteen paragraphs
 * were wrong.
 *
 * That is why four consecutive syncs left this unapplied. It does not look like a value change, it
 * looks like a refactor, and a reconcile comparing one page at a time sees a 2px discrepancy with
 * no obvious safe edit. Splitting the class is the fix; --gap carries the wider rhythm the design
 * uses to open a new thought after a heading or a list.
 *
 * The 10 elements on 8 pages that take --gap were identified by matching paragraph TEXT between
 * the export and the repo, which is the only correspondence that survives the inline-to-class
 * transformation -- font-size and colour are identical across both groups. */
.aw-p--muted{font-size:1rem;color:var(--aw-muted);margin-top:16px}
.aw-p--muted-gap{margin-top:20px}
.aw-p--sm{font-size:.95rem;color:var(--aw-muted);margin-top:10px}
.aw-p--card{font-size:.92rem;color:var(--aw-muted);margin-top:9px}
.aw-red{color:var(--aw-red)}
.aw-label{display:block;font-size:.82rem;font-weight:600;color:var(--aw-navy-ink);margin-bottom:6px}

.aw-p--xs{font-size:.88rem;color:var(--aw-muted);margin-top:5px}
.aw-h4{font-size:1.02rem;font-weight:800;color:var(--aw-navy-ink)}
.aw-h3--lg{font-size:1.4rem;line-height:1.2}
.aw-h3--spaced{margin-top:34px}
/* Small uppercase label above a sub-section (no red rule -- that is the eyebrow's job). */
.aw-sublabel{font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aw-navy-ink);margin-bottom:10px}
/* Kicker above a heading INSIDE a card, introduced by the Support and Technology / Employee Tools
 * pages. Unlike .aw-sublabel it is deliberately dimmer than the heading it introduces. */
.aw-kicker{font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8399B2}
/* Tinted call-out closing a detail page's body column ("Service you can measure"). Uses the pale
 * tint rather than a bordered white card so it reads as a break in the flow, not another item in it. */
.aw-panel{background:var(--aw-tint);border-radius:var(--aw-r-card);padding:28px 26px}
/* Red uppercase role line under a name (executive team). */
.aw-role{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aw-red);margin-top:4px}

/* Bio card: circular portrait beside the text, wrapping on narrow viewports. */
.aw-bio{background:#fff;border:1px solid var(--aw-line);border-radius:var(--aw-r-card);padding:32px;display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.aw-bio__photo{width:132px;height:132px;border-radius:50%;object-fit:cover;display:block;flex:0 0 132px}
.aw-bio__text{flex:1 1 380px;min-width:0}

/* Plain link list (sidebars, "explore" panels). */
.aw-link-row{display:block;font-size:.92rem;color:var(--aw-muted);padding:6px 0;transition:color .2s,padding-left .2s}
.aw-link-row:hover{color:var(--aw-navy);padding-left:4px}

/* Inline SVG sizing. The icons are stroke glyphs with no intrinsic size, so they need one. */
.aw-i14{width:14px;height:14px;flex:0 0 auto}
.aw-i15{width:15px;height:15px;flex:0 0 auto}
.aw-i16{width:16px;height:16px;flex:0 0 auto}
.aw-i26{width:26px;height:26px;flex:0 0 auto}

/* ---------------------------------------------------------------- buttons */
.aw-btn{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-weight:600;font-size:.95rem;line-height:1.2;
  padding:12px 22px;border-radius:var(--aw-r-pill);border:0;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.aw-btn svg{width:16px;height:16px;flex:0 0 auto}
.aw-btn--primary{background:var(--aw-navy);color:#fff;box-shadow:var(--aw-sh-btn)}
.aw-btn--primary:hover{background:var(--aw-navy-hover);color:#fff;transform:translateY(-2px)}
/* The "Log In" pill in the header and the mobile drawer. This export gave it its own darker,
 * bordered navy instead of the generic primary: a #061B33 hairline, inverting to that same colour on
 * hover, with a smaller 1px lift and no drop shadow, so it reads as chrome rather than a page CTA. */
.aw-btn--login{
  background:var(--aw-login);color:#fff;font-weight:700;padding:11px 22px;
  border:1.5px solid var(--aw-login-edge);white-space:nowrap;
}
.aw-btn--login:hover{background:var(--aw-login-edge);color:#fff;transform:translateY(-1px)}
/* The drawer's second login pill (the claims portal). Outlined rather than filled so the two read as
 * a pair with one clear primary; same geometry as .aw-btn--login, inverted. It is deliberately not
 * .aw-btn--secondary, which is transparent with a heavier border and lifts 2px like a page CTA. */
.aw-btn--login-alt{
  background:#fff;color:var(--aw-navy-ink);font-weight:700;padding:11px 22px;
  border:1.5px solid rgba(0,51,102,.22);white-space:nowrap;
}
.aw-btn--login-alt:hover{background:var(--aw-tint);color:var(--aw-navy-ink);transform:translateY(-1px)}
.aw-btn--secondary{background:transparent;color:var(--aw-navy);border:1.5px solid rgba(0,51,102,.3)}
.aw-btn--secondary:hover{background:var(--aw-tint);color:var(--aw-navy);transform:translateY(-2px)}
/* On navy or red fields the primary flips to white fill. */
.aw-btn--on-dark{background:#fff;color:var(--aw-navy-ink);box-shadow:var(--aw-sh-btn)}
.aw-btn--on-dark:hover{background:#fff;color:var(--aw-navy-ink);transform:translateY(-2px)}
.aw-btn--ghost-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.aw-btn--ghost-dark:hover{background:#fff;color:var(--aw-navy-ink);transform:translateY(-2px)}
/* The homepage hero's white pill. Distinct from .aw-btn--on-dark because it sits on the red field
 * rather than a navy band: its shadow is keyed to black instead of navy, and deepens on hover. */
.aw-btn--hero{background:#fff;color:var(--aw-navy-ink);box-shadow:0 8px 22px -10px rgba(0,0,0,.4)}
.aw-btn--hero:hover{
  background:#fff;color:var(--aw-navy-ink);transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
}
.aw-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------------------------------------------------------------- cards */
.aw-card{
  background:#fff;border:1px solid var(--aw-line);border-radius:var(--aw-r-card);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;
}
a.aw-card,.aw-card--link{transition:transform .3s,box-shadow .3s}
a.aw-card:hover,.aw-card--link:hover{transform:translateY(-6px);box-shadow:var(--aw-sh-hover);color:inherit}
.aw-card--standing{box-shadow:var(--aw-sh-card)}
.aw-card--sm{border-radius:16px;padding:20px 22px}
/* Customer tiles inside the homepage's inset navy band. Solid pale-blue fill rather than a
 * translucent one, so the copy carries navy-on-light contrast against the gradient; the lift is 4px
 * and the fill brightens to white instead of casting a shadow, which would be invisible on navy. */
.aw-card--on-navy{
  background:#EEF3F9;border:1px solid rgba(255,255,255,.4);
  border-radius:var(--aw-r-card);padding:26px 24px;display:block;
  transition:background .3s,transform .3s;
}
.aw-card--on-navy:hover{background:#fff;transform:translateY(-4px);color:inherit}
.aw-card__icon{
  width:52px;height:52px;border-radius:var(--aw-r-tile);background:var(--aw-tile);
  display:flex;align-items:center;justify-content:center;color:var(--aw-navy);flex:0 0 auto;
}
.aw-card__icon svg{width:26px;height:26px}
/* Two sizes the service pages introduced alongside the 52px default: 48px above a card heading
 * (/communications/'s four tool cards) and 56px beside one (/premium-administration/'s two billing
 * models, which lay the icon out in a row with the copy rather than stacked above it). */
.aw-card__icon--sm{width:48px;height:48px}
.aw-card__icon--sm svg{width:24px;height:24px}
.aw-card__icon--lg{width:56px;height:56px;border-radius:16px}
.aw-card__icon--lg svg{width:28px;height:28px}
/* Icon beside the copy instead of above it. The body column keeps min-width:0 so a long word cannot
 * set the flex item's minimum and push the icon off the card. */
.aw-card--row{flex-direction:row;gap:22px;flex-wrap:wrap}
.aw-card--row>div{flex:1 1 300px;min-width:0}
.aw-card__body{font-size:.92rem;color:var(--aw-muted)}
.aw-card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:.85rem;font-weight:600;color:var(--aw-navy);
}
.aw-card__more svg{width:16px;height:16px}

/* Image-topped card: the wide source banners crop badly from the centre, so faces stay in frame. */
.aw-card--image{padding:0;overflow:hidden}
.aw-card--image>img{width:100%;aspect-ratio:10/6.5;object-fit:cover;display:block}
.aw-card--image .aw-card__pad{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.aw-card--banner>img{aspect-ratio:10/5.5;object-position:right center}
/* Illustration-topped card (the employee tools grid). The sources are portrait phone screenshots:
 * this export stopped letterboxing them inside a landscape box -- which had left a padded band of
 * tint above and below -- and crops them tall from the top instead, so the screen content that
 * identifies each card stays in frame. The tint remains as the backdrop behind any narrower art. */
.aw-card--illus>img{object-fit:cover;object-position:top center;background:var(--aw-tint)}
.aw-card--illus-wide>img{aspect-ratio:10/4.4}

/* Carrier logo tile. This export replaced the single composite logo strip with one tile per carrier,
 * so the logos scale independently: max-height caps the tall ones, max-width the wide ones, and
 * width/height auto keeps each mark's own aspect ratio. */
.aw-logo-tile{
  background:#fff;border:1px solid var(--aw-line);border-radius:16px;padding:22px 20px;
  display:grid;place-items:center;min-height:120px;
}
.aw-logo-tile img{max-width:100%;max-height:56px;width:auto;height:auto;display:block}

/* ---------------------------------------------------------------- checklist rows */
.aw-check{
  display:flex;gap:10px;align-items:center;
  background:#fff;border:1px solid var(--aw-line);border-radius:12px;padding:13px 16px;
  font-size:.93rem;font-weight:500;color:var(--aw-navy-ink);
}
.aw-check svg{width:16px;height:16px;color:var(--aw-red);flex:0 0 auto}

/* Red-check bullet list introduced by the markets pages. Deliberately not .aw-check: that is the
 * boxed white card row, and here the design wants a plain list with a larger 18px check. */
.aw-ticks{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.aw-tick{display:flex;gap:12px;align-items:flex-start}
.aw-tick svg{width:18px;height:18px;flex:0 0 auto;color:var(--aw-red);margin-top:3px}
.aw-tick p{font-size:1rem;color:var(--aw-muted)}
.aw-ticks--sm{gap:12px}
.aw-ticks--sm .aw-tick p{font-size:.95rem}
/* Same rows laid out in columns rather than one stack, for the longer lists (/easy-to-use-portal/'s
 * eight employer-portal capabilities). */
.aw-ticks--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}

/* Numbered process list, introduced by the ICHRA page ("How our ICHRA works"). A tile-blue counter
 * chip beside each step. The number is in the markup rather than a CSS counter so the steps stay
 * readable with styles off, and because the design numbers them as content. */
.aw-steps{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.aw-step{display:flex;gap:16px;align-items:flex-start}
.aw-step__n{
  flex:0 0 32px;width:32px;height:32px;border-radius:var(--aw-r-pill);
  background:var(--aw-tile);color:var(--aw-navy);
  font-weight:800;font-size:.9rem;display:grid;place-items:center;
}
.aw-step p{font-size:.95rem;color:var(--aw-muted)}

/* Tile-blue pill tags ("Focused on, but not limited to" on /employers/). Distinct from .aw-chip,
 * which is the white bordered filter control on the blog index. This export turned these from inert
 * <span>s into links to the four market pages, so the hover state the prototype expressed with
 * style-hover is reproduced here as a real :hover rule. */
.aw-tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.aw-tag{
  display:inline-block;font-size:.88rem;font-weight:600;
  color:var(--aw-navy);background:var(--aw-tile);
  border-radius:var(--aw-r-pill);padding:8px 18px;transition:background .2s,color .2s;
}
a.aw-tag:hover{background:var(--aw-navy);color:#fff}

/* ---------------------------------------------------------------- comparison table
 * Introduced by /premium-administration/, which this export gave a Hybrid 360 vs Monthly Invoice
 * comparison. The prototype builds it out of fifteen <div>s on a three-column grid; it is a real
 * <table> here so the header cells are announced with their column and the thing reads as tabular
 * data rather than as fifteen unrelated paragraphs. The rounded frame the design wants clips the
 * corner cells, which a table cannot do on its own -- hence the wrapper. */
.aw-table-wrap{border:1px solid var(--aw-line);border-radius:var(--aw-r-card);overflow:hidden}
.aw-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.92rem}
.aw-table th,.aw-table td{padding:16px 18px;text-align:left;vertical-align:top}
.aw-table thead th{
  background:var(--aw-navy-ink);color:#fff;padding:14px 18px;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.aw-table tbody tr{border-top:1px solid rgba(0,51,102,.1)}
/* Zebra striping on the even rows, matching the design's #F7FAFD. */
.aw-table tbody tr:nth-child(even){background:#F7FAFD}
.aw-table tbody th{font-weight:600;color:var(--aw-navy-ink)}
.aw-table tbody td{color:var(--aw-muted)}
/* The row-label column is the widest of the three (1.1fr against 1fr and 1fr). */
.aw-table th:first-child,.aw-table td:first-child{width:35.5%}

/* ---------------------------------------------------------------- phase timeline
 * /communications/'s three-part enrolment campaign: a dot-and-rule marker over a kicker, a heading
 * and a line of copy, three across on a tinted panel. The trailing rule is what makes it read as a
 * sequence, so the LAST phase deliberately has none -- it is suppressed here rather than by omitting
 * the element, so adding or reordering a phase cannot leave a rule running off the end. */
.aw-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:22px}
.aw-phase{display:flex;flex-direction:column;gap:12px}
.aw-phase__mark{display:flex;align-items:center;gap:8px}
.aw-phase__mark::before{content:"";width:14px;height:14px;flex:none;border-radius:var(--aw-r-pill);background:var(--aw-red)}
.aw-phase__mark::after{content:"";height:2px;background:rgba(178,42,43,.35);flex:1 1 auto}
.aw-phase:last-child .aw-phase__mark::after{content:none}
/* h3 since the export's heading-hierarchy pass: these sit under the section's h2. */
.aw-phase h3{font-size:1.02rem;font-weight:800;color:var(--aw-navy-ink)}
.aw-phase p{font-size:.9rem;color:var(--aw-muted)}

/* ---------------------------------------------------------------- tabbed screenshot slider
 * /easy-to-use-portal/'s employer/employee portal screenshots. The prototype drives this from React
 * state through {{ }} holes; assets/portal.js reproduces it. Slide 1 is rendered into the markup, so
 * with JavaScript off the page still shows a labelled screenshot rather than an empty frame.
 *
 * .aw-tab is deliberately not a .aw-btn--secondary: it is a smaller uppercase control that inverts to
 * solid navy when chosen. The chosen one is marked with aria-pressed rather than by colour alone --
 * and with aria-pressed rather than the tab pattern's aria-selected, because the prev/next arrows
 * change the same image, so these are two toggle buttons over one region and not a real tablist. A
 * role="tab" would promise arrow-key navigation between them that nothing here implements. */
.aw-tabs{display:flex;gap:10px;flex-wrap:wrap}
.aw-tab{
  font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 16px;border-radius:var(--aw-r-pill);cursor:pointer;
  border:1px solid rgba(0,51,102,.22);background:#fff;color:var(--aw-muted);
  transition:background .2s,color .2s,border-color .2s;
}
.aw-tab:hover{border-color:var(--aw-navy);color:var(--aw-navy)}
.aw-tab[aria-pressed="true"]{background:var(--aw-navy);border-color:var(--aw-navy);color:#fff}
.aw-slider{
  position:relative;border-radius:var(--aw-r-card);overflow:hidden;
  background:var(--aw-tint);border:1px solid var(--aw-line);
}
.aw-slider img{width:100%;aspect-ratio:16/9;display:block;background:#fff;object-fit:cover}
.aw-slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:var(--aw-r-pill);border:0;cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:0 4px 14px -4px rgba(0,35,71,.4);
  color:var(--aw-navy-ink);display:grid;place-items:center;
}
.aw-slider__nav svg{width:16px;height:16px}
.aw-slider__nav--prev{left:12px}
.aw-slider__nav--next{right:12px}
.aw-slider__cap{font-size:.86rem;color:#8399B2}
/* Until portal.js clears data-inert on the wrapper, the tabs and the arrows would do nothing, so
 * they are not shown. Keyed off one attribute on the shared parent rather than a :has() reaching
 * back up to the tab row: an unsupported :has() invalidates the whole selector list, which would
 * have shown the dead controls in exactly the browsers least likely to run the script. */
.aw-portal[data-inert] .aw-tabs,
.aw-portal[data-inert] .aw-slider__nav{display:none}

/* ---------------------------------------------------------------- dark CTA band */
.aw-cta{
  background:linear-gradient(135deg,var(--aw-navy),var(--aw-navy-deep));
  border-radius:var(--aw-r-band);margin:0 28px;padding:56px 48px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
}
.aw-cta__text{flex:1 1 420px;display:flex;flex-direction:column;gap:10px}
.aw-cta--bleed{background:var(--aw-navy-band);border-radius:0;margin:0;padding:80px 0}

/* ---------------------------------------------------------------- stats band
 * The proof band this export adds between the homepage's Value and Markets sections: four figures on
 * navy, hairline-divided. The divider is a left border on every item after the first rather than four
 * hand-placed borders, so the rule survives a figure being added or dropped. Items keep min-width:0
 * next to width:100% -- without it a long figure sets the grid track's minimum and the band overflows
 * on narrow viewports, which is why the design's own "Thousands" tile also steps its clamp() down. */
.aw-stats{background:var(--aw-navy);padding:44px 0}
.aw-stats__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),auto));justify-items:center;
}
.aw-stat{text-align:center;padding:6px 22px;width:100%;min-width:0}
.aw-stat+.aw-stat{border-left:1px solid rgba(255,255,255,.22)}
.aw-stat__value{font-size:clamp(2.1rem,3.4vw,2.7rem);font-weight:800;line-height:1;color:#fff}
/* A whole figure in the accent, versus just the trailing "+" -- the design uses both. */
.aw-stat__value--accent{color:var(--aw-stat-accent)}
.aw-stat__mark{color:var(--aw-stat-accent)}
/* The one word-length figure: smaller floor on the clamp so it never wraps mid-word. */
.aw-stat__value--word{font-size:clamp(1.7rem,2.8vw,2.7rem);white-space:nowrap}
.aw-stat__label{margin-top:10px;font-size:.9rem;color:#fff}

/* ---------------------------------------------------------------- page hero (interior) */
.aw-page-hero{background:var(--aw-tint);padding:72px 0 60px}
.aw-page-hero .aw-h1{margin-top:16px}
.aw-page-hero .aw-lead{margin-top:16px}

/* ---------------------------------------------------------------- homepage hero
 * This export replaced the clipped red chevron field and its three stacked photo crops with a plain
 * two-column band: the red gradient is now the section's own background and the right column holds a
 * single illustration. The old .aw-hero__field / .aw-hero__copy pair went with it -- along with the
 * viewport-derived gutter maths that had produced a live one-word-per-line bug above ~2500px. The
 * remaining layout is ordinary container-and-grid and stays inline on index.html. */
.aw-hero{background:linear-gradient(165deg,var(--aw-red-hero-1) 0%,var(--aw-red-hero-2) 55%,var(--aw-red-hero-3) 100%)}

/* ---------------------------------------------------------------- product illustrations
 * The photography this export ships is illustrative rather than photographic: it must be shown whole,
 * so it is contained on the pale tint rather than cropped to fill. (Contrast .aw-card--image below,
 * whose customer banners are real photographs and still crop.) */
.aw-shot{width:100%;object-fit:contain;background:var(--aw-tint);display:block;border-radius:var(--aw-r-card)}
.aw-shot--bordered{border:1px solid rgba(0,51,102,.12)}
/* Fixed-height frame for the homepage hero art. Contained on .aw-shot alone the illustration's own
 * 3/2 ratio set the hero's height at every viewport width, so this export pinned the frame to a
 * clamped height and contains the art inside it: the fold stops moving with the artwork, and the
 * tint and radius move onto the frame because it -- not the image -- is now the visible box. */
.aw-shot-frame{width:100%;height:clamp(200px,22vw,320px);background:var(--aw-tint);border-radius:var(--aw-r-card);overflow:hidden}
.aw-shot-frame>img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------------------------------------------------------------- sidebar cards */
.aw-side{background:#fff;border:1px solid var(--aw-line);border-radius:var(--aw-r-card);padding:24px;display:flex;flex-direction:column;gap:12px}
.aw-side--navy{background:linear-gradient(135deg,var(--aw-navy),var(--aw-navy-deep));border-color:transparent;color:#fff}
.aw-side--navy .aw-h3{color:#fff}
/* `.aw-side--navy a{color:var(--aw-on-dark)}` used to live here. It was written for the sales
 * mailbox link, which the export removed (see below) -- and being 0,1,1 it outranked every 0,1,0
 * component rule inside the card, so the two anchors that are left both lost their own colour:
 * .aw-side__phone rendered #BCD7F2 instead of #fff, and the white "Contact us" pill rendered
 * #BCD7F2 text on its #fff fill -- 1.49:1, against WCAG AA's 4.5:1, on all 21 pages that carry the
 * card. Same shape as the `body.aw a` bug the :where() note near the top of this file describes.
 * Every anchor in this card now wants its component colour, so the rule is simply gone rather than
 * re-scoped; anything added here later should set its own colour or use .aw-eyebrow--on-dark. */
.aw-side__phone{display:block;margin-top:16px;font-size:1.3rem;font-weight:800;color:#fff}
/* .aw-side__email is gone with the sales mailbox this export removed from the sidebar card on all 19
 * pages that carry it; the phone number is the only sales contact there now. */
.aw-side__note{font-size:.92rem;color:rgba(255,255,255,.78);margin-top:8px}
.aw-side__list{display:flex;flex-direction:column}
.aw-side__list a{padding:10px 0;border-bottom:1px solid var(--aw-line);font-size:.93rem;color:var(--aw-muted);transition:color .2s,padding-left .2s}
.aw-side__list a:last-child{border-bottom:0}
.aw-side__list a:hover{color:var(--aw-navy);padding-left:4px}

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

/* ---------------------------------------------------------------- forms */
.aw-form{display:flex;flex-direction:column;gap:14px}
.aw-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.aw-field{display:flex;flex-direction:column;gap:6px}
.aw-field label{font-size:.82rem;font-weight:600;color:var(--aw-navy-ink)}
.aw-input,.aw-select,.aw-textarea{
  font:inherit;font-size:.95rem;color:var(--aw-body);
  padding:12px 14px;border-radius:var(--aw-r-field);
  border:1.5px solid var(--aw-line-strong);background:#fff;width:100%;
  transition:border-color .2s,background .2s;
}
.aw-form--tinted .aw-input,.aw-form--tinted .aw-select,.aw-form--tinted .aw-textarea{background:#F4F7FB}
.aw-input:focus,.aw-select:focus,.aw-textarea:focus{outline:none;border-color:var(--aw-navy);background:#fff}
.aw-textarea{min-height:120px;resize:vertical}
/* Revealed when the routing select is set to "current member" — steers benefit questions to the
 * portal and the member line instead of the sales queue. */
.aw-form__note{
  display:none;gap:10px;align-items:flex-start;
  background:var(--aw-tile);border-radius:12px;padding:13px 15px;font-size:.9rem;color:var(--aw-navy-ink);
}
.aw-form__note.is-shown{display:flex}
.aw-form__note a{color:var(--aw-navy);font-weight:600;text-decoration:underline}
.aw-form__confirm{display:none;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:34px 20px}
.aw-form__confirm.is-shown{display:flex}
.aw-form__confirm svg{width:56px;height:56px;color:var(--aw-navy)}
.aw-form__error{display:none;font-size:.9rem;color:var(--aw-red);font-weight:600}
.aw-form__error.is-shown{display:block}

/* ---------------------------------------------------------------- blog */
.aw-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.aw-chips{display:flex;gap:8px;flex-wrap:wrap}
.aw-chip{
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:8px 16px;border-radius:var(--aw-r-pill);
  border:1px solid var(--aw-line);background:#fff;color:var(--aw-muted);transition:.2s;
}
.aw-chip:hover{color:var(--aw-navy)}
.aw-chip.is-active{background:var(--aw-navy);border-color:var(--aw-navy);color:#fff}
.aw-search{
  font:inherit;font-size:.9rem;padding:10px 18px;border-radius:var(--aw-r-pill);
  border:1px solid var(--aw-line);background:#fff;min-width:min(100%,260px);
}
.aw-search:focus{outline:none;border-color:var(--aw-navy)}
.aw-badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--aw-r-pill)}
.aw-badge--blog{background:var(--aw-tile);color:var(--aw-navy)}
.aw-badge--news{background:rgba(178,42,43,.08);color:var(--aw-red)}
.aw-post-meta{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--aw-muted)}
.aw-post-card h3{font-size:1.16rem;font-weight:800;color:var(--aw-navy-ink);line-height:1.3;text-wrap:pretty}
.aw-empty{padding:40px 0;text-align:center;color:var(--aw-muted)}
/* Back link above a post title. Deliberately not .aw-eyebrow -- that class's ::before is the red
 * rule, which would sit oddly next to a back arrow. */
.aw-back{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--aw-navy);transition:gap .2s}
.aw-back:hover{gap:12px}
.aw-back svg{width:16px;height:16px}
/* Author / all-posts row closing an article. */
.aw-post-foot{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--aw-line);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:.92rem;color:var(--aw-muted);
}
.aw-post-foot b{color:var(--aw-navy-ink)}
.aw-pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:12px}
.aw-pagination a,.aw-pagination span{
  min-width:40px;padding:8px 12px;text-align:center;border-radius:10px;
  border:1px solid var(--aw-line);font-size:.9rem;font-weight:600;color:var(--aw-muted);background:#fff;
}
.aw-pagination a:hover{color:var(--aw-navy);border-color:var(--aw-navy)}
.aw-pagination .is-current{background:var(--aw-navy);border-color:var(--aw-navy);color:#fff}

/* ---------------------------------------------------------------- header
 * Fixed, so every page carries a spacer of --aw-header-h beneath it. The hairline and shadow only
 * appear once the page is scrolled past 8px (partials.js toggles .is-scrolled). */
.aw-header{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--aw-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;
}
.aw-header.is-scrolled{border-bottom-color:var(--aw-line);box-shadow:0 6px 24px -18px rgba(0,35,71,.4)}
.aw-header__inner{
  max-width:var(--aw-wrap);margin:0 auto;padding:0 28px;height:var(--aw-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.aw-header__logo{display:flex;align-items:center;flex:0 0 auto}
.aw-header__logo img{height:46px;width:auto;display:block}
.aw-header-spacer{height:var(--aw-header-h)}

.aw-nav{display:flex;align-items:center;gap:24px}
.aw-nav__item{position:relative}
.aw-nav__link{
  display:inline-flex;align-items:center;gap:5px;height:var(--aw-header-h);
  font-size:.92rem;font-weight:500;color:var(--aw-muted);transition:color .2s;
}
.aw-nav__link:hover{color:var(--aw-navy)}
.aw-nav__item.is-active>.aw-nav__link{color:var(--aw-navy);box-shadow:inset 0 -3px 0 var(--aw-red)}
.aw-nav__link svg{width:12px;height:12px;opacity:.55}

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

/* The login dropdown. It reuses .aw-drop for the panel, but it hangs off the header's button rather
 * than a full-height nav link, so it is positioned from the button's own bottom edge and aligned to
 * the right so a 232px panel cannot run off the viewport. Its rows are two lines -- destination and
 * who it is for -- instead of the nav's single labels. */
.aw-login{position:relative;flex:0 0 auto}
.aw-btn--login .aw-login__chev{width:12px;height:12px;opacity:.75}
.aw-drop--login{top:100%;left:auto;right:0;margin-top:10px}
.aw-login:hover>.aw-drop,.aw-login.is-open>.aw-drop{opacity:1;transform:translateY(0);visibility:visible}
.aw-drop--login a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 13px}
.aw-login__label{font-size:.9rem;font-weight:600;color:var(--aw-navy-ink);white-space:nowrap}
.aw-login__desc{font-size:.76rem;font-weight:400;color:#6B7787;white-space:nowrap}

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

/* Mobile drawer. Below 1080px the nav collapses; the drawer slides in over a scrim. */
.aw-scrim{
  position:fixed;inset:0;background:rgba(10,26,44,.5);z-index:940;
  opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s;
}
.aw-scrim.is-open{opacity:1;visibility:visible}
.aw-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(0,35,71,.5);
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.aw-drawer.is-open{transform:translateX(0)}
.aw-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--aw-line)}
.aw-drawer__close{background:transparent;border:0;cursor:pointer;width:40px;height:40px;color:var(--aw-navy-ink)}
.aw-drawer__close svg{width:22px;height:22px}
.aw-drawer__body{padding:12px 10px 26px;display:flex;flex-direction:column}
.aw-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(--aw-navy-ink);
  background:transparent;border:0;cursor:pointer;padding:13px 14px;text-align:left;
}
.aw-drawer__group>button svg{width:16px;height:16px;transition:transform .2s}
.aw-drawer__group.is-open>button svg{transform:rotate(180deg)}
.aw-drawer__sub{display:none;flex-direction:column;padding:0 0 8px 14px}
.aw-drawer__group.is-open .aw-drawer__sub{display:flex}
.aw-drawer__sub a,.aw-drawer__link{padding:10px 14px;font-size:.94rem;color:var(--aw-muted)}
.aw-drawer__sub a:hover,.aw-drawer__link:hover{color:var(--aw-navy)}
/* Holds the two login pills. align-items keeps each pill its own width instead of letting the flex
 * column stretch them edge to edge. */
.aw-drawer__login{margin-top:10px;padding-top:14px;border-top:1px solid var(--aw-line);display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-left:14px}

@media (max-width:1079px){
  .aw-nav,.aw-header__cta{display:none}
  .aw-burger{display:inline-flex}
}

/* ---------------------------------------------------------------- footer */
.aw-footer{background:var(--aw-tint);border-top:1px solid var(--aw-line);padding:64px 0 30px}
.aw-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:34px}
/* The three column headings. h2 since the export's heading-hierarchy pass -- the selector follows
 * the tag, so it is not left styling an element the footer no longer emits. */
.aw-footer h2{font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aw-navy-ink);margin:0 0 14px}
.aw-footer__col{display:flex;flex-direction:column}
.aw-footer__col a{font-size:.92rem;color:var(--aw-muted);padding:5px 0;transition:color .2s,padding-left .2s}
.aw-footer__col a:hover{color:var(--aw-navy);padding-left:4px}
.aw-footer__blurb{font-size:.9rem;color:var(--aw-muted);margin:12px 0 16px}
.aw-social{display:flex;gap:10px}
.aw-social a{
  width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--aw-line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--aw-navy);
  transition:background .2s,color .2s,border-color .2s;padding:0;
}
.aw-social a:hover{background:var(--aw-navy);color:#fff;border-color:var(--aw-navy);padding-left:0}
/* The glyphs need an explicit size and had none: partials.js injects the icons as bare
 * <svg viewBox="0 0 24 24"> with no width/height, and an inline SVG sized that way stretches to its
 * container rather than to its viewBox, so both icons were filling the 34px chip edge to edge
 * instead of sitting inside it. The export states the sizes inline -- 16px on LinkedIn, 17px on the
 * new YouTube mark, 18px on the FBG image. That 2px spread is the design disagreeing with itself
 * across three chips built to one size, so all three are normalised to the 17px the image rule below
 * already used. */
.aw-social a svg{width:17px;height:17px;flex:0 0 auto}
.aw-social img{width:17px;height:17px;display:block}
.aw-footer__bar{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--aw-line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:.82rem;color:var(--aw-muted);
}

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