*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:   #000;
  --s1:   #0a0a0a;
  --card: #0f0f0f;
  --bdr:  rgba(255,255,255,0.07);
  --w:    #fff;
  --gold: #c8a96e;
  --f:    'Forum', serif;
  --cond: 'Barlow Condensed', sans-serif;
  --body: 'Barlow', sans-serif;
}

html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--w);
  font-family: var(--body);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}

/* ── CURSOR ──────────────────────────── */
#cdot {
  width:5px; height:5px; background:#fff;
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  mix-blend-mode:difference; will-change:transform;
}
#cring {
  width:34px; height:34px;
  border:1.5px solid rgba(255,255,255,0.5);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  mix-blend-mode:difference;
  transition:width .3s cubic-bezier(.23,1,.32,1),
             height .3s cubic-bezier(.23,1,.32,1),
             border-color .3s, background .3s;
  will-change:transform;
}
#cring.hov   { width:58px; height:58px; background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.9); }
#cring.press { width:20px; height:20px; }

/* ── HERO ────────────────────────────── */
#hero {
  position:relative;
  height:100vh; min-height:700px;
  display:flex; align-items:flex-end;
  overflow:hidden; background:#000;
}
#waveCanvas {
  position:absolute; inset:0;
  width:100%; height:100%; z-index:1;
}
#hero::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:52%; z-index:2;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.88) 65%,#000 100%);
  pointer-events:none;
}
.hero-content {
  position:relative; z-index:10;
  width:100%; max-width:1320px; margin:0 auto;
  padding:0 5vw 7vw;
  display:flex; flex-direction:column;
}
.hero-eye {
  font-family: var(--body);
  font-size:11px;
  letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(255,255,255,0.38);
  margin-bottom:2.5rem;
  display:flex; align-items:center; gap:12px;
  opacity:0; animation:fadeUp 1s .2s ease forwards;
}
.hero-eye .stars { color:var(--gold); letter-spacing:0.12em; }
.hero-eye .pipe  { opacity:0.2; }

