/* ============================================================
   DESIGN TOKENS
   Emeralite #343A1C | Strikethrough #A44E36 | Brass #D4A349
   Water Cooler #22535A | Ink #2A2B26 | Manila #DFDACA | Paper #E8E7E6
============================================================ */
:root {
  --emeralite:  #343A1C;
  --strike:     #A44E36;
  --brass:      #D4A349;
  --water:      #22535A;
  --ink:        #2A2B26;
  --manila:     #DFDACA;
  --paper:      #E8E7E6;
  --white:      #FFFFFF;
  --em10:       rgba(52,58,28,0.07);
  --br10:       rgba(212,163,73,0.13);
  --wa10:       rgba(34,83,90,0.08);
  --sk10:       rgba(164,78,54,0.08);
  --radius:     4px;
  --radius-lg:  8px;
  --ease:       0.22s ease;
  --shadow:     0 2px 12px rgba(42,43,38,0.07);
  --shadow-lg:  0 8px 32px rgba(42,43,38,0.11);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.05rem; font-weight: 700; }
p  { color: rgba(42,43,38,0.68); line-height: 1.78; font-weight: 300; font-size: 0.95rem; }
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass);
}

/* ── Layout ── */
.container     { max-width: 1160px; margin: 0 auto; padding: 0 36px; }
.container--sm { max-width: 800px;  margin: 0 auto; padding: 0 36px; }
section        { padding: 96px 0; }


/* ── Grids ── */
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }

