/* ==========================================================================
   FamDent — стоматологічна клініка, м. Львів
   Design system & styles
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* brand */
  --ink:      #382B23;
  --ink-900:  #241A15;
  --ink-800:  #2E231C;
  --ink-700:  #4A3A30;
  --ink-500:  #6E5B4E;
  --ink-300:  #9E8B7B;
  --ink-200:  #C2B3A5;

  --cream:    #EBE6DE;
  --cream-2:  #E2DBD1;
  --sand:     #D6CBBC;
  --paper:    #FBF9F6;
  --white:    #FFFFFF;

  --gold:     #B48A57;
  --gold-2:   #9C7442;
  --gold-soft:#E6D6BC;

  --line:     rgba(56,43,35,.14);
  --line-2:   rgba(56,43,35,.08);

  /* type */
  --f-display:"Playfair Display", "Manrope", "Times New Roman", Georgia, serif;
  --f-sans:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 68px);
  --maxw: 1320px;
  --sec-y: clamp(72px, 9vw, 148px);
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  /* motion */
  --e: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.4,0,.2,1);

  --hdr-h: 84px;
}

/* --------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video,svg{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
h1,h2,h3,h4,h5{margin:0; font-weight:500; line-height:1.12; letter-spacing:-.01em}
p{margin:0}
figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse}
::selection{background:var(--ink); color:var(--cream)}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

/* --------------------------------------------------------- 3. TYPOGRAPHY */
.d1{font-family:var(--f-display); font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:1.02; font-weight:500; letter-spacing:-.02em}
.d2{font-family:var(--f-display); font-size:clamp(2.1rem,4.4vw,3.7rem); line-height:1.08; font-weight:500; letter-spacing:-.02em}
.d3{font-family:var(--f-display); font-size:clamp(1.55rem,2.6vw,2.35rem); line-height:1.18; font-weight:500}
.d4{font-family:var(--f-display); font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.25; font-weight:500}
.it{font-style:italic; color:var(--gold-2)}

.lede{font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.72; color:var(--ink-700); max-width:60ch}
.small{font-size:.875rem; line-height:1.6}
.muted{color:var(--ink-500)}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-500);
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); flex:none}
.eyebrow.no-line::before{display:none}

/* ------------------------------------------------------------ 4. LAYOUT */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-nar{max-width:960px}
.section{padding-block:var(--sec-y); position:relative}
.section--cream{background:var(--cream)}
.section--ink{background:var(--ink); color:var(--cream)}
.section--ink .lede,
.section--ink .rich p,
.section--ink .rich ul li,
.section--ink .rich ol li{color:rgba(235,230,222,.74)}
.section--ink .rich ol li b,
.section--ink .rich h3,
.section--ink .rich h4{color:var(--cream)}
.section--ink .muted,
.section--ink .small.muted{color:rgba(235,230,222,.6)}
.section--ink .eyebrow{color:rgba(235,230,222,.62)}
.section--ink .link-u{color:var(--gold-soft)}
.section--ink .card{background:rgba(235,230,222,.05); border-color:rgba(235,230,222,.14); color:var(--cream)}
.section--ink .card p{color:rgba(235,230,222,.7)}
.section--ink .card__arr{border-color:rgba(235,230,222,.22)}
.section--ink .card__price{color:rgba(235,230,222,.8)}
.section--ink .card__foot{border-top-color:rgba(235,230,222,.14)}
.section--paper{background:var(--paper)}
.section--tight{padding-block:clamp(48px,6vw,92px)}

.grid{display:grid; gap:clamp(20px,2.4vw,34px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .g-4,.g-3,.g-2{grid-template-columns:1fr} }

.sec-head{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,64px); align-items:start; margin-bottom:clamp(38px,4.6vw,68px)}
.sec-num{
  font-family:var(--f-display); font-size:.95rem; color:var(--gold-2);
  padding-top:.55em; letter-spacing:.02em;
}
.sec-head__body{max-width:52ch}
.sec-head .lede{margin-top:1.1rem}
@media (max-width:640px){ .sec-head{grid-template-columns:1fr; gap:8px} .sec-num{padding-top:0} }

.hairline{height:1px; background:var(--line); border:0; margin:0}
.section--ink .hairline{background:rgba(235,230,222,.18)}