.hero-h1 {
  font-size: clamp(3.2rem, 6.8vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 3.5rem;
  max-width: 1050px;
}
.hero-h1 .word {
  display:inline-block;
  opacity:0; animation:wordRise .55s ease forwards;
}

.hero-bottom {
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:2rem;
  opacity:0; animation:fadeUp 1s 1.9s ease forwards;
}
.hero-desc {
  font-family: var(--body);
  font-size:15px;
  letter-spacing:0.05em; line-height:1.85;
  color:rgba(255,255,255,0.38); max-width:320px;
}
.hero-btns { display:flex; gap:10px; flex-shrink:0; }

@keyframes wordRise { from{opacity:0;transform:translateY(32px);filter:blur(8px);} to{opacity:1;transform:translateY(0);filter:blur(0);} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }

/* ── BUTTONS ────────────────────────── */
.btn-p {
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 30px; background:#fff; color:#000;
  font-family:var(--body); font-size:12px;
  font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  border:none; border-radius:2px; text-decoration:none; cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.btn-p:hover { background:#e0e0e0; transform:translateY(-2px); box-shadow:0 12px 32px rgba(255,255,255,0.1); }
.btn-p svg { width:12px; height:12px; flex-shrink:0; transition:transform .2s; }
.btn-p:hover svg { transform:translate(2px,-2px); }

.btn-o {
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 30px; background:transparent;
  color:rgba(255,255,255,0.5);
  font-family:var(--body); font-size:12px;
  font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.18); border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.btn-o:hover { color:#fff; border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.04); transform:translateY(-2px); }

/* ── STATS ──────────────────────────── */
#stats { background:var(--s1); border-bottom:1px solid var(--bdr); }
.stats-row { max-width:1320px; margin:0 auto; padding:0 5vw; display:flex; }
.stt { flex:1; padding:3.5rem 2rem; text-align:center; position:relative; }
.stt+.stt::before { content:''; position:absolute; left:0; top:22%; height:56%; width:1px; background:var(--bdr); }
.stt-n {
  font-family:var(--cond);
  font-size:clamp(3rem,5vw,4.5rem);
  font-weight:900;
  letter-spacing:-0.01em;
  color:#fff; display:block; line-height:1;
}
.stt-l {
  font-family:var(--body);
  font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.25); margin-top:10px; display:block;
}
.stt-s {
  font-family:var(--body);
  font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.14); margin-top:4px; display:block;
}

/* ── SECTION COMMON ─────────────────── */
.section { padding:8rem 5vw; }
.si { max-width:1320px; margin:0 auto; }
.lbl {
  font-family:var(--body);
  font-size:11px;
  letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(255,255,255,0.28); display:block; margin-bottom:2rem;
}
.h2 {
  font-family:var(--f);
  font-size:clamp(2.8rem,6vw,5.5rem);
  line-height:0.95; letter-spacing:-0.01em;
  color:#fff; margin-bottom:1.5rem;
}
.body-p {
  font-family:var(--body);
  font-size:15px;
  letter-spacing:0.04em; line-height:1.85;
  color:rgba(255,255,255,0.35); max-width:500px;
}

/* ── REVIEWS ────────────────────────── */
#reviews { background:var(--bg); padding:8rem 0; }
#reviews .si { padding:0 5vw; margin-bottom:5rem; }

/* KEYWORD MARQUEE */
.kw-wrap {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%);
}
.kw-track { display:flex; align-items:center; width:max-content; }
.kw-track.kw1 { animation:kwL 38s linear infinite; }
.kw-track.kw2 { animation:kwR 44s linear infinite; }
@keyframes kwL { 0%{transform:translateX(0)}  100%{transform:translateX(-50%)} }
@keyframes kwR { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.kw-wrap:hover .kw-track { animation-play-state:paused; }

.kword {
  font-size:clamp(3.8rem,8.5vw,7.5rem);
  line-height:1;
  letter-spacing:-0.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.13);
  padding:0 0.45em;
  white-space:nowrap;
  transition:color .35s, -webkit-text-stroke .35s;
  cursor:default;
}
.kword:hover, .kword.on {
  color:#fff;
  -webkit-text-stroke:1px transparent;
}
.kw-sep {
  color:var(--gold);
  font-size:1.5rem;
  padding:0 0.2em;
  -webkit-text-stroke:0;
  opacity:0.5;
}

/* 3 FEATURED CARDS */
.rev-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:2px; padding:0 5vw; margin-bottom:2px;
}
.rev-card {
  background:var(--card);
  border:1px solid rgba(255,255,255,0.06);
  padding:44px 38px 38px;
  position:relative; overflow:hidden;
  transition:background .3s, border-color .3s;
  cursor:default;
}
.rev-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.22),rgba(255,255,255,0));
  transform:scaleX(0); transition:transform .4s ease;
}
.rev-card:hover { background:#141414; border-color:rgba(255,255,255,0.12); }
.rev-card:hover::before { transform:scaleX(1); }
.rev-stars { color:var(--gold); font-size:14px; letter-spacing:0.15em; margin-bottom:1.75rem; display:block; font-family:var(--body); }
.rev-pull {
  font-family:var(--f);
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  line-height:1.15; letter-spacing:-0.01em;
  color:#fff; margin-bottom:1.25rem; display:block;
}
.rev-body {
  font-family:var(--body);
  font-size:14px;
  letter-spacing:0.04em; line-height:1.75;
  color:rgba(255,255,255,0.35); margin-bottom:1.75rem;
}
.rev-who {
  font-family:var(--body);
  font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.2);
}

/* SMALL MARQUEE */
.mwrap {
  overflow:hidden; padding:4px 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%);
}
.mtrack { display:flex; gap:14px; width:max-content; }
.mtrack.r1 { animation:sL 70s linear infinite; }
.mtrack.r2 { animation:sR 62s linear infinite; margin-top:14px; }
@keyframes sL { 0%{transform:translateX(0)}   100%{transform:translateX(-50%)} }
@keyframes sR { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.mwrap:hover .mtrack { animation-play-state:paused; }
.rc {
  flex-shrink:0; width:285px; padding:22px 24px;
  background:var(--card); border:1px solid rgba(255,255,255,0.055);
  border-radius:2px; cursor:default;
  transition:border-color .3s, transform .3s;
}
.rc:hover { border-color:rgba(255,255,255,0.14); transform:translateY(-3px); }
.rc-stars { color:var(--gold); font-size:11px; letter-spacing:0.18em; margin-bottom:10px; font-family:var(--body); }
.rc-q {
  font-family:var(--body);
  font-size:13.5px;
  letter-spacing:0.03em; line-height:1.7;
  color:rgba(255,255,255,0.52); margin-bottom:14px;
}
.rc-who {
  font-family:var(--body);
  font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.2);
}

