/* ═══════════════════════════════════════════════════
   RAGALHÃES — styles.css
   Premium editorial portfolio
═══════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────── */
:root {
  --bg:       #0b0b0b;
  --bg2:      #111111;
  --surface:  #161616;
  --border:   rgba(255,255,255,.07);
  --txt:      #c4c0ba;
  --txt-dim:  #5a5856;
  --txt-head: #ede9e3;
  --max:      1280px;
  --gutter:   52px;
  --gap:      5px;
  --ease:     cubic-bezier(.25,.46,.45,.94);
}

/* ── RESET ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--txt);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ── GRAIN ───────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── NAVIGATION ──────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 32px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: padding .4s var(--ease), background .4s;
}
#nav.scrolled {
  padding: 20px var(--gutter);
  background: rgba(11,11,11,.93);
  backdrop-filter: blur(16px);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-head);
  transition: opacity .25s;
}
.nav-logo:hover { opacity: .7; }
.nav-links {
  display: flex; gap: 40px;
}
.nav-links a {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-dim);
  transition: color .25s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--txt-head); }

/* burger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  background: none;
  border: none;
}
.nav-burger span {
  display: block; width: 22px; height: 1px;
  background: var(--txt);
  transition: all .3s var(--ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── MOBILE NAV ───────────────────────────────────── */
.mobile-nav {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 490;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-nav a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 300;
  color: var(--txt-head);
  letter-spacing: .04em;
  transition: opacity .2s;
}
.mobile-nav a:hover { opacity: .6; }

/* ── SHARED UTILITIES ────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 120px 0; }
.section-alt { padding: 100px 0; background: var(--bg2); }

.lbl {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--txt-dim);
  display: block;
  margin-bottom: 14px;
}
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  color: var(--txt-head);
}
.divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 60px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
}
.section-header h2 {
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.0;
  letter-spacing: -.015em;
}
.section-header h2 em { font-style: italic; }
.section-header .lbl { margin-bottom: 12px; }

/* ── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid rgba(196,192,186,.3);
  color: var(--txt);
  transition: border-color .3s, background .3s, color .3s;
}
.btn:hover {
  border-color: rgba(196,192,186,.7);
  background: rgba(196,192,186,.06);
  color: var(--txt-head);
}
.btn-fill {
  background: var(--txt-head);
  color: var(--bg);
  border-color: var(--txt-head);
}
.btn-fill:hover {
  background: transparent;
  color: var(--txt-head);
}

/* ── REVEAL ANIMATION ────────────────────────────── */
.reveal { opacity: 0; }
.reveal-up { opacity: 0; transform: translateY(20px); }

/* ─────────────────────────────────────────────────
   HOME — HERO
───────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding: 120px var(--gutter) 80px;
  max-width: var(--max);
  margin: 0 auto;
}
.hero-eyebrow {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 28px;
  display: block;
}
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(46px, 5.2vw, 70px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--txt-head);
  margin-bottom: 28px;
}
.hero-headline em { font-style: italic; }
.hero-sub {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--txt-dim);
  max-width: 400px;
  margin-bottom: 44px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* showreel */
