@import url("fonts.css");

/* ==========================================================================
   Quantum Roofing Solutions
   Tokens and component styles. Values come from the brand kit.
   ========================================================================== */

:root {
  --color-quantum-orange: #b25f07;
  --color-quantum-orange-deep: #8a4500;
  /* Same hue and saturation as the brand orange, lifted so small orange text
     clears WCAG AA against the charcoal panels. */
  --color-quantum-orange-light: #d87308;
  --color-charcoal: #3b3835;
  --color-charcoal-deep: #201e1c;
  --color-off-white: #f5f5f5;
  --color-white: #ffffff;
  --color-concrete: #dad5d1;
  --color-utility-gray: #646464;
  /* Secondary text on the charcoal panels. Utility Gray is too dark there. */
  --color-utility-gray-dim: #9a948e;
  --color-orange-tint: #f3e7da;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", Arial, sans-serif;

  --radius-control: 2px;
  --radius-card: 2px;
  --content-width: 1240px;
  --gutter: 32px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --header-h: 96px;
}

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --header-h: 72px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The masthead is sticky, so anything jumped to by an anchor has to stop
   clear of it instead of underneath it. */
:target,
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-off-white);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

/* --------------------------------------------------------- type ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.005em;
  color: var(--color-charcoal-deep);
}

.h-hero {
  font-size: clamp(44px, 7.2vw, 72px);
  line-height: 0.9;
  text-transform: uppercase;
}

.h-page {
  font-size: clamp(38px, 6vw, 60px);
  line-height: 0.92;
  text-transform: uppercase;
}

.h-section {
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 0.96;
  text-transform: uppercase;
}

.h-card {
  font-size: clamp(23px, 2.4vw, 28px);
  line-height: 1.05;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-quantum-orange-deep);
  margin: 0 0 var(--space-2);
}

.lead {
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
  max-width: 62ch;
}

p {
  margin: 0 0 1em;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

small,
.small {
  font-size: 14px;
  line-height: 1.5;
}

.muted {
  color: var(--color-utility-gray);
}

a {
  color: var(--color-quantum-orange-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--color-charcoal-deep);
}

:focus-visible {
  outline: 3px solid var(--color-white);
  box-shadow: 0 0 0 5px var(--color-quantum-orange-deep);
  outline-offset: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-charcoal-deep);
  color: var(--color-white);
  padding: 12px 20px;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------- structure ------- */

.wrap {
  width: 100%;
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(56px, 6.5vw, 96px);
}

.section--tight {
  padding-block: clamp(44px, 4.5vw, 64px);
}

.section--dark {
  background: var(--color-charcoal-deep);
  color: var(--color-concrete);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

.section--dark .eyebrow {
  color: var(--color-quantum-orange-light);
}

.section--dark a {
  color: var(--color-white);
}

.section--white {
  background: var(--color-white);
}

.section--tint {
  background: var(--color-orange-tint);
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-concrete);
  margin: 0;
}

.section--dark .rule {
  border-top-color: #3a3734;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  align-items: end;
  margin-bottom: var(--space-5);
}

.section-head > :last-child {
  justify-self: start;
}

@media (max-width: 860px) {
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* --------------------------------------------------------- buttons ------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--color-quantum-orange);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-quantum-orange-deep);
  color: var(--color-white);
}

.btn--secondary {
  background: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

.btn--secondary:hover {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-charcoal-deep);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* Side by side these buttons shrink to their own labels, which on a phone
   leaves two ragged edges down the left of the screen. */
@media (max-width: 480px) {
  .btn-row .btn,
  .cta-actions .btn,
  .form .btn {
    width: 100%;
    justify-content: center;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-quantum-orange-deep);
}

.link-arrow:hover {
  color: var(--color-charcoal-deep);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

.link-arrow svg {
  transition: transform 0.15s ease;
}

.section--dark .link-arrow {
  color: var(--color-white);
}

/* ---------------------------------------------------------- header ------- */

.call-bar {
  position: sticky;
  top: 0;
  z-index: 130;
  min-height: 44px;
  background: linear-gradient(105deg, #5a2a00 0%, #a94f00 46%, #dc7a14 100%);
}

.call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 44px;
  padding: 8px var(--gutter);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  text-decoration: none;
}

.call-bar a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.call-bar-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.call-bar-icon {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 480px) {
  .call-bar a {
    gap: 14px;
    font-size: 15px;
  }
}

.masthead {
  position: sticky;
  top: 44px;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-concrete);
  transition: box-shadow 0.25s ease;
}

.masthead.is-stuck {
  box-shadow: 0 10px 26px -22px rgba(32, 30, 28, 0.95);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  flex: none;
  display: block;
  line-height: 0;
}

.brand img {
  width: 230px;
  height: auto;
}

@media (max-width: 1080px) {
  .brand img {
    width: 190px;
  }
}

@media (max-width: 900px) {
  .brand img {
    width: 178px;
  }
}

.nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Scoped to the list. The phone link further down the mobile panel is not a
   nav item and should not pick up the display face. */
.nav-list > li > a,
.nav-group-head > a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-charcoal-deep);
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nav-list > li > a:hover,
.nav-group-head > a:hover {
  border-bottom-color: var(--color-concrete);
}

