/* ═══════════════════════════════════════════════════════
   Fineline Pro — treatment pages, effects, large screens
   Palette follows the existing theme.
   ═══════════════════════════════════════════════════════ */
:root{
  --fl-ink:#393e2b;
  --fl-deep:#2c3022;
  --fl-cream:#fffbf5;
  --fl-sand:#f5efe8;
  --fl-milk:#fcf5ec;
  --fl-tan:#bc9680;
  --fl-tan-soft:rgba(191,175,165,.45);
  --fl-line:rgba(57,62,43,.12);
  --fl-serif:'Cormorant Garamond',Georgia,serif;
  --fl-sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --fl-script:'Pinyon Script',cursive;
  --fl-ease:cubic-bezier(.22,.8,.24,1);
  --fl-wrap:1240px;
}
/* Large / ultra-wide screens */
@media(min-width:1600px){ :root{--fl-wrap:1440px} .container{max-width:1440px} }
@media(min-width:2000px){ :root{--fl-wrap:1680px} .container{max-width:1680px} html{font-size:18px} .header-inner{max-width:1680px} }
@media(min-width:2560px){ :root{--fl-wrap:1960px} .container{max-width:1960px} html{font-size:20px} }

/* ── Buttons ─────────────────────────── */
.fl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px;border-radius:999px;font-family:var(--fl-sans);
  font-size:.82rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  transition:transform .35s var(--fl-ease),background .35s,color .35s,box-shadow .35s,border-color .35s;
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
}
.fl-btn--solid{background:var(--fl-tan);color:#fff;box-shadow:0 10px 30px -10px rgba(188,150,128,.8)}
.fl-btn--solid::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .8s var(--fl-ease);
}
.fl-btn--solid:hover{background:#a98169;color:#fff;transform:translateY(-2px)}
.fl-btn--solid:hover::before{transform:translateX(120%)}
.fl-btn--ghost{border:1px solid rgba(252,245,236,.55);color:var(--fl-milk);backdrop-filter:blur(6px)}
.fl-btn--ghost:hover{background:var(--fl-milk);color:var(--fl-deep)}
.fl-btn--block{width:100%}

/* ── Home hero booking button ───────── */
.hero-book{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:992px){ .hero-book{justify-content:center} }
.hero-book .fl-btn{animation:fl-pop 1s .9s var(--fl-ease) both}
.hero-book .fl-btn--ghost{animation-delay:1.05s}
@keyframes fl-pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* ── Floating booking pill ──────────── */
.fl-float-book{
  position:fixed;left:24px;bottom:24px;z-index:9998;
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  background:var(--fl-deep);color:var(--fl-milk);
  font:600 .78rem/1 var(--fl-sans);letter-spacing:1.6px;text-transform:uppercase;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.45);
  transform:translateY(120px);opacity:0;
  transition:transform .6s var(--fl-ease),opacity .6s,background .3s;
}
.fl-float-book.is-on{transform:none;opacity:1}
.fl-float-book:hover{background:var(--fl-tan);color:#fff}
.fl-float-book::after{
  content:"";position:absolute;inset:-4px;border-radius:inherit;border:1px solid var(--fl-tan);
  animation:fl-ring 2.6s ease-out infinite;pointer-events:none;
}
@keyframes fl-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
body.home .fl-float-book{display:none} /* home already has the hero button */
@media(max-width:600px){
  .fl-float-book{left:12px;right:12px;bottom:12px;justify-content:center}
}

/* ── Reveal effects ─────────────────── */
.fl-reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--fl-ease) var(--d,0s),transform 1s var(--fl-ease) var(--d,0s)}
.fl-reveal.is-in{opacity:1;transform:none}
.fl-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.fl-split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--fl-ease)}
.fl-split.is-in .w>span{transform:none}
.fl-tilt{transition:transform .5s var(--fl-ease),box-shadow .5s;transform-style:preserve-3d;will-change:transform}
@media(prefers-reduced-motion:reduce){
  .fl-reveal,.fl-split .w>span{opacity:1!important;transform:none!important;transition:none!important}
  .fl-float-book::after,.tx-hero-media img{animation:none!important}
}
/* scroll progress */
.fl-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:10000;background:var(--fl-tan);transform-origin:0 50%;transform:scaleX(0)}

