/* ============================================
   GLOBAL STYLES
   Basic reset and site-wide defaults.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=DM+Sans:wght@400;500;700&display=swap');
@import 'tokens.css';

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

/* --- Base --- */
html {
  font-size: 16px;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
}

@media (hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}


/* =====================
   LAYOUT
   ===================== */

/* Pushes all page content below the fixed nav so nothing hides underneath it */
.main {
  padding-top: 64px;
}

/*
  site-container — centers content at a max of 960px on desktop.
  Used as an inner wrapper inside sections that need constrained width.
  On mobile it provides the standard 16px side padding.
  On desktop it centers itself and removes the side padding.
*/
.site-container {
  padding: 0 16px;
}

@media (min-width: 768px) {
  .site-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
  }
}


/* =====================
   NAVIGATION
   ===================== */

.nav {
  position: fixed;        /* stays at top of screen as you scroll */
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: rgba(250, 248, 245, 0.80); /* semi-transparent warm off-white — creates the glass base */
  backdrop-filter: blur(12px);               /* blurs content scrolling behind the nav */
  -webkit-backdrop-filter: blur(12px);       /* same blur, required for Safari */
  border-bottom: 1px solid var(--color-border);
  z-index: 100;           /* sits above all other content */
}

/* Shared font styles for both wordmark variants */
.nav-wordmark {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);    /* 17px */
  font-weight: var(--weight-regular);
  line-height: 23px;
  color: var(--color-text);
  white-space: nowrap;
}

/* "NJP" on mobile, "Nate Pittman" on desktop — toggled by breakpoint */
.nav-wordmark-desktop { display: none; }
.nav-wordmark-mobile  { display: inline; }

@media (min-width: 768px) {
  .nav-wordmark-desktop { display: inline; }
  .nav-wordmark-mobile  { display: none; }
}


/* =====================
   BUTTONS
   ===================== */

/* Filled blue button — used in nav and anywhere else later */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  font-family: var(--font-body);
  font-size: var(--text-button);    /* 18px */
  font-weight: var(--weight-medium);
  line-height: 20px;
  padding: 12px 16px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .btn-primary:hover {
    opacity: 0.88;
    text-decoration: none;
  }
}

/* Text link button — "view project →" */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  width: fit-content;               /* hugs the text, doesn't stretch full width */
  font-family: var(--font-body);
  font-size: var(--text-button);    /* 18px */
  font-weight: var(--weight-medium);
  line-height: 20px;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .btn-tertiary:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
    border-radius: 2px;
    text-decoration: none;
  }
}


/* =====================
   TAGS
   ===================== */

/* Base tag style — reused in hero and project cards */
.tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;               /* hugs the text — prevents stretching in flex containers */
  padding: 4px 6px;
  border-radius: 6px;               /* updated from 4px to match Figma Iteration 2.0 */
  font-family: var(--font-body);
  font-size: var(--text-tag);       /* 14px */
  font-weight: var(--weight-medium);
  line-height: 16px;
  white-space: nowrap;
}

/* Keep old tag classes — still used on case study pages */
.tag-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

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

.tag-tertiary {
  background-color: var(--color-card);
  color: var(--color-text-muted);
}

/* --- New tag classes for home page cards (Iteration 2.0) --- */

/* "shipped" — filled accent-blue pill */
.tag-shipped {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

/* neutral info tag — white background with a subtle border */
.tag-neutral {
  background-color: var(--color-card);
  color: var(--color-text-muted);
  border: 0.5px solid var(--color-border);
}

/*
  Desktop overrides for tags inside .card-details.
  Scoped to .card-details so they don't affect case study page tags.
  Larger size (18px), more padding (8px top/bottom, 12px sides), softer radius (8px).
*/
@media (min-width: 768px) {
  .card-details .tag {
    font-size: var(--text-desktop-tag); /* 18px */
    line-height: 22px;
    padding: 8px 12px;
    border-radius: 8px;
  }
  /* shipped pill gets a matching accent border on desktop */
  .card-details .tag-shipped {
    border: 0.5px solid var(--color-accent);
  }
  /* neutral tag gets a stronger border on desktop */
  .card-details .tag-neutral {
    border: 0.5px solid var(--color-border-strong);
  }
}


/* =====================
   HERO
   ===================== */

/*
  The hero section uses site-container for horizontal centering/padding.
  On desktop it gets a bottom border to divide it from the project grid,
  matching the thin divider in the Figma layout.
*/
.hero {
  padding: 24px 0;
}

/* H1 and bio stacked with a small gap */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
  Main headline — uses H2 size (26px) on mobile.
  Grows to 52px (Desktop Display) at the 768px breakpoint.
*/
.hero-heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);        /* 26px on mobile */
  font-weight: var(--weight-medium);
  line-height: 28px;
  color: var(--color-text);
}

