/* Brand More — static build stylesheet */

:root {
  /* Official Brand More palette (locked hex values — do not approximate
     or substitute) mapped onto the existing six token roles so every
     component recolors automatically:
       --ivory    = Primary Cream   #F7EFE6
       --sand     = Secondary Cream #DFD8CD
       --espresso = Primary Brown   #594134
       --taupe    = Secondary Brown #9D907C
       --azure    = Primary Blue    #A4AEB6
       --mist     = Secondary Blue  #C8D1D9
     There is no --rust anymore — orange isn't part of the official
     palette, so the couple of spots that used it (the "Most Popular"
     badge, footnote markers) now use --espresso.
     Secondary Brown (--taupe) fails contrast as small text on Cream
     (~2.7:1), so it's used for non-text accents only (e.g. the eyebrow's
     decorative dash) rather than copy — labels that used to be --taupe
     now use --espresso, which the official palette recommends for text
     on Cream anyway. */
  --ivory: #F7EFE6;         /* Primary Cream — primary background */
  --sand: #DFD8CD;          /* Secondary Cream — secondary surfaces/cards */
  --espresso: #594134;      /* Primary Brown — primary text, nav, strong headings, buttons */
  --espresso-hover: #4f3c34;/* Dark, darkened — button/link hover */
  --taupe: #9D907C;         /* Secondary Brown — non-text accents only (see note above) */
  --azure: #A4AEB6;         /* Primary Blue — primary accent, buttons, selected states */
  --mist: #C8D1D9;          /* Secondary Blue — soft/on-dark accent text and backgrounds */
  --line: rgba(89, 65, 52, 0.15);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

em {
  font-style: italic;
  font-weight: 500;
}

a { color: inherit; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

section[id] { scroll-margin-top: 88px; }

::selection { background: var(--azure); color: var(--espresso); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0 0 24px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--taupe);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--mist); }
.eyebrow.on-dark::before { background: var(--mist); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  background: none;
}
.btn-primary { background: var(--azure); color: var(--espresso); }
.btn-primary:hover { background: #8B939A; }
.btn-outline { border-color: rgba(89, 65, 52, 0.4); color: var(--espresso); }
.btn-outline:hover { border-color: var(--espresso); background: var(--espresso); color: var(--ivory); }
.btn-invert { background: var(--ivory); color: var(--espresso); width: 100%; }
.btn-invert:hover { background: var(--mist); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Nav ---------- */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.3s ease;
}
header.scrolled, header.menu-open {
  background: rgba(246, 239, 230, 0.92);
  backdrop-filter: blur(10px);
}
nav.bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 28px;
  align-items: center;
  padding-block: 20px;
}

/* Wordmark — the actual uploaded logo art, centered in the header.
   "About Us" sits to its left and "Services" / "Work With Us" sit to its
   right (see .nav-links.left / .nav-links.right below). Pinned to the
   middle grid column explicitly so it stays centered even on mobile,
   where both link lists are display:none and would otherwise leave it
   the only grid item (and so, by default, shoved into column 1). */
.logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  grid-column: 2;
  justify-self: center;
}
.logo-img { height: 96px; width: auto; display: block; }
/* Two logo images share the slot; only one is visible at a time,
   toggled by the same on-dark nav state as everything else in the
   header (see the header.on-dark block further down). */
.logo-img-ondark { display: none; }

/* Nav links sit directly on the page background (no pill) — the ones
   left of the logo in one list, the ones right of it in another, so the
   logo can occupy its own centered grid column between them. */
.nav-links {
  display: none;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 34px;
}
.nav-links.left { grid-column: 1; justify-content: flex-end; }
.nav-links.right { grid-column: 3; justify-content: space-between; }
.nav-links a {
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(89, 65, 52, 0.7);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--espresso); }
.nav-links a.active { color: var(--espresso); border-bottom: 1px solid var(--espresso); padding-bottom: 3px; }

/* "Work With Us" is pinned to the header's own full-width box — not the
   max-width .wrap column the rest of the nav sits in — using the same
   edge offset as .wrap's padding, so it stays flush with the true page
   margin (and the real browser edge on wide screens) instead of
   stopping early at .wrap's 1180px cap. */
.nav-cta {
  display: none;
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  top: 50%;
  transform: translateY(-50%);
}

.menu-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 60;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--espresso);
  transition: transform 0.3s ease;
}
.menu-toggle.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
/* On dark-hero pages (Home, Work With Us), the nav links, "Work With Us"
   outline button, and hamburger icon all sit directly on that dark
   background until the header scrolls to its own opaque one — so they
   need to switch to light styling for that stretch. The logo needs no
   such override: it's colored for a dark backdrop already. */
header.on-dark:not(.scrolled):not(.menu-open) .nav-links a { color: rgba(246, 239, 230, 0.8); }
header.on-dark:not(.scrolled):not(.menu-open) .nav-links a:hover,
header.on-dark:not(.scrolled):not(.menu-open) .nav-links a.active { color: var(--ivory); border-bottom-color: var(--ivory); }
header.on-dark:not(.scrolled):not(.menu-open) .nav-links .btn-outline,
header.on-dark:not(.scrolled):not(.menu-open) .nav-cta.btn-outline { border-color: rgba(246, 239, 230, 0.5); color: var(--ivory); }
header.on-dark:not(.scrolled):not(.menu-open) .nav-links .btn-outline:hover,
header.on-dark:not(.scrolled):not(.menu-open) .nav-cta.btn-outline:hover { border-color: var(--ivory); background: var(--ivory); color: var(--espresso); }
header.on-dark:not(.scrolled):not(.menu-open) .menu-toggle span { background: var(--ivory); }
header.on-dark:not(.scrolled):not(.menu-open) .logo-img-default { display: none; }
header.on-dark:not(.scrolled):not(.menu-open) .logo-img-ondark { display: block; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding-inline: clamp(20px, 5vw, 64px);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 2.4rem;
  text-decoration: none;
  color: var(--espresso);
}
/* Higher specificity than ".mobile-menu a" so the CTA keeps its button
   styling (cream text on the solid brown fill) instead of inheriting the
   nav links' large italic treatment. */