/* ═══════════════ TREATMENT PAGE ═══════════════ */
.tx{background:var(--fl-cream);color:var(--fl-ink);overflow:hidden}
.tx-wrap{max-width:var(--fl-wrap);margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.tx-section{padding:clamp(72px,9vw,150px) 0;position:relative}
.tx-eyebrow{font:600 .72rem/1 var(--fl-sans);letter-spacing:4px;text-transform:uppercase;color:var(--fl-tan);margin-bottom:18px;display:flex;align-items:center;gap:14px}
.tx-eyebrow::before{content:"";width:36px;height:1px;background:currentColor}
.tx-eyebrow--light{color:#e8d3c5}
.tx-h2{font-family:var(--fl-serif);font-weight:400;font-size:clamp(2.2rem,4.2vw,4.4rem);line-height:1.02;color:var(--fl-deep);margin-bottom:28px}
.tx-h2--light{color:var(--fl-milk)}
.tx-h3{font-family:var(--fl-serif);font-weight:500;font-size:1.6rem;margin:44px 0 18px;color:var(--fl-deep)}
.tx-script{font-family:var(--fl-script);color:var(--fl-tan);font-size:1.12em;font-weight:400;padding:0 .08em}

/* Hero */
.tx-hero{position:relative;min-height:min(92vh,1100px);display:flex;align-items:flex-end;color:var(--fl-milk);padding:160px 0 clamp(110px,12vw,170px)}
.tx-hero-media{position:absolute;inset:-8% 0 0 0;overflow:hidden}
.tx-hero-media img{width:100%;height:100%;object-fit:cover;animation:fl-kenburns 22s ease-in-out infinite alternate}
@keyframes fl-kenburns{from{transform:scale(1.05)}to{transform:scale(1.16) translate(-1.5%,-1%)}}
.tx-hero-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(44,48,34,.55) 0%,rgba(44,48,34,.15) 35%,rgba(44,48,34,.82) 100%),
  linear-gradient(90deg,rgba(44,48,34,.6) 0%,transparent 70%)}
