/* ============================================================================
   site.css — the whole site's styles, in three layers.

   1. SHARED   reset, design tokens, @font-face, the element scale, and the
               components both page types use (header, footer, buttons, social).
   2. HOMEPAGE everything scoped :where(.pageHome) or to a homepage-only class.
   3. CASE     everything scoped :where(.pageCase) or to a case-study-only class.

   Layers 2 and 3 cannot reach each other: neither contains an unscoped
   element-level rule, so their order is not load-bearing. @media blocks are
   left exactly as they were rather than merged by condition — merging would
   reorder declarations inside them and could flip equal-specificity ties.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. SHARED — reset, tokens, fonts, element scale, shared components
   (was css/shared.css)
   --------------------------------------------------------------------------- */

/* Inter, declared once for the whole site. url() resolves relative to this
   stylesheet, so ../fonts/ is correct for both index.html and the case study
   pages even though they sit at different depths. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('../fonts/inter-latin-v20.woff2') format('woff2');
}

/* Metric-matched fallback: sized so a font-display:optional miss does not reflow */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  size-adjust: 106.3%;
  ascent-override: 91.2%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}

/* ---- Element scale, site-wide (adopted from the case study pages) ---- */
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
}
/* Headings state their own colour. Without it they inherit whatever container
   wins — `li { color: var(--text-secondary) }` was reaching the homepage card
   titles and flattening them into their own body copy. */
h1,
h2,
h3 {
  text-wrap: balance;
  color: var(--text-primary);
}
h1 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}
h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}
h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
/* These were h4s; they are now h2/h3 so the outline has no level skips, but
   they keep the smaller scale. `letter-spacing: normal` is load-bearing: it
   cancels the -0.01em the bare h2 rule would otherwise apply. */
.info-column h2,
.impact-item h3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: var(--space-xs);
}
@media (min-width: 1024px) {
  h1 {
    font-size: 48px;
    line-height: 62px;
  }
  h2 {
    font-size: 37px;
    line-height: 49px;
  }
  h3 {
    font-size: 24px;
    line-height: 32px;
  }
  .info-column h2,
  .impact-item h3 {
    font-size: 20px;
    line-height: 26px;
  }
}
p {
  text-wrap: pretty;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
ul {
  list-style-position: inside;
  padding-left: 0;
  margin-bottom: var(--space-md);
}
li {
  color: var(--text-secondary);
  line-height: 24px;
  margin-bottom: var(--space-xs);
}
li:last-child {
  margin-bottom: 0;
}
figcaption {
  font-size: 13px;
  line-height: 20px;
  color: var(--text-secondary);
}

/* Text rendering, site-wide. Lives here rather than main.css so the case study
   pages render type identically to the homepage. */
html {
  -webkit-font-smoothing: antialiased;
}

/* Shared across index.html and the case study pages.
   Self-contained: owns the site header, the social icon list, and the design
   tokens both stylesheets consume. Link this BEFORE the page stylesheet. */

/* Tokens */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Named aliases + text roles used by the shared element scale. Declared here
     rather than in the case study sheet so the scale's element rules resolve on
     every page. Light/default values; dark overrides in the dark block below. */
  --space-xs: var(--space-2);   /* 8px  */
  --space-sm: var(--space-4);   /* 16px */
  --space-md: var(--space-6);   /* 24px */
  --space-lg: var(--space-7);   /* 32px */
  --space-xl: 44px;
  --space-2xl: 56px;
  --text-primary: #1c1c57;
  --text-secondary: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #A8B8CD;
    --accent: #37BDF9;
    --rule-color: #353F4F;
    --page-bg: #1A2132;
    --surface: #1D293B;
    --text: #E2E8F0;
    --text-muted: #b9c9de;
    --gate-error: #FF8A8A;
    --button-bg: #37BDF9;
    --button-fg: #1A2132;
    --offer-rule: #8FEC94;
    --section-label-color: #8FA3BD;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --accent: #1967d2;
    --rule-color: #DCE3F2;
    --page-bg: #F6F8FF;
    --surface: #FFFFFF;
    --text: #1C1C57;
    --text-muted: #333333;
    --gate-error: #B3261E;
    --button-bg: #1967d2;
    --button-fg: #FFFFFF;
    --offer-rule: #2F8F3E;
    --section-label-color: #5B6673;
  }
}

