/* ════════════════════════════════════════════════════════════
   COLOUR PASS — About & Practice
   Sections switch between the dark ground, the brand red, a warm
   cream and the brand gold. Each tone only resets the page's own
   colour variables for that section, so layout and effects are
   untouched.
════════════════════════════════════════════════════════════ */

/* ── tones ─────────────────────────────────────────────────── */
.x-tone-red {
    --paper: #9C2527;
    --ink:   #ffffff;
    --ink-2: rgba(255, 255, 255, 0.84);
    --ink-3: rgba(255, 255, 255, 0.66);
    --hair:  rgba(255, 255, 255, 0.24);
    --gold:  #F3CB1B;
}

.believe,
.why,
.x-tone-cream {
    --paper: #F6F1E7;
    --ink:   #141414;
    --ink-2: #4b4740;
    --ink-3: #8a8174;
    --hair:  rgba(0, 0, 0, 0.12);
    --gold:  #9C2527;          /* accents turn red on the light ground */
}

.x-tone-gold {
    --paper: #F3CB1B;
    --ink:   #141414;
    --ink-2: #2b2b2b;
    --ink-3: rgba(0, 0, 0, 0.62);
    --hair:  rgba(0, 0, 0, 0.16);
    --gold:  #9C2527;
}

/* page labels at the top pick up the gold */
.practice-label { color: #F3CB1B; }

/* section labels read as small brand-coloured eyebrows */
.x-tone-red .pa-label { color: #F3CB1B; }
.believe .pa-label, .why .pa-label, .x-tone-cream .pa-label, .x-tone-gold .pa-label { color: #9C2527; }


/* ── PRACTICE ──────────────────────────────────────────────── */

/* What we believe — cream ground, solid white value cards, crisp edges */
.believe { box-shadow: none; border-top: 3px solid #9C2527; }
.believe .bv-marquee { -webkit-mask-image: none; mask-image: none; }
.believe .bv {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #9C2527;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.believe .bv:nth-child(even) { border-top-color: #F3CB1B; }
.believe .bv h3 { color: #141414; }
.believe .bv-num { color: #9C2527; }
.believe .bv:hover { background: #9C2527; border-color: #9C2527; }
.believe .bv:hover h3, .believe .bv:hover p { color: #fff; }
.believe .bv:hover .bv-num { color: #F3CB1B; }
.believe .bv p, .believe .bv h3, .believe .bv-num { transition: color 0.3s ease; }

/* How we work — stays dark, each phase gets a red rule on top */
.hw-card { border-top: 2px solid #9C2527; }
.hw-card:first-of-type { border-top-color: #F3CB1B; }

/* Why Racchit — cream */
.why { border-top: none; }
.why-figure { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18); }

/* Our promise — gold rule above, and a gold hover on the links */
.promise { border-top: 3px solid #F3CB1B; }
.promise-links a:hover { color: #F3CB1B; }


/* ── ABOUT ─────────────────────────────────────────────────── */

/* stats strip becomes a full-width red band */
.x-stats.x-tone-red {
    margin: 0;
    padding: 0 30px;
    background: var(--paper);
    border-top: none;
    border-bottom: none;
}
.x-stats.x-tone-red .x-stat b { color: #fff; }
.x-stats.x-tone-red .x-stat span { color: rgba(255, 255, 255, 0.75); }
.x-stats.x-tone-red .x-stat:first-child b { color: #F3CB1B; }

/* where we work — cream */
.x-tone-cream.x-section { border-top: none; }

/* architects — red hairline and red placeholder ground */
#architects { border-top: 3px solid #9C2527; }
.x-arch-photo { background: #171717; }
.x-arch .x-city { color: #F3CB1B; }

/* closing statement on gold */
.x-close.x-tone-gold { background: var(--paper); border-top: none; }
.x-tone-gold .promise-links a:hover { color: #9C2527; }

@media (max-width: 768px) {
    .x-stats.x-tone-red { padding: 0 24px; }
}