.nav-list > li > a[aria-current],
.nav-group-head > a[aria-current] {
  border-bottom-color: var(--color-quantum-orange-deep);
}

.nav-group {
  position: relative;
}

.nav-group-head {
  display: flex;
  align-items: center;
}

.nav-submenu-toggle {
  display: none;
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -24px;
  z-index: 120;
  display: block;
  width: min(360px, 38vw);
  margin: 0;
  padding: 10px 0;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  background: var(--color-white);
  border: 1px solid var(--color-concrete);
  border-top: 4px solid var(--color-quantum-orange-deep);
  box-shadow: 0 20px 40px -24px rgba(32, 30, 28, 0.7);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}

.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.nav-submenu li + li {
  border-top: 1px solid var(--color-concrete);
}

.nav-submenu a {
  display: block;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--color-charcoal-deep);
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible,
.nav-submenu a[aria-current] {
  color: var(--color-quantum-orange-deep);
  background: var(--color-orange-tint);
}

.nav-submenu-all a {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.masthead > .wrap > .btn {
  flex: none;
  min-height: 48px;
}

/* The in-menu button and phone link belong to the mobile panel only. */
.nav > .btn,
.nav-call {
  display: none;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-charcoal-deep);
  cursor: pointer;
}

.nav-toggle-bars {
  display: grid;
  gap: 3px;
}

.nav-toggle-bars span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

/* The three bars fold into a cross while the panel is open. */
.masthead[data-open="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.masthead[data-open="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.masthead[data-open="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: inline-flex;
  }

  .masthead > .wrap > .btn {
    display: none;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-white);
    border-top: 1px solid var(--color-concrete);
    border-bottom: 1px solid var(--color-concrete);
    box-shadow: 0 18px 40px -24px rgba(32, 30, 28, 0.55);
    padding: var(--space-3) var(--gutter) var(--space-4);
  }

  .masthead[data-open="true"] .nav {
    display: block;
    /* The menu scrolls inside the space below the permanent call bar and
       header, so every link remains reachable on short screens. */
    max-height: calc(100vh - var(--header-h) - 44px);
    max-height: calc(100dvh - var(--header-h) - 44px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: nav-drop 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list > li + li {
    border-top: 1px solid var(--color-concrete);
  }

  .nav-list > li > a,
  .nav-group-head > a {
    display: block;
    padding: 15px 0;
    font-size: 22px;
    border-bottom: 0;
  }

  .nav-list > li > a[aria-current],
  .nav-group-head > a[aria-current] {
    color: var(--color-quantum-orange-deep);
  }

  .nav-group-head > a {
    flex: 1;
  }

  .nav-submenu-toggle {
    display: inline-grid;
    place-items: center;
    width: 46px;
    min-height: 46px;
    margin-left: 12px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-concrete);
    color: var(--color-charcoal-deep);
    cursor: pointer;
  }

  .nav-submenu-toggle svg {
    transition: transform 0.18s ease;
  }

  .nav-group[data-submenu-open="true"] .nav-submenu-toggle svg {
    transform: rotate(90deg);
  }

  .nav-submenu {
    position: static;
    display: none;
    width: auto;
    margin: 0 0 12px;
    padding: 0 0 0 16px;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: transparent;
    border: 0;
    border-left: 3px solid var(--color-quantum-orange-deep);
    box-shadow: none;
    transition: none;
  }

  .nav-group:hover .nav-submenu,
  .nav-group:focus-within .nav-submenu {
    display: none;
  }

  .nav-group[data-submenu-open="true"] .nav-submenu {
    display: block;
  }

  .nav-submenu::before {
    display: none;
  }

  .nav-submenu li + li {
    border-top: 1px solid var(--color-concrete);
  }

  .nav-submenu a {
    padding: 11px 14px;
    font-size: 16px;
  }

  .nav > .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: var(--space-3);
  }

  .nav-call {
    display: block;
    margin-top: var(--space-3);
    font-size: 17px;
    color: var(--color-utility-gray);
  }

  .nav-call a {
    display: inline-block;
    padding: 4px 0;
    font-weight: 700;
    color: var(--color-charcoal-deep);
  }
}