/* ── Divider ── */
.div  { width: 36px; height: 3px; background: var(--brass); margin: 12px 0 24px; }
.div--c { margin: 12px auto 24px; }
.div--w { background: var(--water); }
.div--s { background: var(--strike); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.83rem; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--radius); border: 1.5px solid transparent;
  transition: all var(--ease); cursor: pointer;
}
.btn-em   { background: var(--emeralite); color: var(--manila); border-color: var(--emeralite); }
.btn-em:hover { background: #2a2f16; border-color: #2a2f16; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-br   { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn-br:hover { background: #c49940; transform: translateY(-1px); }
.btn-ol   { background: transparent; color: var(--emeralite); border-color: var(--emeralite); }
.btn-ol:hover { background: var(--emeralite); color: var(--manila); }
.btn-ol-light { background: transparent; color: var(--manila); border-color: rgba(223,218,202,0.35); }
.btn-ol-light:hover { border-color: var(--manila); }
.btn-ghost { background: transparent; color: rgba(42,43,38,0.6); border-color: rgba(42,43,38,0.2); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

/* ── Cards ── */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid rgba(42,43,38,0.08); padding: 32px;
  transition: all var(--ease);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card--manila { background: var(--manila); border-color: transparent; }
.card--paper  { background: var(--paper);  border-color: transparent; }

/* ── Tags ── */
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 40px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.tag-em { background: var(--em10); color: var(--emeralite); }
.tag-wa { background: var(--wa10); color: var(--water); }
.tag-br { background: var(--br10); color: #8a6010; }
.tag-sk { background: var(--sk10); color: var(--strike); }

/* ── Animations ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.au    { opacity:0; animation: fadeUp 0.5s ease forwards; }
.au.d1 { animation-delay: 0.08s; }
.au.d2 { animation-delay: 0.16s; }
.au.d3 { animation-delay: 0.24s; }
.au.d4 { animation-delay: 0.32s; }

hr.line { border: none; border-top: 1px solid rgba(42,43,38,0.09); }

/* ============================================================
   LOGO
============================================================ */
.logo-wrap { cursor: pointer; }
.logo-text {
  font-family: 'Playfair Display', serif; font-weight: 700;
  letter-spacing: -0.02em; font-size: 1.2rem; color: var(--ink);
}
.logo-text .gm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 7px; font-family: 'DM Sans', sans-serif; font-weight: 700;
  vertical-align: super; margin-left: 1px; line-height: 1;
}
.logo-sub { font-size: 0.62rem; color: rgba(42,43,38,0.42); letter-spacing: 0.04em; margin-top: 1px; }

/* ============================================================
   NAV
============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(232,231,230,0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(42,43,38,0.09);
  transition: box-shadow var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav__links { display: flex; align-items: center; gap: 1px; }
.nav__lnk {
  padding: 6px 12px; font-size: 0.81rem; font-weight: 500;
  color: rgba(42,43,38,0.6); border-radius: var(--radius);
  cursor: pointer; transition: all var(--ease);
}
.nav__lnk:hover { color: var(--ink); background: rgba(42,43,38,0.05); }
.nav__lnk.active { color: var(--emeralite); font-weight: 600; }
.nav__act { display: flex; align-items: center; }

.ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.ham span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all var(--ease); }
.mob-nav {
  display: none; position: fixed; top: 64px; left: 0; right: 0;
  background: var(--paper); border-bottom: 1px solid rgba(42,43,38,0.09);
  padding: 10px 20px 20px; z-index: 998; flex-direction: column; gap: 2px;
}
.mob-nav.open { display: flex; }
.mob-nav .nav__lnk { padding: 12px 14px; font-size: 0.92rem; }

/* ============================================================
   FOOTER
============================================================ */
.footer { background: var(--emeralite); color: var(--manila); padding: 60px 0 28px; }
.foot-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px; padding-bottom: 44px;
  border-bottom: 1px solid rgba(223,218,202,0.1);
}
.foot-logo .logo-text { color: var(--manila); font-size: 1.3rem; }
.foot-logo .logo-sub  { color: rgba(223,218,202,0.4); }
.foot-about { font-size: 0.83rem; color: rgba(223,218,202,0.5); margin-top: 14px; line-height: 1.7; font-weight: 300; }
.foot-col h5, .foot-col .foot-h {
  font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(223,218,202,0.3); margin-bottom: 16px;
}
.foot-col ul { display: flex; flex-direction: column; gap: 9px; }
.foot-col ul li a { font-size: 0.83rem; color: rgba(223,218,202,0.55); transition: color var(--ease); cursor: pointer; }
.foot-col ul li a:hover { color: var(--manila); }
.foot-bot { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; font-size: 0.72rem; color: rgba(223,218,202,0.28); }

/* ============================================================
   HERO — HOME
============================================================ */
.hero {
  padding-top: 136px; padding-bottom: 88px;
  background: var(--manila); position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 420px; height: 5px; background: var(--brass);
}
.hero h1 { color: var(--emeralite); max-width: 760px; margin-bottom: 22px; }
.hero__sub {
  font-size: 1rem; color: rgba(42,43,38,0.62);
  max-width: 500px; margin-bottom: 36px; line-height: 1.78;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hero__note { font-size: 0.78rem; color: rgba(42,43,38,0.38); font-weight: 400; margin-top: 4px; }
.hero__stats {
  display: flex; gap: 48px; flex-wrap: wrap;
  padding-top: 44px; margin-top: 44px;
  border-top: 1px solid rgba(42,43,38,0.11);
}
.stat-n {
  font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700;
  color: var(--emeralite); line-height: 1; letter-spacing: -0.03em;
}
.stat-n span { color: var(--brass); }
.stat-l { font-size: 0.72rem; font-weight: 500; color: rgba(42,43,38,0.45); margin-top: 5px; letter-spacing: 0.03em; }

/* ============================================================
   WHO WE WORK WITH — HOME
============================================================ */
.wwww { background: var(--white); }
.wwww-card {
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(42,43,38,0.08);
  background: var(--paper);
  transition: all var(--ease);
  cursor: pointer;
}
.wwww-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); background: var(--white); }
.wwww-icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 18px;
}
.wwww-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.wwww-card p  { font-size: 0.875rem; }

