/* Coco Jackson: teal, blue, fuchsia and orange, drawn from her photography. */

:root,
[data-theme='light'] {
  --color-bg: #fffaf7;
  --color-surface: #fbeef2;
  --color-surface-2: #f3fbfb;
  --color-surface-offset: #fff1e6;
  --color-divider: #d9e7e8;
  --color-border: #c1d6da;
  --color-text: #193744;
  --color-text-muted: #4f6670;
  --color-text-faint: #566970;
  --color-text-inverse: #ffffff;
  --color-primary: #b33368;
  --color-primary-hover: #94274f;
  --color-primary-active: #b33368;
  --color-primary-highlight: #fbe3ed;
  --color-ruby: #007b88;
  --color-blush: #f6b4cf;
  --color-tan: #f3a066;
  --color-light-blue: #d7eaf8;
  --color-contact-bg: #007586;
  --color-contact-text: #ffffff;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
}

[data-theme='dark'] {
  --color-bg: #102c35;
  --color-surface: #193e48;
  --color-surface-2: #153741;
  --color-surface-offset: #513823;
  --color-divider: #37616b;
  --color-border: #477784;
  --color-text: #fffaf7;
  --color-text-muted: #d6e7e9;
  --color-text-faint: #b6cdd1;
  --color-text-inverse: #102c35;
  --color-primary: #f5a6c3;
  --color-primary-hover: #94274f;
  --color-primary-active: #b33368;
  --color-primary-highlight: #65354c;
  --color-ruby: #79d3de;
  --color-blush: #f6b4cf;
  --color-tan: #f3a066;
  --color-light-blue: #99cdf1;
  --color-contact-bg: #005c6a;
  --color-contact-text: #ffffff;
}

/* Type scale */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
}

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  scroll-padding-top: var(--space-16);
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  line-height: 1.15;
}

p,
li,
figcaption {
  text-wrap: pretty;
  max-width: 72ch;
}

::selection {
  background: oklch(from var(--color-primary) l c h / 0.25);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a,
button,
[role='button'],
[role='link'],
input,
textarea,
select {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

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

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(from var(--color-bg) l c h / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-3) var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-ruby);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}

.nav a.btn {
  color: #ffffff;
}

.nav a:hover {
  color: var(--color-ruby);
}

.nav a.btn:hover {
  color: #ffffff;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

.theme-toggle:hover {
  background: var(--color-surface);
  color: var(--color-ruby);
}

@media (max-width: 767px) {
  .nav {
    gap: var(--space-4);
  }
  .nav li:nth-child(1),
  .nav li:nth-child(3) {
    display: none;
  }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  transition: color .2s ease-in-out, border-color .2s ease-in-out, background .2s ease-in-out;
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.375;
}

.btn-solid-coral {
  background-color: var(--color-primary-active);
  color: #ffffff;
}

.btn-solid-coral:hover {
  background-color: var(--color-primary-hover);
}

.btn-hollow-ruby {
  border: 1px solid var(--color-ruby);
  color: var(--color-ruby);
  background-color: transparent;
}

.btn-hollow-ruby:hover {
  background-color: var(--color-ruby);
  color: var(--color-text-inverse);
}

/* ===== Hero ===== */
.hero {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  background-color: var(--color-surface-2);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-ruby);
}

.hero-title .accent {
  color: var(--color-primary);
}

.hero-lede {
  font-size: var(--text-lg);
  max-width: 55ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero-figure {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}

.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-figure {
    max-width: 420px;
  }
}

/* ===== Proof strip ===== */
.proof-strip {
  background: var(--color-surface);
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
  border-block: 1px solid var(--color-divider);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.stats-row dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ruby);
  margin-bottom: var(--space-2);
}

.stat {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

.stat-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 28ch;
}

.source-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 72ch;
  margin-top: var(--space-8);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.source-note a,
.hero-note a,
.contact-note a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hero-note a:hover,
.source-note a:hover {
  color: var(--color-primary);
}

.tiktok-proof {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
}

.tiktok-proof h3 {
  font-size: var(--text-lg);
  color: var(--color-ruby);
  margin-bottom: var(--space-3);
}

