/* ============================================================
   FCR Alive — Tier 1 motion layer
   Non-destructive additions. Respects prefers-reduced-motion.
   Load AFTER fcr.css.
   ============================================================ */

/* ---- Footer legal links ---- */
.footer-legal-links a{color:var(--gold);text-decoration:none;transition:color .2s}
.footer-legal-links a:hover{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.footer-legal-links{color:var(--muted2)}

/* ---- Sticky header with blur on scroll ---- */
.header{
  position:sticky;top:0;z-index:50;
  transition:background .3s ease,backdrop-filter .3s ease,box-shadow .3s ease;
}
.header.is-stuck{
  background:rgba(6,9,15,.78);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(215,180,108,.08),0 14px 30px rgba(0,0,0,.35);
}

/* ---- WCAG 2.2 tap targets (min 44x44) ---- */
.header .nav a,
.header .nav .btn-nav,
.header .lang-toggle,
.header .hamburger{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mob-nav a,
.mob-nav .btn,
.mob-nav .btn-wa,
.mob-nav .btn-ghost{min-height:44px}

/* ---- Skip link (a11y) ---- */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:10000;
  padding:10px 16px;border-radius:8px;
  background:var(--gold);color:#06090f;
  font-weight:700;font-size:.85rem;text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:12px;outline:3px solid var(--gold2);outline-offset:2px}

/* ---- Hero differentiator strip ---- */
.hero-diff{
  display:inline-block;
  margin:0 0 22px;max-width:560px;
  padding:12px 18px;
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(215,180,108,.10),rgba(215,180,108,0));
  color:var(--text);font-size:1rem;line-height:1.55;
  border-radius:0 12px 12px 0;
}
.hero-diff strong{color:var(--gold);font-weight:700}

/* ---- Logo mark (SVG + wordmark) ---- */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{
  width:40px;height:40px;flex-shrink:0;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 1px rgba(215,180,108,.22),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.logo:hover .logo-mark{transform:rotate(-4deg) scale(1.05);box-shadow:0 6px 22px rgba(215,180,108,.28),0 0 0 1px rgba(215,180,108,.4)}
.logo-text{display:inline-block;line-height:1.1;white-space:nowrap}
.logo-tx{color:var(--gold2);font-style:italic}
@media (max-width:640px){
  .logo{gap:8px}
  .logo-mark{width:32px;height:32px}
  .logo-text{font-size:.85rem;white-space:normal;max-width:130px;line-height:1.05}
  .logo-text small{font-size:.55rem;letter-spacing:.04em;white-space:nowrap}
}
@media (max-width:360px){
  .logo-text small{display:none}
}

/* Scroll progress bar (gold thread) */
.alive-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 100%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear;
  pointer-events:none;
  box-shadow:0 0 10px rgba(215,180,108,.45);
}

/* Cursor spotlight — injected inside .hero and .why-section */
.alive-spotlight{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(
    320px circle at var(--mx,50%) var(--my,50%),
    rgba(215,180,108,.12),
    rgba(215,180,108,0) 60%
  );
  opacity:0;transition:opacity .5s ease;
  mix-blend-mode:screen;
}
.alive-spotlight.is-on{opacity:1}
.hero,.why-section{position:relative}
.hero .alive-spotlight{z-index:2}
.hero > .shell{position:relative;z-index:3}

/* Word-stagger reveal on hero H1 */
.alive-word{
  display:inline-block;
  opacity:0;
  transform:translateY(26px);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1),
             filter .7s ease;
}
.alive-word.is-in{opacity:1;transform:translateY(0);filter:blur(0)}
.hero h1 em.alive-word.is-in{color:var(--gold);text-shadow:0 0 28px rgba(215,180,108,.25)}