/* Header */
.siteHeader {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.masthead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
  padding-bottom: 20px;
}
.mastheadIdentity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.wordmark {
  display: block;
  height: 32px;
  width: auto;
}
/* Case study pages wrap the wordmark in a home link. The case study sheet paints
   `a svg path` in the accent colour and underlines links on hover; both would
   disfigure the wordmark, and a class beats those element selectors. */
.wordmarkLink {
  display: block;
  color: var(--text);
}
.wordmark path {
  fill: currentColor;
}
.wordmarkLink:hover {
  opacity: 0.7;
  text-decoration: none;
}
.mastheadTitle span {
  white-space: nowrap;
}
.mastheadTitle {
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
  color: var(--section-label-color);
}
/* Case study pages: the site header above the hero image.
   Horizontal padding tracks `section`'s padding so the wordmark lines up with
   the card's text column, and the 1088px cap (the 1200px card minus its 2x56px
   section padding) holds that alignment once the card starts centring. */
.pageHeader {
  padding: 20px 24px 16px;
}
.pageHeader .siteHeader {
  max-width: 1088px;
}
@media (min-width: 768px) {
  .pageHeader {
    padding: 24px 32px 20px;
  }
}
@media (min-width: 1024px) {
  .pageHeader {
    padding: 32px 56px 24px;
  }
}
.gateWrap .siteHeader {
  margin-bottom: var(--space-8);
}
.rule-below {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--rule-color);
}

/* Social icons */
.list-reset {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.list-reset li {
  list-style: none;
  margin-bottom: 0;
}
.socialLinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}
.socialLinks svg {
  width: 22px;
  height: 22px;
}
.socialLinks li {
  display: flex;
  padding-left: 0;
}
.socialLinks a {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
  color: var(--accent);
}
.socialLinks a:hover {
  opacity: 0.7;
  text-decoration: none;
}
.masthead .mastheadSocial {
  margin-top: 0;
}

/* Mobile-first: the rules above are the narrow layout. 1000.02px is the exact
   complement of the old max-width:1000px. */
@media (min-width: 1000.02px) {
  .masthead {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }
  .wordmark {
    height: 39px;
  }
}

/* Section label */
.sectionLabel {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--section-label-color);
}

/* Footer */
.siteFooter .footerAbout {
  padding: 0;
  background: transparent;
}
.footerAbout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
}
.footerGrid {
  border-top: 1px solid var(--rule-color);
  padding-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  width: 100%;
  align-items: start;
}
/* Variant: no section label above the footer, so no rule either. */
.siteFooter--bare .footerGrid {
  border-top: 0;
  padding-top: 0;
}

.footerId {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.footerId .avatar {
  flex: 0 0 auto;
  margin-bottom: var(--space-4);
}
.footerId .footerName {
  margin-bottom: var(--space-1);
}
address.footerContact {
  font-style: normal;
}

.footerContact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footerLocation {
  font-size: 14px;
  line-height: 22px;
  color: var(--section-label-color);
  margin: 0;
}
.footerName {
  font-size: 19px;
  line-height: 25px;
  background: none;
  -webkit-text-fill-color: currentColor;
  margin: 0;
}
/* Case study footers only; the homepage footer has no heading. Colour is the
   site's green accent token, which resolves to the hero headline's green in
   dark mode and to a light-mode green that actually passes contrast. */
.footerHeading {
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  color: var(--offer-rule);
  margin: 0;
}
.footerText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.footerText .footerClose {
  margin-top: var(--space-4);
}
.footerId .footerSocial {
  margin-top: 0;
}
.footerAbout p {
  margin: 0;
}
.avatar {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
}
.footerText a:not(.button) {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.footerText a:not(.button):hover {
  text-decoration: underline;
}

@media (min-width: 1000.02px) {
  .sectionLabel {
    font-size: 14px;
    letter-spacing: 1.2px;
  }
  .footerName {
    font-size: 22px;
    line-height: 32px;
  }
  .footerGrid {
    grid-template-columns: 200px 1fr;
    gap: var(--space-9);
  }
}

/* Offer section */
.offer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.offerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  width: 100%;
}
.offerCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0 0;
  text-indent: 0;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: var(--offer-rule);
}
.offerCard h3 {
  font-size: 19px;
  line-height: 26px;
}
.offerCard p {
  margin: 0;
}
.offerCard h3 {
  margin: 0;
}
.offerCard p {
  color: var(--text-muted);
}

