/* ===========================================================
   OSRC — premium.css
   Tasteful premium motion layer. Loaded AFTER styles.css so it
   refines (never fights) the existing cinematic system.
   Everything here degrades gracefully: ambient-off + reduced
   motion strip the decorative loops, content stays visible.
   =========================================================== */

/* ============================================================
   GLOBAL FONT + COLOR OVERRIDE
   Use the hero font (Clash Display) across the whole site, in black.
   One variable each → easy to revert. (Mono technical labels keep Geist Mono.)
   ============================================================ */
:root{
  --display:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;
  --mono:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;
  --text:#0a0a0a;
  --muted:#0a0a0a;                 /* secondary text (descriptions, .lead) → black */
  --faint:rgba(10,10,10,0.55);     /* faintest micro-labels → dark neutral grey */
}

/* ---------- 1 · Scroll progress bar (top of page) ---------- */
.scroll-prog{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9990;
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-2));
  box-shadow:0 0 14px rgba(var(--gold-rgb),.55);
  will-change:transform;
}

/* ---------- 2 · Hero aurora (slow drifting light) ---------- */
.hero__aurora{
  /* PERF: normal blending — mix-blend-mode:multiply forced a readback of the
     whole 90vw hero (video included) every frame. The darker gold gradients
     below reproduce the multiplied wash at normal opacity. */
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  opacity:.9;
}
/* PERF: no filter:blur() here — the radial-gradients below are already perfectly
   soft, so the 26px blur was visually a no-op while forcing the GPU to keep two
   ~46vw blurred layers alive for the whole session. */
.hero__aurora::before,
.hero__aurora::after{
  content:""; position:absolute; border-radius:50%; will-change:transform;
}
.hero__aurora::before{
  width:46vw; height:46vw; left:48%; top:8%;
  background:radial-gradient(circle, rgba(118,88,10,.15), transparent 62%);
  animation:aurora-a 22s var(--ease) infinite;
}
.hero__aurora::after{
  width:38vw; height:38vw; left:8%; top:44%;
  background:radial-gradient(circle, rgba(86,63,8,.12), transparent 64%);
  animation:aurora-b 28s var(--ease) infinite;
}
/* translate-only so the heavy blurred layer is cached, not re-rasterised */
@keyframes aurora-a{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-7%,6%) } }
@keyframes aurora-b{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(9%,-5%) } }

/* ---------- 3 · Gold shimmer on the hero accent word ---------- */
.hero__title .gold{
  background-image:linear-gradient(100deg,
    var(--gold) 0%, var(--gold-2) 38%, #e9c659 50%, var(--gold-2) 62%, var(--gold) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldshimmer 7s linear infinite;
}
@keyframes goldshimmer{ to{ background-position:-220% 0; } }

/* ---------- 4 · Primary button light sweep ---------- */
.btn-primary{ overflow:hidden; }
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(110deg, transparent 28%, rgba(255,255,255,.55) 50%, transparent 72%);
  transform:translateX(-130%); transition:transform .85s var(--ease);
  pointer-events:none;
}
.btn-primary:hover::before{ transform:translateX(130%); }

/* ---------- 5 · 3D card tilt (svc / jobcard / statcard) ---------- */
.svc.tilt-3d, .jobcard.tilt-3d, .statcard.tilt-3d{
  transform:perspective(1100px)
            rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))
            translate3d(0,var(--tl,0px),0);
  transition:transform .5s var(--ease);
}
/* pointer-tracking feels tighter than the rest-state ease */
.svc.tilt-3d:hover, .jobcard.tilt-3d:hover, .statcard.tilt-3d:hover{
  --tl:-8px; transition-duration:.16s;
}

