/* /assets/css/styles.css */
:root{
  /* Palette (locked) */
  --steel: #233C4B;
  --orange: #FF7D2D;
  --amber: #FAC846;
  --sage: #A0C382;
  --teal: #5F9B8C;

  /* Cinematic neutrals */
  --bg: #070B0E;
  --bg-2: #0D141A;
  --text: #F4F7FA;
  --muted: rgba(244,247,250,.72);
  --muted-2: rgba(244,247,250,.55);

  /* Surfaces */
  --card: rgba(255,255,255,.04);
  --card-2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);

  /* Layout */
  --wrap: 1180px;
  --pad: clamp(18px, 3vw, 34px);
  --radius: 18px;

  /* Typography: structural, not designy */
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --font-head: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Condensed", "Arial Narrow", system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font-body);
  background: radial-gradient(1000px 800px at 20% 0%, rgba(35,60,75,.35), transparent 55%),
              radial-gradient(900px 700px at 80% 10%, rgba(95,155,140,.14), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
img{ max-width: 100%; display: block; }

.wrap{
  width: min(var(--wrap), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  padding: 10px 12px;
  background: var(--orange);
  color: #111;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus{ left: 14px; top: 14px; }

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(7,11,14,.88), rgba(7,11,14,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand-name{
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 16px;
  opacity: .95;
}
.brand-mark{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* Nav */
.site-nav{
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-nav a{
  font-size: 14px;
  letter-spacing: .02em;
  opacity: .86;
  padding: 10px 8px;
  border-radius: 10px;
}
.site-nav a:hover{
  opacity: 1;
  background: rgba(255,255,255,.04);
}
.site-nav .nav-cta{
  background: rgba(255,125,45,.16);
  border: 1px solid rgba(255,125,45,.35);
  opacity: 1;
}
.site-nav .nav-cta:hover{
  background: rgba(255,125,45,.22);
}

.nav-toggle{
  display: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-toggle-lines{
  display: block;
  width: 22px;
  height: 14px;
  position: relative;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(244,247,250,.9);
  border-radius: 999px;
}
.nav-toggle-lines::before{ top: 2px; }
.nav-toggle-lines::after{ bottom: 2px; }

/* Hero */
.hero{
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  overflow: clip;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}
.hero-scrim{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 650px at 30% 30%, rgba(0,0,0,.05), rgba(0,0,0,.78) 70%),
    linear-gradient(to bottom, rgba(7,11,14,.25), rgba(7,11,14,.92));
}
.hero-content{
  position: relative;
  z-index: 2;
  padding: clamp(34px, 7vh, 90px) 0;
}
.hero-kicker{
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,247,250,.80);
}
.hero-title{
  margin: 0 0 14px;
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: .92;
  font-size: clamp(44px, 6vw, 92px);
}
.title-dot{ color: var(--orange); }
.hero-subtitle{
  margin: 0 0 22px;
  max-width: 58ch;
  color: var(--muted);
  font-size: 16px;
}
.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.hero-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 920px;
}
.metric{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 14px 14px;
}
.metric-label{
  display: block;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(244,247,250,.70);
  margin-bottom: 6px;
}
.metric-value{
  display: block;
  font-size: 14px;
  color: rgba(244,247,250,.92);
}

.hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  opacity: .55;
}
.hero-scroll-line{
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(244,247,250,.85), transparent);
}

/* The ultra-subtle drifting grid overlay (cinematic engineering layer) */
.hero-grid-drift::before{
  content: "";
  position: absolute;
  inset: -60px;
  z-index: 1;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px),
    linear-gradient(45deg, rgba(250,200,70,.08) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 220px 220px;
  transform: translate3d(0,0,0);
  animation: gridDrift 18s linear infinite;
  mix-blend-mode: screen;
}
@keyframes gridDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-120px, 80px, 0); }
}