/* ── PHOTO STRIP ────────────────────── */
#strip { background:var(--bg); overflow:hidden; }
.strip-inner { position:relative; height:70vh; min-height:480px; }
.strip-inner img { width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:brightness(0.42) contrast(1.1) saturate(0.8); display:block; }
.strip-ov { position:absolute; inset:0; background:linear-gradient(to right,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.05) 100%); }
.strip-txt { position:absolute; top:50%; left:5vw; transform:translateY(-50%); max-width:540px; }
.strip-h {
  font-family:var(--f);
  font-size:clamp(2.6rem,5vw,4.8rem);
  line-height:1.05; color:#fff; margin-bottom:1.5rem;
}
.strip-p {
  font-family:var(--body);
  font-size:15px;
  letter-spacing:0.04em; line-height:1.85;
  color:rgba(255,255,255,0.42); margin-bottom:2rem;
}

/* ── PRICING ────────────────────────── */
#pricing { background:var(--s1); }
.plist { margin-top:3.5rem; border-top:1px solid var(--bdr); }
.prow {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:28px 0; border-bottom:1px solid var(--bdr);
  cursor:default; position:relative;
  transition:padding-left .25s;
}
.prow::before { content:''; position:absolute; left:-5vw; right:-5vw; top:0; bottom:0; background:rgba(255,255,255,0); transition:background .25s; pointer-events:none; }
.prow:hover::before { background:rgba(255,255,255,0.022); }
.prow:hover { padding-left:10px; }
.prow:hover .pr-name { color:#fff; }
.prow:hover .pr-amt  { color:#fff; }
.pr-l { display:flex; flex-direction:column; gap:5px; }
.pr-name {
  font-family:var(--body);
  font-size:17px;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.72); transition:color .2s;
}
.pr-note {
  font-family:var(--body);
  font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.22);
}
.pr-amt {
  font-family:var(--cond);
  font-size:2.2rem; font-weight:900;
  letter-spacing:-0.01em;
  color:rgba(255,255,255,0.65);
  white-space:nowrap; transition:color .2s;
}

