/* ============================================================
   NARDO DETAILING — shared styles
   Identity: "Nardo Grey" graphite monochrome + cool ceramic-ice accent.
   Type: Sora (display) · Inter (body + labels).
   Deliberately distinct from the Carma build (red / Fraunces).
   ============================================================ */

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

:root{
  --bg:#0b0c0e; --bg2:#101216; --bg3:#15181e; --bg4:#1b1f26;
  --line:#23262d; --line2:#181b21;
  --text:#f3f4f6; --t2:#c6cbd3; --t3:#929aa6; --t4:#6c7480;
  --grey:#71767c;                 /* Nardo Grey — the namesake paint */
  --accent:#5fcbe0;               /* ceramic / water ice-blue */
  --accent-d:#37a7c0;
  --accent-soft:rgba(95,203,224,.12);
  --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:#04161a}

.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:#0a0b0d; 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(--grey); background:rgba(255,255,255,.04)}
.btn-accent{background:var(--accent); color:#04161a; font-weight:700}
.btn-accent:hover{background:#7ad8ea; 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(11,12,14,.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}
.brand .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}
.brand-logo{height:34px; width:auto; display:block}
.foot .brand .brand-logo{height:38px}
.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}
.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:55; background:rgba(9,10,12,.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}

/* ---------- 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(7,8,10,.55) 0%,rgba(7,8,10,.15) 38%,rgba(7,8,10,.55) 72%,rgba(7,8,10,.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 */
.hero-inner{position:relative; z-index:5; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px 11vh}
.hero h1{font-size:clamp(40px,8vw,92px); color:#fff; font-weight:700; letter-spacing:-.02em; line-height:1.02}
/* responsive hero: landscape clip on web, vertical clip on mobile */
.hero-mob{display:none}
@media(max-width:900px){ .hero-web{display:none} .hero-mob{display:block} }
.hero h1 em{font-style:normal; color:var(--grey)}
.hero .sub{max-width:520px; margin:22px 0 30px; font-size:clamp(16px,2.1vw,19px); color:var(--t2)}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap}
.hero-meta{position:absolute; z-index:5; top:50%; right:28px; transform:translateY(-50%); display:flex; flex-direction:column; gap:22px; text-align:right}
.hero-meta .m{font-family:'Inter',sans-serif}
.hero-meta .m b{display:block; font-size:26px; color:#fff; font-weight:700; font-family:'Sora',sans-serif}
.hero-meta .m span{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--t3)}
.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)}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); background:var(--bg2); overflow:hidden; padding:18px 0}
.marquee-track{display:flex; gap:42px; white-space:nowrap; animation:marq 32s linear infinite; width:max-content}
.marquee-track span{font-family:'Sora',sans-serif; font-size:clamp(18px,2.6vw,26px); font-weight:600; color:var(--t4); display:flex; align-items:center; gap:42px; letter-spacing:-.02em}
.marquee-track span::after{content:'✦'; color:var(--accent); font-size:13px}
@keyframes marq{to{transform:translateX(-50%)}}

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

/* ---------- service video cards ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.svc{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:380px; display:flex; align-items:flex-end; border:1px solid var(--line2); isolation:isolate}
.svc video,.svc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:1.1s var(--ease)}
.svc:hover video,.svc:hover img{transform:scale(1.05)}
.svc::after{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,9,11,.1) 30%,rgba(8,9,11,.92) 100%)}
.svc-body{position:absolute; top:0; left:0; right:0; z-index:2; padding:24px}
.svc-price{display:none; margin-top:10px; color:var(--accent); font-size:13.5px; font-weight:600; letter-spacing:.02em}
.svc-body .num{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.2em; color:var(--accent); display:block; margin-bottom:12px}
.svc-body h3{font-size:25px; color:#fff; margin-bottom:8px}
.svc-body p{font-size:14.5px; color:var(--t2); max-width:340px}
.svc-body .arrow{margin-top:16px; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff; display:inline-flex; gap:8px; align-items:center}
.svc-body .arrow span{transition:.25s}
.svc:hover .arrow span{transform:translateX(5px)}

/* shared hover price banner — slides over service videos (home cards + services page) */
.svc-cover{position:absolute; inset:0; z-index:3}
.svc .svc-body{pointer-events:none}
.media-banner{position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:var(--accent); color:#04161a; transform:translateY(112%); transition:transform .42s var(--ease)}
.feature-media:hover .media-banner, .feature-media:focus-within .media-banner, .svc:hover .media-banner, .svc:focus-within .media-banner{transform:translateY(0)}
.media-banner .mb-price{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; letter-spacing:.03em; line-height:1.2}
.media-banner .mb-price small{display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; opacity:.65; margin-top:3px}
.media-banner .mb-book{flex:none; background:#04161a; color:#fff; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:12px 20px; border-radius:100px; white-space:nowrap; transition:.2s var(--ease)}
.media-banner .mb-book:hover{background:#0a2b32; transform:translateX(3px)}

/* ---------- gallery wall ---------- */
.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(7,8,10,.9)); opacity:.92; transition:.3s}
.gtile .cap .tag{color:var(--accent)}
.gtile:hover .cap{opacity:1}
.gtile.tall{grid-row:span 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); position:relative}
.feature-text .chk li::after{content:'✓'; position:absolute; margin-left:-15px; margin-top:0; color:var(--accent); font-size:11px; font-weight:700}

/* ---------- 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 ---------- */
.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 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(8,9,11,.72),rgba(8,9,11,.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}

/* ---------- 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:22px; margin-bottom:16px}
.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:#04161a; 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}
  .hero-meta{display:none}
  .svc-grid{grid-template-columns:1fr}
  .svc{min-height:300px}
  .svc .media-banner{display:none}            /* no hover on touch — show static price below instead */
  .svc-price{display:block}
  .gallery{grid-template-columns:repeat(2,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}
  .foot-grid{grid-template-columns:1fr}
}