/* Sections */
.section{ padding: clamp(44px, 7vw, 92px) 0; }
.section-dark{
  background: linear-gradient(to bottom, rgba(13,20,26,.35), rgba(7,11,14,.0));
}
.section-warm{
  background:
    radial-gradient(900px 700px at 20% 10%, rgba(160,195,130,.26), transparent 62%),
    radial-gradient(700px 700px at 80% 30%, rgba(95,155,140,.18), transparent 65%),
    linear-gradient(to bottom, rgba(10,16,20,.55), rgba(10,16,20,.20));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section-head{ margin-bottom: 24px; }
.section-title{
  margin: 0 0 10px;
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(26px, 3.1vw, 42px);
}
.section-lede{
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  letter-spacing: .03em;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--orange);
  color: #111;
  border-color: rgba(0,0,0,.20);
}
.btn-primary:hover{ background: #ff6f17; }
.btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: rgba(244,247,250,.92);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); }
.btn-secondary{
  background: rgba(95,155,140,.14);
  border-color: rgba(95,155,140,.30);
  color: rgba(244,247,250,.92);
}
.btn-secondary:hover{ background: rgba(95,155,140,.18); }

/* Work grid */
.work-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.work-card{
  grid-column: span 6;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  transition: transform .18s ease, border-color .18s ease;
}
.work-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,125,45,.35);
}
.work-thumb{
  position: relative;
  height: 320px;
  overflow: hidden;
}
.work-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: contrast(1.06);
}
.work-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.55));
}
.work-blueprint{
  position: absolute;
  inset: -30px;
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: translate3d(0,0,0);
  transition: opacity .20s ease;
  mix-blend-mode: screen;
}
.work-card:hover .work-blueprint{ opacity: .35; }

.work-meta{ padding: 16px 16px 18px; }
.work-type{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(244,247,250,.72);
  margin-bottom: 8px;
}
.work-title{
  margin: 0 0 6px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: 20px;
}
.work-note{
  display: inline-block;
  font-size: 13px;
  color: rgba(250,200,70,.90);
}

.work-thumb-cta{
  display: grid;
  place-items: center;
  background: radial-gradient(700px 400px at 30% 20%, rgba(255,125,45,.16), transparent 55%),
              radial-gradient(600px 500px at 70% 70%, rgba(95,155,140,.14), transparent 60%),
              rgba(255,255,255,.03);
}
.work-cta-inner{
  text-align: left;
  width: 80%;
}
.work-cta-label{
  display: block;
  color: rgba(244,247,250,.82);
  font-size: 14px;
  margin-bottom: 8px;
}
.work-cta-action{
  display: inline-block;
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Approach */
.approach-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.approach-card{
  grid-column: span 6;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(7,11,14,.35);
}
.approach-card h3{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.approach-card p{
  margin: 0;
  color: var(--muted);
}
.approach-actions{ margin-top: 18px; }

/* Featured */
.featured{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}
.featured-media{
  grid-column: span 7;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 70px rgba(0,0,0,.50);
  min-height: 420px;
}
.featured-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-blueprint{
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .18;
  mix-blend-mode: screen;
  pointer-events: none;
}
.featured-content{
  grid-column: span 5;
}
.featured-lede{
  margin: 0 0 14px;
  color: var(--muted);
}
.constraint-list{
  margin: 0 0 18px;
  padding: 0;
}
.constraint{
  border-left: 3px solid rgba(255,125,45,.55);
  padding-left: 12px;
  margin: 0 0 10px;
}
.constraint dt{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,247,250,.70);
  margin-bottom: 2px;
}
.constraint dd{
  margin: 0;
  color: rgba(244,247,250,.92);
}

/* Clients strip */
.section-clients{ padding-top: 26px; padding-bottom: 26px; }
.clients{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.clients-label{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,247,250,.72);
}
.clients-strip{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.client-pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,247,250,.86);
  font-size: 13px;
}