.showreel-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
}
.showreel-wrap img {
  filter: brightness(.58);
  transition: filter .5s, transform .8s var(--ease);
}
.showreel-wrap:hover img { filter: brightness(.44); transform: scale(1.04); }
.showreel-ui {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
}
.play-ring {
  width: 68px; height: 68px;
  border: 1.5px solid rgba(196,192,186,.6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .3s;
}
.showreel-wrap:hover .play-ring {
  background: rgba(196,192,186,.1);
  transform: scale(1.07);
}
.play-ring svg { width: 16px; fill: var(--txt-head); margin-left: 3px; }
.showreel-label {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.showreel-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
}
.hero-caption {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .13em;
  color: var(--txt-dim);
}

/* ─────────────────────────────────────────────────
   HOME — FEATURED WORK GRID
───────────────────────────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.work-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
}
.work-item.tall   { aspect-ratio: 3/4; }
.work-item.wide   { aspect-ratio: 4/3; }
.work-item.sq     { aspect-ratio: 1/1; }
.work-item img {
  transition: transform .8s var(--ease), filter .4s;
  filter: brightness(.86);
}
.work-item:hover img { transform: scale(1.04); filter: brightness(.68); }
.work-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 26px 22px;
  background: linear-gradient(transparent, rgba(11,11,11,.74));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .35s;
}
.work-item:hover .work-overlay { opacity: 1; transform: none; }
.work-cat {
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 5px;
}
.work-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--txt-head);
}

/* ─────────────────────────────────────────────────
   HOME — CATEGORIES
───────────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
}
.cat-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
}
.cat-card img {
  filter: brightness(.44);
  transition: filter .5s, transform .8s var(--ease);
}
.cat-card:hover img { filter: brightness(.3); transform: scale(1.05); }
.cat-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 20px;
  background: linear-gradient(transparent, rgba(11,11,11,.6));
}
.cat-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--txt-head);
  margin-bottom: 6px;
}
.cat-desc {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(196,192,186,.6);
  margin-bottom: 14px;
}
.cat-link {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-dim);
  transition: color .3s;
}
.cat-card:hover .cat-link { color: var(--txt-head); }

/* ─────────────────────────────────────────────────
   HOME — SERVICES
───────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.svc-card {
  padding: 40px 28px;
  background: var(--bg);
  transition: background .3s;
}
.svc-card:hover { background: var(--surface); }
.svc-num {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--txt-dim);
  margin-bottom: 28px;
  display: block;
}
.svc-icon { margin-bottom: 20px; }
.svc-icon svg { width: 26px; height: 26px; stroke: var(--txt-dim); fill: none; stroke-width: 1.2; }
.svc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--txt-head);
  margin-bottom: 12px;
  line-height: 1.1;
}
.svc-desc {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--txt-dim);
}

/* ─────────────────────────────────────────────────
   HOME — TESTIMONIALS
───────────────────────────────────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.testi-card {
  padding: 52px 40px;
  background: var(--bg2);
}
.testi-stars { display: flex; gap: 4px; margin-bottom: 24px; }
.testi-stars span { color: var(--txt-dim); font-size: 12px; }
.testi-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--txt-head);
  margin-bottom: 28px;
}
.testi-author {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* ─────────────────────────────────────────────────
   HOME — ABOUT PREVIEW
───────────────────────────────────────────────── */
.about-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-photo-wrap {
  aspect-ratio: 3/4;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.about-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; opacity: .14;
}
.about-placeholder svg { width: 48px; }
.about-placeholder p {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.about-copy .btn { margin-top: 16px; }
.about-copy h2 {
  font-size: clamp(36px, 3.8vw, 52px);
  line-height: 1.08;
  margin-bottom: 28px;
  letter-spacing: -.01em;
}
.about-copy h2 em { font-style: italic; }
.about-copy p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--txt-dim);
  margin-bottom: 14px;
}

/* ─────────────────────────────────────────────────
   HOME — INSTAGRAM
───────────────────────────────────────────────── */
.insta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto 20px;
}
.insta-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
}
.insta-item {
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: block;
}
.insta-item img {
  filter: brightness(.84);
  transition: filter .4s, transform .7s var(--ease);
}
.insta-item:hover img { filter: brightness(.55); transform: scale(1.07); }
.insta-icon-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s;
}
.insta-item:hover .insta-icon-wrap { opacity: 1; }
.insta-icon-wrap svg {
  width: 22px; fill: none;
  stroke: var(--txt-head); stroke-width: 1.5;
}

/* ─────────────────────────────────────────────────
   HOME — CONTACT PREVIEW FORM
───────────────────────────────────────────────── */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.contact-left h2 {
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.0;
  margin-bottom: 36px;
  letter-spacing: -.015em;
}
.contact-left h2 em { font-style: italic; display: block; }
.contact-channels { margin-top: 40px; }
.c-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--txt-dim);
  transition: color .25s;
}
.c-row:first-child { border-top: 1px solid var(--border); }
.c-row:hover { color: var(--txt-head); }
.c-label {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-dim);
  flex-shrink: 0;
  margin-right: 16px;
}