/* Sub + badge + CTAs slide-fade after H1 */
.alive-fade{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.alive-fade.is-in{opacity:1;transform:translateY(0)}

/* Service cards: 3D tilt surface */
.svc{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             background .3s ease,
             box-shadow .3s ease;
  will-change:transform;
}
.svc .svc-icon,.svc h3,.svc p,.svc-link{
  transform:translateZ(var(--tz,0px));
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.svc:hover .svc-icon{--tz:30px}
.svc:hover h3{--tz:22px}
.svc:hover p{--tz:14px}
.svc:hover .svc-link{--tz:18px}

/* Subtle gold sheen sweep on svc hover */
.svc::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 40%,rgba(215,180,108,.10) 50%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.svc:hover::after{transform:translateX(120%)}

/* Live activity pill */
.alive-live{
  position:fixed;left:16px;bottom:calc(16px + var(--safe-b));
  z-index:60;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px 10px 12px;
  background:rgba(10,16,24,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line-glow);
  border-radius:999px;
  color:var(--text);font-size:.78rem;line-height:1.3;
  max-width:min(360px,calc(100vw - 32px));
  opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.alive-live.is-in{opacity:1;transform:translateY(0)}
.alive-live-dot{
  width:8px;height:8px;border-radius:50%;background:#3ddc84;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(61,220,132,.55);
  animation:alivePulse 1.8s ease-out infinite;
}
.alive-live b{color:var(--gold);font-weight:600}
.alive-live small{color:var(--muted);display:block;font-size:.68rem;margin-top:1px}

@keyframes alivePulse{
  0%  {box-shadow:0 0 0 0 rgba(61,220,132,.55)}
  70% {box-shadow:0 0 0 12px rgba(61,220,132,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}
}

/* Reduced motion: disable everything decorative */
@media (prefers-reduced-motion: reduce){
  .alive-word,.alive-fade{opacity:1;transform:none;filter:none;transition:none}
  .alive-progress,.alive-spotlight,.alive-live{display:none}
  .svc,.svc .svc-icon,.svc h3,.svc p,.svc-link{transform:none !important;transition:none !important}
  .svc::after{display:none}
  .alive-live-dot{animation:none}
}

/* ============================================================
   Tier 2: Before/After slider, Reviews, Weather badge
   ============================================================ */

/* Weather badge slot (augments hero-badge) */
.alive-weather{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:10px;padding:3px 9px;
  border-left:1px solid var(--line-glow);
  font-size:.78rem;color:var(--gold2);
  opacity:0;transform:translateX(-4px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.alive-weather.is-in{opacity:1;transform:translateX(0)}
.alive-weather-ico{font-size:.95rem;line-height:1}

/* Before / After slider */
.ba-section{padding:clamp(4rem,3rem+4vw,8rem) 0;background:var(--bg)}
.ba-section .headline{max-width:900px}
.ba-section .lead{max-width:620px;margin-bottom:48px}
.ba-grid{
  display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
}
.ba-slider{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:4/3;margin:0;user-select:none;cursor:ew-resize;
  background:#0a1018;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(215,180,108,.14),inset 0 1px 0 rgba(255,255,255,.04);
  touch-action:none;
}
.ba-slider img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;display:block;
}
.ba-slider .ba-clip{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 var(--ba-inset,50%) 0 0);
  will-change:clip-path;
  transition:clip-path .06s linear;
}
.ba-slider .ba-clip img{width:100%;height:100%}
.ba-label{
  position:absolute;top:14px;padding:5px 12px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  backdrop-filter:blur(10px);background:rgba(10,16,24,.68);color:var(--text);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);z-index:3;
}
.ba-label--before{left:14px;color:var(--muted2)}
.ba-label--after{right:14px;color:var(--gold)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--ba-handle-left,50%);
  width:56px;margin-left:-28px;z-index:4;
  background:transparent;border:0;padding:0;cursor:ew-resize;
  display:flex;align-items:center;justify-content:center;color:#0a1018;
  touch-action:none;
}
.ba-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(215,180,108,.2),var(--gold),rgba(215,180,108,.2));
  box-shadow:0 0 20px rgba(215,180,108,.5);
}
.ba-handle svg{
  width:22px;height:22px;position:relative;z-index:2;
  background:var(--gold);border-radius:50%;padding:8px;box-sizing:content-box;
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 3px rgba(215,180,108,.25);
  transition:transform .25s ease;
}
.ba-slider:hover .ba-handle svg,.ba-handle:focus-visible svg{transform:scale(1.1)}
.ba-cap{
  position:absolute;left:14px;bottom:14px;z-index:3;
  font-size:.78rem;color:var(--text);background:rgba(10,16,24,.72);
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
@media (max-width:640px){
  .ba-grid{grid-template-columns:1fr}
  .ba-slider{aspect-ratio:1/1}
}

/* Real work · Stone Ranch · real iPhone-shot video showcase */
.realwork-section{padding:clamp(4rem,3rem+4vw,8rem) 0;background:var(--bg)}
.realwork-section .headline{max-width:900px}
.realwork-section .lead{max-width:640px;margin-bottom:48px}
.realwork-grid{
  display:grid;gap:24px;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:stretch;
}
.realwork-primary,.realwork-secondary{
  margin:0;position:relative;overflow:hidden;
  border-radius:var(--radius);
  background:#0a1018;
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(215,180,108,.18),inset 0 1px 0 rgba(255,255,255,.04);
  isolation:isolate;
}
.realwork-primary video,.realwork-secondary video{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:16/9;
}
.realwork-secondary video{aspect-ratio:9/16;min-height:100%}
.realwork-primary figcaption,.realwork-secondary figcaption{
  position:absolute;left:18px;bottom:18px;right:18px;z-index:2;
  display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(6,9,15,.1),rgba(6,9,15,.82));
  backdrop-filter:blur(10px);
  color:var(--text);font-size:.88rem;
  pointer-events:none;
}
.realwork-primary::after,.realwork-secondary::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.55));
}
.rw-cap-tag{
  display:inline-block;align-self:flex-start;
  padding:3px 10px;border-radius:999px;
  background:var(--gold);color:#0a1018;
  font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:820px){
  .realwork-grid{grid-template-columns:1fr;gap:20px}
  .realwork-secondary video{aspect-ratio:9/16;max-height:80vh}
}