/* ============================================================
   WHAT WE DO — HOME
============================================================ */
.wwd { background: var(--paper); }
.wwd-intro { max-width: 560px; margin-bottom: 52px; }
.wwd-intro h2 { margin-bottom: 14px; }
.wwd-col { padding-left: 20px; border-left: 3px solid var(--brass); }
.wwd-col:nth-child(2) { border-left-color: var(--water); }
.wwd-col:nth-child(3) { border-left-color: var(--strike); }
.wwd-col h3 { font-size: 1.2rem; margin-bottom: 10px; }
.wwd-col p  { font-size: 0.875rem; margin-bottom: 18px; }

/* ============================================================
   PROCESS — HOME
============================================================ */
.process { background: var(--manila); }
.proc-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid rgba(42,43,38,0.1);
  border-radius: var(--radius-lg); overflow: hidden;
}
.proc-step { padding: 28px 24px; border-right: 1px solid rgba(42,43,38,0.1); }
.proc-step:last-child { border-right: none; background: var(--emeralite); }
.proc-label {
  font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700;
  color: var(--emeralite); margin-bottom: 8px;
}
.proc-step:last-child .proc-label { color: var(--brass); }
.proc-step:last-child p { color: rgba(223,218,202,0.55); }
.proc-step p { font-size: 0.83rem; }

/* ============================================================
   PORTFOLIO PREVIEW — HOME
============================================================ */
.port-prev { background: var(--white); }
.port-prev-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: rgba(42,43,38,0.08); border-radius: var(--radius-lg); overflow: hidden; }
.port-prev-item {
  background: var(--white); padding: 22px 20px;
  transition: background var(--ease);
}
.port-prev-item:hover { background: var(--paper); }
.port-prev-name { font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.port-prev-cat  { font-size: 0.7rem; color: rgba(42,43,38,0.42); font-weight: 500; letter-spacing: 0.04em; }

/* ============================================================
   PARTNERSHIP PHILOSOPHY — HOME
============================================================ */
.phil { background: var(--paper); color: var(--ink); }
.phil h2 { color: var(--ink); max-width: 560px; margin-bottom: 20px; }
.phil .eyebrow { color: var(--water); }
.phil .div { background: var(--water); }
.phil p  { color: rgba(42,43,38,0.6); max-width: 580px; font-size: 1rem; line-height: 1.8; }

/* ============================================================
   INNER PAGE HERO
============================================================ */
.inner-hero {
  padding-top: 128px; padding-bottom: 68px;
  background: var(--emeralite); color: var(--manila); position: relative; overflow: hidden;
}
.inner-hero::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 280px; height: 4px; background: var(--brass);
}
.inner-hero .eyebrow { color: var(--brass); display: block; margin-bottom: 12px; }
.inner-hero h1    { color: var(--manila); max-width: 640px; margin-bottom: 16px; }
.inner-hero p     { color: rgba(223,218,202,0.62); font-size: 1rem; max-width: 540px; }
.ih--water  { background: var(--water); }
.ih--strike { background: var(--strike); }
.ih--ink    { background: var(--ink); }

/* ============================================================
   TWO-COLUMN
============================================================ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: start; }
.sticky   { position: sticky; top: 88px; }

/* ============================================================
   CHECKLIST
============================================================ */
.chklist { display: flex; flex-direction: column; gap: 12px; }
.chk-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px; background: var(--paper);
  border-radius: var(--radius); border: 1px solid rgba(42,43,38,0.07);
}
.chk-dot {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--emeralite); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--manila); font-size: 0.65rem; font-weight: 700;
}
.chk-item h4 { font-size: 0.9rem; margin-bottom: 3px; }
.chk-item p  { font-size: 0.83rem; }