@keyframes nav-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ------------------------------------------------------------ hero ------- */

.hero {
  position: relative;
  background: var(--color-charcoal-deep);
  color: var(--color-white);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(32, 30, 28, 0.9) 0%,
      rgba(32, 30, 28, 0.78) 42%,
      rgba(32, 30, 28, 0.3) 100%
    );
}

.hero-body {
  position: relative;
  padding-block: clamp(72px, 11vw, 156px);
  max-width: 44rem;
}

.hero h1,
.hero h2,
.pagehead h1,
.pagehead h2 {
  color: var(--color-white);
}

.hero .eyebrow {
  color: var(--color-quantum-orange-light);
}

.hero .lead {
  color: #e6e2de;
  margin-top: var(--space-3);
}

.hero .btn-row {
  margin-top: var(--space-5);
}

.hero-call {
  margin-top: var(--space-4);
  font-size: 18px;
  color: #e6e2de;
}

.hero-call a {
  color: var(--color-white);
  font-weight: 600;
}

/* Compact hero used on interior pages. */
.pagehead {
  background: var(--color-charcoal-deep);
  color: #e6e2de;
  position: relative;
  overflow: hidden;
}

.pagehead-media {
  position: absolute;
  inset: 0;
}

.pagehead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pagehead-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(32, 30, 28, 0.95) 0%,
    rgba(32, 30, 28, 0.88) 48%,
    rgba(32, 30, 28, 0.6) 100%
  );
}

.pagehead-body {
  position: relative;
  padding-block: clamp(48px, 6.5vw, 88px);
  max-width: 46rem;
}

.pagehead .eyebrow {
  color: var(--color-quantum-orange-light);
}

.pagehead .lead {
  margin-top: var(--space-3);
}

.pagehead .btn-row {
  margin-top: var(--space-4);
}

.crumbs {
  font-size: 14px;
  color: var(--color-utility-gray);
  padding-block: 14px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-concrete);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-concrete);
}

.crumbs a {
  color: var(--color-utility-gray);
}

/* ------------------------------------------------------------ proof ------ */

.proof {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-concrete);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.proof-item {
  border-left: 3px solid var(--color-quantum-orange);
  padding-left: var(--space-3);
}

.proof-item p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-utility-gray);
}

/* Wins over the label rule above, which is a class-plus-element selector. */
.proof-item .proof-figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1;
  font-weight: 600;
  color: var(--color-charcoal-deep);
}

@media (max-width: 880px) {
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ grids ------ */

.grid {
  display: grid;
  gap: var(--space-3);
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.grid-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-right: var(--space-4);
}

/* Once the grid is a single column that right padding is no longer holding
   the copy off a neighbouring tile, it is just pulling the text short of the
   tiles stacked under it. */
@media (max-width: 680px) {
  .grid-intro {
    padding-right: 0;
  }
}

/* ---------------------------------------------------- service tiles ------ */

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: var(--space-3);
  background: var(--color-charcoal-deep);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(32, 30, 28, 0.15) 30%,
    rgba(32, 30, 28, 0.88) 100%
  );
}

.tile:hover img {
  transform: scale(1.04);
}

.tile-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}

.tile h3 {
  color: var(--color-white);
  font-size: clamp(23px, 2.2vw, 27px);
  line-height: 1.02;
  text-transform: uppercase;
  max-width: 12ch;
}

.tile .chev {
  color: var(--color-quantum-orange);
  flex: none;
  margin-bottom: 4px;
}

.tile:hover .chev {
  color: var(--color-white);
}

