/* ==========================================================================
   The Creative Offices — Site Stylesheet
   Plain CSS, no preprocessor, no build step. Mobile-first.
   ========================================================================== */

/* --- Self-hosted font (never loaded from Google/CDN) --------------------- */
@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/GoogleSansFlex-Variable.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

/* --- Design tokens --------------------------------------------------------
   Contrast note: #ff3900 measures ~3.6:1 on white — that clears WCAG's 3:1
   floor for large text (>=24px) and for non-text UI (borders/icons/buttons)
   but FAILS the 4.5:1 floor for normal body/link text. Rule enforced
   throughout this file: --color-accent is only ever used as a background
   (with dark text on top), a large heading color, or a border/icon fill —
   never as small text or link color on a light background.
   -------------------------------------------------------------------------- */
:root {
  --color-heading: #310086;
  --color-text: #000000;
  --color-accent: #ff3900;
  --color-accent-ink: #1a1200; /* dark text-on-accent, guarantees >=4.5:1 */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f3fa;
  --color-border: #e4dfec;

  --font-family: "Google Sans Flex", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --weight-body: 400;
  --weight-heading: 800;

  --container-max: 1200px;
  --container-wide-max: 1440px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --radius: 10px;
  --radius-btn: 5px;
  --shadow-card: 0 4px 20px rgba(49, 0, 134, 0.08);
}

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

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

body {
  margin: 0;
  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: var(--weight-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 1rem;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* No underline by default anywhere on the site — every link context here
   (nav, footer, cards) already signals "interactive" through position,
   weight, or a surrounding component, so an underline is redundant clutter. */
a {
  color: var(--color-heading);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-accent-ink);
}

/* Visible, high-contrast focus ring for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-heading);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-heading);
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw + 1rem, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
}

p {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
}

ul,
ol {
  padding-left: 1.25em;
}

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

/* --- Skip link --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-heading);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}

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

/* --- Visually-hidden utility (accessible labels, not display:none) ----- */
.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;
}

/* --- Layout containers --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--wide {
  max-width: var(--container-wide-max);
}

.section {
  padding-block: var(--space-7);
}

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

/* --- Site header / nav ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.site-header__logo img {
  height: 54px;
  width: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 2px solid var(--color-heading);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-weight: 700;
  color: var(--color-heading);
  cursor: pointer;
}

.primary-nav {
  display: none;
  flex-basis: 100%;
  width: 100%;
}

.primary-nav.is-open {
  display: block;
}

.primary-nav__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.primary-nav__list a:not(.btn) {
  display: block;
  padding: var(--space-2) 0;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text);
}

/* Orange on white at this weight/size is ~3.6:1 (large-text/UI territory,
   not full body-text AA) — the text-shadow pulls it back to fully legible
   per the "don't just accept a contrast miss" rule elsewhere in this file. */
.primary-nav__list a:not(.btn):hover,
.primary-nav__list a:not(.btn):focus {
  color: var(--color-accent);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.primary-nav__list a[aria-current="page"] {
  color: var(--color-heading);
  border-bottom: 3px solid var(--color-accent);
  display: inline-block;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
  .primary-nav {
    display: block;
    flex-basis: auto;
    width: auto;
  }
  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
  }
}

/* --- Buttons --------------------------------------------------------------
   White-on-orange is only ~3.6:1 — that clears WCAG's "large-scale text"
   floor of 3:1 (>=14pt/18.66px bold) but not the 4.5:1 floor for normal
   text. Button label text is set to 1.2rem (19.2px) bold specifically so
   it qualifies as large-scale text and the white-on-orange combination
   stays compliant — don't shrink this text without re-checking contrast.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.7em 2.25em;
  border-radius: var(--radius-btn);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.2;
}

.btn--primary {
  background: var(--color-accent);
  color: #ffffff;
}

.btn--primary:hover,
.btn--primary:focus {
  background: #e63300;
  color: #ffffff;
}

.btn--outline {
  background: transparent;
  border-color: var(--color-heading);
  color: var(--color-heading);
}

.btn--outline:hover,
.btn--outline:focus {
  background: var(--color-heading);
  color: #fff;
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  padding-block: var(--space-7) var(--space-6);
  text-align: center;
}

.hero__lede {
  font-size: clamp(1.05rem, 1vw + 1rem, 1.35rem);
  max-width: 60ch;
  margin-inline: auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

/* --- Pillar / service cards ------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.card h3 {
  margin-top: 0;
}

.card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-3);
}

/* --- Testimonials ----------------------------------------------------------- */
.testimonial {
  background: var(--color-bg-alt);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.testimonial p {
  font-size: 1.1rem;
  font-style: italic;
  max-width: none;
}

.testimonial__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-style: normal;
}