.tiktok-proof .source-note {
  margin: var(--space-3) 0 0;
  padding: 0;
}

.tiktok-stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.tiktok-stats dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

@media (max-width: 1000px) {
  .stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .stats-row,
  .tiktok-proof {
    grid-template-columns: 1fr;
  }
  .header nav {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .btn-sm {
    padding-inline: var(--space-3);
  }
}

/* ===== Sections ===== */
.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

.section-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-md);
  align-self: start;
}

.section-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-copy.narrow {
  max-width: 640px;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ruby);
  margin-bottom: var(--space-3);
}

.lede {
  font-size: var(--text-lg);
  font-weight: 500;
  max-width: 60ch;
}

.subheading {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-2);
}

.pillars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pillars li {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-tan);
}

.pillars strong {
  color: var(--color-ruby);
}

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}

/* ===== Demo grid ===== */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.demo-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.demo-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.demo-card figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-3);
}

/* ===== Proof grid ===== */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.proof-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proof-card dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ruby);
}

.proof-detail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.callout {
  background: var(--color-surface-offset);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-8);
  max-width: 640px;
}

/* ===== Offer grid ===== */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.offer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.offer-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ruby);
}

.offer-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.offer-card li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  position: relative;
}

.offer-card li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-tan);
}

/* ===== Steps ===== */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
  max-width: 640px;
}

.steps li {
  display: flex;
  gap: var(--space-4);
  align-items: start;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 700;
  flex-shrink: 0;
}

.steps h3 {
  font-size: var(--text-base);
  font-weight: 700;
}

.steps p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===== Gallery ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.gallery-tall {
  grid-row: span 2;
}

.gallery-tall img {
  aspect-ratio: auto;
  height: 100%;
}

.gallery-wide {
  grid-column: span 2;
}

.gallery-wide img {
  aspect-ratio: 16/9;
}

/* ===== Contact ===== */
.contact {
  background: var(--color-contact-bg);
  color: var(--color-contact-text);
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.contact-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.contact-copy p {
  color: var(--color-contact-text);
  max-width: 48ch;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.contact-note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-contact-text);
}

.contact-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}

.contact-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact .btn-solid-coral {
  background: var(--color-tan);
  color: #193744;
}

.contact .btn-solid-coral:hover {
  background: var(--color-blush);
  color: #193744;
}

.contact .btn-hollow-ruby {
  border: 1px solid var(--color-contact-text);
  color: var(--color-contact-text);
}

.contact .btn-hollow-ruby:hover {
  background: oklch(from var(--color-contact-text) l c h / 0.15);
  border-color: var(--color-contact-text);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Footer ===== */
.footer {
  background: var(--color-bg);
  padding-block: var(--space-8);
  text-align: center;
}

.footer p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .section-grid {
    grid-template-columns: 1fr;
  }
  .section-figure {
    max-width: 420px;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-tall,
  .gallery-wide {
    grid-row: auto;
    grid-column: auto;
  }
}

.pdf-download{display:inline-flex;align-items:center;gap:12px;margin-top:18px;color:var(--color-ruby);font-weight:700;font-size:15px;text-underline-offset:5px}.contact .pdf-download{color:#fff}a:focus-visible,button:focus-visible{outline:3px solid var(--color-primary);outline-offset:5px}section[id]{scroll-margin-top:110px}@media(max-width:650px){section[id]{scroll-margin-top:155px}.hero-actions,.contact-actions{flex-wrap:wrap}.contact-actions a{overflow-wrap:anywhere;max-width:100%}}

.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:var(--content-wide);margin:32px auto 0;padding:0 var(--space-6);list-style:none}
.services-grid li{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:26px 24px;color:var(--color-ruby);font-weight:700;font-size:var(--text-lg);line-height:1.4}
.services-actions{max-width:var(--content-wide);margin:28px auto 0;padding:0 var(--space-6)}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{gap:12px}}
@media(max-width:650px){.services-grid{grid-template-columns:1fr}.nav{flex-wrap:wrap;justify-content:flex-start}.nav li:last-child{margin-left:auto}.nav a{font-size:13px}}