/* ---------- 6 · Staggered rise reveal ---------- */
body.js-anim .rise{ will-change:transform,opacity;
  opacity:0; transform:translateY(20px) scale(.988);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
body.js-anim .rise.is-in{ opacity:1; transform:none; will-change:auto; }

/* ---------- 7 · Refined nav link (gold sweep underline) ---------- */
.nav__links a::after{
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow:0 0 8px rgba(var(--gold-rgb),.5);
}

/* ---------- 8 · Glass cards: soft lift shadow on hover ---------- */
.svc, .jobcard{ transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.svc:hover, .jobcard:hover{ box-shadow:0 26px 60px -28px rgba(40,30,8,.45); }

/* ---------- 9 · Showreel morph ghost (hero card → in-motion media) ----------
   A single fixed element that flies/scales between the two video targets.
   Built + driven by premium.js. Styled to match both cards so the swap
   at each end is invisible. */
.morph-ghost{
  position:fixed; left:0; top:0; z-index:40;
  /* sized ONCE to the resting (large) box; the flight is pure transform
     translate+scale — no per-frame width/height/radius writes, so no
     layout or paint work while scrolling */
  border-radius:16px; overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow:0 34px 90px rgba(0,0,0,.5);
  will-change:transform,opacity; pointer-events:none;
  transform-origin:0 0;
  contain:layout paint;
  display:none;
}
.morph-ghost.on{ display:block; }
.morph-ghost__inner{ position:absolute; inset:0; }
.morph-ghost.floating .morph-ghost__inner{ animation:hover-float 6s var(--ease) infinite; }
.morph-ghost .ph{ height:100%; }
.morph-ghost .ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.12), rgba(10,10,12,.55));
}
.morph-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; }
.morph-play span{
  width:var(--play,60px); height:var(--play,60px); border-radius:50%;
  display:grid; place-items:center; padding-left:calc(var(--play,60px) * .06);
  background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.32); color:#fff; font-size:calc(var(--play,60px) * .26);
}
.morph-cap{
  position:absolute; left:0; bottom:0; z-index:2; padding:14px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; display:flex; align-items:center; gap:8px;
}
.morph-cap .rec{ width:7px; height:7px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 10px #ff4d4d; }

/* ---------- 11 · Hero headline — uses sitewide --display var ---------- */
.hero__title{
  font-family:var(--display);
  letter-spacing:-0.005em;
  line-height:1.06;
}
/* light, elegant weights — airy like the reference, with a premium rhythm */
.hero__title.h-xl{ font-size:clamp(2.4rem, 7.2vw, 7.4rem); }
/* The two-column phone hero (styles.css) narrows the headline's column, but
   the display size stays exactly as designed at every width — the card flexes
   instead. Nothing to override here; this note exists because a size rule was
   tried in styles.css first and was silently beaten by .hero__title.h-xl
   above, which lives in this file and loads later. */
.hero__title .line{ font-weight:300; }
/* deeper than --concrete: the thin line keeps its lighter-weight hierarchy but
   now sits over photography, where #6b6353 fell to ~1.9:1 on the dark towers */
.hero__title .line.thin{ font-weight:200; color:#3a352c; }

/* ---------- Hero type over photography ----------
   The background photo runs at full strength with no veil over it, so the
   headline carries its own legibility: a soft cream halo hugging each glyph.
   It reads as a natural glow at normal viewing distance, keeps the dark type
   readable where it crosses the towers, and — unlike a scrim — leaves every
   pixel of the photograph untouched. Pure paint, no per-frame cost. */
.hero__title,
.hero__content .eyebrow,
.hero__scroll,
.hero__content .lead,
.hero__sub{
  text-shadow:
    0 0 10px rgba(238,231,216,.92),
    0 0 26px rgba(238,231,216,.80),
    0 0 52px rgba(238,231,216,.55);
}
/* the gold word paints as a gradient (background-clip:text), which a
   text-shadow would sit on top of — give it a drop-shadow halo instead */
.hero__title .gold{ text-shadow:none; filter:drop-shadow(0 0 14px rgba(238,231,216,.9)) drop-shadow(0 0 34px rgba(238,231,216,.6)); }
/* the gold accent word stays the premium focal point: a touch heavier + italic,
   carrying the animated gold shimmer */
.hero__title .gold{ font-weight:400; font-style:italic; }

/* ---------- Light / elegant heading font (Helvetica Neue Light alternative) ----------
   Inter @ 300 — clean, airy, neutral. OPT-IN ONLY via the `.text-light` class,
   so it never overrides the bold display/hero type (Clash Display, Geist) used
   elsewhere. Add `text-light` to any heading you want in this softer style. */
:root{ --font-light:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.text-light{
  font-family:var(--display);   /* same as the hero font */
  font-weight:300;
  letter-spacing:-0.008em;
  line-height:1.14;
}

/* ---------- 17 · About Us — single holder sliding right → left ----------
   One small hero-card-style image holder, pinned, that slides from the right
   (Bijay) to the left (Nirmala) on scroll. Photo + caption + the side text
   crossfade at the midpoint. JS drives it directly from scroll progress. */
.leadflow{ position:relative; }                 /* height set inline by JS */
.leadflow__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.founders__head{
  position:absolute; top:clamp(84px,12vh,128px); left:var(--gutter); right:var(--gutter); z-index:6;
  display:flex; align-items:baseline; gap:clamp(14px,2vw,26px); flex-wrap:wrap;
}
.founders__title{ font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:1; letter-spacing:-.03em; margin:0; }
.founders__sub{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.founders__progress{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:34px; z-index:6; height:2px; background:var(--line); }
.founders__progress i{ position:absolute; left:0; top:0; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; will-change:transform; background:var(--gold); }

.leadflow__stage{ position:absolute; inset:0; perspective:1500px; }
.leadflow__text{ position:absolute; top:50%; transform:translateY(-50%); max-width:min(34ch,32vw); z-index:2; }
/* tightened — text sits next to its photo instead of clinging to the page edge */
.leadflow__text--1{ left:clamp(var(--gutter), 20vw, 30vw); }   /* Bijay — close to photo (which sits on the right) */
.leadflow__text--2{ right:clamp(var(--gutter), 20vw, 30vw); text-align:right; opacity:0; }   /* Nirmala — close to photo (left) */
.leadflow__text--2 .eyebrow{ justify-content:flex-end; }
.leadflow__text--2 .founder__bio{ margin-left:auto; }
.founder__name{ font-size:clamp(2.2rem,4.8vw,4.2rem); line-height:1; letter-spacing:-.03em; margin:.2em 0 0; }
.founder__role{ font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:14px; }
.founder__bio{ color:var(--muted); margin-top:20px; line-height:1.7; font-size:clamp(.98rem,1.2vw,1.12rem); }

/* no card frame — the transparent cutout stands on its own, bigger, with a
   soft shape-following shadow */
.leadflow__holder{
  position:absolute; top:50%; left:50%; z-index:3;
  width:clamp(300px,33vw,470px); aspect-ratio:4/5;
  transform:translate(-50%,-50%); will-change:transform;
}
.leadflow__media{ position:absolute; inset:0; }
.leadflow__img{ z-index:1; }
/* OSRC logo watermark — backdrop of the STICKY (visible) area, so it sits
   behind the entire sliding motion, not just at one mid-section point. */
/* OSRC logo watermark INSIDE the photo holder, behind the founder cutout
   (the transparent PNG lets the logo show through around the person). */
.leadflow__media::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../assets/logo.png") center 22% / 78% auto no-repeat;
  opacity:.50;
}
.leadflow__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center bottom; opacity:0;
  filter:drop-shadow(0 26px 44px rgba(20,14,4,.36));
}
.leadflow__img.is-active{ opacity:1; }
.leadflow__cap{ display:none; }

/* static fallback (reduced motion / mobile): stack everything, all visible */
.leadflow.is-static{ height:auto !important; }
.leadflow.is-static .leadflow__sticky{ position:relative; height:auto; overflow:visible; padding-block:clamp(60px,9vh,110px); }
.leadflow.is-static .founders__head{ position:relative; left:auto; right:auto; top:auto; margin-bottom:clamp(28px,5vh,50px); }
.leadflow.is-static .leadflow__stage{ position:relative; inset:auto; display:flex; flex-direction:column; align-items:center; gap:clamp(28px,5vh,52px); padding-inline:var(--gutter); }
.leadflow.is-static .leadflow__text{ position:relative; top:auto; left:auto; right:auto; transform:none; opacity:1 !important; text-align:center; max-width:60ch; }
.leadflow.is-static .leadflow__text .eyebrow{ justify-content:center; }
.leadflow.is-static .leadflow__text--2 .founder__bio{ margin:20px auto 0; }
.leadflow.is-static .leadflow__holder{ position:relative; top:auto; left:auto; transform:none !important; width:min(280px,76vw); aspect-ratio:auto; }
.leadflow.is-static .leadflow__media{ position:relative; }
.leadflow.is-static .leadflow__img{ position:relative; opacity:1 !important; aspect-ratio:4/5; }
.leadflow.is-static .leadflow__cap, .leadflow.is-static .founders__progress{ display:none; }

/* MOBILE — single-column stack: holder on top, text below, both stay centered.
   The scroll-driven JS still drives opacity/flip; we just neutralise the
   horizontal slide so the layout fits a phone screen. */
@media (max-width:760px){
  /* HOLDER pinned at top of the stage */
  .leadflow__holder{
    position:absolute !important;
    top:90px !important; left:50% !important;
    transform:translateX(-50%) !important;
    width:min(240px,62vw); aspect-ratio:4/5;
    margin:0 !important;
  }
  /* BOTH texts stack at the same anchor BELOW the holder. The JS toggles
     their opacity to swap; only one is visible at any moment, so the overlap
     is intentional and invisible. */
  .leadflow__text{
    position:absolute !important;
    top:auto !important; bottom:48px !important;
    left:0 !important; right:0 !important;
    transform:none !important;
    width:auto; max-width:none;
    margin:0; padding-inline:var(--gutter);
    text-align:center;
  }
  .leadflow__text .eyebrow{ justify-content:center; }
  .leadflow__text--2 .founder__bio{ margin:20px auto 0; }
  .leadflow__text--1 .founder__bio{ margin-left:auto; margin-right:auto; }
  .leadflow__text .founder__name{ font-size:clamp(1.8rem,7vw,2.4rem); }
  .leadflow__text .founder__bio{ font-size:.95rem; max-width:38ch; }
}

/* ---------- 18 · Our Team (about page) ---------- */
.team__head{ margin-bottom:clamp(38px,5vw,66px); }
.team__title{ font-size:clamp(2.8rem,8vw,6.4rem); font-weight:600; color:var(--text); letter-spacing:-.035em; line-height:.92; margin:.16em 0 0; }
.team__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.team__card{ border-radius:18px; overflow:hidden; transition:transform .55s var(--ease), box-shadow .55s var(--ease); }
.team__card:hover{ transform:translateY(-7px); box-shadow:0 30px 64px -30px rgba(40,30,8,.5); }
.team__photo{ position:relative; aspect-ratio:4/5; background:radial-gradient(120% 95% at 50% 20%, #6b6353, #2a261f 82%); overflow:hidden; }
.team__photo .ph{ height:100%; }
.team__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform 1s var(--ease); }
.team__card:hover .team__photo img{ transform:scale(1.03); }
.team__body{ padding:clamp(22px,2.4vw,32px); }
.team__name{ font-size:clamp(1.4rem,2vw,1.95rem); font-weight:500; letter-spacing:-.02em; margin:0; }
.team__role{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:10px; }
.team__bio{ color:var(--muted); margin-top:16px; line-height:1.6; font-size:.95rem; }
@media (max-width:900px){ .team__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .team__grid{ grid-template-columns:1fr; } }

/* ---------- 19 · Projects page ---------- */
.pj-intro{ padding-top:clamp(150px,22vh,250px); padding-bottom:clamp(20px,3vw,40px); }
.pj-intro h1{ margin:.3em 0 0; }
.pj-mega{
  /* Premium refinement: one continuous solid form per letter — no text-stroke
     (it drew engraved inner contours + corner notches over the gradient), no
     gold-tinted glow. Heavy Inter for smooth, uniform, geometric strokes on
     every platform; a single soft neutral shadow for depth. */
  font-family:"Inter", var(--display); font-weight:800;
  /* fits-any-screen: never wider than the container — the word can never
     break into PROJECT/S on any device (JS auto-fit refines after load) */
  font-size:min(clamp(3.4rem,18vw,15rem), calc((100vw - 2*var(--gutter)) / 5));
  white-space:nowrap;
  line-height:.8; letter-spacing:-.04em; margin:.08em 0 0; pointer-events:none;
  filter:drop-shadow(0 18px 38px rgba(40,30,8,.16)); }
/* same metallic antique-gold fill as the SERVICES word */
.pj-mega,
.pj-mega .split-word > span{
  background-image:linear-gradient(180deg, #dcb653 0%, var(--gold-2) 28%, var(--gold) 62%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.projects-list{ padding-bottom:clamp(40px,6vw,90px); }
.pj{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px,6vw,100px); padding-block:clamp(56px,9vh,128px); }
.pj:nth-child(even) .pj__media{ order:2; }
.pj__media{ position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; cursor:pointer; }
.pj__media img, .pj__media .ph{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease); }
.pj__media:hover img, .pj__media:hover .ph{ transform:scale(1.03); }
.pj__media::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .55s var(--ease);
  background:radial-gradient(130% 90% at 50% 100%, rgba(var(--gold-rgb),.16), transparent 60%); }
.pj__media:hover::after{ opacity:1; }
.pj__num{ font-family:var(--mono); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:600; line-height:1; margin-bottom:16px;
  color:transparent; -webkit-text-stroke:1px var(--line); }
.pj__title{ font-size:clamp(2rem,3.8vw,3.4rem); font-weight:600; letter-spacing:-.025em; line-height:1; margin:0 0 .4em; }
.pj__desc{ color:var(--muted); line-height:1.7; max-width:46ch; font-size:clamp(1rem,1.2vw,1.15rem); }
@media (max-width:860px){
  .pj{ grid-template-columns:1fr; gap:24px; padding-block:clamp(48px,7vh,80px); }
  .pj:nth-child(even) .pj__media{ order:0; }
  .pj__media{ aspect-ratio:16/11; }
}

/* ---------- 15 · Project card hover slideshow — PAGE-PEEL ----------
   On hover the visible photo turns away on its left edge like a page, showing
   the next one already lying underneath. The motion used to run in a floating
   cursor panel that redrew the photo in greyscale on top of the card; it lives
   on the card's own photo now, in full colour. */
.proj__media{ position:absolute; inset:0; z-index:0; perspective:1300px; transform-style:preserve-3d; }
.proj__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s var(--ease); will-change:opacity, transform;
  transform-origin:0% 50%;                 /* hinge on the left edge — the spine */
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  -webkit-user-drag:none; user-select:none;
}
.proj__img.is-active{ opacity:1; }
/* the page being turned: stays visible over the one underneath (z-index is
   scoped inside .proj__media, so it never rises above the scrim or the title) */
.proj__img.is-peeling{
  opacity:1 !important; z-index:2;
  animation:projPeel .7s var(--ease) forwards;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
@keyframes projPeel{
  0%{   transform:rotateY(0deg);    }
  100%{ transform:rotateY(-180deg); }
}
@media (prefers-reduced-motion:reduce){
  .proj__img.is-peeling{ animation:none; opacity:0 !important; }
}
/* dark scrim over the photos so the white title + gold label stay readable */
.proj__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,9,7,.46) 0%, rgba(10,9,7,.12) 32%, rgba(10,9,7,.52) 64%, rgba(10,9,7,.88) 100%);
}

