/* ===========================================================
   Natural Expressions Aesthetics, shared design system
   (Searchly Web concept, v2 after client feedback Sept 2026)
   Palette: soft sage + ivory/cream, warm taupe text,
   soft lavender accents. No browns. WhatsApp actions use
   the brand sage, not green.
   =========================================================== */
:root{
  --brand:#7d9781; --brand-dark:#5b7364; --brand-deep:#3c4b42;
  --sage-soft:#b8ccba; --sage-tint:#eef3ed;
  --gold:#a58fbe; --gold-soft:#d6c9e4;      /* soft lavender accent */
  --lav-tint:#f4f0f8;
  --star:#c9a961;                            /* review stars only */
  --ink:#3d362c; --body:#6c6255; --muted:#787060; --line:#e8e1d5;
  --bg:#ffffff; --cream:#faf6ee; --cream-2:#f2ece0;
  --wa:#7d9781;
  --radius:14px; --maxw:1180px; --shadow:0 22px 48px -24px rgba(46,58,50,.42);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Jost",system-ui,sans-serif;font-size:1.02rem;color:var(--body);background:var(--bg);line-height:1.75;font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;color:var(--ink);line-height:1.08;font-weight:600;letter-spacing:-.012em}
h3,h4{letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:880px}
section{padding:112px 0}
.eyebrow{font-family:"Jost";font-weight:500;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.center .eyebrow,.shead.mid .eyebrow{justify-content:center}
.bg-cream{background:var(--cream)}
.center{text-align:center}

/* Concept banner */
.concept{background:var(--brand-deep);color:#e4ede4;text-align:center;font-size:.82rem;padding:9px 16px}
.concept b{color:var(--gold-soft)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Jost";font-weight:400;font-size:.9rem;letter-spacing:.04em;padding:15px 30px;border-radius:999px;transition:background .35s ease,border-color .35s ease,color .35s ease;white-space:nowrap;cursor:pointer;border:none}
.btn:hover{transform:none}
.btn-wa{background:var(--brand);color:#fff;box-shadow:none}
.btn-wa:hover{background:var(--brand-dark)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.8)}
.btn-outline{background:transparent;color:var(--brand-dark);border:1px solid var(--sage-soft)}
.btn-outline:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-gold{background:var(--gold);color:#fff}
.btn svg{width:18px;height:18px;fill:currentColor}

/* Top bar */
.topbar{background:var(--brand-deep);color:#ccd6cd;font-size:.8rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:42px;gap:18px}
.topbar .tb-l{display:flex;gap:22px;align-items:center}
.topbar .tb-l span{display:inline-flex;align-items:center;gap:7px}
.topbar svg{width:14px;height:14px;fill:var(--gold-soft)}
.topbar .tb-r{color:#e4ede4;letter-spacing:.04em}

/* Header / nav */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px;max-width:1300px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .bn{font-family:"Cormorant Garamond";font-weight:600;font-size:1.7rem;color:var(--brand-dark);letter-spacing:.02em}
.brand .bt{font-family:"Jost";font-weight:400;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;gap:15px;font-family:"Jost";font-weight:400;font-size:.74rem;letter-spacing:.04em;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.6,.2,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a:hover{color:var(--brand)}
.nav-links a.active{color:var(--brand)}
.nav-links a.active::after{transform:scaleX(1);background:var(--gold)}
.nav-cta .btn{padding:11px 20px;font-size:.8rem}
.navtog{display:none}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;cursor:pointer;margin-left:auto;background:none;border:none;padding:0}
.burger span{display:block;height:2px;width:24px;background:var(--brand-dark);border-radius:2px;transition:.25s}

/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--brand-deep)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(28,38,32,.82) 0%,rgba(44,56,48,.66) 44%,rgba(60,75,66,.24) 100%)}
.hero-inner{position:relative;z-index:1;padding:138px 0 146px;max-width:700px}
.hero.page .hero-inner{padding:90px 0 92px}
.hero .logo-mark{height:80px;margin-bottom:24px}
.hero h1{color:#fff;font-size:clamp(3rem,6.1vw,5.3rem);font-weight:600;line-height:.99;letter-spacing:-.022em}
.hero.page h1{font-size:clamp(2.5rem,4.9vw,4rem);letter-spacing:-.018em}
.hero h1 .u{font-style:italic;color:var(--gold-soft)}
.hero p.lead{font-size:1.15rem;line-height:1.7;margin:24px 0 36px;color:#e6ede5;max-width:520px;font-weight:300}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-foot{margin-top:30px;font-size:.85rem;color:#ccd6cd;letter-spacing:.04em}
.crumbs{position:relative;z-index:1;font-size:.78rem;letter-spacing:.06em;color:#ccd6cd;margin-bottom:14px;text-transform:uppercase}
.crumbs a:hover{color:#fff}

/* Trust strip */
.trust{background:var(--cream);border-bottom:1px solid var(--line);padding:24px 0}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:16px 36px;flex-wrap:wrap;font-family:"Jost";font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.trust b{color:var(--brand-dark);font-weight:500}
.trust .sep{width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* USP band (the upgraded selling-points bar) */
.usp{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.usp-item{display:flex;align-items:center;gap:16px;padding:34px 30px;border-right:1px solid var(--line)}
.usp-item:last-child{border-right:none}
.usp-item svg{width:22px;height:22px;fill:var(--brand);flex:none;opacity:.85}
.usp-item b{display:block;font-family:"Cormorant Garamond";font-size:1.35rem;color:var(--ink);font-weight:600;line-height:1.12}
.usp-item span{font-size:.8rem;color:var(--muted);line-height:1.45;letter-spacing:.02em}

/* Section heads */
.shead{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,32ch);
  column-gap:56px;align-items:start;
  max-width:none;margin:0 0 56px;text-align:left;
  padding-bottom:26px;border-bottom:1px solid var(--line);
  counter-increment:sec;
}
/* The section index rides inside the eyebrow, so headings stay flush with
   the content grid below rather than being pushed in by a numeral column. */
.shead .eyebrow{grid-column:1;grid-row:1;margin-bottom:14px}
.shead .eyebrow::before{
  content:counter(sec,decimal-leading-zero);
  width:auto;height:auto;background:none;opacity:1;position:relative;top:-1px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.32rem;line-height:1;
  color:var(--gold);letter-spacing:.04em;
}
.shead .eyebrow::after{content:"";width:36px;height:1px;background:currentColor;opacity:.45;flex:none}
.shead h2{grid-column:1;grid-row:2;font-size:clamp(2.2rem,3.7vw,3.15rem)}
.shead>p:not(.eyebrow){
  grid-column:2;grid-row:2;margin:0;align-self:start;padding-top:.62em;
  color:var(--muted);font-size:.98rem;line-height:1.72;
}
/* the occasional centred head, for a full-width statement */
.shead.mid{display:block;max-width:660px;margin:0 auto 54px;text-align:center;border:none;padding:0}
.shead.mid>p:not(.eyebrow){margin-top:16px;font-size:1.05rem;padding:0}
@media(max-width:900px){
  .shead{grid-template-columns:minmax(0,1fr);column-gap:0}
  .shead>p:not(.eyebrow){grid-column:1;grid-row:3;margin-top:16px;padding-top:0}
}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none;transition:none;display:flex;flex-direction:column}
.card:hover{transform:none;box-shadow:none}
.card .ci{height:300px;overflow:hidden;border-radius:3px}
.card .ci img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.card:hover .ci img{transform:scale(1.045)}
.card .cb{padding:24px 0 0;flex:1;display:flex;flex-direction:column}
/* a text-only card still needs a top edge to read as an item */
.card .cb:first-child{border-top:1px solid var(--line);padding-top:24px}
.card h3{font-size:1.85rem;margin-bottom:8px}
.card p{font-size:.97rem;color:var(--body);flex:1}
.card .lk{margin-top:18px;font-family:"Jost";font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);display:inline-flex;gap:9px;align-items:center;align-self:flex-start}
.lk::after{content:"\2192";display:inline-block;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.card:hover .lk::after,.trow:hover .lk::after,.tile:hover .lk::after,.lk:hover::after{transform:translateX(6px)}

/* Feature split */
.split{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:78px;align-items:center}
.split.flip{grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr)}
.split.flip .split-img{order:2}
.split-img img{border-radius:3px;width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:none}
.split.flip .split-img img{aspect-ratio:4/5}
.split h2+p,.split p+p{margin-top:14px}
.split h2{font-size:clamp(2rem,3.6vw,2.6rem)}
.split p{margin-top:16px}
.tick{list-style:none;margin:18px 0 0}
.tick li{position:relative;padding-left:34px;margin-bottom:13px;color:var(--ink);font-weight:300}
.tick li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:1px;background:var(--brand)}
.tick li::after{content:none}

/* Stats */
.stats{display:flex;gap:34px;flex-wrap:wrap}
.stats .st b{font-family:"Cormorant Garamond";font-size:2.6rem;color:var(--brand);font-weight:600;display:block;line-height:1}
.stats .st span{font-size:.82rem;color:var(--muted);letter-spacing:.06em}

/* Brand strip / products */
.brandrow{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap}
/* Real brand marks, so no saturate filter and no forced uniform height:
   each wordmark carries its own proportions. */
.brandrow img{height:38px;width:auto;max-width:220px;object-fit:contain}
/* Optically balanced per mark: a wordmark with a tagline needs more height
   than one without, or it reads as the smaller brand. */
.lg-guinot{height:52px}
.lg-derm{height:34px}
.lg-regima{height:46px}
.lg-cnd{height:48px}
.lg-gmt{height:42px}
.lg-opal{height:38px}
@media(max-width:600px){
  .brandrow{gap:32px}
  .brandrow img{height:30px}
  .lg-guinot{height:40px}.lg-regima{height:36px}.lg-cnd{height:38px}
  .lg-gmt{height:33px}.lg-derm{height:27px}.lg-opal{height:30px}
}
/* A logo sitting above a heading, used on the range and product-house blocks */
.blogo{height:36px;width:auto;max-width:190px;object-fit:contain;margin-bottom:16px}
.card .blogo{margin:2px 0 14px}
.brandrow .bz{font-family:"Cormorant Garamond";font-size:1.9rem;color:var(--brand-dark)}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;transition:transform .18s,box-shadow .18s}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product img{height:140px;object-fit:contain;margin:0 auto 12px}
.product b{font-family:"Jost";font-weight:500;font-size:.86rem;color:var(--ink);display:block}
.product span{font-size:.78rem;color:var(--muted)}

/* Before / after */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ba{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ba .pair{display:grid;grid-template-columns:1fr 1fr}
.ba .pair figure{position:relative}
.ba .pair img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ba .pair figcaption{position:absolute;left:12px;bottom:12px;background:rgba(46,58,50,.85);color:#fff;font-family:"Jost";font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.ba .cap{padding:16px 20px;font-size:.92rem;color:var(--body)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.gallery a{overflow:hidden;border-radius:10px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery a:hover img{transform:scale(1.07)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}

/* Price list */
.pricecat{max-width:820px;margin:0 auto 40px}
.pricecat h3{font-size:1.8rem;margin-bottom:6px;display:flex;align-items:center;gap:12px}
.pricecat h3 .bar{flex:1;height:1px;background:var(--line)}
.pricelist{width:100%;border-collapse:collapse}
.pricelist td{padding:12px 0;border-bottom:1px solid var(--line);font-size:.97rem}
.pricelist td:last-child{text-align:right;color:var(--brand-dark);font-weight:500;white-space:nowrap}
.pricelist td .d{display:block;font-size:.82rem;color:var(--muted)}

/* Testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 52px}
.quote{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0}
.quote .stars{color:var(--star);letter-spacing:3px;font-size:.9rem}
.quote p{font-family:"Cormorant Garamond",Georgia,serif;font-style:normal;color:var(--ink);margin:14px 0 18px;font-size:1.4rem;line-height:1.42}
.quote b{font-family:"Jost";font-weight:400;color:var(--muted);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}

/* Booking CTA */
.booking{position:relative;color:#fff;overflow:hidden;background:var(--brand-deep)}
.booking-bg{position:absolute;inset:0}
.booking-bg img{width:100%;height:100%;object-fit:cover}
.booking-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,40,34,.9),rgba(46,58,50,.86))}
.booking .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.booking h2{color:#fff;font-size:clamp(2.1rem,4vw,2.9rem)}
.booking p{color:#e9f0e8;font-size:1.08rem;margin:16px 0 26px;font-weight:300}
.bcard{background:#fff;border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.bcard label{font-family:"Jost";font-size:.76rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark);display:block;margin-bottom:6px}
.bcard input,.bcard select,.bcard textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;margin-bottom:15px;color:var(--ink);background:var(--cream)}
.bcard .btn-wa{width:100%;justify-content:center;padding:16px}
.bcard .fnote{text-align:center;font-size:.8rem;color:var(--muted);margin-top:10px}

/* Map + contact */
.mapwrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.mapwrap iframe{display:block;width:100%;height:100%;min-height:340px;border:0}
.loc p{margin-bottom:10px;display:flex;gap:11px;align-items:flex-start}
.loc svg{width:18px;height:18px;fill:var(--brand);flex:none;margin-top:4px}
.hours table{width:100%;border-collapse:collapse}
.hours td{padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hours td:last-child{text-align:right;color:var(--brand-dark)}

/* Footer (with map) */
footer.site{background:var(--brand-deep);color:#c2cec4;padding:0 0 28px}
.foot-map{height:300px}
.foot-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2)}
.foot-main{padding:54px 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px}
footer.site h4{color:#fff;font-family:"Cormorant Garamond";font-size:1.4rem;margin-bottom:14px;font-weight:600}
footer.site a:hover{color:var(--gold-soft)}
.foot-links a{display:block;color:#c2cec4;padding:4px 0;font-size:.88rem;text-transform:uppercase;letter-spacing:.05em}
.foot-logo{height:64px;margin-bottom:14px}
.foot-c div{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:.9rem}
.foot-c svg{width:17px;height:17px;fill:var(--gold-soft);flex:none;margin-top:3px}
.foot-social{display:flex;gap:12px;margin-top:14px}
.foot-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.foot-social a:hover{background:var(--brand)}
.foot-social svg{width:16px;height:16px;fill:#fff}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;text-align:center;font-size:.82rem;color:#8b998e}

/* Floating WhatsApp (brand brown, not green) */
.float-wa{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--brand);color:#fff;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-family:"Jost";font-weight:500;font-size:.9rem;letter-spacing:.03em;box-shadow:0 16px 32px -10px rgba(46,58,50,.7);transition:transform .15s}
.float-wa:hover{transform:scale(1.05);background:var(--brand-dark)}
.float-wa svg{width:23px;height:23px;fill:#fff}

@media(max-width:1080px){
  .burger{display:flex}
  .nav-cta{display:none}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 32px -18px rgba(46,58,50,.45);max-height:0;overflow:hidden;padding:0 24px;transition:max-height .3s ease}
  .navtog:checked ~ .nav-links{max-height:520px;padding:6px 24px 16px}
  .nav-links a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:.95rem}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a.active::after{display:none}
  .navtog:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtog:checked ~ .burger span:nth-child(2){opacity:0}
  .navtog:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .usp-grid{grid-template-columns:1fr 1fr}
  .usp-item{border-bottom:1px solid var(--line)}
  .usp-item:nth-child(2n){border-right:none}
  .cards,.cards.two,.tgrid{grid-template-columns:1fr 1fr}
  .products{grid-template-columns:repeat(3,1fr)}
  .split,.booking .wrap{grid-template-columns:1fr;gap:30px}
  .split.flip .split-img{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  section{padding:60px 0}
  .topbar{display:none}
  .hero h1{font-size:2.3rem;overflow-wrap:break-word}
  .hero.page h1{font-size:1.95rem}
  .hero-inner{padding:80px 0 84px}
  .hero p.lead{font-size:1.05rem}
  .usp-grid{grid-template-columns:1fr}
  .usp-item{border-right:none;padding:20px 22px}
  .cards,.cards.two,.tgrid,.products,.ba-grid,.foot-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .float-wa span{display:none}.float-wa{padding:16px}
}


/* ===========================================================
   v2 additions (client feedback, Sept 2026)
   =========================================================== */

/* Sticky mobile booking bar, so the CTA follows the client down the page */
.mbar{display:none}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;font-family:"Jost";font-weight:500;font-size:.9rem;letter-spacing:.03em}
.mbar .m-wa{background:var(--brand);color:#fff}
.mbar .m-call{background:#fff;color:var(--brand-dark);border-right:1px solid var(--line)}
.mbar svg{width:19px;height:19px;fill:currentColor}

/* Lighter treatment rows: name, one line, one link. Replaces the dense blocks. */
.tlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.trow{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:26px 0 30px;display:flex;flex-direction:column;transition:border-color .35s}
.trow:hover{transform:none;box-shadow:none;border-top-color:var(--brand)}
.trow h3{font-size:1.7rem;margin-bottom:5px}
.trow .sub{font-family:"Jost";font-weight:500;font-size:.82rem;letter-spacing:.05em;color:var(--brand);margin-bottom:12px}
.trow p{font-size:.95rem;flex:1}
.trow .meta{font-size:.85rem;color:var(--muted);margin-top:12px}
.trow .lk{margin-top:16px;font-family:"Jost";font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);display:inline-flex;gap:7px;align-items:center;align-self:flex-start}
.trow .lk:hover{color:var(--brand-dark)}

/* Four-up tiles, used for the precision / advanced treatments */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:0 44px}
.tile{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0;text-align:left;transition:border-color .35s}
.tile:hover{transform:none;box-shadow:none;border-top-color:var(--brand)}
.tile .ic{width:34px;height:34px;border-radius:0;background:none;display:block;margin:0 0 14px}
.tile .ic svg{width:24px;height:24px;fill:var(--brand);opacity:.85}
.tile h3{font-size:1.45rem;margin-bottom:8px}
.tile p{font-size:.9rem}
.tile .lk{display:inline-block;margin-top:14px;font-family:"Jost";font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}

/* Hero feature band, for the new Dermalogica PRO Microneedling launch */
.feature{position:relative;color:#fff;overflow:hidden;background:var(--brand-deep)}
.feature-bg{position:absolute;inset:0}
.feature-bg img{width:100%;height:100%;object-fit:cover}
.feature-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(30,40,34,.92) 0%,rgba(60,75,66,.8) 52%,rgba(60,75,66,.35) 100%)}
.feature .wrap{position:relative;z-index:1;padding:78px 0}
.feature-in{max-width:620px}
.feature .new{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:#fff;font-family:"Jost";font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:20px}
.feature h2{color:#fff;font-size:clamp(2.1rem,4.2vw,3.1rem)}
.feature h2 .u{font-style:italic;color:var(--gold-soft)}
.feature p{color:#e9f0e8;font-size:1.1rem;margin:18px 0 24px;font-weight:300}
.feature .pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.feature .pills span{border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:6px 14px;font-size:.82rem;color:#e4ede4}

/* Brand chips, for the fuller stockist list */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-family:"Jost";font-size:.86rem;letter-spacing:.06em;color:var(--brand-dark)}

/* Numbered journey, four steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px}
.step::before{counter-increment:st;content:counter(st);position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-family:"Cormorant Garamond";font-size:1.2rem;display:grid;place-items:center}
.step h3{font-size:1.25rem;margin:10px 0 6px}
.step p{font-size:.9rem}

/* Category pills, used on the men's page */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{background:var(--sage-tint);border-radius:var(--radius);padding:24px 22px}
.cat b{font-family:"Jost";font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-dark);display:block;margin-bottom:8px}
.cat span{font-size:.93rem;color:var(--body)}

/* Google rating block */
.ratebox{text-align:center}
.ratebox .score{font-family:"Cormorant Garamond";font-size:3.4rem;color:var(--brand-dark);font-weight:600;line-height:1}
.ratebox .stars{color:var(--star);letter-spacing:3px;font-size:1.15rem;margin:6px 0 4px}
.ratebox .from{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* A soft lavender-tinted section, for gentle variation between cream and white */
.bg-lav{background:#f8f5fb}
.bg-sage{background:#f4f7f3}

/* Pull quote, for the founder line */
.pull{max-width:900px;margin:0 auto;text-align:center}
.pull::before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin:0 auto 34px}
.pull p{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.65rem,3.3vw,2.45rem);line-height:1.34;color:var(--ink);font-style:italic;letter-spacing:-.01em}
.pull .who{display:block;margin-top:18px;font-family:"Jost";font-style:normal;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

@media(max-width:1080px){
  .tiles,.steps,.cats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .tlist,.tiles,.steps,.cats{grid-template-columns:1fr}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;box-shadow:0 -8px 22px -12px rgba(46,58,50,.5)}
  .float-wa{display:none}
  body{padding-bottom:54px}
  .feature .wrap{padding:56px 0}
}

/* Typeset footer wordmark, standing in until the updated logo arrives */
.foot-logo{height:auto;display:flex;flex-direction:column;line-height:1;margin-bottom:16px}
.foot-logo .fl-n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:1.85rem;color:#fff;letter-spacing:.02em}
.foot-logo .fl-t{font-family:"Jost",sans-serif;font-weight:400;font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft);margin-top:6px}

/* ===========================================================
   Editorial refinements + a proper mobile pass
   =========================================================== */

body{counter-reset:sec}

/* Scroll reveal. The hiding class is applied by JS, so with JS off or
   prefers-reduced-motion set, everything is simply visible. */
.rv{opacity:0;transform:translateY(16px)}
.rv-on{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .rv-on{transition:none}
  .hero-bg img{animation:none!important}
}

/* A slow drift on hero photography, so the top of the page is not static */
.hero-bg img{animation:drift 26s ease-in-out infinite alternate;transform-origin:center}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}

/* Stats set as editorial figures */
.stats{gap:44px}
.stats .st b{font-size:3.1rem;color:var(--ink);letter-spacing:-.02em}
.stats .st span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:6px}

/* Rating block, quieter */
.ratebox .score{font-size:3.9rem;color:var(--ink);letter-spacing:-.02em}
.ratebox .from{font-size:.72rem;letter-spacing:.2em;margin-top:6px}

/* Steps: numerals in the margin rather than badges on a box */
.step{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:26px 0 0}
.step::before{position:static;display:block;width:auto;height:auto;background:none;color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem;margin-bottom:10px;letter-spacing:.05em}
.step h3{margin:0 0 6px;font-size:1.35rem}
.steps{gap:0 44px}

/* Category blocks on the men's page */
.cat{background:transparent;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0}
.cats{gap:0 44px}

/* Price list, set as a proper table of contents */
.pricecat{max-width:none}
.pricecat h3{font-size:1.55rem;margin-bottom:2px;letter-spacing:-.005em}
.pricelist td{padding:15px 0;font-size:.97rem}
.pricelist tr:hover td{color:var(--ink)}

/* Product plates */
.product{background:transparent;border:none;border-radius:0;padding:0;text-align:left;transition:none}
.product:hover{transform:none;box-shadow:none}
.product img{height:210px;width:100%;object-fit:contain;background:var(--cream);border-radius:3px;margin:0 0 14px;padding:22px}
.product b{font-size:.98rem;font-weight:500;margin-bottom:4px}
.product span{font-size:.86rem;line-height:1.6}
.products{gap:36px 28px}

/* Before / after */
.ba{border:none;border-radius:0;box-shadow:none}
.ba .pair figcaption{background:rgba(28,38,32,.82);font-size:.66rem;letter-spacing:.18em}
.ba .cap{padding:16px 0 0;font-size:.9rem;color:var(--muted)}

/* Chips */
.chips span{background:transparent;border:1px solid var(--line);padding:10px 22px;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Booking block */
.booking .wrap{gap:72px}
.bcard{border-radius:4px;padding:36px}
.bcard input,.bcard select,.bcard textarea{border-radius:3px;background:#fff;border-color:var(--line)}
.bcard input:focus,.bcard select:focus{outline:none;border-color:var(--brand)}
.booking-bg::after{background:linear-gradient(180deg,rgba(28,38,32,.9),rgba(44,56,48,.88))}

/* Feature band */
.feature .new{background:transparent;border:1px solid var(--gold-soft);color:var(--gold-soft);letter-spacing:.22em}
.feature .wrap{padding:104px 0}

/* Footer */
.foot-links a{text-transform:none;letter-spacing:.01em;font-size:.92rem;color:#b8c6ba}
.copyright{font-size:.78rem;letter-spacing:.02em}

/* Floating WhatsApp, calmer */
.float-wa{box-shadow:0 14px 30px -14px rgba(28,38,32,.6);font-size:.86rem;padding:15px 24px}
.float-wa:hover{transform:none;background:var(--brand-dark)}

/* ---------------- Tablet ---------------- */
@media(max-width:1080px){
  section{padding:88px 0}
  /* the wide angled scrim thins out on a narrower canvas, so from tablet
     down the hero gets a vertical one that actually protects the type */
  .hero-bg::after{background:linear-gradient(180deg,rgba(28,38,32,.7) 0%,rgba(28,38,32,.56) 32%,rgba(28,38,32,.8) 100%)}
  .hero p.lead{color:#eef3ed;max-width:none}
  .hero-foot,.crumbs{color:#dbe4dc}
  .split{grid-template-columns:1fr;gap:44px}
  .split.flip{grid-template-columns:1fr}
  .split-img img,.split.flip .split-img img{aspect-ratio:16/10}
  .tlist,.tiles,.steps,.cats,.tgrid{gap:0 40px}
  .feature .wrap{padding:76px 0}
  .booking .wrap{gap:44px}
}

/* ---------------- Phone ---------------- */
@media(max-width:640px){
  section{padding:64px 0}
  .wrap{padding:0 22px}

  /* Section heads stack, numeral leading the eyebrow on one line */
  .shead{margin-bottom:34px;padding-bottom:20px}
  .shead .eyebrow{margin-bottom:12px}
  .shead .eyebrow::before{font-size:1.1rem}
  .shead .eyebrow::after{width:22px}
  .shead h2{font-size:2rem}
  .shead>p:not(.eyebrow){margin-top:14px;font-size:.95rem}
  .shead.mid{margin-bottom:32px}
  .shead.mid h2{font-size:2rem}

  /* Single column, and row gaps come back so hairline items breathe */
  .cards,.cards.two,.tgrid,.products,.ba-grid,.foot-grid,
  .tlist,.tiles,.steps,.cats{grid-template-columns:1fr}
  .tlist{gap:0}
  .tiles,.steps,.cats,.tgrid{gap:0}
  .cards,.cards.two{gap:44px}
  .products{gap:32px}
  .trow{padding:22px 0 26px}
  .tile,.step,.cat,.quote{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
  .tiles>.tile:first-child,.steps>.step:first-child,
  .cats>.cat:first-child,.tgrid>.quote:first-child{margin-top:0}

  .hero-inner{padding:92px 0 96px}
  .hero.page .hero-inner{padding:76px 0 78px}
  .hero h1{font-size:2.55rem;line-height:1.02}
  .hero.page h1{font-size:2.15rem}
  .hero p.lead{font-size:1.02rem;margin:18px 0 28px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero-foot{font-size:.78rem;margin-top:24px}

  .card .ci{height:250px}
  .card h3{font-size:1.6rem}
  .split-img img,.split.flip .split-img img{aspect-ratio:4/3}
  .usp-item{padding:22px 22px}
  .stats{gap:28px}
  .stats .st b{font-size:2.4rem}
  .quote p{font-size:1.2rem}
  .pull::before{margin-bottom:24px}
  .product img{height:170px;padding:18px}
  .feature .wrap{padding:56px 0}
  .bcard{padding:26px 22px}
  .pricelist td{padding:13px 0;font-size:.92rem}
  .pricecat h3{font-size:1.35rem}
  .chips{gap:8px}
  .chips span{padding:8px 16px;font-size:.74rem}
  .mapwrap iframe{min-height:280px}
  .foot-map{height:220px}
  .foot-grid{gap:32px}

  /* the sticky bar owns the bottom of the screen */
  .mbar{display:flex}
  .float-wa{display:none}
  body{padding-bottom:58px}
}

@media(max-width:380px){
  .wrap{padding:0 18px}
  .hero h1{font-size:2.25rem}
  .brand .bn{font-size:1.45rem}
}

/* Supplier marks supplied on a white ground blend into cream backgrounds */
.lg-blend{mix-blend-mode:multiply}
.lg-accent{height:40px}
.lg-bio{height:30px}
.lg-helio{height:26px}
@media(max-width:640px){.lg-accent{height:32px}.lg-bio{height:24px}.lg-helio{height:21px}}
/* a single-image before/after plate */
.ba>img{width:100%;display:block;border-radius:3px}

/* ===========================================================
   Mobile above-the-fold budget
   On a 390x844 phone the chrome (banner + sticky header) and the
   sticky Call/Book bar leave roughly 650px, and on a 375x667 phone
   only about 475px. The whole hero message, eyebrow through both
   buttons, has to fit inside that on the smallest of them, so the
   hero is sized to its content rather than padded out.
   =========================================================== */
.c-short{display:none}

@media(max-width:640px){
  /* reclaim the chrome */
  .concept{font-size:.72rem;padding:7px 16px;line-height:1.4}
  .c-long{display:none}
  .c-short{display:inline}
  .nav{height:64px}
  .brand .bn{font-size:1.42rem}
  .brand .bt{font-size:.55rem;letter-spacing:.3em}
  .burger{width:40px;height:40px}

  /* hero sized to its content, not to a fixed band */
  .hero-inner{padding:32px 0 36px}
  .hero.page .hero-inner{padding:26px 0 32px}
  .hero h1{font-size:2.05rem;line-height:1.07}
  .hero.page h1{font-size:1.82rem;line-height:1.1}
  .hero p.lead{font-size:.94rem;line-height:1.62;margin:14px 0 22px}
  .hero .eyebrow{font-size:.62rem;letter-spacing:.24em;margin-bottom:10px}
  .hero .eyebrow::before{width:18px}
  .crumbs{font-size:.66rem;margin-bottom:10px}
  /* the USP band repeats this immediately below, so it is not lost */
  .hero-foot{display:none}
  .hero-cta{gap:9px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center;padding:13px 22px;font-size:.86rem}
}

/* Very short screens (iPhone SE and similar) get one more trim */
@media(max-width:640px) and (max-height:700px){
  .concept{font-size:.68rem;padding:6px 14px}
  .hero-inner{padding:22px 0 26px}
  .hero.page .hero-inner{padding:18px 0 24px}
  .hero h1{font-size:1.86rem}
  .hero.page h1{font-size:1.68rem}
  .hero p.lead{font-size:.9rem;line-height:1.55;margin:12px 0 18px}
  .hero-cta .btn{padding:12px 20px}
}

/* Hero supporting detail: desktop shows the full lead, phones show only the
   opening promise so the headline and both CTAs clear the fold. The detail
   is repeated in the section immediately below on every page. */
@media(max-width:640px){ .lead-more{display:none} }

/* Shortest realistic case: a small phone with the browser bars showing,
   where the visible viewport drops to roughly 550px. */
@media(max-width:640px) and (max-height:610px){
  .concept{font-size:.64rem;padding:5px 14px}
  .hero-inner{padding:16px 0 20px}
  .hero.page .hero-inner{padding:14px 0 18px}
  .hero h1{font-size:1.7rem;line-height:1.08}
  .hero.page h1{font-size:1.55rem}
  .hero p.lead{font-size:.86rem;line-height:1.5;margin:10px 0 15px}
  .hero .eyebrow{margin-bottom:8px}
  .hero-cta{gap:8px}
  .hero-cta .btn{padding:11px 18px;font-size:.83rem}
  .nav{height:58px}
  .brand .bn{font-size:1.3rem}
}

/* ===========================================================
   Draft four, Debbie's amendments of 8 October 2026
   =========================================================== */
/* the green band at the top, a shade lighter (was --brand-deep) */
.concept,.topbar{background:var(--brand-dark)}
.topbar{color:#f1f5f0}
.topbar .tb-r{color:#f1f5f0}
/* longer menu labels (Laser Contouring, Aesthetic Precision) */
.nav-links{gap:13px;font-size:.72rem}
@media(max-width:1280px) and (min-width:1081px){.nav-links{gap:10px;font-size:.68rem;letter-spacing:.02em}}
/* Dermalogica treatment lists inside cards */
.dlist{list-style:none;margin-top:14px}
.dlist li{padding:12px 0;border-top:1px solid var(--line);font-size:.93rem;line-height:1.65}
.dlist li:first-child{border-top:none;padding-top:4px}
.dlist b{display:block;font-family:"Jost";font-weight:500;color:var(--ink);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.card .sub{font-family:"Jost";font-weight:500;font-size:.84rem;letter-spacing:.04em;color:var(--brand);margin-bottom:10px}
.sub-lead{font-family:"Jost";font-weight:500;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:-4px 0 18px}
/* click-to-load video, nothing loads from YouTube until it is asked for */
.video{position:relative;display:block;width:100%;margin-top:28px;border:0;padding:0;background:#1d2621;cursor:pointer;border-radius:3px;overflow:hidden;aspect-ratio:16/9}
.video img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .4s,transform 1.1s cubic-bezier(.2,.6,.2,1)}
.video:hover img{opacity:.95;transform:scale(1.03)}
.video .play{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.video .play svg{width:30px;height:30px;fill:var(--brand-dark);margin-left:4px}
.video .vcap{position:absolute;left:18px;bottom:14px;color:#fff;font-family:"Jost";font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* before and after groups */
.ba-h{font-size:1.55rem;margin:8px 0 22px}
.ba-grid + .ba-h{margin-top:56px}
.ba-credit{margin-top:18px;font-size:.84rem;color:var(--muted);font-style:italic}
/* Guinot story on the skincare page */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin:8px 0 64px;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story h3{font-size:1.7rem;margin-bottom:14px}
.story p{margin-bottom:14px}
/* hero product, Heliocare */
.hero-prod{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;background:#fff;padding:40px;border-radius:3px}
.hero-prod .hp-img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px}
.hero-prod h3{font-size:clamp(1.8rem,3vw,2.3rem);margin-bottom:14px}
.voucher-band .split-img img{aspect-ratio:4/5}
@media(max-width:900px){
  .story,.hero-prod{grid-template-columns:1fr;gap:28px}
  .hero-prod{padding:24px}
}