/* ═══ BIRTH atmosphere ═══════════════════════════════════════════════════════
   One continuous environment behind the page rather than a stack of flat
   blocks. Everything here is CSS gradient only — no rasters, no animation, no
   pseudo-element overlays that could sit above content: each rule layers a
   background-image behind the section's existing background-colour, so text
   contrast and stacking are untouched.

   Rhythm: intensity rises at the focal sections (hero, studies, closing CTA),
   falls at the reading sections (process, founder), and the single light band
   is the deliberate point of rest. */

:root{
  --atmo-blue:70,116,208;      /* BIRTH ambient, the primary brand light */
  --atmo-teal:44,150,170;
  --atmo-deep:6,12,20;
}

/* ── homepage rhythm ─────────────────────────────────────────────────────── */
/* mid: the disciplines grid, lit from the upper left */
.flagship-page .home-services{
  background-image:radial-gradient(78% 52% at 12% 0%,rgba(var(--atmo-blue),.10),transparent 62%),
                   radial-gradient(52% 40% at 92% 100%,rgba(var(--atmo-teal),.05),transparent 68%)}
/* quiet: a reading section, barely lit */
.flagship-page .home-process{
  background-image:radial-gradient(60% 44% at 84% 6%,rgba(var(--atmo-blue),.055),transparent 66%)}
/* mid: the operating model picks the light back up */
.flagship-page .home-powered{
  background-image:radial-gradient(66% 50% at 18% 4%,rgba(var(--atmo-teal),.07),transparent 64%),
                   radial-gradient(50% 38% at 88% 96%,rgba(var(--atmo-blue),.05),transparent 68%)}
/* quiet: accountability rests before the close */
.flagship-page .home-founder{
  background-image:radial-gradient(58% 42% at 78% 8%,rgba(var(--atmo-blue),.05),transparent 66%)}

/* ── light band: the point of rest, bridged rather than cut ──────────────── */
/* the band keeps its paper surface; only its edges pick up the surrounding
   dark so the boundary reads as a transition instead of a seam */
.lightband,.flagship-page .home-explorer{
  background-image:linear-gradient(180deg,rgba(var(--atmo-deep),.10),transparent 9%,
                                          transparent 91%,rgba(var(--atmo-deep),.09))}
/* and the dark side of each boundary softens toward it */
.flagship-page .home-process{box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
.flagship-page .home-powered{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}

/* ── service pages: discipline atmosphere, held well back ────────────────── */
/* The hero product is the subject. The page carries a low-alpha wash of the
   same discipline colour so the surroundings agree with it without competing,
   and BIRTH's own blue stays the anchor everywhere else. */
.svc-atmo{--sa:70,116,208}
.svc-atmo--web{--sa:232,180,115}
.svc-atmo--soft{--sa:74,209,154}
.svc-atmo--auto{--sa:240,151,47}
.svc-atmo--data{--sa:95,224,187}
.svc-atmo--ai{--sa:185,140,255}
.svc-atmo--custom{--sa:194,233,53}
.svc-atmo--research{--sa:224,179,86}
.svc-atmo--sim{--sa:143,157,255}
.svc-atmo--fcast{--sa:122,168,255}

.svc-atmo .svcx-hero{
  background-image:radial-gradient(70% 96% at 78% 4%,rgba(var(--sa),.13),transparent 62%),
                   radial-gradient(46% 60% at 4% 96%,rgba(var(--sa),.06),transparent 68%),
                   linear-gradient(180deg,#040910,#070b12)}
/* the dark sections after the hero keep a trace of it, fading with distance */
.svc-atmo .section:not(.lightband):not(.final){
  background-image:radial-gradient(64% 46% at 88% 0%,rgba(var(--sa),.055),transparent 66%)}
.svc-atmo .section.band-panel{
  background-image:radial-gradient(60% 44% at 10% 4%,rgba(var(--sa),.06),transparent 64%)}
.svc-atmo .section.final{
  background-image:radial-gradient(120% 80% at 50% 120%,rgba(var(--sa),.16),transparent 62%)}
.svc-atmo .svcx-layer{
  background-image:radial-gradient(52% 40% at 6% 10%,rgba(var(--sa),.04),transparent 66%)}

/* interior pages that are not a discipline keep the BIRTH ambient */
.page-hero{background-image:radial-gradient(66% 92% at 80% 4%,rgba(var(--atmo-blue),.11),transparent 62%)}

/* ── reduced motion / print / forced colours ─────────────────────────────── */
@media (forced-colors: active){
  .flagship-page .home-services,.flagship-page .home-process,.flagship-page .home-powered,
  .flagship-page .home-founder,.lightband,.svc-atmo .svcx-hero,.page-hero{background-image:none}
}

/* ── homepage: hero → social → footer ────────────────────────────────────────
   The homepage is now a front door, not the whole building. This section is a
   quiet transition between the hero and the footer, not another content block. */
.home-social{position:relative;padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(151,174,206,.12);
  background-image:radial-gradient(60% 90% at 50% 0%,rgba(var(--atmo-blue),.08),transparent 68%)}
.home-social-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap}
.home-social .eyebrow{margin:0}
.home-social-links{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.75rem,2vw,1.75rem);margin:0;padding:0;list-style:none}
.home-social-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  color:var(--dim);font:600 .95rem/1 var(--sans);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease}
.home-social-links a:hover{color:var(--white);border-bottom-color:rgba(60,233,255,.5)}
.home-social-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:3px}
@media(max-width:640px){
  .home-social-inner{flex-direction:column;align-items:flex-start;gap:1rem}
  .home-social-links{gap:1.25rem}
}
@media(prefers-reduced-motion:reduce){.home-social-links a{transition:none}}

/* Screen-reader-only utility. index.html used .visually-hidden (the hero scene
   description and the social links' "opens in a new tab" suffixes) but the
   class was never defined, so that text rendered on screen. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Enquiry: the six client families lead; specialist disciplines are optional. */
.capability-primary,.capability-specialist{display:flex;flex-wrap:wrap;gap:8px}
/* display:flex overrides the UA rule that hides a closed <details>, so the three
   specialist options were always on screen and the disclosure never disclosed
   anything. Step 1 shows the six families and "not sure" by default. */
.capability-more:not([open]) .capability-specialist{display:none}
.capability-more{margin-top:12px}
.capability-more>summary{cursor:pointer;color:var(--dim);font:600 .85rem/1 var(--sans);
  padding:10px 2px;min-height:44px;display:flex;align-items:center;gap:8px}
.capability-more>summary span{color:var(--dim2);font-weight:500}
.capability-more>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.capability-more[open]>summary{color:var(--white)}
.capability-specialist{padding-top:8px}

/* Enquiry confirmation: the copy control sits with the reference it copies. */
.receipt-actions{margin:.9rem 0 0}
.receipt-copy{padding:8px 12px;min-height:44px;
  border:1px solid var(--line2);border-radius:8px;background:transparent;
  color:var(--dim);font:600 .78rem/1 var(--sans);cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease}
.receipt-copy:hover{color:var(--white);border-color:rgba(60,233,255,.45)}
.receipt-copy:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.receipt-copy.is-copied{color:var(--green,#54ddb7);border-color:rgba(84,221,183,.5);background:rgba(84,221,183,.08)}
@media(prefers-reduced-motion:reduce){.receipt-copy{transition:none}}