/* Button — shared by the homepage hero CTA and the case study footers */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--button-bg);
  color: var(--button-fg);
}
.button:hover {
  opacity: 0.9;
  text-decoration: none;
}
/* The case study sheet paints `a svg path` in the accent colour, which would
   make the arrow disappear into the button fill. Class beats those elements. */
.button svg path {
  fill: currentColor;
}

/* Footer CTA — mirrors .heroCta / .heroCtaNote on the homepage */
.footerCta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footerCtaNote {
  text-wrap: balance;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. HOMEPAGE — scoped :where(.pageHome) or homepage-only classes
   (was css/main.css)
   --------------------------------------------------------------------------- */

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

:root {

  /* single source for the space between page sections */
  --section-gap: var(--space-9);
}

html:where(.pageHome) {
  font-size: 16px; /* 1rem = 16px */
  scroll-behavior: smooth;
}
:where(.pageHome) body {
    background-color: var(--page-bg);
    margin: 0;
    padding: var(--space-6);
    max-width: 100%;
}

/* Typography */
:where(.pageHome) a {
  text-decoration: none;
  font-weight: 600;
}

:where(.pageHome) a:hover {
  text-decoration: underline;
}


.tag {
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 4px 9px;
  background: var(--tag-fill);
  color: var(--section-label-color);
  justify-content: center;
  align-items: center;
}


/* The scale in the case study sheet carries margin-bottom on its type levels.
   The homepage stacks with flex gap instead, so those margins are reset here.
   Class selectors (0,1,1) beat the bare element rules (0,0,1) on specificity,
   not source order, so this survives the sheets being concatenated.
   Excluded on purpose: the h4 tier (.info-column h2 / .impact-item h3) and the
   lead (.subtitle / .section-intro) are class-scoped and appear on no homepage
   element. margin-top is untouched, so .footerClose keeps its 16px. */
.pageHome h1,
.pageHome h2,
.pageHome h3,
.pageHome p,
.pageHome li,
.pageHome ul {
  margin-bottom: 0;
}

/* Layout */
/* Homepage page shell. Scoped so its 1000px cap and flex column cannot reach
   the case study wrapper once these sheets are merged. */
:where(.pageHome) .container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--section-gap);

}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  align-self: stretch;
  padding-top: 16px;
  padding-bottom: 16px;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Card paragraphs run ~120 characters at 1440. Capping the measure also
   narrows the card, because .projectList uses align-items: flex-start and the
   card sizes to its widest child: capped, that becomes the title (876px vs
   1000px). Fixing the measure means fixing that coupling first — deferred. */
.caseStudy {
  display: flex;
  width: 100%;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  border-radius: 8px;
  border: 1px solid var(--rule-color);
  background: #F2F5FF;
}
.recentProjects {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}



/* Utility Classes */




/* Site header */

/* Section rules */

/* Section labels */

/* Hero */
.hero {
  width: 100%;
  padding-top: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.heroHeadline {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin: 0;
  padding-bottom: 0.05em;
}
/* Lead paragraph: the scale's lead level (.subtitle / .section-intro on the
   case studies). The 60ch cap widens with the type, 606px -> 681px. */
.heroBody {
  font-size: 18px;
  line-height: 28px;
  max-width: 60ch;
  margin: 0;
}
.heroCta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 8px;
}
/* Caption level (13/20), flat at every width, matching figcaption. */
.heroCtaNote {
  text-wrap: balance;
  font-size: 13px;
  line-height: 20px;
  max-width: 60ch;
  margin: 0;
}