.tile--action {
  background: var(--color-quantum-orange);
  justify-content: space-between;
}

.tile--action::after {
  display: none;
}

.tile--action .chev {
  color: var(--color-white);
}

.tile--action p {
  position: relative;
  z-index: 1;
  color: #fdf1e5;
  margin: 0 0 auto;
  padding-bottom: var(--space-3);
  max-width: 26ch;
}

.tile--action:hover {
  background: var(--color-quantum-orange-deep);
}

/* Full width, a tile no longer needs the height it carries in a three column
   row, and eight of them at 280px is a long way to scroll on a phone. */
@media (max-width: 680px) {
  .tile {
    min-height: 210px;
  }

  .tile h3 {
    max-width: 18ch;
  }

  .tile--action {
    min-height: 0;
  }
}

/* ------------------------------------------------------------ cards ------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-concrete);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-3) var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card::before {
  content: "";
  width: 40px;
  height: 3px;
  background: var(--color-quantum-orange);
}

.card h3 {
  font-size: 24px;
  line-height: 1.1;
}

.card p {
  margin: 0;
  font-size: 16px;
  color: var(--color-utility-gray);
}

a.card:hover {
  border-color: var(--color-quantum-orange);
  box-shadow: 0 12px 28px -20px rgba(32, 30, 28, 0.75);
}

.card .link-arrow {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 16px;
}

a.card:hover .link-arrow {
  color: var(--color-charcoal-deep);
}

a.card:hover .link-arrow svg {
  transform: translateX(3px);
}

.card--plain::before {
  display: none;
}

.section--dark .card {
  background: #292624;
  border-color: #3a3734;
  color: var(--color-concrete);
}

.section--dark .card p {
  color: #b9b3ad;
}

/* ---------------------------------------------------------- feature ------ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Stretching lets the image column match the text column instead of leaving
   a block of dead space under a short photo. */
.split--top {
  align-items: stretch;
}

.split--top > * {
  min-width: 0;
}

.split--top .split-media img {
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.split--reverse .split-media {
  order: 2;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--reverse .split-media {
    order: 0;
  }

  .split--top .split-media img {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }
}

.split-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.callout {
  background: var(--color-orange-tint);
  border-left: 4px solid var(--color-quantum-orange);
  padding: var(--space-3);
  margin-top: var(--space-4);
}

.callout p {
  margin: 0;
  max-width: 60ch;
}

.section--dark .callout {
  background: #2b2724;
  border-left-color: var(--color-quantum-orange);
  color: #d8d2cc;
}

.work-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-concrete);
}

.work-groups-title,
.work-groups-note {
  grid-column: 1 / -1;
}

.work-groups-title {
  margin: 0;
  font-weight: 700;
}

.work-groups h3 {
  color: var(--color-quantum-orange-deep);
  font-size: 21px;
}

.work-groups div p,
.work-groups-note {
  margin: 6px 0 0;
}

.work-groups-note {
  color: var(--color-utility-gray);
}

@media (max-width: 520px) {
  .work-groups {
    grid-template-columns: 1fr;
  }

  .work-groups-title,
  .work-groups-note {
    grid-column: auto;
  }
}

.service-signature {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: var(--space-4);
  padding-top: 14px;
  border-top: 3px solid var(--color-quantum-orange-deep);
}

.service-signature-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-charcoal-deep);
}

.service-signature-label {
  padding-left: 14px;
  border-left: 1px solid var(--color-concrete);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-utility-gray);
}

@media (max-width: 420px) {
  .service-signature {
    gap: 10px;
  }

  .service-signature-label {
    padding-left: 10px;
    font-size: 12px;
  }
}

/* ------------------------------------------------------------ lists ------ */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* Display headings run at a 0.96 line height, so a list placed straight after
   one needs its own space. */
h1 + .checklist,
h2 + .checklist,
h3 + .checklist {
  margin-top: var(--space-3);
}

.checklist li {
  position: relative;
  padding-left: 30px;
  max-width: 62ch;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 2px;
  background: var(--color-quantum-orange);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

@media (max-width: 940px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

.pillar h3 {
  font-size: 22px;
  line-height: 1.1;
  margin-bottom: var(--space-2);
  padding-top: var(--space-2);
  border-top: 3px solid var(--color-quantum-orange);
}

.pillar p {
  margin: 0;
  font-size: 16px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  counter-reset: step;
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  counter-increment: step;
  border-top: 1px solid var(--color-concrete);
  padding-top: var(--space-3);
}

.section--dark .step {
  border-top-color: #3a3734;
}

.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-quantum-orange-deep);
  margin-bottom: var(--space-2);
}

