/*
  Base element styles and utilities, copied from the approved Hybrid design
  (design-concepts/homepage/hybrid.html, "Base"). Load after tokens.css.
*/

*, *::before, *::after { box-sizing: border-box; }
/* Every page opens on a dark hero: paint the canvas dark from the first frame, so it never flashes light before the hero */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--deep); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color 0.4s ease, color 0.4s ease;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 800; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(250, 97, 34, 0.85); color: var(--on-orange); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: fixed; left: 12px; top: -80px; z-index: 60; padding: 12px 18px; border-radius: 999px; background: var(--orange); color: var(--on-orange); font-weight: 700; text-decoration: none; transition: top 0.3s var(--ease); }
.skip:focus { top: 12px; }
main [id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
.on-light { display: var(--show-light); }
.on-dark { display: var(--show-dark); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The skip link moves focus to <main tabindex="-1">; the whole region needs no focus ring */
main:focus { outline: none; }

/*
  Drag-and-drop columns. HubSpot writes .row-fluid and .span1 to .span12 for the
  columns editors create. Columns stack on small screens and sit side by side
  from 768px, separated by --col-gap. Sections are full width: each module
  brings its own .wrap, so full-bleed backgrounds work.
*/
.row-fluid { --col-gap: var(--gutter); display: flex; flex-wrap: wrap; width: 100%; }
.row-fluid [class*="span"] { min-height: 1px; width: 100%; }
@media (min-width: 768px) {
  .row-fluid { flex-wrap: nowrap; column-gap: var(--col-gap); }
  .row-fluid .span1 { width: calc(100% * 1 / 12 - var(--col-gap) * 11 / 12); }
  .row-fluid .span2 { width: calc(100% * 2 / 12 - var(--col-gap) * 10 / 12); }
  .row-fluid .span3 { width: calc(100% * 3 / 12 - var(--col-gap) * 9 / 12); }
  .row-fluid .span4 { width: calc(100% * 4 / 12 - var(--col-gap) * 8 / 12); }
  .row-fluid .span5 { width: calc(100% * 5 / 12 - var(--col-gap) * 7 / 12); }
  .row-fluid .span6 { width: calc(100% * 6 / 12 - var(--col-gap) * 6 / 12); }
  .row-fluid .span7 { width: calc(100% * 7 / 12 - var(--col-gap) * 5 / 12); }
  .row-fluid .span8 { width: calc(100% * 8 / 12 - var(--col-gap) * 4 / 12); }
  .row-fluid .span9 { width: calc(100% * 9 / 12 - var(--col-gap) * 3 / 12); }
  .row-fluid .span10 { width: calc(100% * 10 / 12 - var(--col-gap) * 2 / 12); }
  .row-fluid .span11 { width: calc(100% * 11 / 12 - var(--col-gap) * 1 / 12); }
  .row-fluid .span12 { width: 100%; }
}