@charset "UTF-8";
/* CSS Document */

/* ===========================================================
   AndreaV — Design System (Final, Responsive)
   - Typography scale with fluid clamp()
   - Accessible nav & buttons (focus-visible)
   - Robust grid containers (gap-safe with fr tracks)
   - Video component
   - Mobile stacking for grids
   - Reduced-motion support
   =========================================================== */

/* -----------------------------
   TOKENS / VARIABLES
------------------------------ */
:root{
  /* Brand Colors */
  --hero-green: #76B900;  /* hero + subtitles */
  --brand-red:  #8d1230;  /* icons + categories */
  --ink:        #4B4B4B;  /* main ink */
  --ink-light:  #696969;  /* secondary ink */
  --ink-inverse:#E8E8E8;  /* light on dark */

  /* Type Scale (1rem = 16px base) */
  --fs-base: 1rem;       /* 1.0x paragraph base */
  --fs-cat:  1.3rem;     /* 1.3x categories */
  --fs-sub:  1.7rem;     /* 1.7x subtitles */
  --fs-title:2.0rem;     /* 2.0x titles */
  --fs-call: 3.2rem;     /* 3.2x callouts */
  --fs-hero: 5.0rem;     /* 5.0x hero */

  /* Line-height & spacing rhythm */
  --lh-copy: 1.6;
  --lh-heading: 1.2;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* Layout */
  --column-gap: 2%;      /* space between grid columns */
}

/* -----------------------------
   BASE
------------------------------ */
html, body { margin: 0; padding: 0; }

body {
  font-family: poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-copy);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}

/* -----------------------------
   TYPOGRAPHY ROLES (Responsive)
------------------------------ */

/* HERO — 3.0x — Light — #76B900 */
h1 {
  /* Fluid between small and large screens, capped at 5.0rem */
  font-size: clamp(2.2rem, 6vw, var(--fs-hero));
  font-weight: 200;
  color: var(--hero-green);
  text-align: left;
  line-height: 1.15;
  margin: 0 0 var(--space-6);
  padding-inline: 0;
}

/* CALLOUTS — 2.2x — Medium — #E8E8E8 (use on dark backgrounds) */
h2 {
  font-size: clamp(1.6rem, 3.8vw, var(--fs-call));
  font-weight: 200;
  color: var(--ink-inverse);
  text-align: left;
}

/* TITLES — 2.0x — Medium — #4b4b4b */
h3 {
  font-size: clamp(1.5rem, 3.2vw, var(--fs-title));
  font-weight: 400;
  color: var(--ink);
}

/* SUBTITLES — 1.7x — Regular — #76B900 */
h4 {
  font-size: clamp(1.25rem, 2.8vw, var(--fs-sub));
  font-weight: 400;
  color: var(--hero-green);
}

/* CATEGORIES — 1.3x — Medium — #8d1230 */
h5 {
  font-size: clamp(1.1rem, 2.2vw, var(--fs-cat));
  font-weight: 500;
  color: var(--brand-red);
  letter-spacing: 0.01em;
}

/* PARAGRAPH — responsive & accessible */
p {
  font-size: 1.25rem;        /* ~20px default */
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-copy);
}

/* -----------------------------
   UTILITIES
------------------------------ */
.text-light { color: var(--ink-inverse); }
.text-brand { color: var(--brand-red); }
.text-green { color: var(--hero-green); }
.text-secondary { color: var(--ink-light); }
.text-center { text-align: center; }

/* Small, subtle text (e.g., footer ©2025) */
.small-text {
  font-size: 0.875rem;        /* ~14px */
  line-height: 1.4;
  color: var(--ink-light);
}

/* Context helper for dark sections */
.on-dark { color: var(--ink-inverse); }

.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark p {
  color: var(--ink-inverse);
}

/* keep hero green even on dark background */
.on-dark h1 {
  color: var(--hero-green);
}

/* -----------------------------
   LOGO & NAVIGATION
------------------------------ */

