/* GIZMO Web II — shared stylesheet. Design tokens sourced from Figma (file yTp2QWIycfNuLpzBvtDBgD).
   This is the ONE stylesheet for all six pages. Instead of writing separate CSS for every page,
   I built a small design system at the top (colors, fonts, spacing) and then reused the same
   classes everywhere (buttons, cards, nav, etc). That way if I want to change the blue everywhere,
   I only change it in one place instead of hunting through every page. */

/* Self-hosted brand fonts (real Archivo files supplied in images/assets/fonts).
   @font-face lets us load our own font files instead of relying on the user already having the
   font installed, or depending on an internet connection to Google Fonts. Archivo Black is the
   bold display font used for headings, and regular Archivo is used for normal paragraph text. */
@font-face {
  font-family: "Archivo";
  src: url("../images/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Black";
  src: url("../images/assets/fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
/* These are CSS custom properties (a.k.a. CSS variables). Think of them like the variables we use
   in JavaScript, but for style values. Instead of typing the same blue hex code 30 times across
   the stylesheet, I define it once as --color-make and then use var(--color-make) everywhere.
   Bonus: because these are declared on :root, EVERY element on the page can use them. */
:root {
  --color-make: #084a8c;
  --color-play: #e8323a;
  --color-adapt: #1fb755;
  --color-diverge: #f9b233;
  --color-ink: #18181b;
  --color-white: #fafbfb;
  --color-paper: #f4f4f5;
  --color-line: #8a8a8a;
  --state-focus: #1f6fb5;
  --state-error: #dc2626;

  --font-display: "Archivo Black", "Archivo", Arial, sans-serif;
  --font-body: "Archivo", Arial, sans-serif;

  /* Font sizes use clamp(min, preferred, max) so text scales smoothly between mobile and desktop
     instead of jumping at breakpoints. The middle value usually uses vw (viewport width) units,
     so the browser does the math for us as the screen gets bigger or smaller. */
  --fs-eyebrow: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
  --fs-body: clamp(1.05rem, 0.95rem + 0.4vw, 2rem);
  --fs-card-title: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  --fs-section-sub: clamp(1.25rem, 1rem + 1.2vw, 4rem);
  --fs-section-heading: clamp(2rem, 1.3rem + 3vw, 8.25rem);
  --fs-editorial: clamp(2rem, 1.2rem + 3.6vw, 7.75rem);
  --fs-hero: clamp(2.75rem, 1.6rem + 5vw, 10.25rem);
  --fs-watermark: clamp(3.5rem, -2rem + 27vw, 30rem);

  --rail-width: 18px;
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-field: 8px;
  --container-max: 1600px;
  --container-pad: clamp(1.25rem, 4vw, 4.5rem);

  --bp-sm: 700px;
  --bp-lg: 1100px;
}

/* This site is built mobile-first: the plain CSS rules below are the mobile styles, and I use
   min-width media queries to layer on bigger-screen styles on top. The rail (colored stripe on
   the side of each section) is skinny on phones and grows wide on desktop. */
@media (min-width: 1100px) {
  :root {
    --rail-width: 96px;
  }
}

/* ---------- Reset ---------- */
/* Every browser has slightly different default spacing/margins on things like headings, lists
   and buttons. This reset removes those defaults so I get a consistent, predictable starting
   point and don't have to fight the browser's built-in styles later. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.4;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

/* Visually hides text but keeps it available to screen readers - useful for things like the
   "Toggle navigation menu" label on the hamburger button, which sighted users don't need to see
   because the icon already communicates it. */
.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;
}

/* Keyboard users need to be able to SEE which element is focused as they Tab through the page.
   :focus-visible only shows this outline for keyboard focus (not mouse clicks), which keeps the
   page looking clean for mouse users while staying accessible for keyboard users. */
:focus-visible {
  outline: 3px solid var(--state-focus);
  outline-offset: 3px;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Every section on this site follows the same pattern from the Figma design: a thin colored
   "rail" stripe down the side, plus the actual content next to it. Flexbox is perfect for this
   because I just need two boxes side by side, one fixed-width (the rail) and one that stretches
   to fill the rest of the space (the content). */
.section-with-rail {
  display: flex;
}

.rail {
  flex: 0 0 var(--rail-width);
  background: var(--lens-color, var(--color-ink));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 2rem;
}

/* writing-mode: vertical-rl turns the text sideways so it reads top-to-bottom, like text on the
   spine of a book. Combined with rotate(180deg) this matches the rotated label look from Figma
   without needing an image - it's still real, selectable text. */
.rail__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 900 clamp(1.25rem, 1rem + 1.6vw, 3rem) / 1 var(--font-display);
  letter-spacing: 0.02em;
  color: var(--on-lens, var(--color-white));
  white-space: nowrap;
}

.section-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(2.5rem, 4vw, 6rem) var(--container-pad);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-pill);
  font: 900 var(--fs-eyebrow) / 1 var(--font-display);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn:active {
  transform: scale(0.98);
}

.btn--on-dark {
  background: var(--color-white);
  color: var(--color-ink);
}

.btn--on-light {
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---------- Site navigation ---------- */
/* position: sticky keeps the nav bar glued to the top of the screen as you scroll down, so it's
   always easy to jump to another page without scrolling all the way back up. */
.site-header {
  background: var(--color-ink);
  position: sticky;
  top: 0;
  z-index: 40;
}

.nav {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1rem clamp(1.25rem, 4vw, 2rem);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand img {
  width: clamp(96px, 12vw, 168px);
  height: auto;
}

.nav__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font: 900 var(--fs-eyebrow) / 1 var(--font-display);
  color: var(--color-white);
  padding-block: 0.35rem;
}

/* The little colored underline under each nav link. I draw it with a ::after pseudo-element
   instead of border-bottom so I can control its width (52px) separately from the text width. */
.nav__link::after {
  content: "";
  display: block;
  width: 52px;
  max-width: 100%;
  height: 3px;
  border-radius: 2px;
  background: transparent;
}

/* Each nav link gets its own --link-hover variable (set by the modifier classes below) so
   hovering "Make" turns blue, hovering "Play" turns red, etc, all using the same two rules. */
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--link-hover, var(--color-diverge));
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  background: var(--link-hover, var(--color-diverge));
}