/* ============================================================
   VERTICAL STEPS
============================================================ */
.vsteps { display: flex; flex-direction: column; }
.vstep  {
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding: 32px 0; border-bottom: 1px solid rgba(42,43,38,0.08);
}
.vstep:last-child { border-bottom: none; }
.vstep-n {
  font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700;
  color: rgba(42,43,38,0.09); line-height: 1; letter-spacing: -0.04em;
}
.vstep h4 { margin-bottom: 6px; }

/* ============================================================
   TEAM
============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.team-card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid rgba(42,43,38,0.08); overflow: hidden; transition: all var(--ease); }
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.team-photo {
  aspect-ratio: 3/4; background: var(--manila); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(42,43,38,0.3); border-bottom: 3px solid var(--brass);
}
.team-body  { padding: 22px; }
.team-name  { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 3px; }
.team-role  { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--water); margin-bottom: 10px; }
.team-bio   { font-size: 0.83rem; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.team-bio { display: none; margin-top: 10px; }
.team-bio.open { display: block; }
.bio-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--water); cursor: pointer;
  background: none; border: none; padding: 0;
  transition: color var(--ease);
}
.bio-toggle:hover { color: var(--emeralite); }

/* ============================================================
   PRINCIPLES (dark)
============================================================ */
.principles { background: var(--ink); color: var(--manila); }
.prin-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px; }
.prin .div  { background: var(--brass); }
.prin h4    { color: var(--manila); margin-bottom: 8px; }
.prin p     { color: rgba(223,218,202,0.48); font-size: 0.85rem; }

/* ============================================================
   PORTFOLIO PAGE
============================================================ */
.port-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.p-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid rgba(42,43,38,0.08); padding: 26px 28px;
  transition: all var(--ease);
}
.p-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.p-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.p-card-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; }
.p-card-name a { color: inherit; text-decoration: none; }
.p-card-name a:hover { text-decoration: underline; }
.p-card-desc { font-size: 0.85rem; color: rgba(42,43,38,0.6); line-height: 1.6; }
.p-card-logo {
  height: 80px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; border-bottom: 1px solid rgba(42,43,38,0.08);
  padding-bottom: 16px;
}
.p-card-logo img { max-height: 60px; max-width: 160px; width: auto; height: auto; display: block; }
.p-card { position: relative; }
.p-card-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(42,43,38,0.08); color: rgba(42,43,38,0.4);
  padding: 3px 9px; border-radius: 20px; line-height: 1;
}

/* ============================================================
   CONTACT
============================================================ */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: start; }
.form  { display: flex; flex-direction: column; gap: 16px; }
.frow  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg    { display: flex; flex-direction: column; gap: 6px; }
.fg label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(42,43,38,0.5); }
.fg input, .fg textarea, .fg select {
  padding: 11px 13px; border-radius: var(--radius);
  border: 1px solid rgba(42,43,38,0.14);
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
  color: var(--ink); background: var(--white); outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance: none;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--water); box-shadow: 0 0 0 3px rgba(34,83,90,0.09);
}
.fg textarea { resize: vertical; min-height: 120px; }
.contact-aside { display: flex; flex-direction: column; gap: 28px; }
.cinfo h4 { margin-bottom: 5px; }
.cinfo p, .cinfo a { font-size: 0.88rem; }
.cinfo a  { color: var(--water); font-weight: 500; }
.callout  {
  background: var(--manila); border-radius: var(--radius-lg);
  padding: 22px 26px; border-left: 4px solid var(--brass);
}
.callout h4 { margin-bottom: 6px; font-size: 0.95rem; }
.callout p  { font-size: 0.83rem; }
#formOk {
  display: none; padding: 13px 16px; background: rgba(34,83,90,0.09);
  border-radius: var(--radius); color: var(--water);
  font-weight: 500; font-size: 0.85rem;
}