/* ---------- 14 · Hero background video ---------- */
.hero__bgvid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; z-index:0;
}
/* keep the dark headline + nav readable over the footage: a beige wash on the
   lower-left (headline) and along the floor, fading out to the right/top so the
   video stays visible; blends seamlessly into the page below. */
.hero__bg .ph::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(72deg,
      color-mix(in srgb, var(--bg) 84%, transparent) 0%,
      color-mix(in srgb, var(--bg) 30%, transparent) 38%,
      transparent 62%),
    linear-gradient(0deg, var(--bg) 5%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, transparent 22%);
}

/* ---------- 13 · Services mega word — metallic antique-gold fill ----------
   Fills the giant outlined "SERVICES" with a warm gold gradient (highlight →
   antique gold → deep gold-brown) for an embossed, premium feel. Applied to
   the word AND its split-char spans so it holds through the reveal animation. */
.services__mega,
.services__mega .split-word > span{
  background-image:linear-gradient(180deg,
    #dcb653 0%, var(--gold-2) 28%, var(--gold) 62%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.services__mega{
  -webkit-text-stroke:1px rgba(var(--gold-rgb),.32);
  filter:drop-shadow(0 16px 34px rgba(var(--gold-rgb),.14));
}

/* ---------- 12 · Services "drafting" reveal (signature) ----------
   Cards are drawn in by a glowing gold plotter line, then CAD registration
   brackets snap onto the corners — on brand with the blueprint/crosshair theme.
   JS (serviceDraft) drives the timeline; this is just the painted detail. */
.svc__draft{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.svc__scan{
  position:absolute; top:-2%; height:104%; width:2px; left:0;
  transform:translateX(-50%); opacity:0;
  background:linear-gradient(180deg, transparent, var(--gold-2), transparent);
  box-shadow:0 0 18px 3px rgba(var(--gold-rgb),.75);
}
.svc__tick{ position:absolute; width:13px; height:13px; opacity:0; }
.svc__tick--tl{ left:13px;  top:13px;    border-left:1.5px solid var(--gold); border-top:1.5px solid var(--gold); }
.svc__tick--tr{ right:13px; top:13px;    border-right:1.5px solid var(--gold); border-top:1.5px solid var(--gold); }
.svc__tick--bl{ left:13px;  bottom:13px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); }
.svc__tick--br{ right:13px; bottom:13px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); }
/* corner brackets brighten + bloom when you hover the card (CAD "selected"),
   and push outward toward the corners like a viewfinder locking on */