/*
  "Ulta Beauty" inline link inside the heading.
  Inherits the heading's color (dark, not accent blue) and just adds an underline.
  Hover shifts to accent blue so it still feels interactive.
*/
.hero-company-link {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (hover: hover) {
  .hero-company-link:hover {
    color: var(--color-accent);
    text-decoration: none;
  }
}

/* Subtitle / bio text */
.hero-bio {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);   /* 17px */
  font-weight: var(--weight-regular);
  line-height: 23px;
  color: var(--color-text-muted);
}

/* Desktop hero overrides */
@media (min-width: 768px) {
  .hero {
    padding: 56px 0 24px;           /* extra breathing room above, matches Figma spacing */
  }
  .hero-copy {
    gap: 24px;
  }
  .hero-heading {
    font-size: var(--text-desktop-display); /* 52px */
    line-height: 62px;
  }
  .hero-bio {
    font-size: var(--text-desktop-body-lg); /* 22px */
    line-height: 26px;
  }
}


/* =====================
   FOOTER
   ===================== */

.footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 16px 24px;          /* extra top padding gives it breathing room from the grid */
  background-color: var(--color-sheet);
}

@media (min-width: 768px) {
  .footer {
    padding: 48px 40px 24px;        /* wider side padding on desktop */
  }
}

/* Each labelled group (Quick Links, Connect) */
.footer-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The list of links inside each section */
.footer-links {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

/* Individual footer link — dark text, not accent blue */
.footer-link {
  display: inline-flex;
  width: fit-content;
  font-family: var(--font-body);
  font-size: var(--text-button);    /* 18px */
  font-weight: var(--weight-medium);
  line-height: 20px;
  color: var(--color-text);
  text-decoration: none;
}

@media (hover: hover) {
  .footer-link:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
    border-radius: 2px;
    text-decoration: none;
  }
}

/* Copyright and credits */
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);   /* 11px */
  font-weight: var(--weight-medium);
  line-height: 16px;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}


/* =====================
   PROJECT GRID
   ===================== */

/*
  grid-section uses site-container internally for horizontal centering.
  Vertical padding lives on the section itself.
*/
.grid-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
}

/*
  Eyebrow label — "FEATURED PROJECTS" header above the card list.
  Mobile: 11px bold uppercase tracked-out label.
  Desktop: 18px medium, full text color — more prominent, less label-like.
  Also used in footer (Quick Links, Connect) — those stay at the mobile style always.
*/
.grid-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);   /* 11px */
  font-weight: var(--weight-bold);
  line-height: 16px;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Card list */
.project-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 768px) {
  .grid-section {
    gap: 16px;
    padding: 48px 0 56px;
  }
  /* Desktop grid label — larger and full text color, distinct from the eyebrow pattern */
  .grid-section .grid-eyebrow {
    font-size: var(--text-desktop-tag); /* 18px */
    font-weight: var(--weight-medium);
    letter-spacing: 0;
    color: var(--color-text);
    margin-bottom: 24px;              /* pushes the card grid away from the label */
  }
  .project-grid {
    gap: 56px;
  }
}

/* Individual project card */
.card-project {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
  card-image — wraps both the thumbnail and the tag rail.

  MOBILE: flex column so the tags flow naturally below the image.
  The img itself gets the border-radius so the container doesn't clip the tags.

  DESKTOP: becomes a fixed-height block with position:relative and overflow:hidden.
  The picture/img fills it absolutely, and the tag rail is pinned to the bottom-left.
*/
.card-image {
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* smooth hover animation */
}

@media (hover: hover) {
  .card-project:hover .card-image {
    transform: translateY(-3px);
    box-shadow:
      0px 8px 16px rgba(28, 25, 23, 0.08),
      0px 2px 4px rgba(28, 25, 23, 0.06);
  }
}

/* On mobile the picture element is a block flex-item that wraps the img */
.card-image picture {
  display: block;
  width: 100%;
}

/* Mobile thumbnail — 4:3 aspect ratio with rounded corners */
.card-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

@media (min-width: 768px) {
  /* Desktop: aspect-ratio drives the height so it stays 16:9 at any container width */
  .card-image {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
  }
  /*
    display:contents removes the <picture> element from the layout entirely —
    the <img> inside it then behaves as a direct child of .card-image,
    which makes position:absolute + inset:0 work cleanly.
  */
  .card-image picture {
    display: contents;
  }
  .card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;             /* override the mobile 4:3 ratio */
    border-radius: 0;               /* container clips corners via overflow:hidden */
    object-fit: cover;
  }
}