.testimonial__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial__name {
  display: block;
  font-weight: 800;
  color: var(--color-heading);
}

.testimonial__title {
  display: block;
  font-size: 0.9rem;
  color: #333;
}

/* --- Tiles (replaces plain bulleted lists for scannable service grids) ---- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.tile__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-3);
  color: var(--color-heading);
}

.tile__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.tile__label {
  margin: 0;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
}

/* --- Forms ------------------------------------------------------------------ */
.form-field {
  margin-bottom: var(--space-4);
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  padding: 0.75em 1em;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-heading);
}

.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 0.9rem;
  color: #3a3a3a;
}

.form-status {
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-weight: 700;
}

.form-status--success {
  background: #eaf7ec;
  color: #14532d;
  border: 2px solid #1c7a3d;
}

.form-status--error {
  background: #fdecec;
  color: #7a1c1c;
  border: 2px solid #c62828;
}

.form-status[hidden] {
  display: none;
}

/* --- Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--color-heading);
  color: #fff;
  padding-block: var(--space-6);
}

.site-footer a {
  color: #fff;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr;
  }
}

.site-footer__logo img {
  height: 48px;
  width: auto;
  margin-bottom: var(--space-3);
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin-bottom: var(--space-2);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.site-footer small {
  display: block;
  opacity: 0.85;
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.site-footer__social a:hover,
.site-footer__social a:focus {
  background: var(--color-accent);
}

.site-footer__social svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

/* --- Anchors / layout helpers ------------------------------------------------ */
section[id] {
  scroll-margin-top: 96px;
}

.container--narrow {
  max-width: 820px;
}

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

.section-intro {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.section-cta {
  text-align: center;
  margin-top: var(--space-6);
}

.link-strong {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.subhead {
  text-align: center;
  margin: var(--space-8) 0 var(--space-3);
}

/* --- Hero (split with photo) ------------------------------------------------- */
.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-heading);
}

/* The eyebrow is the real <h1> (SEO: it carries the keyword phrase) and
   "Take it off your plate." is a <p> styled to look like the old display
   h1. Same visual result, correct document outline. */
.hero__title {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  font-weight: var(--weight-heading);
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.hero--split {
  padding-block: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  align-items: start;
  text-align: left;
}

.hero--split .hero__lede {
  margin-inline: 0;
}

.hero--split .hero__actions {
  justify-content: flex-start;
}

.hero__note {
  margin-top: var(--space-4);
  font-size: 0.95rem;
  color: #333;
}

.hero__photo img {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .hero--split {
    grid-template-columns: 1.3fr 1fr;
  }

  .hero--split .hero__intro {
    grid-column: 1 / -1;
  }
}

/* --- Steps -------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: var(--space-5);
}

.step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.step h3 {
  margin-bottom: var(--space-1);
}

.step p {
  margin: 0;
}

.step__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-heading);
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
}

/* --- Two-up text blocks, chips, about ------------------------------------------ */
.split-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .split-two {
    grid-template-columns: 1fr 1fr;
  }
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  justify-content: center;
}

.chips li {
  background: #fff;
  border: 2px solid var(--color-heading);
  color: var(--color-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}

.chips li.chip--link {
  padding: 0;
  display: flex;
}

.chip--link a {
  display: flex;
  align-items: center;
  padding: 0.35em 0.9em;
  color: inherit;
}

.chip--link a:hover,
.chip--link a:focus {
  color: var(--color-accent-ink);
}

.chips--light {
  justify-content: flex-start;
  margin-top: var(--space-4);
}

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

.about__photo {
  width: 100%;
  max-width: 260px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .about {
    grid-template-columns: 260px 1fr;
    gap: var(--space-6);
  }
}

.card h4 {
  margin: 0 0 var(--space-1);
  font-size: 1.25rem;
}

/* --- Priority key (E / U / NU / G) ---------------------------------------------- */
.priority {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .priority {
    grid-template-columns: 1fr 1fr;
  }
}

.priority li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.priority strong {
  display: block;
}

.priority span:not(.priority__badge) {
  font-size: 0.95rem;
}

.priority__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
}

