/* ============================================================
   REFLECTIONS PERFECTION — site styles
   Identity: mirror-blue chrome + deep graphite. Gloss, reflection,
   showroom-shine. Type: Sora (display) · Inter (body + labels).
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#0a0d12; --bg2:#0e1319; --bg3:#131a22; --bg4:#19212c;
  --line:#212a36; --line2:#161d27;
  --text:#f2f5f9; --t2:#c4cdd8; --t3:#8e9aa9; --t4:#66717f;
  --graphite:#7c848e;             /* brushed graphite */
  --accent:#8fc9f2;               /* mirror blue — chrome reflection */
  --accent-d:#549ecf;
  --accent-soft:rgba(143,201,242,.12);
  --ink:#06121d;                  /* text on mirror-blue */
  --r:14px; --r-lg:22px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--t2);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.65; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:'Sora',sans-serif; color:var(--text); font-weight:600; line-height:1.08; letter-spacing:-.03em}
::selection{background:var(--accent); color:var(--ink)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.label{font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:400}
.muted{color:var(--t3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; padding:15px 26px; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:.25s var(--ease); white-space:nowrap}
.btn-primary{background:var(--text); color:#090c10; font-weight:700}
.btn-primary:hover{background:#fff; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--graphite); background:rgba(255,255,255,.04)}
.btn-accent{background:var(--accent); color:var(--ink); font-weight:700}
.btn-accent:hover{background:#a9d7f7; transform:translateY(-2px)}

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:20px 28px; transition:.3s var(--ease)}
.nav.scrolled{background:rgba(10,13,18,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line2); padding:14px 28px}
.brand{font-family:'Sora',sans-serif; font-weight:700; font-size:17px; letter-spacing:.04em; color:#fff; display:flex; align-items:center; gap:11px}

/* ---------- RP badge lockup ---------- */
.badge{display:block; flex:none}
.badge-nav{width:44px; height:44px; transition:.25s var(--ease)}
.brand:hover .badge-nav{transform:scale(1.05)}
.nav.scrolled .badge-nav{width:38px; height:38px}
.badge-hero{width:clamp(104px,15vw,148px); height:clamp(104px,15vw,148px); filter:drop-shadow(0 10px 40px rgba(0,0,0,.45))}
.badge-foot{width:40px; height:40px}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{font-size:14px; color:var(--t2); transition:.2s}
.nav-links a:hover{color:#fff}
.nav-links .btn{padding:11px 20px}
.nav-links a.btn-accent{color:var(--ink)}
.nav-links a.btn-accent:hover{color:var(--ink)}
.mobile-menu a.btn-accent{color:var(--ink)}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.burger span{width:24px; height:2px; background:#fff; transition:.25s}
.mobile-menu{position:fixed; inset:0; z-index:65; background:rgba(8,11,15,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; opacity:0; pointer-events:none; transition:.3s}
.mobile-menu.open{opacity:1; pointer-events:auto}
.mobile-menu a{font-family:'Sora',sans-serif; font-size:26px; color:#fff; font-weight:600}
.mobile-menu .btn{margin-top:14px; font-size:12.5px}
.menu-close{position:absolute; top:18px; right:22px; background:none; border:0; color:#fff; font-size:40px; line-height:1; cursor:pointer; padding:8px; font-family:'Inter',sans-serif; font-weight:300}
.menu-close:hover{color:var(--accent)}

/* ---------- full-bleed video panel ---------- */
.panel{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.panel-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.panel-shade{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(6,9,13,.55) 0%,rgba(6,9,13,.15) 38%,rgba(6,9,13,.55) 72%,rgba(6,9,13,.94) 100%)}
.grain::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.26; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* hero — centered seal lockup */
.hero{align-items:center}
.hero-inner{position:relative; z-index:5; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.hero-lockup{display:flex; flex-direction:column; align-items:center; text-align:center}
.hero-word{margin:26px 0 34px; display:flex; flex-direction:column; gap:8px}
.hero-word span{font-family:'Sora',sans-serif; font-weight:600; color:#fff; font-size:clamp(21px,4vw,34px); letter-spacing:.34em; text-indent:.34em; line-height:1.1; text-shadow:0 2px 24px rgba(0,0,0,.5)}
/* responsive hero: web clip vs lighter mobile clip */
.hero-mob{display:none}
@media(max-width:900px){ .hero-web{display:none} .hero-mob{display:block} }
.hero-cta{display:flex; gap:13px; flex-wrap:wrap; justify-content:center}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--t3); display:flex; flex-direction:column; align-items:center; gap:8px}
.scroll-cue::after{content:''; width:1px; height:34px; background:linear-gradient(var(--accent),transparent); animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:scaleY(.3)}50%{opacity:1}100%{opacity:0;transform:scaleY(1) translateY(8px)}}

/* ---------- generic section ---------- */
.section{padding:clamp(70px,11vw,140px) 0}
.sec-head{max-width:760px; margin-bottom:54px}
.sec-head .label{margin-bottom:18px; display:block}
.sec-head h2{font-size:clamp(30px,5.4vw,58px); margin-bottom:18px}
.sec-head p{font-size:clamp(15px,1.9vw,18px); color:var(--t3); max-width:560px}

/* ---------- gallery wall (ambient autoplay) ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gtile{position:relative; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; background:var(--bg3); border:1px solid var(--line2)}
.gtile video,.gtile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:1s var(--ease)}
.gtile:hover video,.gtile:hover img{transform:scale(1.06)}
.gtile .cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 14px 13px; font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:linear-gradient(transparent,rgba(6,9,13,.9)); opacity:.92; transition:.3s}
.gtile .cap .tag{color:var(--accent)}
.gtile:hover .cap{opacity:1}

/* ---------- split feature ---------- */
.feature{display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:var(--bg2)}
.feature-media{position:relative; min-height:460px}
.feature-media video,.feature-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.feature-text{padding:clamp(34px,5vw,64px); display:flex; flex-direction:column; justify-content:center}
.feature-text h2{font-size:clamp(28px,4vw,46px); margin-bottom:20px}
.feature-text p{margin-bottom:18px; font-size:16px; color:var(--t3)}
.feature-text .chk{list-style:none; display:grid; gap:11px; margin:8px 0 28px}
.feature-text .chk li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--t2)}
.feature-text .chk li::before{content:'✓'; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:10px; font-weight:700; line-height:1}

/* ---------- service cards ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px}
.svc{background:var(--bg2); border:1px solid var(--line2); border-radius:var(--r-lg); padding:28px 26px}
.svc .num{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.24em; color:var(--accent); display:block; margin-bottom:16px}
.svc h3{font-size:18px; margin-bottom:10px}
.svc p{font-size:13.5px; color:var(--t3); line-height:1.6}

/* ---------- stat band ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); padding:48px 0}
.stat .n{font-family:'Sora',sans-serif; font-size:clamp(34px,5vw,54px); color:#fff; font-weight:700; letter-spacing:-.03em}
.stat .n em{font-style:normal; color:var(--accent)}
.stat .l{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--t3); margin-top:6px}

/* ---------- reviews ---------- */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rev{background:var(--bg2); border:1px solid var(--line2); border-radius:var(--r-lg); padding:30px}
.rev .stars{color:var(--accent); letter-spacing:3px; font-size:14px; margin-bottom:16px}
.rev p{font-size:15px; color:var(--t2); line-height:1.7; margin-bottom:20px}
.rev .who{font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.08em; color:var(--t3); text-transform:uppercase}
.rev .who b{color:#fff; font-weight:700}

/* ---------- closing CTA / visit ---------- */
.cta-band{position:relative; border-radius:var(--r-lg); overflow:hidden; padding:clamp(60px,9vw,110px) 40px; text-align:center; border:1px solid var(--line2)}
.cta-band>img,.cta-band>video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.cta-band::after{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(6,9,13,.72),rgba(6,9,13,.9))}
.cta-band .inner{position:relative; z-index:2}
.cta-band h2{font-size:clamp(32px,6vw,64px); color:#fff; margin-bottom:18px}
.cta-band p{color:var(--t2); max-width:480px; margin:0 auto 30px; font-size:17px}
.cta-band .hero-cta{justify-content:center}
.visit-meta{display:flex; justify-content:center; gap:clamp(22px,5vw,56px); flex-wrap:wrap; margin-top:34px}
.visit-meta .vm{font-family:'Inter',sans-serif; text-align:center}
.visit-meta .vm b{display:block; font-size:15px; color:#fff; font-weight:600; margin-bottom:4px}
.visit-meta .vm span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--t3)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line2); background:var(--bg); padding:64px 0 40px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:48px}
.foot .brand{font-size:15px; letter-spacing:.18em; margin-bottom:16px; gap:14px}
.foot p{font-size:14px; color:var(--t3); max-width:280px}
.foot h4{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--t4); font-weight:400; margin-bottom:16px}
.foot ul{list-style:none; display:grid; gap:10px}
.foot ul a{font-size:14.5px; color:var(--t2)}
.foot ul a:hover{color:#fff}
.foot-bot{border-top:1px solid var(--line2); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--t4); font-family:'Inter',sans-serif; letter-spacing:.05em}

/* ---------- call FAB (mobile) ---------- */
.call-fab{display:none; position:fixed; bottom:20px; right:20px; z-index:70; width:56px; height:56px; border-radius:50%; background:var(--accent); color:var(--ink); align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(0,0,0,.5); font-size:22px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:1fr 1fr}
  .feature{grid-template-columns:1fr}
  .feature-media{min-height:320px}
  .stats{grid-template-columns:repeat(2,1fr); gap:32px 20px}
  .rev-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
  .call-fab{display:flex}
}
@media(max-width:540px){
  .wrap{padding:0 18px}
  .gallery{grid-template-columns:1fr 1fr; gap:8px}
  .svc-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}