@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

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

:root {
  --bg:          #eff7fa;
  --text:        #3b3e40;
  --accent:      #004a80;
  --border:      #c5dae5;
  --placeholder: #e0e0e0;
  --max-w:       1200px;
  --pad-x:       0px;

  /* Grid math — overridden at tablet/mobile breakpoints.
     --grid-w     : full grid width (== --max-w)
     --grid-inner : grid width minus the gutters (= sum of all column widths)
     --grid-cols  : number of columns (12 desktop/tablet, 4 mobile) */
  --grid-w:      1200px;
  --grid-inner:  980px;
  --grid-edge:   1199px; /* right-edge line position = --grid-w - 1 */
  --grid-cols:   12;

  /* Hero content width — 6 columns at desktop, 8 at tablet */
  --hero-w:      600px;

  /* Vertical padding between sections — 80px desktop, 60px tablet/mobile */
  --section-pad: 80px;
}

html { scroll-behavior: smooth; }

/*
  Decorative 12-column grid lives on the body's own background-image with
  background-attachment: fixed. A CSS background is always painted behind the
  element's content — no z-index or stacking-context involvement at all.

  Column width : (1200 - 11 × 20) / 12 = 980px / 12 ≈ 81.667px
  Tile width   : 980px/12 + 20px          ≈ 101.667px
  Lines mark the left AND right edge of every column (24 lines).

  JS sets --grid-left to the container's exact viewport-relative left edge so
  background-position tiles are anchored to the content columns.
  Fallback (before JS): calc(50% - min(600px, 50%)).
*/
body {
  background-color: var(--bg);
  /* Grid layer 1: right-edge (24th) line at 1200px from container left.
     Layer 2: repeating column pattern — contained to the 1200px tile via
     background-size + no-repeat so it doesn't bleed into the margins. */
  background-image:
    linear-gradient(to right, transparent var(--grid-edge), #c5dae5 var(--grid-edge)),
    repeating-linear-gradient(
      90deg,
      #c5dae5 0px,                                    #c5dae5 1px,
      transparent 1px,                                 transparent calc(var(--grid-inner) / var(--grid-cols) - 1px),
      #c5dae5 calc(var(--grid-inner) / var(--grid-cols) - 1px), #c5dae5 calc(var(--grid-inner) / var(--grid-cols)),
      transparent calc(var(--grid-inner) / var(--grid-cols)),
      transparent calc(var(--grid-inner) / var(--grid-cols) + 20px)
    );
  background-size: var(--grid-w) 100vh, var(--grid-w) 100vh;
  background-position:
    var(--grid-left, calc(50% - min(var(--grid-w) / 2, 50%))) 0,
    var(--grid-left, calc(50% - min(var(--grid-w) / 2, 50%))) 0;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ── Full-width horizontal rules ── */
.hr-full {
  border: none;
  border-top: 1px solid var(--border);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

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

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn-filled {
  background: var(--accent);
  color: #ffffff !important; /* overrides .nav-links a specificity */
  border: none;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 20px;
  transition: background-color 0.3s ease;
}
.btn-filled:hover { background-color: #000f21; }

.btn-outline {
  background: var(--bg); /* #eff7fa fill in default state */
  color: var(--accent);
  /* Stroke drawn on the INSIDE edge via inset shadow (not border) so it adds
     no height — outline and filled CTAs are both 48px tall. */
  box-shadow: inset 0 0 0 2px var(--accent);
  font-size: 16px;
  font-weight: 400;
  padding: 12px 20px;
  transition: color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.btn-outline:hover {
  color: #000f21;
  box-shadow: inset 0 0 0 2px #000f21;
  background-color: #c5dae5;
}

/* ── Navigation ── */
.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 20px;
  /* Transparent for the top 20px (grid shows through), then solid
     #eff7fa for the full-width nav bar area below the top HR. */
  background: linear-gradient(
    to bottom,
    transparent 20px,
    var(--bg) 20px
  );
}

/* Both nav rules are #3b3e40 */
.nav-wrapper hr:first-child,
.nav-wrapper hr:last-child {
  border-top-color: #3b3e40;
}

nav {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  /* background now on .nav-wrapper at full width */
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  align-self: stretch;   /* full nav height so the dropdown drops from the bottom rule */
  gap: 36px;
  list-style: none;
}

.nav-links > li { display: flex; align-items: center; }

/* Main nav items (links + the Work toggle) */
.nav-link,
.nav-sub-toggle {
  text-decoration: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.2s;
}

/* Hover → weight 600 */
.nav-link:hover,
.nav-sub-toggle:hover .nav-sub-label { font-weight: 600; }

/* Active (current page) → weight 600 + accent colour */
.nav-link[aria-current="page"] { font-weight: 600; color: var(--accent); }
.nav-sub-toggle[aria-current="page"] { color: var(--accent); }
.nav-sub-toggle[aria-current="page"] .nav-sub-label { font-weight: 600; }

/* No-shift trick: a hidden bold ghost reserves the 600-weight width so
   hovering/activating an item never nudges its neighbours (and the dropdown
   never resizes when the longest item is hovered). */
.nav-reserve { display: inline-grid; }
.nav-reserve::after {
  content: attr(data-label);
  font-weight: 600;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}
/* NOTE: no overflow:hidden here — that would make the ghost a scroll
   container whose intrinsic width collapses to 0, reserving nothing. */

/* Main nav items centre their text within the reserved box so the
   weight change on hover expands symmetrically (less noticeable). */
.nav-link,
.nav-sub-label {
  justify-items: center;
  text-align: center;
}

/* Work submenu trigger */
.nav-has-sub {
  position: relative;
  align-self: stretch;   /* full nav height so the dropdown drops from the bottom rule */
  display: flex;
  align-items: center;
}

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
}

.nav-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-has-sub:hover .nav-caret,
.nav-has-sub:focus-within .nav-caret { transform: rotate(180deg); }

/* Desktop dropdown — right edge aligned to the Work item */
.nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  list-style: none;
  background: var(--bg);
  border: 1px solid #3b3e40;
  white-space: nowrap;
}
.nav-has-sub:hover .nav-dropdown,
.nav-has-sub:focus-within .nav-dropdown { display: flex; }

.nav-dropdown a {
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.nav-dropdown a:hover { font-weight: 600; }
.nav-dropdown a[aria-current="page"] { font-weight: 600; color: var(--accent); }

/* ── Hamburger toggle (hidden on desktop) ── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110; /* stays above the open menu overlay */
}

.nav-toggle-icon {
  width: 32px;
  height: 32px;
  display: block;
}

/* Swap menu ↔ close based on state */
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

/* ── Mobile / tablet overlay menu ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  overflow-y: auto;
  /* Top padding = 80px nav (20px pad + 60px bar) + 80px gap below the
     nav's bottom rule = 160px before "About me".
     Bottom spacing lives on .mobile-menu-inner, not here — a scroll
     container clips its own bottom padding when content overflows. */
  padding: 160px 24px 0;
}

.mobile-menu[hidden] { display: none; }

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; /* even spacing between the three main items: About me, Work, Contact */
  width: 100%;
  max-width: 600px;
  margin-inline: auto; /* centre now that the menu is a block */
  padding-bottom: 60px; /* bottom space below last item (scrolls with content) */
  text-align: center;
}

