/* Blushush shared chrome: fonts, design tokens, site nav, site footer.
   Loaded on every page, including the 301 still on the old design, so the
   navigation is consistent across the whole site while the pages are redesigned
   one at a time.

   Every selector here is rd- prefixed and self-contained. It deliberately does
   NOT use the generic names the page-level stylesheet uses (.body, .link, .btn),
   because .body and .link already exist in blushush.webflow.css and restyling
   them would change old pages. Nothing in this file depends on an ancestor
   carrying class="rd". */

/* ---------- fonts, all local ---------- */
@font-face{font-family:'TT Trailers';src:url('../fonts/TT-Trailers-Bold.woff2') format('woff2'),url('../fonts/TT-Trailers-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens, global so both stylesheets can read them ---------- */
:root{
  --ink:#0A0A0A; --paper:#F7F7F4; --lime:#D1FD68; --blue:#3665FB;
  --body-on-paper:#2B2B28; --muted-on-paper:#565650;
  --body-on-ink:#C9C9C1; --muted-on-ink:#8A8A80;
  --rule-on-paper:rgba(10,10,10,.14); --rule-on-ink:rgba(255,255,255,.18);
  --rule-on-ink-soft:rgba(255,255,255,.14);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;
  --shell:1280px; --narrow:1040px; --gutter:40px;
  --display:'TT Trailers',Impact,sans-serif;
  --text:'General Sans',Helvetica,Arial,sans-serif;
}

.rd-nav,.rd-nav *,.rd-foot,.rd-foot *{box-sizing:border-box}
.rd-nav img,.rd-foot img{max-width:100%;display:block}

/* ---------- buttons: one architecture for the whole site ----------
   <a|button class="rd-btn rd-btn--{variant} [rd-btn--sm] [rd-btn--icon]">
     [<svg class="rd-btn__icon" aria-hidden="true">]  Label  [<svg class="rd-btn__icon">]
   Variants (colour only, same shape everywhere):
     lime    primary action            ink     primary action on lime/paper
     ghost   secondary, on dark        outline secondary, on light
   Sizes: default 52px tall; --sm 44px (compact rails); --icon square, needs aria-label.
   States: hover, pressed, visible focus ring, disabled / aria-disabled.
   Lives in chrome.css so old-design pages get exactly the same button. */
.rd-btn{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;min-height:52px;min-width:44px;padding:0 28px;margin:0;
  border:1px solid transparent;border-radius:2px;background:transparent;
  font:600 1rem/1.2 var(--text);letter-spacing:0;text-transform:none;text-align:center;
  text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,filter .15s}
.rd-btn:active{transform:translateY(1px)}
.rd-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rd-btn[disabled],.rd-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.rd-btn__icon{width:16px;height:16px;flex:none}
.rd-btn--lime{background:var(--lime);color:var(--ink)}
.rd-btn--ink{background:var(--ink);color:#fff}
.rd-btn--lime:hover,.rd-btn--ink:hover{filter:brightness(.94)}
.rd-btn--ink:focus-visible{outline-color:var(--ink)}
.rd-btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.rd-btn--ghost:hover{border-color:#fff}
.rd-btn--ghost:focus-visible{outline-color:var(--lime)}
.rd-btn--outline{color:var(--ink);border-color:var(--ink)}
.rd-btn--outline:hover{background:var(--ink);color:#fff}
.rd-btn--sm{min-height:44px;padding:0 20px}
.rd-btn--icon{padding:0;width:52px}
.rd-btn--icon.rd-btn--sm{width:44px}
.rd-btn--icon img{width:16px;height:16px}
.rd-btn--outline:hover img{filter:invert(1)}

/* ---------- nav ---------- */
.rd-nav{background:var(--ink);position:relative;z-index:60;font-family:var(--text)}
.rd-nav__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  max-width:calc(var(--shell) + (var(--gutter) * 2));margin:0 auto;padding:20px var(--gutter)}
.rd-nav__logo{display:inline-flex;align-items:center;min-height:44px}
.rd-nav__logo img{height:28px;width:auto}
.rd-nav__links{display:flex;align-items:center;gap:var(--s6)}
.rd-nav__link,.rd-nav__disclosure{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font:500 .9375rem var(--text);color:#fff;text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer}
.rd-nav__link:hover,.rd-nav__disclosure:hover{color:var(--lime)}
.rd-nav__caret{color:var(--lime)}

.rd-nav__panel{background:var(--paper);border-top:1px solid var(--rule-on-paper);
  border-bottom:1px solid var(--rule-on-paper)}
.rd-nav__panel[hidden]{display:none}
.rd-nav__panel-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.9fr);gap:var(--s6);
  max-width:calc(var(--shell) + (var(--gutter) * 2));margin:0 auto;padding:var(--gutter)}
.rd-nav__col h2,.rd-nav__col .rd-nav__coltitle{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--s3);max-width:none}
.rd-nav__col h2 a,.rd-nav__col .rd-nav__coltitle a{color:var(--ink);text-decoration:none}
.rd-nav__col h2 a:hover,.rd-nav__col .rd-nav__coltitle a:hover{color:var(--blue)}
.rd-nav__note{font:400 .9375rem/1.55 var(--text);color:var(--body-on-paper);margin:0;max-width:44ch}
.rd-nav__col ul{list-style:none;margin:var(--s5) 0 0;padding:0}
.rd-nav__col li a{display:flex;align-items:center;min-height:44px;
  font:500 .9375rem var(--text);color:var(--body-on-paper);text-decoration:none}
.rd-nav__col li a:hover{color:var(--blue)}
.rd-nav__col--rule{border-left:1px solid var(--rule-on-paper);padding-left:var(--s6)}
.rd-nav__cta-wrap{margin:var(--s5) 0 0}
.rd-nav__company{display:none}
/* the rd page stylesheet sizes every h2 under .rd; pin the menu headings so
   they are identical on redesigned and old-design pages */
.rd-nav .rd-nav__col h2,.rd-nav__col .rd-nav__coltitle{font-size:clamp(1.75rem,2.6vw,2.5rem);max-width:none}

.rd-nav__group summary{display:flex;align-items:center;justify-content:space-between;
  min-height:44px;cursor:pointer;list-style:none;font:600 1.25rem var(--text);color:var(--ink);
  border-bottom:1px solid var(--rule-on-paper)}
.rd-nav__group summary::-webkit-details-marker{display:none}
.rd-nav__group summary::after{content:"\25BE";color:var(--blue)}
.rd-nav__group[open] summary::after{content:"\25B4"}

.rd-nav__burger{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:1px solid rgba(255,255,255,.35);
  border-radius:2px;cursor:pointer}
.rd-nav__burger span{display:block;width:18px;height:2px;background:#fff;position:relative}
.rd-nav__burger span::before,.rd-nav__burger span::after{content:"";position:absolute;
  left:0;width:18px;height:2px;background:#fff}
.rd-nav__burger span::before{top:-6px}
.rd-nav__burger span::after{top:6px}

@media (min-width:992px){ .rd-nav__group summary{display:none} }
@media (max-width:991px){
  .rd-nav__links{display:none}
  .rd-nav__burger{display:inline-flex}
  .rd-nav__panel{position:fixed;inset:64px 0 0;overflow-y:auto;z-index:70}
  .rd-nav__panel-inner{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5) var(--s5) var(--s8)}
  .rd-nav__col--rule{border-left:0;padding-left:0;border-top:1px solid var(--rule-on-paper);padding-top:var(--s5)}
  .rd-nav__group h2{display:none}
  .rd-nav .rd-nav__col h2,.rd-nav__col .rd-nav__coltitle{font-size:2rem}
  .rd-nav__col--rule   .rd-nav__company{display:block;border-top:1px solid var(--rule-on-paper);margin-top:var(--s4);padding-top:var(--s4)}
}
@media (min-width:992px) and (max-width:1279px){
  .rd-nav__panel-inner{gap:var(--s4);grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.85fr)}
  .rd-nav__col--rule{padding-left:var(--s4)}
  .rd-nav .rd-nav__col h2,.rd-nav__col .rd-nav__coltitle{font-size:1.5rem}
  .rd-nav__note{font-size:.875rem;line-height:1.5}
  .rd-nav__col li a{font-size:.8125rem;min-height:40px}
}

/* ---------- footer ---------- */
.rd-foot{background:var(--ink);color:var(--body-on-ink);padding:var(--s9) 0 var(--s6);
  font-family:var(--text)}
.rd-foot__shell{width:100%;max-width:calc(var(--shell) + (var(--gutter) * 2));margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter)}
.rd-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s7)}
.rd-foot h2,.rd-foot .rd-foot__coltitle{font:600 1rem var(--text);color:#fff;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 var(--s5);max-width:none}
.rd-foot ul{list-style:none;margin:0;padding:0}
.rd-foot li a{display:flex;align-items:center;min-height:44px;
  font:400 1rem var(--text);color:var(--body-on-ink);text-decoration:none}
.rd-foot li a:hover{color:var(--lime)}
.rd-foot__mark{margin:var(--s9) 0 var(--s6)}
.rd-foot__mark img{width:100%;height:auto;filter:invert(1)}
.rd-foot__bottom{border-top:1px solid var(--rule-on-ink);padding-top:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;align-items:center}
.rd-foot__copy{font:500 .875rem var(--text);color:var(--body-on-ink);margin:0}
.rd-foot__bottom a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--body-on-ink);text-decoration:none;font:400 .9375rem var(--text)}
.rd-foot__bottom a:hover{color:var(--lime)}