/* ----------------------------------------------------------- 5. BUTTONS */
.btn{
  --bg:var(--ink); --fg:var(--cream); --bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:1.02em 1.85em; border-radius:100px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-size:.9rem; font-weight:600; letter-spacing:.01em; line-height:1.2; white-space:nowrap;
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--e), box-shadow .5s var(--e), color .35s var(--e-soft), background-color .35s var(--e-soft), border-color .35s var(--e-soft);
  will-change:transform;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--gold); transform:translateY(101%);
  transition:transform .55s var(--e);
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#fff; border-color:var(--gold); box-shadow:0 14px 34px -18px rgba(56,43,35,.65)}
.btn:active{transform:scale(.98)}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line)}
.btn--ghost:hover{--bd:var(--gold)}
.btn--light{--bg:var(--cream); --fg:var(--ink); --bd:var(--cream)}
.btn--outline-light{--bg:transparent; --fg:var(--cream); --bd:rgba(235,230,222,.35)}
.btn--sm{padding:.78em 1.3em; font-size:.82rem}
.btn--lg{padding:1.18em 2.3em; font-size:.96rem}
.btn__ic{width:1.05em; height:1.05em; transition:transform .45s var(--e)}
.btn:hover .btn__ic{transform:translateX(4px)}

.link-u{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.9rem; letter-spacing:.01em;
  padding-bottom:3px; background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--e), color .3s;
}
.link-u:hover{background-size:100% 1px; color:var(--gold-2)}
.link-u svg{width:14px; height:14px; flex:none; transition:transform .45s var(--e)}
.link-u:hover svg{transform:translateX(4px)}
.stars{display:inline-flex; gap:2px; color:var(--gold)}
.stars svg{width:13px; height:13px; flex:none}
.eyebrow svg{width:14px;height:14px;flex:none}

/* -------------------------------------------------------- 6. DECORATION */
.grain{
  pointer-events:none; position:fixed; inset:0; z-index:9999; opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@media (max-width:760px){ .grain{opacity:.18} }

.glow{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(180,138,87,.20), rgba(180,138,87,0) 68%);
  filter:blur(10px);
}

/* arch-shaped media (echoes the tooth in the logo) */
.arch{
  border-radius:50% 50% var(--r-m) var(--r-m) / 34% 34% 3% 3%;
  overflow:hidden; position:relative; background:var(--cream-2);
}
.arch--soft{border-radius:50% 50% var(--r-m) var(--r-m) / 22% 22% 3% 3%}
.rounded{border-radius:var(--r-m); overflow:hidden; background:var(--cream-2)}
.rounded-l{border-radius:var(--r-l); overflow:hidden; background:var(--cream-2)}

.ratio{position:relative; overflow:hidden}
.ratio>img,.ratio>video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.r-45{aspect-ratio:4/5}
.r-34{aspect-ratio:3/4}
.r-43{aspect-ratio:4/3}
.r-11{aspect-ratio:1/1}
.r-916{aspect-ratio:9/16}
.r-169{aspect-ratio:16/9}

.zoom-img{transition:transform 1.1s var(--e)}
a:hover .zoom-img, .card:hover .zoom-img{transform:scale(1.055)}

/* ---------------------------------------------------------- 7. REVEALS */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--e), transform .9s var(--e)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

.rv-mask{display:block; overflow:hidden}
.rv-mask>span{display:block; transform:translateY(105%); transition:transform 1.05s var(--e)}
.rv-mask.in>span{transform:none}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-mask>span{opacity:1 !important; transform:none !important; transition:none !important}
}

/* ----------------------------------------------------------- 8. HEADER */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--hdr-h);
  display:flex; align-items:center;
  transition:background-color .5s var(--e-soft), box-shadow .5s var(--e-soft), height .4s var(--e), border-color .4s;
  border-bottom:1px solid transparent;
}
.hdr.solid{
  background:rgba(251,249,246,.86); backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-2); height:70px;
}
.hdr.hide{transform:translateY(-102%); transition:transform .45s var(--e-soft), background-color .4s}
.hdr__in{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:clamp(16px,2.4vw,40px)}
.brand{display:flex; align-items:center; gap:11px; flex:none}
.brand img{height:36px; width:auto; transition:height .4s var(--e)}
.hdr.solid .brand img{height:31px}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__name{font-family:var(--f-display); font-size:1.22rem; letter-spacing:.01em}
.brand__sub{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-500); margin-top:3px}

