/* Service landings (nặn mụn, peel); load after polish-base.css */
:root{
--sv-ink:color-mix(in srgb,var(--charcoal) 84%,var(--cream)); /* body ≥7.8:1 */
--sv-mute:color-mix(in srgb,var(--charcoal) 70%,var(--cream)); /* muted ≥5:1 */
--sv-gold:#8A5A38; /* 5.2:1 on light */
--sv-em:color-mix(in srgb,var(--gold) 50%,#8A5A38); /* large italic 3.5:1 */
--sv-line:color-mix(in srgb,var(--sand) 75%,transparent);
--sv-gl:color-mix(in srgb,var(--gold) 50%,transparent);
--sv-tint:color-mix(in srgb,var(--moss) 30%,transparent);
--sv-dk:color-mix(in srgb,var(--moss) 45%,#000);
--sv-sh:0 1px 2px #0000000a,0 12px 32px -14px var(--sv-tint);
--sv-sh2:0 2px 4px #0000000d,0 24px 44px -18px var(--sv-tint);
--sv-dsh:inset 0 1px 0 #ffffff0f,0 24px 48px -28px #000000a6;
--sv-cta:inset 0 1px 0 #ffffff24,0 1px 2px #00000014,0 10px 22px -12px color-mix(in srgb,var(--moss) 75%,transparent);
--sv-e:.28s cubic-bezier(.22,.61,.36,1);
--sv-rv:opacity .75s cubic-bezier(.16,1,.3,1); /* .reveal fade */
}

/* HERO: index-style bg, arched photo, static glows */
.hero .hero-bg{background:radial-gradient(120% 90% at 85% 10%,color-mix(in srgb,var(--moss) 55%,#000),transparent 60%),linear-gradient(165deg,color-mix(in srgb,var(--moss) 80%,#000),var(--sv-dk))}
.hero-orb{animation:none;opacity:.35}
.hero-img-panel img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:saturate(.92) contrast(1.02)}
.hero .hero-img-panel::before{right:0;width:auto;z-index:1;background:linear-gradient(180deg,transparent 55%,#0005)}
.hero-pill{background:none;border:0;padding:0;gap:.7rem;font-size:.64rem;letter-spacing:.24em;color:var(--gold-l);margin-bottom:1.6rem}
.hero-pill-dot{width:5px;height:5px;border-radius:1px;transform:rotate(45deg);opacity:1}
.hero-h1{letter-spacing:-.015em;text-shadow:0 2px 14px #0000004c}
.hero-sub{max-width:540px;color:#ffffffbd;font-weight:400;line-height:1.8}
.hero-sub strong{color:#fff}
.hero-stat-l{color:#ffffffa8;font-size:.62rem}
@media (min-width:901px){
.hero{min-height:max(640px,min(100vh,920px))}
.hero-content{padding-left:max(4.5rem,calc(50% - 620px + 3rem));padding-right:0;max-width:min(calc(max(4.5rem,50% - 620px + 3rem) + 600px),56vw)}
.hero .hero-img-panel{top:calc(68px + 3.5rem);bottom:4rem;right:max(4.5rem,calc(50% - 620px + 3rem));width:min(33vw,460px);border-radius:240px 240px 24px 24px;box-shadow:0 40px 80px -30px #000000b2,0 0 0 1px #ffffff0f;outline:1px solid var(--sv-gl);outline-offset:14px}
}
@media (max-width:900px){
.hero{flex-direction:column;align-items:stretch;min-height:0}
.hero .hero-img-panel{display:block;position:relative;inset:auto;z-index:1;width:auto;height:clamp(220px,58vw,340px);margin:calc(68px + 1.25rem) 1.25rem 0;border-radius:140px 140px 18px 18px;box-shadow:0 30px 60px -28px #000000bf,0 0 0 1px #ffffff0f}
.hero-content{padding:2rem 1.25rem 3.2rem}
.hero-h1{font-size:clamp(2.5rem,11vw,2.9rem);margin-bottom:1.1rem}
.hero-pill{margin-bottom:1.1rem;letter-spacing:.18em}
.hero-sub{margin-bottom:2rem}
.hero-ctas{margin-bottom:2.4rem}
}
@media (min-width:601px) and (max-width:900px){.hero .hero-img-panel{max-width:440px;height:360px;border-radius:220px 220px 20px 20px;outline:1px solid var(--sv-gl);outline-offset:10px}}
@media (max-width:600px){.hero-ctas{gap:.6rem}.hero :is(.btn-gold,.btn-outline){min-height:46px;padding:.8rem 1.25rem;font-size:.7rem}}
@media (prefers-reduced-motion:no-preference){
.hero-img-panel{animation:sv-in 1.1s cubic-bezier(.16,1,.3,1) both .15s}
@keyframes sv-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.hero-content{animation:none}}

/* Hero + CTA buttons: cream / ghost, as index hero */
.btn-gold{background:var(--cream);color:var(--sv-gold);box-shadow:0 10px 30px -10px #0000008c,inset 0 -2px 0 #00000014;transition:var(--sv-e);transition-property:transform,box-shadow,background}
.btn-gold:hover{background:#fff;transform:translateY(-2px);box-shadow:0 16px 36px -12px #0009}
.btn-outline{background:none;color:#ffffffe0;border-color:#ffffff4c;text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.btn-outline:hover{background:#ffffff0f;border-color:#fff9}
:is(.btn-gold,.btn-outline,.price-cta,.faq-q):focus-visible{outline:2px solid var(--gold);outline-offset:3px}
:is(.price-cta,.faq-q):focus-visible{outline-color:var(--sv-gold)}

/* HEADS + RHYTHM: ivory, dark, tint, dark, cream */
.section{padding:5.5rem 0}
@media (min-width:901px){.container{max-width:1240px;padding:0 3rem}}
.s-tag{color:var(--sv-gold);font-size:.66rem;letter-spacing:.26em;margin-bottom:1rem}
.section .s-tag::before{width:28px;opacity:1;background:var(--sv-gl)}
.s-h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.1rem);line-height:1.1;letter-spacing:-.015em}
.s-h2 em{color:var(--sv-em)}
:is(.dark-section,.reviews-section) .s-tag{color:var(--gold-l)}
:is(.dark-section,.reviews-section) .s-h2 em{color:var(--gold)}
.s-line{width:72px;height:1.5px;background:linear-gradient(90deg,var(--gold) 35%,transparent);margin-bottom:2.8rem}
.hero + .section{background:linear-gradient(180deg,var(--white),var(--cream))}
#pricing{background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--moss-pale) 45%,transparent),transparent 70%),linear-gradient(180deg,var(--cream),var(--white))}

/* WHY + PRICE cards */
.why-card,.price-card{border-radius:20px;border:1px solid var(--sv-line);box-shadow:var(--sv-sh);transition:var(--sv-rv),transform var(--sv-e),box-shadow var(--sv-e),border-color var(--sv-e)}
:is(.why-card,.price-card):hover{transform:translateY(-3px);box-shadow:var(--sv-sh2);border-color:var(--sv-gl)}
.why-card-head,.price-head{box-shadow:inset 0 -1px 0 var(--sv-gl)}
.why-card-head{padding:1.3rem 1.6rem 1.15rem}
.why-icon{font-size:1.35rem;margin-bottom:.45rem}
.why-title{font-size:1.06rem;line-height:1.3}
.why-card-body{padding:1.3rem 1.6rem 1.6rem}
.why-desc{font-size:.9rem;color:var(--sv-ink);font-weight:400;line-height:1.75}

/* PROCESS: glass cards, gold numerals */
.process-grid{gap:1rem;border:0;overflow:visible}
.process-grid .process-step:nth-child(n){border:1px solid #ffffff17;border-radius:20px;padding:2.3rem 1.8rem 2.1rem;background:linear-gradient(160deg,color-mix(in srgb,var(--moss) 40%,transparent),#ffffff05);box-shadow:var(--sv-dsh);transition:transform var(--sv-e),border-color var(--sv-e),box-shadow var(--sv-e)}
.process-grid .process-step:nth-child(3){background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 16%,transparent),#ffffff05)}
.process-step::before{content:'';position:absolute;top:-1px;left:1.8rem;right:1.8rem;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.process-grid .process-step:hover{filter:none;transform:translateY(-3px);border-color:var(--sv-gl);box-shadow:inset 0 1px 0 #ffffff14,0 30px 56px -28px #000000bf}
.process-grid .process-step .step-num{color:var(--gold);font-size:3rem;margin-bottom:1rem}
.process-grid .process-step:nth-child(even) .step-num{color:var(--gold-l)}
.step-title{font-size:.8rem;letter-spacing:.1em;line-height:1.5}
.step-desc{font-size:.85rem;color:#ffffffb8;font-weight:400;line-height:1.75}

/* PHOTO STRIP: 4 in a row (peel) */
.photo-strip{gap:3px;background:var(--sv-dk)}
.photo-strip:has(>.photo-slot:nth-child(4)){grid-template-columns:1.2fr 1fr 1fr 1fr}
.photo-slot .photo-overlay{background:linear-gradient(to top,color-mix(in srgb,var(--sv-dk) 80%,transparent),transparent 60%)}
.photo-caption{color:#ffffffe6;text-shadow:0 1px 8px #00000073}

/* PRICING: aligned heads + CTAs, featured in gold */
.price-card{position:relative;display:flex;flex-direction:column}
.price-card.featured{border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 10%,transparent),var(--sv-sh2)}
.price-card.featured:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 14%,transparent),0 2px 4px #0000000f,0 34px 64px -24px var(--sv-tint)}
.price-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,var(--gold-l),transparent)}
.price-eyebrow{color:var(--gold-l);font-size:.62rem;letter-spacing:.22em}
.ph-featured .price-eyebrow{color:#F3DDBC}
.price-name{font-size:1.3rem}
.feat-badge{background:#F3DDBC;color:#6B4226;font-size:.6rem;padding:4px 11px;box-shadow:0 4px 10px -4px #00000059}
.price-body{display:flex;flex-direction:column;flex:1;padding:1.8rem 2rem 2rem}
.price-amt{font-size:2.3rem}
.price-usd{color:var(--sv-mute);font-weight:400;font-size:.76rem}
.price-div{background:linear-gradient(90deg,var(--sv-gl),transparent)}
.price-feats li{color:var(--sv-ink);font-weight:400;font-size:.86rem}
.price-feats li::before{width:5px;height:5px;border-radius:1px;transform:rotate(45deg);opacity:.9}
.price-cta{margin-top:auto;min-height:48px;border-radius:999px;background:linear-gradient(135deg,var(--moss),color-mix(in srgb,var(--moss) 78%,#000));color:#F3DDBC;letter-spacing:.12em;box-shadow:var(--sv-cta)}
.price-cta:hover{transform:translateY(-1px);box-shadow:var(--sv-cta),0 16px 28px -14px var(--sv-tint)}
.featured .price-cta{background:linear-gradient(135deg,#8E5C38,#9A6640);color:#fff}
@supports (grid-template-rows:subgrid){@media (min-width:901px){
.price-grid{grid-template-rows:auto 1fr}
.price-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}}

/* REVIEWS (dark) */
.reviews-section{padding:4.5rem 0}
.reviews-section .s-h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem)}
.review-card{display:flex;flex-direction:column;border-radius:16px;padding:1.6rem 1.7rem;background:linear-gradient(160deg,#ffffff0f,#ffffff05);border-color:#ffffff17;box-shadow:var(--sv-dsh);transition:var(--sv-rv),transform var(--sv-e),border-color var(--sv-e)}
.review-card:hover{transform:translateY(-3px);border-color:var(--sv-gl);background:linear-gradient(160deg,#ffffff14,#ffffff08);box-shadow:var(--sv-dsh)}
.review-stars{font-size:.72rem}
.review-text{flex:1;color:#fffc;font-size:.88rem;font-weight:400}
.review-author{color:var(--gold-l)}
.review-via{color:#ffffff94;font-size:.64rem}

/* FAQ: raised panel on cream */
.faq-list{background:var(--white);border:1px solid var(--sv-line);border-radius:20px;padding:.3rem 1.8rem;box-shadow:var(--sv-sh)}
.faq-item{border-bottom:1px solid var(--sv-line)}
.faq-item:first-child{border-top:0}
.faq-item:last-child{border-bottom:0}
.faq-q{min-height:64px;padding:1.1rem 0;font-size:.98rem}
.faq-icon{width:34px;height:34px;background:#fff;border-color:var(--sv-line);color:var(--moss);box-shadow:0 1px 2px #0000000a,0 4px 10px -6px var(--sv-tint)}
.faq-q:hover .faq-icon{border-color:var(--sv-gl)}
.faq-a.open{max-height:640px}
.faq-a-inner{max-width:66ch;padding-bottom:1.4rem;font-size:.92rem;color:var(--sv-ink);font-weight:400;line-height:1.8}

/* CTA banner: gold hairline frame */
.cta-banner{padding:7rem 3rem}
.cta-banner::after{content:'';position:absolute;inset:clamp(12px,2.2vw,32px);border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);border-radius:28px;pointer-events:none}
.cta-tag{color:var(--gold-l);font-size:.64rem}
.cta-tag::before,.cta-tag::after{background:var(--sv-gl)}
.cta-desc{color:#ffffffbd;font-size:.95rem;font-weight:400}
.cta-info{color:#ffffff9e;font-size:.74rem;line-height:1.9}

/* MOBILE */
@media (max-width:900px){
.section{padding:4.25rem 0}
.container{padding:0 1.25rem}
.s-line{margin-bottom:2.2rem}
.photo-strip:has(>.photo-slot:nth-child(4)){grid-template-columns:1fr 1fr}
.photo-strip .photo-slot{height:180px}
.photo-caption{left:1rem;bottom:1rem}
.price-head{padding:1.7rem 1.5rem 1.5rem}
.price-body{padding:1.6rem 1.5rem 1.7rem}
.reviews-section{padding:3.75rem 0}
.faq-list{padding:.2rem 1.15rem}
.faq-q{font-size:.94rem}
.cta-banner{padding:4.75rem 1.75rem}
}
@media (max-width:600px){
.process-grid{grid-template-columns:1fr;gap:.75rem}
.process-grid .process-step:nth-child(n){display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;padding:1.4rem 1.3rem}
.process-grid .process-step .step-num{grid-row:span 2;font-size:2.3rem;margin:0}
.process-step>:not(.step-num){grid-column:2}
.step-title{margin-bottom:.35rem}
.process-step::before{left:1.3rem;right:1.3rem}
}

/* RELATED ARTICLES (light band between reviews and FAQ): cover cards, same dates/reading times as blog.html */
.hb-related{background:linear-gradient(180deg,var(--white),var(--cream));padding-bottom:1rem;position:relative}
.hb-related::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--sv-gl) 25% 75%,transparent)}
.hb-rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.hb-rel-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--sv-line);box-shadow:var(--sv-sh);
  transition:transform var(--sv-e),box-shadow var(--sv-e),border-color var(--sv-e)}
.hb-rel-media{position:relative;display:block;flex-shrink:0;aspect-ratio:800/420;overflow:hidden;background:var(--sv-dk)}
.hb-rel-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.hb-rel-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,144,106,.7) 25% 75%,transparent)}
.hb-rel-body{flex:1;display:flex;flex-direction:column;gap:.5rem;min-width:0;padding:1.05rem 1.25rem 1rem}
.hb-rel-cat{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--sv-gold)}
.hb-rel-title{font-family:'Playfair Display',serif;font-size:1.04rem;font-weight:500;line-height:1.35;color:var(--charcoal);text-wrap:pretty;transition:color .25s}
.hb-rel-meta{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--sv-line);font-size:.7rem;letter-spacing:.02em;color:var(--sv-mute)}
.hb-rel-more{display:inline-flex;align-items:center;min-height:44px;margin-top:1.8rem;padding:0 1.3rem;border:1px solid var(--sv-gl);border-radius:999px;
  background:#fff;color:var(--moss);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 1px 2px #0000000a;transition:border-color var(--sv-e),box-shadow var(--sv-e)}
.hb-rel-more:hover{border-color:var(--gold);box-shadow:var(--sv-sh)}
:is(.hb-rel-card,.hb-rel-more):focus-visible{outline:2px solid var(--sv-gold);outline-offset:3px}
@media (hover:hover){
.hb-rel-card:hover{transform:translateY(-3px);box-shadow:var(--sv-sh2);border-color:var(--sv-gl)}
.hb-rel-card:hover .hb-rel-media img{transform:scale(1.03)}
.hb-rel-card:hover .hb-rel-title{color:var(--moss)}
}
@media (prefers-reduced-motion:reduce){.hb-rel-card,.hb-rel-media img{transition:none}.hb-rel-card:hover{transform:none}.hb-rel-card:hover .hb-rel-media img{transform:none}}
@media (max-width:1100px){.hb-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
.hb-rel-grid{grid-template-columns:minmax(0,1fr);gap:.85rem}
.hb-rel-card{flex-direction:row;align-items:stretch;border-radius:16px}
.hb-rel-media{width:40%;align-self:flex-start;border-radius:0 0 12px 0}
.hb-rel-media::after{display:none}
.hb-rel-body{gap:.35rem;padding:.75rem .9rem .8rem}
.hb-rel-cat{font-size:.54rem;letter-spacing:.12em}
.hb-rel-title{font-size:.9rem;line-height:1.3}
.hb-rel-meta{padding-top:.45rem;font-size:.64rem}
.hb-rel-more{margin-top:1.4rem}
}