.mobile-menu a.btn {
  font-family: "Manrope", sans-serif;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--ivory);
}

/* ---------- Sub-page header (About / Services / Portfolio / Work With Us) ---------- */
.page-header { padding: 150px 0 20px; }
.page-header h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 16ch; }
.page-header p.lede { max-width: 60ch; margin-top: 20px; font-size: 1.1rem; color: rgba(89, 65, 52, 0.7); }
.page-header p.lede + p.lede { margin-top: 14px; }

/* ---------- Case study intro: copy + a looping real-footage video on the
   right (Christian Drake case study only). Single column, video stacked
   below the copy, until 720px -- same breakpoint the rest of the site's
   two-column layouts (.approach-grid, .work grid) already use. Capped to
   a moderate max-width rather than filling the whole column, since the
   source footage is a tall 9:16 phone clip and would otherwise run far
   taller than the copy beside it. */
.case-study-intro-grid {
  display: grid;
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .case-study-intro-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; }
  .case-study-intro-copy .eyebrow { margin-top: 0 !important; }
}
.case-study-intro-media {
  position: relative;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  background: var(--sand);
  box-shadow: inset 0 0 0 1px rgba(89, 65, 52, 0.1);
}
@media (min-width: 720px) { .case-study-intro-media { margin-left: auto; } }
.case-study-intro-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Hero ---------- */
.hero { padding: 150px 0 60px; }
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: end;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-top: 18px; }
.hero .lede { max-width: 420px; margin-top: 22px; font-size: 1.1rem; color: rgba(89, 65, 52, 0.75); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.hero-media video,
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(89, 65, 52, 0.1);
}
/* Dark (espresso) hero so the logo — colored for a dark backdrop — reads
   clearly through the transparent header above it. */
.hero.on-dark { background: var(--espresso); }
.hero.on-dark h1 { color: var(--ivory); }
.hero.on-dark .lede { color: rgba(246, 239, 230, 0.75); }
.hero.on-dark .btn-outline { border-color: rgba(246, 239, 230, 0.5); color: var(--ivory); }
.hero.on-dark .btn-outline:hover { border-color: var(--ivory); background: var(--ivory); color: var(--espresso); }
.hero.on-dark .hero-media::after { box-shadow: inset 0 0 0 1px rgba(246, 239, 230, 0.1); }

/* ---------- Brand statement ---------- */
.statement { padding: 110px 0; }
.statement p.lead {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  line-height: 1.32;
  max-width: 900px;
}
.statement p.lead .fade { color: rgba(89, 65, 52, 0.5); }
.outcomes { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 60px; }
.outcomes span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--espresso);
}
.outcomes span.dot::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--azure);
}

/* ---------- Section heading ---------- */
.section-head { margin-bottom: 60px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); max-width: 18ch; }
.section-head p.supporting { max-width: 62ch; margin-top: 22px; font-size: 1.1rem; color: rgba(89, 65, 52, 0.7); }
.section-head.on-dark h2 { color: var(--ivory); }
.section-head.on-dark p.supporting { color: rgba(246, 239, 230, 0.75); }
.section-pad { padding-block: clamp(70px, 9vw, 110px); }

/* ---------- Services (accordion) ---------- */
.service-list { border-top: 1px solid var(--line); }
.service-row { border-bottom: 1px solid var(--line); }
.service-row button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 30px 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.service-row .num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--espresso);
  font-size: 1.1rem;
  margin-right: 22px;
}
.service-row .title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
}
.service-row .icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(89, 65, 52, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.service-row.open .icon { transform: rotate(45deg); }
.service-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.service-row.open .service-panel { grid-template-rows: 1fr; }
.service-panel-inner { overflow: hidden; }
.service-panel p {
  max-width: 62ch;
  padding-bottom: 30px;
  font-size: 1.05rem;
  color: rgba(89, 65, 52, 0.7);
}

/* ---------- Packages ---------- */
.packages-grid {
  display: grid;
  gap: 32px;
}
.package-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--ivory);
  padding: 34px 32px;
}
.package-card.popular {
  border-color: rgba(89, 65, 52, 0.7);
  box-shadow: inset 0 3px 0 0 var(--azure);
}
.package-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
  min-height: 1.2em;
}
.package-card h3 {
  margin-top: 10px;
  font-size: 1.9rem;
}
.package-tagline { margin-top: 6px; font-size: 0.9rem; color: var(--espresso); }
.package-price {
  margin-top: 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6rem;
  color: var(--espresso);
}
.package-price span {
  margin-left: 4px;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(89, 65, 52, 0.5);
}
.package-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.package-stat .figure { font-family: "Cormorant Garamond", serif; font-size: 2.4rem; }
.package-stat span:last-child { font-size: 0.85rem; color: rgba(89, 65, 52, 0.6); }
.package-credit { margin-top: 4px; font-size: 0.85rem; color: rgba(89, 65, 52, 0.6); }
.package-inherits {
  margin-top: 26px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(89, 65, 52, 0.8);
}
.package-inherits + .package-features { margin-top: 12px; }
.package-features {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.package-features li {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  color: rgba(89, 65, 52, 0.8);
  line-height: 1.4;
}
.package-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(89, 65, 52, 0.5);
}
.package-features li.addon::before { background: var(--azure); }
.package-features li.excluded {
  color: rgba(89, 65, 52, 0.4);
}
.package-features li.excluded::before { background: rgba(89, 65, 52, 0.3); }
.package-features li sup { color: var(--espresso); margin-left: 1px; }
.package-closing-note {
  margin-top: 20px;
  font-size: 0.95rem;
  color: rgba(89, 65, 52, 0.5);
}
.package-card > .btn { margin-top: 28px; width: 100%; }
.package-footnotes {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(89, 65, 52, 0.5);
}
.package-footnotes sup { color: var(--espresso); }
.package-note {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  max-width: 760px;
  font-size: 0.9rem;
  color: rgba(89, 65, 52, 0.6);
}
.package-note p + p { margin-top: 12px; }
.package-note .italic { font-style: italic; color: rgba(89, 65, 52, 0.5); }