.nav{display:flex; align-items:center; gap:clamp(8px,1.5vw,26px); margin-inline:auto}
.nav__a{
  position:relative; font-size:.895rem; font-weight:500; padding:.5em 0; white-space:nowrap;
  transition:color .3s;
}
.nav__a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--e);
}
.nav__a:hover::after,.nav__a[aria-current="page"]::after{transform:scaleX(1); transform-origin:0 50%}
.nav__a[aria-current="page"]{color:var(--gold-2)}

.hdr__act{display:flex; align-items:center; gap:14px; flex:none}
.hdr__tel{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.9rem; white-space:nowrap}
.hdr__tel svg{width:15px;height:15px;color:var(--gold-2)}
.hdr__tel:hover{color:var(--gold-2)}

/* dropdown */
.has-drop{position:relative}
.drop{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,10px);
  width:min(640px,86vw); padding:22px; border-radius:var(--r-m);
  background:var(--paper); border:1px solid var(--line-2);
  box-shadow:0 34px 80px -40px rgba(56,43,35,.45);
  opacity:0; visibility:hidden; transition:opacity .35s var(--e), transform .45s var(--e), visibility .35s;
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translate(-50%,0)}
.drop__a{display:flex; align-items:baseline; gap:10px; padding:10px 12px; border-radius:10px; transition:background-color .3s}
.drop__a:hover{background:var(--cream)}
.drop__a b{font-weight:600; font-size:.9rem}
.drop__a span{font-size:.74rem; color:var(--ink-500); margin-left:auto; white-space:nowrap}

.burger{display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); align-items:center; justify-content:center; flex:none}
.burger span{display:block; width:17px; height:1.5px; background:var(--ink); position:relative; transition:background-color .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink); transition:transform .45s var(--e)}
.burger span::before{top:-5px}
.burger span::after{top:5px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(5px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1120px){
  .nav{display:none}
  .burger{display:inline-flex}
  .hdr__act{margin-left:auto}
}
@media (max-width:620px){
  .hdr__tel span{display:none}
  .hdr__act .btn{display:none}
  .brand__sub{display:none}
}

/* mobile overlay menu */
.mmenu{
  position:fixed; inset:0; z-index:890; background:var(--cream);
  padding:calc(var(--hdr-h) + 18px) var(--gutter) 34px;
  display:flex; flex-direction:column; gap:6px;
  clip-path:circle(0% at calc(100% - 42px) 42px);
  transition:clip-path .8s var(--e); overflow-y:auto;
  visibility:hidden;
}
body.menu-open .mmenu{clip-path:circle(150% at calc(100% - 42px) 42px); visibility:visible}
.mmenu__a{
  font-family:var(--f-display); font-size:clamp(1.7rem,7vw,2.6rem); line-height:1.28;
  padding:.16em 0; border-bottom:1px solid var(--line-2);
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--e), transform .5s var(--e);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.mmenu__a i{font-style:normal; font-family:var(--f-sans); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-300)}
body.menu-open .mmenu__a{opacity:1; transform:none}
body.menu-open .mmenu__a:nth-child(1){transition-delay:.16s}
body.menu-open .mmenu__a:nth-child(2){transition-delay:.21s}
body.menu-open .mmenu__a:nth-child(3){transition-delay:.26s}
body.menu-open .mmenu__a:nth-child(4){transition-delay:.31s}
body.menu-open .mmenu__a:nth-child(5){transition-delay:.36s}
body.menu-open .mmenu__a:nth-child(6){transition-delay:.41s}
body.menu-open .mmenu__a:nth-child(7){transition-delay:.46s}
.mmenu__foot{margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:14px}
.mmenu__foot .btn{width:100%}