/* ─────────────────────────────────────────────────
   FORM SHARED
───────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.fg-full { grid-column: 1 / -1; }
.fg { margin-bottom: 24px; }
.fg label {
  display: block;
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 10px;
}
.fg input,
.fg select,
.fg textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(196,192,186,.12);
  padding: 9px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--txt);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .25s;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus { border-bottom-color: rgba(196,192,186,.45); }
.fg input::placeholder,
.fg textarea::placeholder { color: rgba(196,192,186,.2); font-size: 12px; }
.fg textarea { resize: none; height: 100px; }
.fg option { background: #1a1a1a; }

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
footer {
  padding: 44px var(--gutter);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.ft-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-head);
}
.ft-center {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--txt-dim);
  text-align: center;
  white-space: nowrap;
}
.ft-social {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
}
.ft-social a {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-dim);
  transition: color .25s;
}
.ft-social a:hover { color: var(--txt-head); }

/* ─────────────────────────────────────────────────
   WORK PAGE
───────────────────────────────────────────────── */
.page-hero {
  padding: 160px var(--gutter) 52px;
  max-width: var(--max);
  margin: 0 auto;
}
.page-hero h1 {
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.03em;
  margin-top: 20px;
}
.page-hero h1 em { font-style: italic; }

.filters {
  border-bottom: 1px solid var(--border);
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  gap: 0;
}
.filter-btn {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-dim);
  padding: 16px 0;
  margin-right: 36px;
  border-bottom: 1.5px solid transparent;
  background: none;
  border-top: none; border-left: none; border-right: none;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: color .25s, border-color .25s;
}
.filter-btn:hover,
.filter-btn.active { color: var(--txt-head); border-bottom-color: var(--txt-head); }

.work-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding: 40px var(--gutter) 100px;
  max-width: var(--max);
  margin: 0 auto;
}
.wg-item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
}
.wg-item img {
  transition: transform .7s var(--ease), filter .4s;
  filter: brightness(.88);
}
.wg-item:hover img { transform: scale(1.04); filter: brightness(.66); }
.wg-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 20px;
  background: linear-gradient(transparent, rgba(11,11,11,.76));
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .32s, transform .32s;
}
.wg-item:hover .wg-overlay { opacity: 1; transform: none; }
.wg-cat {
  font-size: 8px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--txt-dim); margin-bottom: 4px;
}
.wg-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 300; color: var(--txt-head);
}
.wg-item.hidden { display: none; }

/* ─────────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────────── */
.about-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.about-full-img {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  overflow: hidden;
}
.about-full-img img { width: 100%; height: 100%; object-fit: cover; }
.about-full-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; opacity: .14;
}
.about-full-placeholder svg { width: 52px; }
.about-full-placeholder p {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
}
.about-full-content {
  padding: 140px 68px 100px;
}
.about-full-content h1 {
  font-size: clamp(44px, 5vw, 66px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.02em;
  margin: 24px 0 48px;
}
.about-full-content h1 em { font-style: italic; }
.about-full-content p {
  font-size: 14px;
  font-weight: 300;
  line-height: 2.0;
  color: var(--txt-dim);
  margin-bottom: 22px;
}
.about-full-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--txt-head);
  margin: 52px 0 20px;
}
.skills-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  margin-top: 12px;
}
.skill-item {
  padding: 17px 20px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-dim);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.skill-item:nth-child(2n) { border-right: none; }
.about-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 48px; }