.nav__link--make {
  --link-hover: var(--color-make);
}

.nav__link--play {
  --link-hover: var(--color-play);
}

.nav__link--adapt {
  --link-hover: var(--color-adapt);
}

.nav__link--diverge {
  --link-hover: var(--color-diverge);
}

/* aria-current="page" is set in the HTML on whichever nav link matches the current page. Using
   an underline (not just a color change) means the active page is still obvious to someone who
   can't see color well, which is an accessibility best practice. */
.nav__link[aria-current="page"] {
  color: var(--lens-color, var(--color-white));
}

.nav__link[aria-current="page"]::after {
  background: var(--lens-color, var(--color-white));
}

.nav__toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-ink);
  border: 1px solid #333;
  position: relative;
  flex: 0 0 auto;
}

.nav__toggle-bar,
.nav__toggle-bar::before,
.nav__toggle-bar::after {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-white);
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.nav__toggle-bar {
  top: 20px;
}

.nav__toggle-bar::before {
  content: "";
  top: 8px;
}

.nav__toggle-bar::after {
  content: "";
  top: 16px;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar {
  background: transparent;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before {
  top: 8px;
  transform: translateX(-50%) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after {
  top: 8px;
  transform: translateX(-50%) rotate(-45deg);
}

.nav__cta {
  display: none;
}

/* Mobile dropdown menu (single shared link list, reflowed to a horizontal bar at desktop).
   Instead of writing two separate menus (one for mobile, one for desktop) I use ONE <ul> of
   links and just change how it's laid out with a media query. On mobile it's a hidden dropdown
   that slides open (max-height animates from 0 to a tall number); on desktop it becomes a plain
   horizontal row and the hamburger button disappears. */
.nav__links {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  max-height: 0;
  visibility: hidden; /* Keeps collapsed links out of keyboard navigation. */
  overflow: hidden;
  transition: max-height 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.nav__links[data-open="true"] {
  visibility: visible;
  max-height: 28rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 1100px) {
  .nav__toggle {
    display: none;
  }

  .nav__links {
    visibility: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  .nav__links[data-open="true"] {
    padding-bottom: 0;
  }

  .nav__cta {
    display: inline-flex;
  }
}


/* ---------- Cards ---------- */
/* CSS Grid is great here because I want a neat, even grid of cards that automatically wraps to
   more rows depending on the screen size, without me having to calculate widths by hand.
   Mobile = 1 column (stacked), tablet = 2 columns, desktop = 2 or 3 depending on the page
   (controlled by the --card-cols variable set inline in the HTML). */
.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

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

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

/* Each card is a small flex column (icon, then title, then body text stacked vertically).
   min-width: 0 stops long words from forcing the grid to overflow the page - without it, a grid
   item's default minimum width is based on its content, which can push the whole grid too wide. */
.card-lens {
  border-radius: var(--radius-card);
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--lens-color, var(--color-make));
  color: var(--on-lens, var(--color-white));
  min-width: 0;
}

.card-lens__title {
  font: 900 var(--fs-card-title) / 1 var(--font-display);
  overflow-wrap: break-word;
}

.card-lens__body {
  font: 400 clamp(1rem, 0.85rem + 0.6vw, 1.5rem) / 1.2 var(--font-body);
  overflow-wrap: break-word;
}

/* Each lens (Make/Play/Adapt/Diverge) gets its own background + text color, set with custom
   properties via a data-lens="..." attribute in the HTML. This means .card-lens only needs to be
   written once, and I just swap the data-lens value to reuse it for any of the four brand colors. */
.card-lens[data-lens="make"] {
  --lens-color: var(--color-make);
  --on-lens: var(--color-white);
}

.card-lens[data-lens="play"] {
  --lens-color: var(--color-play);
  --on-lens: var(--color-white);
}

.card-lens[data-lens="adapt"] {
  --lens-color: var(--color-adapt);
  --on-lens: var(--color-ink);
}

.card-lens[data-lens="diverge"] {
  --lens-color: var(--color-diverge);
  --on-lens: var(--color-ink);
}

.card-lens[data-lens="paper"] {
  --lens-color: var(--color-paper);
  --on-lens: var(--color-make);
}

.card-lens[data-lens="ink"] {
  --lens-color: var(--color-ink);
  --on-lens: var(--color-white);
}

/* ---------- Forms ---------- */
/* Grid lets the Name/Email fields sit side by side on wider screens (2 columns) while the
   message textarea spans the full width using .form-field--full (grid-column: 1 / -1 means
   "start at the first line and go all the way to the last line"). */
.form-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 60rem;
}

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

  .form-field--full {
    grid-column: 1 / -1;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font: 900 1.375rem / 1 var(--font-display);
}

.form-field input,
.form-field textarea {
  background: var(--color-white);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-field);
  padding: 1rem 1.125rem;
  font: 400 1.5rem / 1.2 var(--font-body);
  color: var(--color-ink);
}

.form-field textarea {
  min-height: 10rem;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--state-focus);
  border-width: 3px;
}

/* :invalid is a built-in CSS pseudo-class the browser applies automatically to form fields that
   fail their validation rules (like required or type="email"). Combined with :not(:placeholder-shown)
   it only turns red AFTER the user has actually typed something invalid, not before they've even
   touched the field - so we get free error styling without writing any JavaScript. */
.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--state-error);
}