/* ============================================================
   UTILITY
============================================================ */
.highlight {
  background: var(--manila); border-radius: var(--radius-lg);
  padding: 26px 30px; border-left: 4px solid var(--water); margin: 36px 0;
}
.highlight h4 { color: var(--water); margin-bottom: 7px; }
.highlight p  { font-size: 0.88rem; }
.pullquote    { border-left: 3px solid var(--brass); padding: 8px 22px; margin: 24px 0; }
.pullquote p  { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem; color: var(--emeralite); font-weight: 400; }
.bg-w  { background: var(--white); }
.bg-m  { background: var(--manila); }
.bg-p  { background: var(--paper); }
.bg-em { background: var(--emeralite); }
.bg-wa { background: var(--water); }
.bg-ink{ background: var(--ink); }
.section-hd { margin-bottom: 48px; }
.section-hd.center { text-align: center; }

/* ============================================================
   DARK CTA BAND
============================================================ */
.cta-band { padding: 72px 0; text-align: center; }
.cta-band.em  { background: var(--emeralite); }
.cta-band.wa  { background: var(--water); }
.cta-band.ink { background: var(--ink); }
.cta-band h2  { color: var(--manila); margin-bottom: 12px; }
.cta-band p   { color: rgba(223,218,202,0.58); max-width: 440px; margin: 0 auto 32px; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2,1fr); }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .proc-grid { grid-template-columns: repeat(2,1fr); }
  .port-prev-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
  section { padding: 60px 0; }
  .container, .container--sm { padding: 0 20px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .sticky { position: static; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .team-grid { grid-template-columns: 1fr; }
  .prin-grid { grid-template-columns: 1fr; }
  .port-grid { grid-template-columns: 1fr 1fr; }
  .port-prev-grid { grid-template-columns: repeat(2,1fr); }
  .hero__stats { gap: 28px; }
  .nav__links, .nav__act { display: none; }
  .ham { display: flex; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-bot { flex-direction: column; gap: 6px; text-align: center; }
  .frow { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .port-grid { grid-template-columns: 1fr; }
  .port-prev-grid { grid-template-columns: repeat(2,1fr); }
  h1 { font-size: 2.1rem; }
}

/* ============================================================
   COLOR BOOST — brand palette pushed into sections and cards
============================================================ */

/* Who We Work With — full brand-color card backgrounds */
.wwww { background: var(--paper); }
.wwww-card--em { background: var(--emeralite); border-color: transparent; }
.wwww-card--em:hover { background: #2a2f16; transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.22); }
.wwww-card--em h3 { color: var(--manila); }
.wwww-card--em p  { color: rgba(223,218,202,0.62); }

.wwww-card--wa { background: var(--water); border-color: transparent; }
.wwww-card--wa:hover { background: #1d4a51; transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.22); }
.wwww-card--wa h3 { color: var(--manila); }
.wwww-card--wa p  { color: rgba(223,218,202,0.62); }

.wwww-card--sk { background: var(--strike); border-color: transparent; }
.wwww-card--sk:hover { background: #8f4230; transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.22); }
.wwww-card--sk h3 { color: var(--manila); }
.wwww-card--sk p  { color: rgba(223,218,202,0.62); }

.wwww-card--em .wwww-icon,
.wwww-card--wa .wwww-icon,
.wwww-card--sk .wwww-icon { background: rgba(255,255,255,0.13); }

/* Light tag for use on dark-card backgrounds */
.tag-light { background: rgba(255,255,255,0.16); color: var(--manila); }

/* What We Do — warm manila instead of flat paper */
.wwd { background: var(--manila); }

/* Portfolio Preview — dark ink showcase */
.port-prev { background: var(--ink); }
.port-prev h2        { color: var(--manila); }
.port-prev .eyebrow  { color: var(--brass); }
.port-prev .div      { background: var(--brass); }
.port-prev-grid      { background: rgba(255,255,255,0.05); }
.port-prev-item      { background: transparent; }
.port-prev-item:hover { background: rgba(255,255,255,0.06); }
.port-prev-name      { color: var(--manila); }
.port-prev-cat       { color: rgba(223,218,202,0.42); }

/* Process — emeralite brand background for richness */
.process { background: var(--emeralite); }
.process .eyebrow { color: var(--brass); }
.process h2       { color: var(--manila); }
.process .section-hd p { color: rgba(223,218,202,0.55); }
.proc-grid { border-color: rgba(223,218,202,0.1); }
.proc-step { border-right-color: rgba(223,218,202,0.1); background: rgba(255,255,255,0.03); }
.proc-label { color: var(--manila); }
.proc-step p { color: rgba(223,218,202,0.55); }
.proc-step:last-child { background: var(--brass); border-right: none; }
.proc-step:last-child .proc-label { color: var(--ink); }
.proc-step:last-child p { color: rgba(42,43,38,0.65); }

/* ============================================================
   MULTI-PAGE ADDITIONS (10/07/26)
============================================================ */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--emeralite); color: var(--manila); padding: 8px 14px; border-radius: var(--radius); }
.skip:focus { left: 8px; }
a.nav__lnk, a.btn { display: inline-flex; }
.nav__lnk[aria-current="page"] { color: var(--emeralite); font-weight: 600; }
.logo-wrap { display: block; }
.ham { background: none; border: none; }
.ham:focus-visible, .nav__lnk:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
a.wwww-card { display: block; color: inherit; }
.card-link { display: inline-block; margin-top: 20px; font-size: 0.82rem; font-weight: 500; color: var(--brass); }
a.port-prev-item { display: block; }
.port-prev-item--more .port-prev-name { color: var(--brass); }
.crumbs { font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(223,218,202,0.5); margin-bottom: 18px; }
.crumbs a { color: rgba(223,218,202,0.75); }
.crumbs a:hover { color: var(--manila); }
.crumbs span[aria-hidden] { margin: 0 6px; }
.inline-link { color: var(--water); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--white); border: 1px solid rgba(42,43,38,0.08); border-radius: var(--radius-lg); padding: 0 24px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 28px 20px 0; position: relative; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 18px; font-family: 'DM Sans', sans-serif; font-size: 1.2rem; color: var(--water); }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding: 0 0 22px; }
.faq details p + p { margin-top: 10px; }
.faq-group { margin-bottom: 56px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 20px; }
.foot-col address { font-style: normal; font-size: 0.83rem; color: rgba(223,218,202,0.55); line-height: 1.7; }
.foot-col ul li a { cursor: pointer; }
.err404 { padding: 160px 0 120px; background: var(--manila); text-align: center; }
.err404 h1 { color: var(--emeralite); margin-bottom: 16px; }
.err404 p { max-width: 460px; margin: 0 auto 28px; }
.err404 .hero__actions { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .au { animation: none; opacity: 1; }
  .card:hover, .team-card:hover, .wwww-card:hover, .p-card:hover { transform: none; }
}
/* h3s that keep the old h4 look (heading order fixed, visuals unchanged) */
.h4 { font-size: 1.05rem; font-weight: 700; }
.prin .h4 { color: var(--manila); margin-bottom: 8px; }
.vstep .h4, .cinfo .h4 { margin-bottom: 6px; }
.callout .h4 { margin-bottom: 6px; font-size: 0.95rem; }
.highlight .h4 { color: var(--water); margin-bottom: 7px; }
.card .h4 { margin-bottom: 8px; }
ol.vsteps { list-style: none; padding: 0; }
h2.eyebrow, h3.eyebrow { font-family: 'DM Sans', sans-serif; line-height: 1.6; letter-spacing: 0.14em; }
.proc-step h3.proc-label { font-size: 1.2rem; }
.p-card-name { line-height: 1.3; }
.nav__lnk, .btn { white-space: nowrap; }
.nav__links .nav__lnk[href="/"] { display: none; }
@media (max-width: 1024px) {
  .nav__links, .nav__act { display: none; }
  .ham { display: flex; }
}