.section--dark .step::before {
  color: var(--color-quantum-orange-light);
}

.step h3 {
  font-size: 26px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.step p {
  margin: 0;
  font-size: 16px;
}

/* --------------------------------------------------------- accordion ---- */

.faq {
  border-top: 1px solid var(--color-concrete);
  max-width: 900px;
}

.faq details {
  border-bottom: 1px solid var(--color-concrete);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-charcoal-deep);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--color-quantum-orange);
  border-bottom: 2px solid var(--color-quantum-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.15s ease;
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq-answer {
  padding-bottom: var(--space-3);
}

/* ------------------------------------------------------------ forms ------ */

.form {
  display: grid;
  gap: var(--space-3);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 680px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.field {
  display: grid;
  gap: 6px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-charcoal-deep);
}

.field .hint {
  font-size: 13px;
  color: var(--color-utility-gray);
}

.field .req {
  color: var(--color-quantum-orange-deep);
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-concrete);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-charcoal-deep);
}

textarea {
  min-height: 150px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-utility-gray);
}

input[type="file"] {
  padding: 10px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset legend {
  padding: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-charcoal-deep);
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The label is the hit area, so it carries the height a thumb needs. */
  min-height: 44px;
  font-size: 16px;
  cursor: pointer;
}

.radio input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--color-quantum-orange);
}

.form-note {
  font-size: 14px;
  color: var(--color-utility-gray);
  max-width: 60ch;
}

.form-panel {
  background: var(--color-white);
  border: 1px solid var(--color-concrete);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 40px);
}

/* --------------------------------------------------------- contact ------- */

.contact-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.contact-list dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-utility-gray);
}

.contact-list dd {
  margin: 4px 0 0;
  font-size: 19px;
}

.contact-list dd a {
  font-weight: 600;
}

/* ------------------------------------------------------------ table ------ */

.table-scroll {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 16px;
}

th,
td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--color-concrete);
  vertical-align: top;
}

th {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-charcoal-deep);
}

/* ------------------------------------------------------------- cta ------- */

.cta {
  background: var(--color-charcoal-deep);
  color: #ddd7d1;
}

.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 900px) {
  .cta-inner {
    grid-template-columns: 1fr;
  }
}

.cta h2 {
  color: var(--color-white);
}

.cta-actions {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.cta-call {
  font-size: 19px;
}

.cta-call a {
  color: var(--color-white);
  font-weight: 600;
}

/* ---------------------------------------------------------- article ------ */

.prose h2 {
  font-size: clamp(26px, 3vw, 34px);
  text-transform: uppercase;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: 22px;
  margin-top: var(--space-4);
  margin-bottom: 8px;
}

.prose ul,
.prose ol {
  max-width: 68ch;
  padding-left: 20px;
  margin: 0 0 1em;
}

.prose li {
  margin-bottom: 6px;
}

.layout-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 980px) {
  .layout-aside {
    grid-template-columns: 1fr;
  }
}