/* A brighter creator identity: distinct colors with room for the photographs. */
:root{--color-blue:#1768ac;--color-orange:#c35b20}
.hero{background:linear-gradient(115deg,var(--color-bg) 0%,var(--color-surface-2) 70%);border-bottom:7px solid var(--color-tan)}
.hero-title{color:var(--color-blue)}
.hero-title .accent{color:var(--color-primary)}
.hero-figure{box-shadow:16px 16px 0 var(--color-tan);border:4px solid var(--color-bg)}
.header{border-top:5px solid transparent;border-image:linear-gradient(90deg,#007b88 0% 25%,#1768ac 25% 50%,#b33368 50% 75%,#ef914f 75%) 1}
.brand{color:var(--color-primary)}
.proof-strip{background:var(--color-surface-2)}
.stats-row>div{border-top:4px solid var(--color-ruby);padding-top:16px}
.stats-row>div:nth-child(2){border-color:var(--color-blue)}
.stats-row>div:nth-child(3){border-color:var(--color-primary)}
.stats-row>div:nth-child(4){border-color:var(--color-orange)}
.stats-row>div:nth-child(5){border-color:var(--color-ruby)}
#meet .section-title,#offer .section-title{color:var(--color-primary)}
#reach .section-title,#gallery .section-title{color:var(--color-blue)}
.proof-card{border-top:4px solid var(--color-ruby)}
.proof-card:nth-child(2){border-top-color:var(--color-blue);background:var(--color-light-blue)}
.proof-card:nth-child(3){border-top-color:var(--color-orange);background:var(--color-surface-offset)}
.services-section{background:var(--color-surface-2)}
.services-grid li{border-left:5px solid var(--color-ruby)}
.services-grid li:nth-child(3n+2){border-left-color:var(--color-primary)}
.services-grid li:nth-child(3n){border-left-color:var(--color-orange)}
.offer-card:nth-child(2){border-top:4px solid var(--color-blue)}
.offer-card:nth-child(3){border-top:4px solid var(--color-orange)}
.offer-card:nth-child(4){border-top:4px solid var(--color-primary)}
.contact{border-top:7px solid var(--color-tan)}
[data-theme='dark']{--color-blue:#99cdf1;--color-orange:#f3a066;--color-light-blue:#234e63}
@media(max-width:650px){.hero-figure{box-shadow:8px 8px 0 var(--color-tan)}}

/* Keep the entire head visible in the opening portrait at every viewport. */
.hero-figure img{object-position:center top}

/* Roomier responsive composition for the recreated partnership site. */
:root{--content-wide:1320px}
.header{background:var(--color-bg)}
.header nav{gap:20px}
.brand{flex-shrink:0;text-decoration:none}
.nav{flex-wrap:wrap;justify-content:flex-end;gap:18px}
.theme-toggle{flex-shrink:0}
.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.hero-copy,.section-copy,.contact-copy,.section-grid>*{min-width:0}
.hero-figure{aspect-ratio:auto}
.hero-figure img{height:auto;object-fit:contain;object-position:center top}
.section{padding-block:clamp(64px,7vw,112px)}
.services-grid,.services-actions{padding-inline:0}
.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.offer-card{padding:32px}
.tiktok-stats{flex-wrap:wrap}
@media(max-width:1100px){.header nav{flex-wrap:wrap}.nav{order:3;width:100%;justify-content:center}.theme-toggle{margin-left:auto}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-figure{max-width:560px;width:100%}.section-grid{gap:40px}}
@media(max-width:650px){.header{position:relative}.header nav,.hero-grid,.section,.stats-row,.contact-grid{padding-inline:20px}.nav{justify-content:flex-start;gap:12px 18px}.nav li:nth-child(1),.nav li:nth-child(3){display:list-item}.nav li:last-child{margin-left:0;width:100%}.nav a.btn{display:block;padding:12px}.hero{padding-block:44px}.offer-grid,.proof-grid,.demo-grid{grid-template-columns:minmax(0,1fr)}.offer-card{padding:24px}.stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.stats-row>div:last-child{grid-column:1/-1}.hero-title{font-size:clamp(36px,9vw,56px)}section[id]{scroll-margin-top:24px}}

/* Audience figures lead the proof strip. */
.proof-strip .stat{font-size:clamp(2.5rem,4.2vw,4rem);line-height:1.15;letter-spacing:-.025em;color:var(--color-ruby)}
.stats-row>div:nth-child(2) .stat{color:var(--color-blue)}
.stats-row>div:nth-child(3) .stat{color:var(--color-primary)}
.stats-row>div:nth-child(4) .stat{color:var(--color-orange)}
.proof-strip .stat-note{margin-top:12px}
.proof-strip{padding-block:clamp(36px,4vw,56px)}
@media(max-width:650px){.proof-strip .stat{font-size:clamp(2.3rem,9vw,3.3rem)}}

/* Compact performance highlights for brand partners. */
#proof .section-copy{max-width:none;gap:8px}
#proof .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
#proof .proof-card{padding:28px;background:var(--color-surface-2);border-radius:20px;gap:12px}
#proof .proof-card:nth-child(2){background:var(--color-light-blue)}
#proof .proof-card:nth-child(3){background:var(--color-surface-offset)}
#proof .proof-card dt{display:flex;align-items:center;gap:12px;letter-spacing:.02em}
.platform-logo{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;flex-shrink:0}
.platform-logo svg{width:30px;height:30px}
.instagram{color:var(--color-primary)}.facebook{color:var(--color-blue)}.tiktok{color:var(--color-text)}
#proof .stat{font-size:clamp(3rem,5vw,4.75rem);line-height:1.1;letter-spacing:-.035em;color:var(--color-primary)}
#proof .proof-card:nth-child(2) .stat{color:var(--color-blue)}
#proof .proof-card:nth-child(3) .stat{color:var(--color-orange)}
#proof .proof-card p{font-size:14px;line-height:1.7}
#proof .tiktok-proof{margin-top:24px;padding:24px 28px;border:1px solid var(--color-divider);border-radius:20px;background:var(--color-bg);align-items:center}
#proof .tiktok-proof h3{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:20px}
#proof .tiktok-proof p{font-size:14px}
#proof .tiktok-stats{justify-content:flex-end;gap:32px}
#proof .tiktok-stats .stat{font-size:clamp(2.5rem,4vw,3.5rem);color:var(--color-ruby)}
@media(max-width:900px){#proof .proof-grid{grid-template-columns:1fr}#proof .tiktok-proof{grid-template-columns:1fr}#proof .tiktok-stats{justify-content:flex-start}}

/* Close the gap after the biography's removed quote. */
#meet{padding-bottom:28px}
#reach{padding-top:36px}
#meet .source-note{margin-top:8px;margin-inline:0;padding-inline:0}

/* Align performance cards with shared rows and equal detail spacing. */
#proof .proof-grid{align-items:stretch}
#proof .proof-card{display:grid;grid-template-rows:52px auto 24px 1fr;align-content:start;gap:10px;padding:28px;border-top-width:4px}
#proof .proof-card dt{height:52px;align-self:start}
#proof .proof-card dd{margin:0}
#proof .proof-card .metric-label{font-weight:700;font-size:14px;line-height:24px;margin:0}
.performance-details{list-style:none;display:grid;align-content:start;gap:6px;border-top:1px solid var(--color-divider);padding-top:14px;margin-top:4px}
.performance-details li{font-size:14px;line-height:1.6;color:var(--color-text-muted)}

#reach .demo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#reach .demo-card img{aspect-ratio:2/3;object-position:center center}
#reach .demo-card figcaption{font-weight:700;padding:16px;min-height:54px}
@media(max-width:650px){#reach .demo-grid{grid-template-columns:1fr}}

/* Show the complete Meet Coco portrait rather than cropping its top. */
#meet .section-figure{aspect-ratio:auto}
#meet .section-figure img{width:100%;height:auto;object-fit:contain;object-position:center top}

.audience-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:12px;max-width:760px}
.audience-highlights>div{border-top:3px solid var(--color-ruby);padding-top:12px}
.audience-highlights>div:nth-child(2){border-color:var(--color-primary)}
.audience-highlights>div:nth-child(3){border-color:var(--color-blue)}
.audience-highlights dd{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3.5rem);line-height:1.2;color:var(--color-ruby)}
.audience-highlights>div:nth-child(2) dd{color:var(--color-primary)}
.audience-highlights>div:nth-child(3) dd{color:var(--color-blue)}
.audience-highlights dt{font-size:14px;font-weight:700;margin-top:6px}

#gallery .gallery-tall img{object-position:center center}
#gallery img[src="assets/gallery-blue.png"]{object-position:center bottom}

/* Reduce scrolling with consistent compact section spacing. */
.section{padding-block:clamp(32px,4vw,52px)}
#reach{padding-top:28px;padding-bottom:24px}
#proof{padding-top:28px}
#meet{padding-bottom:24px}
.hero,.contact{padding-block:clamp(36px,5vw,64px)}
#gallery .gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px;align-items:stretch}
#gallery .gallery-tall,#gallery .gallery-wide{grid-row:auto;grid-column:auto}
#gallery .gallery-item img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
@media(max-width:900px){#gallery .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.section{padding-block:30px}#reach{padding-bottom:18px}#proof{padding-top:24px}#gallery .gallery-grid{gap:12px}}

/* Colorful platform badges with gentle motion. */
#proof .platform-logo{width:46px;height:46px;border-radius:13px;box-shadow:0 5px 14px #19374422;animation:platform-float 4s ease-in-out infinite}
#proof .platform-logo svg{width:29px;height:29px}
#proof .instagram{background:radial-gradient(circle at 25% 100%,#feda75 0%,#fa7e1e 30%,#d62976 55%,#962fbf 78%,#4f5bd5 100%);color:#fff}
#proof .facebook{background:#1877f2;color:#fff;animation-delay:.8s}
#proof .tiktok{background:#111;color:#fff;filter:drop-shadow(-2px 1px 0 #25f4ee) drop-shadow(2px -1px 0 #fe2c55);animation-delay:1.6s}
#proof .proof-card dt{justify-content:space-between}
@keyframes platform-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#proof .platform-logo{animation:none}}

/* A polished, compact collaboration footer and complete contact links. */
.contact-title{font-size:clamp(2.3rem,5vw,4rem)}
.connect-links{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:22px}
.connect-links a{color:#fff;font-size:14px;font-weight:700;text-underline-offset:5px}
.contact .contact-figure{max-height:330px;aspect-ratio:4/5;max-width:270px;justify-self:end}
.contact .contact-figure img{object-position:center top}
.footer{text-align:left;background:var(--color-surface-2);border-top:1px solid var(--color-divider);padding:30px 24px}
.footer-inner{max-width:var(--content-wide);margin:auto;display:grid;grid-template-columns:1fr 1.4fr;gap:32px}
.footer-identity h2{font-family:var(--font-display);font-size:30px;color:var(--color-ruby);margin:10px 0 6px}
.footer .deck-title{font-size:17px;font-weight:700;color:var(--color-primary)}
.footer p{padding:0;margin:0;max-width:65ch}
.footer-details{display:flex;flex-direction:column;gap:12px}
.footer-details>a,.privacy-notice a{color:var(--color-ruby);font-size:13px;font-weight:700;text-underline-offset:4px}
.privacy-notice summary{cursor:pointer;color:var(--color-text);font-size:13px;font-weight:700}
.privacy-notice p{margin-top:10px}
.footer .rights-note{font-size:11px}
@media(max-width:650px){.footer-inner{grid-template-columns:1fr;gap:20px}.contact .contact-figure{display:none}.contact-grid{grid-template-columns:1fr}}

/* Intimately Coco header wordmark. */
.brand-wordmark{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;line-height:1.1;letter-spacing:-.035em}
.wordmark-intimately{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(22px,2.1vw,29px);color:var(--color-primary)}
.wordmark-coco{font-family:var(--font-display);font-weight:700;font-size:clamp(25px,2.5vw,34px);color:var(--color-ruby)}
.wordmark-dot{color:var(--color-orange)}

.contact .contact-figure{aspect-ratio:2/3;max-height:360px;max-width:240px}
.contact .contact-figure img{object-fit:contain;width:100%;height:auto;object-position:center center}

.hero-viewership{border-left:4px solid var(--color-orange);padding-left:16px;line-height:1.4}
.hero-viewership strong{display:block;color:var(--color-primary);font-size:clamp(19px,2vw,25px)}
.hero-viewership span{display:block;margin-top:5px;color:var(--color-text-muted);font-size:12px}

.hero-monthly-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-block:4px}
.monthly-view{border-left:4px solid var(--color-primary);padding-left:14px;display:flex;flex-direction:column;gap:4px}
.monthly-platform{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.monthly-view strong{font-family:var(--font-display);font-size:clamp(28px,3.3vw,43px);line-height:1.15;color:var(--color-primary)}
.facebook-monthly{border-color:var(--color-blue)}.facebook-monthly strong{color:var(--color-blue)}
.monthly-view>span:last-child{font-size:12px;color:var(--color-text-muted)}
.monthly-basis{grid-column:1/-1;font-size:11px;color:var(--color-text-muted);line-height:1.5}

/* Original supplied collaboration logos, framed individually. */
.partner-section{border-block:1px solid var(--color-divider);background:var(--color-surface-2);border-radius:20px;padding:30px 24px;margin-top:24px}
.partner-heading{text-align:center}.partner-heading .section-title{margin-top:8px;margin-bottom:8px;font-size:clamp(25px,3vw,36px)}
.partner-heading p{margin-inline:auto;font-size:14px;color:var(--color-text-muted)}
.partner-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;list-style:none;margin-top:24px;align-items:center}
.partner-logos li{min-width:0;text-align:center}
.partner-logo-frame{position:relative;overflow:hidden;width:100%;border-radius:10px;box-shadow:0 3px 10px #19374414}
.partner-logo-frame img{position:absolute;top:0;height:auto;max-width:none}
.partner-name{display:block;margin-top:10px;font-size:11px;font-weight:700;color:var(--color-text-muted);line-height:1.4}
@media(max-width:1000px){.partner-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.partner-section{margin-inline:20px}}
@media(max-width:650px){.partner-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.partner-section{padding:24px 18px}}

/* Clean transparent partner assets with uniform clear space. */
.partner-logo-frame{height:88px;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.partner-logo-frame img{position:static;width:100%;height:72px;max-width:100%;object-fit:contain}
.partner-logos li:nth-child(4) img{max-width:155px}
[data-theme='dark'] .partner-section{background:#f3fbfb}
[data-theme='dark'] .partner-section .partner-name,[data-theme='dark'] .partner-heading p{color:#4f6670}
[data-theme='dark'] .partner-heading .section-title{color:#007b88}
/* Revised partnership copy: compact, readable sections. */
.hero-copy > p:not(.hero-note){max-width:65ch;font-size:1.05rem;line-height:1.65}.hero-copy .hero-lede{font-size:1.15rem}.hero-title{font-size:clamp(3rem,5.8vw,5.8rem)}
#meet .section-title{font-size:clamp(2rem,3.1vw,3.1rem)}
#meet .section-grid{align-items:start}#meet .section-figure{position:sticky;top:110px}
.pillars li{display:flex;flex-direction:column;gap:.3rem}.pillars li strong{font-size:1.1rem}
.revised-offers{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.revised-offers .offer-card p{line-height:1.65}.revised-offers h3{font-size:1.45rem}.contact-title{font-size:clamp(2.3rem,4vw,4rem)}.contact-copy>p{line-height:1.7;max-width:65ch}.contact-actions{flex-wrap:wrap;gap:12px}
@media(max-width:700px){.revised-offers{grid-template-columns:1fr}#meet .section-figure{position:static}.hero-title{font-size:3.2rem}}
.contact .btn-hollow-ruby{border-color:#fff;color:#fff}.contact .btn-hollow-ruby:hover{background:#fff;color:#193744}.contact-copy>p>a{color:inherit;text-underline-offset:4px}.contact-copy>.eyebrow{color:#fff}

.snapshot-note{max-width:1280px;margin:12px auto 0;padding:0 24px;font-size:12px;color:var(--color-text-muted)}