/* ============================================================
   ARC & Company — CLEAR GLASS  (v4)
   Loads AFTER style.css + extra.css. Restyles surfaces only.
   Goal: the GLASS FEEL (crisp bright edge, subtle sheen, soft
   depth) but with SOLID, high-contrast panels so all text and
   content stay perfectly sharp — no milky/blurry haze.
   No markup, no content touched. Fully reversible.
   ============================================================ */

/* ---- 1. clean, bright scene (subtle colour only, no haze) ---- */
html{background:#F7F5F2}
body{background:transparent !important}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  /* soft, heavily-blurred industry montage under a translucent wash = depth, not flat.
     The wash sits at high opacity so all foreground text stays crisp and readable. */
  background:
    linear-gradient(165deg,rgba(253,251,248,.90) 0%,rgba(247,245,250,.88) 52%,rgba(242,247,247,.91) 100%),
    url('/assets/img/bg/soft-bg.webp') center/cover no-repeat;
}
body::after{
  content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;opacity:.7;
  background:
    radial-gradient(34% 30% at 8% 4%,   rgba(255,138,80,.20),  transparent 60%),
    radial-gradient(32% 30% at 92% 6%,  rgba(122,110,255,.16), transparent 60%),
    radial-gradient(36% 34% at 94% 94%, rgba(70,205,190,.14),  transparent 60%),
    radial-gradient(46% 42% at 50% 46%, rgba(255,255,255,.7),  transparent 74%);
  animation:auroraDrift 48s ease-in-out infinite alternate;
}
@keyframes auroraDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(1.5%,-1%,0) scale(1.03)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* light section bands stay clean and bright */
.trust,.band-white,.ticker{background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:saturate(120%);backdrop-filter:saturate(120%)}

:root{--r:22px}

/* ---- 2. CLEAR glass surface: solid panel + glass edge ---- */
/* backgrounds are ~94% opaque so text is crisp; the "glass" reads
   in the bright top edge, thin light border and soft shadow. */
.card,.svc .s,.svc-card,.opt,.qcard,.proof-item,.member,.bpost,
.contact-card,.entity,.ind,.loc-card,.quote,.fact,.author-box,
.punch-panel,.team-empty,.mini-cards .card{
  background:linear-gradient(158deg,rgba(255,255,255,.97),rgba(255,255,255,.9)) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  backdrop-filter:blur(6px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 0 rgba(230,224,214,.9),
    0 16px 34px -22px rgba(40,30,70,.28),
    0 4px 10px -6px rgba(40,30,70,.10) !important;
}
.card:hover,.svc .s:hover,.svc-card:hover,.opt:hover,.qcard:hover,
.proof-item:hover,.member:hover,.bpost:hover,.ind:hover,.loc-card:hover{
  background:linear-gradient(158deg,#fff,rgba(255,255,255,.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 26px 52px -24px rgba(40,30,70,.32),
    0 6px 14px -8px rgba(40,30,70,.14) !important;
}

/* ---- 3. sticky nav → clear glass bar ---- */
header#site-head{
  background:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.8) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 20px -16px rgba(40,30,70,.2);
}
.mobile-open .nav-links{background:rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.85) !important}

/* ---- 4. buttons & pills (clear, glassy edge) ---- */
.btn-ghost{
  background:rgba(255,255,255,.9) !important;border:1px solid rgba(230,224,214,.9) !important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 6px 16px -10px rgba(40,30,70,.2)}
.btn-ghost:hover{border-color:rgba(224,87,30,.5) !important}
.btn-ghost.inv{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.32) !important;color:#fff}
.btn-accent{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 30px -10px rgba(224,87,30,.5) !important}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(28,18,48,.45) !important}

.chips span,.inc-chips span,.member-meta span,.prof-meta span,.entity .foci span,
.studio-chip,.lost-links a,.loc-otherlinks a,.soc{
  background:rgba(255,255,255,.88) !important;border:1px solid rgba(230,224,214,.9) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1)}
.lost-links a:hover,.loc-otherlinks a:hover,.studio-chip:hover,.soc:hover{border-color:rgba(224,87,30,.5) !important}

/* ---- 5. form fields: clear ---- */
form input[type=text],form input[type=email],form textarea,form select{
  background:rgba(255,255,255,.94) !important;border:1px solid rgba(230,224,214,.95) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1)}
form input:focus,form textarea:focus,form select:focus{
  border-color:rgba(224,87,30,.6) !important;box-shadow:0 0 0 3px rgba(224,87,30,.14) !important}

/* ---- 6. dark panels → solid, crisp, with glass edge ---- */
.dark,.final,.belief,.ours,.philo,.ind-feat,.pillar,.dept,.dark .card,.quote.dark{
  background:linear-gradient(158deg,rgba(28,23,34,.96),rgba(20,16,26,.94)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:blur(6px) saturate(130%);backdrop-filter:blur(6px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 24px 54px -26px rgba(18,12,32,.5) !important;
}
.dark .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 36px -22px rgba(18,12,32,.45) !important}
.final::before,.belief::before,.ours::before,.ind-feat .tag,.pillar::before{z-index:0}

/* ---- 7. footer ---- */
.sfoot{background:linear-gradient(180deg,#1c1826,#120e1a) !important}
.sfoot .soc{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.16) !important}

/* ---- 8. accessibility / fallbacks ---- */
@media (prefers-reduced-transparency:reduce){
  header#site-head{background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  body::after{opacity:.4}
}
@media (max-width:560px){body::after{opacity:.55}}