.aside-card {
  background: var(--color-white);
  border: 1px solid var(--color-concrete);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

/* Stacked under the article it has nowhere to travel, and sticky positioning
   only complicates the scroll. */
@media (max-width: 980px) {
  .aside-card {
    position: static;
  }
}

.aside-card h3 {
  font-size: 21px;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.aside-card ul {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: 10px;
}

.aside-card li {
  font-size: 16px;
}

/* ----------------------------------------------------------- footer ------ */

.footer {
  background: var(--color-charcoal-deep);
  color: var(--color-concrete);
  padding-block: var(--space-7) var(--space-4);
  font-size: 16px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-5) var(--space-4);
}

@media (max-width: 940px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer ul a {
  display: inline-block;
  padding-block: 3px;
}

.footer a {
  color: var(--color-concrete);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer a:hover {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.footer-brand img {
  width: 250px;
  margin-bottom: var(--space-3);
}

.footer-brand p {
  color: #a9a39d;
  max-width: 36ch;
  margin-bottom: var(--space-3);
}

.footer-contact {
  display: grid;
  gap: 6px;
}

.footer-contact a {
  color: var(--color-white);
  font-weight: 600;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid #3a3734;
  font-size: 14px;
  color: var(--color-utility-gray-dim);
}

.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ----------------------------------------------------------- misc -------- */

.placeholder {
  background: var(--color-concrete);
  border-radius: var(--radius-card);
}

.sitemap-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

@media (max-width: 860px) {
  .sitemap-cols {
    grid-template-columns: 1fr;
  }
}

.sitemap-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.stack-2 > * + * {
  margin-top: var(--space-2);
}

.stack-3 > * + * {
  margin-top: var(--space-3);
}

.stack-4 > * + * {
  margin-top: var(--space-4);
}

.stack-5 > * + * {
  margin-top: var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .call-bar,
  .masthead,
  .cta,
  .footer {
    display: none;
  }

  body {
    background: #fff;
    font-size: 12pt;
  }
}

/* ------------------------------------------------------ service map ------ */

.usmap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .usmap {
    grid-template-columns: 1fr;
  }
}

/* The map beside a short block of copy. Capped so a tall region map does not
   leave a column of dead space next to two paragraphs. */
.usmap--plain {
  display: block;
  max-width: 460px;
}

.usmap-canvas {
  background: var(--color-white);
  border: 1px solid var(--color-concrete);
  border-radius: var(--radius-card);
  padding: clamp(12px, 2vw, 24px);
}

.section--white .usmap-canvas {
  background: var(--color-off-white);
}

.usmap-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.usmap-state {
  fill: var(--color-concrete);
  stroke: var(--color-white);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.12s ease;
}

.section--white .usmap-state {
  stroke: var(--color-off-white);
}

.usmap-state.is-served {
  fill: var(--color-quantum-orange);
}

[data-usmap] .usmap-state {
  cursor: pointer;
}

/* Darkened just enough to read as a change while the charcoal state label
   sitting on top of it stays above the contrast threshold. */
[data-usmap] .usmap-state:hover {
  fill: #c3bab3;
}

[data-usmap] .usmap-state.is-served:hover {
  fill: var(--color-quantum-orange-deep);
}

/* The browser default ring is drawn round the path bounding box, which on a
   state shape looks like a stray rectangle. We draw our own. */
[data-usmap] .usmap-state:focus {
  outline: none;
}

[data-usmap] .usmap-state[aria-pressed="true"] {
  fill: #b4aaa1;
}

[data-usmap] .usmap-state.is-served[aria-pressed="true"] {
  fill: var(--color-quantum-orange-deep);
}

/* Sits above every state, so the selected outline is never half covered by a
   neighbour drawn later in the document. */
.usmap-selected {
  fill: none;
  stroke: var(--color-charcoal-deep);
  stroke-width: 5;
  stroke-linejoin: round;
  pointer-events: none;
}

.section--dark .usmap-selected {
  stroke: var(--color-white);
}

.usmap-labels {
  pointer-events: none;
}

[data-usmap] .usmap-tag {
  pointer-events: auto;
  cursor: pointer;
}

.usmap-tag-hit {
  fill: transparent;
}

[data-usmap] .usmap-tag:hover .usmap-label,
[data-usmap] .usmap-tag:focus-visible .usmap-label {
  fill: var(--color-charcoal-deep);
}

[data-usmap] .usmap-tag:focus {
  outline: none;
}

[data-usmap] .usmap-tag:focus-visible .usmap-tag-hit {
  fill: rgba(32, 30, 28, 0.1);
}

.usmap-label {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--color-charcoal);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.usmap-label.is-served {
  fill: var(--color-white);
}

/* Out in the margin these sit on the panel background, not on a state, so
   they can stay lighter. */
.usmap-label.is-outside {
  dominant-baseline: middle;
  text-anchor: inherit;
  fill: var(--color-utility-gray);
}

.usmap-label.is-outside.is-served {
  fill: var(--color-quantum-orange-deep);
}

.usmap-leader {
  stroke: var(--color-utility-gray);
  stroke-width: 1.6;
  fill: none;
}

.usmap-leader.is-served {
  stroke: var(--color-quantum-orange-deep);
}

.usmap-base-halo {
  fill: var(--color-charcoal-deep);
  opacity: 0.16;
}

.usmap-base-dot {
  fill: var(--color-charcoal-deep);
  stroke: var(--color-white);
  stroke-width: 2.5;
}

.usmap-leader.is-base {
  stroke: var(--color-charcoal-deep);
  stroke-width: 1.6;
}

.usmap-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-concrete);
  font-size: 15px;
  color: var(--color-utility-gray);
}

.usmap-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.usmap-key {
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--color-concrete);
  border-radius: 2px;
}