.form-field__error {
  display: none;
  color: var(--state-error);
  font-size: 1.125rem;
}

/* The ~ is the "general sibling" selector - it means "select .form-field__error if it comes
   after an invalid input inside the same parent", which is how the error message only shows up
   when the field above it is actually invalid. */
.form-field input:invalid:not(:placeholder-shown) ~ .form-field__error,
.form-field textarea:invalid:not(:placeholder-shown) ~ .form-field__error {
  display: block;
}

/* ---------- Footer ---------- */
/* Same footer markup is reused on every page (just with different link lists), so this one block
   of CSS styles the footer everywhere at once. */
.site-footer {
  background: var(--color-paper);
  padding: clamp(2rem, 5vw, 4rem) var(--container-pad);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer__logo img {
  width: clamp(150px, 20vw, 260px);
  height: auto;
}

.site-footer__tagline {
  font: 900 clamp(1rem, 0.8rem + 1vw, 1.5rem) / 1 var(--font-display);
  color: var(--color-make);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font: 400 1rem var(--font-body);
}

.site-footer__links a {
  color: var(--color-ink);
  transition: color 0.15s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--link-hover, var(--color-ink));
  text-decoration: underline;
}

.site-footer__links .footer-link--make {
  --link-hover: var(--color-make);
}

