:root{
  --black:#0B0B0C; --ink:#1A1A1B; --yellow:#C9A227; --yellow-soft:#E8CE86; --white:#FFFFFF; --paper:#F7F7F5; --gray:#6b6660;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:78px;}
body{ margin:0; font-family:'Roboto',sans-serif; background:var(--white); color:var(--black); overflow-x:hidden; }
.hdg{ font-family:'Roboto',sans-serif; font-weight:900; }
.container-n{ max-width:1180px; margin:0 auto; padding:0 22px; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:'Roboto',sans-serif; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* nav */
.nav-r{ position:fixed; inset:0 0 auto 0; z-index:1000; padding-top:env(safe-area-inset-top,0px); background:rgba(11,11,12,.9); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-r .row-in{ display:flex; align-items:center; justify-content:space-between; padding:10px 15px ; gap:1rem; }
.logo-r{ font-weight:700; color:var(--white); font-size:1.05rem; display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.logo-r .sq{ width:11px; height:11px; background:var(--yellow); display:inline-block; }
.nav-links-r{ display:none; align-items:center; gap:1.8rem; }
.nav-links-r a{ color:#d8d6d3; font-size:.88rem; font-weight:500; }
.nav-links-r a:hover{ color:var(--yellow); }
.btn-r-yellow{ background:var(--yellow); color:var(--black); font-weight:700; font-size:.84rem; padding:.55rem 1.2rem; border-radius:100px; display:inline-block; transition:.25s; border:2px solid var(--yellow); white-space:nowrap; }
.btn-r-yellow:hover{ background:transparent; color:var(--yellow); }
.btn-r-outline{ border:2px solid rgba(255,255,255,.35); color:var(--white); font-weight:700; font-size:.84rem; padding:.55rem 1.2rem; border-radius:100px; display:inline-block; transition:.25s; white-space:nowrap; }
.btn-r-outline:hover{ border-color:var(--white); }
@media (min-width:992px){ .nav-links-r{ display:flex; } }

section{ padding:76px 0; }
.section-paper{ background:var(--paper); }
.eyebrow-r{ color:var(--yellow); font-weight:700; font-size:.85rem; margin-bottom:.9rem; display:inline-block; }
.shead-r{ margin-bottom:2.6rem; }
.shead-r h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin:0 0 .6rem; }
.shead-r p{ color:var(--gray); max-width:46ch; margin:0; font-size:.96rem; }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* hero */
.hero-r{ position:relative; background:var(--black); color:var(--white); padding:132px 0 64px; overflow:hidden; }
.hero-r::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 20%,#000 30%,transparent 85%);
  mask-image:radial-gradient(ellipse 70% 60% at 30% 20%,#000 30%,transparent 85%); }
.hero-r .container-n{ position:relative; z-index:1; }
.hero-photo-wrap{ position:relative; max-width:300px; margin:20px auto 2.2rem; }
.hero-photo{ position:relative; aspect-ratio:4/5; border-radius:26px; background:radial-gradient(circle at 32% 26%, var(--yellow-soft), var(--yellow) 62%, #6f5620); display:flex; align-items:center; justify-content:center; box-shadow:0 24px 50px rgba(0,0,0,.45); overflow:hidden; }
.hero-photo span{ font-size:4.2rem; font-weight:900; color:var(--black); font-family:'Roboto',sans-serif; }
.hero-photo small{ position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:.62rem; color:rgba(11,11,12,.55); letter-spacing:.03em; }
.hero-badge{ position:absolute; bottom:-16px; right:-10px; background:var(--white); color:var(--black); border-radius:14px; padding:.75rem 1rem; box-shadow:0 14px 30px rgba(0,0,0,.35); font-size:.78rem; display:flex; align-items:center; gap:.6rem; }
.hero-badge b{ display:block; font-size:1.05rem; color:var(--black); }
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:#2fbf71; flex:0 0 auto; }
.hero-r h1{ font-size:clamp(2.1rem,7vw,3.2rem); line-height:1.06; text-align:center; margin:0 0 .9rem; }
.hero-r .role{ color:var(--yellow); font-weight:700; font-size:.95rem; text-align:center; display:block; margin-bottom:1rem; }
.hero-r .desc{ color:#c9c6c1; font-size:1rem; line-height:1.65; text-align:center; max-width:44ch; margin:0 auto 1.8rem; }
.hero-ctas{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.hero-stats{ display:flex; justify-content:center; flex-direction: row; gap:2.4rem; margin-top:2.8rem; flex-wrap:nowrap; }
.hero-stat b{ display:block; font-size:1.5rem; font-weight:800; color:var(--yellow); }
.hero-stat span{ font-size:.78rem; color:#c9c6c1; }

@media (min-width:992px){
  .hero-r{ padding:158px 0 96px; }
  .hero-r .row-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; text-align:left; }
  .hero-r h1,.hero-r .role,.hero-r .desc{ text-align:left; margin-left:0; margin-right:0; }
  .hero-ctas{ justify-content:flex-start; }
  .hero-stats{ justify-content:flex-start; margin-top:3.2rem; }
  .hero-photo-wrap{ max-width:320px; margin:0 0 0 auto; transform:rotate(3deg); }
  .hero-photo-wrap::after{ content:''; position:absolute; inset:18px -18px -18px 18px; border:2px solid rgba(201,162,39,.4); border-radius:26px; z-index:-1; }
}

/* about */
.about-quote{ background:var(--black); color:var(--white); border-radius:18px; padding:2.2rem 2rem; position:relative; }
.about-quote::before{ content:'“'; position:absolute; top:.2rem; left:1.1rem; font-size:3.5rem; color:var(--yellow); font-family:Georgia,serif; line-height:1; opacity:.7; }
.about-quote p{ position:relative; z-index:1; font-size:1.05rem; line-height:1.6; margin:.6rem 0 1.2rem; }
.about-quote strong{ color:var(--yellow); font-size:.85rem; }
@media (min-width:992px){
  .about-row{ display:grid; grid-template-columns:1.3fr .9fr; gap:3rem; align-items:start; }
  .about-quote{ margin-top:1.4rem; }
}

/* phone slider */
.phone-section{ overflow:hidden; }
.phone-stage{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.phone-wrap{ position:relative; }
.phone-frame{ width:250px; height:508px; background:var(--black); border-radius:38px; padding:12px; box-shadow:0 30px 60px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06); position:relative; }
.phone-notch{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:84px; height:20px; background:var(--black); border-radius:0 0 14px 14px; z-index:3; }
.phone-screen{ width:100%; height:100%; border-radius:26px; overflow:hidden; position:relative; background:var(--ink); }
.phone-play-btn{ appearance:none; border:0; padding:0; width:100%; height:100%; cursor:pointer; position:relative; display:block; }
.phone-thumb{ position:absolute; inset:0; }
.phone-play-btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.75) 100%); }
.play-ic{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--black); display:flex; align-items:center; justify-content:center; font-size:1.15rem; z-index:2; transition:transform .25s; }
.phone-play-btn:hover .play-ic{ transform:translate(-50%,-50%) scale(1.08); }
.phone-caption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.1rem 1rem; text-align:left; color:var(--white); }
.phone-caption strong{ display:block; font-size:.92rem; line-height:1.3; margin-bottom:.25rem; }
.phone-caption span{ font-size:.72rem; color:#d8d6d3; }
.phone-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.12); background:var(--white); box-shadow:0 8px 20px rgba(0,0,0,.12); font-size:1.2rem; color:var(--black); cursor:pointer; transition:transform .2s, background .2s; z-index:4; }
.phone-arrow:hover{ background:var(--yellow); }
.phone-arrow.prev{ left:-6px; }
.phone-arrow.next{ right:-6px; }
@media (min-width:576px){ .phone-arrow.prev{ left:-56px; } .phone-arrow.next{ right:-56px; } }
.phone-dots{ display:flex; gap:8px; }
.phone-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(0,0,0,.15); padding:0; cursor:pointer; transition:.25s; }
.phone-dots button.active{ background:var(--yellow); width:22px; border-radius:5px; }
.phone-disclaimer{ color:var(--gray); font-size:.76rem; text-align:center; max-width:38ch; }

/* video modal */
.video-modal{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:1.2rem; background:rgba(6,6,7,.92); }
.video-modal.open{ display:flex; }
.video-modal-inner{ width:100%; max-width:900px; }
.video-modal-head{ display:flex; justify-content:space-between; align-items:center; color:var(--white); margin-bottom:.8rem; gap:1rem; }
.video-modal-head h4{ font-size:1rem; margin:0; font-weight:700; }
.video-modal-close{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:none; color:var(--white); font-size:1.3rem; cursor:pointer; line-height:1; }
.video-modal-close:hover{ background:rgba(255,255,255,.1); }
.video-modal video{ width:100%; border-radius:14px; background:#000; display:block; aspect-ratio:16/9; }

/* gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 250px;
    gap: 12px;
}

.gallery-item {
    position: relative;

    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #1c1c1d, #0B0B0C);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8f8b87;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-item svg{ width:26px; height:26px; opacity:.55; margin-bottom:.35rem; }
.gallery-item span{ font-size:.68rem; letter-spacing:.02em; }
@media (min-width:992px){
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:120px; }
  .gallery-item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery-item:nth-child(2){ grid-column:span 2; }
  .gallery-item:nth-child(3){ grid-row:span 2; }
  .gallery-item:nth-child(4){ grid-column:span 1; }
  .gallery-item:nth-child(5){ grid-column:span 2; }
  .gallery-item:nth-child(6){ grid-column:span 1; }
}

/* reviews */
.rev-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.rev-card{ background:var(--white); border:1px solid rgba(0,0,0,.07); border-radius:14px; padding:1.3rem 1.2rem; box-shadow:0 4px 20px rgba(0,0,0,.05); }
.rev-top{ display:flex; align-items:center; gap:.65rem; margin-bottom:.5rem; }
.rev-avatar{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; }
.rev-name{ font-weight:700; font-size:.86rem; }
.rev-time{ font-size:.7rem; color:var(--gray); }
.rev-stars{ color:#F5B400; font-size:.82rem; letter-spacing:1px; margin:.1rem 0 .5rem; }
.rev-text{ font-size:.85rem; color:#3c3c3c; line-height:1.55; margin:0; }
.rev-disclaimer{ color:#9a968f; font-size:.72rem; text-align:center; margin-top:1.4rem; }
@media (min-width:768px){ .rev-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .rev-grid{ grid-template-columns:repeat(4,1fr); } }

/* final cta */
.final-cta{ background:var(--black); color:var(--white); text-align:center; }
.final-cta h2{ font-size:clamp(1.7rem,4vw,2.6rem); max-width:20ch; margin:0 auto 1.6rem; }
.final-cta .row-in{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

footer.foot-r{ background:var(--black); color:#8f8b87; padding:2.2rem 0; text-align:center; font-size:.8rem; }
footer.foot-r a{ color:#c9c6c1; }
footer.foot-r a:hover{ color:var(--yellow); }

.wa-r{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:1100; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.3); }
.wa-r:hover{ transform:scale(1.06); }