/* Text content below the image — tag rail, title, view project link */
.card-details {
  display: flex;
  flex-direction: column;
  gap: 8px;                         /* updated from 6px to match Iteration 2.0 spacing */
}

/* Tag row — wraps when there are too many tags for one line */
.tag-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Project title */
.card-title {
  font-family: var(--font-body);
  font-size: var(--text-h3);        /* 20px */
  font-weight: var(--weight-bold);
  line-height: 24px;
  color: var(--color-text);
}

/*
  Utility classes for showing/hiding content at specific breakpoints.
  Works exactly like the NJP vs "Nate Pittman" toggle in the nav.
  desktop-only: hidden on mobile, visible on desktop.
  mobile-only: visible on mobile, hidden on desktop.
*/
.desktop-only { display: none; }
.mobile-only  { display: inline-flex; }

@media (min-width: 768px) {
  /* Card title grows to 40px on desktop — Playfair Display heading weight */
  .card-title {
    font-size: var(--text-desktop-card-title); /* 40px */
    line-height: 48px;
  }
  /* "view project →" link grows to 26px on desktop */
  .btn-tertiary {
    font-size: var(--text-desktop-button); /* 26px */
    line-height: 31px;
  }
  .desktop-only { display: inline-flex; }
  .mobile-only  { display: none; }
}


/* =====================
   CASE STUDY — SHARED
   Styles for all case study pages.
   ===================== */

/* Constrain case study content to 960px and center it on desktop */
@media (min-width: 768px) {
  .cs-header,
  .cs-hero,
  .cs-overview,
  .cs-section,
  .cs-tldr {
    max-width: 960px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Prevent underline when nav-wordmark is used as a back-link on case study pages */
@media (hover: hover) {
  a.nav-wordmark:hover {
    text-decoration: none;
  }
}

/*
  Larger "Display" headline — used on newer case study pages instead of
  cs-title (34px). CS1 keeps cs-title as-is; this is additive, not a replacement.
*/
.cs-title-lg {
  font-family: var(--font-display);
  font-size: var(--text-display);    /* 44px */
  font-weight: var(--weight-medium);
  line-height: 52px;
  color: var(--color-text);
}

/*
  Extra breathing room below the fixed nav on case study pages.
  Mobile: Figma specs 96px — not yet eyeballed in browser, adjust if it feels off.
  Desktop: Figma specs 120px, halved to 60px here to match how it actually reads in browser.
*/
.cs-header-spacer {
  height: 96px;
}

@media (min-width: 768px) {
  .cs-header-spacer {
    height: 60px;
  }
}

/* Subhead sitting under cs-title-lg — two weights, pick per case study in Figma */
.cs-subtitle-bold {
  font-family: var(--font-body);
  font-size: var(--text-h3);         /* 20px, reuses existing token */
  font-weight: var(--weight-bold);
  line-height: 24px;
  color: var(--color-text-muted);
}

.cs-subtitle-regular {
  font-family: var(--font-body);
  font-size: var(--text-h3);         /* 20px, reuses existing token */
  font-weight: var(--weight-regular);
  line-height: 24px;
  color: var(--color-text-muted);
}

/* Card-style frame for hero/solution media — bordered, rounded, white background */
.cs-image-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}

/* Accent-colored variant of grid-eyebrow — used for "KEY FINDING #" labels */
.grid-eyebrow-accent {
  color: var(--color-accent);
}

/*
  TL;DR row — two-card summary sitting under the hero (Role & Team / Impact).
  New narrative pattern replacing the old meta-card grid, going forward.
*/
.cs-tldr {
  padding: 16px;
}

.tldr-row {
  display: flex;
  flex-direction: column;   /* stacked on mobile — Figma mobile shows the two cards on top of each other */
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 768px) {
  .tldr-row {
    flex-direction: row;    /* side by side on desktop, as before */
  }
}

.tldr-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

/* Bold lead line inside a tldr-card (e.g. "Led design, research & strategy") */
.tldr-lead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);    /* 17px */
  font-weight: var(--weight-bold);
  line-height: 23px;
  color: var(--color-text);
}

/* Regular paragraph directly under a tldr-lead */
.tldr-body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);    /* 17px */
  font-weight: var(--weight-regular);
  line-height: 23px;
  color: var(--color-text);
}

/* Big colored figure in the Impact card (e.g. "+51M incremental ARR") */
.tldr-impact-figure {
  font-family: var(--font-body);
  font-size: var(--text-h3);         /* 20px */
  font-weight: var(--weight-bold);
  line-height: 24px;
  color: var(--color-success);
}

/*
  Context callout — small "sheet" background note with an asterisk icon.
  Used throughout Problem/Goal/Context/Solution to add supporting detail.
*/
.context-block {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--color-sheet);
}