/* Package cards: name + value-ladder + headline metrics, understandable
   within 5 seconds, ahead of the longer positioning copy and feature list. */
.package-value-ladder {
  margin-top: 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(89, 65, 52, 0.85);
}
.package-metrics {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.package-metrics .package-stat { margin-top: 0; padding-top: 0; border-top: none; }
.package-metrics .package-credit { margin-top: 0; }
.package-positioning { margin-top: 20px; font-size: 0.95rem; color: rgba(89, 65, 52, 0.7); }
.package-supporting-line {
  margin-top: 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(89, 65, 52, 0.7);
}
.package-content-model { margin-top: 18px; font-size: 0.85rem; color: rgba(89, 65, 52, 0.6); }

/* ---------- Package comparison table ---------- */
.comparison-wrap { margin-top: 80px; overflow-x: auto; }
.comparison-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.comparison-table th, .comparison-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.comparison-table th:first-child, .comparison-table td:first-child { padding-left: 0; }
.comparison-table thead th {
  border-bottom: 1px solid rgba(89, 65, 52, 0.2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(89, 65, 52, 0.6);
}
.comparison-table thead th:not(:first-child) {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--espresso);
}
.comparison-table td:not(:first-child) { text-align: center; color: rgba(89, 65, 52, 0.7); }
.comparison-table td:first-child { color: rgba(89, 65, 52, 0.8); }
.comparison-note { margin-top: 24px; max-width: 640px; font-size: 0.85rem; color: rgba(89, 65, 52, 0.5); }

/* ---------- Services page: capability categories (Social + Content /
   Photo + Video / Web + Search) ---------- */
.capability-list {
  list-style: none;
  margin: 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.capability-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.05rem; color: rgba(89, 65, 52, 0.8); }
.capability-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 10px;
  border-radius: 50%;
  background: rgba(89, 65, 52, 0.5);
  flex: none;
}

/* ---------- Services page: small "performance runs through everything"
   statement bar between the categories and the packages ---------- */
.performance-bar { border-block: 1px solid var(--line); padding-block: 70px; text-align: center; }
.performance-bar .wrap { max-width: 620px; }
.performance-bar .lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--espresso);
  margin-top: 14px;
}
.performance-bar p.supporting-sm { margin-top: 14px; color: rgba(89, 65, 52, 0.7); }

/* ---------- Services page: add-on services ("Need more?") ---------- */
.addon-intro { max-width: 62ch; margin-top: -24px; margin-bottom: 50px; font-size: 0.9rem; color: rgba(89, 65, 52, 0.6); }
.addon-grid { display: grid; grid-template-columns: 1fr; gap: 50px 60px; }
.addon-card { border-top: 1px solid var(--line); padding-top: 30px; }
.addon-card h3 { font-size: 1.5rem; }
.addon-card > p.desc { margin-top: 12px; color: rgba(89, 65, 52, 0.7); }
.addon-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.addon-list li { position: relative; padding-left: 18px; font-size: 0.92rem; color: rgba(89, 65, 52, 0.8); }
.addon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--azure);
}
.addon-groups { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 22px; }
.addon-group-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(89, 65, 52, 0.7); }
.addon-note { margin-top: 20px; font-size: 0.88rem; font-style: italic; color: rgba(89, 65, 52, 0.5); }
.addon-card .btn { margin-top: 26px; }
/* The SEO card is long enough (two full groups) to want the full row
   width instead of pairing unevenly with a much shorter card. */
.addon-card--wide { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .capability-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .addon-grid { grid-template-columns: 1fr 1fr; }
  .addon-list { grid-template-columns: 1fr 1fr; }
  .addon-groups { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .addon-card--wide .addon-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- Portfolio ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px 32px;
}
.project { grid-column: span 12; }
.project.featured { grid-column: span 12; }
.project-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--sand);
}
.project.featured .project-media { aspect-ratio: 4 / 5; }
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.project:hover .project-media img { transform: scale(1.045); }
.project-stat {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(89, 65, 52, 0.9);
  color: var(--ivory);
  padding: 12px 20px;
}
.project-stat .value { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.project-stat .label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(246, 239, 230,0.7); margin-top: 4px; }
.project-body { padding-top: 22px; }
.project-body .industry { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--espresso); }
.project-body h3 { font-size: 1.6rem; margin-top: 10px; }
.project-body p.desc { margin-top: 10px; color: rgba(89, 65, 52,0.7); }
.project-body .platforms { margin-top: 16px; font-size: 0.9rem; color: rgba(89, 65, 52,0.5); }

/* ---------- Process (dark) ---------- */
.process { background: var(--espresso); }
.process-grid {
  display: grid;
  gap: 44px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.process-step { border-top: 1px solid rgba(246, 239, 230, 0.22); padding-top: 22px; }
.process-step .num { font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--mist); font-size: 1rem; }
.process-step h3 { color: var(--ivory); font-size: 1.5rem; margin-top: 10px; }
.process-step p { color: rgba(246, 239, 230, 0.7); margin-top: 10px; max-width: 32ch; }

/* ---------- Why Brand More ---------- */
.why { background: var(--sand); }
.why-grid { display: grid; gap: 50px; }
.why h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 460px; margin-top: 20px; }
.why .intro-copy { max-width: 460px; margin-top: 30px; font-size: 1.1rem; color: rgba(89, 65, 52,0.7); }
.pillars {
  list-style: none;
  margin: 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.pillars li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.15rem; }
.pillars li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 12px;
  border-radius: 50%;
  background: rgba(89, 65, 52, 0.5);
  flex: none;
}

/* ---------- Platforms ---------- */
.platforms-bar {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-block: 1px solid var(--line);
  padding-block: 40px;
}
.platform-names { display: flex; flex-wrap: wrap; gap: 36px; }
.platform-names span {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.6rem;
  color: rgba(89, 65, 52, 0.8);
}