/* ---------- focus ---------- */
.rd-nav a:focus-visible,.rd-nav button:focus-visible,.rd-nav summary:focus-visible,
.rd-foot a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ---------- no-JS fallback ----------
   The panel is hidden by default and revealed by the disclosure script. Without
   JS that would leave mobile with no navigation, because the desktop links are
   hidden below 991px. So when the script has not run, the panel renders inline. */
.no-js .rd-nav__panel[hidden]{display:block}
.no-js .rd-nav__panel{position:static;inset:auto;max-height:none}
.no-js .rd-nav__disclosure,.no-js .rd-nav__burger{display:none}

@media (max-width:767px){
  .rd-foot{padding-left:0;padding-right:0}
}

/* nav compact: slimmer sticky bar */
.rd-nav__bar{padding-top:10px;padding-bottom:10px}
.rd-nav__links .rd-btn{min-height:46px}

/* ---------- forms ----------
   Text Input / Textarea specs: visible label above the control, required marked
   in text as well as colour, helper text tied with aria-describedby, 2px focus
   ring at 3:1, error state carries an icon and a message, 44px+ targets. */
.rd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rd-form{max-width:760px}
.rd-form__note{font:400 .9375rem/1.6 var(--text);color:var(--muted-on-paper);margin:0 0 var(--s7)}
.rd-fieldset{border:0;padding:0;margin:0 0 var(--s8);min-width:0}
.rd-fieldset:last-of-type{margin-bottom:var(--s7)}
.rd-legend{display:flex;align-items:center;gap:var(--s3);width:100%;padding:0 0 var(--s5);margin:0 0 var(--s5);
  border-bottom:1px solid var(--rule-on-paper);font:600 1.125rem/1.3 var(--text);color:var(--ink)}
