/* Stowe Holdings, Option 1 (Wide): premium layer.
   Loaded last, after enterprise.css (+ enterprise-motion.css on the home page).
   Behaviour: ../../js/pages/premium.js (home page only).

   The aim is the calm, expensive feel of a product site: glass header, two-tone display
   headings with room to breathe, pill buttons, long soft easing, text that lights up as you
   read it, photos that settle as they pass, cards that lift. Layout and content are unchanged.
   With prefers-reduced-motion, every moving part here is switched off. */

:root {
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);   /* hovers and state changes */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* entrances */
  --sec: clamp(88px, 10vw, 184px);                  /* a little more air between sections */
  --soft-shadow: 0 30px 60px -32px rgba(11, 22, 38, 0.38), 0 8px 18px -12px rgba(11, 22, 38, 0.12);
}
body { text-rendering: optimizeLegibility; }

/* =========================================================
   Glass header: the page blurs through it
   ========================================================= */
.hdr {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(11, 22, 38, 0.08);
  transition: background-color 0.5s var(--ease-apple), box-shadow 0.5s var(--ease-apple), border-color 0.5s var(--ease-apple);
}
.hdr.scrolled { background: rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(11, 22, 38, 0.06), 0 12px 32px -24px rgba(11, 22, 38, 0.35); }
.mega, .sheet.open {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}
.nav > a, .nav-trig { transition: color 0.3s var(--ease-apple), box-shadow 0.3s var(--ease-apple); }

/* =========================================================
   Type: two-tone display headings, tighter and larger
   ========================================================= */
.h2 { font-weight: 600; letter-spacing: -0.045em; line-height: 1.03; }
.sec-head .h2 { font-size: clamp(36px, 4.2vw, 76px); }
.fix-intro .h2 { font-size: clamp(30px, 2.8vw, 50px); }
.h2 em { color: #86868b; }
.lead { color: #5b6576; }
.sec-head { row-gap: 28px; }
.her-top .big { letter-spacing: -0.055em; }
.lead-band h2 { font-weight: 600; letter-spacing: -0.04em; }

/* =========================================================
   Buttons: pills that press in
   ========================================================= */
.btn {
  border-radius: 980px;
  transition: background-color 0.35s var(--ease-apple), border-color 0.35s var(--ease-apple), color 0.35s var(--ease-apple),
              box-shadow 0.35s var(--ease-apple), scale 0.25s var(--ease-apple);
}
.btn-primary:hover { box-shadow: 0 12px 28px -14px rgba(31, 91, 255, 0.8); }
.btn:active { scale: 0.97; }
.hero-cta .btn:active { scale: 0.97; }
.form input, .form select, .form textarea { border-radius: 12px; }
.form { border-radius: 24px; }
.mbtn { border-radius: 980px; }

/* =========================================================
   Cards and pictures: soft corners, long gentle lifts
   ========================================================= */
/* the news and video grids drop their hairline rules for space between floating cards */
.news-g, .vids { gap: clamp(16px, 1.4vw, 24px); background: none; border: 0; }
.news-c, .vid { border: 1px solid rgba(11, 22, 38, 0.08); }
.news-c figure { border-bottom: 0; }
.news-c, .vid { border-radius: 20px; overflow: hidden; isolation: isolate;
  transition: translate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), background-color 0.3s; }
.news-c:hover, .vid:hover { translate: 0 -6px; box-shadow: var(--soft-shadow); }
.news-c figure img, .vid figure img, .serve-c figure img { transition: transform 1.1s var(--ease-out), opacity 0.4s; }
.news-c:hover figure img, .vid:hover figure img { transform: scale(1.045); }
.serve-c:hover figure img { transform: scale(1.04); }
.vid figure i { border-radius: 50%; transition: scale 0.4s var(--ease-out); }
.vid:hover figure i { scale: 1.1; }
.fp-img, .fp-img img { border-radius: 20px; }
.fp-img { overflow: hidden; }

/* =========================================================
   Text that lights up as you scroll past it (premium.js wraps the words)
   ========================================================= */
.lit-txt .w { color: var(--lit-dim, rgba(11, 22, 38, 0.18)); transition: color 0.45s var(--ease-apple); }
.lit-txt .w.on { color: var(--lit-on, var(--ink)); }
.lead-band .lit-txt { --lit-dim: rgba(255, 255, 255, 0.2); --lit-on: #e8edf5; }

@media (prefers-reduced-motion: no-preference) {
  /* headlines and leads rise out of a soft blur */
  .motion .sec-head .m, .motion .her-top .big.m, .motion .lead-band h2.m {
    filter: blur(10px);
    transition: opacity 1.2s var(--ease-out) var(--d, 0s), translate 1.3s var(--ease-out) var(--d, 0s), filter 1.2s var(--ease-out) var(--d, 0s);
  }
  .motion .sec-head .m.in, .motion .her-top .big.m.in, .motion .lead-band h2.m.in { filter: blur(0); }
  .motion .m { translate: 0 40px; }

  /* the hero picture shrinks a touch and rounds its corners as you scroll away (premium.js sets --hx) */
  .motion .hero .show { scale: calc(1 - var(--hx, 0) * 0.07); transform-origin: 50% 30%; }
  .motion .hero .show figure { border-radius: calc(var(--hx, 0) * 28px); }

  /* big photos settle from a slight zoom as they travel up the screen (premium.js sets --pz) */
  .motion [data-px] { scale: var(--pz, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .lit-txt .w { color: inherit; transition: none; }
  .btn:active { scale: 1; }
  .news-c:hover, .vid:hover { translate: none; }
}