/* ─────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────── */
.contact-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.contact-page-left {
  background: var(--bg2);
  padding: 140px 68px 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-page-left h1 {
  font-size: clamp(44px, 5vw, 66px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.02em;
  margin: 24px 0 0;
}
.contact-page-left h1 em { font-style: italic; display: block; }
.contact-page-right {
  padding: 140px 68px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-page-right .lbl { margin-bottom: 32px; }

/* ─────────────────────────────────────────────────
   WA FLOAT + LIGHTBOX
───────────────────────────────────────────────── */
.wa-btn {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 50px; height: 50px;
  background: #25d366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  box-shadow: 0 4px 18px rgba(37,211,102,.28);
  transition: transform .3s;
}
.wa-btn:hover { transform: scale(1.1); }
.wa-btn svg { width: 22px; fill: #fff; }

.lb {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11,11,11,.97);
  z-index: 600;
  align-items: center; justify-content: center;
}
.lb.open { display: flex; }
.lb-img { max-width: 88vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: none; border: none;
  font-family: 'Inter', sans-serif;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-dim); cursor: pointer; padding: 14px;
  transition: color .25s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--txt-head); }
.lb-close { top: 22px; right: 28px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 36px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .insta-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  :root { --gutter: 24px; }
  #nav, #nav.scrolled { padding: 20px var(--gutter); }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .hero { grid-template-columns: 1fr; padding-top: 100px; padding-bottom: 60px; min-height: auto; }
  .hero-right { display: none; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  .about-preview { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 52px; }
  .work-full-grid { grid-template-columns: repeat(2, 1fr); }
  .about-full { grid-template-columns: 1fr; }
  .about-full-img { display: none; }
  .about-full-content { padding: 100px 32px 80px; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-page-left, .contact-page-right { padding: 80px 32px; }
  footer { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .ft-social { justify-content: center; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 580px) {
  .work-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .work-full-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .insta-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════
   SUPPLEMENT — maps new HTML class names to design
   system and adds components missing from the original
═══════════════════════════════════════════════════ */

/* ── NAV alias (.nav instead of #nav) ───────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 32px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: padding .4s var(--ease), background .4s;
}
.nav.scrolled {
  padding: 20px var(--gutter);
  background: rgba(11,11,11,.93);
  backdrop-filter: blur(16px);
}

/* ── Mobile overlay alias ───────────────────────── */
.nav-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 490;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.nav-overlay.open { opacity: 1; pointer-events: all; }
.nav-overlay ul { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.nav-overlay .nav-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 300;
  color: var(--txt-head);
  letter-spacing: .04em;
  transition: opacity .2s;
}
.nav-overlay .nav-link:hover { opacity: .6; }

/* ── section-label alias ───────────────────────── */
.section-label {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--txt-dim);
  display: block;
  margin-bottom: 14px;
}
.section-head {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--txt-head);
  margin-bottom: 52px;
}
.section-head em { font-style: italic; }

/* ── btn-ghost ──────────────────────────────────── */
.btn-ghost {
  border-color: transparent;
  color: var(--txt-dim);
}
.btn-ghost:hover { border-color: rgba(196,192,186,.3); color: var(--txt-head); }

/* ─────────────────────────────────────────────────
   HERO — full-bleed overlay layout
───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.38);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 100px;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}
.hero-kicker {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(196,192,186,.5);
  display: block;
  margin-bottom: 24px;
}
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 7.5vw, 110px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--txt-head);
  margin-bottom: 32px;
  max-width: 820px;
}
.hero-headline span { display: block; }
.hero-headline em { font-style: italic; }
.hero-sub {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(196,192,186,.55);
  max-width: 380px;
  margin-bottom: 44px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-scroll-hint {
  position: absolute;
  bottom: 36px; right: var(--gutter);
  font-size: 8px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--txt-dim);
  writing-mode: vertical-rl;
  z-index: 2;
}

/* ─────────────────────────────────────────────────
   SHOWREEL SECTION
───────────────────────────────────────────────── */
.showreel-section {
  padding: 120px 0;
}
.showreel-section .container { margin-bottom: 40px; }
.showreel-wrap {
  position: relative;
  width: 100%; max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface);
}
.showreel-thumb {
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
}
.showreel-thumb img {
  filter: brightness(.38);
  transition: filter .5s, transform .8s var(--ease);
}
.showreel-thumb:hover img { filter: brightness(.28); transform: scale(1.03); }
.showreel-trigger {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  color: var(--txt-head);
  transition: opacity .3s;
}
.showreel-trigger svg {
  width: 72px; height: 72px;
  stroke: rgba(196,192,186,.7);
}
.showreel-trigger span {
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.showreel-trigger:hover svg { stroke: var(--txt-head); }

/* modal */
.showreel-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(7,7,7,.97);
  z-index: 700;
  align-items: center;
  justify-content: center;
}
.showreel-modal.open { display: flex; }
.showreel-close {
  position: absolute; top: 22px; right: 28px;
  color: var(--txt-dim); padding: 12px;
  transition: color .25s;
}
.showreel-close:hover { color: var(--txt-head); }
.showreel-close svg { width: 22px; height: 22px; }
.showreel-frame {
  width: 90vw; max-width: 1200px;
  aspect-ratio: 16/9;
}
.showreel-iframe { width: 100%; height: 100%; border: none; }

/* ─────────────────────────────────────────────────
   WORK PREVIEW (home editorial grid)
───────────────────────────────────────────────── */
.work-preview {
  padding: 0 0 120px;
}
.work-preview .container { padding-bottom: 60px; }
.work-row {
  display: grid;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.work-row--full { grid-template-columns: 1fr; max-height: 78vh; overflow: hidden; }
.work-row--full .work-item { max-height: 78vh; }
.work-row--two  { grid-template-columns: 1fr 1fr; padding: 0 var(--gutter); max-width: var(--max); margin: var(--gap) auto; }
.work-row--three{ grid-template-columns: 1fr 1fr 1fr; padding: 0 var(--gutter); max-width: var(--max); margin: var(--gap) auto; }

.work-item-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 22px;
  background: linear-gradient(transparent, rgba(11,11,11,.78));
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, transform .35s;
}
.work-item:hover .work-item-label { opacity: 1; transform: none; }
.work-item-cat {
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.work-item-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--txt-head);
}
.work-preview-cta { padding-top: 48px; text-align: center; }

/* ─────────────────────────────────────────────────
   ABOUT PREVIEW (home)
───────────────────────────────────────────────── */
.about-preview {
  padding: 120px 0;
  background: var(--bg2);
}
.about-preview-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.about-preview-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--surface);
}
.about-preview-img img { height: 100%; object-fit: cover; object-position: top; }
.about-preview-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--txt-head);
  margin: 8px 0 32px;
}
.about-preview-text h2 em { font-style: italic; }
.about-preview-text p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--txt-dim);
  margin-bottom: 16px;
}
.about-preview-text .btn { margin-top: 24px; }