/* ---------- Founders ---------- */
.founders-grid { display: grid; gap: 40px; }
/* Single-founder layout: one narrow card instead of stretching across the
   two-column grid used further down for the multi-founder case. */
.founders-grid--single { max-width: 380px; }
.founder-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-name { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; margin-top: 22px; }
.founder-role { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--espresso); margin-top: 4px; }

/* ---------- CTA / contact ---------- */
.cta { background: var(--espresso); }
/* Extra top clearance for the fixed nav when this is the very first thing
   on the page (Work With Us, now that the Process section above it was
   removed) instead of the even top/bottom padding .section-pad gives it
   mid-page. */
.cta.page-top { padding-top: 150px; }
.cta-grid { display: grid; gap: 50px; }
.cta h2 { color: var(--ivory); font-size: clamp(2rem, 4.4vw, 3rem); }
.cta .intro-copy { color: rgba(246, 239, 230,0.75); margin-top: 20px; max-width: 460px; }

form.contact-form { display: grid; grid-template-columns: 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); }
.field input,
.field select,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(246, 239, 230, 0.3);
  color: var(--ivory);
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.field select option { background: var(--espresso); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mist); }
.field textarea { resize: none; }
.form-note { margin-top: 16px; font-size: 0.9rem; color: var(--mist); }
.success-box { text-align: center; max-width: 560px; margin: 0 auto; }
.success-box h2 { color: var(--ivory); font-size: clamp(2rem, 4vw, 2.8rem); margin-top: 20px; }
.success-box p { color: rgba(246, 239, 230,0.75); margin-top: 18px; font-size: 1.1rem; }
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
footer { padding-block: 60px; }
.footer-row {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-top: 1px solid var(--line);
  padding-top: 46px;
}
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand a { text-decoration: none; color: rgba(89, 65, 52, 0.7); }
.footer-logo { display: inline-flex; }
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-links { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 26px; }
.footer-links a { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: rgba(89, 65, 52, 0.7); }
.footer-links a:hover { color: var(--espresso); }
.legal-links { display: flex; gap: 26px; }
.legal-links a { font-size: 0.85rem; text-decoration: none; color: rgba(89, 65, 52, 0.45); }
.fine-print { margin-top: 40px; font-size: 0.85rem; color: rgba(89, 65, 52, 0.4); }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-links.right { margin-right: 221px; }
  .menu-toggle { display: none; }
  .why-grid, .cta-grid, .hero-grid { grid-template-columns: 1fr 1fr; }
  .founders-grid { grid-template-columns: 1fr 1fr; }
  .founders-grid.founders-grid--single { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
  .project { grid-column: span 5; }
  .project.featured { grid-column: span 7; }
  /* Tablet: a single unwrapped row needs ~1180px+ of breathing room (see
     the 1200px rule below) -- below that a 4-across flex row compresses
     unevenly, wrapping some columns to two lines while others stay one,
     which breaks the align-items:center vertical rhythm. A clean 2x2
     grid avoids that compression without falling all the way back to the
     single mobile column. */
  .footer-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 34px; align-items: start; }
}
@media (min-width: 1200px) {
  .footer-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  /* Three package cards with fairly dense bullet lists are too cramped
     as 3-across before genuine desktop width -- .three-col-cards already
     steps 1 -> 2 -> 3 across these same breakpoints elsewhere on Services,
     so bring the pricing grid in line with that instead of jumping
     straight from 1 to 3 columns at 720px. */
  .packages-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Transformation section — homepage scroll centerpiece: a mock profile
   goes straight from generic to editorial, no copy stages in between.
   Desktop (≥1024px, no reduced motion): a tall (400vh) scroll-scrubbed
   wrapper pins the full-scale mock profile card while scroll position
   (0–1, computed in app.js) drives tile colors/rotation and crossfades the
   header, then fades in one closing line once it lands. Below 1024px, or
   with prefers-reduced-motion, that's swapped for a simple stacked reveal
   with two static cards — no scroll math, no sticky pinning. See app.js
   for the interpolation.
   ========================================================================== */
.transform { background: var(--ivory); }

.transform-scroll { display: none; }
.transform-stacked { display: block; padding-block: 100px; }

@media (min-width: 1024px) {
  .transform-scroll { display: block; height: 400vh; position: relative; }
  .transform-stacked { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .transform-scroll { display: none !important; }
  .transform-stacked { display: block !important; }
}

/* Portfolio reuses this component but at its own (shorter) page length the
   interactive 400vh scroll-crossfade -- tuned against the homepage's full
   scroll distance -- left a large empty gap before the Concept Work section
   below it. .static-only forces the simple two-card static comparison at
   every width instead, same as the mobile/reduced-motion fallback. */
.transform.static-only .transform-stacked { display: block !important; }

/* items-start (align-items) + a top offset matching the fixed header's
   clearance elsewhere on the site (.hero/.page-header use the same
   150px) instead of vertically centering this box: centering it could
   push its top above the fixed header and get clipped behind it once
   scrolled in. Topping it out below the header and letting the oversized
   phone crop at the bottom (overflow: hidden) is the trade-off the
   full-phone-scale mockup asks for. */
.transform-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 150px;
  overflow: hidden;
}
.transform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 96px;
}
.transform-copy { align-self: center; }
.transform-copy h2 { margin-top: 22px; max-width: 22ch; font-size: clamp(2.2rem, 3.4vw, 3rem); }

/* Single closing line — fades/lifts in once the profile has finished
   transforming (no intermediate copy stages). */