/* ------------------------------------------------------------- 9. HERO */
.hero{
  position:relative; background:var(--cream); overflow:hidden;
  padding-top:calc(var(--hdr-h) + clamp(28px,5vw,64px)); padding-bottom:clamp(48px,7vw,104px);
}
.hero__glow{width:60vw; height:60vw; max-width:820px; max-height:820px; top:-16%; right:-12%}
.hero__in{position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4.5vw,72px); align-items:center}
.hero__copy{max-width:660px}
.hero h1{margin:1.1rem 0 0}
.hero__lede{margin-top:1.5rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:2.1rem}
.hero__stats{display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:18px clamp(18px,2.4vw,38px); margin-top:clamp(30px,4vw,54px); padding-top:clamp(22px,3vw,32px); border-top:1px solid var(--line)}
@media (max-width:520px){ .hero__stats{grid-template-columns:repeat(2,auto); gap:20px 34px} }
.stat__n{font-family:var(--f-display); font-size:clamp(1.6rem,2.5vw,2.2rem); line-height:1; display:flex; align-items:baseline; gap:.14em}
.stat__n i{font-style:normal; font-size:.55em; color:var(--gold-2)}
.stat__l{font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-500); margin-top:.6em; white-space:nowrap}

.hero__media{position:relative}
.hero__ph{position:relative; z-index:2}
.hero__ph img{width:100%; height:100%; object-fit:cover}
.hero__badge{
  position:absolute; z-index:3; left:-6%; bottom:9%;
  background:var(--paper); border:1px solid var(--line-2); border-radius:16px;
  padding:14px 18px; box-shadow:0 26px 54px -30px rgba(56,43,35,.5);
  display:flex; align-items:center; gap:12px;
}
.hero__badge b{font-family:var(--f-display); font-size:1.35rem; line-height:1}
.hero__badge small{display:block; font-size:.7rem; color:var(--ink-500); margin-top:3px; letter-spacing:.04em; white-space:nowrap}

.hero__mark{
  position:absolute; z-index:1; right:-4%; top:-6%; width:min(300px,32vw); color:var(--ink);
  opacity:.07;
}
.hero__scroll{
  margin-top:clamp(34px,5vw,64px); display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-500);
}
.hero__scroll i{display:block; width:1px; height:34px; background:linear-gradient(var(--ink-300),transparent); animation:sdown 2.4s var(--e-soft) infinite}
@keyframes sdown{0%{transform:scaleY(0); transform-origin:0 0}45%{transform:scaleY(1); transform-origin:0 0}46%{transform:scaleY(1); transform-origin:0 100%}100%{transform:scaleY(0); transform-origin:0 100%}}

@media (max-width:940px){
  .hero__in{grid-template-columns:1fr; gap:36px}
  .hero__media{max-width:440px; margin-inline:auto; width:100%}
  .hero__badge{left:auto; right:2%; bottom:5%}
  .hero__mark{display:none}
  .hero__scroll{display:none}
}

/* logo draw-in */
.draw path{
  fill:currentColor;
  stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.draw--anim path{
  fill-opacity:0;
  stroke-dasharray:var(--len,4000); stroke-dashoffset:var(--len,4000);
}
.draw--anim.go path{
  animation:drawstroke 2.2s var(--e) forwards, drawfill .9s var(--e-soft) 1.35s forwards;
}
@keyframes drawstroke{to{stroke-dashoffset:0}}
@keyframes drawfill{to{fill-opacity:1}}
@media (prefers-reduced-motion:reduce){
  .draw--anim path{fill-opacity:1; stroke-dashoffset:0; animation:none}
}

/* ---------------------------------------------------------- 10. MARQUEE */
.marq{background:var(--ink); color:var(--cream); padding:16px 0; overflow:hidden; position:relative}
.marq__t{display:flex; width:max-content; animation:marq 42s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
.marq__t span{display:inline-flex; align-items:center; gap:clamp(24px,4vw,52px); padding-right:clamp(24px,4vw,52px);
  font-family:var(--f-display); font-size:clamp(1rem,1.6vw,1.35rem); white-space:nowrap; opacity:.92}
.marq__t span::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__t{animation:none}}

/* ------------------------------------------------------------ 11. CARDS */
.card{
  position:relative; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-m);
  padding:clamp(22px,2.4vw,32px); overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  transition:border-color .5s var(--e), transform .6s var(--e), box-shadow .6s var(--e), background-color .5s;
}
.card>*{width:100%}
.card:hover{border-color:var(--sand); transform:translateY(-5px); box-shadow:0 30px 60px -42px rgba(56,43,35,.55)}
.section--cream .card{background:var(--paper)}
.card__n{font-family:var(--f-display); font-size:.85rem; color:var(--gold-2); letter-spacing:.04em}
.card h3{margin:.8rem 0 .55rem}
.card p{color:var(--ink-500); font-size:.94rem}
.card__foot{margin-top:auto; padding-top:1.4rem; border-top:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:12px}
.card .feat__ic{width:46px}
.card .card__n+h3,.card .card__n+.feat__ic{margin-top:.9rem}
.card__price{font-size:.85rem; font-weight:600; color:var(--ink-700)}
.card__price i{font-style:normal; color:var(--ink-300); font-weight:500}
.card__arr{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex:none; transition:background-color .45s var(--e), border-color .45s, color .45s, transform .45s var(--e)}
.card__arr svg{width:14px;height:14px}
.card:hover .card__arr{background:var(--ink); border-color:var(--ink); color:var(--cream); transform:rotate(-45deg)}