/* ─────────────────────────────────────────────────
   SERVICES (home)
───────────────────────────────────────────────── */
.services-section { padding: 120px 0; }
.services-section .section-head { margin-bottom: 52px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 0;
}
.service-card {
  padding: 44px 32px;
  background: var(--bg);
  transition: background .3s;
}
.service-card:hover { background: var(--surface); }
.service-num {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--txt-dim);
  margin-bottom: 28px;
  display: block;
}
.service-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--txt-head);
  margin-bottom: 14px;
  line-height: 1.1;
}
.service-card p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--txt-dim);
}

/* ─────────────────────────────────────────────────
   CAT SECTION (home)
───────────────────────────────────────────────── */
.cat-section { padding: 80px 0 120px; background: var(--bg2); }
.cat-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.cat-card-img { width: 100%; height: 100%; }
.cat-card-img img { filter: brightness(.42); transition: filter .5s, transform .8s var(--ease); }
.cat-card:hover .cat-card-img img { filter: brightness(.28); transform: scale(1.05); }
.cat-card-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 20px;
  background: linear-gradient(transparent, rgba(11,11,11,.6));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.cat-card-label span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--txt-head);
}
.cat-card-label svg { width: 18px; stroke: var(--txt-dim); flex-shrink: 0; }

/* ─────────────────────────────────────────────────
   INSTAGRAM SECTION (home)
───────────────────────────────────────────────── */
.insta-section { padding: 120px 0; }
.insta-section .container { margin-bottom: 28px; }
.insta-follow { text-align: center; margin-top: 40px; }