/* How teams use me */
.projectList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* About / footer. Scoped so it cannot reach the case study footer once these
   sheets are merged: this padding-top longhand would otherwise fight the case
   study sheet's padding shorthand. */
:where(.pageHome) .siteFooter {
  padding-top: var(--section-gap);
  gap: 0;
}



/* Responsive. Mobile-first: the rules above are the narrow layout, this block is
   the wide one. 1000.02px is the exact complement of the old max-width:1000px, so
   fractional viewport widths land on the same side as before. */
@media (min-width: 1000.02px) {
  :where(.pageHome) body {
    padding: var(--space-8);
    max-width: none;
  }
  .caseStudy {
    padding: var(--space-7);
  }
  .heroHeadline {
    font-size: 52px;
  }
  .row {
    flex-wrap: nowrap;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :where(.pageHome) p {
    color:#b9c9de;
  }
  :where(.pageHome) a {
    color: var(--accent);
  }
  .heroHeadline {
    background: linear-gradient(90deg, #8FEC94 0%, #25D0D3 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .caseStudy {
    background: #1D293B;
  }
  :root {
    --focus-ring: #37BDF9;
    --tag-fill: #24334A;
  }
  .heroHeadline {
    color: #E2E8F0;
  }
}
/* Light mode */
@media (prefers-color-scheme: light) {
  :where(.pageHome) p {
    color: #333;
  }
  :where(.pageHome) a {
    color: var(--accent);
  }

  .heroHeadline {
    background: linear-gradient(90deg, #4A6EEC 0%, #6A36BD 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .caseStudy {
    background: #F2F5FF;
  }

  :root {
    --focus-ring: #1967d2;
    --tag-fill: #E8EDFB;
  }
  .heroHeadline {
    color: #1C1C57;
  }
}





.cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.cta span {
  display: inline-flex;
  align-items: center;
}

.cta svg {
  display: inline-flex;
  align-items: center;
  width: 16px;
  height: 17px;
  flex-shrink: 0;
}
/* Focus */
:where(.pageHome) :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3. CASE STUDIES — scoped :where(.pageCase) or case-study-only classes
   (was case-studies/style.css)
   --------------------------------------------------------------------------- */

:root {
  /* Light theme colors */
  --background-light: #F6F8FF;
  --card-bg-light: #fff;
  --section-bg-light: #ffffff;
  --section-alt-bg-light: #f6f8ff;
  
  /* Dark theme colors */
  --background-dark: #0a1930;
  --card-bg-dark: #1a2942;
  --section-bg-dark: #1a2942;
  --section-alt-bg-dark: #142236;
  
  /* Gradient colors */
  --gradient-1: #8249DD;
  --gradient-2: #466ED4;
  --gradient-3: #A5168E;
  
  /* Default to light theme */
  --background: var(--background-light);
  --card-bg: var(--card-bg-light);
  --section-bg: var(--section-bg-light);
  --section-alt-bg: var(--section-alt-bg-light);
  
  /* Grid gaps */
  --gap-base: var(--space-sm);
  --gap-desktop: var(--space-2xl);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--background-dark);
    --card-bg: var(--card-bg-dark);
    --section-bg: var(--section-bg-dark);
    --section-alt-bg: var(--section-alt-bg-dark);
    
    /* Dark mode gradient colors */
    --gradient-1: #93CE96;
    --gradient-2: #25D0D3;
    --gradient-3: #47C188;
  }

  .img-border {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  /* All three case study logos invert together. Evvnt keeps .evvnt-logo for
     sizing (its art is 187x78, not 187x38) but shares this one rule. */
  .logo,
  .evvnt-logo {
    filter: brightness(0) invert(1);
  }

  /* DELIBERATELY DARK-ONLY — not a leftover from the light palette work.
     The case study header tagline sits on the page ground, which is #F6F8FF in
     light and #0a1930 in dark. In light, --section-label-color (#5B6673) gives
     5.51:1 and is used as normal, so there is no override outside this block.
     In dark, --section-label-color is #8FA3BD; #A8BBD4 is a deliberate lift for
     the darker ground. Deleting this rule would drop the dark tagline to
     #8FA3BD — readable, but a change to dark mode, which the palette work
     treated as a hard no-change gate. Remove it only as a deliberate dark-mode
     decision, not as a tidy-up. */
  .pageHeader .mastheadTitle {
    color: #A8BBD4;
  }

  :where(.pageCase) a {
    color: #37BDF9;
  }

  :where(.pageCase) a svg path {
    fill: #37BDF9;
  }

  .gradient-text {
    background: linear-gradient(90deg, var(--gradient-1) 20%, var(--gradient-2) 50%, var(--gradient-3) 90%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

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

/* Base styles - Mobile First */
:where(.pageCase) body {
  background-color: var(--background);
}

/* Wrapping: prose avoids last-line orphans, headings balance their lines.
   Both are ignored by browsers that do not support them. */

/* Links. Scoped with :where() rather than a plain descendant class so
   specificity is unchanged: `.pageCase a svg path` would be (0,1,3) and would
   outrank `.button svg path` (0,1,2) and `.wordmark path` (0,1,1), turning the
   button arrow and the wordmark accent-blue. :where() contributes 0. */
:where(.pageCase) a {
  text-decoration: none;
  transition: text-decoration 0.2s ease;
  font-weight: 600;
}

:where(.pageCase) a:hover {
  text-decoration: underline;
}

/* Typography - Mobile First */

/* List styles */

/* Hanging indent for case study prose lists. Layout, not type, so it stays
   here rather than moving to the shared element scale. Needs scoping if these
   sheets are ever concatenated. */
:where(.pageCase) li {
  padding-left: var(--space-md);
  text-indent: calc(-1 * var(--space-md));
}







/* Layout - Mobile First */
/* Only `margin: 0 auto` survives here; `max-width: 100%` was inert on a block
   div whose width is already auto. Same value as the homepage .container, so
   the two no longer conflict. */
.container {
  margin: 0 auto;
}

.section,
.showcase,
.handoff,
.co-design {
  margin-top: var(--space-xl);
}

/* Hero */
.case-hero {
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background);
  position: relative;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: none;
}

/* Main Card */
.main-card {
  max-width: 100%;
  margin: 0;
  background: var(--card-bg);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Layout - Mobile First */
:where(.pageCase) section {
  padding: var(--space-md) var(--space-md);
  background-color: var(--section-bg);
}

@media (min-width: 768px) {
  :where(.pageCase) section {
    padding: var(--space-lg) var(--space-lg);
  }
}

@media (min-width: 1024px) {
  :where(.pageCase) section {
    padding: var(--space-2xl) var(--space-2xl);
  }
}

/* Remove the content padding rules */
.section > *:not(.section-divider):not(.section-divider-alt),
.showcase > *,
.handoff > *,
.co-design > * {
  padding-left: 0;
  padding-right: 0;
}

/* Grid Layouts */
.columns,
.info-columns,
.co-design,
.image-grid,
.north-star-grid,
.handoff-grid {
  display: grid;
  gap: var(--gap-base);
  margin-top: var(--space-md);
}

.columns,
.co-design,
.handoff-grid,
.image-grid,
.north-star-grid {
  grid-template-columns: 1fr;
}

.info-columns {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* Components */
.logo {
  width: 187px;
  height: 38px;
  margin-bottom: var(--space-md);
}

/* NOTE: the Evvnt logo asset is currently filled #274189 — that is Lutron's
   brand blue, used as a placeholder. Evvnt's own brand colour was not present
   in any asset in this repo. Swap the fill in images/evvnt/logo.svg when it is
   known; dark mode is unaffected, the inversion flattens any source colour. */
.evvnt-logo {
  width: 140px;
  margin-bottom: var(--space-md);
}

/* Section dividers */
.section-divider {
  height: var(--space-md);
  margin: 0;
  background-color: var(--section-alt-bg);
  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
}

.section-divider-alt {
  height: var(--space-md);
  margin: 0;
  background-color: var(--section-alt-bg);
  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
  transform: scaleY(-1);
}

/* Section Backgrounds */
.overview {
  background-color: var(--section-bg);
}

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

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

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

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

.max-width {
  max-width: 900px;
}

.subtitle,
.section-intro {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  max-width: 900px;
}

.gradient-text {
  background: linear-gradient(90deg, var(--gradient-1) 20%, var(--gradient-2) 50%, var(--gradient-3) 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 18px;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

/* Images */
.img-border {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: 1px solid #ebe4e4;
}

.landscape-image {
  margin: var(--space-md) 0;
}

.landscape-image img,
.image-grid figure img,
.co-design-image img,
.handoff-grid figure img,
.north-star-grid figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: var(--space-xs);
}

/* Make sure north star grid images don't overflow */
.north-star-grid figure {
  width: 100%;
}

.north-star-grid figure img {
  max-width: 100%;
  object-fit: contain;
}

/* Contact Card */
/* Keeps the card's section background from leaking into the shared footer.
   Scoped so it cannot reach the homepage footer once these sheets are merged. */
:where(.pageCase) .siteFooter {
  width: 100%;
  padding: var(--space-md) var(--space-md) 44px;
}

@media (min-width: 768px) {
  :where(.pageCase) .siteFooter {
    padding: var(--space-lg) var(--space-lg) 44px;
  }
}

@media (min-width: 1024px) {
  :where(.pageCase) .siteFooter {
    padding: var(--space-2xl) var(--space-2xl) 44px;
  }
}

/* Password Protection */
#password-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  overflow-y: auto;
  background-color: var(--page-bg);
  padding: 24px;
}

#password-overlay.visible {
  display: block;
}

.gateWrap {
  max-width: 1000px;
  margin: 0 auto;
}

.gate {
  max-width: 440px;
}

.gate .gateHeading {
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
}

.gate .gateBody {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
  margin: 0 0 24px 0;
}

.gateForm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.gateForm input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 16px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--rule-color);
  border-radius: 8px;
}

.gateForm input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gateButton {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--button-fg);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.gateButton:hover {
  opacity: 0.9;
}

.gateButton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.error-message {
  display: none;
  margin: 12px 0 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--gate-error);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1000.02px) {
  #password-overlay {
    padding: 48px;
  }
}

/* Tablet (768px) */
@media (min-width: 768px) {
  .columns,
  .info-columns,
  .co-design,
  .image-grid,
  .north-star-grid,
  .handoff-grid {
    gap: var(--space-md);
  }
  
  .image-grid,
  .north-star-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .columns {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* Desktop (1024px) */
@media (min-width: 1024px) {
  
  
  
  
  .case-hero {
    height: 500px;
  }
  
  .main-card {
    max-width: 1200px;
    margin: -109px auto 44px;
    border-radius: 12px;
    box-shadow: 24px 0px 80px -12px rgba(18, 30, 64, 0.3);
    padding: 0;
  }
  
  .columns,
  .info-columns,
  .co-design,
  .image-grid,
  .north-star-grid,
  .handoff-grid {
    gap: var(--gap-desktop);
  }
  
  .subtitle,
  .section-intro {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
  }
  
  .gradient-text {
    font-size: 20px;
  }
  
  .section,
  .showcase,
  .handoff,
  .co-design {
    margin-top: var(--space-2xl);
  }
  
  .section-divider,
  .section-divider-alt {
    height: var(--space-xl);
  }
  
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .north-star-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .co-design {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .handoff-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* Remove the duplicate margin from co-design */
/* Add margin to co-design section */
.co-design {
  margin: var(--space-2xl) 0;
}

.info-columns ul {
  list-style: none;
}

.info-columns li {
  padding-left: 0;
  text-indent: 0;
}