/* service card with thumb */
.svc{display:grid; grid-template-columns:1fr; gap:0}
.svc__ph{margin:-clamp(22px,2.4vw,32px); margin-bottom:22px; background:var(--cream-2)}

/* feature list */
.feat{display:flex; gap:16px; align-items:flex-start}
.feat__ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--gold-2)}
.feat__ic svg{width:19px;height:19px}
.feat h4{font-family:var(--f-sans); font-size:1rem; font-weight:700; margin-bottom:.35rem}
.feat p{font-size:.9rem; color:var(--ink-500)}
.section--ink .feat p{color:rgba(235,230,222,.7)}
.section--ink .feat__ic{border-color:rgba(235,230,222,.22); color:var(--gold-soft)}

/* -------------------------------------------------- 12. BEFORE / AFTER */
.ba{position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--ink-900); touch-action:pan-y; user-select:none; cursor:ew-resize; aspect-ratio:4/3}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.ba__after{clip-path:inset(0 0 0 var(--p,50%))}
.ba__line{position:absolute; top:0; bottom:0; left:var(--p,50%); width:2px; background:var(--paper); transform:translateX(-1px); pointer-events:none; box-shadow:0 0 0 1px rgba(56,43,35,.14)}
.ba__grip{
  position:absolute; top:50%; left:var(--p,50%); transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--paper); color:var(--ink);
  display:grid; place-items:center; box-shadow:0 8px 26px -8px rgba(0,0,0,.45); pointer-events:none;
  transition:transform .3s var(--e);
}
.ba:hover .ba__grip{transform:translate(-50%,-50%) scale(1.08)}
.ba__grip svg{width:20px;height:20px}
.ba__tag{
  position:absolute; top:14px; padding:.42em .9em; border-radius:100px; font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; backdrop-filter:blur(6px); pointer-events:none;
}
.ba__tag--b{left:14px; background:rgba(36,26,21,.6); color:var(--cream)}
.ba__tag--a{right:14px; background:rgba(251,249,246,.85); color:var(--ink)}

.case{display:flex; flex-direction:column; gap:14px}
.case{justify-content:space-between}
.case__meta{display:flex; align-items:baseline; justify-content:space-between; gap:14px; min-height:2.7em}
.case__meta h3{font-family:var(--f-sans); font-size:1rem; font-weight:700; line-height:1.35}
.case__meta span{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300); white-space:nowrap}

/* filters */
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  padding:.62em 1.15em; border-radius:100px; border:1px solid var(--line); font-size:.85rem; font-weight:500;
  transition:background-color .4s var(--e), color .4s, border-color .4s, transform .4s var(--e);
  white-space:nowrap;
}
.chip:hover{border-color:var(--gold); color:var(--gold-2)}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.chip.on:hover{color:var(--cream)}