/* ─────────────────────────────────────────────────
   TESTIMONIALS SECTION (home)
───────────────────────────────────────────────── */
.testi-section { padding: 120px 0; background: var(--bg2); }
.testi-card blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--txt-head);
  margin-bottom: 28px;
}
.testi-card cite {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-dim);
  font-style: normal;
}

/* ─────────────────────────────────────────────────
   CTA SECTION (home)
───────────────────────────────────────────────── */
.cta-section { padding: 140px 0; }
.cta-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.cta-inner h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--txt-head);
  margin: 14px 0 20px;
}
.cta-inner h2 em { font-style: italic; }
.cta-inner p {
  font-size: 13px;
  font-weight: 300;
  color: var(--txt-dim);
  margin-bottom: 40px;
}

/* ─────────────────────────────────────────────────
   FOOTER (.footer class based)
───────────────────────────────────────────────── */
.footer {
  padding: 80px var(--gutter) 44px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 52px;
}
.footer-col {}
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-head);
  margin-bottom: 16px;
}
.footer-tagline {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--txt-dim);
}
.footer-heading {
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 22px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a {
  font-size: 12px;
  font-weight: 300;
  color: var(--txt-dim);
  transition: color .25s;
}
.footer-col ul a:hover { color: var(--txt-head); }
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--txt-dim);
}

/* ─────────────────────────────────────────────────
   PAGE HERO (inner pages)
───────────────────────────────────────────────── */
.page-hero {
  padding: 160px var(--gutter) 60px;
  max-width: var(--max);
  margin: 0 auto;
}
.page-hero--sm { padding-bottom: 40px; }
.page-hero-label {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--txt-dim);
  display: block;
  margin-bottom: 20px;
}
.page-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--txt-head);
  margin-bottom: 28px;
}
.page-hero-title em { font-style: italic; }
.page-hero-sub {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--txt-dim);
  max-width: 480px;
}

/* ─────────────────────────────────────────────────
   WORK PAGE — filters and grid
───────────────────────────────────────────────── */
.filters-wrap {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.filters-wrap .container { max-width: var(--max); }
.filters {
  border-bottom: none;
  padding: 0;
  display: flex;
  gap: 0;
}
.work-full-section { padding-bottom: 80px; }
.work-full-section .container { max-width: var(--max); }
.work-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-top: 40px;
}
.wg-item-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 20px;
  background: linear-gradient(transparent, rgba(11,11,11,.76));
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(5px);
  transition: opacity .32s, transform .32s;
}
.wg-item:hover .wg-item-meta { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────
   ABOUT PAGE — full split + story
───────────────────────────────────────────────── */
.about-full-text {
  padding: 120px 68px 100px;
  overflow-y: auto;
}
.about-block {
  margin-bottom: 72px;
}
.about-block .section-label { margin-bottom: 18px; }
.about-block p {
  font-size: 14px;
  font-weight: 300;
  line-height: 2.0;
  color: var(--txt-dim);
  margin-bottom: 18px;
}
.about-block .btn { margin-top: 12px; }
.about-caps {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.about-caps li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.cap-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--txt-head);
}
.cap-desc {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--txt-dim);
}

/* clients section */
.clients-section { padding: 80px 0 120px; background: var(--bg2); }
.clients-note {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--txt-dim);
  max-width: 600px;
  margin-bottom: 44px;
}
.clients-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.client-tag {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-dim);
  border: 1px solid var(--border);
  padding: 10px 18px;
}