/* CTA */
.section-cta{
  background: radial-gradient(900px 650px at 50% 30%, rgba(255,125,45,.18), transparent 60%),
              linear-gradient(to bottom, rgba(7,11,14,.45), rgba(7,11,14,.95));
  border-top: 1px solid rgba(255,255,255,.06);
}
.cta{
  text-align: left;
  max-width: 78ch;
}
.cta-title{
  margin: 0 0 10px;
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 44px);
}
.cta-lede{
  margin: 0 0 18px;
  color: var(--muted);
}
.cta-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(7,11,14,.92);
  padding: 30px 0 18px;
}
.footer-inner{
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-note{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 52ch;
}
.footer-contact{
  margin: 0;
  color: rgba(244,247,250,.86);
}
.footer-contact a{ color: rgba(244,247,250,.92); }
.footer-contact a:hover{ color: var(--orange); }

.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-bottom p{
  margin: 0;
  color: rgba(244,247,250,.70);
  font-size: 13px;
}
.footer-small{ opacity: .8; }

/* Responsive */
@media (max-width: 920px){
  .hero-metrics{ grid-template-columns: 1fr; }
  .work-card{ grid-column: span 12; }
  .approach-card{ grid-column: span 12; }
  .featured-media{ grid-column: span 12; min-height: 320px; }
  .featured-content{ grid-column: span 12; }
  .site-nav{
    display: none;
    position: absolute;
    right: var(--pad);
    top: 64px;
    background: rgba(7,11,14,.98);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 10px;
    flex-direction: column;
    min-width: 240px;
  }
  .site-nav.is-open{ display: flex; }
  .nav-toggle{ display: inline-flex; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ADD THESE TO /assets/css/styles.css (append at the bottom)
   Work page specific styles only — everything else reuses the base system.
*/

/* Active nav link */
.site-nav a.is-active{
  opacity: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Page hero */
.page-hero{
  position: relative;
  padding: clamp(44px, 7vh, 90px) 0;
  min-height: 62vh;
  display: grid;
  align-items: center;
  overflow: clip;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.03);
}
.page-hero-scrim{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 650px at 30% 30%, rgba(0,0,0,.10), rgba(0,0,0,.78) 70%),
    linear-gradient(to bottom, rgba(7,11,14,.25), rgba(7,11,14,.92));
}
.page-hero-grid{
  position: absolute;
  inset: -60px;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 68px 68px;
  animation: gridDrift 20s linear infinite;
  mix-blend-mode: screen;
}
.page-hero-content{
  position: relative;
  z-index: 2;
}
.page-kicker{
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,247,250,.80);
}
.page-title{
  margin: 0 0 12px;
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: .98;
  font-size: clamp(34px, 4.6vw, 66px);
}
.page-lede{
  margin: 0 0 18px;
  max-width: 72ch;
  color: var(--muted);
}
.page-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Filter bar */
.section-filter{ padding-top: 26px; padding-bottom: 26px; }
.filter-bar{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.filter-left{ grid-column: span 5; }
.filter-right{ grid-column: span 7; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.filter-title{
  margin: 0 0 6px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.filter-note{ margin: 0; color: var(--muted); max-width: 56ch; }

.chip{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(244,247,250,.88);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .02em;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
}
.chip:hover{ background: rgba(255,255,255,.06); }
.chip:active{ transform: translateY(1px); }
.chip.is-active{
  background: rgba(255,125,45,.16);
  border-color: rgba(255,125,45,.35);
  color: rgba(244,247,250,.95);
}

/* Archive tweaks */
.work-grid-archive .work-thumb{ height: 300px; }
.work-badge{
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(7,11,14,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,247,250,.86);
  backdrop-filter: blur(8px);
}

/* Filtered state */
.work-card.is-hidden{
  display: none;
}

/* Inline CTA spacing */
.cta-inline{ max-width: 86ch; }

/* Process note */
.process-note{
  max-width: 86ch;
}
.process-actions{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 920px){
  .filter-left{ grid-column: span 12; }
  .filter-right{ grid-column: span 12; justify-content: flex-start; }
}
/* ADD THESE TO /assets/css/styles.css (append at the bottom)
   Approach page specific styles only — everything else reuses the base system.
*/

/* Approach hero blueprint layers */
.page-hero-approach .approach-hero-blueprint{
  position: absolute;
  inset: -80px;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 62px 62px;
  animation: gridDrift 22s linear infinite;
  mix-blend-mode: screen;
}
.page-hero-approach .approach-hero-diagonal{
  position: absolute;
  inset: -140px;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(45deg, rgba(250,200,70,.12) 1px, transparent 1px);
  background-size: 240px 240px;
  animation: diagDrift 26s linear infinite;
  mix-blend-mode: screen;
}
@keyframes diagDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(120px, -80px, 0); }
}

/* Principles grid (warm) */
.principle-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.principle-card{
  grid-column: span 6;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(7,11,14,.35);
}
.principle-card h3{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.principle-card p{
  margin: 0 0 12px;
  color: var(--muted);
}

/* Mini list (structural bullets, not “designy”) */
.mini-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.mini-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(244,247,250,.86);
  font-size: 14px;
}
.mini-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  background: rgba(255,125,45,.75);
  border-radius: 999px;
}

/* Pipeline (dark) */
.pipeline{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.pipeline-steps{
  grid-column: span 7;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.step{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: rgba(255,255,255,.03);
}
.step-no{
  font-family: var(--font-head);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 20px;
  color: rgba(250,200,70,.92);
}
.step-body h3{
  margin: 0 0 6px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.step-body p{
  margin: 0;
  color: var(--muted);
}

.pipeline-aside{
  grid-column: span 5;
  display: grid;
  gap: 12px;
}
.aside-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: rgba(255,255,255,.03);
}
.aside-card h3{
  margin: 0 0 6px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 16px;
}
.aside-card p{
  margin: 0;
  color: var(--muted);
}
.aside-highlight{
  border-color: rgba(255,125,45,.35);
  background: rgba(255,125,45,.10);
}

/* Capabilities grid (warm) */
.caps-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.cap{
  grid-column: span 6;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(7,11,14,.35);
}
.cap h3{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.cap p{
  margin: 0;
  color: var(--muted);
}

/* Why section (dark) */
.why{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.why-left{ grid-column: span 6; }
.why-right{ grid-column: span 6; display: grid; gap: 12px; }
.why-actions{ margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

.why-panel{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: rgba(255,255,255,.03);
}
.why-panel h3{
  margin: 0 0 10px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 16px;
}
.why-panel-accent{
  border-color: rgba(250,200,70,.30);
  background: rgba(250,200,70,.08);
}

/* Responsive */
@media (max-width: 920px){
  .principle-card{ grid-column: span 12; }
  .pipeline-steps{ grid-column: span 12; }
  .pipeline-aside{ grid-column: span 12; }
  .cap{ grid-column: span 12; }
  .why-left{ grid-column: span 12; }
  .why-right{ grid-column: span 12; }
}
/* ADD THESE TO /assets/css/styles.css (append at the bottom)
   About page specific styles only — everything else reuses the base system.
*/

/* About hero grid layer */
.page-hero-about .about-hero-grid{
  position: absolute;
  inset: -60px;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: gridDrift 22s linear infinite;
  mix-blend-mode: screen;
}

/* Bio layout */
.about-bio{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.about-bio-left{ grid-column: span 7; }
.about-bio-right{ grid-column: span 5; display: grid; gap: 12px; }

.about-paragraph{
  margin: 14px 0 0;
  color: rgba(244,247,250,.86);
  max-width: 76ch;
}

/* Signals */
.about-signals{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.signal{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px 14px;
  background: rgba(7,11,14,.35);
}
.signal-label{
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,247,250,.70);
  margin-bottom: 6px;
}
.signal-value{
  display: block;
  font-size: 14px;
  color: rgba(244,247,250,.92);
}

/* Portrait */
.about-portrait{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.about-portrait img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.03);
}
.about-portrait-blueprint{
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 64px 64px;
  mix-blend-mode: screen;
}

/* Quick facts */
.about-quickfacts{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: rgba(7,11,14,.35);
}
.about-quickfacts h3{
  margin: 0 0 10px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 16px;
}

/* Values */
.values-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.value-card{
  grid-column: span 6;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(255,255,255,.03);
}
.value-card h3{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.value-card p{
  margin: 0;
  color: var(--muted);
}

/* Experience */
.experience-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.experience-panel{
  grid-column: span 6;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(7,11,14,.35);
}
.experience-panel h3{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.experience-panel p{
  margin: 0 0 12px;
  color: var(--muted);
}
.tag-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,247,250,.86);
  font-size: 13px;
}

/* Difference section */
.difference{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.difference-left{ grid-column: span 6; }
.difference-right{ grid-column: span 6; display: grid; gap: 12px; }
.difference-actions{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.difference-panel{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: rgba(255,255,255,.03);
}
.difference-panel h3{
  margin: 0 0 10px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 16px;
}
.difference-panel-accent{
  border-color: rgba(255,125,45,.35);
  background: rgba(255,125,45,.10);
}

/* Responsive */
@media (max-width: 920px){
  .about-bio-left{ grid-column: span 12; }
  .about-bio-right{ grid-column: span 12; }
  .about-signals{ grid-template-columns: 1fr; }
  .value-card{ grid-column: span 12; }
  .experience-panel{ grid-column: span 12; }
  .difference-left{ grid-column: span 12; }
  .difference-right{ grid-column: span 12; }
}
/* ADD THESE TO /assets/css/styles.css (append at the bottom)
   Collaborations page specific styles only — everything else reuses the base system.
*/

/* Hero intelligence layer */
.page-hero-collabs .collabs-hero-grid{
  position: absolute;
  inset: -70px;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 66px 66px;
  animation: gridDrift 22s linear infinite;
  mix-blend-mode: screen;
}
.page-hero-collabs .collabs-hero-diagonal{
  position: absolute;
  inset: -140px;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(45deg, rgba(250,200,70,.12) 1px, transparent 1px);
  background-size: 240px 240px;
  animation: diagDrift 26s linear infinite;
  mix-blend-mode: screen;
}

/* Lanes grid (warm) */
.lanes-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.lane{
  grid-column: span 6;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(7,11,14,.35);
}
.lane h3{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.lane p{
  margin: 0;
  color: var(--muted);
}

/* Collab grid (dark) */
.collab-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.collab-card{
  grid-column: span 6;
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.collab-head{
  margin-bottom: 10px;
}
.collab-type{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,247,250,.72);
  margin-bottom: 8px;
}
.collab-name{
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: 20px;
}
.collab-desc{
  margin: 0 0 12px;
  color: var(--muted);
}
.collab-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.meta-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,247,250,.86);
  font-size: 13px;
}
.collab-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.collab-note{
  color: rgba(244,247,250,.72);
  font-size: 13px;
}

/* Blueprint overlay for each collab card */
.collab-blueprint{
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: translate3d(0,0,0);
  transition: opacity .20s ease;
  mix-blend-mode: screen;
}
.collab-card:hover .collab-blueprint{
  opacity: .35;
}

/* CTA card variant */
.collab-card-cta{
  border-color: rgba(255,125,45,.35);
  background: radial-gradient(700px 500px at 30% 20%, rgba(255,125,45,.16), transparent 55%),
              radial-gradient(600px 500px at 70% 70%, rgba(95,155,140,.14), transparent 60%),
              rgba(255,255,255,.03);
}
.collab-card-cta .collab-name{ color: rgba(244,247,250,.95); }
.collab-card-cta .collab-desc{ color: rgba(244,247,250,.84); }

/* Partner principles (warm) */
.partner-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.partner-card{
  grid-column: span 6;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(7,11,14,.35);
}
.partner-card h3{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 18px;
}
.partner-card p{
  margin: 0;
  color: var(--muted);
}
.partner-actions{ margin-top: 18px; }

/* Responsive */
@media (max-width: 920px){
  .lane{ grid-column: span 12; }
  .collab-card{ grid-column: span 12; }
  .partner-card{ grid-column: span 12; }
}
/* ADD THESE TO /assets/css/styles.css (append at the bottom)
   Contact page specific styles only — everything else reuses the base system.
*/

/* Contact hero overlay */
.page-hero-contact .contact-hero-grid{
  position: absolute;
  inset: -70px;
  pointer-events: none;
  opacity: .10;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: gridDrift 24s linear infinite;
  mix-blend-mode: screen;
}

/* Contact layout */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.contact-form-wrap{ grid-column: span 7; }
.contact-aside{ grid-column: span 5; display: grid; gap: 12px; }

/* Form styling */
.contact-form{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(7,11,14,.35);
}
.field-row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.field{
  grid-column: span 12;
}
.field-row .field{
  grid-column: span 6;
}

label{
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,247,250,.72);
  margin-bottom: 8px;
}
input, select, textarea{
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 12px;
  color: rgba(244,247,250,.92);
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
}
input::placeholder, textarea::placeholder{ color: rgba(244,247,250,.45); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,125,45,.45);
  box-shadow: 0 0 0 4px rgba(255,125,45,.12);
}

.field-help{
  margin: 10px 0 0;
  color: rgba(244,247,250,.60);
  font-size: 13px;
}
.checkbox{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.checkbox input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.form-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.form-note{
  margin: 14px 0 0;
  color: rgba(244,247,250,.70);
  font-size: 13px;
}
.form-note a{ color: rgba(244,247,250,.92); }
.form-note a:hover{ color: var(--orange); }

/* Aside cards */
.contact-aside .aside-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: rgba(7,11,14,.35);
}
.contact-aside h3{
  margin: 0 0 10px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 16px;
}
.aside-line{
  margin: 0 0 8px;
  color: rgba(244,247,250,.86);
}
.aside-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.aside-highlight{
  border-color: rgba(255,125,45,.35);
  background: rgba(255,125,45,.10);
}

/* Responsive */
@media (max-width: 920px){
  .contact-form-wrap{ grid-column: span 12; }
  .contact-aside{ grid-column: span 12; }
  .field-row .field{ grid-column: span 12; }
}
/* ADD THESE TO /assets/css/styles.css (append at the bottom)
   Case Studies index page specific styles only.
   (It reuses the existing filter bar + chip styles already appended for Work page.)
*/

/* Hero overlays */
.page-hero-casestudies .case-hero-grid{
  position: absolute;
  inset: -70px;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 66px 66px;
  animation: gridDrift 22s linear infinite;
  mix-blend-mode: screen;
}
.page-hero-casestudies .case-hero-lines{
  position: absolute;
  inset: -120px;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(45deg, rgba(250,200,70,.12) 1px, transparent 1px);
  background-size: 240px 240px;
  animation: diagDrift 26s linear infinite;
  mix-blend-mode: screen;
}

/* Case study grid */
.case-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.case-card{
  grid-column: span 6;
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.03);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.case-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,125,45,.30);
  background: rgba(255,255,255,.04);
}

.case-thumb{
  position: relative;
  height: 280px;
  overflow: hidden;
}
.case-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.03);
  transform: scale(1.02);
  transition: transform .24s ease;
}
.case-card:hover .case-thumb img{
  transform: scale(1.06);
}

.case-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 500px at 35% 30%, rgba(0,0,0,.10), rgba(0,0,0,.65)),
    linear-gradient(to bottom, rgba(7,11,14,.20), rgba(7,11,14,.78));
}
.case-blueprint{
  position: absolute;
  inset: -40px;
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(95,155,140,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,155,140,.18) 1px, transparent 1px);
  background-size: 64px 64px;
  transition: opacity .20s ease;
  mix-blend-mode: screen;
}
.case-card:hover .case-blueprint{
  opacity: .35;
}
.case-badge{
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(7,11,14,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,247,250,.86);
  backdrop-filter: blur(8px);
}

.case-body{
  padding: 16px 16px 18px;
}
.case-title{
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: 20px;
  color: rgba(244,247,250,.95);
}
.case-subtitle{
  margin: 0 0 12px;
  color: var(--muted);
  max-width: 70ch;
}
.case-metrics{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.metric{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,247,250,.84);
  font-size: 13px;
}
.case-link{
  display: inline-block;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(250,200,70,.92);
}

/* Hidden state for filtering */
.case-card.is-hidden{ display: none; }

/* Format explainer layout */
.format{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.format-left{ grid-column: span 6; }
.format-right{ grid-column: span 6; display: grid; gap: 12px; }
.format-actions{ margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

.format-panel{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px 16px;
  background: rgba(7,11,14,.35);
}
.format-panel h3{
  margin: 0 0 6px;
  font-family: var(--font-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 16px;
}
.format-panel p{
  margin: 0;
  color: var(--muted);
}
.format-panel-accent{
  border-color: rgba(255,125,45,.35);
  background: rgba(255,125,45,.10);
}

/* Responsive */
@media (max-width: 920px){
  .case-card{ grid-column: span 12; }
  .format-left{ grid-column: span 12; }
  .format-right{ grid-column: span 12; }
}