.svc:hover .svc__tick{ box-shadow:0 0 10px rgba(var(--gold-rgb),.6); }
.svc__tick{ transition:transform .55s var(--ease), box-shadow .55s var(--ease); }
.svc:hover .svc__tick--tl{ transform:translate(-5px,-5px); }
.svc:hover .svc__tick--tr{ transform:translate(5px,-5px); }
.svc:hover .svc__tick--bl{ transform:translate(-5px,5px); }
.svc:hover .svc__tick--br{ transform:translate(5px,5px); }

/* ---------- Services card: project photo revealed on hover ----------
   The card's own OSRC project photo sits behind the text, invisible at rest.
   On hover it fades up and drifts into a slow zoom, with a warm scrim so the
   heading and description keep full contrast. Compositor-only (opacity +
   transform), so it costs nothing while scrolling. */
.svc__photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06) translateY(10px);
  transition:opacity .75s var(--ease), transform 8s linear;
  will-change:opacity,transform;
}
.svc.has-photo:hover .svc__photo{ opacity:.62; transform:scale(1.16) translateY(0); }
/* warm scrim shaped around the content: a light veil at the very top so the
   number and arrow stay readable, most open across the middle (where the card
   is empty and the photo should show), strongest at the bottom under the
   title and description. Measured: title 12.4:1, description 4.6:1. */