/* ─────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────── */
.contact-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 80px);
}
.contact-left {
  background: var(--bg2);
  padding: 120px 68px 80px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.contact-right {
  padding: 120px 68px 80px;
}
.contact-channel .section-label { margin-bottom: 8px; }
.contact-channel-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--txt-head);
  transition: opacity .25s;
}
.contact-channel-link:hover { opacity: .65; }
.contact-channel-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--txt-head);
}
.contact-preview {
  margin-top: auto;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.contact-preview img { height: 100%; object-fit: cover; filter: brightness(.5); }

/* form */
.contact-form .form-grid { margin-bottom: 0; }
.form-submit {
  margin-top: 32px;
  width: 100%;
  justify-content: center;
}
.form-success {
  padding: 80px 0;
  text-align: center;
}
.form-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--txt-head);
  margin-bottom: 16px;
}
.form-success p {
  font-size: 13px;
  font-weight: 300;
  color: var(--txt-dim);
}

/* lb controls with svg icons */
.lb-close svg, .lb-prev svg, .lb-next svg {
  width: 20px; height: 20px;
  display: block;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE SUPPLEMENTS
───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}
@media (max-width: 860px) {
  .nav { padding: 20px var(--gutter); }
  .nav.scrolled { padding: 16px var(--gutter); }
  .hero-headline { font-size: clamp(48px, 10vw, 80px); }
  .work-row--two { grid-template-columns: 1fr; }
  .work-row--three { grid-template-columns: 1fr 1fr; }
  .about-preview-inner { grid-template-columns: 1fr; gap: 52px; }
  .about-preview-img { aspect-ratio: 4/3; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-left { padding: 80px 32px 52px; gap: 32px; }
  .contact-right { padding: 52px 32px 80px; }
  .about-full { grid-template-columns: 1fr; }
  .about-full-img { display: none; }
  .about-full-text { padding: 100px 32px 80px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .showreel-frame { width: 95vw; }
  .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .work-row--three { grid-template-columns: 1fr; }
  .work-full-grid { grid-template-columns: 1fr; }
  .hero-headline { font-size: clamp(44px, 12vw, 70px); }
  .services-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════
   CONVERSION LAYER — added for lead generation
═══════════════════════════════════════════════════ */

/* ── Nav CTA button ─────────────────────────────── */
.nav-cta {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #25d366;
  border: 1px solid rgba(37,211,102,.3);
  padding: 9px 18px;
  transition: background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.nav-cta:hover { background: rgba(37,211,102,.1); border-color: #25d366; }

/* ── btn-fill-light — primary CTA button ────────── */
.btn-fill-light {
  background: var(--txt-head);
  color: var(--bg);
  border-color: var(--txt-head);
  font-weight: 500;
}
.btn-fill-light:hover {
  background: transparent;
  color: var(--txt-head);
}

/* ── btn-wa — WhatsApp inline button ────────────── */
.btn-wa {
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.35);
  color: #25d366;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-wa:hover { background: rgba(37,211,102,.2); border-color: #25d366; color: #25d366; }

/* ── Hero trust signals ─────────────────────────── */
.hero-trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero-trust span {
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(196,192,186,.4);
}

/* ── CTA group (hero, footer) ───────────────────── */
.cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 36px;
}
.footer-cta-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* ── Services note ──────────────────────────────── */
.services-note {
  font-size: 13px;
  font-weight: 300;
  color: var(--txt-dim);
  margin-bottom: 44px;
  max-width: 520px;
}

/* ── Pricing grid ───────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.pricing-card {
  padding: 44px 32px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background .3s;
}
.pricing-card:hover { background: var(--surface); }
.pricing-num {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--txt-dim);
  margin-bottom: 20px;
  display: block;
}
.pricing-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--txt-head);
  margin-bottom: 12px;
  line-height: 1.15;
}
.pricing-card p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--txt-dim);
  margin-bottom: 24px;
  flex: 1;
}
.pricing-from {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 20px;
}
.pricing-from strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--txt-head);
  letter-spacing: 0;
  text-transform: none;
}
.pricing-btn { margin-top: auto; }
.pricing-card--cta {
  background: var(--bg2);
  justify-content: center;
  gap: 0;
}
.pricing-card--cta h3 { margin-bottom: 14px; }

/* ── Case Studies section ───────────────────────── */
.case-section {
  padding: 120px 0;
  background: var(--bg2);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.case-card {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: background .3s;
}
.case-card:hover { background: var(--surface); }
.case-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.case-img img {
  filter: brightness(.7);
  transition: filter .5s, transform .8s var(--ease);
}
.case-card:hover .case-img img { filter: brightness(.55); transform: scale(1.04); }
.case-body {
  padding: 36px 32px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.case-tag {
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 14px;
}
.case-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--txt-head);
  line-height: 1.15;
  margin-bottom: 28px;
}
.case-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.case-step {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.case-step:first-child { border-top: 1px solid var(--border); }
.case-step-label {
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-dim);
  display: block;
  margin-bottom: 6px;
}
.case-step p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--txt-dim);
  margin: 0;
}
.case-step--result p { color: var(--txt); }
.case-step--result strong { color: var(--txt-head); font-weight: 400; }
.case-cta {
  margin-top: 28px;
  align-self: flex-start;
}

/* ── Testimonial enhancements ───────────────────── */
.testi-stars {
  font-size: 13px;
  color: #c4a85a;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.testi-card cite strong {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-head);
  margin-bottom: 3px;
}

/* logo placeholder row */
.testi-logos {
  margin-top: 72px;
  text-align: center;
}
.testi-logos-label {
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 28px;
}
.testi-logos-row {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--border);
}
.testi-logo-slot {
  flex: 1;
  min-width: 120px;
  padding: 20px 28px;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-dim);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.testi-logo-slot:last-child { border-right: none; }

/* ── Social CTA strip ───────────────────────────── */
.social-cta-section {
  padding: 0;
  background: var(--bg2);
}
.social-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.social-cta-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px var(--gutter);
  background: var(--bg2);
  transition: background .3s;
  cursor: pointer;
}
.social-cta-card:hover { background: var(--surface); }
.social-cta-card svg { flex-shrink: 0; color: var(--txt-dim); }
.social-cta-label {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 5px;
}
.social-cta-handle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--txt-head);
}
.social-cta-card--wa svg { color: #25d366; }
.social-cta-card--wa .social-cta-handle { color: #25d366; }
.social-cta-arrow { margin-left: auto; flex-shrink: 0; width: 18px; opacity: .4; }

/* ── Contact form header ────────────────────────── */
.contact-form-header {
  margin-bottom: 36px;
}
.contact-form-note {
  font-size: 12px;
  font-weight: 300;
  color: var(--txt-dim);
  margin-top: 8px;
}

/* ── Contact trust signals ──────────────────────── */
.contact-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contact-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 300;
  color: var(--txt-dim);
}
.contact-trust-check {
  color: #25d366;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Form submit area ───────────────────────────── */
.form-submit-area {
  margin-top: 8px;
}
.form-submit { width: 100%; justify-content: center; margin-bottom: 14px; }
.form-submit-note {
  font-size: 11px;
  font-weight: 300;
  color: var(--txt-dim);
  text-align: center;
}
.form-submit-note a { color: #25d366; text-decoration: none; }
.form-submit-note a:hover { opacity: .8; }

/* ── Date input ─────────────────────────────────── */
.fg input[type="date"] {
  color-scheme: dark;
}

/* ── Responsive supplements ─────────────────────── */
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-cta { display: none; }
  .social-cta-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 14px; }
  .testi-logos-row { flex-direction: column; }
  .testi-logo-slot { border-right: none; border-bottom: 1px solid var(--border); }
  .testi-logo-slot:last-child { border-bottom: none; }
  .footer-cta-group { flex-direction: column; }
}
@media (max-width: 580px) {
  .cta-btns { flex-direction: column; align-items: center; }
  .hero-trust { flex-direction: column; gap: 8px; }
}