/* ── SERVICES ───────────────────────── */
#services { background:var(--bg); }
.svgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2px; margin-top:3.5rem; border:1px solid var(--bdr); }
.sv { padding:38px 34px; background:var(--card); cursor:default; transition:background .25s; position:relative; overflow:hidden; }
.sv::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.18),rgba(255,255,255,0)); transform:scaleX(0); transition:transform .4s ease; }
.sv:hover { background:#141414; }
.sv:hover::after { transform:scaleX(1); }
.sv-icon { font-size:20px; margin-bottom:22px; display:block; }
.sv-t { font-size:1.5rem; letter-spacing:0.02em; color:#fff; margin-bottom:12px; line-height:1.1; }
.sv-d { font-size:14px; letter-spacing:0.04em; line-height:1.8; color:rgba(255,255,255,0.3); }

/* ── STATEMENT ──────────────────────── */
#statement { background:#000; padding:10rem 5vw; text-align:center; overflow:hidden; position:relative; }
.stmt-glow { position:absolute; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.025) 0%,transparent 68%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.stmt-h {
  font-family:var(--f);
  font-size:clamp(3.2rem,7vw,6.5rem);
  line-height:1.05; color:#fff;
  margin:0 auto 2rem; max-width:900px;
  position:relative; z-index:1;
}
.stmt-sub {
  font-family:var(--body);
  font-size:16px;
  letter-spacing:0.05em; line-height:1.85;
  color:rgba(255,255,255,0.3);
  max-width:460px; margin:0 auto 3rem;
  position:relative; z-index:1;
}

/* ── FIND US ────────────────────────── */
#findus { background:var(--s1); }
.fugrid { display:grid; grid-template-columns:1.3fr 1fr; gap:2px; margin-top:3.5rem; border:1px solid var(--bdr); overflow:hidden; }
.map-cell { height:440px; overflow:hidden; background:#000; }
.map-cell iframe { width:100%; height:100%; border:none; filter:grayscale(1) invert(1) brightness(0.82) contrast(0.9); }
.info-cell { padding:3rem; background:var(--card); display:flex; flex-direction:column; justify-content:space-between; }
.info-big  { font-family:var(--cond); font-size:5.5rem; font-weight:900; letter-spacing:-0.02em; color:#fff; line-height:1; }
.info-stars { color:var(--gold); font-size:14px; letter-spacing:0.22em; margin:8px 0 12px; font-family:var(--body); }
.info-plats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.info-plt { font-family:var(--body); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; padding:5px 14px; border:1px solid rgba(255,255,255,0.1); border-radius:2px; color:rgba(255,255,255,0.28); }
.info-rc  { font-family:var(--body); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.16); margin-top:5px; }
.info-div { height:1px; background:var(--bdr); margin:2rem 0; }
.info-addr { font-family:var(--body); font-size:15px; letter-spacing:0.04em; line-height:1.9; color:rgba(255,255,255,0.38); margin-bottom:8px; }
.info-hrs  { font-family:var(--body); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.18); }
.info-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:2rem; }
.info-lnk {
  font-family:var(--body);
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.38); text-decoration:none;
  padding:11px 20px; border:1px solid rgba(255,255,255,0.1); border-radius:2px;
  transition:color .2s, border-color .2s, background .2s;
}
.info-lnk:hover { color:#fff; border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.04); }

/* ── CTA ────────────────────────────── */
#cta { background:#000; padding:9rem 5vw; border-top:1px solid var(--bdr); text-align:center; }
.cta-h { font-family:var(--f); font-size:clamp(3.2rem,7vw,6.5rem); line-height:1.05; color:#fff; margin:0 auto 1.5rem; max-width:700px; }
.cta-s  { font-family:var(--body); font-size:16px; letter-spacing:0.05em; line-height:1.85; color:rgba(255,255,255,0.3); margin-bottom:3rem; }

footer { padding:1.75rem 5vw; border-top:1px solid rgba(255,255,255,0.05); background:#000; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.f-logo img { height:28px; width:auto; opacity:0.65; transition:opacity .2s; }
.f-logo:hover img { opacity:1; }
.f-copy { font-family:var(--body); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.18); }
.f-links { display:flex; gap:2rem; }
.f-links a { font-family:var(--body); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.22); text-decoration:none; transition:color .2s; }
.f-links a:hover { color:rgba(255,255,255,0.7); }

.mob { display:none; position:fixed; bottom:0; left:0; right:0; z-index:400; padding:10px 16px 24px; background:linear-gradient(to top,rgba(0,0,0,1) 55%,transparent); }
.mob a { display:block; width:100%; background:#fff; color:#000; padding:17px; font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; text-align:center; text-decoration:none; border-radius:2px; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }

/* GRAIN */
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:0.024; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px; }

@media(max-width:1024px) { .rev-grid { grid-template-columns:1fr; gap:2px; } .fugrid { grid-template-columns:1fr; } .map-cell { height:300px; } }
@media(max-width:768px) {
  /* hide hair animation on mobile — performance + visual clarity */
  #waveCanvas { display:none; }
  /* fade hero from solid black since no canvas */
  #hero { background:#000; }
  #hero::after { display:none; }
  .hero-content { padding:0 6vw 12vw; }

  .mob { display:block; }
  body { padding-bottom:80px; }

  /* hero text */
  .hero-eye { font-size:10px; gap:8px; margin-bottom:2rem; }
  .hero-h1 { font-size:clamp(2rem,9vw,3rem); margin-bottom:2.5rem; line-height:1.1; }
  .hero-bottom { flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .hero-desc { font-size:14px; max-width:100%; }
  .hero-btns { width:100%; }
  .btn-p, .btn-o { flex:1; justify-content:center; padding:15px 16px; font-size:13px; }

  /* stats */
  .stats-row { flex-wrap:wrap; }
  .stt { flex-basis:50%; padding:2.5rem 1rem; }
  .stt:nth-child(3) { flex-basis:100%; border-top:1px solid var(--bdr); }
  .stt:nth-child(3)::before { display:none; }
  .stt-n { font-size:2.5rem; }

  /* sections */
  .section { padding:5rem 6vw; }
  .h2  { font-size:clamp(2.2rem,8vw,3.2rem); }
  .body-p { font-size:14px; }

  /* reviews keyword marquee — smaller on mobile */
  .kword { font-size:clamp(2.2rem,10vw,3.5rem); }

  /* review grid */
  .rev-grid { grid-template-columns:1fr; padding:0 6vw; }
  .rev-pull { font-size:1.5rem; }

  /* strip */
  .strip-txt { max-width:90%; left:6vw; }
  .strip-h { font-size:clamp(2rem,7vw,3rem); }

  /* pricing */
  .pr-name { font-size:15px; }
  .pr-amt  { font-size:1.6rem; }

  /* find us */
  .fugrid { grid-template-columns:1fr; }
  .map-cell { height:260px; }
  .info-cell { padding:2rem; }
  .info-big { font-size:4rem; }

  /* statement & cta */
  .stmt-h { font-size:clamp(2.2rem,8vw,3.5rem); }
  .cta-h  { font-size:clamp(2.2rem,8vw,3.5rem); }

  footer { flex-direction:column; gap:1rem; text-align:center; padding:1.5rem 6vw; }
  .f-links { justify-content:center; flex-wrap:wrap; gap:1.25rem; }
}
@media(min-width:769px) { .mob { display:none !important; } }