.svc__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(231,222,206,.40) 0%,
    rgba(231,222,206,.26) 26%,
    rgba(231,222,206,.52) 62%,
    rgba(231,222,206,.90) 100%);
}
/* gold micro-labels deepen on hover — plain gold over a bright photo drops to
   ~2:1; the deeper tone holds ~3.8:1, matching its at-rest legibility */
.svc.has-photo:hover .svc__no,
.svc.has-photo:hover .svc__icon{ color:var(--gold-deep); }
/* description firms up as the photo appears — buys contrast without dimming
   the image the way more scrim would */
.svc__desc{ transition:color .5s var(--ease); }
.svc.has-photo:hover .svc__desc{ color:rgba(28,24,16,.86); }
/* card content must sit above the photo. Exclude the photo and the draft
   overlay explicitly — a bare `> div` also matches them and would push the
   photo over the text and drop the scan line/ticks out of their layer. */
.svc__head, .svc__name, .svc__desc{ position:relative; z-index:2; }
.svc.has-photo > div:not(.svc__photo):not(.svc__draft){ position:relative; z-index:2; }

/* thin gold line sweeping the top edge on hover */
.svc__sweep{
  position:absolute; left:0; top:0; height:1.5px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, transparent, var(--gold-2) 22%, var(--gold) 55%, transparent);
  box-shadow:0 0 12px rgba(var(--gold-rgb),.55);
  transition:transform .7s var(--ease);
}
.svc:hover .svc__sweep{ transform:scaleX(1); }

/* arrow slides diagonally out of its circle */
.svc__icon{ overflow:hidden; }
.svc:hover .svc__icon{ transform:rotate(45deg) scale(1.06); border-color:rgba(var(--gold-rgb),.55); }

/* ---------- 10 · Showreel video fill (hero card + in-motion + ghost) ---------- */
.reel{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0; pointer-events:none;
  background:#1a1916;
}

/* ---------- Graceful degradation ---------- */
[data-ambient="off"] .hero__aurora::before,
[data-ambient="off"] .hero__aurora::after,
[data-ambient="off"] .hero__title .gold{ animation:none; }
[data-ambient="off"] .hero__title .gold{
  -webkit-text-fill-color:var(--gold); color:var(--gold);
}

@media (prefers-reduced-motion:reduce){
  .hero__aurora::before, .hero__aurora::after,
  .scroll-prog, .hero__title .gold{ animation:none; }
  .hero__title .gold{ -webkit-text-fill-color:var(--gold); color:var(--gold); }
  .svc.tilt-3d, .jobcard.tilt-3d, .statcard.tilt-3d{ transform:none; }
}

@media (max-width:760px){
  /* tilt + aurora are desktop-pointer luxuries */
  .svc.tilt-3d, .jobcard.tilt-3d, .statcard.tilt-3d{ transform:none; }
  .hero__aurora{ opacity:.6; }
}

/* ===========================================================
   20 · SERVICES PAGE — accordion catalogue (scoped)
   Engineering-catalogue feel: thin rows. Click → expands inline
   with image, capabilities and selected works. Quiet, technical.
   =========================================================== */
body.services-page{ overflow-x:hidden; }

body.services-page .svx-intro{ padding-top:clamp(150px,22vh,250px); padding-bottom:clamp(40px,7vh,100px); max-width:min(1100px,92vw); }
body.services-page .svx-intro__title{ font-size:clamp(2.6rem,5.8vw,5rem); font-weight:600; letter-spacing:-.03em; line-height:1; margin:.4em 0 .35em; max-width:18ch; }
body.services-page .svx-intro__lead{ max-width:60ch; }