.mobile-menu-link {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}
a.mobile-menu-link:hover { color: var(--accent); }

.mobile-menu-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.mobile-submenu {
  list-style: none;
  /* Shrink to the widest item so the dividers match the longest line of copy */
  width: max-content;
  max-width: 100%;
  margin: 8px auto 0;
}

.mobile-submenu li + li {
  border-top: 1px solid var(--border);
}

.mobile-submenu a {
  display: block;
  padding: 20px 0;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-submenu a:hover { color: var(--accent); }

/* Prevent body scroll when the menu is open */
body.menu-open { overflow: hidden; }

/* ── Hero ── */
/* The hero uses the same fixed-attachment grid as the body so the column
   lines remain visible over the #e0eff5 background colour. */
.hero-bg {
  background-color: #e0eff5;
  background-image:
    linear-gradient(to right, transparent var(--grid-edge), #c5dae5 var(--grid-edge)),
    repeating-linear-gradient(
      90deg,
      #c5dae5 0px,                                    #c5dae5 1px,
      transparent 1px,                                 transparent calc(var(--grid-inner) / var(--grid-cols) - 1px),
      #c5dae5 calc(var(--grid-inner) / var(--grid-cols) - 1px), #c5dae5 calc(var(--grid-inner) / var(--grid-cols)),
      transparent calc(var(--grid-inner) / var(--grid-cols)),
      transparent calc(var(--grid-inner) / var(--grid-cols) + 20px)
    );
  background-size: var(--grid-w) 100vh, var(--grid-w) 100vh;
  background-position:
    var(--grid-left, calc(50% - min(var(--grid-w) / 2, 50%))) 0,
    var(--grid-left, calc(50% - min(var(--grid-w) / 2, 50%))) 0;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  width: 100%;
}

.hero {
  /* Fill the viewport below the sticky nav on load.
     Nav occupies 82px: 20px top pad + 60px bar + 2 × 1px rules.
     dvh keeps it correct against mobile browser chrome; vh is the fallback. */
  min-height: calc(100vh - 82px);
  min-height: calc(100dvh - 82px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* h1 wrapper — stacks LORANCE above SMITH+RGD, capped at --hero-w columns */
.hero-name-block {
  display: flex;
  flex-direction: column;
  max-width: var(--hero-w);
  margin-bottom: 24px;
}

/* Inline row: SMITH + RGD share the same baseline */
.hero-name-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.hero-name {
  font-size: 112px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -3px;
  display: block;
}

.hero-credential {
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0;
  flex-shrink: 0;
}

.hero-tagline {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  max-width: var(--hero-w);
  color: var(--text);
}

.scroll-indicator {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  color: var(--text);
  animation: bounceY 2.2s ease-in-out infinite;
}

.scroll-indicator svg {
  width: 32px;
  height: 32px;
}

@keyframes bounceY {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── Intro ── */
.intro {
  padding-block: var(--section-pad);
}

.intro-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.intro-inner p {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
}

/* ── Work section ── */
.work {
  padding-block: var(--section-pad);
}

.section-header {
  margin-bottom: 48px;
}

.section-header h2 {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 8px;
}

.section-header p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* Featured card — full width, image left / text right.
   Image spans 8 background columns (793px), text spans the remaining 4. */
.card-featured {
  display: grid;
  grid-template-columns: calc(8 * (var(--grid-inner) / 12) + 7 * 20px) 1fr;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}

.card-featured .card-img {
  /* Desktop proportion: 8-col image (793.33px) × 500px tall → ratio 0.6303.
     A definite calc height (scaled from the image column width) reliably
     drives the grid row height; aspect-ratio gets collapsed by the
     stretched body cell in a side-by-side grid. */
  height: calc((8 * (var(--grid-inner) / 12) + 7 * 20px) * 0.6303);
  overflow: hidden;
  position: relative;
}

.card-featured .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-featured .card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

/* Grid cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* A card that spans 2 columns in the grid */
.card-wide { grid-column: span 2; }

.card .card-img {
  background: var(--placeholder);
  /* Height derived from a single column's width (desktop: 386.67 × 263,
     ratio 0.6802). Using the 1-col width for BOTH narrow and wide cards
     guarantees every card image is the exact same height in a row, while
     still scaling with the grid. */
  height: calc(((var(--grid-w) - 40px) / 3) * 0.6802);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  flex: 1;
}

.card-body .btn {
  align-self: flex-start;
  margin-top: 8px;
}

/* ── Logos / worked with ── */
.logos-section {
  padding-block: var(--section-pad);
}

.logos-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;
}

.logos-row {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.logo-item {
  opacity: 0.5;
  display: flex;
  align-items: center;
}

.logo-item img {
  display: block;
  height: 72px;
  width: auto;
}

.logo-placeholder {
  width: 120px;
  height: 40px;
  background: var(--placeholder);
  border-radius: 0;
}

/* ── Testimonials ── */
.testimonials {
  padding-block: var(--section-pad);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  /* default stretch keeps all cards the same height */
}

.testimonial-card {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 40px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial-quote {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.testimonial-author {
  /* Pushes author to the bottom; space between quote text and author
     absorbs extra height so the only space below the author is the
     card's 40px padding. Padding zeroed to override browser <footer> defaults. */
  margin-top: auto;
  padding: 0;
}

.author-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.author-role {
  font-size: 12px;
  font-weight: 400;
}

/* ── Get in touch ── */
.contact {
  padding-block: var(--section-pad);
}

.contact h2 {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 16px;
}

.contact p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 36px;
}

/* ── Footer ── */
footer {
  padding-block: 28px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-size: 12px;
  font-weight: 400;
}

/* Desktop / tablet: inline with bullet separators */
.footer-copy span + span::before {
  content: "\00a0\2022\00a0\00a0"; /* nbsp • nbsp nbsp */
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-linkedin {
  color: var(--text);
  display: flex;
  align-items: center;
}

.footer-linkedin img {
  height: 32px;
  width: auto;
  display: block;
}

.footer-divider {
  width: 1px;
  background: var(--text);
  align-self: stretch; /* matches the tallest sibling automatically */
  flex-shrink: 0;
}

.footer-rgd {
  display: block;
  height: 32px;
  width: auto;
}

.footer-logo-icon {
  display: flex;
  align-items: center;
}

/* ══════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════ */
.about {
  padding-block: var(--section-pad);
}

/* Shared page heading (matches section-heading scale) */
.page-title {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 40px;
}

/* 3 / 9 two-column structure (left = 3 cols, right = 9 cols) */
.about-grid,
.expertise-grid,
.contact-grid,
.cs-grid {
  display: grid;
  grid-template-columns: calc(3 * (var(--grid-inner) / 12) + 2 * 20px) 1fr;
  gap: 20px;
  align-items: start;
}

.about-photo {
  display: block;
  width: 100%;
  height: auto;
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-body .lead {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
}

.about-body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ── Areas of expertise ── */
.expertise {
  padding-block: var(--section-pad);
}

.expertise-heading {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
}

.expertise-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.expertise-tile {
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════ */
.contact-intro,
.contact-open {
  padding-block: var(--section-pad);
}

/* Full-width intro paragraph (body-large) */
.contact-lead {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
}

/* Left column heading */
.contact-heading {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
}

/* Right column: paragraphs + CTAs */
.contact-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.contact-body strong { font-weight: 600; }

.contact-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ══════════════════════════════════════════
   CASE STUDY PAGE
   ══════════════════════════════════════════ */
/* Hero (full width). No rule follows the hero, so it gets no bottom padding —
   the single hero→Overview gap comes from Overview's top padding alone. */
.cs-hero {
  padding-top: var(--section-pad);
  padding-bottom: 0;
}

.cs-subtitle {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  /* content → hero image gap: 80 / 60 / 40 */
  margin-bottom: var(--section-pad);
}

/* All case-study images carry a 1px border */
.cs-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

/* Each body section carries a full section of vertical padding, so the gap
   is 80px from the section content to the rule AND 80px from the rule to the
   next section (160px total between sections). Scales 80 / 60 / 40. */
.cs-section {
  padding-block: var(--section-pad);
}

.cs-label {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
}

.cs-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.cs-content p + p { margin-top: 24px; }

/* content → media gap: 80 / 60 / 40 (direct children only, so images nested
   inside image grids don't inherit the gap) */
.cs-content > .cs-img,
.cs-content > .cs-grid-2x2,
.cs-content > .gnf-approach-grid,
.cs-content > .gnf-outcome-grid,
.cs-content > .cs-stack,
.cs-content > .cyoj-origin-grid,
.cs-content > .cs-stats2 { margin-top: var(--section-pad); }

.cs-content strong { font-weight: 600; }

/* Inline links within body copy */
.cs-content p a {
  color: var(--accent);
  text-decoration: underline;
  transition: color 0.2s;
}
.cs-content p a:hover { color: #000f21; }

/* ── Two-image hero (9 / 3, equal height) ── */
/* A real 12-column grid (12 × 1fr, 20px gaps) so the image edges land exactly
   on the background column grid; the images span 9 and 3 columns.
   minmax(0,1fr) keeps the image intrinsic widths from inflating the tracks. */
.cs-hero-media {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.cs-hero-wide   { grid-column: span 9; overflow: hidden; }
.cs-hero-narrow { grid-column: span 3; overflow: hidden; position: relative; }

.cs-hero-media img,
.cs-hero-media picture { display: block; width: 100%; }

/* The wide image flows to its natural height and sets the row height. */
.cs-hero-wide > img { height: auto; }

/* The narrow image fills the matched row height and crops via object-fit. */
.cs-hero-narrow picture { position: absolute; inset: 0; height: 100%; }
.cs-hero-narrow img { height: 100%; object-fit: cover; }

/* ── Stats card (full width of content column) ── */
.cs-stats {
  margin-top: var(--section-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 20px 80px;
  background: #c03b8e;
  color: #ffffff;
  text-align: center;
}
.cs-stat { display: flex; flex-direction: column; align-items: center; }
.cs-stat-num   { font-size: 56px; font-weight: 500; line-height: 1.2; }
.cs-stat-label { font-size: 20px; font-weight: 400; line-height: 1.5; }

/* Light variant of the stats card: white background, dark text, 1px border */
.cs-stats-light { background: #ffffff; color: var(--text); border: 1px solid var(--border); }

/* Bulleted lists in body copy */
.cs-content ul {
  list-style: disc;
  padding-left: 1.25em;
  margin-top: 24px;
}
.cs-content li { font-size: 16px; font-weight: 400; line-height: 1.5; }
.cs-content li + li { margin-top: 8px; }

/* ── Two images stacked with a small (20px) gap ── */
.cs-stack { display: flex; flex-direction: column; gap: 20px; }

/* ── Origin image grid: wide image on top (2 cols), two 1-col below ── */
.cyoj-origin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.cyoj-origin-grid .o-entry { grid-column: 1 / span 2; }

/* ── Outcome stats card: "Overall" group | rule | "Engaged visitors" group
   (2 cells). White card, 1px border, centred. ── */
.cs-stats2 {
  display: flex;
  align-items: stretch;
  gap: 40px;
  padding: 20px 80px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
}
.s2-rule { flex: none; width: 1px; align-self: stretch; background: var(--text); }
.s2-group { display: flex; flex-direction: column; gap: 8px; }
.s2-group-overall { flex: 1; }
.s2-group-engaged { flex: 2; }
.s2-cells { display: flex; gap: 40px; }
.s2-cell { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.s2-head  { font-size: 20px; font-weight: 400; line-height: 1.5; }
.s2-num   { font-size: 56px; font-weight: 500; line-height: 1.2; }
.s2-label { font-size: 20px; font-weight: 400; line-height: 1.5; }

/* ── Image grid: 5-col left (two stacked 1×1) + 4-col tall right ──
   A 9-column subgrid (the content area is 9 page columns) so the image edges
   land on the page's 12-column grid. */
.cs-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 20px;
}
.cs-grid-2x2 .g-app    { grid-column: 1 / span 5; grid-row: 1; }
.cs-grid-2x2 .g-screen { grid-column: 1 / span 5; grid-row: 2; }
.cs-grid-2x2 .g-tall   { grid-column: 6 / span 4; grid-row: 1 / span 2; position: relative; overflow: hidden; }
/* The two left images flow to natural height and define the two rows. */
.cs-grid-2x2 .g-app img,
.cs-grid-2x2 .g-screen img { height: auto; }
/* The tall image fills both rows + the gap, cropping via object-fit. */
.cs-grid-2x2 .g-tall picture { display: block; width: 100%; position: absolute; inset: 0; height: 100%; }
.cs-grid-2x2 .g-tall img { height: 100%; object-fit: cover; }

/* ── Outcome card + image (3-col card + 6-col image, within the 9-col
   content so it sits under the paragraphs above) ── */
.cs-outcome {
  margin-top: var(--section-pad);
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.cs-outcome-card {
  grid-column: span 3;
  background: #000f21;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontal centring */
  justify-content: center;   /* vertical centring */
  text-align: center;
}
.cs-outcome > .cs-img { grid-column: span 6; }
.cs-outcome-num   { font-size: 84px; font-weight: 600; line-height: 1.2; color: #31eaff; }
.cs-outcome-label { font-size: 40px; font-weight: 500; line-height: 1.5; color: #ffffff; }
/* The image flows to natural height and the card stretches to match. */

/* ── giraffe & friends: approach grid (8-col video + 1-col pattern stack,
   website full width below). 9-col subgrid within the content. ── */
.gnf-approach-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 20px;
}
/* The video flows to its natural height and alone defines the row height. */
.gnf-video { grid-column: 1 / span 8; display: block; }
.gnf-video img { display: block; width: 100%; height: auto; }
/* The pattern column stretches to that row height; its inner stack is
   absolutely positioned so it contributes nothing to row sizing and fills
   exactly the video's height. flex:1 distributes the 5 images (8px gaps). */
.gnf-patterns { grid-column: 9; position: relative; }
.gnf-patterns-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gnf-patterns-inner picture { display: block; flex: 1; min-height: 0; }
.gnf-patterns-inner img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.gnf-website { grid-column: 1 / span 9; }

/* ── giraffe & friends: outcome grid (5-col social + 4-col guidelines) ── */
.gnf-outcome-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.gnf-social     { grid-column: 1 / span 5; }
.gnf-guidelines { grid-column: 6 / span 4; }
.gnf-outcome-grid picture { display: block; }
.gnf-outcome-grid img { display: block; width: 100%; height: auto; }

/* ── Fade-up animation ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up.delay-1 { transition-delay: 0.10s; }
.fade-up.delay-2 { transition-delay: 0.20s; }
.fade-up.delay-3 { transition-delay: 0.30s; }
.fade-up.delay-4 { transition-delay: 0.40s; }
.fade-up.delay-5 { transition-delay: 0.50s; }

/* ══════════════════════════════════════════════════════════
   TABLET  (≤ 1200px → 1024px design target)
   - Grid: 1200 → 904px (684px inner). 60px margins at 1024 viewport.
   - Section padding: 80 → 60px.
   - Hero content: 6 → 8 columns wide.
   - Nav: desktop links hidden, hamburger menu shown.
   - Testimonials: 3-up → vertical stack.
   - Font sizes, colours, weights, copy: unchanged.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root {
    --max-w:       904px;
    --grid-w:      904px;
    --grid-inner:  684px;       /* 904 − 11×20 */
    --grid-edge:   903px;
    --section-pad: 60px;
    --hero-w:      calc(8 * (var(--grid-inner) / 12) + 7 * 20px); /* 8 cols ≈ 596px */
  }

  /* Nav → hamburger */
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }

  /* Testimonials stack vertically */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Logos scale down */
  .logo-item img { height: 54px; }

  /* About page: expertise stacks (heading above tiles); About stays 3/9 */
  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Contact page: the "What I am open to" section stacks */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Case study: each 3/9 section stacks (label above content) */
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Stats cards: tighter side padding (hero media stays 9/3 on tablet) */
  .cs-stats  { padding: 20px 60px; }
  .cs-stats2 { padding: 20px 60px; }

  /* Image grid is 7/5 on tablet (content is now the full 12-column width) */
  .cs-grid-2x2 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cs-grid-2x2 .g-app,
  .cs-grid-2x2 .g-screen { grid-column: 1 / span 7; }
  .cs-grid-2x2 .g-tall   { grid-column: 8 / span 5; }

  /* giraffe & friends approach grid: 10-col video + 2-col pattern stack */
  .gnf-approach-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gnf-video    { grid-column: 1 / span 10; }
  .gnf-patterns { grid-column: 11 / span 2; }
  .gnf-website  { grid-column: 1 / span 12; }

  /* giraffe & friends outcome grid: 7-col social + 5-col guidelines */
  .gnf-outcome-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gnf-social     { grid-column: 1 / span 7; }
  .gnf-guidelines { grid-column: 8 / span 5; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  (≤ 600px → 375px design target)
   - Grid: 904 → 335px, 12 → 4 columns. 20px margins at 375 viewport.
   - Section padding: 60 → 40px.
   - Everything stacks single-column.
   - Font sizes reduced (see below); colours, weights, copy unchanged.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root {
    --max-w:       335px;
    --grid-w:      335px;
    --grid-inner:  275px;   /* 335 − 3×20 (4 columns, 3 gutters) */
    --grid-edge:   334px;
    --grid-cols:   4;
    --section-pad: 40px;
    --hero-w:      100%;    /* hero content full width */
  }

  /* Hero — keeps the viewport-fill min-height from the base rule */
  .hero-name       { font-size: 64px; letter-spacing: -1px; }
  .hero-credential { font-size: 32px; }
  .hero-tagline    { font-size: 20px; }
  .hero-name-row   { gap: 8px; } /* SMITH ↔ RGD */

  /* Section headings */
  .section-header h2,
  .logos-section h2,
  .testimonials h2,
  .contact h2,
  .page-title      { font-size: 40px; }

  /* Intro / body-large paragraphs */
  .intro-inner p,
  .about-body .lead,
  .contact-lead,
  .cs-subtitle      { font-size: 20px; }

  /* Everything stacks single-column */
  .card-featured       { grid-template-columns: 1fr; }
  .cards-grid          { grid-template-columns: 1fr; }
  .testimonials-grid   { grid-template-columns: 1fr; }
  .about-grid          { grid-template-columns: 1fr; }
  .cs-grid             { grid-template-columns: 1fr; }

  /* Two-image hero stacks; reset the column spans so they don't create
     phantom columns, and let the narrow image (mobile crop) flow naturally. */
  .cs-hero-media   { grid-template-columns: 1fr; }
  .cs-hero-wide,
  .cs-hero-narrow  { grid-column: auto; }
  .cs-hero-narrow  { position: static; }
  .cs-hero-narrow picture { position: static; height: auto; }
  .cs-hero-narrow img { height: auto; }

  /* Stats card stacks */
  .cs-stats { grid-template-columns: 1fr; padding: 20px 40px; gap: 40px; }

  /* Origin grid stacks (wide image then the two below) */
  .cyoj-origin-grid { grid-template-columns: 1fr; }
  .cyoj-origin-grid .o-entry { grid-column: auto; }

  /* Outcome stats card stacks; rule becomes horizontal, engaged cells stack */
  .cs-stats2 { flex-direction: column; padding: 20px 40px; gap: 40px; }
  .s2-rule   { width: auto; height: 1px; }
  .s2-cells  { flex-direction: column; gap: 40px; }

  /* 2×2 image grid stacks; reset spans + the tall image flows naturally */
  .cs-grid-2x2 { grid-template-columns: 1fr; }
  .cs-grid-2x2 .g-app,
  .cs-grid-2x2 .g-screen,
  .cs-grid-2x2 .g-tall { grid-column: auto; grid-row: auto; }
  .cs-grid-2x2 .g-tall { position: static; }
  .cs-grid-2x2 .g-tall picture { position: static; }
  .cs-grid-2x2 .g-tall img { height: auto; }

  /* giraffe & friends approach grid: video full width, 5 patterns in a row,
     website full width below. */
  .gnf-approach-grid { grid-template-columns: 1fr; }
  .gnf-video, .gnf-website { grid-column: auto; }
  .gnf-patterns { grid-column: auto; position: static; }
  .gnf-patterns-inner { position: static; flex-direction: row; }
  .gnf-patterns-inner img { height: auto; aspect-ratio: 1; }

  /* giraffe & friends outcome grid stacks */
  .gnf-outcome-grid { grid-template-columns: 1fr; }
  .gnf-social, .gnf-guidelines { grid-column: auto; }

  /* Outcome card + image stacks; reset spans, card hugs content on one line
     with the label vertically centred on the number. */
  .cs-outcome { grid-template-columns: 1fr; }
  .cs-outcome-card,
  .cs-outcome > .cs-img { grid-column: auto; }
  .cs-outcome-card { flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
  .cs-outcome-num   { font-size: 40px; font-weight: 500; }
  .cs-outcome-label { font-size: 20px; font-weight: 400; }

  /* All CTAs go full-width on mobile */
  .btn { width: 100%; justify-content: center; }

  /* Contact CTAs stack vertically */
  .contact-ctas { flex-direction: column; align-items: stretch; gap: 12px; }

  /* Portrait spans 3 of the 4 columns */
  .about-photo {
    max-width: calc(3 * (var(--grid-inner) / var(--grid-cols)) + 2 * 20px);
  }

  /* Reset the wide card so it doesn't force a phantom 2nd column
     (which was squishing / hiding cards). Every card is now full width. */
  .card-wide { grid-column: auto; }

  /* Full-width images — aspect-ratio is reliable in a single column.
     Each card keeps its own desktop proportion. */
  .card-featured .card-img {
    height: auto;
    aspect-ratio: 793 / 500;
  }
  .card .card-img {
    height: auto;
    aspect-ratio: 386.67 / 263;
  }
  /* The wide card's image keeps its wider desktop proportion */
  .card-wide .card-img {
    aspect-ratio: 793.33 / 263;
  }

  /* Logos: merge the two rows into one left-aligned flowing wrap so we
     never end up with a single logo stranded on its own line. */
  .logos-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 32px 40px;
  }
  .logos-row { display: contents; } /* unwrap — logos become direct flex items */

  /* Testimonial cards */
  .testimonial-card { padding: 20px; }

  /* Footer stacks, left-aligned */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* Copy stacks onto three lines (no bullets) */
  .footer-copy span { display: block; }
  .footer-copy span + span::before { content: none; }

  /* Mobile menu links */
  .mobile-menu-link { font-size: 28px; }

  /* Vertically centre the menu content with reliable overflow scrolling.
     The scroll container stays block; the inner is a min-height:100% flex
     column that centres its items and simply grows past the viewport (so the
     container scrolls) when there are too many. Both paddings live on the
     inner, so neither the top nor the bottom is ever clipped. */
  /* 80px top padding reserves the nav; the inner fills and centres within
     the remaining (below-nav) height, so the content is centred in the
     visible area rather than the whole viewport. */
  .mobile-menu { padding: 80px 24px 0; }
  .mobile-menu-inner {
    min-height: calc(100vh - 80px);   /* fallback */
    min-height: calc(100dvh - 80px);  /* below-nav area */
    justify-content: center;          /* centre items within that area */
    gap: 20px;                        /* even spacing between main items */
    padding: 24px 0;                  /* symmetric breathing room on overflow/scroll */
  }
  .mobile-submenu a { padding-block: 12px; } /* tighter between sub-items */
}