/* Gallery · real project videos (vertical 9:16) */
.gal-grid-videos{
  display:grid;gap:18px;margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.gal-card--video{
  position:relative;margin:0;aspect-ratio:9/16;
  border-radius:var(--radius);overflow:hidden;
  background:#0a1018;cursor:pointer;
  box-shadow:0 0 0 1px var(--line),0 12px 36px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.gal-card--video:hover{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(215,180,108,.32),0 18px 52px rgba(0,0,0,.55);
}
.gal-card--video video{
  display:block;width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.gal-card--video .gal-cap{
  position:absolute;left:10px;right:10px;bottom:10px;
  padding:7px 12px;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--text);
  background:rgba(10,16,24,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;
}
@media (max-width:640px){
  .gal-grid-videos{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media (max-width:380px){
  .gal-grid-videos{grid-template-columns:1fr}
}

/* Reviews strip */
.reviews-section{padding:clamp(3rem,2rem+3vw,6rem) 0;background:var(--bg2)}
.reviews-grid{
  display:grid;gap:22px;margin:40px 0 36px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.review-card{
  padding:24px;border-radius:var(--radius);
  background:var(--card);
  box-shadow:0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,background .4s ease;
}
.review-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.05);
  box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 0 1px rgba(215,180,108,.18);
}
.review-stars{
  color:var(--gold);font-size:1.1rem;letter-spacing:.15em;margin-bottom:14px;
  text-shadow:0 0 14px rgba(215,180,108,.35);
}
.review-card p{color:var(--text);font-size:.92rem;line-height:1.65;margin-bottom:18px}
.review-card footer{display:flex;flex-direction:column;gap:2px;font-size:.78rem}
.review-card footer strong{color:var(--gold2);font-weight:600}
.review-card footer span{color:var(--muted)}
.reviews-cta{display:flex;justify-content:center}

/* Touch devices: no tilt/spotlight (kept simple) */
@media (hover:none){
  .svc{transform:none !important}
  .svc .svc-icon,.svc h3,.svc p,.svc-link{transform:none !important}
  .alive-spotlight{display:none}
}