body.services-page .svc-acc{ padding-bottom:clamp(60px,9vh,120px); }
body.services-page .svc-acc__head{
  display:grid; grid-template-columns:80px 1.2fr 1.2fr 60px;
  align-items:center; gap:clamp(18px,3vw,40px);
  padding:18px 24px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
body.services-page .svc-acc__head__r{ justify-self:end; color:var(--gold); font-family:var(--display); font-size:1rem; opacity:.6; }

body.services-page .svc-row{ border-bottom:1px solid var(--line); }
body.services-page .svc-row > summary{
  display:grid; grid-template-columns:80px 1.2fr 1.2fr 60px;
  align-items:center; gap:clamp(18px,3vw,40px);
  padding:clamp(22px,3vh,36px) 24px;
  cursor:pointer; list-style:none;
  transition:background .35s var(--ease), padding-left .35s var(--ease);
}
body.services-page .svc-row > summary::-webkit-details-marker{ display:none; }
body.services-page .svc-row > summary::marker{ display:none; }
body.services-page .svc-row:hover > summary{ background:rgba(var(--gold-rgb),.04); padding-left:32px; }
body.services-page .svc-row[open] > summary{ background:rgba(var(--gold-rgb),.06); }
body.services-page .svc-row__num{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.18em; color:var(--gold);
}
body.services-page .svc-row__name{
  font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2.1rem); font-weight:500; letter-spacing:-.018em;
  color:var(--text);
}
body.services-page .svc-row__sum{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
body.services-page .svc-row__plus{
  position:relative; justify-self:end; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.4);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease);
}
body.services-page .svc-row__plus::before,
body.services-page .svc-row__plus::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--gold);
  transition:transform .45s var(--ease), background .35s;
}
body.services-page .svc-row__plus::before{ width:11px; height:1.5px; transform:translate(-50%,-50%); }
body.services-page .svc-row__plus::after{ width:1.5px; height:11px; transform:translate(-50%,-50%); }
body.services-page .svc-row[open] .svc-row__plus{ border-color:var(--gold); background:rgba(var(--gold-rgb),.08); transform:rotate(180deg); }
body.services-page .svc-row[open] .svc-row__plus::after{ transform:translate(-50%,-50%) scaleY(0); }

/* expanded panel */
body.services-page .svc-row__panel{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4vw,64px);
  padding:clamp(18px,3vh,36px) 24px clamp(40px,5vh,60px);
  align-items:start;
}
body.services-page .svc-row__media{
  position:relative; aspect-ratio:5/4;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow:0 30px 60px -32px rgba(40,30,8,.4);
}
body.services-page .svc-row__media img{ width:100%; height:100%; object-fit:cover; display:block; }
body.services-page .svc-row__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,16,8,0) 60%, rgba(20,16,8,.32) 100%);
}

body.services-page .svc-row__detail{ display:flex; flex-direction:column; gap:clamp(22px,3vh,32px); }
body.services-page .svc-row__lead{ font-size:clamp(1.05rem,1.3vw,1.2rem); line-height:1.55; color:var(--text); max-width:54ch; margin:0; }
body.services-page .svc-row__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); }
body.services-page .svc-row__lbl{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
body.services-page .svc-row__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
body.services-page .svc-row__list li{
  position:relative; padding-left:18px;
  font-size:.95rem; line-height:1.45; color:var(--muted);
}
body.services-page .svc-row__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:1px; background:var(--gold);
}
body.services-page .svc-row__list--linked li{ padding-left:18px; }
body.services-page .svc-row__list--linked a{ color:var(--text); transition:color .35s; border-bottom:1px solid transparent; }
body.services-page .svc-row__list--linked a:hover{ color:var(--gold); border-bottom-color:rgba(var(--gold-rgb),.4); }
body.services-page .svc-row__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border-top:1px solid var(--line); padding-top:18px; margin-top:4px;
  transition:color .35s, padding-left .35s var(--ease);
}
body.services-page .svc-row__cta:hover{ color:var(--gold-2); padding-left:6px; }
body.services-page .svc-row__cta .arrow{ display:inline-block; transition:transform .35s var(--ease); }
body.services-page .svc-row__cta:hover .arrow{ transform:translateX(6px); }

/* details native open/close animation — content slides in */
body.services-page .svc-row__panel{ animation:svc-acc-in .55s var(--ease); }
@keyframes svc-acc-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }

/* MOBILE */
@media (max-width:760px){
  body.services-page .svc-acc__head{ display:none; }
  body.services-page .svc-row > summary{ grid-template-columns:48px 1fr 36px; gap:14px; padding:18px 16px; }
  body.services-page .svc-row__sum{ display:none; }
  body.services-page .svc-row__name{ font-size:1.2rem; }
  body.services-page .svc-row__plus{ width:28px; height:28px; }
  body.services-page .svc-row__panel{ grid-template-columns:1fr; gap:22px; padding:18px 16px 30px; }
  body.services-page .svc-row__cols{ grid-template-columns:1fr; gap:22px; }
}

@media (prefers-reduced-motion:reduce){
  body.services-page .svc-row__panel{ animation:none; }
  body.services-page .svc-row__plus{ transition:none; }
}


/* ===========================================================
   NAV DROPDOWN — Projects → Completed / Ongoing
   =========================================================== */