.priority__badge--e { background: #b3261e; }
.priority__badge--u { background: #8a5300; }
.priority__badge--nu { background: #1b6b3a; }
.priority__badge--g { background: #1a5fa8; }

.priority__example {
  text-align: center;
  margin: var(--space-5) auto 0;
}

.priority__example code {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.2em 0.5em;
  font-size: 0.95rem;
}

/* --- FAQ (native details/summary, no JS) ------------------------------------------ */
.faq details {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-4);
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-heading);
  padding: var(--space-3) 0;
}

.faq details[open] summary {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

.faq details p:last-child {
  padding-bottom: var(--space-3);
  margin-bottom: 0;
}

/* --- Hero service strip (EA / Websites / Graphic Design) -------------------------- */
.hero__services {
  grid-column: 1 / -1;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .hero__services {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero__services a {
  display: block;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-text);
}

.hero__services a:hover,
.hero__services a:focus {
  background: #ece6f5;
  color: var(--color-text);
}

.hero__services strong {
  display: block;
  color: var(--color-heading);
  font-size: 1.1rem;
  font-weight: 800;
}

.hero__services span {
  font-size: 0.95rem;
}

/* --- Graphic design work samples ------------------------------------------------------ */
.work-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 560px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.work__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  background: var(--color-bg-alt);
}

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

.work__label {
  margin: var(--space-2) 0 0;
  font-weight: 700;
  text-align: center;
  color: var(--color-heading);
}

.work-note {
  text-align: center;
  font-size: 0.9rem;
  margin: var(--space-4) auto 0;
}

.subhead--small {
  font-size: 1.25rem;
  margin-top: var(--space-6);
}

/* --- "Is this a good fit?" cards --------------------------------------------------------- */
.fit-card {
  display: flex;
  flex-direction: column;
}

.fit-card h3 {
  margin-bottom: var(--space-2);
}

.fit-card__note {
  margin: auto 0 0;
  padding-top: var(--space-3);
  font-size: 0.95rem;
}

.checklist {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.checklist li {
  position: relative;
  padding-left: 1.9em;
  margin-bottom: var(--space-2);
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--color-heading);
}

.checklist--no li::before {
  content: "\2715";
  color: #4a4a4a;
}

/* Odd number of cards: let the last one span the full row in the 2-column layout */
@media (min-width: 640px) {
  .card-grid--fill > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --- Misc ------------------------------------------------------------------------ */
.form-signoff {
  text-align: center;
  font-style: italic;
  margin: var(--space-5) auto 0;
}

.testimonial__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-heading);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}

.tile__text {
  margin: var(--space-2) 0 0;
  font-size: 0.95rem;
}

.prose h1 {
  margin-bottom: var(--space-2);
}

.prose h2 {
  font-size: 1.4rem;
  margin: var(--space-6) 0 var(--space-2);
}

.btn--nav {
  padding: 0.45em 1.25em;
}

@media (min-width: 900px) {
  .tile-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Responsive breakpoints (mobile-first): <300px base, 300px standard phone,
   phone-landscape (orientation query), 768px tablet portrait,
   1024px tablet landscape / small laptop, 1280px laptop, 1440px desktop,
   1920px widescreen.
   ========================================================================== */

/* Extra-small phones: tighten spacing so nothing overflows under 300px */
@media (max-width: 299px) {
  :root {
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
  }
  .container {
    padding-inline: var(--space-3);
  }
}

/* Standard phones */
@media (min-width: 300px) {
  .container {
    padding-inline: var(--space-4);
  }
}

/* Phones in landscape orientation: reduce vertical section padding since
   viewport height is short, even though width looks "tablet-sized" */
@media (min-width: 480px) and (max-height: 500px) and (orientation: landscape) {
  .section {
    padding-block: var(--space-5);
  }
  .hero {
    padding-block: var(--space-5) var(--space-4);
  }
}

/* Tablets portrait */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-5);
  }
}

/* Tablets landscape / small laptops */
@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-8);
  }
}

/* Laptops */
@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* Standard desktop */
@media (min-width: 1440px) {
  h1 {
    font-size: 3.75rem;
  }
}

/* Widescreen desktop */
@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }
  .container--wide {
    max-width: 1800px;
  }
}

@media (min-width: 1280px) {
  .primary-nav__list {
    gap: var(--space-5);
  }
}