.final-line {
  margin: 56px 0 0;
  max-width: 22ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.2;
  color: var(--espresso);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.transform-cta { margin-top: 40px; opacity: 0; pointer-events: none; }

/* ---------- Phone mockup (shared look for both the JS-driven card and
   the two static before/after cards) ---------- */
.phone-mock { width: 100%; max-width: 300px; margin-inline: auto; }
/* The desktop scroll-pinned card (#phoneMock) renders at real phone-screen
   scale instead of the small comparison-card size above — tall enough to
   read as an actual phone, capped so it never overshoots the viewport, and
   top-anchored within the grid cell so any overflow crops at the bottom
   rather than shrinking the mockup to fit. */
.phone-mock.large {
  width: auto;
  height: clamp(540px, 82vh, 780px);
  max-width: none;
  aspect-ratio: 9 / 19.5;
  margin-inline: 0;
  justify-self: center;
  align-self: start;
}
.phone-mock.large .phone-frame { height: 100%; }
/* Tiles keep the same fixed ratio (inherited from .mock-tile, below) even
   at full phone scale — stretching them to fill the taller screen (via
   flex/1fr rows) forced a second, unpredictable crop on top of the
   deliberate per-photo crop, which is what was cutting off text. The tab
   bar's own margin-top: auto absorbs any leftover height below the grid
   instead. */
.phone-mock.large .phone-screen { height: 100%; display: flex; flex-direction: column; }
.phone-frame {
  position: relative;
  border: 6px solid var(--espresso);
  border-radius: 2.75rem;
  background: var(--ivory);
  padding: 8px;
  box-shadow: 0 30px 60px -20px rgba(89, 65, 52, 0.35);
}
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: rgba(89, 65, 52, 0.25);
}
.phone-screen {
  border-radius: 2.1rem;
  overflow: hidden;
  padding: 28px 20px 20px;
}
.mock-header { display: flex; align-items: center; gap: 16px; }
.mock-avatar {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c9c9c9;
  box-shadow: 0 0 0 2px var(--ivory);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Real before/after profile photos (Christian Drake case study only) --
   sit inside the same circle the generic template colors, cropped to
   fill it via object-fit and crossfaded exactly like the grid tiles. */
.mock-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-photo-before { opacity: 1; transition: opacity 0.3s ease; }
.avatar-photo-after { opacity: 0; transition: opacity 0.3s ease; }
.mock-avatar span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ivory);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.crossfade { display: grid; }
.crossfade > * { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.mock-id { flex: 1; min-width: 0; overflow: hidden; }
.mock-handle-before { font-size: 0.95rem; font-weight: 600; color: rgba(89, 65, 52, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; }
.mock-handle-after { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1rem; color: var(--espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.mock-bio { margin: 14px 0 0; }
.mock-bio span { font-size: 0.88rem; line-height: 1.4; }
#mockBioBefore, .bio-before { color: rgba(89, 65, 52, 0.6); opacity: 1; }
#mockBioAfter, .bio-after { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1rem; color: var(--espresso); opacity: 0; }

/* Story-highlights row + bottom tab bar — only used on the large desktop
   mockup, to fill out the extra vertical space realistically. Generic
   shapes (not literal Instagram icons), purely decorative. */
.mock-highlights {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}
.mock-highlights span {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #dadada;
  box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3px rgba(89, 65, 52, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.mock-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 16px 12px 0;
  border-top: 1px solid rgba(89, 65, 52, 0.1);
}
.mock-tabbar .dot { width: 14px; height: 14px; border-radius: 999px; background: rgba(89, 65, 52, 0.2); }
.mock-tabbar .square { width: 20px; height: 20px; border-radius: 6px; background: rgba(89, 65, 52, 0.25); }

.mock-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.mock-tile {
  position: relative;
  /* Matches the real grid's tile shape (measured off the reference
     screenshot: 1260x1674 -> 3x3 -> 420x558 per tile), not a plain square. */
  aspect-ratio: 420 / 558;
  background: #ff5a5f;
  box-shadow: inset 0 0 0 1px rgba(89, 65, 52, 0.08);
  transition: background-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.mock-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mock-tile .tile-photo-before,
.mock-tile .tile-photo-after { transition: opacity 0.3s ease; }
.mock-tile .tile-photo-after { opacity: 0; }
.mock-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  transform: rotate(-6deg);
  background: var(--ivory);
  color: var(--espresso);
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 2px;
  transition: opacity 0.3s ease;
}

/* Static before/after label badge — reused above the tap phone below. */
.transform-static-label { margin-bottom: 16px; text-align: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.transform-static-label.before { color: rgba(89, 65, 52, 0.5); }
.transform-static-label.after { color: var(--espresso); }
.transform-stacked .phone-frame { box-shadow: 0 20px 40px -18px rgba(89, 65, 52, 0.3); }
.transform-stacked .mid-stage,
.transform-stacked .final-stage {
  margin: 48px 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--espresso);
}
.transform-stacked .final-stage { margin-bottom: 24px; }
.transform-stacked .final-cta { display: flex; justify-content: center; }

/* ---------- Tap-to-toggle transformation (mobile/tablet + reduced-motion) ----------
   One interactive phone instead of two static before/after phones -- reuses
   the exact same crossfade markup and transitions as the desktop scroll
   version (mock-avatar, mock-handle-before/after, bio-before/after,
   tile-photo-before/after, mock-badge), just toggled by a click/tap instead
   of scroll position. See setupTransformTap() in app.js. */
.transform-tap-card { text-align: center; }
.transform-tap-state { margin-bottom: 16px; }
.transform-tap-state .after { opacity: 0; }

.transform-tap-phone {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.transform-tap-phone .phone-frame { transition: transform 0.2s var(--ease); }
.transform-tap-phone:active .phone-frame { transform: scale(0.985); }
.transform-tap-phone:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 8px;
  border-radius: 2.75rem;
}

.transform-tap-hint {
  margin-top: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(89, 65, 52, 0.6);
}
.transform-tap-hint .tap-hint-after { opacity: 0; }

/* Toggled ("after") state -- flips every before/after pair at once via one
   class on the card, letting each element's own already-declared
   transition (opacity/background-color, 0.3s ease) do the crossfade. */
.transform-tap-card.is-after .mock-avatar { background: var(--espresso); }
.transform-tap-card.is-after .mock-avatar span { opacity: 1; }
.transform-tap-card.is-after .avatar-photo-before { opacity: 0; }
.transform-tap-card.is-after .avatar-photo-after { opacity: 1; }
.transform-tap-card.is-after .mock-handle-before { opacity: 0; }
.transform-tap-card.is-after .mock-handle-after { opacity: 1; }
.transform-tap-card.is-after .bio-before { opacity: 0; }
.transform-tap-card.is-after .bio-after { opacity: 1; }
.transform-tap-card.is-after .tile-photo-before { opacity: 0; }
.transform-tap-card.is-after .tile-photo-after { opacity: 1; }
.transform-tap-card.is-after .mock-badge { opacity: 0; }
.transform-tap-card.is-after .transform-tap-state .before { opacity: 0; }
.transform-tap-card.is-after .transform-tap-state .after { opacity: 1; }
.transform-tap-card.is-after .transform-tap-hint .tap-hint-before { opacity: 0; }
.transform-tap-card.is-after .transform-tap-hint .tap-hint-after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .transform-tap-phone .phone-frame { transition: none; }
  .transform-tap-phone:active .phone-frame { transform: none; }
}

/* ==========================================================================
   Brand word treatment — mirrors src/components/BrandTagline.tsx /
   BrandMention.tsx / BrandWord.tsx. "Brand"/"BRAND" and "More" get no
   special styling at all wherever they're mentioned (the tagline, "Brand
   More" mentions, package names) — removed site-wide per direct
   feedback that the two-tone logo color split read as too busy applied
   across body copy, list items, and fine print. Every such mention is
   now plain text, styled the same as the copy around it. The .brand-tagline
   class is kept on the two "Branding and more." headings only as an
   inert marker (no rules target it anymore). */

/* ---------- Problem / Local / Final CTA (simple centered statement sections) ---------- */
.statement-centered { padding-block: clamp(70px, 9vw, 110px); text-align: center; }
.statement-centered .wrap { max-width: 720px; }
.statement-centered h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.statement-centered p.supporting { max-width: 60ch; margin: 22px auto 0; font-size: 1.1rem; color: rgba(89, 65, 52, 0.7); }
.statement-centered.on-dark { background: var(--espresso); }
.statement-centered.on-dark h2 { color: var(--ivory); }
.statement-centered.on-dark p.supporting { color: rgba(246, 239, 230, 0.7); }
.statement-centered .btn { margin-top: 8px; }

/* ---------- One Partner grid ---------- */
.partner-grid {
  display: grid;
  gap: 40px 32px;
  margin-top: 60px;
  grid-template-columns: 1fr;
}
.partner-grid > div { border-top: 1px solid var(--line); padding-top: 22px; }
.partner-grid h3 { font-size: 1.5rem; }
.partner-grid p { margin-top: 10px; color: rgba(89, 65, 52, 0.7); }

/* ---------- Services / preview groups (4-up cards) ---------- */
.group-grid {
  display: grid;
  gap: 34px;
  margin-top: 60px;
  grid-template-columns: 1fr;
}
.group-grid > div { border-top: 1px solid var(--line); padding-top: 22px; }
.group-grid h3 { font-size: 1.5rem; }
.group-grid p { margin-top: 10px; color: rgba(89, 65, 52, 0.7); }

/* ---------- Small inline "Learn more" links (service-preview cards,
   related-service cross-links on the new service pages) ---------- */
.text-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--espresso);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(89, 65, 52, 0.35);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.text-link:hover { color: var(--azure); text-decoration-color: var(--azure); }

/* ---------- Preview sections (Portfolio preview / Natalie preview) ---------- */
.preview-split {
  display: grid;
  gap: 48px;
  align-items: center;
}
.preview-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.preview-media.portrait { aspect-ratio: 4 / 5; max-width: 380px; }
.preview-media img { width: 100%; height: 100%; object-fit: cover; }
.section-pad .btn.preview-cta { margin-top: 48px; }

/* ---------- Concept Work badge ---------- */
.project-badge {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(89, 65, 52, 0.9);
  color: var(--ivory);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 16px;
}

/* ---------- About: founder story + beliefs ---------- */
.founder-story-grid { display: grid; gap: 48px; align-items: start; }
.founder-story-photo { aspect-ratio: 4 / 5; max-width: 380px; overflow: hidden; background: var(--sand); }
.founder-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-story-credentials {
  list-style: none;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.founder-story-credentials li { position: relative; padding-left: 18px; color: rgba(89, 65, 52, 0.8); }
.founder-story-credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(89, 65, 52, 0.5);
}

.beliefs-list { list-style: none; margin: 0; padding-top: 30px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 30px; }
.beliefs-list li { display: flex; align-items: flex-start; gap: 18px; }
.beliefs-list .num { font-family: "Cormorant Garamond", serif; font-style: italic; color: rgba(89, 65, 52, 0.5); font-size: 1.1rem; flex: none; }
.beliefs-list p { font-size: 1.1rem; color: rgba(89, 65, 52, 0.85); margin: 0; }

/* ---------- Services page: website services + SEO ---------- */
.two-col-cards, .three-col-cards {
  display: grid;
  gap: 40px;
  margin-top: 60px;
  grid-template-columns: 1fr;
}
.two-col-cards > div, .three-col-cards > div { border-top: 1px solid var(--line); padding-top: 22px; }
.two-col-cards h3, .three-col-cards h3 { font-size: 1.5rem; }
.two-col-cards p, .three-col-cards p { margin-top: 10px; color: rgba(89, 65, 52, 0.7); }
.price-tbd { margin-top: 14px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(89, 65, 52, 0.5); }

/* ---------- FAQ (reuses the accordion look from .service-row) ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-row { border-bottom: 1px solid var(--line); }
.faq-row button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 28px 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.faq-row .question { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; }
.faq-row .icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(89, 65, 52, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.faq-row.open .icon { transform: rotate(45deg); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq-row.open .faq-panel { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; }
.faq-panel p { max-width: 62ch; padding-bottom: 28px; color: rgba(89, 65, 52, 0.7); }

/* ---------- Contact form: services checkbox group ---------- */
.field-group { display: flex; flex-direction: column; gap: 14px; }
.field-group > span.group-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); }
.checkbox-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.checkbox-grid label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: rgba(246, 239, 230, 0.85); }
.checkbox-grid input[type="checkbox"] { margin-top: 3px; accent-color: var(--mist); }

