@font-face {
  font-family: "filepile";
  src: url("../assets/fonts/filepile.woff2") format("woff2"), url("../assets/fonts/filepile.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --color-light: #fce4a8;
  --color-dark: #01334e;
  --color-accent: #d71a21;
  --color-muted: #71969f;
  --color-background: var(--color-light);
  --color-foreground: var(--color-dark);
  --font-family-display: "filepile", sans-serif;
  --font-family-cursive: "Pacifico", cursive;
  --font-family-base: "Overpass", sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xxl: 2.5rem;
  --font-size-xxxl: 3.5rem;
  --font-weight-normal: 100;
  --font-weight-bold: 900;
  --heading-font-weight: 400;
  --svg-fill-color: currentColor;
  --z-index-popover: 100;
  --z-index-top: 500;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  margin: unset;
}
body:before {
  display: none;
}
@media (min-width: 20rem) {
  body:before {
    content: "phone-portrait";
  }
}
@media (min-width: 35.5rem) {
  body:before {
    content: "phone-landscape";
  }
}
@media (min-width: 48rem) {
  body:before {
    content: "tablet-portrait";
  }
}
@media (min-width: 64rem) {
  body:before {
    content: "tablet-landscape";
  }
}
@media (min-width: 80rem) {
  body:before {
    content: "desktop";
  }
}
@media (min-width: 105rem) {
  body:before {
    content: "desktop-large";
  }
}

h1 {
  font-family: var(--font-family-display);
  font-weight: var(--heading-font-weight);
  font-size: var(--font-size-xxl);
  margin-block: 0.313em;
}

h2,
h3 {
  font-size: var(--font-size-lg);
  margin-block: 0.313em;
}

h4 {
  font-size: var(--font-size-base);
  margin-block: 0.313em;
}

a {
  color: var(--color-accent);
}
a:hover {
  color: currentColor;
}

dd {
  margin: unset;
}

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

[type=text],
[type=email],
[type=password],
textarea {
  padding: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font-size: 1rem;
}

.global-header {
  position: sticky;
  top: 0;
  background-color: var(--color-background);
}

.section.global-header {
  margin-bottom: 1rem;
  scroll-margin-top: unset;
}

.global-logo {
  display: inline-block;
  width: 2.5rem;
}

.global-navigation {
  padding-block: 1rem;
}

.global-header-navigation {
  border-bottom: 2px solid currentColor;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.global-header-menu:popover-open {
  background-color: var(--color-background);
  border: 0;
  width: 100%;
  height: 100%;
  padding: 2rem;
  z-index: var(--z-index-popover);
}

.global-footer.section {
  margin-bottom: unset;
}

.global-footer-navigation {
  display: grid;
  grid-template-columns: min-content 1fr max-content;
  gap: 1rem;
  align-items: center;
}

.global-footer-menu {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (min-width: 48rem) {
  .menu {
    display: flex;
    gap: 1rem;
  }
}

.global-navigation-list {
  list-style: none;
  padding: unset;
  margin: unset;
}

.global-navigation-link.is-active {
  color: var(--color-foreground);
  text-decoration: none;
}

.global-footer-section {
  padding-block: 1rem;
}

.global-menu-button {
  background-color: transparent;
  border-radius: unset;
  border: unset;
  cursor: pointer;
  display: none;
}

.hamburger-button {
  --svg-fill-color: var(--color-accent);
}
.is-mobile .hamburger-button {
  display: inline-block;
}

.close-button {
  --svg-fill-color: var(--color-foreground);
}
:popover-open .close-button {
  display: block;
  position: fixed;
  right: 2rem;
  top: 2rem;
  z-index: var(--z-index-top);
}

.main {
  scroll-snap-type: y mandatory;
}

.main-grid,
.page-grid {
  display: grid;
  grid-template-columns: [full-width-start] 0.5rem [stretch-start] 0.5rem [content-start] 1fr [content-end] 0.5rem [stretch-end] 0.5rem [full-width-end];
}
@media (min-width: 48rem) {
  .main-grid,
  .page-grid {
    grid-template-columns: [full-width-start] 1rem [stretch-start] minmax(1rem, 1fr) [content-start] minmax(calc(48rem - 4rem), 105rem) [content-end] minmax(1rem, 1fr) [stretch-end] 1rem [full-width-end];
  }
}

.page-grid {
  min-height: 100vh;
  grid-template-rows: min-content auto min-content;
  row-gap: 2rem;
}
.page-grid > * {
  grid-column: content;
}

.no-grid {
  display: block;
  padding: 2rem;
}

.landing .main {
  display: grid;
  grid-column: full-width;
  grid-template-columns: subgrid;
}

.section {
  grid-column: content;
  margin-bottom: 6.25rem;
  scroll-snap-align: start;
  scroll-margin-top: 6.25rem;
}
.section:has(.full-width-content) {
  display: grid;
  grid-template-columns: subgrid;
}

.section-title {
  font-size: var(--font-size-sm);
  margin-bottom: 1.5rem;
}

.stretch {
  grid-column: stretch;
}

.full-width {
  grid-column: full-width;
}

.full-width-content {
  grid-column: content;
}

.faq-item {
  max-width: 60ch;
}

.faq-question {
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
}

.faq-answer {
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: 12vw;
  text-wrap: balance;
  letter-spacing: -0.15em;
}

.slogan {
  font-size: 3.25vw;
  margin-top: unset;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  padding-left: 1rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

.solutions-image {
  max-width: 6.25rem;
  height: 6.25rem;
  margin-inline: auto;
}

.services-header {
  display: grid;
  row-gap: 1rem;
  align-items: start;
  grid-template-areas: "title title" "subtitle subtitle" "graphic graphic" "description description" "cta second-cta";
  grid-template-columns: min-content 1fr;
  margin-bottom: 2rem;
}
@media (min-width: 48rem) {
  .services-header {
    grid-template-areas: "title title title" "graphic subtitle subtitle" "graphic description description" "graphic cta second-cta";
    grid-template-columns: 50% 1fr 1fr;
    grid-template-rows: min-content min-content min-content 1fr;
  }
}

.services-title {
  grid-area: title;
  margin: unset;
}

.services-image {
  grid-area: graphic;
  max-width: 12.5rem;
  margin-inline: auto;
}

.services-subtitle {
  grid-area: subtitle;
  margin: unset;
}

.services-description {
  grid-area: description;
  margin: unset;
  max-width: 40ch;
}

.services-cta {
  grid-area: cta;
}

.product-section-grid {
  display: grid;
  padding: 2rem 1rem;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 48rem) {
  .product-section-grid {
    grid-template-columns: 20% 1fr;
    align-items: center;
    padding: 1.5rem 2rem;
    text-align: left;
  }
}

.product-image {
  max-width: 25%;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .product-image {
    max-width: 100%;
    margin: unset;
  }
}

.product-text {
  font-size: 1.5rem;
  margin-block: unset;
}

.testimonial-list {
  --column-width: 30rem;
  display: grid;
  row-gap: 2.5rem;
}

.testimonial-name {
  font-size: var(--font-size-base);
}

.testimonial-quote {
  margin-inline: unset;
  margin-block: 0.675em;
  font-weight: var(--font-weight-bold);
}
.testimonial-quote:before, .testimonial-quote:after {
  font-size: var(--font-size-lg);
}
.testimonial-quote:before {
  content: open-quote;
}
.testimonial-quote:after {
  content: close-quote;
}

.testimonial-name,
.testimonial-role,
.testimonial-location {
  margin-top: unset;
  margin-bottom: 0.05em;
}

.testimonial-location {
  font-style: italic;
}

.contact-form-fieldset {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  max-width: 75ch;
}

.submit {
  max-width: 15ch;
  margin-top: 2rem;
}

.display-font {
  font-family: var(--font-family-display);
}

.cursive-font {
  font-family: var(--font-family-cursive);
}

.base-font {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

.color-light {
  color: var(--color-light);
}

.color-dark {
  color: var(--color-dark);
}

.color-accent {
  color: var(--color-accent);
}

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

.color-reverse {
  color: var(--color-background);
}

.background-light {
  background-color: var(--color-light);
}

.background-dark {
  background-color: var(--color-dark);
}

.background-accent {
  background-color: var(--color-accent);
}

.background-muted {
  background-color: var(--color-muted);
}

.background-reverse {
  background-color: var(--color-foreground);
}

.display-flex {
  display: flex;
}

.padding-none {
  padding: unset;
}

.padding-base {
  padding: var(--padding, 1rem);
}

.margin-none {
  margin: unset;
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

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

.display-flex {
  display: flex;
  flex-direction: var(--flex-direction);
  flex-wrap: var(--flex-wrap, nowrap);
  gap: var(--flex-gap, 1rem);
  justify-content: var(--justify-content);
  align-items: var(--align-items);
}

.justify-left {
  --justify-content: flex-start;
}

.justify-right {
  --justify-content: flex-end;
}

.justify-center {
  --justify-content: center;
}

.justify-between {
  --justify-content: space-between;
}

.align-center {
  --align-items: center;
}

.align-bottom {
  --align-items: flex-end;
}

.align-top {
  --align-items: flex-start;
}

.feature-list {
  list-style: none;
  padding: unset;
  margin: unset;
}
@media (min-width: 48rem) {
  .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width, 18.75rem), 1fr));
    gap: var(--gap, 1rem);
  }
}

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-light);
  text-decoration: none;
  text-wrap: nowrap;
  border-radius: 0.25rem;
  font-size: var(--font-size-lg);
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-family-cursive);
}
.button:hover {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.button-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: currentColor;
}
.button-secondary:hover {
  background-color: transparent;
  color: var(--color-dark);
}

@media print {
  :root {
    --font-size-base: 12pt;
  }
  body {
    max-width: 8.5in;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  h1 {
    page-break-before: always;
  }
  section {
    page-break-after: always;
  }
  :is(a) {
    color: inherit;
  }
  a::after {
    content: " (" attr(href) ") ";
  }
  * {
    background-color: #fff;
    color: #000;
  }
}