/* ------------------------------------------------------ 13. SYMPTOM UI */
.sympt{display:grid; grid-template-columns:1fr .92fr; gap:clamp(26px,4vw,64px); align-items:start}
@media (max-width:900px){.sympt{grid-template-columns:1fr}}
.sympt__res{
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-l); padding:clamp(24px,3vw,38px);
  min-height:280px; position:relative; overflow:hidden;
}
.section--ink .sympt__res{background:rgba(235,230,222,.05); border-color:rgba(235,230,222,.14)}
.sympt__empty{color:var(--ink-500); font-size:.95rem}
.section--ink .sympt__empty{color:rgba(235,230,222,.6)}
.sympt__card{animation:fadeUp .6s var(--e) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.sympt__card h3{margin-bottom:.7rem}
.sympt__card p{color:var(--ink-500); font-size:.95rem}
.section--ink .sympt__card p{color:rgba(235,230,222,.72)}
.sympt__card .row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:1.6rem}
.sympt__price{font-size:.85rem; letter-spacing:.02em}
.sympt__price b{font-family:var(--f-sans); font-weight:800; font-size:1.1rem; margin-left:.3em; letter-spacing:-.01em}

/* ---------------------------------------------------------- 14. PEOPLE */
.doc{position:relative; display:block}
.doc__ph{background:var(--cream-2); margin-bottom:16px}
.doc h3{font-family:var(--f-sans); font-size:1.06rem; font-weight:700}
.doc p{font-size:.85rem; color:var(--ink-500); margin-top:.28rem}
.doc__tag{position:absolute; top:12px; left:12px; z-index:2; background:rgba(251,249,246,.9); border-radius:100px; padding:.36em .85em; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-700)}

/* --------------------------------------------------------- 15. GALLERY */
.hscroll{display:flex; gap:clamp(12px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start; flex:none}
.gal__it{width:clamp(230px,26vw,330px)}
.reel{width:clamp(210px,22vw,270px); position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--ink-900); cursor:pointer}
.reel video,.reel img{width:100%; aspect-ratio:9/16; object-fit:cover}
.reel__play{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,rgba(36,26,21,.05),rgba(36,26,21,.42)); transition:opacity .4s}
.reel__play i{width:54px;height:54px;border-radius:50%;background:rgba(251,249,246,.92); display:grid; place-items:center; transition:transform .45s var(--e)}
.reel:hover .reel__play i{transform:scale(1.1)}
.reel__play svg{width:17px;height:17px;color:var(--ink); margin-left:2px}
.reel.playing .reel__play{opacity:0; pointer-events:none}

/* ----------------------------------------------------------- 16. PRICE */
.ptable{width:100%; border-collapse:collapse}
.ptable caption{text-align:left; font-family:var(--f-display); font-size:clamp(1.3rem,2vw,1.7rem); padding-bottom:1rem; color:var(--ink); line-height:1.2}
.ptable__sub{display:block; font-family:var(--f-sans); font-size:.8rem; font-weight:500; color:var(--ink-500); margin-top:.5em; letter-spacing:.01em}
.ptable tr{border-bottom:1px solid var(--line-2)}
.ptable tr:hover{background:rgba(180,138,87,.05)}
.ptable td{padding:.95em .6em; vertical-align:baseline; font-size:.95rem}
.ptable td:first-child{padding-left:0}
.ptable td:last-child{padding-right:0; text-align:right; white-space:nowrap; font-weight:700; font-variant-numeric:tabular-nums}
.ptable td.sub{font-weight:700; color:var(--ink); font-size:.88rem; letter-spacing:.06em; text-transform:uppercase; padding-top:1.6em}
.pgroup{margin-bottom:clamp(40px,5vw,72px); scroll-margin-top:110px}
.pgroup.hidden{display:none}
.ptable tr.hidden{display:none}

.psearch{position:relative; max-width:520px}
.psearch input{
  width:100%; padding:1.02em 1.2em 1.02em 3em; border-radius:100px; border:1px solid var(--line);
  background:var(--paper); font-size:.95rem; transition:border-color .35s;
}
.psearch input:focus{outline:none; border-color:var(--gold)}
.psearch svg{position:absolute; left:1.15em; top:50%; transform:translateY(-50%); width:17px;height:17px; color:var(--ink-300)}
.pnone{padding:2.4em 0; color:var(--ink-500)}