.tx-hero-inner{position:relative;z-index:2;width:100%}
.tx-crumbs{font:500 .72rem/1 var(--fl-sans);letter-spacing:2px;text-transform:uppercase;display:flex;gap:10px;flex-wrap:wrap;opacity:.8;margin-bottom:28px}
.tx-crumbs a:hover{color:#e8d3c5}
.tx-crumbs em{font-style:normal;color:#e8d3c5}
.tx-chip{display:inline-block;padding:8px 16px;border:1px solid rgba(252,245,236,.4);border-radius:999px;font:500 .7rem/1 var(--fl-sans);letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;backdrop-filter:blur(8px);background:rgba(252,245,236,.08)}
.tx-title{font-family:var(--fl-serif);font-weight:300;font-size:clamp(3.4rem,9vw,9.5rem);line-height:.92;letter-spacing:-.01em;margin:0 0 22px;color:#fff;max-width:14ch}
.tx-tagline{font-family:var(--fl-serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.9rem);line-height:1.35;max-width:36ch;opacity:.92;margin-bottom:36px}
.tx-actions{display:flex;flex-wrap:wrap;gap:14px}
.tx-scroll{position:absolute;left:50%;bottom:28px;width:26px;height:42px;border:1px solid rgba(252,245,236,.5);border-radius:20px;transform:translateX(-50%);z-index:3}
.tx-scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:var(--fl-milk);border-radius:2px;animation:fl-wheel 1.8s ease-in-out infinite}
@keyframes fl-wheel{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Facts */
.tx-facts-wrap{position:relative;z-index:4;margin-top:-64px}
.tx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:#fff;border-radius:18px;box-shadow:0 30px 70px -30px rgba(44,48,34,.35);overflow:hidden}
.tx-fact{padding:30px 32px;border-right:1px solid var(--fl-line)}
.tx-fact:last-child{border-right:0}
.tx-fact dt{font:600 .68rem/1 var(--fl-sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--fl-tan);margin-bottom:10px}
.tx-fact dd{font-family:var(--fl-serif);font-size:clamp(1.3rem,1.7vw,1.75rem);color:var(--fl-deep);margin:0;line-height:1.15}
@media(max-width:700px){.tx-fact{border-right:0;border-bottom:1px solid var(--fl-line);padding:22px 24px}}

/* Overview */
.tx-overview-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.tx-content{font-size:clamp(1rem,1.1vw,1.15rem);line-height:1.85;color:#4c5240}
.tx-content p{margin-bottom:1.2em}
.tx-content>p:first-child::first-letter{float:left;font-family:var(--fl-serif);font-size:4.6em;line-height:.8;padding:6px 12px 0 0;color:var(--fl-tan)}
.tx-content h2,.tx-content h3{font-family:var(--fl-serif);color:var(--fl-deep);margin:1.4em 0 .5em}
.tx-content ul{padding-left:1.2em;margin-bottom:1.2em}
.tx-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0}
.tx-tags li{padding:11px 20px;border-radius:999px;background:var(--fl-sand);border:1px solid var(--fl-line);font-size:.9rem;transition:background .3s,color .3s,transform .3s}
.tx-tags li:hover{background:var(--fl-tan);color:#fff;transform:translateY(-2px)}
.tx-aside{position:sticky;top:110px}
.tx-aside-card{background:var(--fl-deep);color:var(--fl-milk);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(44,48,34,.6)}
.tx-aside-img{aspect-ratio:4/3;overflow:hidden}
.tx-aside-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--fl-ease)}
.tx-aside-card:hover .tx-aside-img img{transform:scale(1.06)}
.tx-aside-body{padding:34px}
.tx-aside-title{font-family:var(--fl-serif);font-size:1.9rem;line-height:1.1;margin-bottom:12px}
.tx-aside-body>p:not(.tx-aside-title){opacity:.75;line-height:1.7;margin-bottom:24px;font-size:.95rem}
.tx-aside-link{display:block;text-align:center;margin-top:18px;font-size:.85rem;opacity:.75}
.tx-aside-link:hover{opacity:1;color:#e8d3c5}
@media(max-width:960px){.tx-overview-grid{grid-template-columns:1fr}.tx-aside{position:static}}

/* Options */
.tx-options{background:var(--fl-sand)}
.tx-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:20px}
.tx-option{background:#fff;border-radius:18px;padding:44px 36px;position:relative;border:1px solid var(--fl-line)}
.tx-option:hover{box-shadow:0 30px 60px -30px rgba(44,48,34,.35)}
.tx-option-num{font-family:var(--fl-serif);font-size:3.4rem;line-height:1;color:var(--fl-tan);opacity:.35;display:block;margin-bottom:18px}
.tx-option h3{font-family:var(--fl-serif);font-size:1.75rem;font-weight:500;color:var(--fl-deep);margin-bottom:12px}
.tx-option p{line-height:1.75;color:#5a604c}

/* Benefits */
.tx-benefits{color:var(--fl-milk);background:var(--fl-deep);isolation:isolate}
.tx-benefits-bg{position:absolute;inset:-15% 0;background-size:cover;background-position:center;opacity:.18;z-index:-1;filter:grayscale(.3)}
.tx-benefit-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:rgba(252,245,236,.12);border-radius:18px;overflow:hidden;margin-top:24px}
.tx-benefit-grid li{background:rgba(44,48,34,.88);padding:34px 30px;display:flex;gap:16px;align-items:flex-start;font-size:1.05rem;line-height:1.55;transition:background .4s}
.tx-benefit-grid li:hover{background:rgba(188,150,128,.25)}
.tx-benefit-grid svg{flex:none;color:#e8d3c5;margin-top:2px}

/* Process */
.tx-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:28px;position:relative;margin-top:30px}
.tx-steps::before{content:"";position:absolute;top:27px;left:28px;right:28px;height:1px;background:linear-gradient(90deg,var(--fl-tan),var(--fl-line))}
.tx-step-dot{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--fl-cream);border:1px solid var(--fl-tan);color:var(--fl-tan);font-family:var(--fl-serif);font-size:1.5rem;margin-bottom:26px;transition:background .4s,color .4s}
.tx-step:hover .tx-step-dot{background:var(--fl-tan);color:#fff}
.tx-step h3{font-family:var(--fl-serif);font-size:1.5rem;font-weight:500;color:var(--fl-deep);margin-bottom:10px}
.tx-step p{color:#5a604c;line-height:1.7}
@media(max-width:900px){
  .tx-steps{grid-template-columns:1fr;gap:0}
  .tx-steps::before{top:0;bottom:0;left:27px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--fl-tan),var(--fl-line))}
  .tx-step{display:grid;grid-template-columns:56px 1fr;column-gap:22px;padding-bottom:34px}
  .tx-step-dot{grid-row:span 2;margin:0}
}

/* Care / FAQ */
.tx-care{background:var(--fl-sand)}
.tx-care-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,7vw,120px)}
.tx-care-grid.is-single{grid-template-columns:1fr;max-width:900px}
.tx-list{list-style:none;padding:0}
.tx-list li{padding:18px 0 18px 36px;border-bottom:1px solid var(--fl-line);position:relative;line-height:1.6}
.tx-list li::before{content:"";position:absolute;left:4px;top:26px;width:14px;height:1px;background:var(--fl-tan)}
.tx-faq-item{border-bottom:1px solid var(--fl-line)}
.tx-faq-item summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;font-family:var(--fl-serif);font-size:1.4rem;color:var(--fl-deep);position:relative}
.tx-faq-item summary::-webkit-details-marker{display:none}
.tx-faq-item summary i{position:absolute;right:6px;top:50%;width:16px;height:16px;margin-top:-8px}
.tx-faq-item summary i::before,.tx-faq-item summary i::after{content:"";position:absolute;left:0;top:7.5px;width:16px;height:1px;background:var(--fl-tan);transition:transform .4s var(--fl-ease)}
.tx-faq-item summary i::after{transform:rotate(90deg)}
.tx-faq-item[open] summary i::after{transform:rotate(0)}
.tx-faq-a{color:#5a604c;line-height:1.8;padding:0 0 24px;animation:fl-fade .5s var(--fl-ease)}
@keyframes fl-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tx-note{grid-column:1/-1;padding:24px 28px;border-left:3px solid var(--fl-tan);background:#fff;border-radius:0 12px 12px 0;line-height:1.7}
@media(max-width:900px){.tx-care-grid{grid-template-columns:1fr}}

/* Related rail */
.tx-related-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.tx-related-nav{display:flex;gap:10px;margin-bottom:28px}
.tx-related-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--fl-line);background:transparent;font-size:1.2rem;color:var(--fl-deep);cursor:pointer;transition:background .3s,color .3s}
.tx-related-nav button:hover{background:var(--fl-deep);color:var(--fl-milk)}
.tx-rail{--rp:max(clamp(20px,4vw,64px),calc((100vw - var(--fl-wrap))/2 + clamp(20px,4vw,64px)));display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px var(--rp) 30px;scroll-padding-inline:var(--rp);scrollbar-width:none}
.tx-rail::-webkit-scrollbar{display:none}
.tx-rail-card{flex:0 0 clamp(260px,24vw,380px);scroll-snap-align:start;background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--fl-line);transition:transform .5s var(--fl-ease),box-shadow .5s;display:flex;flex-direction:column;padding-bottom:26px}
.tx-rail-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(44,48,34,.4)}
.tx-rail-img{aspect-ratio:4/3;overflow:hidden;margin-bottom:22px}
.tx-rail-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--fl-ease)}
.tx-rail-card:hover .tx-rail-img img{transform:scale(1.08)}
.tx-rail-cat,.tx-rail-card h3,.tx-rail-card p,.tx-rail-more{padding:0 26px}
.tx-rail-cat{font:600 .66rem/1 var(--fl-sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--fl-tan);margin-bottom:10px}
.tx-rail-card h3{font-family:var(--fl-serif);font-size:1.75rem;font-weight:500;color:var(--fl-deep);margin-bottom:8px}
.tx-rail-card p{color:#5a604c;line-height:1.6;font-size:.93rem;flex:1}
.tx-rail-more{margin-top:16px;font:600 .74rem/1 var(--fl-sans);letter-spacing:2px;text-transform:uppercase;color:var(--fl-deep)}

/* CTA */
.tx-cta{position:relative;padding:clamp(100px,12vw,190px) 0;color:var(--fl-milk);text-align:center;isolation:isolate;overflow:hidden}
.tx-cta-bg{position:absolute;inset:-15% 0;background-size:cover;background-position:center;z-index:-2}
.tx-cta::before{content:"";position:absolute;inset:0;background:rgba(44,48,34,.72);z-index:-1}
.tx-cta-script{font-family:var(--fl-script);font-size:clamp(3.5rem,7vw,7rem);line-height:1;color:#e8d3c5}
.tx-cta h2{font-family:var(--fl-serif);font-weight:300;font-size:clamp(2rem,4vw,4rem);margin:0 0 16px}
.tx-cta p{opacity:.8;margin-bottom:34px}
.tx-cta .tx-actions{justify-content:center}

/* ═══════════════ AESTHETICS GRID upgrades ═══════════════ */
.aes-card{border-radius:16px;position:relative}
.aes-card-img{position:relative}
.aes-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(44,48,34,.45));opacity:0;transition:opacity .5s}
.aes-card:hover .aes-card-img::after{opacity:1}
.aes-card:hover .aes-card-img img{transform:scale(1.07)}
.aes-card-cat{position:absolute;top:18px;left:18px;z-index:2;padding:7px 14px;border-radius:999px;background:rgba(255,251,245,.9);font:600 .64rem/1 var(--fl-sans);letter-spacing:2px;text-transform:uppercase;color:var(--fl-deep)}
.aes-card-title a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--fl-ease)}
.aes-card:hover .aes-card-title a{background-size:100% 1px}
@media(min-width:1600px){ .aes-all-cards{grid-template-columns:repeat(4,1fr)} .aes-card-img{height:440px} }
.service-book-btn{margin-top:28px}

/* ── Mobile fixes ── */
@media(max-width:992px){
  body:not(.home){padding-top:var(--fl-header-h,56px)}
  body.admin-bar:not(.home){padding-top:calc(var(--fl-header-h,56px) + 46px)}
}
@media(max-width:600px){
  .hero-brand-name{letter-spacing:6px;font-size:clamp(1.6rem,8vw,2.2rem)}
  .hero-brand-sub{letter-spacing:3px}
  .hero-brand{flex-wrap:wrap;justify-content:center}
}
