@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&family=Great+Vibes&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box}
html{scroll-snap-type: y mandatory; overflow-y: scroll; height: 100%; scrollbar-width: none; scroll-behavior: smooth}
html::-webkit-scrollbar{display: none}
body{background: #f2ede6; font-family: 'DM Sans', sans-serif}
.scroll-indicator{position: fixed; right: 32px; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0.2; transition: opacity 1.2s ease}
.scroll-indicator:hover{opacity: 1}
.scroll-indicator.active{opacity: 1}
.section-name{font-size: 8px; letter-spacing: 4px; color: #1a1a18; text-transform: uppercase; writing-mode: vertical-lr; white-space: nowrap; height: 80px; overflow: hidden; display: flex; align-items: flex-end; position: relative}
.section-name-inner{display: flex; align-items: flex-end; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease}
.section-name-inner.animating-out{transform: translateY(10px); opacity: 0; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease}
.scroll-track{width: 1px; height: 140px; background: rgba(26,26,24,0.15); position: relative}
.scroll-progress{position: absolute; top: 0; left: 0; right: 0; height: 0%; background: #1a1a18; transition: height 0.6s cubic-bezier(0.22,1,0.36,1)}
.dots-wrap{display: flex; flex-direction: column; gap: 10px; align-items: center}
.scroll-dot{width: 4px; height: 4px; border-radius: 50%; background: rgba(26,26,24,0.25); transition: background 0.3s, transform 0.3s; cursor: pointer; position: relative}
.scroll-dot.active{background: #1a1a18; transform: scale(1.6)}
.scroll-dot.changing{animation: dotPop 0.6s cubic-bezier(0.16,1,0.3,1)}
@keyframes dotPop{0%{transform: scale(1.6)} 40%{transform: scale(2.4); opacity:0.5} 100%{transform: scale(1.6); opacity:1}}
.scroll-dot::before{content: attr(data-name); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: #1a1a18; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s ease}
.scroll-dot:hover::before{opacity: 1}
.scroll-dot:hover{background: #1a1a18}
.header{position: fixed; top: 0; left: 0; right: 0; z-index: 700; display: flex; align-items: flex-start; justify-content: space-between; padding: 36px 52px; opacity: 0; transition: opacity 0.8s ease}
.header.visible{opacity: 1}
.logo{display: flex; align-items: center; gap: 11px}
.logo-mark{width: 30px; height: 30px; flex-shrink: 0}
.logo-name{font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; color: #1a1a18; letter-spacing: -0.3px; display: block; line-height: 1.15; transition: color .45s ease}
.logo-name .it{font-style: italic}
.logo-sub{font-size: 8px; letter-spacing: 4px; color: #6a6058; text-transform: uppercase; margin-top: 2px; display: block; transition: color .45s ease}
.logo-mark path{transition: stroke .45s ease, background .45s ease}

.header.light .logo-name{color: rgba(242,237,230,0.92)}
.header.light .logo-sub{color: rgba(242,237,230,0.92)}
.header.light .logo-mark path{stroke: rgba(242,237,230,0.92)}
.header.light .hamburger span{background: #1a1a18}
.hamburger{display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 8px; background: none; border: none; animation: pulseHam 3.5s ease-in-out infinite}
.hamburger.open{animation: none}
@keyframes pulseHam{0%,100%{transform: scale(1); opacity:1} 50%{transform: scale(1.1); opacity:0.65}}
.hamburger span{display: block; height: 1.5px; background: #1a1a18; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.3s, width 0.3s; transform-origin: center}
.hamburger span:nth-child(1){width: 28px}
.hamburger span:nth-child(2){width: 18px; margin-left: auto}
.hamburger span:nth-child(3){width: 28px}
.hamburger.open span:nth-child(1){width: 28px; transform: translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity: 0}
.hamburger.open span:nth-child(3){width: 28px; transform: translateY(-7.5px) rotate(-45deg)}
.overlay{position: fixed; inset: 0; z-index: 550; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.5s ease}
.overlay.open{opacity: 1; pointer-events: all}
.drawer{position: fixed; top: 0; right: 0; bottom: 0; z-index: 600; width: 400px; background: #f2ede6; display: flex; flex-direction: column; border-left: 1px solid rgba(26,26,24,0.12); padding: 52px 56px 56px 56px; justify-content: space-between; clip-path: circle(0% at calc(100% - 60px) 60px); transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none}
.drawer.open{clip-path: circle(200% at calc(100% - 60px) 60px); pointer-events: all}
.drawer-nav{display: flex; flex-direction: column; gap: 0; margin-top: 80px}
.drawer-nav a{font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 300; color: rgba(26,26,24,0.4); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(26,26,24,0.08); letter-spacing: -1px; line-height: 1.1; transition: color 0.3s ease, padding-left 0.35s cubic-bezier(0.22,1,0.36,1)}
.drawer-nav a:first-child{border-top: 1px solid rgba(26,26,24,0.08)}
.drawer-nav a:hover{color: #1a1a18; padding-left: 10px}
.drawer-nav a.active{color: #1a1a18; font-style: italic; padding-left: 10px}
.drawer-bottom{display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 1px solid rgba(26,26,24,0.08)}
.drawer-bottom-row{display: flex; gap: 40px}
.drawer-info-label{font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: #6a6058; margin-bottom: 8px; display: block}
.drawer-bottom a{font-size: 11px; color: #4a4440; text-decoration: none; line-height: 2.1; transition: color 0.25s; display: block}
.drawer-bottom p{font-size: 11px; color: #4a4440; text-decoration: none; line-height: 2.1; transition: color 0.25s; display: block}
.drawer-bottom a:hover{color: #1a1a18}
.drawer-cta{display: inline-block; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #1a1a18; border: 1px solid rgba(26,26,24,0.4); padding: 13px 24px; text-decoration: none; position: relative; overflow: hidden; transition: border-color 0.4s ease}
.drawer-cta::before{content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 0; background: rgba(26,26,24,0.05); transition: height 0.4s cubic-bezier(0.22,1,0.36,1); z-index: 0}
.drawer-cta span{position: relative; z-index: 1}
.drawer-cta:hover{border-color: #1a1a18}
.drawer-cta:hover::before{height: 100%}
.section{height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; position: relative; display: flex; align-items: center; justify-content: center}
#hero{background: #f2ede6; overflow: hidden; flex-direction: column}
.hero-content{display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2}
.clip-up{overflow: hidden}
.hero-text{text-align: center; transform: translateY(100%); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); padding-bottom: 24px}
.hero-text.visible{transform: translateY(0)}
.eyebrow{font-size: 9px; letter-spacing: 6px; color: #6a6058; text-transform: uppercase; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 12px}
.eyebrow::before{content: ''; display: block; width: 20px; height: 1px; background: rgba(106,96,88,0.5)}
.eyebrow::after{content: ''; display: block; width: 20px; height: 1px; background: rgba(106,96,88,0.5)}
.headline{font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 5.8vw, 82px); font-weight: 300; color: #1a1a18; line-height: 1.05; letter-spacing: -1.5px}
.headline em{font-style: italic; color: #3a3830}
canvas#smileCanvas{display: block; flex-shrink: 0; margin-bottom: -1px}
.clip-down{overflow: hidden; width: 100%; display: flex; flex-direction: column; align-items: center}
.below-wrap{display: flex; flex-direction: column; align-items: center; transform: translateY(-100%); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); padding-top: 30px}
.below-wrap.visible{transform: translateY(0)}
.tagline{font-size: 13px; color: #5a5450; text-align: center; max-width: 420px; line-height: 2.1}
.service-tags{display: flex; gap: 20px; margin-top: 14px; justify-content: center; flex-wrap: wrap}
.service-tag{font-size: 8px; letter-spacing: 2.5px; color: #8a8078; text-transform: uppercase; position: relative}
.service-tag:not(:last-child)::after{content: '·'; position: absolute; right: -12px; top: 0; color: rgba(26,26,24,0.3)}
.hero-cta{display: inline-block; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: #1a1a18; border: 1px solid rgba(26,26,24,0.4); padding: 14px 40px; text-decoration: none; margin-top: 32px; position: relative; overflow: hidden; transition: border-color 0.4s ease}
.hero-cta::before{content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 0; background: rgba(26,26,24,0.05); transition: height 0.4s cubic-bezier(0.22,1,0.36,1); z-index: 0}
.hero-cta span{position: relative; z-index: 1}
.hero-cta:hover{border-color: #1a1a18}
.hero-cta:hover::before{height: 100%}
.bottom-info{position: absolute; bottom: 48px; left: 52px; opacity: 0; transition: opacity 0.8s ease; z-index: 2}
.bottom-info.visible{opacity: 1}
.bottom-info p{font-size: 9px; letter-spacing: 2px; color: #8a8078; text-transform: uppercase; line-height: 2.2}
.bottom-right{position: absolute; bottom: 48px; right: 72px; display: flex; gap: 24px; opacity: 0; transition: opacity 0.8s ease; z-index: 2}
.bottom-right.visible{opacity: 1}
.bottom-right a{font-size: 9px; letter-spacing: 2px; color: #8a8078; text-decoration: none; text-transform: uppercase; transition: color 0.25s}
.bottom-right a:hover{color: #1a1a18}
.scroll-hint{position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity 1s ease 1.8s; z-index: 2; cursor: pointer}
.scroll-hint.visible{opacity: 1}
.scroll-hint:hover{opacity: 0.38; transition: opacity 0.4s ease}
.scroll-hint-lines{display: flex; gap: 9px; align-items: flex-start}
.scroll-hint-line{width: 1px; height: 48px; background: rgba(26,26,24,0.18); position: relative; overflow: hidden}
.scroll-hint-line::after{content: ''; position: absolute; left: 0; right: 0; height: 14px; background: #1a1a18; top: -14px; animation: scrollLineB 2s ease-in-out infinite}
.scroll-hint-line:nth-child(2)::after{animation-delay: 0.28s}
@keyframes scrollLineB{0%{top: -14px; opacity: 0.7} 100%{top: 48px; opacity: 0}}
.scroll-hint-label{font-size: 7px; letter-spacing: 3.5px; color: rgba(26,26,24,0.38); text-transform: uppercase}
#services{background: radial-gradient(circle at 50% 48%, rgba(255,255,255,0.62), transparent 42%), linear-gradient(180deg, #f2ede6 0%, #eee5da 100%); overflow: hidden; padding: 0 7vw}
.services-shell{width: min(1180px, 92vw); height: 100%; display: grid; grid-template-columns: minmax(280px, 0.88fr) minmax(430px, 1.12fr); align-items: center; gap: clamp(32px, 6vw, 90px)}
.services-copy{position: relative; z-index: 3; opacity: 0; transform: translateY(22px); transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1) 0.3s, transform 1.4s cubic-bezier(0.16,1,0.3,1) 0.3s}
.services-copy.in-view{opacity: 1; transform: translateY(0)}
.services-kicker{font-size: 9px; letter-spacing: 6px; color: #7a7068; text-transform: uppercase; margin-bottom: 24px}
.services-title{font-family: 'Cormorant Garamond', serif; font-size: clamp(46px, 5vw, 76px); font-weight: 300; letter-spacing: -1.4px; line-height: 1.02; color: #1a1a18}
.services-title em{font-style: italic; color: #4b423b}
.services-desc{max-width: 390px; margin-top: 26px; color: #5f5751; font-size: 13px; line-height: 2.05}
.mouth-stage{position: relative; width: min(610px, 50vw); aspect-ratio: 1 / 1; justify-self: center; isolation: isolate; opacity: 0; transform: translateY(18px); transition: opacity 1.6s cubic-bezier(0.16,1,0.3,1) 0.55s, transform 1.6s cubic-bezier(0.16,1,0.3,1) 0.55s}
.mouth-stage.in-view{opacity: 1; transform: translateY(0)}
.mouth-stage::before{content: ''; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.48), transparent 67%); filter: blur(18px); z-index: 0}
.mouth-img{position: absolute; inset: 0; width: 100%; height: 100%}
.teeth-map{position: absolute; inset: 0; width: 100%; height: 100%}
.mouth-img{object-fit: contain; z-index: 1; filter: drop-shadow(0 30px 70px rgba(68,45,34,0.18)); user-select: none; pointer-events: none}
.teeth-map{z-index: 2; overflow: visible}
.hotspot{fill: rgba(255,255,255,0.01); stroke: transparent; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: fill .35s ease, filter .35s ease, transform .35s ease, opacity .35s ease}
.hotspot:hover{fill: rgba(255,255,255,0.22); filter: drop-shadow(0 0 12px rgba(255,255,255,0.95)) drop-shadow(0 0 34px rgba(225,178,136,0.62)); transform: scale(1.045)}
.hotspot.active{fill: rgba(255,255,255,0.22); filter: drop-shadow(0 0 12px rgba(255,255,255,0.95)) drop-shadow(0 0 34px rgba(225,178,136,0.62)); transform: scale(1.045)}
.hotspot.implant:hover{fill: rgba(222,230,232,0.28); filter: drop-shadow(0 0 12px rgba(245,248,248,.95)) drop-shadow(0 0 36px rgba(150,160,165,.65))}
.hotspot.implant.active{fill: rgba(222,230,232,0.28); filter: drop-shadow(0 0 12px rgba(245,248,248,.95)) drop-shadow(0 0 36px rgba(150,160,165,.65))}
.hotspot.warning:hover{fill: rgba(95,50,32,0.16); filter: drop-shadow(0 0 18px rgba(120,70,42,.58)) drop-shadow(0 0 36px rgba(255,210,160,.45))}
.hotspot.warning.active{fill: rgba(95,50,32,0.16); filter: drop-shadow(0 0 18px rgba(120,70,42,.58)) drop-shadow(0 0 36px rgba(255,210,160,.45))}
.service-card{position: absolute; left: 50%; top: 50%; width: 248px; padding: 20px 20px 18px; border: 1px solid rgba(26,26,24,0.11); background: rgba(242,237,230,0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 28px 70px rgba(45,35,28,0.16); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) translateY(12px) scale(.97); transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1); z-index: 5}
.service-card.visible{opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1)}
.service-card small{display: block; font-size: 8px; letter-spacing: 3px; color: #8a8078; text-transform: uppercase; margin-bottom: 9px}
.service-card h3{font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: #1a1a18; letter-spacing: -0.5px; margin-bottom: 10px; line-height: 1.1}
.service-card p{font-size: 12px; line-height: 1.85; color: #5d544d}
.tooth-note{display: grid; gap: 6px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(26,26,24,0.09)}
.tooth-note span{font-size: 9px; color: #766c64; letter-spacing: .4px}
.tooth-note b{color: #1a1a18; font-weight: 500}
.experience-actions{margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 430px}
.filter-chip{border: 1px solid rgba(26,26,24,0.14); background: rgba(255,255,255,0.18); color: #5d544d; font-family: 'DM Sans', sans-serif; font-size: 8px; letter-spacing: 2.3px; text-transform: uppercase; padding: 11px 14px; cursor: pointer; transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease}
.mode-toggle{border: 1px solid rgba(26,26,24,0.14); background: rgba(255,255,255,0.18); color: #5d544d; font-family: 'DM Sans', sans-serif; font-size: 8px; letter-spacing: 2.3px; text-transform: uppercase; padding: 11px 14px; cursor: pointer; transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease}
.filter-chip:hover{color: #1a1a18; border-color: rgba(26,26,24,0.42); background: rgba(255,255,255,0.38); transform: translateY(-1px)}
.filter-chip.active{color: #1a1a18; border-color: rgba(26,26,24,0.42); background: rgba(255,255,255,0.38); transform: translateY(-1px)}
.mode-toggle:hover{color: #1a1a18; border-color: rgba(26,26,24,0.42); background: rgba(255,255,255,0.38); transform: translateY(-1px)}
.mode-toggle.active{color: #1a1a18; border-color: rgba(26,26,24,0.42); background: rgba(255,255,255,0.38); transform: translateY(-1px)}
.mouth-cursor{position: absolute; width: 96px; height: 96px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.55); opacity: 0; pointer-events: none; z-index: 4; background: radial-gradient(circle, rgba(255,255,255,.58), rgba(255,222,185,.18) 44%, transparent 72%); filter: blur(4px); mix-blend-mode: screen; transition: opacity .25s ease, transform .25s ease}
.mouth-stage:hover .mouth-cursor{opacity: 1; transform: translate(-50%, -50%) scale(1)}
.mouth-light{position: absolute; inset: -8%; z-index: 1; pointer-events: none; opacity: .8; background: radial-gradient(circle at var(--mx,50%) var(--my,45%), rgba(255,255,255,.48), rgba(255,255,255,.08) 23%, transparent 54%); mix-blend-mode: screen; transition: opacity .3s ease}
.mouth-stage.has-active .mouth-img{filter: drop-shadow(0 30px 70px rgba(68,45,34,0.18)) saturate(.92) contrast(.96)}
.mouth-stage.has-active .hotspot:not(.active){opacity: .22}
.scan-line{position: absolute; left: 14%; right: 14%; top: 18%; height: 1px; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); box-shadow: 0 0 20px rgba(255,255,255,.7); animation: scanDental 2.8s linear infinite}
.mouth-stage.has-active .scan-line{opacity: .72}
@keyframes scanDental{0%{transform: translateY(0)} 50%{transform: translateY(360px)} 100%{transform: translateY(0)}}
.sparkle{position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.82); pointer-events: none; z-index: 3; filter: blur(.2px); animation: floatSparkle 5.8s ease-in-out infinite}
.sparkle.s1{left: 18%; top: 22%; animation-delay: -.9s}
.sparkle.s2{right: 23%; top: 31%; animation-delay: -2.1s}
.sparkle.s3{left: 31%; bottom: 19%; animation-delay: -3.4s}
.sparkle.s4{right: 29%; bottom: 21%; animation-delay: -4.7s}
@keyframes floatSparkle{0%,100%{opacity: .08; transform: translateY(0) scale(.75)} 50%{opacity: .7; transform: translateY(-12px) scale(1.15)}}
.hotspot[data-cat].filtered-out{opacity: .08; pointer-events: none}
.hotspot.filtered-match{animation: pulseTooth 2.4s ease-in-out infinite}
@keyframes pulseTooth{0%,100%{filter: drop-shadow(0 0 0 rgba(255,255,255,0))} 50%{filter: drop-shadow(0 0 22px rgba(255,255,255,.72))}}
.filter-card{transform: translate(-50%, -50%) translateY(10px) scale(.96); width: 220px; padding: 0; pointer-events: none; overflow: hidden}
.filter-card.visible{transform: translate(-50%, -50%) translateY(0) scale(1)}
.filter-section{padding: 16px 18px 14px}
.filter-section + .filter-section{border-top: 1px solid rgba(26,26,24,0.09)}
.filter-section small{margin-bottom: 7px}
.filter-section h3{font-size: 22px; margin-bottom: 8px}
.filter-section p{font-size: 11px; line-height: 1.75; color: #5d544d}
.filter-section .tooth-note{margin-top: 10px; padding-top: 10px; gap: 4px}
.more-btn{opacity: 0.38; cursor: default; letter-spacing: 1.8px}
.more-btn:hover{transform: none; background: rgba(255,255,255,0.18); border-color: rgba(26,26,24,0.14); color: #5d544d}
@media (max-width: 900px){
  .services-shell{grid-template-columns: 1fr; align-content: center; gap: 24px}
  .services-copy{text-align: center}
  .services-desc{margin-left: auto; margin-right: auto}
  .experience-actions{justify-content: center; margin-left: auto; margin-right: auto}
  .mouth-stage{width: min(82vw, 520px)}
}
@media (max-width: 620px){
  .header{padding: 28px 26px}
  .bottom-info, .bottom-right{display: none}
  .scroll-indicator{right: 18px}
  .mouth-stage{width: 90vw}
  .service-card{width: 210px}
}
#gallery{background:#f2ede6; overflow:hidden}
.gallery-stage{width:100%; height:100%; display:grid; grid-template-columns:minmax(260px,0.75fr) 1fr; align-items:center; padding:0 4vw 0 5vw; gap:clamp(32px,4vw,60px)}
.gallery-copy{display:flex; flex-direction:column; opacity:0; transform:translateY(24px); transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1) 0.1s, transform 1.1s cubic-bezier(0.16,1,0.3,1) 0.1s}
#gallery.gallery-in-view .gallery-copy{opacity:1; transform:none}
.gallery-eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:28px}
.gallery-num{font-size:9px; letter-spacing:3px; color:#8a8078}
.gallery-eyebrow-line{width:32px; height:1px; background:rgba(26,26,24,0.20)}
.gallery-title{font-family:'Cormorant Garamond',serif; font-size:clamp(48px,5.6vw,82px); font-weight:300; color:#1a1a18; line-height:0.95; letter-spacing:-2px; margin-bottom:26px}
.gallery-title em{font-style:italic; color:#6b5c4e}
.gallery-desc{font-size:13px; line-height:2.0; color:#5f5751; max-width:310px; margin-bottom:44px}
.gallery-cta{display:inline-flex; align-items:center; gap:18px; font-family:'Cormorant Garamond',serif; font-size:clamp(17px,1.4vw,20px); font-weight:400; color:#1a1a18; background:rgba(255,255,255,0.08); border:1px solid rgba(26,26,24,0.16); padding:0 22px 0 24px; min-height:52px; cursor:pointer; letter-spacing:0.3px; text-decoration:none; transition:gap 0.35s ease, background 0.3s ease, border-color 0.3s ease}
.gallery-cta:hover{gap:26px; background:rgba(255,255,255,0.18); border-color:rgba(26,26,24,0.28)}
.gallery-cta svg{stroke:#1a1a18; flex-shrink:0}
.gallery-grid{display:grid; grid-template-columns:1fr 0.50fr; grid-template-rows:1fr 1fr 1fr; gap:12px; height:min(80vh,700px); opacity:0; transform:translateY(28px); transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1) 0.26s, transform 1.2s cubic-bezier(0.16,1,0.3,1) 0.26s}
#gallery.gallery-in-view .gallery-grid{opacity:1; transform:none}
.gallery-main{grid-column:1; grid-row:1/4; border-radius:18px; overflow:hidden; position:relative; background:#ede7dc; border:1px solid rgba(26,26,24,0.07); cursor:pointer; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease}
.gallery-main:hover{transform:scale(1.012) translateY(-3px); box-shadow:0 28px 72px rgba(26,26,24,0.11)}
.gallery-thumb{grid-column:2; border-radius:14px; overflow:hidden; position:relative; background:#ede7dc; border:1px solid rgba(26,26,24,0.07); cursor:pointer; transition:transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease}
.gallery-thumb:hover{transform:scale(1.02) translateY(-2px); box-shadow:0 18px 44px rgba(26,26,24,0.10)}
.gallery-thumb:nth-child(2){grid-row:1}
.gallery-thumb:nth-child(3){grid-row:2}
.gallery-thumb:nth-child(4){grid-row:3}
.gallery-placeholder{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.gallery-placeholder svg{width:40px; height:40px; opacity:0.28; flex-shrink:0}
.gallery-thumb .gallery-placeholder svg{width:28px; height:28px}
.gallery-placeholder span{font-size:7.5px; letter-spacing:4px; text-transform:uppercase; color:rgba(26,26,24,0.28)}
.gallery-thumb .gallery-placeholder span{font-size:6.5px; letter-spacing:3px}
.gallery-lightbox{position:fixed; inset:0; z-index:800; background:rgba(10,10,8,0.86); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.4s ease}
.gallery-lightbox.open{opacity:1; pointer-events:all}
.gallery-lightbox-inner{width:min(520px,78vw); aspect-ratio:3/4; background:#ede7dc; border-radius:18px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; position:relative; transform:scale(0.94); transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); border:1px solid rgba(26,26,24,0.08)}
.gallery-lightbox.open .gallery-lightbox-inner{transform:scale(1)}
.gallery-lightbox-close{position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(26,26,24,0.18); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color 0.25s, background 0.25s}
.gallery-lightbox-close:hover{border-color:rgba(26,26,24,0.38); background:rgba(26,26,24,0.04)}
.gallery-lightbox-label{font-size:7.5px; letter-spacing:4.5px; text-transform:uppercase; color:rgba(26,26,24,0.28)}
*{margin:0; padding:0; box-sizing:border-box}
*::before{margin:0; padding:0; box-sizing:border-box}
*::after{margin:0; padding:0; box-sizing:border-box}
#doctors{--ivory:#f0ebe2; --ink:#1a1a18; --muted:#8a8078; --accent:#6b5c4e; --gold:#9b866d; --ease-out:cubic-bezier(0.16,1,0.3,1)}
#doctors::before{content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.036; 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 180px}
#doctors{background:var(--ivory); overflow:hidden}
#doctors .stage{width:100vw; height:100vh; position:relative; overflow:hidden; display:flex}
#doctors .portrait-col{opacity:0; transition:opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out)}
#doctors .content-col{opacity:0; transition:opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out)}
#doctors .thumb-strip{opacity:0; transition:opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out)}
#doctors .portrait-col{transform:translateX(-34px) scale(1.015)}
#doctors .content-col{transform:translateY(28px)}
#doctors .thumb-strip{transform:translateY(34px)}
#doctors.doctors-in-view .portrait-col{opacity:1; transform:none}
#doctors.doctors-in-view .content-col{opacity:1; transform:none}
#doctors.doctors-in-view .thumb-strip{opacity:1; transform:none}
#doctors.doctors-in-view .content-col{transition-delay:.18s}
#doctors.doctors-in-view .thumb-strip{transition-delay:.32s}
.portrait-col{position:relative; width:44%; flex-shrink:0; overflow:hidden; z-index:2}
.portrait-item{position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease-out); pointer-events:none}
.portrait-item.active{opacity:1; pointer-events:auto}
.portrait-item img{width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(1) contrast(1.1) brightness(0.86); transform:scale(1.05); transition:transform 1.6s var(--ease-out)}
.portrait-item.active img{transform:scale(1)}
.portrait-item::after{content:''; position:absolute; inset:0; background: linear-gradient(to right, transparent 0%, transparent 30%, rgba(240,235,226,0.06) 42%, rgba(240,235,226,0.32) 57%, rgba(240,235,226,0.68) 72%, rgba(240,235,226,0.90) 86%, #f0ebe2 100% ), linear-gradient(to top, rgba(10,10,8,0.22) 0%, transparent 18%); pointer-events:none; z-index:1}
.vertical-label{display:none}
.content-col{flex:1; position:relative; display:flex; flex-direction:column; justify-content:center; padding:0 5vw 160px 5vw; z-index:1}
.skull-art{position:absolute; top:-4%; right:-3%; width:clamp(320px,42vw,580px); height:clamp(400px,82%,720px); pointer-events:none; opacity:0.18; z-index:0}
.skull-art img{width:100%; height:100%; object-fit:contain; object-position:top right}
.counter{position:absolute; top:clamp(32px,5vh,56px); right:5vw; font-size:9px; letter-spacing:3px; color:var(--muted); z-index:3; transition:opacity 0.2s ease}
.counter.fade{opacity:0}
.doc-kicker{transition:opacity 0.28s ease, transform 0.28s ease}
.doc-name{transition:opacity 0.28s ease, transform 0.28s ease}
.doc-title{transition:opacity 0.28s ease, transform 0.28s ease}
.doc-divider{transition:opacity 0.28s ease, transform 0.28s ease}
.doc-quote{transition:opacity 0.28s ease, transform 0.28s ease}
.spec-grid{transition:opacity 0.28s ease, transform 0.28s ease}
.bottom-row{transition:opacity 0.28s ease, transform 0.28s ease}
.doc-kicker.out{opacity:0; transform:translateY(7px)}
.doc-name.out{opacity:0; transform:translateY(7px)}
.doc-title.out{opacity:0; transform:translateY(7px)}
.doc-quote.out{opacity:0; transform:translateY(7px)}
.spec-grid.out{opacity:0; transform:translateY(7px)}
.bottom-row.out{opacity:0; transform:translateY(7px)}
.doc-divider.out{opacity:0; transform:scaleX(0)}
.doc-kicker{font-size:8px; letter-spacing:5.8px; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.doc-name{font-family:'Cormorant Garamond',serif; font-size:clamp(52px,5.8vw,90px); font-weight:400; color:var(--ink); line-height:0.90; letter-spacing:-2.8px; margin-bottom:18px; position:relative}
.doc-name::before{content:attr(data-wm); position:absolute; top:50%; left:0; transform:translateY(-50%); font-size:1.22em; font-weight:300; letter-spacing:-0.03em; color:rgba(26,26,24,0.06); white-space:nowrap; pointer-events:none; z-index:-1; animation:wmDrift 18s ease-in-out infinite alternate; transition:opacity 0.28s ease}
@keyframes wmDrift{from{transform:translateY(-50%) translateX(0px)} to{transform:translateY(-50%) translateX(10px)}}
.doc-title{font-size:8px; letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:30px}
.doc-divider{width:56px; height:1px; background:linear-gradient(to right, rgba(26,26,24,0.40), rgba(26,26,24,0.05)); margin-bottom:28px; transform-origin:left}
.doc-quote{position:relative; padding-left:38px; margin-bottom:36px; max-width:500px}
.doc-quote::before{content:'\201C'; position:absolute; left:0; top:-8px; font-family:'Cormorant Garamond',serif; font-size:60px; line-height:1; color:var(--gold); opacity:0.42}
.doc-quote p{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:clamp(17px,1.65vw,23px); color:var(--accent); line-height:1.68}
.spec-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(26,26,24,0.09); margin-bottom:38px}
.spec-item{padding:22px 20px; border-right:1px solid rgba(26,26,24,0.07)}
.spec-item:last-child{border-right:none}
.spec-num{display:block; font-family:'Cormorant Garamond',serif; font-size:clamp(32px,2.8vw,44px); font-weight:300; color:rgba(26,26,24,0.22); line-height:1; letter-spacing:-1.5px; margin-bottom:12px}
.spec-label{font-size:7.5px; letter-spacing:3.5px; text-transform:uppercase; color:var(--ink); font-weight:500; display:block; margin-bottom:8px}
.spec-desc{font-size:11px; color:var(--muted); line-height:1.72}
.bottom-row{display:flex; align-items:center; justify-content:space-between}
.cta-btn{display:inline-flex; align-items:center; gap:18px; font-family:'Cormorant Garamond',serif; font-size:clamp(17px,1.4vw,20px); font-weight:400; color:var(--ink); background:rgba(255,255,255,0.08); border:1px solid rgba(26,26,24,0.16); padding:0 22px 0 24px; min-height:52px; cursor:pointer; letter-spacing:0.3px; transition:gap 0.35s ease, background 0.3s ease, border-color 0.3s ease}
.cta-btn:hover{gap:26px; background:rgba(255,255,255,0.18); border-color:rgba(26,26,24,0.28)}
.cta-btn svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.nav-arrows{display:flex; gap:10px; align-items:center}
.nav-arrow{width:48px; height:48px; border-radius:50%; border:1px solid rgba(26,26,24,0.18); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color 0.3s, background 0.3s, transform 0.15s}
.nav-arrow:hover{border-color:rgba(26,26,24,0.38); background:rgba(26,26,24,0.04)}
.nav-arrow:active{transform:scale(0.93)}
.nav-arrow.next{width:60px; height:60px; border-color:rgba(26,26,24,0.26)}
.nav-arrow svg{width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.thumb-strip{position:absolute; bottom:0; right:0; width:56%; height:148px; z-index:10; display:flex; border-top:1px solid rgba(26,26,24,0.09); background:rgba(240,235,226,0.70); backdrop-filter:blur(12px)}
.thumb-item{flex:1; position:relative; cursor:pointer; overflow:hidden; border-right:1px solid rgba(26,26,24,0.07); transition:flex 0.75s var(--ease-out)}
.thumb-item:last-child{border-right:none}
.thumb-item.active{flex:1.65}
.thumb-item img{width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(1) contrast(1.06) brightness(0.88); transform:scale(1.08); transition:filter 0.7s ease, transform 0.75s var(--ease-out)}
.thumb-item.active img{filter:grayscale(0.65) contrast(1.1) brightness(0.9); transform:scale(1)}
.thumb-item:hover:not(.active) img{filter:grayscale(0.72) contrast(1.08) brightness(0.95); transform:scale(1.04)}
.thumb-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(26,26,24,0.32) 0%, transparent 70%); transition:background 0.4s ease}
.thumb-item.active .thumb-overlay{background:linear-gradient(to top, rgba(26,26,24,0.48) 0%, transparent 70%)}
.thumb-top-bar{position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(to right, rgba(26,26,24,0.80), rgba(26,26,24,0.10)); transform:scaleX(0); transform-origin:left; transition:transform 0.85s var(--ease-out); z-index:2}
.thumb-item.active .thumb-top-bar{transform:scaleX(1)}
.thumb-num{position:absolute; top:11px; right:12px; font-size:7.5px; letter-spacing:2px; color:rgba(242,237,230,0.38); z-index:2}
.page-init .doc-kicker{opacity:0; transform:translateY(12px)}
.page-init .doc-name{opacity:0; transform:translateY(12px)}
.page-init .doc-title{opacity:0; transform:translateY(12px)}
.page-init .doc-quote{opacity:0; transform:translateY(12px)}
.page-init .spec-grid{opacity:0; transform:translateY(12px)}
.page-init .bottom-row{opacity:0; transform:translateY(12px)}
.page-init .doc-divider{opacity:0; transform:scaleX(0)}
@media(max-width:980px){
  #doctors{background:var(--ivory); overflow:hidden}
  #doctors .stage{min-height:100vh; height:auto; flex-direction:column; overflow:visible}
  .portrait-col{width:100%; height:46vh; min-height:320px}
  .portrait-item::after{background: linear-gradient(to bottom, transparent 60%, rgba(240,235,226,0.65) 82%, #f0ebe2 100%), linear-gradient(to top, rgba(10,10,8,0.18) 0%, transparent 16%)}
  .content-col{padding:40px 6vw 160px 6vw}
  .doc-name{font-size:clamp(42px,10vw,68px)}
  .spec-grid{grid-template-columns:1fr}
  .spec-item{border-right:none; border-bottom:1px solid rgba(26,26,24,0.07)}
  .spec-item:last-child{border-bottom:none}
  .thumb-strip{position:absolute; width:100%; left:0; right:0; height:120px}
}
#blog{--ivory:#f2ede6; --cream:#eee5da; --ink:#1a1a18; --muted:#8a8078; --line:rgba(26,26,24,.16); --soft:rgba(255,255,255,.28); --ease:cubic-bezier(.16,1,.3,1)}
.blog-section{height:100vh; background: radial-gradient(circle at 58% 45%, rgba(255,255,255,.54), transparent 46%), linear-gradient(180deg, #f2ede6 0%, #eee5da 100%); position:relative; overflow:hidden; padding:clamp(34px,5vh,54px) 7vw clamp(28px,4vh,44px); display:flex; align-items:center}
.blog-wrap{width:100%; max-width:1380px; margin:0 auto; position:relative; height:100%; display:flex; flex-direction:column; justify-content:center}
.blog-mobile-carousel { display: none; }
.blog-mobile-footer { display: none; }
.blog-index{position:absolute; top:-4px; left:0; display:flex; align-items:center; gap:18px; font-size:10px; letter-spacing:4px; color:#7c7066; font-weight:500}
.blog-index::after{content:''; width:56px; height:1px; background:rgba(26,26,24,.35)}
.featured-post{display:grid; grid-template-columns:minmax(420px,.9fr) minmax(420px,1fr); gap:clamp(30px,5vw,70px); align-items:center; padding:clamp(16px,2vh,28px) 0 clamp(12px,1.8vh,22px)}
.featured-copy{max-width:620px}
.post-kicker{display:block; font-size:9px; letter-spacing:5px; text-transform:uppercase; color:#75675d; font-weight:500; margin-bottom:28px}
.featured-title{font-family:'Cormorant Garamond',serif; font-size:clamp(32px,3vw,52px); font-weight:300; line-height:1.05; letter-spacing:-1.5px; color:var(--ink); margin-bottom:30px}
.featured-rule{width:82px; height:1px; background:rgba(26,26,24,.33); margin-bottom:30px}
.post-desc{max-width:560px; font-size:15px; line-height:2; color:#37322e; margin-bottom:42px}
.read-link{display:inline-flex; align-items:center; gap:28px; color:var(--ink); text-decoration:none; text-transform:uppercase; font-size:10px; letter-spacing:5px; font-weight:700; padding-bottom:12px; border-bottom:1px solid rgba(26,26,24,.58); transition:gap .35s var(--ease), opacity .3s ease}
.all-posts-link{display:inline-flex; align-items:center; gap:28px; color:var(--ink); text-decoration:none; text-transform:uppercase; font-size:10px; letter-spacing:5px; font-weight:700; padding-bottom:12px; border-bottom:1px solid rgba(26,26,24,.58); transition:gap .35s var(--ease), opacity .3s ease}
.read-link:hover{gap:38px; opacity:.62}
.all-posts-link:hover{gap:38px; opacity:.62}
.featured-media-wrap{position:relative}
.featured-media{position:relative; width:100%; height:clamp(220px,30vh,340px); min-height:0; border-radius:10px; background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(224,211,198,.42)), var(--cream); border:1px solid rgba(26,26,24,.055); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 28px 80px rgba(62,48,38,.08)}
.featured-media::before{content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, rgba(26,26,24,.018) 0, rgba(26,26,24,.018) 1px, transparent 1px, transparent 16px); pointer-events:none}
.small-media::before{content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, rgba(26,26,24,.018) 0, rgba(26,26,24,.018) 1px, transparent 1px, transparent 16px); pointer-events:none}
.media-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; color:rgba(26,26,24,.25)}
.media-icon{width:44px; height:44px; opacity:.58}
.media-label{font-size:9px; letter-spacing:4px; text-transform:uppercase; font-weight:500}
.featured-date{display:block; text-align:right; margin-top:12px; font-size:9px; letter-spacing:5px; text-transform:uppercase; color:#6e6259; font-weight:500}
.blog-divider-row{display:flex; align-items:flex-end; gap:22px; margin-bottom:clamp(20px,3vh,30px)}
.blog-divider{height:1px; flex:1; background:rgba(26,26,24,.20)}
.all-posts-link{white-space:nowrap; transform:none; margin-bottom:-1px}
.post-row{display:grid; grid-template-columns:1fr 1px 1fr; gap:clamp(36px,5vw,70px); align-items:center}
.post-separator{width:1px; height:clamp(130px,17vh,160px); background:rgba(26,26,24,.17)}
.small-post{display:grid; grid-template-columns:clamp(128px,10.5vw,154px) 1fr; gap:clamp(24px,3vw,34px); align-items:center}
.small-media{position:relative; width:clamp(128px,10.5vw,154px); height:clamp(128px,10.5vw,154px); border-radius:8px; background:linear-gradient(135deg, rgba(255,255,255,.25), rgba(224,211,198,.42)); border:1px solid rgba(26,26,24,.04); display:flex; align-items:center; justify-content:center; overflow:hidden}
.small-media .media-icon{width:34px; height:34px}
.post-meta{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px}
.small-kicker{font-size:8px; letter-spacing:4px; text-transform:uppercase; color:#74675d; font-weight:700}
.small-date{font-size:8px; letter-spacing:4px; text-transform:uppercase; color:#74675d; font-weight:700}
.small-date{font-size:8px; color:#8a8078; font-weight:500}
.small-title{font-family:'Cormorant Garamond',serif; font-size:clamp(24px,1.75vw,32px); line-height:1.05; font-weight:300; letter-spacing:-.7px; margin-bottom:12px; color:var(--ink)}
.small-desc{font-size:13px; line-height:1.85; color:#48413c; margin-bottom:16px; max-width:420px}
.blog-wrap{opacity:0; transform:translateY(18px); transition:opacity 1.05s var(--ease), transform 1.05s var(--ease)}
.blog-section.in-view .blog-wrap{opacity:1; transform:translateY(0)}
.featured-copy{opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.featured-media-wrap{opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.blog-divider-row{opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.small-post{opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.blog-section.in-view .featured-copy{opacity:1; transform:translateY(0); transition-delay: 0.15s}
.blog-section.in-view .featured-media-wrap{opacity:1; transform:translateY(0); transition-delay: 0.30s}
.blog-section.in-view .blog-divider-row{opacity:1; transform:translateY(0); transition-delay: 0.48s}
.blog-section.in-view .small-post:nth-child(1){opacity:1; transform:translateY(0); transition-delay: 0.58s}
.blog-section.in-view .small-post:nth-child(3){opacity:1; transform:translateY(0); transition-delay: 0.70s}
.post-separator{opacity: 0; transform: scaleY(0); transition: opacity 0.6s ease 0.64s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.64s; transform-origin: top center}
.blog-section.in-view .post-separator{opacity:1; transform:scaleY(1)}
@keyframes blogShimmer{0%{background-position: -600px 0} 100%{background-position: 600px 0}}
.featured-media::before{content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100% ); background-size: 600px 100%; animation: blogShimmer 1.6s ease-in-out infinite; z-index: 1; pointer-events: none}
.small-media::before{content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100% ); background-size: 600px 100%; animation: blogShimmer 1.6s ease-in-out infinite; z-index: 1; pointer-events: none}
.blog-section.in-view .featured-media::before{animation: blogShimmer 1.6s ease-in-out 1; opacity: 0; transition: opacity 0.6s ease 1s}
.blog-section.in-view .small-media::before{animation: blogShimmer 1.6s ease-in-out 1; opacity: 0; transition: opacity 0.6s ease 1s}
.featured-media{transition:transform .75s var(--ease), box-shadow .75s var(--ease), border-color .55s ease; will-change:transform}
.small-media{transition:transform .75s var(--ease), box-shadow .75s var(--ease), border-color .55s ease; will-change:transform}
.featured-post:hover .featured-media{transform:translate3d(var(--px,0px), var(--py,0px), 0) scale(1.018); box-shadow:0 34px 90px rgba(62,48,38,.11); border-color:rgba(26,26,24,.09)}
.small-post:hover .small-media{transform:scale(1.025); border-color:rgba(26,26,24,.08)}
.featured-media::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at 38% 26%, rgba(255,255,255,.42), transparent 42%); opacity:.55; pointer-events:none}
.small-media::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at 38% 26%, rgba(255,255,255,.42), transparent 42%); opacity:.55; pointer-events:none}
.blog-divider{background:linear-gradient(90deg, rgba(26,26,24,0), rgba(26,26,24,.24) 16%, rgba(26,26,24,.24) 84%, rgba(26,26,24,0) )}
.featured-rule{background:linear-gradient(90deg, rgba(26,26,24,.38), rgba(26,26,24,0))}
.post-separator{background:linear-gradient(180deg, rgba(26,26,24,0), rgba(26,26,24,.19), rgba(26,26,24,0))}
@media (prefers-reduced-motion: reduce){
  .blog-wrap, .featured-media, .small-media, .read-link, .all-posts-link{transition:none !important}
  .featured-post:hover .featured-media, .small-post:hover .small-media{transform:none}
}
@media(max-width:1100px){
  .blog-section{align-items:flex-start; padding-top:90px}
  .featured-post{grid-template-columns:1fr; gap:38px; padding-top:78px}
  .featured-media{height:42vh}
  .post-row{grid-template-columns:1fr; gap:34px}
  .post-separator{width:100%; height:1px}
  .small-post{grid-template-columns:150px 1fr}
  .small-media{width:150px; height:150px}
}
@media(max-width:680px){
  .blog-section{padding:86px 6vw 54px}
  .blog-index{position:relative; top:auto; margin-bottom:38px}
  .featured-post{padding:0 0 40px}
  .featured-title{font-size:46px}
  .featured-media{min-height:270px; height:36vh; border-radius:10px}
  .blog-divider-row{grid-template-columns:1fr; align-items:start}
  .all-posts-link{transform:none; margin-bottom:-1px}
  .small-post{grid-template-columns:1fr; gap:20px}
  .small-media{width:100%; height:220px}
  .post-meta{align-items:flex-start; flex-direction:column; gap:8px}
}
#contact{--ivory:#f2ede6; --cream:#eee5da; --ink:#1a1a18; --muted:#8a8078; --accent:#6b5c4e; --ease:cubic-bezier(.16,1,.3,1); background: radial-gradient(circle at 62% 38%, rgba(255,255,255,.52), transparent 38%), radial-gradient(circle at 12% 78%, rgba(255,255,255,.35), transparent 34%), linear-gradient(180deg,#f2ede6 0%,#eee5da 100%); overflow:hidden; align-items:stretch; justify-content:stretch; padding:clamp(110px,12vh,170px) 5.8vw clamp(40px,4vh,56px)}
#contact::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.035; 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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:170px 170px; z-index:0}
.contact-final-wrap{width:100%; height:100%; position:relative; z-index:2; display:grid; grid-template-rows:auto 1fr auto; gap:clamp(22px,3vh,38px); opacity:0; transform:translateY(22px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease)}
#contact.contact-in-view .contact-final-wrap{opacity:1; transform:none}
.contact-final-head > div{opacity: 0; transform: translateY(20px); transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1)}
.contact-final-title{opacity: 0; transform: translateY(20px); transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1)}
.contact-final-desc{opacity: 0; transform: translateY(20px); transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1)}
#contact.contact-in-view .contact-final-head > div{opacity:1; transform:translateY(0); transition-delay: 0.10s}
#contact.contact-in-view .contact-final-title{opacity:1; transform:translateY(0); transition-delay: 0.22s}
#contact.contact-in-view .contact-final-desc{opacity:1; transform:translateY(0); transition-delay: 0.38s}
.contact-map-card{opacity: 0; transform: scale(0.97) translateY(16px); transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1) 0.32s, transform 1.1s cubic-bezier(0.16,1,0.3,1) 0.32s}
#contact.contact-in-view .contact-map-card{opacity:1; transform:scale(1) translateY(0)}
.contact-side:first-of-type{opacity: 0; transform: translateX(-14px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.42s, transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.42s}
.contact-side:last-of-type{opacity: 0; transform: translateX(14px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.54s, transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.54s}
#contact.contact-in-view .contact-side{opacity:1; transform:translateX(0)}
.contact-pin{opacity: 0; transform: translate(-50%,-50%) scale(0.7); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1) 0.72s, transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.72s}
#contact.contact-in-view .contact-pin{opacity:1; transform:translate(-50%,-50%) scale(1)}
.contact-pin-label{opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity 0.6s ease 0.88s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.88s}
#contact.contact-in-view .contact-pin-label{opacity:1; transform:translateX(-50%) translateY(0)}
.contact-route-line path{stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s cubic-bezier(0.16,1,0.3,1)}
#contact.contact-in-view .contact-route-line path:nth-child(1){stroke-dashoffset: 0; transition-delay: 0.50s}
#contact.contact-in-view .contact-route-line path:nth-child(2){stroke-dashoffset: 0; transition-delay: 0.68s}
#contact.contact-in-view .contact-route-line path:nth-child(3){stroke-dashoffset: 0; transition-delay: 0.84s}
.contact-footer{opacity: 0; transform: translateY(12px); transition: opacity 0.75s ease 0.70s, transform 0.75s cubic-bezier(0.16,1,0.3,1) 0.70s}
#contact.contact-in-view .contact-footer{opacity:1; transform:translateY(0)}
.contact-final-head{display:grid; grid-template-columns:minmax(480px,1fr) auto; align-items:end; gap:40px}
.contact-final-index{display:flex; align-items:center; gap:18px; font-size:9px; letter-spacing:4px; text-transform:uppercase; color:#7d7167; margin-bottom:clamp(18px,2.2vh,26px)}
.contact-final-index::after{content:''; width:58px; height:1px; background:rgba(26,26,24,.32)}
.contact-final-title{font-family:'Cormorant Garamond',serif; font-size:clamp(54px,6.6vw,106px); font-weight:300; line-height:.88; letter-spacing:-3.2px; color:#1a1a18; max-width:790px}
.contact-final-title em{font-style:italic; color:#6b5c4e}
.contact-final-desc{max-width:360px; font-size:13px; line-height:1.95; color:#514943; padding-bottom:10px}
.contact-final-desc span{display:block; margin-top:14px; font-size:8px; letter-spacing:4px; text-transform:uppercase; color:#8a8078}
.contact-map-stage{min-height:0; display:grid; grid-template-columns:minmax(260px,.34fr) minmax(520px,1fr) minmax(240px,.32fr); gap:clamp(22px,3vw,42px); align-items:stretch}
.contact-side{display:flex; flex-direction:column; justify-content:space-between; gap:22px; min-height:0}
.contact-info-block{border-top:1px solid rgba(26,26,24,.13); padding-top:18px; position:relative}
.contact-info-block::before{content:''; position:absolute; top:-1px; left:0; width:42px; height:1px; background:rgba(26,26,24,.42)}
.contact-info-block small{display:block; font-size:7.5px; letter-spacing:3.7px; text-transform:uppercase; color:#857970; margin-bottom:10px}
.contact-info-block p{font-size:13px; line-height:1.9; color:#1a1a18; text-decoration:none}
.contact-info-block a{font-size:13px; line-height:1.9; color:#1a1a18; text-decoration:none}
.contact-info-block .muted{color:#746a62}
.contact-quick-links{display:grid; gap:0; border-top:1px solid rgba(26,26,24,.12); border-bottom:1px solid rgba(26,26,24,.12)}
.contact-quick-links a{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid rgba(26,26,24,.08); text-decoration:none; color:#1a1a18; font-size:9px; letter-spacing:4px; text-transform:uppercase; transition:opacity .3s ease, padding-left .35s var(--ease)}
.contact-quick-links a:last-child{border-bottom:none}
.contact-quick-links a:hover{opacity:.55; padding-left:10px}
.contact-map-card{position:relative; overflow:hidden; border:1px solid rgba(26,26,24,.08); border-radius:14px; min-height:0; height:100%; background:#ded4ca; box-shadow:0 34px 92px rgba(57,43,34,.12); isolation:isolate}
.contact-map-visual{position:absolute; inset:-1px; background: linear-gradient(90deg, rgba(242,237,230,.26) 0 1px, transparent 1px 100%), linear-gradient(0deg, rgba(242,237,230,.25) 0 1px, transparent 1px 100%), radial-gradient(circle at 50% 48%, rgba(255,255,255,.34), transparent 36%), linear-gradient(135deg,#d8cabe,#eee5da); background-size:74px 74px,74px 74px,100% 100%,100% 100%; filter:contrast(1.02) saturate(.88); transform:scale(1.02)}
.contact-map-visual::before{content:''; position:absolute; inset:-20%; background: linear-gradient(28deg, transparent 0 40%, rgba(26,26,24,.055) 40.4% 41.1%, transparent 41.5% 100%), linear-gradient(118deg, transparent 0 46%, rgba(26,26,24,.048) 46.3% 47%, transparent 47.4% 100%), linear-gradient(162deg, transparent 0 54%, rgba(26,26,24,.045) 54.3% 55%, transparent 55.4% 100%), linear-gradient(74deg, transparent 0 61%, rgba(26,26,24,.04) 61.3% 62%, transparent 62.4% 100%); transform:rotate(-3deg) scale(1.08)}
.contact-map-visual::after{content:''; position:absolute; inset:0; background: radial-gradient(circle at 48% 48%, transparent 0 28%, rgba(242,237,230,.42) 58%, rgba(242,237,230,.76) 100%), repeating-linear-gradient(135deg, rgba(26,26,24,.018) 0, rgba(26,26,24,.018) 1px, transparent 1px, transparent 18px); pointer-events:none}
.contact-route-line{position:absolute; inset:0; z-index:2; pointer-events:none}
.contact-route-line path{fill:none; stroke:rgba(26,26,24,.32); stroke-width:1.1; stroke-dasharray:7 9; stroke-linecap:round}
.contact-pin{position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); z-index:10; width:82px; height:82px; border-radius:50%; border:1px solid rgba(26,26,24,.20); display:flex; align-items:center; justify-content:center; background:rgba(242,237,230,.32); backdrop-filter:blur(6px); box-shadow:0 18px 58px rgba(42,32,24,.16)}
.contact-pin::before{content:''; width:16px; height:16px; border-radius:50%; background:#1a1a18; box-shadow:0 0 0 12px rgba(26,26,24,.06); animation:contactPinPulse 2.6s ease-in-out infinite}
@keyframes contactPinPulse{0%,100%{box-shadow:0 0 0 10px rgba(26,26,24,.055)} 50%{box-shadow:0 0 0 18px rgba(26,26,24,.025)}}
.contact-pin-label{position:absolute; left:50%; top:calc(48% + 56px); transform:translateX(-50%); z-index:10; padding:13px 18px; background:rgba(242,237,230,.72); border:1px solid rgba(26,26,24,.10); backdrop-filter:blur(12px); text-align:center; box-shadow:0 18px 46px rgba(45,35,28,.10)}
.contact-pin-label strong{display:block; font-family:'Cormorant Garamond',serif; font-weight:300; font-size:24px; line-height:1; letter-spacing:-.5px}
.contact-pin-label span{display:block; margin-top:7px; font-size:7px; letter-spacing:3px; text-transform:uppercase; color:#8a8078}
.contact-map-note{position:absolute; right:22px; top:20px; z-index:5; text-align:right; font-size:8px; letter-spacing:3px; text-transform:uppercase; color:#746a62; line-height:1.9}
.contact-map-corner{position:absolute; z-index:5; left:22px; bottom:20px; font-size:8px; letter-spacing:3px; text-transform:uppercase; color:#746a62; display:flex; gap:13px; align-items:center}
.contact-map-corner::before{content:''; width:34px; height:1px; background:rgba(26,26,24,.30)}
.contact-footer{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(30px,5vw,80px); align-items:end; border-top:1px solid rgba(26,26,24,.11); padding-top:clamp(18px,2.3vh,28px); padding-left:clamp(28px,5.8vw,96px); padding-right:clamp(28px,5.8vw,96px); padding-bottom:clamp(18px,2.3vh,28px)}
.contact-footer-brand{display:flex; flex-direction:column; gap:8px}
.contact-footer-logo{font-family:'Cormorant Garamond',serif; font-size:clamp(32px,3vw,44px); line-height:.9; letter-spacing:-1px}
.contact-footer-logo em{font-style:italic}
.contact-footer-sub{font-size:8px; letter-spacing:4px; color:#8a8078; text-transform:uppercase}
.contact-footer-manifesto{justify-self:center; text-align:center; font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.2vw,34px); line-height:1.05; letter-spacing:-.6px; color:#5c5149; font-weight:300}
.contact-footer-manifesto em{font-style:italic; color:#1a1a18}
.contact-footer-mini{display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-size:8px; letter-spacing:3px; text-transform:uppercase; color:#8a8078}
.contact-footer-mini nav{display:flex; gap:22px}
.contact-footer-mini a{color:#1a1a18; text-decoration:none; transition:opacity .25s ease}
.contact-footer-mini a:hover{opacity:.45}
@media(max-width:1100px){
  #contact{height:auto; min-height:100vh; overflow:visible}
  .contact-final-head{grid-template-columns:1fr}
  .contact-final-desc{max-width:620px}
  .contact-map-stage{grid-template-columns:1fr}
  .contact-side{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
  .contact-quick-links{grid-column:1 / -1}
  .contact-map-card{height:54vh; min-height:420px; order:-1}
  .contact-footer{grid-template-columns:1fr; align-items:start}
  .contact-footer-manifesto{justify-self:start; text-align:left}
  .contact-footer-mini{align-items:flex-start}
}
@media(max-width:680px){
  #contact{padding:82px 6vw 54px}
  .contact-final-title{font-size:48px; letter-spacing:-1.8px}
  .contact-side{grid-template-columns:1fr}
  .contact-map-card{height:46vh; min-height:340px; border-radius:12px}
  .contact-pin{width:70px; height:70px}
  .contact-pin-label strong{font-size:21px}
  .contact-footer-mini nav{flex-wrap:wrap}
}
.counter{display:none !important}
.gallery-eyebrow{display:none !important}
.blog-index{display:none !important}
.post-kicker{display:none !important}
.contact-final-index{display:none !important}
.cta-btn{display:inline-block; font-family:'DM Sans', sans-serif; font-size:9px; letter-spacing:4px; text-transform:uppercase; color:#1a1a18; border:1px solid rgba(26,26,24,0.4); padding:14px 40px; min-height:auto; background:transparent; text-decoration:none; margin:0; position:relative; overflow:hidden; cursor:pointer; font-weight:400; transition:border-color 0.4s ease, opacity .3s ease, transform .3s ease}
.gallery-cta{display:inline-block; font-family:'DM Sans', sans-serif; font-size:9px; letter-spacing:4px; text-transform:uppercase; color:#1a1a18; border:1px solid rgba(26,26,24,0.4); padding:14px 40px; min-height:auto; background:transparent; text-decoration:none; margin:0; position:relative; overflow:hidden; cursor:pointer; font-weight:400; transition:border-color 0.4s ease, opacity .3s ease, transform .3s ease}
.read-link{display:inline-block; font-family:'DM Sans', sans-serif; font-size:9px; letter-spacing:4px; text-transform:uppercase; color:#1a1a18; border:1px solid rgba(26,26,24,0.4); padding:14px 40px; min-height:auto; background:transparent; text-decoration:none; margin:0; position:relative; overflow:hidden; cursor:pointer; font-weight:400; transition:border-color 0.4s ease, opacity .3s ease, transform .3s ease}
.all-posts-link{display:inline-block; font-family:'DM Sans', sans-serif; font-size:9px; letter-spacing:4px; text-transform:uppercase; color:#1a1a18; border:1px solid rgba(26,26,24,0.4); padding:14px 40px; min-height:auto; background:transparent; text-decoration:none; margin:0; position:relative; overflow:hidden; cursor:pointer; font-weight:400; transition:border-color 0.4s ease, opacity .3s ease, transform .3s ease}
.cta-btn::before{content:''; position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(26,26,24,0.05); transition:height 0.4s cubic-bezier(0.22,1,0.36,1); z-index:0}
.gallery-cta::before{content:''; position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(26,26,24,0.05); transition:height 0.4s cubic-bezier(0.22,1,0.36,1); z-index:0}
.read-link::before{content:''; position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(26,26,24,0.05); transition:height 0.4s cubic-bezier(0.22,1,0.36,1); z-index:0}
.all-posts-link::before{content:''; position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(26,26,24,0.05); transition:height 0.4s cubic-bezier(0.22,1,0.36,1); z-index:0}
.cta-btn span{position:relative; z-index:1}
.gallery-cta span{position:relative; z-index:1}
.read-link span{position:relative; z-index:1}
.all-posts-link span{position:relative; z-index:1}
.cta-btn:hover{gap:0; opacity:1; transform:none; border-color:#1a1a18; background:transparent}
.gallery-cta:hover{gap:0; opacity:1; transform:none; border-color:#1a1a18; background:transparent}
.read-link:hover{gap:0; opacity:1; transform:none; border-color:#1a1a18; background:transparent}
.all-posts-link:hover{gap:0; opacity:1; transform:none; border-color:#1a1a18; background:transparent}
.cta-btn:hover::before{height:100%}
.gallery-cta:hover::before{height:100%}
.read-link:hover::before{height:100%}
.all-posts-link:hover::before{height:100%}
.gallery-copy{justify-content:center}
.gallery-title{margin-bottom:28px}
.featured-post{padding-top:clamp(42px,6vh,68px)}
.featured-title{margin-top:0}
.read-link{margin-top:0}
.contact-final-head{margin-top:clamp(18px,4vh,46px)}
@media(max-width:680px){
  .cta-btn, .gallery-cta, .read-link, .all-posts-link{padding:13px 28px}
  .contact-final-head{margin-top:0}
}
.info-block.social-block{border-top:none; padding-top:0}
.info-block.social-block::before{display:none}
.social-links{display:flex; flex-direction:column; max-width:190px; border-top:1px solid rgba(26,26,24,0.10); border-bottom:1px solid rgba(26,26,24,0.10)}
.social-links a{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; font-size:13px; line-height:1; letter-spacing:.2px; color:#1a1a18; text-decoration:none; border-bottom:1px solid rgba(26,26,24,0.075); transition:opacity .25s ease, transform .3s cubic-bezier(0.16,1,0.3,1)}
.social-links a:last-child{border-bottom:none}
.social-links a::after{content:'↗'; font-size:10px; color:#8a8078; transform:translateY(-1px)}
.social-links a:hover{opacity:.55; transform:translateX(4px)}
#contact .quick-links a:last-child{border-bottom:none !important}
#contact .quick-links a[href*="instagram"]{border-bottom:none !important}
#contact .quick-links a[data-social="instagram"]{border-bottom:none !important}
#contact .contact-social-inline{border-top:none !important; padding-top:0 !important}
#contact .contact-social-inline::before{display:none !important}
#contact .contact-social-row{display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:2px}
#contact .contact-social-row a{font-size:9px !important; letter-spacing:2px !important; color:#8a8078 !important; text-decoration:none !important; text-transform:uppercase; line-height:1 !important; border-bottom:none !important; padding:0 !important; transition:color .25s ease, opacity .25s ease}
#contact .contact-social-row a::after{content:none !important}
#contact .contact-social-row a:hover{color:#1a1a18 !important; opacity:1 !important; transform:none !important}
.contact-quick-links{border-bottom:none !important}
.contact-quick-links a{border-bottom:1px solid rgba(26,26,24,.08)}
.contact-quick-links a:last-child{border-bottom:none !important}
.contact-social-inline{border-top:none !important; padding-top:0 !important}
.contact-social-inline::before{display:none !important}
.contact-social-minimal{display:flex; gap:20px; align-items:center; margin-top:4px}
.contact-social-minimal a{text-decoration:none; color:#7f746b; font-size:9px; letter-spacing:2px; text-transform:uppercase; transition:opacity .25s ease,color .25s ease}
.contact-social-minimal a:hover{opacity:.55; color:#1a1a18}

/* ── Görsel filtresi — renk uyumu için ── */
.featured-media img,
.small-media img {
  filter: saturate(0.45) sepia(0.18) contrast(0.95) brightness(1.04);
  transition: filter 0.5s ease;
}
.featured-media:hover img,
.small-media:hover img {
  filter: saturate(0.65) sepia(0.1) contrast(0.97) brightness(1.02);
}

/* ════════════════════════════════════════════
   MOBİL RESPONSIVE — Ana tema
   Breakpoint: 768px (tablet), 480px (mobil)
════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Header ── */
  .header { padding: 24px 20px; }

  /* ── Hero ── */
  .headline { font-size: clamp(36px, 9vw, 56px); }
  .eyebrow { font-size: 8px; letter-spacing: 3px; }
  .tagline { font-size: 13px; max-width: 88vw; }
  .service-tags { flex-wrap: wrap; gap: 8px; }
  .bottom-info, .bottom-right { display: none; }
  .hero-cta { padding: 14px 28px; font-size: 9px; }

  /* ── Hizmetler ── */
  .services-shell { grid-template-columns: 1fr; gap: 20px; padding: 0 5vw; }
  .services-copy { text-align: center; }
  .services-title { font-size: clamp(36px, 8vw, 56px); }
  .services-desc { margin: 0 auto; }
  .experience-actions { justify-content: center; flex-wrap: wrap; }
  .mouth-stage { width: 92vw; max-width: 480px; margin: 0 auto; }

  /* Hotspot kartı mobilde sabit altta */
  .service-card {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 40px) !important;
    max-width: 400px;
    pointer-events: none;
  }

  /* ── Doktorlar ── */
  .stage { flex-direction: column; min-height: auto; }
  .portrait-col { width: 100%; height: 44vh; min-height: 280px; }
  .content-col { padding: 32px 5vw 120px; }
  .doc-name { font-size: clamp(36px, 9vw, 56px); }
  .spec-grid { grid-template-columns: 1fr; }
  .spec-item { border-right: none; border-bottom: 1px solid rgba(26,26,24,.07); }
  .skull-art { display: none; }
  .thumb-strip { height: 90px; }
  .thumb-item { height: 90px; }

  /* ── Galeri ── */
  .gallery-stage { grid-template-columns: 1fr; padding: 0 5vw; gap: 24px; }
  .gallery-copy { text-align: center; align-items: center; }
  .gallery-title { font-size: clamp(40px, 9vw, 64px); }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .gallery-main { grid-column: 1 / -1; }

  /* ── İletişim ── */
  .contact-final-wrap { padding: 40px 5vw 0; }
  .contact-final-title { font-size: clamp(36px, 8vw, 56px); }
  .contact-map-stage { flex-direction: column; gap: 24px; }
  .contact-map-card { height: 300px; min-height: 300px; order: -1; }
  .contact-side { width: 100%; }
  .contact-final-head { flex-direction: column; gap: 16px; }
  .contact-final-desc { max-width: 100%; }

  /* ── Footer ── */
  .contact-footer { flex-direction: column; gap: 24px; padding: 32px 5vw; text-align: center; }
  .contact-footer-social { justify-content: center; }
  .contact-footer-mini { flex-direction: column; align-items: center; gap: 12px; }

  /* ── Scroll indicator ── */
  .scroll-indicator { right: 12px; }
  .scroll-track { height: 80px; }

  /* ── Drawer ── */
  .drawer { width: 100%; }
}

@media (max-width: 480px) {

  /* ── Hero ── */
  .headline { font-size: clamp(30px, 9vw, 44px); }
  .section { scroll-snap-align: none; }

  /* ── Hizmetler ── */
  .services-title { font-size: clamp(30px, 8vw, 44px); }
  .filter-chip { font-size: 8px; padding: 7px 12px; }
  .mouth-stage { width: 96vw; }

  /* ── Doktorlar ── */
  .doc-name { font-size: clamp(30px, 8vw, 44px); }
  .bottom-row { flex-direction: column; gap: 16px; align-items: flex-start; }

  /* ── Galeri ── */
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-main { grid-column: 1; }
  .gallery-title { font-size: clamp(34px, 9vw, 52px); }

  /* ── İletişim ── */
  .contact-final-title { font-size: clamp(30px, 8vw, 44px); }
  .contact-map-card { height: 240px; min-height: 240px; }

  /* ── Blog ── */
  .featured-post { grid-template-columns: 1fr; }
  .featured-media-wrap { display: none; }
}

/* ── Hover → Touch dönüşümü ──────────────────
   Dokunmatik cihazlarda hover state'leri kapat,
   yerine active/focus kullan
─────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Hotspot — hover kaldır, tıklanabilir yap */
  .hotspot { cursor: pointer; }
  .hotspot:hover { fill: transparent; filter: none; transform: none; }
  .hotspot.touch-active {
    fill: rgba(255,255,255,0.22);
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.95)) drop-shadow(0 0 34px rgba(225,178,136,0.62));
    transform: scale(1.045);
  }
  .hotspot.warning.touch-active {
    fill: rgba(95,50,32,0.16);
    filter: drop-shadow(0 0 18px rgba(120,70,42,.58)) drop-shadow(0 0 36px rgba(255,210,160,.45));
  }

  /* Galeri kartları — hover efekti yerine tap */
  .gallery-main:hover, .gallery-thumb:hover { transform: none; box-shadow: none; }
  .gallery-main:active, .gallery-thumb:active { transform: scale(0.98); }

  /* CTA butonları — hover yerine active */
  .hero-cta:hover::before, .drawer-cta:hover::before { height: 0; }
  .hero-cta:active::before, .drawer-cta:active::before { height: 100%; }

  /* Thumb strip hover */
  .thumb-item:hover:not(.active) img { filter: none; transform: none; }

  /* Mouth cursor gizle */
  .mouth-cursor { display: none !important; }
  .mouth-stage:hover .mouth-cursor { opacity: 0; }

  /* Scroll indicator her zaman görünür */
  .scroll-indicator { opacity: 0.4; }
}