.nav__drop{ position:relative; display:inline-flex; align-items:center; }
.nav__drop-top::after{ content:" ›"; display:inline-block; margin-left:5px; transform:rotate(90deg); font-size:.85em; opacity:.55; }
.nav__drop-menu{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  display:flex; flex-direction:column; min-width:220px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px;
  padding:8px; gap:2px;
  box-shadow:0 28px 64px -28px rgba(40,30,8,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:70;
}
/* invisible hover-bridge over the gap so the cursor never falls out while
   travelling from "Projects" down to a sub-link */
.nav__drop-menu::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:18px; }
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu,
.nav__drop-menu:hover{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(6px);
}
.nav__drop-menu a{
  padding:12px 14px; border-radius:12px; white-space:nowrap;
  font-size:.92rem; color:var(--text); transition:background .25s, color .25s;
}
.nav__drop-menu a::after{ display:none !important; }   /* no underline animation inside the menu */
.nav__drop-menu a:hover{ background:rgba(var(--gold-rgb),.10); color:var(--gold); }

/* MOBILE — show the sub-links inline, indented, inside the open sheet */
@media (max-width:760px){
  .nav__drop{ display:block; width:100%; }
  body.nav-open .nav__drop-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    min-width:0; background:transparent; border:0; box-shadow:none; padding:0 0 10px 0;
  }
  body.nav-open .nav__drop-menu a{
    font-size:1.05rem; color:var(--muted); padding:14px 0 14px 18px;
    border-bottom:1px solid var(--line-2);
  }
  .nav__drop-top::after{ content:""; }
}

/* deep-linked project flash (from impact map province click) */
.pj--focus{ animation:pjFocus 2.3s var(--ease); border-radius:16px; }
@keyframes pjFocus{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--gold-rgb),0); } 15%,55%{ box-shadow:0 0 0 3px rgba(var(--gold-rgb),.55); } }

/* featured story → project link */
.story__link{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); transition:gap .35s var(--ease), color .35s; }
.story__link:hover{ gap:16px; color:var(--gold-2); }

/* ===========================================================
   DARK-HERO NAV — legible over a dark hero image, reverts to the
   normal beige glass once scrolled onto the light sections.
   Activated by <body class="dark-hero"> (impact, careers).
   =========================================================== */