/* calculator */
.calc{background:var(--cream); border-radius:var(--r-l); padding:clamp(24px,3.2vw,44px)}
.calc__list{display:grid; gap:2px; max-height:min(420px,52vh); overflow-y:auto; padding-right:6px}
.calc__it{display:flex; align-items:center; gap:14px; padding:.72em .85em; border-radius:10px; cursor:pointer; transition:background-color .3s}
.calc__it:hover{background:rgba(251,249,246,.7)}
.calc__it input{appearance:none; width:19px;height:19px; border:1.5px solid var(--sand); border-radius:5px; flex:none; position:relative; cursor:pointer; transition:background-color .25s,border-color .25s}
.calc__it input:checked{background:var(--ink); border-color:var(--ink)}
.calc__it input:checked::after{content:""; position:absolute; left:5.5px; top:2px; width:5px;height:10px; border:solid var(--cream); border-width:0 2px 2px 0; transform:rotate(43deg)}
.calc__it span{font-size:.92rem}
.calc__it b{margin-left:auto; font-size:.9rem; white-space:nowrap; font-variant-numeric:tabular-nums}
.calc__sum{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.calc__sum .t{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500)}
.calc__sum .v{font-family:var(--f-sans); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.05}

/* ------------------------------------------------------------ 17. FORM */
.form{display:grid; gap:16px}
.field{position:relative}
.field label{display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); margin-bottom:.55em}
.field input,.field textarea,.field select{
  width:100%; padding:.95em 1.1em; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); transition:border-color .35s, background-color .35s;
}
.section--ink .field input,.section--ink .field textarea,.section--ink .field select{
  background:rgba(235,230,222,.06); border-color:rgba(235,230,222,.2); color:var(--cream)
}
.section--ink .field label{color:rgba(235,230,222,.6)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--gold)}
.field textarea{resize:vertical; min-height:104px}
.field.err input,.field.err textarea{border-color:#B4544B}
.field__msg{font-size:.75rem; color:#B4544B; margin-top:.4em; display:none}
.field.err .field__msg{display:block}
.form__note{font-size:.78rem; color:var(--ink-500)}
.section--ink .form__note{color:rgba(235,230,222,.55)}
.form__ok{
  display:none; padding:1.4em 1.2em; border-radius:14px; background:rgba(180,138,87,.14);
  border:1px solid rgba(180,138,87,.35); font-size:.94rem;
}
.form.sent .form__ok{display:block; animation:fadeUp .5s var(--e) both}
.form.sent .form__body{display:none}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239E8B7B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.1em center}

/* ------------------------------------------------------------- 18. FAQ */
.faq{border-top:1px solid var(--line)}
.faq__it{border-bottom:1px solid var(--line)}
.faq__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:1.35em 0; text-align:left; font-size:clamp(1rem,1.3vw,1.12rem); font-weight:600; transition:color .3s}
.faq__q:hover{color:var(--gold-2)}
.faq__ic{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:transform .5s var(--e), background-color .4s, color .4s, border-color .4s}
.faq__ic svg{width:12px;height:12px}
.faq__it.open .faq__ic{transform:rotate(45deg); background:var(--ink); border-color:var(--ink); color:var(--cream)}
.faq__a{overflow:hidden; height:0; transition:height .5s var(--e)}
.faq__a>div{padding-bottom:1.5em; color:var(--ink-500); font-size:.98rem; max-width:76ch}

/* -------------------------------------------------------- 19. CONTACTS */
.cinfo{display:grid; gap:26px}
.cinfo__it{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start}
.cinfo__ic{width:42px;height:42px;border-radius:50%;border:1px solid rgba(235,230,222,.22);display:grid;place-items:center;color:var(--gold-soft)}
.cinfo__ic svg{width:17px;height:17px}
.cinfo__it dt{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:.35em}
.cinfo__it dd{margin:0; font-size:1.06rem; font-weight:600}
.cinfo__it dd small{display:block; font-weight:400; font-size:.86rem; opacity:.68; margin-top:.2em}
.map{border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line-2); background:var(--cream-2); min-height:340px}
.map iframe{width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.35) sepia(.12) contrast(1.02)}

