:root{
  --cream:#f1ece3;
  --paper:#e7dfd3;
  --ink:#111411;
  --green:#10251f;
  --green2:#17362d;
  --beige:#c9b499;
  --gold:#c59a58;
}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#f3efe8;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
main{scroll-snap-type:y mandatory}
.screen{height:100vh;min-height:680px;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.topbar{position:fixed;z-index:80;top:0;left:0;width:100%;height:68px;padding:0 3.2vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:linear-gradient(180deg,rgba(8,10,8,.90),rgba(8,10,8,.22),transparent)}
.wordmark{justify-self:start;display:flex;align-items:center;gap:9px;text-decoration:none;color:white}
.wordmark img{width:28px;height:28px;object-fit:contain}
.wordmark b{font-size:15px;letter-spacing:.03em}
.topbar nav{justify-self:center;display:flex;gap:44px}
.topbar nav a{color:#aaa8a3;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.16em}
.topbar nav a:hover{color:white}
.dots{position:fixed;right:19px;top:50%;z-index:70;display:flex;flex-direction:column;gap:10px}
.dots span{width:7px;height:7px;border:1px solid rgba(197,154,88,.75);border-radius:50%}
.dots span.active{background:var(--gold);box-shadow:0 0 0 5px rgba(197,154,88,.11)}
.section-kicker{position:absolute;z-index:8;left:4.3vw;top:84px;font-size:14px;font-weight:800;letter-spacing:.18em;color:#8b7762}

/* HERO */
.hero{background:#161813}
.hero-image{position:absolute;inset:0;background:url("dentistry/reception.jpg") 62% 47%/cover no-repeat;filter:saturate(.82) contrast(1.04) brightness(.78)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,8,.94) 0%,rgba(8,10,8,.77) 30%,rgba(8,10,8,.22) 60%,rgba(8,10,8,.28)),linear-gradient(0deg,rgba(0,0,0,.34),transparent 45%)}
.hero-copy{position:absolute;z-index:6;left:4.5vw;top:17vh;width:45vw;max-width:720px}
.hero-copy small{color:var(--beige);font-size:11px;font-weight:800;letter-spacing:.23em}
.hero h1{margin:22px 0 18px;font:400 clamp(58px,6vw,104px)/.88 Georgia,"Times New Roman",serif;letter-spacing:-.05em}
.hero h1 em{font-style:normal;color:#f0e9de}
.hero-sub{font-size:18px;line-height:1.55;letter-spacing:.09em;text-transform:uppercase;color:#ddd4c8}
.hero-rule{width:58px;height:2px;background:var(--gold);margin:26px 0}
.scope{display:flex;flex-direction:column;gap:7px;color:#d8d0c4;font-size:12px;font-weight:700;letter-spacing:.15em}
.hero-side{position:absolute;z-index:5;right:4vw;bottom:7vh;text-align:right;color:#d9d0c4;font-size:10px;font-weight:700;letter-spacing:.18em;line-height:1.55}

/* HARMONY */
.harmony{background:var(--cream);color:var(--ink);padding:120px 4.3vw 4vh}
.harmony .section-kicker{color:#87735d}
.harmony-head{height:20vh;display:grid;grid-template-columns:45% 38% 17%;align-items:end}
.harmony-head h2{margin:0;font:400 clamp(50px,5vw,86px)/.90 Georgia,serif;letter-spacing:-.045em}
.harmony-head p{margin:0 0 8px;font-size:16px;line-height:1.6;color:#5e5b55;max-width:530px}
.mosaic{height:min(66vh,calc(74vh - 120px));margin-top:2vh;display:grid;grid-template-columns:1.15fr .86fr .65fr;grid-template-rows:1fr 1fr;gap:8px}
.mosaic figure{margin:0;overflow:hidden;position:relative;background:#d5cec4;cursor:zoom-in}
.mosaic img{width:100%;height:100%;object-fit:cover;}
.mosaic figure:hover img{}
.m1{grid-row:1/3}.m2{grid-column:2;grid-row:1}.m3{grid-column:2;grid-row:2}.m4{grid-column:3;grid-row:1}.m5{grid-column:3;grid-row:2}.m6{display:none}
.m2 img{object-position:center}.m4 img{object-position:center 38%}

/* MATERIALS */
.materials{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:48% 52%}
.materials .section-kicker{color:#87735d}
.material-photo{height:100%;overflow:hidden;cursor:zoom-in}
.material-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.84) brightness(.98)}
.materials-copy{align-self:center;padding:10vh 6vw 5vh}
.materials-copy h2{margin:0 0 28px;font:400 clamp(58px,5.5vw,95px)/.88 Georgia,serif;letter-spacing:-.04em}
.materials-copy p{font-size:17px;line-height:1.62;color:#5a5751;max-width:610px}
.material-types{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:42px}
.material-types div{display:flex;flex-direction:column;gap:11px}
.material-types img{width:100%;height:110px;object-fit:cover}
.material-types span{font-size:9px;font-weight:800;letter-spacing:.14em;line-height:1.45;color:#655e55}

/* VIDEO */
.video-section{background:linear-gradient(110deg,#0b0f0c,#10251f 56%,#1d241e)}
.video-layout{height:100%;padding:12vh 7vw 5vh;display:grid;grid-template-columns:46% 54%;align-items:center;position:relative;z-index:4}
.phone{position:relative;justify-self:center;width:min(33vh,350px);height:min(78vh,700px);border:2px solid rgba(224,211,191,.65);border-radius:36px;padding:8px;background:#090a09;box-shadow:0 30px 80px rgba(0,0,0,.43)}
.phone::after{content:"";position:absolute;inset:-14px;border:1px solid rgba(197,154,88,.14);border-radius:48px;pointer-events:none}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:27px;background:#000}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:1px solid rgba(197,154,88,.9);background:rgba(10,12,10,.58);color:#fff;font-size:27px;cursor:pointer;backdrop-filter:blur(6px)}
.video-copy{max-width:650px}
.video-copy h2{margin:0 0 24px;font:400 clamp(55px,5.4vw,96px)/.89 Georgia,serif;letter-spacing:-.045em}
.video-copy h2 em{font-style:normal;color:var(--beige)}
.dark-rule{width:58px;height:2px;background:var(--gold);margin:26px 0}
.video-copy p{font-size:17px;line-height:1.62;color:#c4beb4;max-width:580px}
.watch{margin-top:28px;padding:0;border:0;background:transparent;color:#f0ece5;display:inline-flex;align-items:center;gap:14px;cursor:pointer}
.watch-arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(197,154,88,.72);border-radius:50%;color:var(--gold);font-size:25px}
.watch>span:nth-child(2){font-size:10px;font-weight:800;letter-spacing:.15em}
.watch b{color:var(--gold);font-size:10px;letter-spacing:.12em}

/* INSPIRATION */
.inspiration{background:#111}
.inspiration-image{position:absolute;inset:0;background:url("dentistry/statue-profile.jpg") 52% 34%/cover no-repeat;filter:grayscale(.45) contrast(1.03) brightness(.66)}
.inspiration-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,10,.92) 0%,rgba(11,11,10,.70) 42%,rgba(11,11,10,.25) 70%,rgba(11,11,10,.48))}
.inspiration-copy{position:absolute;z-index:4;left:5vw;top:26vh;width:50vw}
.inspiration-copy h2{margin:0;font:400 clamp(58px,6.1vw,104px)/.90 Georgia,serif;letter-spacing:-.05em}
.inspiration-rule{width:65px;height:2px;background:var(--gold);margin:30px 0}
.inspiration-copy p{font-size:15px;line-height:1.6;letter-spacing:.13em;text-transform:uppercase;color:#c7c0b6;max-width:560px}

/* CONTACTS */
.contacts{background:radial-gradient(circle at 82% 48%,rgba(197,154,88,.09),transparent 23%),linear-gradient(110deg,#080907,#10110e 58%,#18140f)}
.contact-copy{position:absolute;z-index:5;left:4.3vw;top:50%;transform:translateY(-48%)}
.contact-copy small{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.20em}
.contact-copy h2{margin:18px 0 24px;font:400 clamp(66px,8vh,108px)/.88 Georgia,serif;letter-spacing:-.04em}
.contact-copy>p{font-size:18px;line-height:1.55;color:#c8c2b8;max-width:620px}
.contact-links{display:flex;gap:24px;margin-top:42px}
.contact-links a{width:92px;color:#ddd7ce;text-decoration:none;text-align:center;font-size:11px}
.contact-links span{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 10px;border:1px solid rgba(197,154,88,.62);border-radius:50%}
.contact-links img{width:27px;height:27px}
.all-projects{display:inline-block;margin-top:38px;color:#8d877e;text-decoration:none;font-size:10px;letter-spacing:.14em}
.contact-art{position:absolute;right:8vw;top:50%;transform:translateY(-50%);width:32vw;height:60vh;display:grid;place-items:center;opacity:.24}
.contact-art img{width:min(360px,76%);filter:sepia(.5)}
.contact-art span{position:absolute;right:0;bottom:4%;font-size:9px;line-height:1.55;letter-spacing:.18em;color:#8d8477}

/* MOTION LINES */
.line-motion{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.line-motion i{position:absolute;height:1px;width:58vw;background:linear-gradient(90deg,transparent,rgba(197,154,88,.72),transparent);box-shadow:0 0 14px rgba(197,154,88,.12);animation:moveLine 26s ease-in-out infinite alternate}
.line-motion i:nth-child(1){left:-16vw;top:24%;transform:rotate(14deg)}
.line-motion i:nth-child(2){right:-18vw;top:60%;transform:rotate(-9deg);opacity:.45;animation-duration:31s}
.line-motion i:nth-child(3){left:22vw;bottom:10%;transform:rotate(6deg);opacity:.28;animation-duration:36s}
.video-lines i:nth-child(4){display:block;right:-8vw;bottom:21%;transform:rotate(-15deg);opacity:.24;animation-duration:28s}
@keyframes moveLine{from{translate:-6vw 2vh}to{translate:15vw -6vh}}

/* LIGHTBOX */
.lb{position:fixed;z-index:120;inset:0;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}.lb img{max-width:84vw;max-height:86vh;object-fit:contain}
.lb button{position:absolute;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.25);color:white;cursor:pointer}
.lb .x{right:24px;top:20px;width:48px;height:48px;border-radius:50%;font-size:27px}
.lb .prev,.lb .next{top:50%;width:58px;height:58px;border-radius:50%;font-size:28px}.lb .prev{left:24px}.lb .next{right:24px}
.lb .count{position:absolute;bottom:22px;font-size:11px;letter-spacing:.16em}

@media(max-height:780px) and (min-width:901px){
  .hero-copy{top:15vh}.hero h1{font-size:60px}.hero-sub{font-size:14px}
  .harmony{padding-top:100px}.harmony-head{height:18vh}.harmony-head h2{font-size:54px}.mosaic{height:min(68vh,calc(76vh - 100px))}
  .materials-copy h2{font-size:58px}.materials-copy p{font-size:14px}.material-types img{height:80px}
  .video-copy h2{font-size:56px}.phone{width:min(30vh,300px);height:min(73vh,630px)}
  .inspiration-copy h2{font-size:62px}
  .contact-copy h2{font-size:62px}.contact-links{margin-top:28px}
}

@media(max-width:900px){
  main{scroll-snap-type:none}.screen{height:auto;min-height:100svh}.topbar nav{gap:14px}.topbar nav a{font-size:8px}.dots{display:none}
  .hero-copy{left:24px;top:18vh;width:calc(100% - 48px)}.hero-image{background-position:64% center}.hero-overlay{background:linear-gradient(90deg,rgba(8,10,8,.90),rgba(8,10,8,.52))}
  .harmony{padding:110px 24px 40px}.harmony-head{height:auto;display:block}.harmony-head h2{font-size:52px}.harmony-head p{margin-top:20px}.mosaic{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:none}.mosaic figure{height:44vh}.m1{grid-row:auto}.m2,.m3,.m4,.m5{grid-column:auto;grid-row:auto}
  .materials{grid-template-columns:1fr}.material-photo{height:60vh}.materials-copy{padding:60px 24px}.materials-copy h2{font-size:56px}.material-types{grid-template-columns:1fr 1fr 1fr}
  .video-layout{grid-template-columns:1fr;padding:110px 24px 50px}.phone{width:min(70vw,330px);height:min(72vh,620px);margin-bottom:42px}.video-copy h2{font-size:54px}
  .inspiration-copy{left:24px;top:25vh;width:calc(100% - 48px)}.inspiration-copy h2{font-size:55px}
  .contact-copy{left:24px;right:24px}.contact-copy h2{font-size:54px}.contact-links{gap:14px;flex-wrap:wrap}.contact-art{display:none}
}


/* =========================================================
   V47 FINAL — contact screen alignment only
   Exact approved bear asset; no generated graphics.
   ========================================================= */

/* Contact composition: clean right-side logo field. */
.contacts{
  background:
    radial-gradient(circle at 82% 48%,rgba(197,154,88,.075),transparent 24%),
    linear-gradient(110deg,#080907,#10110e 58%,#18140f);
}

/* Bear and its lines share the exact same optical center. */
.contact-art{
  right:4.8vw !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:39vw !important;
  height:68vh !important;
  opacity:1 !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible;
}
.contact-art img{
  position:relative;
  z-index:4;
  width:min(350px,58%) !important;
  opacity:.27;
  filter:sepia(.52) saturate(.86) drop-shadow(0 18px 42px rgba(0,0,0,.42));
}
.contact-art span{
  z-index:5;
  right:auto !important;
  left:8% !important;
  bottom:11% !important;
  color:#8f8374 !important;
  opacity:.72;
}

/* Converging fan: every line ends in one common point behind the bear. */
.bear-rays{
  position:absolute;
  z-index:2;
  right:4.8vw;
  top:50%;
  transform:translateY(-50%);
  width:39vw;
  height:68vh;
  pointer-events:none;
  overflow:visible;
}
.bear-rays i{
  position:absolute;
  right:50%;
  top:50%;
  width:118%;
  height:1px;
  transform-origin:100% 50%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(197,154,88,.08) 18%,
    rgba(197,154,88,.24) 72%,
    rgba(197,154,88,.38) 100%
  );
  box-shadow:0 0 11px rgba(197,154,88,.08);
  opacity:.62;
  animation:bearRayPulse 7s ease-in-out infinite alternate;
}
.bear-rays i:nth-child(1){transform:rotate(-22deg);animation-delay:-1s}
.bear-rays i:nth-child(2){transform:rotate(-15deg);animation-delay:-2.1s}
.bear-rays i:nth-child(3){transform:rotate(-8deg);animation-delay:-3.2s}
.bear-rays i:nth-child(4){transform:rotate(0deg);animation-delay:-4.3s;opacity:.48}
.bear-rays i:nth-child(5){transform:rotate(8deg);animation-delay:-2.7s}
.bear-rays i:nth-child(6){transform:rotate(15deg);animation-delay:-1.8s}
.bear-rays i:nth-child(7){transform:rotate(22deg);animation-delay:-3.8s}

@keyframes bearRayPulse{
  from{opacity:.34}
  to{opacity:.68}
}

/* Thin vertical accent aligned to the fan center, not floating separately. */
.contact-art::before{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  bottom:5%;
  width:1px;
  height:86px;
  background:linear-gradient(180deg,rgba(197,154,88,.62),transparent);
  transform:translateX(-50%);
  opacity:.58;
}

/* Keep the contact text safely clear of the logo field. */
.contact-copy{
  max-width:58vw;
}
.contact-copy h2{
  max-width:760px;
}

/* Mobile: remove decorative fan, preserve clean contact layout. */
@media(max-width:900px){
  .bear-rays{display:none}
}


/* V50 — virtual-phone video must stay inside the phone */
.phone video::-webkit-media-controls-fullscreen-button{
  display:none !important;
}
.phone video::-webkit-media-controls-picture-in-picture-button{
  display:none !important;
}