/* ============================================================
   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}

/* ---- 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:430px){
  /* Phone number in the header subtitle doesn't fit next to the CTA
     button on real phone widths (iPhone SE/12/13/14/15 = 375-430px) —
     it's white-space:nowrap so it overflows its 130px box instead of
     wrapping, and gets visually hidden under the gold button. It's
     already repeated in the hero CTA and sticky mobile bar, so hide it
     here instead of fighting the overflow. */
  .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}
}

/* 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}
}

/* ---- Fix: WCAG tap-target rule above (line 25) unconditionally set
   display:inline-flex on .header .nav a, which has the same specificity
   as fcr.css's mobile "@media(max-width:680px){.nav a:not(.btn-nav){display:none}}"
   and loads after it — so on phones the full nav (Services/Gallery/Blog/
   Sarasota) was overflowing past the hamburger instead of collapsing. ---- */
@media(max-width:680px){
  .header .nav a:not(.btn-nav){display:none}
  .header .hamburger{display:inline-flex}
  /* sarasota.html has a second, disabled "you are here" pill (.nav-current)
     that also carries .btn-nav for its desktop look — without this it stayed
     visible next to the real CTA on mobile and pushed the hamburger 3-4px
     past the viewport edge (horizontal overflow). */
  .header .nav a.nav-current{display:none}
}