.usmap-key.is-served {
  background: var(--color-quantum-orange);
}

.usmap-key.is-base {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-charcoal-deep);
  box-shadow: 0 0 0 4px rgba(32, 30, 28, 0.16);
}

.section--dark .usmap-legend {
  border-top-color: #3a3734;
  color: #b9b3ad;
}

.section--dark .usmap-key {
  background: #46413d;
}

.section--dark .usmap-key.is-base {
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.usmap-readout .eyebrow {
  margin-bottom: 10px;
}

.usmap-readout h3 {
  text-transform: uppercase;
}

.usmap-readout p {
  margin: 16px 0 0;
}

.usmap-note {
  color: var(--color-utility-gray);
  font-size: 16px;
}

.usmap-actions {
  margin-top: var(--space-3);
}

.usmap-call {
  font-size: 16px;
}

.section--dark .usmap-canvas {
  background: #292624;
  border-color: #3a3734;
}

.section--dark .usmap-state {
  fill: #46413d;
  stroke: #292624;
}

/* On a charcoal panel the states recede rather than brighten, so the label
   contrast goes up instead of down. */
.section--dark [data-usmap] .usmap-state:hover {
  fill: #383331;
}

.section--dark [data-usmap] .usmap-state[aria-pressed="true"] {
  fill: #2e2a28;
}

.section--dark .usmap-state.is-served {
  fill: var(--color-quantum-orange);
}

.section--dark .usmap-label {
  fill: #b9b3ad;
}

.section--dark .usmap-label.is-outside.is-served {
  fill: var(--color-quantum-orange-light);
}

.section--dark .usmap-leader {
  stroke: #7d766f;
}

.section--dark .usmap-leader.is-served,
.section--dark .usmap-leader.is-base {
  stroke: var(--color-quantum-orange-light);
}

.section--dark .usmap-base-dot {
  fill: var(--color-white);
  stroke: var(--color-charcoal-deep);
}

.section--dark .usmap-base-halo {
  fill: var(--color-white);
  opacity: 0.22;
}

.section--dark .usmap-base-label {
  fill: var(--color-white);
}

/* On a narrow screen the map scales down with the column, so the labels are
   scaled back up in user units to stay readable. */
@media (max-width: 760px) {
  .usmap-label {
    font-size: 36px;
  }

  .usmap-leader {
    stroke-width: 2.6;
  }

  .usmap-state {
    stroke-width: 3;
  }

  .usmap-selected {
    stroke-width: 7;
  }

  .usmap-base-halo {
    r: 24;
  }

  .usmap-base-dot {
    r: 10;
  }
}

/* ----------------------------------------------------------- motion ------ */

/* Blocks start a little low and clear, then settle as they come into view.
   All of it hangs off the js class, which the page adds before first paint
   and takes back off if the script never arrives, so a browser without
   JavaScript gets the page exactly as it was.

   The selector list below has a copy in quantum.js. Change one, change both.
   Reduced-motion is handled globally at the top of this file, which cuts
   every duration to nothing, so these blocks simply appear. */

.js .section-head,
.js .grid-intro,
.js .proof-item,
.js .tile,
.js .card,
.js .pillar,
.js .step,
.js .split > *,
.js .layout-aside > *,
.js .cta-inner > *,
.js .hero-body > *,
.js .pagehead-body > *,
.js .usmap-canvas,
.js .usmap-readout,
.js .form-panel,
.js .faq {
  opacity: 0;
  transform: translateY(14px);
}

/* Same weight as the rules above and written after them, so arriving wins.
   The transition lives here alone: nothing is animated on the way out, and
   an element that has not arrived yet carries no transition at all. */
.js .is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1)
      var(--reveal-delay, 0ms),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}

/* The rule at the top of this file cuts every duration to nothing, but not
   the stagger. Without this a block would still sit and wait its turn before
   snapping into place. */
@media (prefers-reduced-motion: reduce) {
  .js .is-in {
    transition-delay: 0s;
  }
}