@media (min-width: 720px) {
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
  .group-grid { grid-template-columns: repeat(2, 1fr); }
  .preview-split { grid-template-columns: 1fr 1fr; }
  .founder-story-grid { grid-template-columns: 0.85fr 1.15fr; }
  .two-col-cards { grid-template-columns: repeat(2, 1fr); }
  .three-col-cards { grid-template-columns: repeat(3, 1fr); }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .group-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Homepage — Hero secondary headline ("Because your brand deserves more.")
   Sits between the h1 and the lede paragraph as a subordinate but strong
   statement. Serif, not italic, sized well below the h1 so hierarchy stays
   clear (h1 > hero-subhead > lede).
   ========================================================================== */
.hero-subhead {
  margin-top: 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  color: var(--espresso);
}
.hero-subhead.on-dark { color: var(--mist); }

/* ==========================================================================
   Homepage — "Our Purpose" section (replaces the old "The Challenge" block)
   ========================================================================== */
.purpose .section-head { margin-bottom: 0; }
.purpose .section-head h2 { max-width: 22ch; font-size: clamp(2rem, 4.4vw, 3.1rem); }
.purpose-body { margin-top: 40px; max-width: 640px; }
.purpose-emphasis {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  color: var(--espresso);
  padding-left: 22px;
  border-left: 2px solid var(--azure);
  margin: 0 0 28px;
}
.purpose-body p.supporting { margin-top: 18px; }
.purpose-body p.supporting:first-of-type { margin-top: 0; }

/* ==========================================================================
   Homepage — "What it means to Brand More" interactive cards.
   Mobile/tablet: headline + body shown together, no hover dependency.
   Desktop (≥1024px): fixed-height card; the body's row height animates via
   the same grid-template-rows 0fr→1fr technique used by .faq-panel, and
   because the title+body stack is vertically centered with flexbox, the
   headline glides toward the top on its own as the body's row grows —
   no separate transform math needed on the title itself.
   ========================================================================== */
.meaning-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
.meaning-card { background: var(--ivory); border: 1px solid var(--line); }
.meaning-card-stack { padding: 34px 30px; }
.meaning-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}
.meaning-card-reveal { display: grid; grid-template-rows: 1fr; }
.meaning-card-reveal-inner { overflow: hidden; }
.meaning-card-body {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(89, 65, 52, 0.72);
}