/* Homepage: bright logo on dark hero */
.logo-home {
  display: block;
  margin: 0 auto;
  padding: 20px;
  font-family: poppins, sans-serif;
  font-size: 1.5em;
  text-align: center;
  text-decoration: none;
  color: #E8E8E8;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Inner pages: dark logo on light background */
.logo {
  display: block;
  margin: 0 auto;
  padding: 20px;
  font-family: poppins, sans-serif;
  font-size: 1.5em;
  text-align: center;
  text-decoration: none;
  color: #696969;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Nav (shared baseline) */
.nav,
.nav-home {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap; /* allow wrapping on small screens */
}

/* Homepage: white text on dark background */
.nav-home a {
  font-family: poppins, sans-serif;
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: lowercase;
  color: #E8E8E8;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  padding: 6px 8px; /* touch target */
}

.nav-home a:hover { color: #76B900; }

/* Inner pages: gray text on white background */
.nav a {
  font-family: poppins, sans-serif;
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: lowercase;
  color: #696969;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  padding: 6px 8px; /* touch target */
}

.nav a:hover { color: #8d1230; }

/* Current page */
.nav a.active, .nav-home a.active {
  font-weight: 500;
  color: #76B900;
}

/* Keyboard focus ring */
a:focus-visible, .button:focus-visible {
  outline: 2px solid var(--hero-green);
  outline-offset: 2px;
}

/* -----------------------------
   BUTTONS
------------------------------ */
.button {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 24px;
  font-family: poppins, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: #4b4b4b;
  border: 1px solid #4b4b4b;
  background-color: transparent;
  transition: all 0.3s ease;
}

.button:hover,
.button:focus {
  background-color: #76B900;
  color: #E8E8E8;
  border-color: #76B900;
}

.button:active {
  background-color: #8d1230;
  border-color: #8d1230;
  color: #E8E8E8;
}

/* Inverted style for dark hero */
.button-light {
  color: #E8E8E8;
  border: 1px solid #E8E8E8;
  background-color: transparent;
}

.button-light:hover,
.button-light:focus {
  background-color: #76B900;
  color: #E8E8E8;
  border-color: #76B900;
}

/* -----------------------------
   LAYOUT CONTAINERS
   - Invisible border
   - 10px top/bottom margin
   - 2% column gap on grids
------------------------------ */
.container-full,
.container-50-50,
.container-60-40,
.container-40-60,
.container-25,
.container-33-34-33 {
  box-sizing: border-box;
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Full width with inner padding */
.container-full {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

/* 90% centered base + grid variants (gap-safe with fr tracks) */
.container-50-50,
.container-60-40,
.container-40-60,
.container-25,
.container-33-34-33 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  column-gap: var(--column-gap);
  align-items: center;
}

/* Equal split (50/50) */
.container-50-50 { grid-template-columns: 1fr 1fr; }

/* Big Left (60/40) */
.container-60-40 { grid-template-columns: 3fr 2fr; }

/* Big Right (40/60) */
.container-40-60 { grid-template-columns: 2fr 3fr; }

/* 3-Column (33/34/33) */
.container-33-34-33 { grid-template-columns: 33fr 34fr 33fr; }

/* 4-Column (25/25/25/25) */
.container-25 { grid-template-columns: 25fr 25fr 25fr 25fr; }



/* -----------------------------
   VIDEO
------------------------------ */
.video {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: none;
  border-radius: 12px;  /* optional */
  margin-top: 10px;
  margin-bottom: 10px;
}
.video video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  border-radius: inherit;
  object-fit: cover;
}

/* -----------------------------
   RESPONSIVE BEHAVIOR
------------------------------ */

/* Paragraph scaling for different viewports (exclude .small-text) */
@media screen and (min-width: 1400px) {
  p:not(.small-text) {
    font-size: 1.375rem;   /* ~22px on very wide screens */
  }
}

@media screen and (max-width: 600px) {
  p:not(.small-text) {
    font-size: 1.125rem;   /* ~18px on smaller phones */
  }
}

/* Reduce transitions/animations for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Tablet and down: tighten nav gap slightly */
@media (max-width: 900px) {
  .nav, .nav-home { gap: 1rem; }
}

/* Mobile stacking for grid containers */
@media (max-width: 768px) {
  .container-50-50,
  .container-60-40,
  .container-40-60,
  .container-33-34-33 {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  /* Icon row: 4-col → 2x2 on mobile */
  .container-25 {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.5rem;
    width: 90% !important;
  }

  /* Slightly reduce hero top/bottom spacing on small screens */
  h1 { margin: 1rem auto 1rem; }
}

/* Large screens: allow slightly roomier titles (stays within your max scale) */
@media (min-width: 1280px) {
  h3 { letter-spacing: -0.005em; }
  h2 { letter-spacing: -0.01em; }
}

/* -----------------------------
   CASE STUDY
   Scoped under .case-study —
   safe to use alongside all
   other page styles.
------------------------------ */
.case-study {
  --max:    80%;
  --pad:    clamp(18px, 3.5vw, 34px);
  --panel:  #ffffff;
  --panel-2:#f7f7f7;
  --stroke: rgba(75,75,75,.18);
  --shadow: 0 12px 28px rgba(0,0,0,.10);
  --radius: 15px;
}

.case-study .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--pad) 44px;
}

/* Surfaces */
.case-study .surface {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Hero */
.case-study header.hero {
  padding: clamp(24px, 4vw, 42px);
}

.case-study .kicker {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 1.2rem;
  color: var(--ink-light);
  border: 1px solid var(--stroke);
  background: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  width: fit-content;
}
.case-study .kicker strong {
  color: var(--ink);
  font-weight: 600;
}

.case-study h1 {
  margin: 14px 0 10px;
  font-size: 4rem;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--hero-green);
  font-weight: 600;
}

.case-study .subhead {
  margin: 0;
  color: var(--ink);
  font-size: 1.5rem;
  max-width: 80ch;
}
.case-study .subhead strong { color: var(--hero-green); }

/* Hero stack (quote + metrics) */
.case-study .hero-stack {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.case-study .hero-quote {
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--stroke);
}
.case-study .hero-quote p {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1.25rem;
}
.case-study .hero-quote .emphasis {
  color: var(--ink);
  font-weight: 600;
}

/* Metrics row (4 tiles) */
.case-study .metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.case-study .metric {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 165px;
  justify-content: center;
}
.case-study .metric .num {
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -.5px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.case-study .metric .lbl {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
.case-study .metric .tag {
  font-size: 1.2rem;
  margin: 0;
  color: var(--ink);
  border: none;
  background: none;
  padding: 0;
}

/* Sections */
.case-study main { display: block; }
.case-study .content {
  margin-top: 18px;
  display: grid;
  gap: 16px;
}
.case-study section { padding: clamp(20px, 3.4vw, 34px); }

.case-study h2 {
  margin: 0 0 10px;
  font-size: 2rem;
  letter-spacing: -.2px;
  color: var(--brand-red);
  font-weight: 500;
}

.case-study h3 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3.2vw, 2.0rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: normal;
}

.case-study p {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.65;
}

.case-study .lead {
  color: var(--ink);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7;
}

.case-study .bullets {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 1.2rem;
}
.case-study .bullets li { margin: 6px 0; }

/* 2-column grid */
.case-study .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

/* Cards */
.case-study .card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: #ffffff;
}
.case-study .card .title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.case-study .card .title strong {
  color: var(--hero-green);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .2px;
}

.case-study .pill {
  font-size: 1rem;
  border: none;
  background: none;
  padding: 0;
  color: var(--ink-light);
  font-weight: 400;
}

/* Timeline */
.case-study .timeline {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.case-study .step {
  display: grid;
  grid-template-columns: 160px 1fr 110px 110px;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: #ffffff;
  align-items: center;
}
.case-study .step .year {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px;
  font-size: 1.2rem;
}
.case-study .step .details {
  color: var(--ink);
  font-size: 1.25rem;
}

/* Metric small (timeline inline stats) */
.case-study .metric-small {
  text-align: left;
  justify-self: end;
  min-width: 92px;
}
.case-study .metric-small .num {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.4px;
  color: var(--ink);
  margin: 0 0 6px;
}
.case-study .metric-small .lbl {
  font-size: 16px;
  color: var(--ink-light);
  margin: 0;
}

/* Skills pills */
.case-study .skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.case-study .skill {
  font-size: 1.2rem;
  color: var(--ink);
  border: 1px solid var(--stroke);
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 999px;
}

/* Case study responsive breakpoints */
@media (max-width: 980px) {
  .case-study .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .case-study .grid-2  { grid-template-columns: 1fr; }
  .case-study .step    { grid-template-columns: 1fr; align-items: start; }
  .case-study .metric-small { justify-self: start; min-width: unset; }
}
@media (max-width: 520px) {
  .case-study .metrics { grid-template-columns: 1fr; }
}

/* Case study — mobile (phones) */
@media (max-width: 600px) {
  /* Wrap expands to 93% of screen */
  .case-study .wrap {
    max-width: 93%;
    padding: 16px 0 32px;
  }

  /* h1 title — rein it in on small screens */
  .case-study h1 {
    font-size: clamp(1.8rem, 8vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
  }

  /* Kicker pill wraps cleanly */
  .case-study .kicker {
    font-size: 1rem;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Hero section padding */
  .case-study header.hero {
    padding: 20px 16px;
  }

  /* Metrics: single column on small phones */
  .case-study .metrics {
    grid-template-columns: 1fr;
  }

  /* Metric tiles smaller */
  .case-study .metric {
    min-height: auto;
    padding: 14px;
  }

  /* Section padding tighter */
  .case-study section {
    padding: 20px 16px;
  }

  /* Cards full width */
  .case-study .grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Timeline step stacks */
  .case-study .step {
    grid-template-columns: 1fr;
    padding: 14px 16px;
    gap: 10px;
  }

  /* Surface cards full bleed feel */
  .case-study .surface {
    border-radius: 10px;
  }

  /* Lead text slightly smaller */
  .case-study .lead {
    font-size: 1.1rem;
  }
}

/* -----------------------------
   HOME PAGE
   Scoped — safe alongside all
   other page styles.
------------------------------ */

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 72px 5%;
}

.hero-eyebrow {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #76B900;
  margin: 0 0 20px;
}

.hero-split h1 {
  font-size: clamp(2.4rem, 4vw, 5rem);
  font-weight: 200;
  color: #E8E8E8;
  text-align: left;
  margin: 0 0 24px;
  line-height: 1.08;
}

.hero-split h1 strong {
  font-weight: 700;
  color: #ffffff;
}

.hero-tagline {
  font-size: 2rem;
  color: #b2b2b2;
  line-height: 1.7;
  margin: 0 0 32px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.stat-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px;
  padding: 28px 24px;
}

.stat-card.wide {
  grid-column: 1 / -1;
}

.stat-num {
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  font-weight: 200;
  color: #76B900;
  line-height: 1;
  margin: 0 0 10px;
  font-family: poppins, sans-serif;
}

.stat-label {
  font-size: 1.5rem;
  color: #909090;
  line-height: 1.5;
  margin: 0;
  font-family: poppins, sans-serif;
}

.section-intro {
  background: #f4f4f4;
  border-top: 0px solid #e0e0e0;
  border-bottom: 0px solid #e0e0e0;
  padding: 48px 5%;
  text-align: center;
}

.section-eyebrow {
  font-size: 1.8rem;
  font-weight: 700;
  color: #76B900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-family: poppins, sans-serif;
}

.section-intro p {
  font-size: 1.5rem;
  color: #4B4B4B;
  line-height: 1.65;
  max-width: 60%;
  margin: 0 auto;
}

.work-grid-section {
  background: #f4f4f4;
  padding: 36px 5% 56px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.work-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 32px 16px 24px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: border-color 0.25s ease, transform 0.2s ease;
}

.work-card:hover {
  border-color: #76B900;
  transform: translateY(-4px);
}

.work-card-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
}

.work-card-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.work-card-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #4B4B4B;
  margin: 0 0 6px;
  font-family: poppins, sans-serif;
}

.work-card-desc {
  font-size: 0.95rem;
  color: #696969;
  line-height: 1.5;
  font-family: poppins, sans-serif;
}

.focus-section {
  background: #ffffff;
  padding: 56px 5% 72px;
  text-align: center;
}

.focus-section .section-eyebrow {
  margin-bottom: 28px;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  overflow: hidden;
  max-width: 75%;
  margin: 0 auto;
  text-align: left;
}

.focus-col {
  padding: 36px 32px;
  border-right: 1px solid #e0e0e0;
}

.focus-col:last-child {
  border-right: none;
}

.focus-col-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #8d1230;
  margin: 0 0 16px;
  font-family: poppins, sans-serif;
}

.focus-col-body {
  font-size: 1.05rem;
  color: #696969;
  line-height: 1.9;
  margin: 0;
  font-family: poppins, sans-serif;
}

/* ---- TABLET (≤900px) ---- */
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 6%;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .focus-grid {
    grid-template-columns: 1fr;
  }
  .focus-col {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
  .focus-col:last-child {
    border-bottom: none;
  }
}

/* ---- MOBILE (≤600px) ---- */
@media (max-width: 600px) {
  .hero-split {
    padding: 36px 5%;
    gap: 28px;
  }
  .hero-split h1 {
    font-size: 2.2rem;
  }
  .hero-tagline {
    font-size: 1.05rem;
  }
  .hero-ctas {
    flex-direction: column;
  }
  .hero-ctas .button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .hero-stats {
    grid-template-columns: 1fr;
  }
  .stat-card.wide {
    grid-column: 1;
  }
  .stat-num {
    font-size: 2.2rem;
  }
  .stat-label {
    font-size: 0.95rem;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .work-card {
    padding: 24px 12px 18px;
  }
  .work-card-icon {
    width: 56px;
    height: 56px;
  }
  .work-card-title {
    font-size: 1rem;
  }
  .work-card-desc {
    font-size: 0.85rem;
  }
  .focus-col {
    padding: 28px 24px;
  }
  .section-intro {
    padding: 36px 5%;
  }
  .section-intro p {
    font-size: 1.1rem;
  }
}