.nav__logo-light{ display:none; }
body.dark-hero .nav:not(.scrolled){ background:linear-gradient(180deg, rgba(10,8,4,.34) 0%, rgba(10,8,4,0) 100%); }
body.dark-hero .nav:not(.scrolled) .nav__logo-dark{ display:none; }
body.dark-hero:not(.nav-open) .nav:not(.scrolled) .nav__logo-light{ display:block; }
body.dark-hero:not(.nav-open) .nav:not(.scrolled) .nav__links a{ color:rgba(245,239,225,.82); }
body.dark-hero:not(.nav-open) .nav:not(.scrolled) .nav__links a:hover{ color:#fff; }
body.dark-hero:not(.nav-open) .nav:not(.scrolled) .nav__links a[aria-current="page"]{ color:#fff; }
body.dark-hero:not(.nav-open) .nav:not(.scrolled) .btn-ghost{ color:#f5efe1; border-color:rgba(245,239,225,.45); }
body.dark-hero:not(.nav-open) .nav:not(.scrolled) .btn-ghost:hover{ background:rgba(245,239,225,.12); }
body.dark-hero:not(.nav-open) .nav:not(.scrolled) .nav__burger span{ background:#f5efe1; }

/* ===========================================================
   FLOATING CONTACT ACTIONS (lead path) — bottom-right
   =========================================================== */
.fab{ position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); z-index:60; display:flex; flex-direction:column; gap:12px; }
.fab__btn{ display:inline-flex; align-items:center; gap:0; height:52px; width:52px; padding:0; overflow:hidden;
  border-radius:100px; white-space:nowrap; color:#0a0a0a; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 16px 34px -14px rgba(40,30,8,.55); transition:width .45s var(--ease), gap .45s var(--ease), padding .45s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.fab__btn svg{ width:21px; height:21px; flex:none; margin:0 15.5px; }
.fab__btn span{ opacity:0; max-width:0; transition:opacity .35s var(--ease), max-width .45s var(--ease); }
.fab__btn--call{ background:var(--gold); }
.fab__btn--mail{ background:#f0ead9; color:#1c1810; border:1px solid var(--glass-border); }
.fab__btn:hover{ width:160px; padding-right:20px; gap:0; transform:translateY(-2px); box-shadow:0 22px 44px -16px rgba(40,30,8,.6); }
.fab__btn:hover span{ opacity:1; max-width:120px; }
@media (max-width:760px){ .fab__btn span{ display:none; } .fab__btn:hover{ width:52px; padding-right:0; } }

/* Stand down over the contact section + footer — the real phone number, email
   and form are on screen there, so the floating shortcut is redundant, and it
   was sitting on top of the footer links and the form's own fields.
   pointer-events off so it cannot swallow taps while fading. */
.fab{ transition:opacity .4s var(--ease), transform .4s var(--ease); }
.fab.is-away{ opacity:0; transform:translateY(12px) scale(.96); pointer-events:none; }

/* Keep page content clear of the floating contact stack.
   The hero row is justify-content:space-between, so its CTA lands on the right
   gutter — which is exactly where the fixed .fab sits. Measured overlap before
   this rule: 8px at 1440, 14px at 1280, 21px at 1024, 30px at 768. The buttons
   visually merged into the CTA. Reserving the stack's footprint (52px button +
   28px inset + breathing room) moves only the button group; the tagline on the
   left keeps its space. Not needed under 760px — there the CTA is left-aligned
   and already clears the stack by 50px+. */
@media (min-width:761px){
  .hero__actions{ margin-right:96px; }
}
@media (prefers-reduced-motion:reduce){ .fab__btn, .fab__btn span{ transition:none; } }

/* ===========================================================
   SIGNATURE PROJECT — flagship featured story (homepage story 1)
   Scoped to .story.sig so the section footprint/bg are untouched.
   =========================================================== */
.story.sig{ isolation:isolate; }
.story.sig .story__inner{ max-width:760px; }
/* large translucent index number behind the content */
.sig__num{ position:absolute; z-index:1; pointer-events:none; user-select:none;
  left:clamp(-10px,2vw,40px); top:50%; transform:translateY(-50%);
  font-family:var(--display); font-weight:600; line-height:.8;
  font-size:clamp(15rem,34vw,34rem); letter-spacing:-.05em;
  color:#fff; opacity:.05; }
.sig__label{ font-family:var(--mono); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; }
.sig__label::before{ content:""; width:34px; height:1px; background:var(--gold); display:inline-block; }
.sig__title{ font-weight:300; font-size:clamp(2.4rem,5.4vw,4.8rem); line-height:1.02; letter-spacing:-.025em;
  color:#f5efe1; margin:0 0 .5em; max-width:16ch; }
.sig__desc{ color:rgba(244,240,231,.72); font-size:clamp(1.05rem,1.35vw,1.25rem); line-height:1.7; max-width:54ch; margin:0; }
.sig__rule{ height:1px; background:linear-gradient(90deg, rgba(var(--gold-rgb),.5), rgba(244,240,231,.14) 60%, transparent);
  margin:clamp(28px,3.4vw,44px) 0; max-width:560px; transform-origin:left; }
.sig__metrics{ display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,72px); }
.sig__metric b{ display:block; font-family:var(--display); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.9rem,3.4vw,3rem); color:#f5efe1; line-height:1; }
.sig__metric span{ display:block; margin-top:10px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(244,240,231,.5); }
.story.sig .story__link{ margin-top:clamp(28px,3.4vw,44px); }
@media (max-width:560px){ .sig__metrics{ gap:26px 40px; } .sig__num{ opacity:.04; } }

/* ===========================================================
   FIX: Projects dropdown panel is always the light cream surface, so its
   links must stay dark/legible — even on dark-hero pages (impact, careers)
   where top-level nav links are intentionally light. (Mobile open-menu keeps
   its own higher-specificity muted rule.)
   =========================================================== */
.nav__drop-menu a{ color:var(--text) !important; }
.nav__drop-menu a:hover{ color:var(--gold) !important; }

/* ===========================================================
   TOUCH / NO-HOVER — stop paying for layers hover can never use.

   A trace of a touch scroll through the services section (4x CPU throttle)
   put Layerize at 1036ms, the single largest cost — ahead of style recalc
   (670ms) and well ahead of paint (189ms). The page was holding 114
   compositor layers over only 709 DOM nodes, and a large share of them
   existed purely for effects a phone can never trigger.
   =========================================================== */

/* main.js's cursor() returns early on pointer:coarse and never adds
   .has-cursor, but the cursor markup is static — so these stayed as live
   fixed-position composited layers that nothing ever moved. Keyed off the
   class rather than a media query so it also covers reduced-motion and any
   other path where cursor() bails. */
body:not(.has-cursor) .cursor,
body:not(.has-cursor) .xhair,
body:not(.has-cursor) .cursor__glow{ display:none; }

@media (hover:none){
  /* The project-card page-peel is driven by pointerenter/pointerleave and the
     service-card photo reveal by :hover — neither fires on touch, but their
     will-change kept 14 elements promoted for the whole session. Releasing
     the hint costs nothing here because the animation never runs. */
  .proj__img, .svc__photo{ will-change:auto; }
}

/* ==========================================================================
   MOBILE OVERHAUL (<=760px) — contrast + FAB. In premium.css so it overrides
   the token values and .fab rules this file already sets. Desktop untouched.
   ========================================================================== */
@media (max-width:760px){
  /* ---- 5  CONTRAST — darken low-contrast tokens to pass WCAG AA on beige ----
     Measured on #e7dece: --faint at 0.55 blended to ~3.9:1 (fails); 0.7 → ~7:1.
     The gold used for label text (#957010) was 3.4:1; a darker gold clears 4.5. */
  :root{ --faint: rgba(10,10,10,0.70); }
  .eyebrow .idx, .showreel__eyebrow .idx, .footer__craft i,
  .imp-proj__go span, .cat-card__count .arrow{ color:#7a5808; }

  /* ---- 4  last sub-12px labels ---- */
  .morph-cap{ font-size:.78rem; }
  .fab__btn span{ font-size:.85rem; }

  /* ---- 3  FAB — a single primary action; never over content or the menu ---- */
  .fab__btn--mail{ display:none; }               /* one primary (Call) on mobile */
  body.nav-open .fab{ opacity:0; pointer-events:none; }   /* clear the open menu */
  /* the contact form clears the FAB even before is-away fades it */
  .contact__panel, section.contact form{ padding-bottom:88px; }
}