@media (min-width: 720px) {
  .meaning-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .meaning-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .meaning-card {
    position: relative;
    height: 380px;
    overflow: hidden;
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  }
  .meaning-card-stack {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 40px;
  }
  .meaning-card-reveal {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s var(--ease);
  }
  .meaning-card-body {
    margin-top: 0;
    padding-top: 18px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease) 0.08s, transform 0.5s var(--ease) 0.08s;
  }
  .meaning-card:hover,
  .meaning-card:focus-within {
    background: var(--sand);
    border-color: rgba(89, 65, 52, 0.32);
  }
  .meaning-card:hover .meaning-card-reveal,
  .meaning-card:focus-within .meaning-card-reveal {
    grid-template-rows: 1fr;
  }
  .meaning-card:hover .meaning-card-body,
  .meaning-card:focus-within .meaning-card-body {
    opacity: 1;
    transform: translateY(0);
  }
  .meaning-card:focus-within { box-shadow: inset 0 0 0 2px var(--azure); }
  .meaning-card:focus-within:not(:focus-visible) { box-shadow: none; }
}

/* ==========================================================================
   Work With Us — after a successful submission (see assets/app.js), the
   two-column contact layout collapses to one column and the intro copy is
   hidden, so only the confirmation message remains, centered in the
   section (.success-box already carries its own max-width + margin:auto).
   ========================================================================== */
.cta-grid.is-success { grid-template-columns: 1fr; }

/* ==========================================================================
   Brand More — company-name color treatment (mirrors the logo's own
   two-tone "br[and] more." lockup). Deliberately a hand-placed class, NOT
   a blanket selector on the word "brand" — apply .brand-and only around
   the "and" inside "Brand" when "Brand More" is being used together as
   the company name (e.g. "<span class=brand-and>and</span>"). Ordinary
   sentence uses of "brand"/"Brand" stay completely unstyled.
   Sampled directly from the logo PNGs: "and" is the same flat --azure
   (#A4AEB6) in both the light- and dark-background logo variants, so this
   is one flat color rather than an on-dark/light pair like .eyebrow uses.
   ========================================================================== */
.brand-and { color: var(--azure); }

/* ---------- Footer — small "Based in Boca Raton" line ---------- */
.footer-location { font-size: 0.85rem; color: rgba(89, 65, 52, 0.5); }

/* ==========================================================================
   Portfolio — case-study hub (3-card grid + individual case study pages)
   ========================================================================== */

/* ---------- Case-study card grid (Portfolio page) ---------- */
.case-study-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .case-study-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .case-study-grid { grid-template-columns: repeat(3, 1fr); }
}

.case-study-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--espresso);
  text-decoration: none;
  color: var(--ivory);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.case-study-card:hover,
.case-study-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -22px rgba(89, 65, 52, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .case-study-card:hover, .case-study-card:focus-visible { transform: none; }
}

.case-study-media { position: absolute; inset: 0; }
.case-study-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transform: scale(1.04);
  transition: opacity 0.7s var(--ease), transform 1.2s var(--ease);
}
.case-study-card:hover .case-study-media img,
.case-study-card:focus-visible .case-study-media img {
  opacity: 0.75;
  transform: scale(1.1);
}

.case-study-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(89, 65, 52, 0.22) 0%, rgba(89, 65, 52, 0.28) 45%, rgba(89, 65, 52, 0.78) 100%);
  transition: background 0.5s ease;
}
.case-study-card:hover .case-study-overlay,
.case-study-card:focus-visible .case-study-overlay {
  background: linear-gradient(190deg, rgba(89, 65, 52, 0.16) 0%, rgba(89, 65, 52, 0.22) 45%, rgba(89, 65, 52, 0.74) 100%);
}