.context-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.context-text {
  font-family: var(--font-body);
  font-size: var(--text-caption);    /* 13px */
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--color-text);
}

/* White bordered card used for each Discovery "Key Finding" */
.key-finding-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.key-finding-title {
  font-family: var(--font-body);
  font-size: var(--text-h3);         /* 20px */
  font-weight: var(--weight-bold);
  line-height: 24px;
  color: var(--color-text);
}

/* Bordered card frame for video content (Solution section loop) — same treatment as cs-image-card */
.cs-video-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Stack of paragraphs that need spacing between them but aren't an eyebrow+heading pair */
.cs-body-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Text + image layout — used in the Context subsection. Stacked on mobile, side-by-side on desktop. */
.cs-context-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

@media (min-width: 768px) {
  .cs-context-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.cs-context-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
  max-width: 464px;
}

/* Filter-rail image — full width on mobile, fixed width to match Figma's desktop layout */
.context-image {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .context-image {
    width: 440px;
  }
}

/*
  Plain caption — newer caption style, no sheet-colored box (unlike cs-caption).
  Centered text sitting directly under the image. New pattern going forward;
  CS1 keeps its boxed cs-caption style untouched for now.
*/
.cs-caption-plain {
  font-family: var(--font-body);
  font-size: var(--text-caption);    /* 13px */
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--color-text);
  text-align: center;
}

/* Thin 1px horizontal rule — separates problem section blocks */
.section-divider {
  height: 1px;
  background-color: var(--color-border);
  width: 100%;
}

/* Page title area — sits just below the fixed nav */
.cs-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
}

.cs-title {
  font-family: var(--font-display);
  font-size: var(--text-h1);         /* 34px */
  font-weight: var(--weight-medium);
  line-height: 40px;
  color: var(--color-text);
}

/* Hero image — 16px padding gives it breathing room from the edges */
.cs-hero {
  padding: 16px;
}

/* Overview bar — stacked white meta cards */
.cs-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* Each white card in the overview bar */
.meta-card {
  background-color: var(--color-card);
  display: flex;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
}

/* Each column inside a meta card (e.g. Role / Team) */
.meta-cell {
  flex: 1;                /* both columns share space equally */
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;           /* prevents long text from overflowing the flex container */
}

/* The value text below the eyebrow label */
.meta-value {
  font-family: var(--font-body);
  font-size: var(--text-body);       /* 15px */
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--color-text);
}

/* Generic section wrapper — used for problem and solution */
.cs-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
}

/* Eyebrow label + H2 stacked together */
.cs-section-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* H2 — problem and solution statements (Playfair). 22px on mobile (Heading 2 Mobile), 26px on desktop. */
.cs-section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2-mobile);  /* 22px */
  font-weight: var(--weight-medium);
  line-height: 28px;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .cs-section-title {
    font-size: var(--text-h2);       /* 26px */
  }
}

/* H3 — Goal, Context, and other subsection labels (DM Sans Bold) */
.cs-subsection-title {
  font-family: var(--font-body);
  font-size: var(--text-h3);         /* 20px */
  font-weight: var(--weight-bold);
  line-height: 24px;
  color: var(--color-text);
}

/* H3 + body copy grouped */
.cs-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Body copy in muted color — used under H3s and in solution subtext */
.cs-body-muted {
  font-family: var(--font-body);
  font-size: var(--text-body);       /* 15px */
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--color-text-muted);
}

/* Image + caption stacked together */
.cs-image-caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Full-width 16:9 image — fills the content area */
.cs-image-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Sheet-colored caption box below images */
.cs-caption {
  background-color: var(--color-sheet);
  padding: 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--text-caption);    /* 13px */
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--color-text);
}

/* Space between paragraphs inside a multi-line caption */
.cs-caption p + p {
  margin-top: 8px;
}

/* Two portrait images side by side */
.cs-two-up {
  display: flex;
  justify-content: space-between;
}

.cs-two-up img {
  width: 175px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* CTA block — centered call to action at the bottom of the case study */
.cs-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.cs-cta-heading {
  font-family: var(--font-body);
  font-size: var(--text-h3);         /* 20px */
  font-weight: var(--weight-bold);
  line-height: 24px;
  color: var(--color-text);
  text-align: center;
}

/* Centered, wrapping row of tags */
.cs-cta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Full-width blue CTA button */
.btn-reach-out {
  display: block;
  width: 100%;
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  font-family: var(--font-body);
  font-size: var(--text-button);     /* 18px */
  font-weight: var(--weight-medium);
  line-height: 20px;
  padding: 12px 16px;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
}

@media (hover: hover) {
  .btn-reach-out:hover {
    opacity: 0.88;
    text-decoration: none;
  }
}