.socials{display:flex; gap:10px; flex-wrap:wrap}
.soc{width:44px;height:44px;border-radius:50%;border:1px solid rgba(235,230,222,.22);display:grid;place-items:center;transition:background-color .4s var(--e),color .4s,border-color .4s,transform .4s var(--e)}
.soc svg{width:17px;height:17px}
.soc:hover{background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-3px)}
.section--paper .soc,.section--cream .soc{border-color:var(--line)}

/* ----------------------------------------------------------- 20. FOOTER */
.ftr{background:var(--ink-900); color:var(--cream); padding-block:clamp(56px,7vw,96px) 30px; position:relative; overflow:hidden}
.ftr__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,3vw,52px)}
@media (max-width:960px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__top{grid-template-columns:1fr}}
.ftr h4{font-family:var(--f-sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.55; margin-bottom:1.2rem; font-weight:600}
.ftr a{opacity:.82; transition:opacity .3s, color .3s}
.ftr a:hover{opacity:1; color:var(--gold-soft)}
.ftr ul{display:grid; gap:.68rem; font-size:.93rem}
.ftr__brand img{height:52px; width:auto; margin-bottom:18px}
.ftr__brand p{font-size:.9rem; opacity:.66; max-width:34ch}
.ftr__bot{margin-top:clamp(40px,5vw,72px); padding-top:24px; border-top:1px solid rgba(235,230,222,.14); display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; font-size:.8rem; opacity:.6}
.ftr__mark{position:absolute; right:-3%; bottom:-14%; width:min(340px,40vw); opacity:.045; pointer-events:none}

/* --------------------------------------------------------- 21. PAGEHEAD */
.phead{background:var(--cream); padding-top:calc(var(--hdr-h) + clamp(34px,5vw,72px)); padding-bottom:clamp(38px,5vw,70px); position:relative; overflow:hidden}
.phead__glow{width:46vw;height:46vw;max-width:600px;max-height:600px; top:-30%; right:-8%}
.phead__in{position:relative; z-index:2}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.55em; font-size:.78rem; color:var(--ink-500); margin-bottom:1.4rem}
.crumbs a:hover{color:var(--gold-2)}
.crumbs svg{width:11px;height:11px;opacity:.5}
.phead h1{max-width:20ch}
.phead .lede{margin-top:1.3rem}

/* -------------------------------------------------------- 22. UTILITIES */
.stack{display:grid; gap:clamp(14px,1.6vw,22px)}
.flexrow{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.tc{text-align:center}
.rich p+p{margin-top:1.05rem}
.rich h3{margin:2rem 0 .8rem}
.rich ul{display:grid; gap:.7rem; margin-top:1rem}
.rich ul li{position:relative; padding-left:1.5em; color:var(--ink-700)}
.rich ul li::before{content:""; position:absolute; left:0; top:.62em; width:6px;height:6px;border-radius:50%; background:var(--gold)}
.rich ol{counter-reset:s; display:grid; gap:1.1rem; margin-top:1.2rem}
.rich ol li{counter-increment:s; position:relative; padding-left:2.6em; color:var(--ink-700)}
.rich ol li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.05em; font-family:var(--f-display); color:var(--gold-2); font-size:.92rem}
.rich ol li b{color:var(--ink); display:block; margin-bottom:.15em; font-weight:700}

.note{background:var(--cream); border-left:2px solid var(--gold); border-radius:0 var(--r-s) var(--r-s) 0; padding:1.2em 1.4em; font-size:.92rem; color:var(--ink-700)}

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:880; display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,249,246,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line-2);
  gap:9px; transform:translateY(110%); transition:transform .5s var(--e);
}
.sticky-cta.on{transform:none}
.sticky-cta .btn{flex:1; padding-inline:1em}
@media (max-width:760px){.sticky-cta{display:flex}}

.skip{position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ink); color:var(--cream); padding:1em 1.4em; border-radius:0 0 10px 0}
.skip:focus{left:0}

/* cursor */
.cur{position:fixed; top:0; left:0; z-index:9998; pointer-events:none; width:9px;height:9px; border-radius:50%; background:var(--ink); mix-blend-mode:multiply; transition:width .35s var(--e), height .35s var(--e), opacity .3s; opacity:0}
.cur.on{opacity:1}
.cur.big{width:52px;height:52px; background:rgba(180,138,87,.3)}
@media (hover:none),(max-width:1024px){.cur{display:none}}