/* ============================================================
   Section Tones — flat color rooms with torn SVG transitions
   Gradient transitions are handled by .td tear-divider elements
   placed between sections in the HTML — not by background tricks.
   ============================================================ */

.tone-cream,
.tone-butter,
.tone-ink {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}
.tone-cream > .container,
.tone-butter > .container,
.tone-ink > .container {
  position: relative;
  z-index: 2;
}

/* ─── Cream room — warm paper ───────────────────────────── */
.tone-cream {
  background: var(--tone-cream);
  padding: 140px 0;
}
.tone-cream::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 55% at 12% 42%, rgba(243,219,215,0.36) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 88% 68%, rgba(217,221,200,0.26) 0%, transparent 70%);
}

/* ─── Butter room — warm morning ────────────────────────── */
.tone-butter {
  background: var(--tone-butter);
  padding: 140px 0;
}
.tone-butter::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 32%, rgba(251,240,210,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 18% 70%, rgba(253,219,215,0.30) 0%, transparent 70%);
}
.tone-butter .testimonial {
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 24px -16px rgba(80,32,15,0.10);
}

/* ─── Ink room — dark warm night ────────────────────────── */
.tone-ink {
  background: var(--tone-ink);
  color: #F5EBE2;
  padding: 180px 0;
}
.tone-ink::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 78% 42%, rgba(216,184,48,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 18% 62%, rgba(10,5,2,0.45) 0%, transparent 65%);
}
/* Brand pattern — gold motifs (transparent bg) tiled faintly over the
   dark cocoa room as a signature texture. */
.tone-ink::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url('pattern.png');
  background-size: 340px auto;
  background-repeat: repeat;
  opacity: 0.09;
}

/* Reversed type inside the ink room */
.tone-ink h2,
.tone-ink h3,
.tone-ink h4 { color: #F8EDDB; }
.tone-ink p { color: rgba(245,235,226,0.78); }
.tone-ink .eyebrow { color: var(--gold); font-weight: 600; }
.tone-ink .eyebrow::before { background: rgba(216,184,48,0.7); }

/* Buttons inside the ink room — gold primary pops against the cocoa */
.tone-ink .btn-primary { background: var(--gold); color: #2E1A0F; border-color: var(--gold); }
.tone-ink .btn-primary:hover { background: var(--gold-soft); color: var(--burgundy-dark); border-color: var(--gold-soft); }
.tone-ink .btn-outline { background: transparent; color: #F8EDDB; border-color: rgba(248,237,219,0.45); }
.tone-ink .btn-outline:hover { background: rgba(248,237,219,0.08); border-color: rgba(248,237,219,0.85); color: #fff; }
.tone-ink .btn-outline .btn-icon { background: rgba(248,237,219,0.14); color: #F8EDDB; }
.tone-ink .about-preview .visual img {
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55), 0 8px 18px -8px rgba(0,0,0,0.4);
}

/* Eyebrows stay burgundy in light rooms */
.tone-cream .eyebrow,
.tone-butter .eyebrow { color: var(--burgundy); }

/* ─── Section dividers — disabled ─────────────────────────
   The decorative torn-paper SVG dividers between sections are
   hidden. Sections now meet at clean straight color boundaries.
   Markup is preserved in the HTML in case we want to bring the
   tears back. */
.td { display: none !important; }

@media (max-width: 768px) {
  .tone-cream,
  .tone-butter { padding: 80px 0; }
  .tone-ink { padding: 96px 0; }
}
@media (max-width: 640px) {
  .tone-cream,
  .tone-butter { padding: 60px 0; }
  .tone-ink { padding: 72px 0; }
}
@media (max-width: 480px) {
  .tone-cream,
  .tone-butter { padding: 48px 0; }
  .tone-ink { padding: 56px 0; }
}