.site-footer__links .footer-link--play {
  --link-hover: var(--color-play);
}

.site-footer__links .footer-link--adapt {
  --link-hover: var(--color-adapt);
}

.site-footer__links .footer-link--diverge {
  --link-hover: var(--color-diverge);
}

/* ---------- Utility text blocks shared across pages ---------- */
.eyebrow {
  font: 900 var(--fs-eyebrow) / 1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-heading {
  font: 900 var(--fs-section-heading) / 0.95 var(--font-display);
  text-transform: uppercase;
  margin: 0;
}

.section-sub {
  font: 400 var(--fs-section-sub) / 1 var(--font-body);
}

.body-copy {
  font: 400 var(--fs-body) / 1.3 var(--font-body);
  max-width: 46rem;
}

/* Real lens icon graphic used as an editorial accent on lens pages. */
.section-icon {
  display: block;
  width: clamp(220px, 40vw, 480px);
  height: auto;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  pointer-events: none;
}

/* Giant editorial background word (real Figma text content on WHAT/HOW/WHY home sections).
   Fluid clamp keeps it inside the viewport at every width instead of breakpoint-specific hacks. */
.watermark {
  font: 900 var(--fs-watermark) / 0.85 var(--font-display);
  text-transform: uppercase;
  color: var(--watermark-color, currentColor);
  opacity: 0.2;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  white-space: nowrap;
  pointer-events: none;
}

.card-lens__icon {
  width: clamp(2rem, 4vw, 2.75rem);
  height: auto;
  margin-bottom: 0.25rem;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.card-lens[data-lens="adapt"] .card-lens__icon,
.card-lens[data-lens="diverge"] .card-lens__icon {
  filter: brightness(0);
  opacity: 0.55;
}

/* ---------- Hero (shared pattern for Home + Lens pages) ---------- */
/* Every page (Home and the four lens pages) opens with a big dark hero section, so this class
   is shared between all of them instead of copy-pasting the same styles five times. */
.hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
  overflow: hidden;
}

/* Home hero uses ink on mobile (matches finalized Figma mobile screen) and switches to the
   MAKE brand blue at desktop widths, matching the finalized Figma desktop screen. */
@media (min-width: 1100px) {
  .hero--home {
    background: var(--color-make);
  }
}

.hero .section-content {
  position: relative;
  z-index: 1;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero__eyebrow {
  color: var(--color-white);
  margin-bottom: 1rem;
  display: block;
}

.hero__heading {
  font: 900 var(--fs-hero) / 0.93 var(--font-display);
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.hero__intro {
  font: 400 var(--fs-body) / 1.3 var(--font-body);
  max-width: 36rem;
}

.hero__lens-mark {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 3rem);
  width: clamp(2.5rem, 4vw, 4rem);
  height: auto;
  opacity: 0.9;
}

/* ---------- Editorial statement ---------- */
/* This is the light-background section on each lens page with the big colored headline and the
   lens icon graphic underneath it. */
.editorial {
  background: var(--color-paper);
  position: relative;
  overflow: hidden;
}

.editorial__heading {
  font: 900 var(--fs-editorial) / 0.95 var(--font-display);
  text-transform: uppercase;
  max-width: 60rem;
  color: var(--lens-color, var(--color-ink));
}

.editorial__body {
  font: 400 var(--fs-body) / 1.3 var(--font-body);
  max-width: 36rem;
  margin-top: 1.5rem;
}

.editorial__icon {
  margin-top: 2.5rem;
  width: min(100%, 420px);
  height: auto;
}

/* ---------- Method / loop ---------- */
/* The four numbered steps (01, 02, 03, 04) on each lens page. Grid handles the column count for
   me automatically: 1 column on phones, 2 on tablets, 4 on desktop, using the same three rules
   I've used elsewhere in this file. */
.method {
  background: var(--color-ink);
  color: var(--color-white);
}

.method__list {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  grid-template-columns: 1fr;
}

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

@media (min-width: 1100px) {
  .method__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.method__step-number {
  font: 900 2rem / 1 var(--font-display);
  color: var(--lens-color, var(--color-diverge));
}

.method__step-title {
  font: 900 1.5rem / 1.2 var(--font-display);
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* ---------- CTA band ---------- */
/* The closing "call to action" band at the bottom of every lens page, with a headline and the
   Start a Project button. */
.cta {
  background: var(--color-ink);
  color: var(--color-white);
}

.cta__heading {
  font: 900 clamp(2rem, 1.2rem + 4vw, 5rem) / 1.05 var(--font-display);
  text-transform: uppercase;
  max-width: 44rem;
  margin-bottom: 2rem;
}

/* ---------- Home: What / We do ---------- */
/* These next few sections (We Do, How, Why, Make it matter) are ONLY used on the home page, so
   their class names describe the actual content instead of being generic/reusable like the
   sections above. */
.we-do__intro {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
}

.we-do__heading {
  font: 400 clamp(2.5rem, 1.5rem + 6vw, 8rem) / 1 var(--font-body);
}

.we-do__heading em {
  font-style: normal;
  color: var(--color-make);
}

.we-do__lede {
  font: 400 var(--fs-body) / 1.3 var(--font-body);
  max-width: 26rem;
}

/* ---------- Home: How ---------- */
.how {
  background: var(--color-adapt);
  color: var(--color-ink);
}

.how__list {
  font: 900 clamp(1.25rem, 1rem + 1.2vw, 2rem) / 1.3 var(--font-display);
  text-transform: uppercase;
  margin-top: 1.5rem;
}

/* ---------- Home: Why ---------- */
.why {
  background: var(--color-diverge);
  color: var(--color-ink);
}

.why__heading {
  font: 900 var(--fs-editorial) / 0.95 var(--font-display);
  text-transform: uppercase;
}

.why__subhead {
  font: 900 clamp(1.5rem, 1rem + 2vw, 3rem) / 1.1 var(--font-display);
  text-transform: uppercase;
  margin-top: 1.5rem;
}

.why__body {
  font: 400 var(--fs-body) / 1.3 var(--font-body);
  max-width: 42rem;
  margin-top: 1.25rem;
}

/* ---------- Home: Make it matter ---------- */
/* The closing section of the home page. On phones everything stacks in one column; on wider
   screens (900px+) it becomes two columns side by side using grid-template-columns, with the big
   circular badge image filling the empty space on the right. */
.matter {
  background: var(--color-ink);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.matter__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .matter__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3rem;
  }
}

/* This row holds the little red accent line right next to the heading. align-items: stretch
   makes the line automatically grow/shrink to match the heading's height, even across two lines
   of text, without me having to set a fixed pixel height on it. */
.matter__title-row {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}

.matter__accent {
  flex: 0 0 4px;
  width: 4px;
  background: var(--color-play);
}

.matter__heading {
  font: 900 clamp(2rem, 1.2rem + 4vw, 3.5rem) / 0.95 var(--font-display);
  text-transform: uppercase;
}

.matter__lede {
  font: 400 clamp(1.25rem, 1rem + 1.5vw, 2.125rem) / 1.1 var(--font-body);
  max-width: 22rem;
  margin-top: 2rem;
}

.matter__badge {
  display: block;
  width: clamp(220px, 46vw, 640px);
  height: auto;
  margin: 0 auto;
}

.matter__cta {
  margin-top: 1.5rem;
}

/* ---------- Contact ---------- */
/* Styles for the contact page hero, the form section, and the "or start a conversation" section
   below the form. */
.contact-hero {
  background: var(--color-ink);
  color: var(--color-white);
}

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

.contact-note {
  font: 400 1.125rem / 1.3 var(--font-body);
  color: var(--color-line);
  max-width: 40rem;
  margin-top: 1rem;
}

.connect {
  background: var(--color-paper);
}

.connect__meta {
  font: 400 var(--fs-body) / 1.3 var(--font-body);
  margin-top: 1rem;
}

/* ---------- Accents used on Home hero (mobile) ---------- */
/* Four tiny colored dots (one per lens) shown under the hero tagline on mobile, just for a bit
   of visual interest that hints at the four lenses before the visitor even scrolls down. */
.accent-dots {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.accent-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.accent-dots .is-make { background: var(--color-make); }
.accent-dots .is-play { background: var(--color-play); }
.accent-dots .is-adapt { background: var(--color-adapt); }
.accent-dots .is-diverge { background: var(--color-diverge); }