:root{
    --forest-deepest:#071C15;
    --forest-deep:#0B2E22;
    --forest:#12402F;
    --forest-soft:#1C5A42;
    --forest-glow:#237355;
    --gold:#C9A25C;
    --gold-light:#E3C98B;
    --gold-pale:#F1E3C4;
    --gold-dim:#8C7644;
    --cream:#FBF6EC;
    --cream-2:#F4ECDA;
    --ink:#16241D;
    --ink-soft:#41544A;
    --line: rgba(201,162,92,0.35);
    --ease: cubic-bezier(.22,1,.36,1);
    --ease-soft: cubic-bezier(.16,.84,.44,1);
    --font-body:'Amiri', serif;
    --font-display:'Gulzar', serif;
    --font-accent:'Bodoni Moda', serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
    /* Keep the decorative marquee moving even with reduced motion — it's a
       slow, non-flashing loop and central to the page's feel, not a UI cue. */
    .marquee-track{animation-duration:48s !important; animation-iteration-count:infinite !important;}
  }

  body{
    font-family:var(--font-body);
    background:var(--cream);
    color:var(--ink);
    overflow-x:hidden;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    cursor:auto;
  }
  @media (pointer: coarse){ body{ cursor:auto; } }
  html, body{ max-width:100%; }
  ::selection{background:var(--gold-light); color:var(--forest-deep);}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}

  a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:4px;}

  .wrap{max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,32px);}

  /* ---------- grain overlay ---------- */
  .grain{position:fixed; inset:0; z-index:999; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  /* ---------- scroll progress ---------- */
  .progress{position:fixed; top:0; inset-inline:0; height:2.5px; z-index:300; background:linear-gradient(to left, var(--gold), var(--gold-light)); transform-origin:right; transform:scaleX(0);}

  /* ---------- cursor glow ---------- */
  .cursor-glow{position:fixed; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,92,0.14), transparent 70%); pointer-events:none; z-index:5; transform:translate(-50%,-50%); left:0; top:0; opacity:0; transition:opacity .4s ease; will-change:transform;}

  .honeycomb{position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(201,162,92,0.14) 1.4px, transparent 1.4px); background-size:34px 30px; opacity:0.5; pointer-events:none;}
  /* Persian floral / paisley motif, recoloured to gold, used as a subtle
     tiled watermark in place of a plain geometric pattern. */
  .hex-pattern{position:absolute; inset:0; opacity:0.09; pointer-events:none; background-image:url("images/paisley-tile-gold.png"); background-size:190px auto; background-repeat:repeat;}

  .thread-svg{position:absolute; top:0; right:50%; width:2px; height:100%; transform:translateX(50%); pointer-events:none; z-index:1;}
  .thread-path{fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; opacity:0.55;}

  /* ---------- Nav ---------- */
  header{position:fixed; inset-inline:0; top:0; z-index:150; padding:20px 0; transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);}
  header.scrolled{background:rgba(7,28,21,0.92); backdrop-filter:blur(12px); padding:13px 0; box-shadow:0 8px 30px rgba(0,0,0,0.18);}
  header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{height:38px; width:auto; filter:brightness(0) invert(1);}
  .brand-text{color:#fff;}
  .brand-text strong{display:block; font-family:var(--font-display); font-size:20px; font-weight:400; letter-spacing:0.02em;}
  .brand-text span{display:block; font-size:10.5px; color:var(--gold-light); font-family:var(--font-accent); font-style:italic; letter-spacing:0.1em;}

  nav ul{display:flex; gap:30px; list-style:none;}
  nav a{color:#EFE9DA; font-size:15.5px; font-weight:500; position:relative; padding:4px 0;}
  nav a::after{content:''; position:absolute; bottom:0; right:0; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease);}
  nav a:hover::after, nav a:focus-visible::after{width:100%;}

  .nav-cta{background:var(--gold); color:var(--forest-deepest) !important; padding:11px 24px; border-radius:100px; font-weight:700; font-size:14px; transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);}
  .nav-cta:hover{background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 24px rgba(201,162,92,0.3);}

  .menu-toggle{display:none; position:relative; width:30px; height:22px; background:none; border:none; cursor:pointer; z-index:210;}
  .menu-toggle span{position:absolute; right:0; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .35s var(--ease), opacity .3s ease, background .3s ease;}
  .menu-toggle span:nth-child(1){top:0;}
  .menu-toggle span:nth-child(2){top:10px;}
  .menu-toggle span:nth-child(3){top:20px;}
  .menu-toggle.open span{background:var(--gold-light);}
  .menu-toggle.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

  .mobile-nav{position:fixed; inset:0; z-index:200; background:linear-gradient(160deg, var(--forest-deepest) 0%, var(--forest-deep) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; opacity:0; visibility:hidden; transform:translateY(-14px); transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;}
  .mobile-nav.open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity .4s var(--ease), transform .4s var(--ease);}
  .mobile-nav a{font-family:var(--font-display); font-size:25px; color:#fff; font-weight:400;}
  .mobile-nav .mn-tag{font-family:var(--font-accent); font-style:italic; color:var(--gold-light); font-size:16px; margin-bottom:6px;}
  .mobile-nav .btn{margin-top:10px;}

  section{position:relative;}
  .section-pad{padding:clamp(70px,10vw,130px) 0;}
  .kicker{font-family:var(--font-display); font-weight:400; color:var(--gold); font-size:21px; display:flex; align-items:center; gap:12px; margin-bottom:16px; letter-spacing:0.02em;}
  .kicker::before{content:''; width:30px; height:1px; background:var(--gold);}
  h2.section-title{font-family:var(--font-display); font-size:clamp(28px, 3.8vw, 46px); font-weight:400; line-height:1.5; max-width:720px; color:var(--forest-deep);}

  .reveal{opacity:0; transform:translateY(30px) scale(0.98); transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft);}
  .reveal.in{opacity:1; transform:translateY(0) scale(1);}
  .reveal-l{opacity:0; transform:translateX(30px) scale(0.98); transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft);}
  .reveal-l.in{opacity:1; transform:translateX(0) scale(1);}
  .reveal-r{opacity:0; transform:translateX(-30px) scale(0.98); transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft);}
  .reveal-r.in{opacity:1; transform:translateX(0) scale(1);}

  /* ---------- Hero ---------- */
  .hero{position:relative; display:flex; align-items:center; background:radial-gradient(ellipse 90% 70% at 75% 15%, var(--forest-soft) 0%, var(--forest-deep) 55%, var(--forest-deepest) 100%); color:var(--cream); overflow:hidden; padding-top:80px; padding-bottom:30px;}
  .hero .wrap{position:relative; z-index:3; display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; align-items:start;}
  .hero-eyebrow{display:inline-flex; align-items:center; gap:12px; font-family:var(--font-accent); font-style:italic; color:var(--gold-light); font-size:21px; letter-spacing:0.06em; margin-bottom:24px; opacity:0; animation:fadeUp .9s var(--ease-soft) .1s forwards;}
  .hero-eyebrow::before{content:''; width:38px; height:1px; background:var(--gold);}
  .hero h1{font-family:var(--font-display); font-size:clamp(34px, 4.8vw, 60px); font-weight:400; line-height:1.5; color:#fff; margin-bottom:22px; opacity:0; animation:fadeUp .9s var(--ease-soft) .25s forwards;}
  .hero h1 em{font-style:normal; color:var(--gold-light);}
  .hero p.lead{font-size:18px; color:#D9E4DC; max-width:520px; margin-bottom:14px; opacity:0; animation:fadeUp .9s var(--ease-soft) .4s forwards;}
  .hero .credential{color:var(--gold-light); font-weight:700; font-size:16px; margin-bottom:32px; opacity:0; animation:fadeUp .9s var(--ease-soft) .52s forwards;}
  .hero-ctas{display:flex; flex-wrap:wrap; gap:14px; opacity:0; animation:fadeUp .9s var(--ease-soft) .64s forwards;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}

  .btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:100px; font-weight:700; font-size:15.5px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease); border:1px solid transparent; position:relative; overflow:hidden; isolation:isolate;}
  /* Luxury shine sweep across the button on hover. */
  .btn::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 48%, rgba(255,255,255,0.35) 52%, transparent 70%); transform:translateX(-120%); transition:transform .75s var(--ease-soft);}
  .btn:hover::after{transform:translateX(120%);}
  .btn:active{transform:scale(0.96) !important;}
  .btn-gold{background:var(--gold); color:var(--forest-deepest);}
  .btn-gold:hover{background:var(--gold-light); transform:translateY(-3px); box-shadow:0 14px 30px rgba(201,162,92,0.35);}
  .btn-outline{border-color:rgba(255,255,255,0.35); color:#fff;}
  .btn-outline:hover{border-color:var(--gold); color:var(--gold-light); transform:translateY(-3px);}

  .hero-art{position:relative; display:flex; align-items:center; justify-content:center; opacity:0; animation:fadeIn 1.3s var(--ease-soft) .3s forwards;}
  @keyframes fadeIn{from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);}}
  .hero-art .ring{position:absolute; width:min(430px, 92%); aspect-ratio:1; border:1px solid rgba(201,162,92,0.4); border-radius:50%; animation:spin 60s linear infinite;}
  .hero-art .ring.r2{width:min(350px,76%); border-color:rgba(201,162,92,0.22); animation:spin 80s linear infinite reverse;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .hero-art .mark{position:relative; z-index:2; width:min(300px, 68%); transform:translateX(-13%); transition:transform .6s var(--ease-soft);}
  .hero-art .mark img{filter:drop-shadow(0 20px 40px rgba(0,0,0,0.35));}

  .scroll-cue{display:none;}

  /* ---------- marquee ---------- */
  .marquee{background:var(--forest-deep); overflow:hidden; padding:22px 0; border-top:1px solid rgba(201,162,92,0.18); border-bottom:1px solid rgba(201,162,92,0.18);}
  .marquee-track{display:flex; width:max-content; animation:scrollLeft 54s linear infinite; will-change:transform;}
  .marquee-track span{display:flex; align-items:center; gap:14px; padding:0 24px; font-family:var(--font-display); font-weight:400; font-size:22px; color:var(--gold-light); white-space:nowrap; flex-shrink:0;}
  .marquee-track span::after{content:'✦'; color:var(--gold-dim); font-size:12px; margin-inline-start:14px;}
  /* 12 unique phrases, each group duplicated 3x in the markup so the track
     always spans wider than the viewport (even on ultra-wide screens) and
     the loop point is invisible — a genuinely endless, non-repetitive cycle. */
  @keyframes scrollLeft{from{transform:translateX(0);} to{transform:translateX(-33.3333%);}}

  /* ---------- ABOUT ---------- */
  .about{background:var(--cream); overflow:hidden; position:relative;}
  .about-flourish{position:absolute; width:380px; height:380px; opacity:0.1; background-image:url("images/flourish-gold.png"); background-repeat:no-repeat; background-size:contain; pointer-events:none; z-index:0;}
  .about-flourish-tr{top:-80px; right:-90px; transform:rotate(45deg) scaleX(-1);}
  .about-flourish-bl{bottom:-80px; left:-90px; transform:rotate(45deg);}
  @media (max-width:700px){ .about-flourish{width:220px; height:220px;} .about-flourish-tr{top:-40px; right:-50px;} .about-flourish-bl{bottom:-40px; left:-50px;} }
  .about-top{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;}
  .badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
  .pill{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(11,46,34,0.18); border-radius:100px; padding:8px 18px; font-size:14px; color:var(--forest); font-weight:700; background:#fff;}
  .pill .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}

  .about-grid{display:grid; grid-template-columns:0.86fr 1.14fr; gap:70px; align-items:start; margin-top:60px;}

  .about-panel{position:relative;}
  .panel-frame{position:relative; border:1px solid rgba(11,46,34,0.14); border-radius:16px; padding:14px;}
  .panel-inner{position:relative; border-radius:10px; overflow:hidden; background:var(--forest-deep); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;}
  .panel-inner .hex-pattern, .panel-inner .honeycomb{opacity:0.14;}
  .panel-inner img{width:56%; position:relative; z-index:2; filter:drop-shadow(0 18px 30px rgba(0,0,0,0.35));}
  .about-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(0.55) sepia(0.28) saturate(1.35) brightness(0.94) contrast(1.08); z-index:2;}
  .about-photo-tint{position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(165deg, rgba(7,28,21,0.55) 0%, rgba(11,46,34,0.28) 45%, rgba(201,162,92,0.32) 100%); mix-blend-mode:color;}
  .about-photo-tint::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,28,21,0.55) 0%, transparent 55%); mix-blend-mode:normal;}
  .panel-corner{position:absolute; width:26px; height:26px; border-color:var(--gold);}
  .panel-corner.tl{top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; border-radius:0 10px 0 0;}
  .panel-corner.br{bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; border-radius:0 0 0 10px;}

  .panel-badge{position:absolute; bottom:-26px; left:-22px; z-index:5; background:var(--gold); color:var(--forest-deepest); border-radius:14px; padding:18px 22px; box-shadow:0 18px 40px rgba(0,0,0,0.22); text-align:center; min-width:120px;}
  .panel-badge b{display:block; font-family:var(--font-display); font-weight:400; font-size:34px; line-height:1;}
  .panel-badge span{font-size:12px; font-weight:700;}

  .quality-tags{margin-top:56px; display:grid; gap:14px;}
  .quality-tags .qt{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink-soft);}
  .quality-tags .qt svg{flex:none; width:20px; height:20px; stroke:var(--gold-dim); fill:none; stroke-width:1.8;}

  .doctor-name{margin-bottom:26px;}
  .doctor-name h3{font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.4vw,40px); color:var(--forest-deep); line-height:1.3;}
  .doctor-name span{display:block; margin-top:6px; font-size:15px; color:var(--gold-dim); font-weight:700; letter-spacing:0.02em;}

  .about-body .lede{font-family:var(--font-display); font-weight:400; font-size:27px; color:var(--forest); line-height:1.85; margin-bottom:24px;}
  .about-body p{color:var(--ink-soft); font-size:17px; margin-bottom:18px;}

  .timeline{margin-top:36px; position:relative; padding-right:26px;}
  .timeline::before{content:''; position:absolute; right:5px; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--gold), rgba(201,162,92,0.15));}
  .t-item{position:relative; padding-bottom:28px;}
  .t-item:last-child{padding-bottom:0;}
  .t-item::before{content:''; position:absolute; right:-26px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--cream); border:2px solid var(--gold);}
  .t-item h4{font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--forest-deep); margin-bottom:4px;}
  .t-item p{color:var(--ink-soft); font-size:15px; margin:0;}

  /* ---------- Services ---------- */
  .services{background:var(--forest-deepest); color:var(--cream);}
  .services .kicker{color:var(--gold-light);}
  .services .kicker::before{background:var(--gold-light);}
  .services h2.section-title{color:#fff;}
  .services-intro{color:#C7D4CB; max-width:600px; margin-top:18px; font-size:17px;}

  .service-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; margin-top:60px; background:rgba(201,162,92,0.25); border-radius:14px; overflow:hidden;}
  .service-card{background:var(--forest-deep); padding:44px 30px; position:relative; overflow:hidden; transition:background .4s var(--ease), transform .3s var(--ease);}
  .service-card:hover{background:var(--forest-soft);}
  .service-card:hover .service-icon path, .service-card:hover .service-icon circle, .service-card:hover .service-icon ellipse{stroke-dashoffset:0;}
  .service-num{font-family:var(--font-display); font-weight:400; color:var(--gold); font-size:17px; letter-spacing:0.03em; margin-bottom:20px; display:inline-block; position:relative; z-index:1;}
  /* Glow anchored to the number's own box, so it always sits exactly
     behind/around it regardless of card padding or content changes. */
  .service-num::before{content:''; position:absolute; top:50%; left:50%; width:64px; height:64px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,92,0.5), transparent 70%); opacity:0; transform:translate(-50%,-50%) scale(0.4); transition:opacity .45s var(--ease), transform .55s var(--ease); pointer-events:none; z-index:-1;}
  .service-card:hover .service-num::before{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .service-icon{width:46px; height:46px; margin-bottom:20px; stroke:var(--gold-light); fill:none; stroke-width:1.4; position:relative; z-index:1; overflow:visible; transition:filter .6s var(--ease);}
  .service-icon path, .service-icon circle, .service-icon ellipse{stroke-dasharray:220; stroke-dashoffset:220; transition:stroke-dashoffset 1.35s var(--ease-soft), stroke .5s ease;}
  /* Stagger each stroke so the golden outline draws itself in one smooth,
     continuous sweep rather than snapping in all at once. */
  .service-icon path:nth-child(1), .service-icon circle:nth-child(1), .service-icon ellipse:nth-child(1){transition-delay:0s;}
  .service-icon path:nth-child(2), .service-icon circle:nth-child(2), .service-icon ellipse:nth-child(2){transition-delay:.09s;}
  .service-icon path:nth-child(3), .service-icon circle:nth-child(3), .service-icon ellipse:nth-child(3){transition-delay:.18s;}
  .service-icon path:nth-child(4), .service-icon circle:nth-child(4), .service-icon ellipse:nth-child(4){transition-delay:.27s;}
  .service-icon path:nth-child(5), .service-icon circle:nth-child(5), .service-icon ellipse:nth-child(5){transition-delay:.36s;}
  .service-card:hover .service-icon{filter:drop-shadow(0 0 7px rgba(227,201,139,0.65));}
  .service-card:hover .service-icon path, .service-card:hover .service-icon circle, .service-card:hover .service-icon ellipse{stroke:var(--gold-light);}
  .service-card h3{font-family:var(--font-display); font-weight:400; font-size:21px; color:#fff; margin-bottom:10px; position:relative; z-index:1;}
  .service-card p{color:#BFCDC4; font-size:15px; line-height:1.9; position:relative; z-index:1;}

  /* ---------- Why ---------- */
  .why{background:var(--cream-2);}
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:56px;}
  .why-list{list-style:none; display:grid; gap:28px;}
  .why-list li{display:flex; gap:20px; align-items:flex-start; padding-bottom:26px; border-bottom:1px solid rgba(11,46,34,0.1);}
  .why-list li:last-child{border-bottom:none;}
  .why-mark{flex:none; font-family:var(--font-display); font-weight:400; color:var(--gold); font-size:32px; line-height:1;}
  .why-list h4{font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--forest-deep); margin-bottom:6px;}
  .why-list p{color:var(--ink-soft); font-size:15.5px;}
  .why-visual{position:relative; border-radius:14px; overflow:hidden; background:var(--forest-deep); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;}
  .why-visual img{width:60%; opacity:0.92;}

  /* ---------- Gallery / Before-After ---------- */
  .gallery{background:var(--cream);}
  .gallery-intro{max-width:620px; margin-top:18px; color:var(--ink-soft); font-size:17px;}
  .gallery-note{margin-top:10px; font-size:13.5px; color:var(--gold-dim); font-weight:700;}
  .ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:56px;}
  .ba-card{}
  .ba-slider{position:relative; width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(11,46,34,0.18); user-select:none; touch-action:pan-y;}
  .ba-layer{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .ba-after{background:radial-gradient(circle at 30% 20%, #2b6b4d 0%, var(--forest-deep) 55%, var(--forest-deepest) 100%);}
  .ba-before{background:linear-gradient(160deg, #6b7268 0%, #4a5049 55%, #363b34 100%); filter:grayscale(0.35) brightness(0.92);}
  .ba-clip{position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 0 50%);}
  .ba-water{width:34%; opacity:0.5;}
  .ba-tag{position:absolute; top:16px; font-family:var(--font-display); font-size:14px; padding:6px 16px; border-radius:100px; background:rgba(7,28,21,0.55); color:var(--gold-pale); letter-spacing:0.03em; z-index:3; backdrop-filter:blur(4px);}
  .ba-tag.before{left:16px;}
  .ba-tag.after{right:16px;}
  .ba-handle{position:absolute; top:0; bottom:0; width:0; left:50%; z-index:4; pointer-events:none; transform:translateX(-50%);}
  .ba-handle .line{position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; width:2px; background:var(--gold); box-shadow:0 0 10px rgba(201,162,92,0.6);}
  .ba-handle .grip{position:absolute; top:50%; right:0; left:0; margin:auto; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(0,0,0,0.3);}
  .ba-handle .grip svg{width:20px; height:20px; stroke:var(--forest-deepest); fill:none; stroke-width:2;}
  .ba-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5; -webkit-appearance:none; background:transparent; direction:ltr;}
  .ba-range::-webkit-slider-thumb{-webkit-appearance:none; width:44px; height:44px;}
  .ba-caption{margin-top:18px; text-align:center;}
  .ba-caption h4{font-family:var(--font-display); font-weight:400; font-size:20px; color:var(--forest-deep); margin-bottom:6px;}
  .ba-caption p{color:var(--ink-soft); font-size:14.5px;}

  /* ---------- Contact ---------- */
  .contact{background:var(--forest-deepest); color:#fff;}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-top:56px; align-items:start;}
  .contact-lead p{color:#C7D4CB; font-size:17px; margin-bottom:34px; max-width:460px;}
  .contact-cards{display:grid; gap:16px;}
  .c-card{display:flex; align-items:center; gap:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(201,162,92,0.25); border-radius:12px; padding:20px 22px; transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);}
  .c-card:hover{border-color:var(--gold); transform:translateX(-4px); background:rgba(201,162,92,0.06);}
  .c-icon{flex:none; width:46px; height:46px; border-radius:50%; background:rgba(201,162,92,0.14); display:flex; align-items:center; justify-content:center; color:var(--gold-light);}
  .c-icon svg{width:22px; height:22px; stroke:var(--gold-light); fill:none; stroke-width:1.7;}
  .c-text b{display:block; font-size:16px; font-weight:700; margin-bottom:3px;}
  .c-text span{color:#AEC0B5; font-size:14px; direction:ltr; display:inline-block;}

  .map-note{background:rgba(255,255,255,0.03); border:1px solid rgba(201,162,92,0.25); border-radius:12px; padding:clamp(24px,4vw,34px);}
  .map-note h4{font-family:var(--font-display); font-weight:400; font-size:20px; margin-bottom:10px; color:var(--gold-light);}
  .map-note p{color:#C7D4CB; font-size:15px; margin-bottom:22px;}
  .hours{list-style:none; display:grid; gap:10px;}
  .hours li{display:flex; justify-content:space-between; font-size:15px; color:#DCE5DF; padding-bottom:10px; border-bottom:1px dashed rgba(201,162,92,0.2);}
  .hours li b{color:var(--gold-light); font-weight:700;}

  .address-block{display:flex; align-items:flex-start; gap:10px; margin-top:22px; padding-top:20px; border-top:1px dashed rgba(201,162,92,0.2);}
  .address-block svg{width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.6; flex:none; margin-top:2px;}
  .address-block p{color:#DCE5DF; font-size:14.5px; margin:0; line-height:1.85;}
  .map-link{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:13.5px; font-weight:700; color:var(--gold-light); text-decoration:none; border-bottom:1px solid rgba(227,201,139,0.35); padding-bottom:2px; transition:border-color .3s ease, gap .3s ease;}
  .map-link:hover{border-color:var(--gold-light); gap:9px;}
  .map-link svg{width:13px; height:13px; stroke:var(--gold-light); fill:none; stroke-width:2;}

  .map-embed{margin-top:36px; border-radius:16px; overflow:hidden; border:1px solid rgba(201,162,92,0.25); aspect-ratio:16/6; box-shadow:0 20px 50px rgba(0,0,0,0.25);}
  .map-embed iframe{width:100%; height:100%; border:0; filter:grayscale(0.25) sepia(0.12) saturate(0.9);}
  @media (max-width:700px){
    .map-embed{aspect-ratio:4/5;}
  }

  footer{background:var(--forest-deepest); border-top:1px solid rgba(201,162,92,0.15); padding:34px 0;}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
  footer p{color:#8AA096; font-size:13.5px;}
  footer .fmark{display:flex; align-items:center; gap:10px; color:var(--gold-light); font-family:var(--font-accent); font-style:italic; font-size:14.5px;}

  .float-cta{position:fixed; bottom:20px; left:20px; z-index:120; display:flex; flex-direction:column; gap:12px;}
  .float-btn{width:54px; height:54px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,0.28); transition:transform .3s var(--ease);}
  .float-btn:hover{transform:scale(1.08);}
  .float-btn svg{width:24px; height:24px; stroke:var(--forest-deepest); fill:none; stroke-width:1.8;}

  /* ================= RESPONSIVE ================= */
  @media (max-width: 1024px){
    .about-grid, .why-grid, .contact-grid{grid-template-columns:1fr;}
    .why-visual{order:-1;}
    .panel-frame{max-width:420px; margin:0 auto;}
    .ba-grid{grid-template-columns:1fr;}
  }
  @media (max-width: 900px){
    nav, .nav-cta{display:none;}
    .menu-toggle{display:block;}
    .hero .wrap{grid-template-columns:1fr; text-align:center;}
    .hero-eyebrow{margin-inline:auto;}
    .hero p.lead{margin-inline:auto;}
    .hero-ctas{justify-content:center;}
    .hero-art{order:-1; margin-bottom:36px;}
    .hero-art .mark{transform:translateX(0);}
    .service-grid{grid-template-columns:1fr;}
    .thread-svg{display:none;}
    .about-top{flex-direction:column; align-items:flex-start;}
    .doctor-name{text-align:center;}
    .about-body{text-align:right;}
  }
  @media (max-width: 600px){
    .section-pad{padding:64px 0;}
    .hero{padding-top:118px; min-height:auto; padding-bottom:70px;}
    .hero h1{font-size:32px;}
    .cursor-glow{display:none;}
    .panel-badge{left:8px; bottom:-20px; padding:14px 16px;}
    .panel-badge b{font-size:26px;}
    .timeline{padding-right:22px;}
    .btn{padding:14px 24px; font-size:14.5px;}
    .marquee-track span{font-size:18px; padding:0 16px;}
    .contact-cards{gap:12px;}
    .ba-handle .grip{width:38px; height:38px;}
  }
  @media (max-width: 380px){
    .wrap{padding:0 16px;}
    h2.section-title{font-size:25px;}
  }

  /* ================= 3D SYRINGE HERO OVERRIDES ================= */
  .hero-art{
    position:relative;
    min-height:480px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
    animation:none;
    perspective:1200px;
    overflow:visible;
  }
  .syringe-canvas-wrap{
    position:relative;
    z-index:3;
    width:100%;
    height:480px;
    margin-inline:auto;
  }
  #syringe-canvas{
    width:100%;
    height:100%;
    display:block;
    cursor:grab;
    touch-action:none;
  }
  #syringe-canvas:active{cursor:grabbing;}
  .syringe-aura{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background:
      radial-gradient(circle at 45% 42%, rgba(223,186,107,.17), transparent 35%),
      radial-gradient(circle at 55% 65%, rgba(35,115,85,.24), transparent 58%),
      radial-gradient(circle, rgba(4,41,33,.2), transparent 72%);
    filter:blur(10px);
    z-index:1;
    pointer-events:none;
  }
  .syringe-floor{
    position:absolute;
    z-index:2;
    width:min(360px, 70%);
    height:100px;
    left:50%;
    bottom:72px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(ellipse, rgba(10,65,48,.72) 0%, rgba(10,65,48,.28) 38%, transparent 72%);
    filter:blur(15px);
    pointer-events:none;
  }
  .syringe-floor::after{
    content:"";
    position:absolute;
    inset:30px 40px 20px;
    border-radius:50%;
    background:rgba(0,0,0,.34);
    filter:blur(18px);
  }
  .syringe-caption{
    position:absolute;
    z-index:4;
    bottom:18px;
    right:6%;
    display:grid;
    gap:3px;
    text-align:right;
    pointer-events:none;
  }
  .syringe-caption span{
    font-family:var(--font-accent);
    font-size:11px;
    letter-spacing:.22em;
    color:var(--gold-light);
  }
  .syringe-caption strong{
    font-family:var(--font-body);
    color:rgba(255,255,255,.62);
    font-size:12px;
    font-weight:400;
  }
  .syringe-loading{
    position:absolute;
    inset:0;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:rgba(255,255,255,.7);
    font-size:13px;
    transition:opacity .35s ease, visibility .35s ease;
    pointer-events:none;
  }
  .syringe-loading.hidden{opacity:0;visibility:hidden;}
  .loader-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--gold-light);
    box-shadow:0 0 18px rgba(223,201,139,.7);
    animation:pulseDot 1s ease-in-out infinite;
  }
  @keyframes pulseDot{0%,100%{transform:scale(.75);opacity:.5}50%{transform:scale(1);opacity:1}}

  /* ================= REAL BEFORE / AFTER ================= */
  .ba-slider{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(11,46,34,.18);
    user-select:none;
    touch-action:none;
    background:#18221d;
    isolation:isolate;
  }
  .ba-layer{
    position:absolute;
    inset:0;
    overflow:hidden;
  }
  .ba-layer img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    max-width:none;
  }
  .ba-before{z-index:1;}
  .ba-before img{filter:saturate(.92) contrast(.98);}
  .ba-after{z-index:2;clip-path:inset(0 0 0 50%);}
  .ba-after img{filter:none;}
  .ba-divider{
    position:absolute;
    z-index:4;
    top:0;bottom:0;
    left:50%;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(to bottom, transparent 0%, var(--gold) 12%, var(--gold-light) 50%, var(--gold) 88%, transparent 100%);
    box-shadow:0 0 18px rgba(201,162,92,.45);
    pointer-events:none;
  }
  .ba-grip{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:48px;height:48px;
    border-radius:50%;
    background:rgba(201,162,92,.97);
    border:1px solid rgba(255,246,220,.7);
    box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
  }
  .ba-grip span{display:block;width:1px;height:14px;background:var(--forest-deepest);opacity:.85;}
  .ba-range{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:ew-resize;
    z-index:5;
    -webkit-appearance:none;
    appearance:none;
    background:transparent;
  }
  .ba-range::-webkit-slider-thumb{width:56px;height:56px;-webkit-appearance:none;}
  .ba-range::-moz-range-thumb{width:56px;height:56px;border:0;background:transparent;}
  .ba-tag{
    z-index:4;
    top:16px;
    padding:6px 16px;
    border-radius:100px;
    background:rgba(7,28,21,.5);
    color:var(--gold-pale);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
  }
  .ba-tag.before{left:16px;}
  .ba-tag.after{right:16px;}
  .ba-caption h4{margin-bottom:6px;}

  @media (max-width:900px){
    .hero-art{order:-1; min-height:500px; margin-bottom:15px;}
    .syringe-canvas-wrap{height:500px;}
    .syringe-aura{width:390px;height:390px;}
  }
  @media (max-width:600px){
    .hero-art{min-height:430px;}
    .syringe-canvas-wrap{height:430px;}
    .syringe-floor{bottom:44px;}
    .syringe-caption{bottom:4px;right:4%;}
  }

  /* ================= CATALOG (Products & Mesotherapy) ================= */
  .catalog{background:var(--cream-2);}
  .catalog-intro{max-width:640px; margin-top:18px; color:var(--ink-soft); font-size:17px;}
  .cat-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-top:38px;}
  .cat-tab{border:1px solid rgba(11,46,34,0.18); background:#fff; color:var(--forest); font-family:var(--font-body); font-weight:700; font-size:14.5px; padding:10px 22px; border-radius:100px; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);}
  .cat-tab:hover{border-color:var(--gold);}
  .cat-tab.active{background:var(--forest-deep); color:#fff; border-color:var(--forest-deep);}

  .cat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:36px;}
  .cat-card{background:#fff; border-radius:16px; overflow:hidden; cursor:pointer; border:1px solid rgba(11,46,34,0.08); box-shadow:0 14px 34px rgba(11,46,34,0.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease); position:relative; display:flex; flex-direction:column;}
  .cat-card:hover{transform:translateY(-6px); box-shadow:0 26px 48px rgba(11,46,34,0.14);}
  .cat-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--forest-deep);}
  .cat-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
  .cat-card:hover .cat-media img{transform:scale(1.06);}
  .cat-type{position:absolute; top:14px; inset-inline-start:14px; font-size:12px; font-weight:700; padding:5px 13px; border-radius:100px; letter-spacing:0.02em; backdrop-filter:blur(6px); z-index:1;}
  .cat-type.service{background:rgba(28,90,66,0.82); color:#fff;}
  .cat-type.product{background:rgba(201,162,92,0.88); color:var(--forest-deepest);}
  .cat-body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1;}
  .cat-card h3{font-family:var(--font-display); font-weight:400; font-size:21px; color:var(--forest-deep); margin-bottom:8px;}
  .cat-card p{color:var(--ink-soft); font-size:14.5px; flex:1;}
  .cat-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
  .cat-chip{font-size:11.5px; font-weight:600; color:var(--forest); background:var(--cream-2); border:1px solid rgba(11,46,34,0.1); padding:3px 10px; border-radius:100px;}
  .cat-card .cat-more{margin-top:16px; font-size:13.5px; font-weight:700; color:var(--gold-dim); display:flex; align-items:center; gap:6px;}
  .cat-card .cat-more svg{width:14px; height:14px; stroke:var(--gold-dim); fill:none; stroke-width:2; transition:transform .3s var(--ease);}
  .cat-card:hover .cat-more svg{transform:translateX(-4px);}

  /* ================= BLOG ================= */
  .blog{background:var(--cream);}
  .blog-intro{max-width:620px; margin-top:18px; color:var(--ink-soft); font-size:17px;}
  .blog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:40px;}
  .blog-card{background:#fff; border-radius:16px; overflow:hidden; cursor:pointer; border:1px solid rgba(11,46,34,0.08); box-shadow:0 14px 34px rgba(11,46,34,0.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
  .blog-card:hover{transform:translateY(-6px); box-shadow:0 26px 48px rgba(11,46,34,0.14);}
  .blog-cover{height:150px; background:radial-gradient(ellipse at 30% 20%, var(--forest-soft), var(--forest-deep) 60%, var(--forest-deepest) 100%); display:flex; align-items:center; justify-content:center; position:relative;}
  .blog-cover .hex-pattern{opacity:0.18; background-size:120px auto;}
  .blog-cover svg{width:34px; height:34px; stroke:var(--gold-light); fill:none; stroke-width:1.5; position:relative; z-index:1;}
  .blog-body{padding:22px 24px 26px;}
  .blog-body .b-tag{font-size:12px; font-weight:700; color:var(--gold-dim); letter-spacing:0.03em; margin-bottom:8px; display:block;}
  .blog-body h3{font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--forest-deep); margin-bottom:8px; line-height:1.5;}
  .blog-body p{color:var(--ink-soft); font-size:14px;}

  /* ---------- Before/After -> related link ---------- */
  .ba-link{margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--forest); background:rgba(35,115,85,0.1); padding:8px 16px; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease);}
  .ba-link:hover{background:rgba(35,115,85,0.18); border-color:var(--forest-soft);}
  .ba-link svg{width:13px; height:13px; stroke:var(--forest); fill:none; stroke-width:2;}

  /* ================= MODAL (item detail / blog / wizard) ================= */
  .modal-backdrop{position:fixed; inset:0; z-index:400; background:rgba(7,28,21,0.62); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s;}
  .modal-backdrop.open{opacity:1; visibility:visible; transition:opacity .35s var(--ease);}
  .modal-box{background:var(--cream); border-radius:20px; max-width:640px; width:100%; max-height:86vh; overflow-y:auto; position:relative; transform:translateY(24px) scale(0.98); transition:transform .4s var(--ease-soft); box-shadow:0 40px 90px rgba(0,0,0,0.4);}
  .modal-backdrop.open .modal-box{transform:translateY(0) scale(1);}
  .modal-close{position:absolute; top:16px; left:16px; z-index:5; width:38px; height:38px; border-radius:50%; background:rgba(11,46,34,0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s ease;}
  .modal-close:hover{background:rgba(11,46,34,0.16);}
  .modal-close svg{width:16px; height:16px; stroke:var(--forest-deep); fill:none; stroke-width:2;}
  .modal-head{background:linear-gradient(150deg, var(--forest-deep), var(--forest-deepest)); padding:34px 30px; color:#fff; position:relative; overflow:hidden;}
  .modal-head .hex-pattern{opacity:0.12; background-size:220px auto;}
  .modal-head .m-type{font-size:12px; font-weight:700; color:var(--gold-light); letter-spacing:0.03em; margin-bottom:10px; display:block; position:relative;}
  .modal-head h3{font-family:var(--font-display); font-weight:400; font-size:26px; position:relative;}
  .modal-body{padding:28px 30px 32px;}
  .modal-body p{color:var(--ink-soft); font-size:15.5px; margin-bottom:14px;}
  .modal-related{margin-top:24px; padding-top:22px; border-top:1px dashed rgba(11,46,34,0.15);}
  .modal-related h4{font-family:var(--font-display); font-weight:400; font-size:17px; color:var(--forest-deep); margin-bottom:14px;}
  .related-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .related-chip{background:#fff; border:1px solid rgba(11,46,34,0.1); border-radius:12px; padding:14px; cursor:pointer; transition:border-color .3s ease, transform .3s ease;}
  .related-chip:hover{border-color:var(--gold); transform:translateY(-3px);}
  .related-chip b{display:block; font-size:13.5px; color:var(--forest-deep); margin-bottom:4px;}
  .related-chip span{font-size:12px; color:var(--ink-soft);}
  .modal-actions{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px;}

  /* ---------- Wizard ---------- */
  .wiz-progress{display:flex; gap:6px; margin-bottom:18px; position:relative;}
  .wiz-progress span{height:3px; flex:1; border-radius:3px; background:rgba(255,255,255,0.2);}
  .wiz-progress span.done{background:var(--gold);}
  .wiz-step{display:none;}
  .wiz-step.active{display:block;}
  .wiz-q{font-family:var(--font-display); font-weight:400; font-size:20px; color:var(--forest-deep); margin-bottom:20px;}
  .wiz-options{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .wiz-options.single-col{grid-template-columns:1fr;}
  .wiz-opt{background:#fff; border:1px solid rgba(11,46,34,0.14); border-radius:14px; padding:18px; cursor:pointer; text-align:right; font-family:var(--font-body); font-size:15px; color:var(--forest-deep); font-weight:700; transition:border-color .3s ease, background .3s ease, transform .3s ease;}
  .wiz-opt:hover{border-color:var(--gold); background:rgba(201,162,92,0.08); transform:translateY(-2px);}
  .wiz-opt small{display:block; font-weight:400; color:var(--ink-soft); font-size:12.5px; margin-top:4px;}
  .wiz-back{margin-top:20px; font-size:13.5px; color:var(--gold-dim); font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
  .wiz-results-grid{display:grid; gap:12px; margin-top:6px;}
  .wiz-result-card{background:#fff; border:1px solid rgba(11,46,34,0.12); border-radius:14px; padding:18px 20px; cursor:pointer; transition:border-color .3s ease, transform .3s ease;}
  .wiz-result-card:hover{border-color:var(--gold); transform:translateY(-2px);}
  .wiz-result-card b{display:block; font-family:var(--font-display); font-weight:400; font-size:17px; color:var(--forest-deep); margin-bottom:4px;}
  .wiz-result-card span{font-size:13.5px; color:var(--ink-soft);}
  .wiz-empty{text-align:center; padding:20px 0;}
  .wiz-empty p{color:var(--ink-soft); margin-bottom:16px;}

  .float-btn.is-wizard svg{width:22px; height:22px;}

  @media (max-width:1024px){
    .cat-grid, .blog-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:700px){
    .cat-grid, .blog-grid, .related-row{grid-template-columns:1fr;}
    .wiz-options{grid-template-columns:1fr;}
    .modal-head{padding:28px 22px;}
    .modal-body{padding:22px 22px 26px;}
  }

/* ================= SHARED: simple inner-page header spacer & breadcrumb ================= */
.page-hero{background:linear-gradient(150deg, var(--forest-deep), var(--forest-deepest)); color:#fff; padding:150px 0 60px; position:relative; overflow:hidden;}
.page-hero .hex-pattern{opacity:0.1; background-size:260px auto;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:#AEC0B5; margin-bottom:16px; position:relative;}
.breadcrumb a{color:#AEC0B5;}
.breadcrumb a:hover{color:var(--gold-light);}
.page-hero .p-type{display:inline-block; font-size:12px; font-weight:700; color:var(--forest-deepest); background:var(--gold); padding:6px 16px; border-radius:100px; margin-bottom:14px; position:relative;}
.page-hero h1{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,40px); position:relative; max-width:760px;}

/* ================= PRODUCT / SERVICE DETAIL PAGE ================= */
.detail-section{background:var(--cream);}
.detail-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start;}
.detail-visual{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.detail-visual img{width:100%; height:100%; object-fit:cover; position:relative; z-index:0;}
.detail-visual .hex-pattern{opacity:0.14; background-size:200px auto; z-index:1;}
.detail-visual::after{content:''; position:absolute; inset:0; background:linear-gradient(200deg, rgba(11,46,34,0.05), rgba(7,28,21,0.55)); z-index:1; pointer-events:none;}
.detail-visual.grp-hair{background:#1c5a42;}
.detail-visual.grp-skin{background:#237355;}
.detail-visual.grp-lash{background:#8C7644;}
.detail-copy .lede{font-family:var(--font-display); font-weight:400; font-size:24px; color:var(--forest); line-height:1.8; margin-bottom:18px;}
.detail-copy p{color:var(--ink-soft); font-size:16px; margin-bottom:16px;}
.detail-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
.btn-ghost{background:transparent; border:1px solid rgba(11,46,34,0.2); color:var(--forest);}
.btn-ghost:hover{border-color:var(--forest); background:rgba(11,46,34,0.04); transform:translateY(-3px);}

.compare-wrap{margin-top:40px; display:none;}
.compare-wrap.open{display:block;}
.compare-table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 14px 34px rgba(11,46,34,0.08);}
.compare-table th, .compare-table td{padding:14px 16px; text-align:center; font-size:14px; border-bottom:1px solid rgba(11,46,34,0.08);}
.compare-table th{background:var(--forest-deep); color:#fff; font-weight:700; font-family:var(--font-display); font-weight:400; font-size:15px;}
.compare-table td:first-child, .compare-table th:first-child{text-align:right; color:var(--ink-soft); font-weight:700; background:var(--cream-2);}
.compare-table tr:last-child td{border-bottom:none;}

.suggest-section{margin-top:60px;}
.suggest-section h3{font-family:var(--font-display); font-weight:400; font-size:24px; color:var(--forest-deep); margin-bottom:22px;}

@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr;}
  .compare-table{font-size:12.5px;}
  .compare-table th, .compare-table td{padding:10px 8px;}
}

/* ================= BLOG ARTICLE PAGE ================= */
.article-section{background:var(--cream);}
.article-wrap{max-width:760px; margin:0 auto;}
.article-cover{border-radius:18px; height:220px; margin-bottom:34px; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 30% 20%, var(--forest-soft), var(--forest-deep) 60%, var(--forest-deepest) 100%); position:relative; overflow:hidden;}
.article-cover .hex-pattern{opacity:0.16; background-size:160px auto;}
.article-cover svg{width:40px; height:40px; stroke:var(--gold-light); fill:none; stroke-width:1.4; position:relative; z-index:1;}
.article-body p{color:var(--ink-soft); font-size:17px; margin-bottom:20px; line-height:2;}
.article-note{font-size:13px; color:var(--gold-dim); font-weight:700; margin-top:10px;}

/* ================= LUXURY MICRO-INTERACTIONS (desktop + touch) ================= */
/* Touch devices get no CSS :hover, so give a tactile press-state instead. */
.cat-card:active, .blog-card:active, .service-card:active, .wiz-opt:active,
.cat-tab:active, .c-card:active, .related-chip:active, .wiz-result-card:active{
  transform:scale(0.97);
  transition:transform .15s ease;
}
.ba-link:active, .map-link:active{opacity:0.7;}

/* Smooth, deliberate page entrance instead of an abrupt flash of content. */
body{animation:pageIn .7s var(--ease-soft) both;}
@keyframes pageIn{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){ body{animation:none;} }

/* Slightly deeper, warmer shadow lift on any card-style hover for a
   more tactile, premium feel across the whole site. */
.cat-card, .blog-card, .wiz-result-card, .related-chip{
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}


/* ================= FINAL POLISH / OFFLINE SAFE ================= */
.marquee{overflow:hidden; background:var(--forest-deepest); border-top:1px solid rgba(227,201,139,.16); border-bottom:1px solid rgba(227,201,139,.12);}
.marquee-track{display:flex; width:max-content; align-items:center; gap:0; animation:marqueeLoop 28s linear infinite; will-change:transform;}
.marquee-track span{display:inline-flex; align-items:center; gap:24px; padding:18px 28px; color:var(--gold-pale); font-size:15px; white-space:nowrap;}
.marquee-track span::after{content:'✦'; color:var(--gold); font-size:9px; margin-right:2px;}
@keyframes marqueeLoop{from{transform:translateX(0)}to{transform:translateX(50% * -1)}}
/* Two identical halves: animate exactly half the track width for a seamless loop. */
@keyframes marqueeLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.service-photo-grid{grid-template-columns:repeat(3,1fr);}
.service-photo-card{padding:16px; min-height:430px; display:flex; flex-direction:column; overflow:hidden;}
.service-photo-card .service-num{position:relative; z-index:3; align-self:flex-start;}
.service-photo{height:220px; border-radius:14px; overflow:hidden; position:relative; margin:4px 0 20px; background:linear-gradient(145deg,var(--forest-deep),var(--forest-soft)); border:1px solid rgba(201,162,92,.22);}
.service-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(7,28,21,.78));}
.service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .6s ease;}
.service-photo span{position:absolute;right:15px;bottom:12px;z-index:2;color:#fff;font-family:var(--font-display);font-size:18px;}
.service-photo-card:hover .service-photo img{transform:scale(1.06);filter:saturate(1.08);}
.service-photo-card h3{font-family:var(--font-display);font-weight:400;color:var(--forest-deep);font-size:23px;margin-bottom:8px;}
.service-photo-card p{font-size:15px;color:var(--ink-soft);margin-top:auto;}
.special-section{background:var(--cream);}
.special-section:nth-of-type(even){background:var(--cream-2);}
.special-head{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:34px;}
.official-badge{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold);color:var(--forest-deep);padding:9px 18px;border-radius:100px;font-weight:700;background:rgba(201,162,92,.08);white-space:nowrap;}
.special-feature{display:grid;grid-template-columns:90px 1fr;gap:28px;align-items:center;background:#fff;border:1px solid rgba(11,46,34,.10);border-radius:22px;padding:34px;box-shadow:0 24px 60px rgba(11,46,34,.08);}
.special-icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--forest-deep);color:var(--gold-light);font-size:26px;box-shadow:0 12px 30px rgba(7,28,21,.18);}
.special-feature h3,.info-card h3,.consult-panel h3{font-family:var(--font-display);font-weight:400;color:var(--forest-deep);font-size:27px;margin-bottom:8px;}
.special-feature p,.info-card p,.consult-panel p{color:var(--ink-soft);font-size:16px;max-width:800px;margin-bottom:20px;}
.btn-dark{background:var(--forest-deep);color:#fff;}
.btn-dark:hover{background:var(--forest);transform:translateY(-2px);box-shadow:0 10px 25px rgba(11,46,34,.2);}
.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.info-card{background:#fff;border:1px solid rgba(11,46,34,.1);border-radius:20px;padding:30px;position:relative;overflow:hidden;}
.info-card::before{content:'';position:absolute;top:0;right:0;width:70px;height:4px;background:var(--gold);}
.info-card>span{display:block;color:var(--gold-dim);font-weight:700;font-size:13px;margin-bottom:18px;}
.beauty-consult-section{background:linear-gradient(135deg,var(--forest-deepest),var(--forest-deep));color:#fff;}
.beauty-consult-section .section-title{color:#fff!important;}
.beauty-consult-section .kicker{color:var(--gold-light);}
.beauty-consult-wrap{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center;}
.consult-panel{background:rgba(255,255,255,.06);border:1px solid rgba(227,201,139,.24);border-radius:22px;padding:34px;backdrop-filter:blur(10px);}
.consult-panel h3{color:#fff;}.consult-panel p{color:#d9e4dc;}.consult-number{display:inline-block;color:var(--gold-light);font-weight:700;font-size:13px;margin-bottom:15px;}
.about-panel .panel-inner{overflow:hidden;background:var(--forest-deep);}
.about-photo{width:100%;height:100%;object-fit:contain;object-position:center center;position:relative;z-index:2;mix-blend-mode:normal;background:var(--forest-deep);}
.about-photo-tint{z-index:3;opacity:.08;mix-blend-mode:soft-light;}
.syringe-canvas-wrap{position:relative;z-index:2;}
.syringe-canvas-wrap canvas{display:block;width:100%;height:100%;min-height:520px;}
.syringe-loading.hidden{opacity:0;pointer-events:none;}
@media(max-width:1024px){.service-photo-grid{grid-template-columns:1fr 1fr}.beauty-consult-wrap{grid-template-columns:1fr;gap:35px}.special-head{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.service-photo-grid,.info-cards{grid-template-columns:1fr}.service-photo-card{min-height:390px}.service-photo{height:205px}.special-feature{grid-template-columns:1fr;padding:24px}.marquee-track{animation-duration:22s}.marquee-track span{padding:16px 18px}.beauty-consult-wrap{gap:25px}}

/* ================= SECOND POLISH PASS ================= */
/* Seamless marquee: two identical flex groups, translated by exactly one group. */
.marquee-track{display:flex;width:max-content;align-items:stretch;animation:marqueeSeamless 30s linear infinite;will-change:transform;}
.marquee-group{display:flex;align-items:center;flex-shrink:0;}
.marquee-group span{display:inline-flex;align-items:center;gap:24px;padding:18px 28px;color:var(--gold-pale);font-size:15px;white-space:nowrap;flex-shrink:0;}
@keyframes marqueeSeamless{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* The uploaded portrait contains its own green background. Keep the whole artwork visible. */
.about-panel .panel-inner{aspect-ratio:1085/1450;background:var(--forest-deep);}
.about-photo{object-fit:contain!important;object-position:center!important;width:100%!important;height:100%!important;filter:none!important;background:var(--forest-deep);}
.about-photo-tint{opacity:0!important;display:none!important;}

/* Service artwork is logo artwork, not photography: never crop it. */
.service-photo-grid{gap:14px;background:transparent;overflow:visible;}
.service-photo-card{padding:18px 18px 24px;border:1px solid rgba(227,201,139,.18);border-radius:18px;background:linear-gradient(160deg,rgba(22,69,53,.96),rgba(7,28,21,.98));box-shadow:0 18px 45px rgba(0,0,0,.16);min-height:0;}
.service-photo-card:hover{transform:translateY(-5px);background:linear-gradient(160deg,rgba(28,82,62,.98),rgba(7,28,21,1));}
.service-photo{height:auto;aspect-ratio:3/2;margin:5px 0 20px;border-radius:12px;background:#0b3a2b;border:1px solid rgba(227,201,139,.18);display:flex;align-items:center;justify-content:center;}
.service-photo::after{display:none;}
.service-photo img{width:100%;height:100%;object-fit:contain!important;transform:none!important;filter:none!important;display:block;}
.service-photo span{display:none;}
.service-photo-card h3{color:#fff;font-size:23px;margin-bottom:9px;}
.service-photo-card p{color:#cbd8d1;line-height:1.9;margin-top:0;}
.service-photo-card .service-num{color:var(--gold-light);margin-bottom:8px;}

/* Premium product / care blocks */
.premium-topic{position:relative;overflow:hidden;}
.topic-feature{position:relative;display:grid;grid-template-columns:86px 1fr 180px;gap:30px;align-items:center;padding:38px 42px;border-radius:24px;background:linear-gradient(135deg,#fff,rgba(248,244,232,.92));border:1px solid rgba(11,46,34,.1);box-shadow:0 25px 70px rgba(11,46,34,.09);overflow:hidden;}
.topic-mark{font-family:var(--font-display);font-size:38px;color:var(--gold);align-self:start;}
.topic-copy{position:relative;z-index:2;}
.topic-label{font-size:10px;letter-spacing:.2em;color:var(--gold-dim);font-weight:700;}
.topic-copy h3{font-family:var(--font-display);font-weight:400;color:var(--forest-deep);font-size:29px;margin:7px 0 10px;}
.topic-copy p{color:var(--ink-soft);font-size:16px;line-height:2;max-width:760px;margin-bottom:22px;}
.topic-accent{width:150px;height:150px;border-radius:50%;border:1px solid rgba(201,162,92,.5);display:grid;place-items:center;color:var(--gold-dim);font-family:var(--font-display);font-size:30px;position:relative;justify-self:end;}
.topic-accent::before,.topic-accent::after{content:'';position:absolute;border:1px solid rgba(201,162,92,.2);border-radius:50%;}
.topic-accent::before{inset:14px}.topic-accent::after{inset:30px}
.care-cards{gap:18px;margin-top:12px;}
.care-card{padding:32px 34px 34px;border-radius:20px;box-shadow:0 20px 55px rgba(11,46,34,.07);}
.care-card h3{font-size:25px;}
.care-card p{line-height:2;margin-bottom:0;}
.care-line{width:58px;height:1px;background:var(--gold);margin-top:25px;}

/* Refined consultation section: one elegant editorial card instead of a floating box. */
.beauty-consult-section{background:var(--forest-deepest)!important;color:#fff;}
.consult-hero{display:grid;grid-template-columns:.72fr 1.28fr;min-height:390px;border:1px solid rgba(227,201,139,.2);border-radius:28px;overflow:hidden;background:linear-gradient(120deg,rgba(19,67,51,.8),rgba(7,28,21,.95));box-shadow:0 30px 80px rgba(0,0,0,.2);}
.consult-visual{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;background:radial-gradient(circle at 35% 35%,rgba(227,201,139,.15),transparent 36%),linear-gradient(145deg,rgba(26,90,68,.5),rgba(7,28,21,.15));border-left:1px solid rgba(227,201,139,.14);}
.consult-visual span{font-size:10px;letter-spacing:.24em;color:var(--gold-light);}
.consult-visual b{font-family:var(--font-display);font-size:130px;line-height:.8;font-weight:400;color:rgba(227,201,139,.16);position:absolute;left:26px;top:28px;}
.consult-content{padding:55px 58px;display:flex;flex-direction:column;justify-content:center;}
.beauty-consult-section .kicker{color:var(--gold-light); margin-bottom:26px;}
.consult-content .section-title{color:#fff!important;max-width:720px;}
.consult-lead{color:#d2ded7;font-size:17px;line-height:2;margin:18px 0 28px;max-width:690px;}
.consult-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;}
.consult-link{color:var(--gold-light);font-size:14px;font-weight:700;transition:transform .25s ease;}
.consult-link:hover{transform:translateX(-4px);}
.consult-link span{margin-right:6px;}

/* 3D syringe: stable stage, no autonomous spinning, drag-only rotation. */
#syringe-canvas{cursor:grab;}
@media(max-width:1024px){.topic-feature{grid-template-columns:60px 1fr}.topic-accent{display:none}.consult-hero{grid-template-columns:1fr}.consult-visual{min-height:130px;border-left:0;border-bottom:1px solid rgba(227,201,139,.14)}.consult-visual b{font-size:90px;top:15px}.consult-content{padding:40px 30px}}
@media(max-width:700px){.marquee-track{animation-duration:24s}.marquee-group span{padding:16px 18px}.topic-feature{grid-template-columns:1fr;padding:28px}.topic-mark{font-size:28px}.service-photo-grid{gap:12px}.consult-content{padding:34px 24px}.consult-lead{font-size:15px}.consult-visual{min-height:110px}.consult-visual b{font-size:75px}}

/* ================= FINAL MARQUEE FIX ================= */
/* Three identical, viewport-covering groups. One full group is consumed per loop,
   so the next identical group is already entering from the right before the reset. */
.marquee{overflow:hidden;position:relative;direction:ltr;}
.marquee-track{display:flex;flex-direction:row;align-items:stretch;width:max-content;gap:0;animation:marqueeInfinite 42s linear infinite!important;will-change:transform;transform:translate3d(0,0,0);}
.marquee-group{display:flex;flex:0 0 auto;width:max-content;align-items:center;justify-content:flex-start;gap:0;direction:ltr;}
.marquee-group span{direction:rtl;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;white-space:nowrap;padding:18px 28px;color:var(--gold-pale);font-size:15px;}
@keyframes marqueeInfinite{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-33.3333333333%,0,0)}
}
@media(max-width:700px){
  .marquee-track{animation-duration:34s!important;}
  .marquee-group span{padding:16px 18px;}
}


/* === FINAL SERVICE ICON / TOPIC PAGE POLISH === */
.service-icon-card{padding:30px 28px 32px;min-height:250px;display:flex;flex-direction:column;}
.service-top{display:flex;align-items:center;justify-content:space-between;direction:ltr;min-height:58px;margin-bottom:24px;}
.service-icon-card .service-num{direction:rtl;margin:0;font-size:20px;line-height:1;color:var(--gold-light);}
.service-mini-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(227,201,139,.22);border-radius:14px;background:rgba(255,255,255,.035);padding:9px;}
.service-mini-icon img{width:100%;height:100%;object-fit:contain;display:block;filter:none;}
.service-icon-card h3{margin-bottom:10px;}
.service-icon-card p{margin-top:auto;}
.service-icon-card:hover .service-mini-icon{border-color:rgba(227,201,139,.5);box-shadow:0 0 22px rgba(227,201,139,.08);}
.topic-feature{grid-template-columns:1fr 180px;}
.topic-mark{display:none;}
.info-card{display:block;text-decoration:none;color:inherit;}
.care-card:hover{transform:translateY(-4px);border-color:rgba(201,162,92,.35);}
.consult-visual b{display:none!important;}
@media(max-width:1024px){.topic-feature{grid-template-columns:1fr}.topic-accent{display:none;}}
@media(max-width:700px){.service-icon-card{min-height:220px;padding:24px 20px 26px}.service-top{margin-bottom:20px}.service-mini-icon{width:52px;height:52px;}}
/* Local-file 3D viewer: model is embedded so index.html can be opened directly. */

/* ================= AKHAVI PRODUCT CATALOG ================= */
.akhavi-intro{color:var(--ink-soft); font-size:16px; line-height:2; max-width:820px; margin:22px 0 34px;}
.akhavi-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.akhavi-card{background:#fff; border:1px solid rgba(11,46,34,.1); border-radius:20px; padding:28px 24px; position:relative; overflow:hidden;}
.akhavi-card::before{content:''; position:absolute; top:0; right:0; width:70px; height:4px; background:var(--gold);}
.akhavi-en{display:block; color:var(--gold-dim); font-weight:700; font-size:11px; letter-spacing:.16em; margin-bottom:10px;}
.akhavi-card h3{font-family:var(--font-display); font-weight:400; color:var(--forest-deep); font-size:24px; margin-bottom:12px;}
.akhavi-desc{color:var(--ink-soft); font-size:14.5px; line-height:1.9; margin-bottom:16px;}
.akhavi-usage{color:var(--ink-soft); font-size:13.5px; line-height:1.9; padding-top:14px; border-top:1px solid rgba(11,46,34,.08);}
.akhavi-usage strong{color:var(--forest-deep);}

/* Product photo placeholder (no stock photography available — replace with
   real product photos when you have them; the SVG icon is just a stand-in). */
.akhavi-photo{
  width:100%;
  aspect-ratio:4/3;
  border-radius:14px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, rgba(11,46,34,.06) 0%, rgba(201,162,92,.12) 100%);
  color:var(--gold-dim);
}
.akhavi-photo svg{width:44%; height:44%;}

/* Brand overview cards on the homepage */
.brand-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:18px;}
.brand-card{background:#fff; border:1px solid rgba(11,46,34,.1); border-radius:20px; padding:26px 20px; text-align:center; text-decoration:none; display:block; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.brand-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,46,34,.12);}
.brand-card .akhavi-en{display:block; margin-bottom:8px;}
.brand-card h3{font-family:var(--font-display); font-weight:400; color:var(--forest-deep); font-size:21px; margin-bottom:10px;}
.brand-card p{color:var(--ink-soft); font-size:13.5px; line-height:1.85; margin-bottom:14px;}
.brand-card .brand-link{color:var(--gold-dim); font-size:13px; font-weight:700;}
@media(max-width:1024px){.brand-grid{grid-template-columns:repeat(3, 1fr);}}
@media(max-width:700px){.brand-grid{grid-template-columns:repeat(2, 1fr);}}

/* Comparison table on each brand's product page */
.akhavi-compare{width:100%; border-collapse:collapse; margin-top:14px; font-size:13.5px;}
.akhavi-compare th, .akhavi-compare td{padding:12px 14px; text-align:right; border-bottom:1px solid rgba(11,46,34,.08);}
.akhavi-compare th{color:var(--forest-deep); font-weight:700; background:rgba(201,162,92,.08);}
.akhavi-compare td{color:var(--ink-soft);}
.akhavi-compare-wrap{overflow-x:auto; margin:18px 0 40px; border:1px solid rgba(11,46,34,.08); border-radius:14px;}
@media(max-width:700px){.akhavi-compare{font-size:12.5px;} .akhavi-compare th, .akhavi-compare td{padding:9px 10px;}}
.akhavi-cta{margin-top:36px; text-align:center;}
@media(max-width:1024px){.akhavi-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:700px){.akhavi-grid{grid-template-columns:1fr;}}

/* ============================================================
   فاز ۲ — متن غنی مقاله (خروجی TinyMCE) + فهرست مطالب خودکار (TOC)
   ============================================================ */

/* --- تایپوگرافی عمومی برای HTML آزاد داخل مقاله --- */
.article-body h2{font-family:var(--font-display); font-weight:400; color:var(--forest-deep); font-size:clamp(22px,2.6vw,30px); line-height:1.6; margin:40px 0 16px; scroll-margin-top:110px;}
.article-body h3{font-family:var(--font-display); font-weight:400; color:var(--forest-deep); font-size:21px; line-height:1.6; margin:30px 0 12px;}
.article-body h4{font-family:var(--font-display); font-weight:400; color:var(--ink); font-size:18px; margin:24px 0 10px;}
.article-body p{color:var(--ink-soft); font-size:17px; margin-bottom:20px; line-height:2;}
.article-body ul, .article-body ol{color:var(--ink-soft); font-size:16.5px; line-height:2; margin:0 0 22px; padding-inline-start:26px;}
.article-body li{margin-bottom:8px;}
.article-body a{color:var(--gold-dim); text-decoration:underline; text-underline-offset:3px;}
.article-body a:hover{color:var(--gold);}
.article-body strong, .article-body b{color:var(--ink); font-weight:700;}
.article-body blockquote{margin:28px 0; padding:18px 24px; border-right:3px solid var(--gold); background:rgba(201,162,92,.08); border-radius:4px 14px 14px 4px; color:var(--ink); font-style:italic; font-size:17px; line-height:1.95;}
.article-body img{max-width:100%; height:auto; border-radius:14px; margin:22px 0; display:block;}
.article-body figure{margin:22px 0;}
.article-body figcaption{color:var(--ink-soft); font-size:13.5px; text-align:center; margin-top:8px;}
.article-body hr{border:none; border-top:1px solid var(--line); margin:34px 0;}
.article-body code{background:rgba(11,46,34,.06); color:var(--forest-deep); padding:2px 7px; border-radius:6px; font-size:14px; direction:ltr; display:inline-block;}
.article-body pre{background:var(--forest-deepest); color:var(--cream); padding:18px 20px; border-radius:14px; overflow-x:auto; margin:22px 0; direction:ltr; text-align:left;}
.article-body pre code{background:none; color:inherit; padding:0;}
.article-body table{width:100%; border-collapse:collapse; margin:24px 0; font-size:15px;}
.article-body th, .article-body td{padding:11px 14px; border-bottom:1px solid rgba(11,46,34,.1); text-align:right;}
.article-body th{color:var(--forest-deep); font-weight:700; background:rgba(201,162,92,.08);}
.article-body iframe{max-width:100%; border-radius:12px; margin:24px 0;}

/* --- چیدمان دو ستونه: مقاله + TOC (وقتی TOC وجود دارد) --- */
.article-flex{display:block;}
.article-flex.has-toc{display:flex; gap:48px; align-items:flex-start;}
.article-flex.has-toc .article-body{flex:1; min-width:0;}

/* --- TOC دسکتاپ (sticky، سمت راست مقاله) --- */
.article-toc{display:none; flex:0 0 240px; position:sticky; top:110px; align-self:flex-start; background:#fff; border:1px solid rgba(11,46,34,.1); border-radius:18px; padding:22px 20px; box-shadow:0 18px 40px rgba(11,46,34,.06);}
.article-flex.has-toc .article-toc{display:block;}
.article-toc .toc-label{display:block; font-family:var(--font-display); color:var(--gold-dim); font-size:15px; font-weight:700; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.article-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:60vh; overflow-y:auto;}
.article-toc a{display:block; padding:8px 10px; border-radius:10px; color:var(--ink-soft); font-size:14px; line-height:1.6; text-decoration:none; border-right:2px solid transparent; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);}
.article-toc a:hover{background:rgba(201,162,92,.08); color:var(--forest-deep);}
.article-toc a.active{color:var(--forest-deep); font-weight:700; background:rgba(201,162,92,.12); border-right-color:var(--gold);}

/* --- TOC موبایل (کشویی) --- */
.toc-mobile{display:none;}
.toc-mobile summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid rgba(11,46,34,.1); border-radius:14px; padding:14px 18px; font-family:var(--font-display); color:var(--forest-deep); font-size:15px; font-weight:700; margin-bottom:18px;}
.toc-mobile summary::-webkit-details-marker{display:none;}
.toc-mobile summary::after{content:'▾'; color:var(--gold-dim); transition:transform .25s var(--ease);}
.toc-mobile[open] summary::after{transform:rotate(180deg);}
.toc-mobile ul{list-style:none; margin:-8px 0 18px; padding:14px 16px; background:#fff; border:1px solid rgba(11,46,34,.1); border-top:none; border-radius:0 0 14px 14px; display:flex; flex-direction:column; gap:2px;}
.toc-mobile a{display:block; padding:9px 8px; color:var(--ink-soft); font-size:14.5px; text-decoration:none; border-radius:8px;}
.toc-mobile a.active{color:var(--forest-deep); font-weight:700; background:rgba(201,162,92,.1);}

@media(max-width:900px){
  .article-toc{display:none !important;}
  .article-flex.has-toc{display:block;}
  .toc-mobile{display:block;}
}
/* ================= SERVICE ICON CARDS (dynamic from API) ================= */
/* Override: the service grid now holds .service-icon-card (from API) instead
   of the old hardcoded .service-photo-card. Give it a proper card look. */
.service-grid{
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  background:transparent;
  border-radius:0;
  overflow:visible;
  margin-top:60px;
}

.service-grid .service-card,
.service-card.service-icon-card{
  background:linear-gradient(160deg, rgba(22,69,53,.96), rgba(7,28,21,.98));
  border:1px solid rgba(227,201,139,.18);
  border-radius:18px;
  padding:30px 28px 32px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  box-shadow:0 18px 45px rgba(0,0,0,.16);
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}

.service-grid .service-card:hover,
.service-card.service-icon-card:hover{
  transform:translateY(-6px);
  background:linear-gradient(160deg, rgba(28,82,62,.98), rgba(7,28,21,1));
  box-shadow:0 26px 55px rgba(0,0,0,.24);
}

.service-grid .service-card .service-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  direction:ltr;
  min-height:58px;
  margin-bottom:24px;
}

.service-grid .service-card .service-num{
  direction:rtl;
  margin:0;
  font-size:20px;
  line-height:1;
  color:var(--gold-light);
  font-family:var(--font-display);
  font-weight:400;
}

.service-grid .service-card .service-mini-icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(227,201,139,.22);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  padding:9px;
}

.service-grid .service-card .service-mini-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:none;
}

.service-grid .service-card h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:21px;
  color:#fff;
  margin-bottom:10px;
  line-height:1.5;
}

.service-grid .service-card p{
  color:#cbd8d1;
  font-size:15px;
  line-height:1.9;
  margin-top:auto;
}

@media (max-width:900px){
  .service-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .service-grid{grid-template-columns:1fr;}
  .service-grid .service-card{padding:24px 20px 26px; min-height:220px;}
  .service-grid .service-card .service-mini-icon{width:52px; height:52px;}
}
/* ================= CONSULT IMAGE ================= */
.consult-visual .consult-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  border-radius:0;
}
.consult-visual.has-image{
  background:linear-gradient(180deg, rgba(7,28,21,0.45), rgba(7,28,21,0.85));
}
.consult-visual.has-image span,
.consult-visual.has-image b{
  position:relative;
  z-index:2;
}