.case-study-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
}
.case-study-content .eyebrow { margin-bottom: 14px; }
.case-study-content h3 { font-size: clamp(1.9rem, 3vw, 2.4rem); color: var(--ivory); }

.case-study-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ivory);
  opacity: 0.75;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.case-study-card:hover .case-study-cta,
.case-study-card:focus-visible .case-study-cta { opacity: 1; transform: translateY(0); }
.case-study-cta .arrow { display: inline-block; transition: transform 0.3s ease; }
.case-study-card:hover .case-study-cta .arrow,
.case-study-card:focus-visible .case-study-cta .arrow { transform: translateX(4px); }

/* "Coming Soon" placeholder cards — same footprint as the live card, but a
   neutral brand-gradient treatment (no stock photography) with a faint
   oversized index number, echoing the italic numeral motif used elsewhere
   on the site (.process-step .num, .beliefs-list .num). Not a link. */
.case-study-card--placeholder {
  cursor: default;
  background: linear-gradient(165deg, var(--espresso) 0%, #4c3931 55%, var(--espresso) 100%);
}
.case-study-card--placeholder:hover,
.case-study-card--placeholder:focus-visible {
  transform: none;
  box-shadow: none;
}
.case-study-card--placeholder .case-study-content {
  align-items: center;
  text-align: center;
}
.case-study-card--placeholder .eyebrow { justify-content: center; }
.case-study-card--placeholder h3 { font-style: italic; color: rgba(246, 239, 230, 0.92); }
.case-study-card-number {
  position: absolute;
  top: 12px;
  right: 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 5.5rem;
  color: rgba(246, 239, 230, 0.08);
  line-height: 1;
  pointer-events: none;
}

/* ---------- Case study page: "Back to Portfolio" wayfinding ---------- */
.case-study-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(89, 65, 52, 0.55);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}
.case-study-back:hover { color: var(--espresso); gap: 12px; }
.case-study-back.on-dark { color: rgba(246, 239, 230, 0.6); }
.case-study-back.on-dark:hover { color: var(--ivory); }

/* ---------- Case study page: intro / meta line ---------- */
.case-study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-top: 18px;
  font-size: 0.92rem;
  color: rgba(89, 65, 52, 0.6);
}
.case-study-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(89, 65, 52, 0.4); flex: none; }
.case-study-intro-lead {
  margin-top: 34px;
  max-width: 30ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.28;
  color: var(--espresso);
}

/* ---------- Case study page: Brand More Approach (copy + phone) ---------- */
.approach-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 720px) {
  .approach-grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* Gentle, restrained "product presentation" motion for the case-study
   phone mockup: a slow floating drift plus a soft image crossfade cycling
   through the client's real posts (driven by setupCaseStudyPhone() in
   app.js). No bounce, spin, or scaling. */
.case-study-phone { animation: caseStudyFloat 7s ease-in-out infinite; }
@keyframes caseStudyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .case-study-phone { animation: none; }
}
.case-study-phone-post {
  position: relative;
  margin-top: 20px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.case-study-phone-post img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.case-study-phone-post img.active { opacity: 1; }

/* ---------- Case study page: "The Work" editorial grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 60px;
}
.work-tile { grid-column: span 6; }
.work-tile.work-tile--lead { grid-column: span 6; }
.work-tile-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.work-tile.work-tile--lead .work-tile-media { aspect-ratio: 4 / 3; }
.work-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.work-tile:hover .work-tile-media img { transform: scale(1.045); }
.work-tile-caption {
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(89, 65, 52, 0.6);
}
@media (min-width: 720px) {
  .work-tile { grid-column: span 3; }
  .work-tile.work-tile--lead { grid-column: span 4; }
  .work-tile.work-tile--tall { grid-column: span 2; }
  .work-tile.work-tile--tall .work-tile-media { aspect-ratio: 4 / 5; height: 100%; }
}

/* ---------- Case study page: Results (oversized metrics) ---------- */
.metrics-section { background: var(--espresso); }
.metrics-groups {
  display: grid;
  gap: 56px;
  margin-top: 64px;
}
@media (min-width: 720px) {
  .metrics-groups { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.metrics-month-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--mist);
  margin-bottom: 26px;
}
.metrics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.metric { border-top: 1px solid rgba(246, 239, 230, 0.22); padding-top: 22px; }
.metric .figure {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.8rem, 6.5vw, 4.6rem);
  line-height: 1;
  color: var(--ivory);
}
.metric .metric-label {
  display: block;
  margin-top: 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(246, 239, 230, 0.65);
}
.metrics-note {
  margin-top: 48px;
  font-size: 0.85rem;
  color: rgba(246, 239, 230, 0.5);
  max-width: 56ch;
}


/* ========== Case study — Approach section's animated iPhone ==========
   Reuses the homepage's .transform-scroll / .transform-sticky / phone-mock
   structure and its setupTransformation() JS verbatim (same #transformScroll,
   #phoneMock, #mockGrid, #mockAvatar, #mockAvatarMark ids -- a separate page
   load, so no collision with the homepage). Only the outer wrapper is scoped
   here, at a shorter scroll distance sized for an in-article placement
   instead of a full-page hero -- 400vh here left a huge empty gap before the
   next section on a page this much shorter than the homepage. */
.case-study-transform-scroll { display: none; }
.case-study-transform-stacked { display: block; padding-block: 64px; }
@media (min-width: 1024px) {
  .case-study-transform-scroll { display: block; height: 220vh; position: relative; }
  .case-study-transform-stacked { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .case-study-transform-scroll { display: none !important; }
  .case-study-transform-stacked { display: block !important; }
}
/* .transform-sticky is a flex row built for a 2-column copy+phone pairing
   on the homepage; this component only has the phone, so just center it. */
.case-study-transform-sticky { justify-content: center; }