.rd-legend__num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:var(--ink);color:#fff;font:600 .8125rem/1 var(--text)}
.rd-fieldset__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.rd-field{display:flex;flex-direction:column;grid-column:1/-1;min-width:0}
.rd-field--half{grid-column:span 1}
.rd-field__label{font:600 .9375rem/1.4 var(--text);color:var(--ink);margin-bottom:6px}
.rd-field__req{color:#B3261E;margin-left:2px}
.rd-field__opt{font:400 .8125rem var(--text);color:var(--muted-on-paper);margin-left:6px}
.rd-field__help{font:400 .8125rem/1.5 var(--text);color:var(--muted-on-paper);margin:0 0 6px}
.rd-input{box-sizing:border-box;width:100%;min-height:48px;padding:12px 14px;
  font:400 1rem/1.5 var(--text);color:var(--ink);background:#fff;
  border:1px solid var(--rule-on-paper);border-radius:2px;transition:border-color .15s,box-shadow .15s}
.rd-input::placeholder{color:#737370}
.rd-input:hover{border-color:rgba(10,10,10,.34)}
.rd-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px var(--blue)}
.rd-input:focus-visible{outline:none}
.rd-input--area{min-height:96px;resize:vertical}
.rd-input[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 1px #B3261E}
/* focus must stay visible even while the field is in error */
.rd-input[aria-invalid="true"]:focus{box-shadow:0 0 0 2px var(--blue)}
.rd-input:disabled{opacity:.6;cursor:not-allowed}
.rd-field__error{display:flex;align-items:flex-start;gap:6px;font:500 .8125rem/1.5 var(--text);color:#B3261E;margin:6px 0 0}
.rd-field__error::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-top:1px;border-radius:50%;background:#B3261E;color:#fff;font:700 .6875rem/1 var(--text)}
.rd-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5)}
.rd-form__meta{font:400 .875rem var(--text);color:var(--muted-on-paper);margin:0}
@media (max-width:639px){ .rd-fieldset__grid{grid-template-columns:1fr} }

/* /ai/apply: interim apply block while the audit form has no destination */
.rd-applybox{max-width:640px;border:1px solid var(--rule-on-paper);border-radius:4px;padding:var(--s7)}
.rd-applybox__title{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.05;color:var(--ink);margin:var(--s4) 0 var(--s4);max-width:22ch}
.rd-applybox .body{margin:0 0 var(--s6);color:var(--body-on-paper)}
.rd-applybox__meta{font:400 .875rem var(--text);color:var(--muted-on-paper);margin:var(--s4) 0 0}
