*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --teal:      #A8CCCF;
  --teal-dark: #5A9499;
  --teal-deep: #2E747B;
  --black:     #0C0C0C;
  --white:     #F8F6F2;
  --off:       #EFEFEB;
  --ink:       #111;
  --mid:       #666;
  --purple:    #7C3AED;
  --gold:      #B8942A;
  --rule:      #DEDAD4;
  --w:         1380px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--white); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ── SHARED ── */
.kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal-dark); display: block; margin-bottom: 12px; }
.kicker-lt { color: var(--teal); }
.kicker-bk { color: rgba(0,0,0,0.4); }
.link-arrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1.5px solid var(--teal-dark); padding-bottom: 2px; transition: all 0.15s; align-self: flex-start; }
.link-arrow:hover { color: var(--ink); border-color: var(--ink); }
.link-arrow-lt { color: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.2); }
.link-arrow-lt:hover { color: var(--white); border-color: var(--white); }
.btn-primary { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 28px; background: var(--ink); color: var(--white); text-decoration: none; border: 2px solid var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s; }
.btn-primary:hover { background: var(--teal); color: var(--black); border-color: var(--teal); }
.btn-primary-teal { background: var(--teal); color: var(--black); border-color: var(--teal); }
.btn-primary-teal:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-ghost { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 28px; background: transparent; color: var(--ink); text-decoration: none; border: 2px solid rgba(0,0,0,0.25); display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-lt { color: var(--white); border-color: rgba(255,255,255,0.3); }
.btn-ghost-lt:hover { border-color: var(--white); }

/* ── BREADCRUMB — site-wide ── */
.breadcrumb { background: var(--off); border-bottom: 1px solid var(--rule); }
.breadcrumb-c { max-width: var(--w); margin: 0 auto; padding: 12px 60px; display: flex; align-items: center; gap: 8px; }
.bc-link { font-size: 11px; font-weight: 500; color: var(--mid); text-decoration: none; }
.bc-link:hover { color: var(--ink); }
.bc-sep { font-size: 11px; color: var(--rule); }
.bc-current { font-size: 11px; font-weight: 700; color: var(--teal-dark); }

/* ── VOUCHER TICKER — black ── */
.voucher-bar { background: var(--black); overflow: hidden; height: 40px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.voucher-track { display: flex; width: max-content; animation: vtick 42s linear infinite; align-items: center; }
.voucher-item { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); padding: 0 36px; white-space: nowrap; display: flex; align-items: center; gap: 14px; }
.voucher-item a { color: var(--teal); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(168,204,207,0.4); transition: all 0.15s; }
.voucher-item a:hover { color: var(--white); border-color: var(--white); }
.v-sep { color: rgba(255,255,255,0.12); }
@keyframes vtick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── NAV ── */
nav { position: sticky; top: 0; z-index: 300; background: var(--white); border-bottom: 3px solid var(--ink); height: 72px; }
.nav-c { max-width: var(--w); margin: 0 auto; display: flex; align-items: stretch; height: 100%; }
.nav-logo-wrap { display: flex; align-items: center; padding: 0 36px 0 40px; border-right: 1px solid var(--rule); flex-shrink: 0; text-decoration: none; }
.nav-logo-wrap img { height: 38px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; padding: 0 20px; }
.nav-links a { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); text-decoration: none; padding: 8px 16px; transition: all 0.15s; }
.nav-links a:hover { color: var(--ink); background: rgba(168,204,207,0.12); }
.nav-right { display: flex; align-items: stretch; border-left: 1px solid var(--rule); flex-shrink: 0; }
.nav-prices { display: flex; align-items: center; padding: 0 28px; border-right: 1px solid var(--rule); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); text-decoration: none; white-space: nowrap; transition: all 0.15s; }
.nav-prices:hover { color: var(--ink); background: rgba(168,204,207,0.1); }
.nav-book { display: flex; align-items: center; gap: 10px; padding: 0 32px; background: var(--teal); color: var(--black); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: all 0.2s; position: relative; overflow: hidden; }
.nav-book::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.nav-book:hover::before { transform: translateY(0); }
.nav-book:hover { color: var(--white); }
.nav-book > * { position: relative; z-index: 1; }

/* ── HERO ── */
.hero { position: relative; min-height: 82vh; display: flex; flex-direction: column; border-bottom: 3px solid var(--ink); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: url('https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1800&q=85') center 30%/cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.72) 48%, rgba(10,10,10,0.18) 100%), linear-gradient(to top, rgba(10,10,10,0.45) 0%, transparent 50%); }
.hero-purple-edge { display: none; }
.wisteria-svg { position: absolute; top: 0; right: 0; width: 460px; height: 500px; pointer-events: none; z-index: 2; overflow: visible; }
.hero-inner { position: relative; z-index: 4; flex: 1; max-width: var(--w); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: flex-end; padding: 48px 60px 60px; }
.hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hero-eyebrow::before { content:''; width:24px; height:1px; background:var(--teal); }
.hero-h1 { font-size: clamp(56px, 6.5vw, 96px); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; margin-bottom: 28px; }
.h1-outline { display: block; color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.h1-white   { display: block; color: var(--white); }
.h1-teal    { display: block; color: var(--teal); }
.hero-desc { font-size: 16px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,0.58); max-width: 500px; }
.hero-desc strong { font-weight: 700; color: rgba(255,255,255,0.88); }
.hero-right { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.hero-cta-primary { display: flex; flex-direction: column; background: var(--teal); text-decoration: none; padding: 22px 26px; border: 2px solid var(--teal); transition: all 0.2s; }
.hero-cta-primary:hover { background: var(--white); border-color: var(--white); }
.hero-cta-primary:hover .hcp-label { color: var(--black); }
.hero-cta-primary:hover .hcp-sub { color: var(--mid); }
.hcp-label { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--black); display: flex; align-items: center; gap: 10px; }
.hcp-sub { font-size: 11px; font-weight: 400; color: rgba(0,0,0,0.5); margin-top: 4px; display: block; }
.hero-cta-secondary {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,10,10,0.65);
  border: 1.5px solid rgba(255,255,255,0.3);
  text-decoration: none; padding: 15px 20px;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}
.hero-cta-secondary:hover { background: rgba(10,10,10,0.85); border-color: rgba(255,255,255,0.6); }
.hcs-label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.95); }
.hcs-arrow { font-size: 16px; color: var(--teal); }
.hero-stats { display: flex; gap: 8px; margin-top: 2px; }
.hero-stat-pill { flex: 1; background: rgba(10,10,10,0.6); border: 1px solid rgba(255,255,255,0.1); padding: 12px 14px; }
.hsp-n { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--white); line-height: 1; display: block; }
.hsp-l { font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.32); display: block; margin-top: 3px; }

/* ── INTRO — white left, teal right (full bleed) ── */
.intro-section { border-bottom: 3px solid var(--ink); background: var(--white); position: relative; }
.intro-section::after { content:''; position:absolute; top:0; right:0; bottom:0; width:50%; background:var(--teal); z-index:0; pointer-events:none; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--w); margin: 0 auto; position: relative; z-index: 1; }
.intro-left { padding: 88px 60px; border-right: 3px solid var(--ink); background: var(--white); display: flex; flex-direction: column; justify-content: space-between; }
.intro-right { background: var(--teal); display: flex; flex-direction: column; }
.intro-kicker-wrap { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
.intro-vert { font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--teal-dark); writing-mode: vertical-rl; transform: rotate(180deg); flex-shrink: 0; margin-top: 6px; }
.intro-h2 { font-size: clamp(44px, 4.8vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.ih-black { display: block; color: var(--ink); }
.ih-teal  { display: block; color: var(--teal-dark); }
.ih-out   { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.intro-body { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--mid); margin-top: 24px; }
.intro-body strong { color: var(--ink); font-weight: 700; }
.intro-body em { font-style: normal; color: var(--teal-dark); font-weight: 600; }

/* 3 Ways — now teal background */
.ways-hed { padding: 52px 52px 36px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.ways-h { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.wh-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--black); }
.wh-ink { display: block; color: var(--black); }
.booking-ways { display: flex; flex-direction: column; flex: 1; padding: 28px 36px; gap: 12px; }
.booking-way {
  display: flex; align-items: center; padding: 20px 28px;
  text-decoration: none; background: rgba(255,255,255,0.55);
  border: 2px solid rgba(0,0,0,0.15);
  transition: all 0.2s; gap: 22px; position: relative; overflow: hidden;
}
.booking-way::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; }
.booking-way:hover { background: var(--white); border-color: var(--black); }
.booking-way:hover::before { transform: scaleX(1); }
.booking-way:last-child { border-bottom: 2px solid rgba(0,0,0,0.15); }
.bw-num { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: rgba(0,0,0,0.15); flex-shrink: 0; line-height: 1; transition: color 0.2s; }
.booking-way:hover .bw-num { color: rgba(0,0,0,0.6); }
.bw-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--black); display: block; margin-bottom: 2px; }
.bw-val { font-size: 13px; font-weight: 400; color: rgba(0,0,0,0.5); display: block; }
.bw-arrow { font-size: 22px; color: rgba(0,0,0,0.2); transition: all 0.2s; flex-shrink: 0; margin-left: auto; }
.booking-way:hover .bw-arrow { color: rgba(0,0,0,0.6); transform: translateX(4px); }

/* ── PHOTO STRIP ── */
.photo-strip { display: grid; grid-template-columns: 3fr 2fr 2fr; height: 500px; border-bottom: 3px solid var(--ink); }
.photo-cell { overflow: hidden; position: relative; }
.photo-cell:not(:last-child) { border-right: 3px solid var(--ink); }
.photo-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.photo-cell:hover .photo-img { transform: scale(1.06); }
.photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.72) 0%, transparent 55%); }
.photo-label-wrap { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 30px; z-index: 2; }
.photo-label-big { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--white); display: block; line-height: 1; }
.photo-label-sub { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.48); display: block; margin-top: 4px; }

/* ── SERVICES ── */
.services { background: var(--teal); border-bottom: 3px solid var(--ink); }
.services-c { max-width: var(--w); margin: 0 auto; }
.services-hed { padding: 60px 60px 48px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid var(--ink); }
.sh-h2 { font-size: clamp(48px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.sh-out { color: transparent; -webkit-text-stroke: 2px var(--black); }
.sh-teal { color: var(--black); }
/* Featured 2 services */
.svc-featured { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(0,0,0,0.12); }
.svc-feat { padding: 48px 48px 44px; border-right: 1px solid rgba(0,0,0,0.12); text-decoration: none; background: var(--white); position: relative; overflow: hidden; transition: all 0.25s; display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; }
.svc-feat:last-child { border-right: none; }
.svc-feat::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.svc-feat:hover { background: var(--teal); }
.svc-feat:hover .sf-n,.svc-feat:hover .sf-price-label { color: rgba(0,0,0,0.5); }
.svc-feat:hover .sf-name { color: var(--black); }
.svc-feat:hover .sf-desc { color: rgba(0,0,0,0.6); }
.svc-feat:hover .sf-tag { background: rgba(0,0,0,0.12); color: var(--black); }
.svc-feat:hover .sf-price { color: var(--black); }
.svc-feat:hover::after { transform: scaleX(1); }
.sf-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.sf-n { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: rgba(0,0,0,0.5); display: block; transition: color 0.2s; }
.sf-price-wrap { text-align: right; }
.sf-price-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,0,0,0.4); display: block; transition: color 0.2s; }
.sf-price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--black); display: block; margin-top: 2px; transition: color 0.2s; }
.sf-name { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--black); display: block; margin-bottom: 10px; line-height: 0.95; transition: color 0.2s; }
.sf-desc { font-size: 14px; font-weight: 300; color: rgba(0,0,0,0.6); line-height: 1.65; transition: color 0.2s; flex: 1; }
.sf-tag { display: inline-flex; align-items: center; margin-top: 18px; padding: 6px 12px; background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.65); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: all 0.2s; align-self: flex-start; }
.sf-book { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; background: var(--black); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: all 0.2s; align-self: flex-start; }
.sf-book:hover { background: var(--teal-dark); color: var(--white); }
.svc-feat:hover .sf-book { background: var(--ink); color: var(--white); }
.svc-book { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 6px 12px; background: var(--black); color: var(--white); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: all 0.2s; width: auto; align-self: flex-start; }
.svc-book:hover { background: var(--teal-dark); }
.svc:hover .svc-book { background: var(--ink); color: var(--white); }
/* Regular grid services */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.svc { padding: 28px 28px; border-right: 1px solid rgba(0,0,0,0.12); text-decoration: none; background: var(--white); position: relative; overflow: hidden; transition: all 0.2s; }
.svc:last-child { border-right: none; }
.svc::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.svc:hover { background: var(--teal); }
.svc:hover .svc-n,.svc:hover .svc-price-lbl { color: rgba(0,0,0,0.45); }
.svc:hover .svc-name { color: var(--black); }
.svc:hover .svc-desc { color: rgba(0,0,0,0.6); }
.svc:hover .svc-price { color: var(--black); }
.svc:hover::after { transform: scaleX(1); }
.svc-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.svc-n { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: rgba(0,0,0,0.45); display: block; transition: color 0.2s; }
.svc-price-wrap { text-align: right; }
.svc-price-lbl { font-size: 8px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,0,0,0.4); display: block; transition: color 0.2s; }
.svc-price { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--black); display: block; margin-top: 1px; transition: color 0.2s; }
.svc-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--black); display: block; margin-bottom: 6px; transition: color 0.2s; }
.svc-desc { font-size: 12px; font-weight: 300; color: rgba(0,0,0,0.55); line-height: 1.6; transition: color 0.2s; }

/* ── HAIR SYSTEMS — full-bleed image left, white right ── */
.feature-section { border-bottom: 3px solid var(--ink); background: var(--white); }
.feature-grid { display: grid; grid-template-columns: 5fr 7fr; max-width: var(--w); margin: 0 auto; min-height: 420px; }
.feature-img-wrap { border-right: none; background: var(--white); display: flex; align-items: center; justify-content: center; padding: 40px; }
.feature-img { width: 100%; height: 100%; min-height: 340px; background: url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=900&q=85') center 20%/cover no-repeat; }
.feature-copy { background: var(--white); padding: 60px 60px; display: flex; flex-direction: column; justify-content: space-between; }
.feature-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal-dark); display: block; margin-bottom: 16px; }
.feature-h2 { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin-bottom: 24px; }
.fh-out  { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.fh-teal { display: block; color: var(--teal-dark); }
.fh-ink  { display: block; color: var(--ink); }
.feature-copy p { font-size: 15px; font-weight: 300; color: var(--mid); line-height: 1.85; margin-bottom: 12px; }
/* Price callout — full width, same as buttons */
.feature-price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 16px; padding: 18px 24px; border: 2px solid var(--rule); background: var(--off); width: 100%; }
.feature-btns { display: flex; gap: 10px; width: 100%; }
.feature-btns .btn-primary, .feature-btns .btn-ghost { flex: 1; justify-content: center; }
.fp-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); }
.fp-price { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.fp-note  { font-size: 12px; font-weight: 300; color: var(--mid); }
.feature-btns { display: flex; gap: 10px; }

/* ── HOURS + ADDRESS — white left, teal right (full bleed) ── */
.logistics-section { border-bottom: 3px solid var(--ink); background: var(--white); position: relative; }
.logistics-section::after { content:''; position:absolute; top:0; right:0; bottom:0; width:50%; background:var(--teal); z-index:0; pointer-events:none; }
.logistics-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--w); margin: 0 auto; position: relative; z-index: 1; }
.hours-side { padding: 72px 60px; border-right: 3px solid var(--ink); background: var(--white); }
.hours-h3 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin-bottom: 36px; }
.hh-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hh-teal { display: block; color: var(--teal-dark); }
.h-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.h-row:last-child { border-bottom: none; }
.h-day { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }
.h-time { font-size: 14px; font-weight: 500; color: var(--ink); }
.address-side { padding: 72px 60px; background: var(--teal); display: flex; flex-direction: column; justify-content: space-between; }
.address-h3 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; color: var(--black); margin-bottom: 18px; }
.address-side p { font-size: 15px; font-weight: 400; color: rgba(0,0,0,0.6); line-height: 1.85; margin-bottom: 12px; }
.address-line { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,0,0,0.4); display: block; margin-bottom: 32px; }
.addr-btns { display: flex; gap: 10px; }

/* ── TEAM ── */
.team-section { background: var(--white); border-bottom: 3px solid var(--ink); }
.team-c { max-width: var(--w); margin: 0 auto; padding: 80px 60px; }
.team-hed { margin-bottom: 40px; }
.team-h2 { font-size: clamp(48px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.th-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.th-teal { display: block; color: var(--teal-dark); }
/* Featured slot */
.team-featured { display: grid; grid-template-columns: 300px 1fr; border: 3px solid var(--ink); margin-bottom: 3px; min-height: 200px; }
.team-featured-left { padding: 40px 36px; border-right: 3px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; background: var(--teal); transition: background 0.3s; }
.team-featured-name {
  font-weight: 800; letter-spacing: -0.02em; line-height: 0.9; color: var(--black); display: block;
  font-size: 56px;
  /* JS will shrink this if needed — no clipping */
}
.team-featured-role { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,0,0,0.5); display: block; margin-top: 8px; margin-bottom: 20px; }
.team-featured-tag { background: var(--black); color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 12px; display: inline-block; }
.team-featured-right { background: var(--black); padding: 36px 48px; display: flex; align-items: center; transition: background 0.3s; }
.team-featured-bio { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.65); line-height: 1.9; }
.team-featured-bio strong { color: var(--white); font-weight: 700; }
/* Grid cards */
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 3px solid var(--ink); border-top: none; }
.team-card { padding: 28px 26px; border-right: 1px solid var(--rule); position: relative; transition: all 0.2s; cursor: pointer; background: var(--white); }
.team-card:last-child { border-right: none; }
.team-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal-dark); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.team-card:hover { background: var(--off); }
.team-card:hover::before { transform: scaleX(1); }
.team-card.active { background: var(--teal); }
.team-card.active::before { transform: scaleX(1); background: var(--black); }
.team-card.active .tc-name { color: var(--black); }
.team-card.active .tc-role { color: rgba(0,0,0,0.55); }
.team-card.active .tc-tag-inner { background: var(--black); color: var(--teal); border-color: var(--black); }
.team-card.active .tc-bio { color: rgba(0,0,0,0.65); }
.tc-name { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); display: block; margin-bottom: 2px; transition: color 0.2s; }
.tc-role { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-dark); display: block; margin-bottom: 12px; transition: color 0.2s; }
.tc-tag-inner { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; padding: 5px 10px; margin-bottom: 10px; transition: all 0.2s; border: 1px solid transparent; }
.tag-teal  { background: rgba(168,204,207,0.25); color: var(--teal-dark); border-color: rgba(90,148,153,0.2); }
.tag-off   { background: var(--off); color: var(--mid); border-color: var(--rule); }
.tag-ink   { background: var(--ink); color: var(--white); }
.tc-bio { font-size: 12px; font-weight: 300; color: var(--mid); line-height: 1.65; transition: color 0.2s; }
/* Click hint */
.team-hint { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); text-align: right; margin-bottom: 12px; opacity: 0.6; }

/* ── PROOF + REVIEWS — merged ── */
.reviews-section { background: var(--black); border-bottom: 3px solid var(--ink); }
.reviews-c { max-width: var(--w); margin: 0 auto; }
/* Proof bar sits at top of reviews section, teal band */
.proof-bar {
  display: grid; grid-template-columns: repeat(4,1fr);
  background: var(--teal);
  border-bottom: 3px solid var(--ink);
}
.proof-bar-item { padding: 24px 36px; border-right: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; gap: 14px; }
.proof-bar-item:last-child { border-right: none; }
.pb-n { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--black); line-height: 1; flex-shrink: 0; }
.pb-n em { font-style: normal; font-size: 18px; }
.pb-label { font-size: 12px; font-weight: 600; color: rgba(0,0,0,0.55); line-height: 1.4; }
.reviews-c { max-width: var(--w); margin: 0 auto; }
.reviews-hed { padding: 52px 60px 40px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid rgba(255,255,255,0.07); }
.reviews-h2 { font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; color: var(--white); }
.rh-out  { display: block; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.3); }
.rh-teal { display: block; color: var(--teal); }
/* Big featured review */
.r-featured { padding: 52px 60px; border-bottom: 1px solid rgba(255,255,255,0.07); display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
.r-feat-stars { color: var(--gold); font-size: 16px; letter-spacing: 4px; display: block; margin-bottom: 20px; }
.r-feat-text { font-size: clamp(22px, 2.8vw, 34px); font-weight: 300; color: var(--white); line-height: 1.4; letter-spacing: -0.01em; }
.r-feat-text em { font-style: italic; color: var(--teal); }
.r-feat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.r-feat-name { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.r-feat-svc  { font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.25); }
/* Secondary reviews */
.r-secondary { display: grid; grid-template-columns: 1fr 1fr; }
.r-card { padding: 36px 44px; border-right: 1px solid rgba(255,255,255,0.06); border-top: 2px solid rgba(168,204,207,0.25); }
.r-card:last-child { border-right: none; }
.r-stars { color: var(--gold); font-size: 12px; letter-spacing: 3px; display: block; margin-bottom: 12px; }
.r-text { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.7; margin-bottom: 16px; }
.r-name { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); display: block; }
.r-svc  { font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.18); display: block; margin-top: 3px; }

/* ── FAQ — all teal, no divider ── */
.faq-section { background: var(--teal); border-bottom: 3px solid var(--ink); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--w); margin: 0 auto; }
.faq-left { padding: 80px 60px; display: flex; flex-direction: column; justify-content: space-between; }
.faq-right { padding: 80px 60px; }
.faq-h2 { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; color: var(--black); margin-bottom: 20px; }
.faq-quote { font-size: 16px; font-weight: 400; font-style: italic; color: rgba(0,0,0,0.5); line-height: 1.7; border-left: 3px solid rgba(0,0,0,0.25); padding-left: 16px; margin-bottom: 28px; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.faq-q { font-size: 14px; font-weight: 600; color: var(--black); padding: 17px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-icon { font-size: 20px; color: rgba(0,0,0,0.35); flex-shrink: 0; transition: transform 0.2s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { font-size: 13px; font-weight: 300; color: rgba(0,0,0,0.62); line-height: 1.8; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s; }
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 16px; }

/* ── CLOSING — book the good one left, reviews right ── */
.closing-section { border-bottom: 3px solid var(--ink); background: var(--white); position: relative; }
.closing-section::after { content:''; position:absolute; top:0; right:0; bottom:0; width:50%; background: var(--black); z-index:0; pointer-events:none; }
.closing-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--w); margin: 0 auto; position: relative; z-index: 1; }
.closing-left { background: var(--white); padding: 88px 60px; border-right: 3px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.closing-h2 { font-size: clamp(56px, 6.5vw, 88px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.88; color: var(--ink); }
.closing-stats { display: flex; gap: 36px; margin-top: 48px; }
.cs-n { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; display: block; }
.cs-n em { font-style: normal; font-size: 20px; color: var(--teal-dark); }
.cs-l { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); display: block; margin-top: 3px; }
/* Right panel = reviews on black */
.closing-right { background: var(--black); padding: 60px 60px; display: flex; flex-direction: column; justify-content: center; gap: 0; }
/* Featured review */
.cr-feat-stars { color: var(--gold); font-size: 14px; letter-spacing: 3px; display: block; margin-bottom: 16px; }
.cr-feat-text { font-size: clamp(18px, 2vw, 26px); font-weight: 300; color: var(--white); line-height: 1.45; letter-spacing: -0.01em; margin-bottom: 16px; }
.cr-feat-text em { font-style: italic; color: var(--teal); }
.cr-feat-name { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); display: block; }
.cr-feat-svc  { font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.25); display: block; margin-top: 2px; margin-bottom: 32px; }
/* Divider */
.cr-divider { height: 1px; background: rgba(255,255,255,0.08); margin-bottom: 28px; }
/* Two secondary reviews side by side */
.cr-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cr-card-stars { color: var(--gold); font-size: 11px; letter-spacing: 2px; display: block; margin-bottom: 10px; }
.cr-card-text { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.65; margin-bottom: 12px; }
.cr-card-name { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); display: block; }
.cr-card-svc  { font-size: 10px; font-weight: 300; color: rgba(255,255,255,0.2); display: block; margin-top: 2px; }
/* Google link */
.cr-google { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 1px; margin-top: 28px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; align-self: flex-start; }
.cr-google:hover { color: var(--white); border-color: var(--white); }
.btn-closing { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 18px 40px; background: var(--teal); color: var(--black); text-decoration: none; border: 2px solid var(--teal); display: inline-flex; align-items: center; gap: 10px; transition: all 0.15s; }
.btn-closing:hover { background: var(--white); border-color: var(--white); }

/* ── TRUST BAR ── */
.trust-bar { background: var(--black); border-bottom: 3px solid var(--ink); }
.trust-bar-c { max-width: var(--w); margin: 0 auto; display: flex; align-items: center; padding: 0 60px; }
.trust-item { display: flex; flex-direction: column; padding: 18px 32px; flex: 1; }
.trust-n { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--white); line-height: 1; display: block; margin-bottom: 3px; }
.trust-n em { font-style: normal; font-size: 14px; color: var(--teal); }
.trust-star { color: var(--gold); font-size: 16px; }
.trust-l { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.trust-div { width: 1px; height: 40px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

/* ── INSTAGRAM DESC ── */
.ig-desc { font-size: 13px; font-weight: 300; color: var(--mid); margin-top: 8px; max-width: 480px; }

/* ── BEFORE / AFTER ── */
.ba-section { background: var(--white); border-bottom: 3px solid var(--ink); }
.ba-c { max-width: var(--w); margin: 0 auto; }
.ba-hed { padding: 52px 60px 40px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid var(--ink); }
.ba-h2 { font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.ba-out  { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.ba-teal { color: var(--teal-dark); }
.ba-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.ba-card { border-right: 3px solid var(--ink); }
.ba-card:last-child { border-right: none; }
.ba-images { display: grid; grid-template-columns: 1fr 3px 1fr; height: 280px; }
.ba-img { background-size: cover; background-position: center; position: relative; overflow: hidden; }
.ba-divider-v { background: var(--ink); }
.ba-label { position: absolute; top: 10px; left: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.5); padding: 3px 8px; }
.ba-label-after { left: auto; right: 10px; background: rgba(90,148,153,0.8); }
.ba-meta { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); }
.ba-service { font-size: 13px; font-weight: 700; color: var(--ink); }
.ba-stylist { font-size: 11px; font-weight: 400; color: var(--mid); }
.instagram-section { background: var(--white); border-bottom: 3px solid var(--ink); }
.instagram-c { max-width: var(--w); margin: 0 auto; }
.instagram-hed { padding: 48px 60px 36px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid var(--ink); }
.instagram-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.ig-out  { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.ig-teal { color: var(--teal-dark); }
.instagram-handle { font-size: 13px; font-weight: 700; color: var(--teal-dark); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: color 0.15s; letter-spacing: 0.04em; }
.instagram-handle:hover { color: var(--ink); }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.ig-cell { aspect-ratio: 1; overflow: hidden; position: relative; border-right: 3px solid var(--ink); cursor: pointer; }
.ig-cell:last-child { border-right: none; }
.ig-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.ig-cell:hover .ig-img { transform: scale(1.08); }
.ig-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0); transition: background 0.3s; display: flex; align-items: center; justify-content: center; }
.ig-cell:hover .ig-overlay { background: rgba(10,10,10,0.45); }
.ig-icon { opacity: 0; transition: opacity 0.3s; color: white; font-size: 22px; }
.ig-cell:hover .ig-icon { opacity: 1; }

/* ── ADDRESS — now includes map + door image ── */
.address-side { background: var(--teal); display: flex; flex-direction: column; }
.address-images { display: grid; grid-template-columns: 1fr 1fr; height: 200px; border-bottom: 2px solid rgba(0,0,0,0.15); }
.address-map { border-right: 1px solid rgba(0,0,0,0.15); overflow: hidden; }
.address-map iframe { width: 100%; height: 100%; border: none; display: block; }
.address-door { overflow: hidden; position: relative; }
.address-door-img { width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=400&q=80') center/cover no-repeat; transition: transform 0.5s ease; }
.address-door:hover .address-door-img { transform: scale(1.05); }
.address-door-label { position: absolute; bottom: 8px; left: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.75); background: rgba(0,0,0,0.45); padding: 3px 8px; }
.address-content { padding: 36px 60px 40px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.address-h3 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; color: var(--black); margin-bottom: 12px; }
.address-side p { font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.6); line-height: 1.8; margin-bottom: 10px; }
.address-line { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,0,0,0.4); display: block; margin-bottom: 22px; }

/* ── TEAM CIRCLE PHOTOS ── */
.tc-photo { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; border: 3px solid var(--rule); background: var(--off); transition: border-color 0.2s; }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card:hover .tc-photo { border-color: var(--teal-dark); }
.team-card.active .tc-photo { border-color: var(--black); }
/* Featured left circle */
.tf-photo-wrap { margin-bottom: 12px; }
.tf-photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(0,0,0,0.15); background: rgba(0,0,0,0.1); }
.tf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── BLOG FEED ── */
.blog-section { background: var(--off); border-bottom: 3px solid var(--ink); }
.blog-c { max-width: var(--w); margin: 0 auto; }
.blog-hed { padding: 48px 60px 36px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid var(--ink); }
.blog-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.bh-out  { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.bh-teal { color: var(--teal-dark); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.blog-card { padding: 32px 36px; border-right: 1px solid var(--rule); background: var(--off); text-decoration: none; display: flex; flex-direction: column; transition: background 0.2s; position: relative; overflow: hidden; }
.blog-card:last-child { border-right: none; }
.blog-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--teal-dark); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.blog-card:hover { background: var(--white); }
.blog-card:hover::after { transform: scaleX(1); }
.blog-card:hover .blog-title { color: var(--teal-dark); }
.blog-img { width: 100%; height: 160px; background-size: cover; background-position: center; margin-bottom: 20px; border: 1px solid var(--rule); }
.blog-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.blog-cat  { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-dark); }
.blog-date { font-size: 10px; font-weight: 400; color: var(--mid); }
.blog-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; margin-bottom: 10px; transition: color 0.2s; }
.blog-excerpt { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.7; flex: 1; }
.blog-read { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* ── BRAND LOGOS — white, centred ── */
.brands-section { background: var(--black); border-bottom: 3px solid var(--ink); }
.brands-static { max-width: var(--w); margin: 0 auto; padding: 36px 60px; display: flex; align-items: center; justify-content: center; gap: 0; }
.brands-logos { display: flex; align-items: center; gap: 0; }
.brand-showcase-img { height: 44px; width: auto; opacity: 0.75; filter: brightness(0) invert(1); }
.brand-logo-item { display: flex; flex-direction: column; align-items: center; padding: 8px 60px; }
.brand-logo-name { font-size: 22px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.brand-logo-sub { font-size: 10px; font-weight: 400; letter-spacing: 0.1em; color: rgba(255,255,255,0.2); margin-top: 4px; }
.brand-logo-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.12); flex-shrink: 0; }

/* ── FOOTER ── */
footer { background: var(--black); border-top: 3px solid var(--ink); }
.footer-c { max-width: var(--w); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.07); }
.footer-col { padding: 48px 44px; border-right: 1px solid rgba(255,255,255,0.07); }
.footer-col:last-child { border-right: none; }
.f-logo { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--white); display: block; margin-bottom: 4px; }
.f-logo span { color: var(--teal); }
.f-sub { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.18); display: block; margin-bottom: 16px; }
.f-about { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.28); line-height: 1.85; max-width: 230px; margin-bottom: 22px; }
.f-social { display: flex; gap: 8px; }
.f-soc { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.45); text-decoration: none; transition: all 0.15s; }
.f-soc:hover { border-color: var(--teal); color: var(--teal); }
.f-soc svg { width: 16px; height: 16px; fill: currentColor; }
.f-col-title { font-size: 9px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.f-link { display: block; font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.35); text-decoration: none; line-height: 2.2; transition: color 0.15s; }
.f-link:hover { color: var(--white); }
.f-text { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.42); display: block; line-height: 1.9; }
.f-hr { display: flex; justify-content: space-between; margin-bottom: 4px; }
.f-hday { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.28); }
.f-htime { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.48); }
.brand-strip { padding: 22px 44px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 12px; }
.brand-strip-label { font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.18); margin-right: 8px; flex-shrink: 0; }
.brand-logo { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 9px 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); display: flex; align-items: center; gap: 8px; }
.brand-logo span { font-size: 9px; font-weight: 400; color: rgba(255,255,255,0.16); }
.brand-logo-img { height: 28px; width: auto; margin: 0 18px; opacity: 0.65; filter: brightness(0) invert(1); }
.footer-bottom { padding: 14px 44px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.04); }
.f-copy { font-size: 10px; color: rgba(255,255,255,0.16); }
.f-copy a { color: var(--teal); text-decoration: none; }
.f-locs { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.1); }
.f-locs a { color: rgba(255,255,255,0.55); text-decoration: none; }
.f-locs a:hover { color: #fff; }

/* ── WISTERIA ── */
.vine { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vm  { stroke:#3a7a5a; stroke-width:1.8; stroke-opacity:0.6; stroke-dasharray:700; stroke-dashoffset:700; animation:dv 2.8s ease forwards 0.3s; }
.vb1 { stroke:#3a7a5a; stroke-width:1.4; stroke-opacity:0.5; stroke-dasharray:420; stroke-dashoffset:420; animation:dv 2.2s ease forwards 0.8s; }
.vb2 { stroke:#3a7a5a; stroke-width:1.1; stroke-opacity:0.38; stroke-dasharray:320; stroke-dashoffset:320; animation:dv 2s ease forwards 1.2s; }
.vb3 { stroke:#3a7a5a; stroke-width:1; stroke-opacity:0.3; stroke-dasharray:240; stroke-dashoffset:240; animation:dv 1.8s ease forwards 1.5s; }
@keyframes dv { to{stroke-dashoffset:0} }
.lf { fill:#2a5a3a; opacity:0; animation:li 0.4s ease forwards; }
@keyframes li { to{opacity:0.48} }
.cl { opacity:0; transform-origin:top center; animation:bc 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes bc { from{opacity:0;transform:scale(0.1)} to{opacity:1;transform:scale(1)} }
.sw  { animation:sw 4.5s ease-in-out infinite; transform-origin:top center; }
.sw2 { animation:sw 5.5s ease-in-out infinite 0.7s; transform-origin:top center; }
.sw3 { animation:sw 3.8s ease-in-out infinite 1.2s; transform-origin:top center; }
@keyframes sw { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
.pf { animation:pfall linear infinite; opacity:0; }
@keyframes pfall { 0%{opacity:0;transform:translateY(0) rotate(0deg)} 8%{opacity:0.55} 92%{opacity:0.15} 100%{opacity:0;transform:translateY(90px) rotate(200deg) translateX(18px)} }

/* ════════════════════════════════════════════════════════════════════
   GROUPED DROPDOWNS — About + Hair Services
   Both menus styled identically (boutique soft, Option 3) with
   position-based group headers.

   ⚠ MAINTENANCE WARNING — the group headers are inserted *by item position*,
   not by item identity. If you reorder, add, or remove items in either
   menu in WordPress (Appearance → Menus), the group headers will land
   on the wrong items. After any menu edit, re-verify position rules below.

   Current expected order (May 2026):
   ABOUT menu (9 items):
     1 FAQ's · 2 Autism · 3 Silent Hair Appts · 4 About
     5 Reviews · 6 Salon Hire · 7 Vacancies · 8 Blog · 9 Gift Vouchers
   HAIR SERVICES menu (10 items):
     1 Balayage · 2 Highlights · 3 Tints
     4 Curly Hair · 5 Haircuts & Styles · 6 Perms
     7 Men's Hair · 8 Men's Hair Replacement Systems
     9 Hair Extensions · 10 Hair Smoothing
   ════════════════════════════════════════════════════════════════════ */

/* Override the mega-menu so Hair Services uses the same dropdown as About */
.nav-links > ul > li.mega-parent { position: relative !important; }
.nav-links > ul > li.mega-parent > ul.sub-menu {
  position: absolute !important; top: calc(100% + 3px) !important; left: 0 !important;
  width: auto !important; min-width: 240px !important;
  background: var(--white, #F8F6F2) !important;
  border: 3px solid var(--ink, #111) !important;
  display: block !important;
  padding: 8px 0 !important;
  grid-template-columns: none !important;
}
.nav-links > ul > li.mega-parent > ul.sub-menu > li {
  display: block !important;
  border-right: none !important;
  width: auto !important;
}
.nav-links > ul > li.mega-parent > ul.sub-menu > li > a {
  display: block !important;
  padding: 11px 22px !important;
  background: transparent !important;
  color: var(--mid, #666) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.nav-links > ul > li.mega-parent > ul.sub-menu > li > a:hover {
  color: var(--ink, #111) !important;
  background: rgba(168, 204, 207, 0.15) !important;
  padding-left: 28px !important;
}
/* Hide mega-menu decorative spans (numbers, arrows, descriptions) */
.nav-links > ul > li.mega-parent .menu-item-num,
.nav-links > ul > li.mega-parent .menu-item-desc,
.nav-links > ul > li.mega-parent .menu-item-arrow,
.nav-links > ul > li.mega-parent > ul.sub-menu > li > a::before { display: none !important; }

/* Tighten the standard dropdown padding to make room for group headers */
.nav-links > ul > li.menu-item-has-children > ul.sub-menu { padding: 8px 0 !important; }
.nav-links > ul > li.menu-item-has-children > ul.sub-menu > li > a {
  padding: 11px 22px !important;
  border-bottom: none !important;
}

/* Group header — shared style for both dropdowns */
.nav-links > ul > li.menu-item-has-children > ul.sub-menu > li.group-header::before,
.nav-links > ul > li.mega-parent > ul.sub-menu > li.group-header::before {
  content: attr(data-group);
  display: block;
  padding: 12px 22px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* No top padding on the first group header (it's already at the dropdown top) */
.nav-links > ul > li.menu-item-has-children > ul.sub-menu > li:first-child.group-header::before,
.nav-links > ul > li.mega-parent > ul.sub-menu > li:first-child.group-header::before {
  padding-top: 4px;
}

/* ── ABOUT menu — group headers via :nth-child positions ── */
.nav-links #menu-primary-menu > li.menu-item-has-children:not(.mega-parent) > ul.sub-menu > li:nth-child(1)::before {
  content: 'Information';
}
.nav-links #menu-primary-menu > li.menu-item-has-children:not(.mega-parent) > ul.sub-menu > li:nth-child(4)::before {
  content: 'About Us';
}
.nav-links #menu-primary-menu > li.menu-item-has-children:not(.mega-parent) > ul.sub-menu > li:nth-child(7)::before {
  content: 'More';
}
.nav-links #menu-primary-menu > li.menu-item-has-children:not(.mega-parent) > ul.sub-menu > li:nth-child(1)::before,
.nav-links #menu-primary-menu > li.menu-item-has-children:not(.mega-parent) > ul.sub-menu > li:nth-child(4)::before,
.nav-links #menu-primary-menu > li.menu-item-has-children:not(.mega-parent) > ul.sub-menu > li:nth-child(7)::before {
  display: block;
  padding: 12px 22px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.nav-links #menu-primary-menu > li.menu-item-has-children:not(.mega-parent) > ul.sub-menu > li:nth-child(1)::before {
  padding-top: 4px;
}

/* ── HAIR SERVICES menu — group headers via :nth-child positions ──
   ⚠ REQUIRES this exact WordPress menu order (10 items):
     1 Balayage · 2 Highlights · 3 Tints              → Colours
     4 Haircuts & Styles · 5 Curly Hair               → Ladies Haircutting
     6 Men's Hair Replacement Systems · 7 Men's Hair  → Men's Services
     8 Perms · 9 Hair Extensions · 10 Hair Smoothing  → Specialist Services
   If you reorder the menu, these nth-child numbers must be updated to match. */
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(1)::before {
  content: 'Colours';
}
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(4)::before {
  content: 'Ladies Haircutting';
}
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(6)::before {
  content: "Men's Services";
}
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(8)::before {
  content: 'Specialist Services';
}
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(1)::before,
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(4)::before,
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(6)::before,
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(8)::before {
  display: block;
  padding: 12px 22px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.nav-links #menu-primary-menu > li.mega-parent > ul.sub-menu > li:nth-child(1)::before {
  padding-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   BLOG ARCHIVE — used by archive.php (blog index, category, tag pages)
   ════════════════════════════════════════════════════════════════════ */
.blog-archive { background: var(--off, #efefeb); border-bottom: 3px solid var(--ink, #111); }
.blog-archive-c { max-width: var(--w, 1380px); margin: 0 auto; padding: 72px 60px; }
.blog-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }

.blog-archive-card {
  display: flex; flex-direction: column;
  background: var(--white, #F8F6F2);
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.blog-archive-card:hover { border-color: var(--teal-deep, #2E747B); }

.blog-archive-img {
  width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden; background: rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
}
.blog-archive-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-archive-img-fallback {
  background: linear-gradient(135deg, var(--teal, #A8CCCF) 0%, var(--teal-dark, #5A9499) 100%);
  position: relative;
}
.blog-archive-img-fallback::after {
  content: '✂'; font-size: 48px; color: rgba(255,255,255,0.35);
}

.blog-archive-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.blog-archive-cat {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal-deep, #2E747B);
}
.blog-archive-title {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink, #111); line-height: 1.3;
}
.blog-archive-excerpt {
  font-size: 13px; font-weight: 300; color: rgba(0,0,0,0.62);
  line-height: 1.7; margin: 0;
}
.blog-archive-read {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal-deep, #2E747B);
  margin-top: 4px;
}

.blog-archive-pagination { margin-top: 56px; display: flex; justify-content: center; }
.blog-archive-pagination .nav-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.blog-archive-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid, #666); text-decoration: none;
  background: var(--white, #F8F6F2); border: 1px solid rgba(0,0,0,0.1);
  transition: all 0.15s;
}
.blog-archive-pagination .page-numbers:hover { color: var(--ink, #111); border-color: var(--ink, #111); }
.blog-archive-pagination .page-numbers.current {
  background: var(--ink, #111); color: var(--white, #F8F6F2); border-color: var(--ink, #111);
}
.blog-archive-pagination .page-numbers.dots { border: none; background: transparent; }

.blog-archive-empty { text-align: center; padding: 80px 0; color: var(--mid, #666); font-size: 14px; }

/* Responsive — collapse to 2 then 1 column */
@media (max-width: 980px) {
  .blog-archive-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-archive-c { padding: 48px 32px; }
}
@media (max-width: 640px) {
  .blog-archive-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT PAGE — used by page-about.php
   Structure: hero → story (with signature) → 4-point guarantee → gallery → CTA
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ── same family as Services hero ── */
.about-hero {
  position: relative; height: 44vh; min-height: 300px; max-height: 440px;
  display: flex; align-items: flex-end;
  border-bottom: 3px solid var(--ink, #111); overflow: hidden;
}
.about-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%; background-repeat: no-repeat;
}
.about-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to top, rgba(10,10,10,0.55) 0%, transparent 60%);
}
.about-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--w, 1380px); margin: 0 auto; width: 100%;
  padding: 0 60px 52px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
}
.about-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal, #A8CCCF);
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.about-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--teal, #A8CCCF); display: block;
}
.about-h1 {
  font-size: clamp(44px, 5.5vw, 72px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9;
}
.ah1-outline { display: block; color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.ah1-white { display: block; color: var(--white, #F8F6F2); }
.ah1-teal { display: block; color: var(--teal, #A8CCCF); }

.about-hero-stats { display: flex; gap: 3px; flex-shrink: 0; }
.ahs-pill {
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 14px 20px; backdrop-filter: blur(8px);
}
.ahs-n { font-size: 18px; font-weight: 800; color: var(--white, #F8F6F2); display: block; line-height: 1; }
.ahs-l {
  font-size: 9px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  display: block; margin-top: 3px;
}

/* ── STORY ── single-column centred prose with signature ── */
.about-story {
  background: var(--white, #F8F6F2);
  border-bottom: 3px solid var(--ink, #111);
}
.about-story-c {
  max-width: 820px; margin: 0 auto;
  padding: 88px 60px;
}
.about-story-text { display: flex; flex-direction: column; gap: 28px; }
.about-story-h2 {
  font-size: clamp(40px, 4.5vw, 60px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9;
}
.ash-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.ash-teal { display: block; color: var(--teal-dark, #5A9499); }
.ash-ink { display: block; color: var(--ink, #111); }
.about-story-body {
  font-size: 16px; font-weight: 300; line-height: 1.9;
  color: var(--mid, #555); display: flex; flex-direction: column; gap: 18px;
}
.about-story-body strong { color: var(--ink, #111); font-weight: 700; }

.about-signature {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; margin-top: 12px;
  padding-top: 28px; border-top: 1px solid var(--rule, #DEDAD4);
}
.about-signature img {
  height: 64px; width: auto; max-width: 220px; display: block;
}
.about-signature-name {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(0,0,0,0.45);
}

/* ── FOUR-POINT GUARANTEE ── dark section with bright numbered cards ── */
.about-guarantee {
  background: var(--black, #0C0C0C);
  border-bottom: 3px solid var(--ink, #111);
}
.about-guarantee-c { max-width: var(--w, 1380px); margin: 0 auto; }
.about-guarantee-hed {
  padding: 64px 60px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.about-guarantee-h2 {
  font-size: clamp(36px, 4vw, 52px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9; margin-top: 8px;
}
.agh-out { display: block; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.35); }
.agh-teal { display: block; color: var(--teal, #A8CCCF); }

.about-guarantee-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.about-guarantee-card {
  padding: 48px 40px;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 14px;
}
.about-guarantee-card:last-child { border-right: none; }
.agc-num {
  font-size: 56px; font-weight: 800;
  color: var(--teal, #A8CCCF);
  letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 8px;
}
.agc-title {
  font-size: 18px; font-weight: 800;
  color: var(--white, #F8F6F2); line-height: 1.3;
}
.agc-desc {
  font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,0.55); line-height: 1.75;
  margin: 0;
}

/* ── INSIDE THE SALON GALLERY ── 5-cell asymmetric grid ── */
.about-gallery {
  background: var(--white, #F8F6F2);
  border-bottom: 3px solid var(--ink, #111);
}
.about-gallery-c { max-width: var(--w, 1380px); margin: 0 auto; }
.about-gallery-hed {
  padding: 56px 60px 36px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  border-bottom: 3px solid var(--ink, #111);
}
.about-gallery-h2 {
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9; margin-top: 8px;
}
.agalh-out { color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.agalh-teal { color: var(--teal-dark, #5A9499); }

/* 6-cell asymmetric mosaic: 4-column grid, 2 rows.
   Top row:    [wide·2col][normal][normal]
   Bottom row: [normal][normal][wide·2col]
   Alternating widths give an editorial, deliberately-composed feel. */
.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 440px 320px;
  gap: 0;
}
.about-gallery-cell {
  overflow: hidden; position: relative;
  border-right: 3px solid var(--ink, #111);
  border-bottom: 3px solid var(--ink, #111);
}
/* Top row */
.about-gallery-cell:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.about-gallery-cell:nth-child(2) { grid-column: 3; grid-row: 1; }
.about-gallery-cell:nth-child(3) { grid-column: 4; grid-row: 1; border-right: none; }
/* Bottom row */
.about-gallery-cell:nth-child(4) { grid-column: 1; grid-row: 2; border-bottom: none; }
.about-gallery-cell:nth-child(5) { grid-column: 2; grid-row: 2; border-bottom: none; }
.about-gallery-cell:nth-child(6) { grid-column: 3 / span 2; grid-row: 2; border-right: none; border-bottom: none; }

.about-gallery-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.about-gallery-cell:hover .about-gallery-img { transform: scale(1.05); }

/* ── BOOKING CTA STRIP ── teal band ── */
.about-cta {
  background: var(--teal, #A8CCCF);
  border-bottom: 3px solid var(--ink, #111);
}
.about-cta-c {
  max-width: var(--w, 1380px); margin: 0 auto;
  padding: 56px 60px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px;
}
.about-cta-h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--black, #0C0C0C);
  margin-top: 6px;
}
.about-cta-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .about-guarantee-grid { grid-template-columns: repeat(2, 1fr); }
  .about-guarantee-card:nth-child(1),
  .about-guarantee-card:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .about-guarantee-card:nth-child(2) { border-right: none; }
  .about-guarantee-card:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.07); }
}
@media (max-width: 820px) {
  .about-hero-inner { flex-direction: column; align-items: flex-start; padding: 0 32px 40px; }
  .about-hero-stats { display: none; }
  .about-story-c { padding: 64px 32px; }
  .about-guarantee-hed { padding: 48px 32px 36px; }
  .about-guarantee-grid { grid-template-columns: 1fr; }
  .about-guarantee-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .about-guarantee-card:last-child { border-bottom: none; }
  .about-gallery-hed { flex-direction: column; align-items: flex-start; padding: 40px 32px 28px; }
  .about-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 240px);
  }
  .about-gallery-cell {
    grid-column: 1; border-right: none;
    border-bottom: 3px solid var(--ink, #111);
  }
  .about-gallery-cell:nth-child(6) { border-bottom: none; }
  .about-cta-c { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   CANCELLATION & BOOKING POLICY — used by page-cancellation-policy.php
   Structure: hero → intro → accordion policy body → contact CTA
   Accordion reuses .faq-item / .faq-q / .faq-a classes — site-wide JS handles toggling
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.policy-hero {
  position: relative; height: 44vh; min-height: 300px; max-height: 440px;
  display: flex; align-items: flex-end;
  border-bottom: 3px solid var(--ink, #111); overflow: hidden;
}
.policy-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%; background-repeat: no-repeat;
}
.policy-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to top, rgba(10,10,10,0.55) 0%, transparent 60%);
}
.policy-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--w, 1380px); margin: 0 auto; width: 100%;
  padding: 0 60px 52px;
}
.policy-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal, #A8CCCF);
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.policy-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--teal, #A8CCCF); display: block;
}
.policy-h1 {
  font-size: clamp(40px, 5vw, 64px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9;
}
.ph1-outline { display: block; color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.ph1-white { display: block; color: var(--white, #F8F6F2); }
.ph1-teal { display: block; color: var(--teal, #A8CCCF); }

/* ── INTRO ── */
.policy-intro {
  background: var(--white, #F8F6F2);
  border-bottom: 3px solid var(--ink, #111);
}
.policy-intro-c {
  max-width: 820px; margin: 0 auto;
  padding: 72px 60px;
  display: flex; flex-direction: column; gap: 20px;
}
.policy-intro-h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
}
.pih-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.pih-ink { display: block; color: var(--ink, #111); }
.policy-intro-body {
  font-size: 16px; font-weight: 300; line-height: 1.9;
  color: var(--mid, #555);
  display: flex; flex-direction: column; gap: 16px;
}
.policy-intro-body a {
  color: var(--teal-deep, #2E747B); text-decoration: none;
  border-bottom: 1.5px solid var(--teal-deep, #2E747B);
}
.policy-intro-body a:hover { color: var(--ink, #111); border-color: var(--ink, #111); }

/* ── POLICY BODY (accordion) ── */
.policy-body {
  background: var(--off, #efefeb);
  border-bottom: 3px solid var(--ink, #111);
}
.policy-body-c {
  max-width: 860px; margin: 0 auto;
  padding: 72px 60px;
}
.policy-body-h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.95;
  margin-top: 6px; margin-bottom: 36px;
}
.pbh-out { display: inline-block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); margin-right: 12px; }
.pbh-teal { display: inline-block; color: var(--teal-dark, #5A9499); }

.policy-accordion {
  background: var(--white, #F8F6F2);
  border: 3px solid var(--ink, #111);
}
.policy-item {
  border-bottom: 1px solid var(--rule, #DEDAD4);
}
.policy-item:last-child { border-bottom: none; }
.policy-item .faq-q {
  padding: 20px 28px;
  font-size: 15px; font-weight: 700;
  color: var(--ink, #111);
  background: var(--white, #F8F6F2);
}
.policy-item .faq-q:hover { background: rgba(168, 204, 207, 0.08); }
.policy-item.open .faq-q { background: rgba(168, 204, 207, 0.15); }
.policy-item .faq-a {
  padding: 0 28px;
  font-size: 14px; font-weight: 300;
  color: var(--mid, #555);
  line-height: 1.85;
}
.policy-item.open .faq-a { padding: 4px 28px 24px; max-height: 1200px; }
.policy-item .faq-a p { margin: 0 0 14px; }
.policy-item .faq-a p:last-child { margin-bottom: 0; }
.policy-item .faq-a strong { color: var(--ink, #111); font-weight: 700; }
.policy-item .faq-a a {
  color: var(--teal-deep, #2E747B); text-decoration: none;
  border-bottom: 1.5px solid var(--teal-deep, #2E747B);
}
.policy-item .faq-a a:hover { color: var(--ink, #111); border-color: var(--ink, #111); }

.policy-charges {
  list-style: none; padding: 0;
  margin: 4px 0 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.policy-charges li {
  padding: 12px 16px;
  background: var(--off, #efefeb);
  border-left: 3px solid var(--teal-dark, #5A9499);
  font-size: 14px;
}

/* ── CONTACT CTA ── teal band ── */
.policy-cta {
  background: var(--teal, #A8CCCF);
  border-bottom: 3px solid var(--ink, #111);
}
.policy-cta-c {
  max-width: var(--w, 1380px); margin: 0 auto;
  padding: 56px 60px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px;
}
.policy-cta-h2 {
  font-size: clamp(26px, 2.8vw, 36px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--black, #0C0C0C);
  margin-top: 6px;
}
.policy-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .policy-hero-inner { padding: 0 32px 40px; }
  .policy-intro-c { padding: 56px 32px; }
  .policy-body-c { padding: 56px 24px; }
  .policy-item .faq-q,
  .policy-item.open .faq-a { padding-left: 20px; padding-right: 20px; }
  .policy-cta-c { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   CONTACT PAGE — used by page-contact.php
   hero → details + CF7 form → (reuses homepage .logistics-section)
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.contact-hero {
  position: relative; height: 44vh; min-height: 300px; max-height: 440px;
  display: flex; align-items: flex-end;
  border-bottom: 3px solid var(--ink, #111); overflow: hidden;
}
.contact-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%; background-repeat: no-repeat;
}
.contact-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to top, rgba(10,10,10,0.55) 0%, transparent 60%);
}
.contact-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--w, 1380px); margin: 0 auto; width: 100%;
  padding: 0 60px 52px;
}
.contact-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal, #A8CCCF);
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.contact-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--teal, #A8CCCF); display: block;
}
.contact-h1 {
  font-size: clamp(40px, 5vw, 64px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9;
}
.ch1-outline { display: block; color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.ch1-white { display: block; color: var(--white, #F8F6F2); }
.ch1-teal { display: block; color: var(--teal, #A8CCCF); }

/* ── MAIN: details + form ── */
.contact-main {
  background: var(--white, #F8F6F2);
  border-bottom: 3px solid var(--ink, #111);
}
.contact-main-grid {
  max-width: var(--w, 1380px); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr;
}
.contact-details {
  padding: 72px 60px;
  border-right: 3px solid var(--ink, #111);
}
.contact-details-h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; margin-top: 8px; margin-bottom: 20px;
}
.cdh-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.cdh-teal { display: block; color: var(--teal-dark, #5A9499); }
.contact-details-intro {
  font-size: 15px; font-weight: 300; line-height: 1.8;
  color: var(--mid, #555); margin-bottom: 36px;
}
.contact-method {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 0; border-bottom: 1px solid var(--rule, #DEDAD4);
}
.contact-method:last-child { border-bottom: none; }
.cm-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal-dark, #5A9499);
}
.cm-value {
  font-size: 18px; font-weight: 700; color: var(--ink, #111);
  text-decoration: none; transition: color 0.15s;
}
a.cm-value:hover { color: var(--teal-dark, #5A9499); }
.cm-value-plain { font-weight: 400; font-size: 16px; line-height: 1.5; }

/* ── FORM SIDE ── */
.contact-form-wrap {
  padding: 72px 60px;
  background: var(--off, #efefeb);
}
.contact-form-h3 {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink, #111); margin-top: 6px; margin-bottom: 10px;
}
.contact-form-note {
  font-size: 14px; font-weight: 300; color: var(--mid, #555);
  line-height: 1.7; margin-bottom: 28px;
}

/* CF7 field styling to match the site */
.contact-form-cf7 label {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink, #111); margin-bottom: 20px;
}
.contact-form-cf7 input[type="text"],
.contact-form-cf7 input[type="email"],
.contact-form-cf7 input[type="tel"],
.contact-form-cf7 input[type="number"],
.contact-form-cf7 select,
.contact-form-cf7 textarea {
  display: block; width: 100%; margin-top: 8px;
  padding: 13px 16px; font-size: 15px; font-weight: 400;
  font-family: inherit; color: var(--ink, #111);
  background: var(--white, #F8F6F2);
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 0; transition: border-color 0.15s;
  text-transform: none; letter-spacing: 0;
}
.contact-form-cf7 input:focus,
.contact-form-cf7 select:focus,
.contact-form-cf7 textarea:focus {
  outline: none; border-color: var(--teal-dark, #5A9499);
}
.contact-form-cf7 textarea { min-height: 120px; resize: vertical; }
.contact-form-cf7 input[type="submit"] {
  width: auto; margin-top: 8px; cursor: pointer;
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 15px 36px;
  background: var(--ink, #111); color: var(--white, #F8F6F2);
  border: 2px solid var(--ink, #111); transition: all 0.15s;
}
.contact-form-cf7 input[type="submit"]:hover {
  background: var(--teal, #A8CCCF); color: var(--black, #0C0C0C);
  border-color: var(--teal, #A8CCCF);
}
/* CF7 validation + response messaging */
.contact-form-cf7 .wpcf7-not-valid-tip {
  font-size: 12px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: #b00; margin-top: 4px;
}
.contact-form-cf7 .wpcf7-response-output {
  font-size: 14px; font-weight: 400; text-transform: none;
  letter-spacing: 0; margin: 24px 0 0; padding: 14px 18px;
  border-width: 2px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .contact-main-grid { grid-template-columns: 1fr; }
  .contact-details { border-right: none; border-bottom: 3px solid var(--ink, #111); }
}
@media (max-width: 820px) {
  .contact-hero-inner { padding: 0 32px 40px; }
  .contact-details, .contact-form-wrap { padding: 56px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   FAQ PAGE — used by page-faq.php
   hero → grouped accordion → contact CTA
   Accordion reuses .faq-item / .faq-q / .faq-a — site-wide JS handles toggling
   .faq-a-tall raises the open height cap for long multi-paragraph answers
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.faq-hero {
  position: relative; height: 44vh; min-height: 300px; max-height: 440px;
  display: flex; align-items: flex-end;
  border-bottom: 3px solid var(--ink, #111); overflow: hidden;
}
.faq-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%; background-repeat: no-repeat;
}
.faq-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to top, rgba(10,10,10,0.55) 0%, transparent 60%);
}
.faq-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--w, 1380px); margin: 0 auto; width: 100%;
  padding: 0 60px 48px;
}
.faq-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal, #A8CCCF);
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.faq-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--teal, #A8CCCF); display: block;
}
.faq-h1 {
  font-size: clamp(44px, 5.5vw, 72px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9;
}
.fh1-outline { display: block; color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.fh1-white { display: block; color: var(--white, #F8F6F2); }
.fh1-teal { display: block; color: var(--teal, #A8CCCF); }

/* ── PAGE BODY ── */
.faq-page {
  background: var(--off, #efefeb);
  border-bottom: 3px solid var(--ink, #111);
}
.faq-page-c {
  max-width: 880px; margin: 0 auto;
  padding: 72px 60px;
}
.faq-group { margin-bottom: 48px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink, #111); margin-bottom: 20px;
  display: flex; align-items: baseline; gap: 14px;
}
.fgh-num {
  font-size: 13px; font-weight: 800; color: var(--teal-dark, #5A9499);
  letter-spacing: 0.08em;
}
.faq-accordion {
  background: var(--white, #F8F6F2);
  border: 3px solid var(--ink, #111);
}
.faq-page-item {
  border-bottom: 1px solid var(--rule, #DEDAD4);
}
.faq-page-item:last-child { border-bottom: none; }
.faq-page-item .faq-q {
  padding: 20px 26px;
  font-size: 15px; font-weight: 700;
  color: var(--ink, #111);
}
.faq-page-item .faq-q:hover { background: rgba(168, 204, 207, 0.08); }
.faq-page-item.open .faq-q { background: rgba(168, 204, 207, 0.15); }
.faq-page-item .faq-a {
  padding: 0 26px;
  font-size: 14px; font-weight: 300; color: var(--mid, #555);
  line-height: 1.85;
}
/* Tall variant for long multi-paragraph answers */
.faq-page-item.open .faq-a-tall {
  max-height: 900px;
  padding: 4px 26px 22px;
}
.faq-page-item .faq-a p { margin: 0 0 13px; }
.faq-page-item .faq-a p:last-child { margin-bottom: 0; }
.faq-page-item .faq-a a {
  color: var(--teal-deep, #2E747B); text-decoration: none;
  border-bottom: 1.5px solid var(--teal-deep, #2E747B);
}
.faq-page-item .faq-a a:hover { color: var(--ink, #111); border-color: var(--ink, #111); }

/* ── CONTACT CTA ── */
.faq-cta {
  background: var(--teal, #A8CCCF);
  border-bottom: 3px solid var(--ink, #111);
}
.faq-cta-c {
  max-width: var(--w, 1380px); margin: 0 auto;
  padding: 56px 60px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px;
}
.faq-cta-h2 {
  font-size: clamp(26px, 2.8vw, 36px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--black, #0C0C0C);
  margin-top: 6px;
}
.faq-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .faq-hero-inner { padding: 0 32px 36px; }
  .faq-page-c { padding: 56px 24px; }
  .faq-page-item .faq-q,
  .faq-page-item.open .faq-a-tall { padding-left: 20px; padding-right: 20px; }
  .faq-cta-c { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   GIFT VOUCHERS — used by page-gift-vouchers.php
   hero → intro+CTA → how it works (4 cards) → terms → CTA
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.gv-hero {
  position: relative; height: 44vh; min-height: 300px; max-height: 440px;
  display: flex; align-items: flex-end;
  border-bottom: 3px solid var(--ink, #111); overflow: hidden;
}
.gv-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%; background-repeat: no-repeat;
}
.gv-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to top, rgba(10,10,10,0.55) 0%, transparent 60%);
}
.gv-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--w, 1380px); margin: 0 auto; width: 100%;
  padding: 0 60px 48px;
}
.gv-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal, #A8CCCF);
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.gv-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--teal, #A8CCCF); display: block;
}
.gv-h1 {
  font-size: clamp(44px, 5.5vw, 72px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9;
}
.gvh1-outline { display: block; color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.gvh1-white { display: block; color: var(--white, #F8F6F2); }
.gvh1-teal { display: block; color: var(--teal, #A8CCCF); }

/* ── INTRO ── */
.gv-intro {
  background: var(--white, #F8F6F2);
  border-bottom: 3px solid var(--ink, #111);
}
.gv-intro-c {
  max-width: 820px; margin: 0 auto;
  padding: 72px 60px;
  display: flex; flex-direction: column; gap: 18px;
}
.gv-intro-h2 {
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.95;
}
.gvi-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.gvi-ink { display: block; color: var(--ink, #111); }
.gv-intro-lead {
  font-size: 16px; font-weight: 300; line-height: 1.85;
  color: var(--mid, #555); margin: 0;
}
.gv-intro-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* ── HOW IT WORKS ── */
.gv-how {
  background: var(--off, #efefeb);
  border-bottom: 3px solid var(--ink, #111);
}
.gv-how-c { max-width: var(--w, 1380px); margin: 0 auto; }
.gv-how-hed { padding: 64px 60px 40px; }
.gv-how-h2 {
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.9; margin-top: 8px;
}
.gvhow-out { display: inline-block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); margin-right: 12px; }
.gvhow-teal { display: inline-block; color: var(--teal-dark, #5A9499); }
.gv-how-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--ink, #111);
}
.gv-card {
  padding: 40px 32px;
  border-right: 1px solid var(--rule, #DEDAD4);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--white, #F8F6F2);
}
.gv-card:last-child { border-right: none; }
.gv-card-num {
  font-size: 40px; font-weight: 800; color: var(--teal-dark, #5A9499);
  letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px;
}
.gv-card-title {
  font-size: 17px; font-weight: 800; color: var(--ink, #111); line-height: 1.3;
}
.gv-card-desc {
  font-size: 14px; font-weight: 300; color: var(--mid, #555);
  line-height: 1.75; margin: 0;
}

/* ── TERMS ── */
.gv-terms {
  background: var(--white, #F8F6F2);
  border-bottom: 3px solid var(--ink, #111);
}
.gv-terms-c {
  max-width: 820px; margin: 0 auto;
  padding: 72px 60px;
}
.gv-terms-h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.95;
  margin-top: 6px; margin-bottom: 32px;
}
.gvt-out { display: inline-block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); margin-right: 12px; }
.gvt-teal { display: inline-block; color: var(--teal-dark, #5A9499); }
.gv-terms-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  border: 3px solid var(--ink, #111);
}
.gv-terms-list li {
  font-size: 14px; font-weight: 300; color: var(--mid, #555);
  line-height: 1.7; padding: 16px 24px;
  border-bottom: 1px solid var(--rule, #DEDAD4);
  position: relative; padding-left: 48px;
}
.gv-terms-list li:last-child { border-bottom: none; }
.gv-terms-list li::before {
  content: '✓'; position: absolute; left: 22px; top: 16px;
  color: var(--teal-dark, #5A9499); font-weight: 700; font-size: 13px;
}
.gv-terms-list a {
  color: var(--teal-deep, #2E747B); text-decoration: none;
  border-bottom: 1.5px solid var(--teal-deep, #2E747B);
}
.gv-terms-list a:hover { color: var(--ink, #111); border-color: var(--ink, #111); }

/* ── CTA ── */
.gv-cta {
  background: var(--teal, #A8CCCF);
  border-bottom: 3px solid var(--ink, #111);
}
.gv-cta-c {
  max-width: var(--w, 1380px); margin: 0 auto;
  padding: 56px 60px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.gv-cta-h2 {
  font-size: clamp(26px, 2.8vw, 36px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--black, #0C0C0C);
  margin-top: 6px;
}
.gv-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .gv-how-grid { grid-template-columns: repeat(2, 1fr); }
  .gv-card:nth-child(2) { border-right: none; }
  .gv-card:nth-child(1), .gv-card:nth-child(2) { border-bottom: 1px solid var(--rule, #DEDAD4); }
}
@media (max-width: 820px) {
  .gv-hero-inner { padding: 0 32px 36px; }
  .gv-intro-c { padding: 56px 32px; }
  .gv-how-hed { padding: 48px 32px 32px; }
  .gv-how-grid { grid-template-columns: 1fr; }
  .gv-card { border-right: none; border-bottom: 1px solid var(--rule, #DEDAD4); }
  .gv-card:last-child { border-bottom: none; }
  .gv-terms-c { padding: 56px 32px; }
  .gv-cta-c { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   SALON EXPERIENCE (personality page) — used by page-salon-experience.php
   hero → intro → soundtrack (Spotify) → video (TikTok) → space → drinks → insta → CTA
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.xp-hero {
  position: relative; height: 50vh; min-height: 340px; max-height: 520px;
  display: flex; align-items: flex-end;
  border-bottom: 3px solid var(--ink, #111); overflow: hidden;
}
.xp-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%; background-repeat: no-repeat;
}
.xp-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.5) 55%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to top, rgba(10,10,10,0.6) 0%, transparent 60%);
}
.xp-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--w, 1380px); margin: 0 auto; width: 100%;
  padding: 0 60px 52px;
}
.xp-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal, #A8CCCF);
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.xp-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--teal, #A8CCCF); display: block; }
.xp-h1 {
  font-size: clamp(48px, 6vw, 80px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.88;
}
.xph1-outline { display: block; color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.xph1-white { display: block; color: var(--white, #F8F6F2); }
.xph1-teal { display: block; color: var(--teal, #A8CCCF); }

/* ── INTRO ── */
.xp-intro { background: var(--white, #F8F6F2); border-bottom: 3px solid var(--ink, #111); }
.xp-intro-c {
  max-width: 820px; margin: 0 auto; padding: 72px 60px;
  display: flex; flex-direction: column; gap: 18px;
}
.xp-intro-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
.xpi-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.xpi-ink { display: block; color: var(--ink, #111); }
.xp-intro-body {
  font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mid, #555);
  display: flex; flex-direction: column; gap: 16px;
}
.xp-intro-body strong { color: var(--ink, #111); font-weight: 700; }

/* ── SOUNDTRACK (Spotify) ── dark band ── */
.xp-music { background: var(--black, #0C0C0C); border-bottom: 3px solid var(--ink, #111); }
.xp-music-c {
  max-width: var(--w, 1380px); margin: 0 auto; padding: 72px 60px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center;
}
.xp-music-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin: 8px 0 20px; }
.xpm-out { display: block; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.35); }
.xpm-teal { display: block; color: var(--teal, #A8CCCF); }
.xp-music-text p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.85; margin: 0; }
.xp-music-player iframe { display: block; width: 100%; }

/* ── VIDEO (TikTok) ── */
.xp-video { background: var(--off, #efefeb); border-bottom: 3px solid var(--ink, #111); }
.xp-video-c { max-width: 760px; margin: 0 auto; padding: 64px 60px; }
.xp-video-hed { text-align: center; margin-bottom: 36px; }
.xp-video-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin-top: 8px; }
.xpv-out { display: inline-block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); margin-right: 12px; }
.xpv-teal { display: inline-block; color: var(--teal-dark, #5A9499); }
.xp-video-frame {
  border: 3px solid var(--ink, #111); overflow: hidden;
  background: var(--black, #0C0C0C); max-width: 360px; margin: 0 auto;
}
.xp-video-frame iframe { display: block; width: 100%; }

/* ── THE SPACE (gallery) ── */
.xp-space { background: var(--white, #F8F6F2); border-bottom: 3px solid var(--ink, #111); }
.xp-space-c { max-width: var(--w, 1380px); margin: 0 auto; }
.xp-space-hed { padding: 56px 60px 36px; border-bottom: 3px solid var(--ink, #111); }
.xp-space-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin-top: 8px; }
.xps-out { display: inline-block; color: transparent; -webkit-text-stroke: 2px var(--ink, #111); margin-right: 12px; }
.xps-teal { display: inline-block; color: var(--teal-dark, #5A9499); }
.xp-space-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 440px 320px; }
.xp-space-cell {
  overflow: hidden; position: relative;
  border-right: 3px solid var(--ink, #111); border-bottom: 3px solid var(--ink, #111);
}
.xp-space-cell:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.xp-space-cell:nth-child(2) { grid-column: 3; grid-row: 1; }
.xp-space-cell:nth-child(3) { grid-column: 4; grid-row: 1; border-right: none; }
.xp-space-cell:nth-child(4) { grid-column: 1; grid-row: 2; border-bottom: none; }
.xp-space-cell:nth-child(5) { grid-column: 2; grid-row: 2; border-bottom: none; }
.xp-space-cell:nth-child(6) { grid-column: 3 / span 2; grid-row: 2; border-right: none; border-bottom: none; }
.xp-space-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.xp-space-cell:hover .xp-space-img { transform: scale(1.05); }

/* ── DRINKS ── teal band ── */
.xp-drinks { background: var(--teal, #A8CCCF); border-bottom: 3px solid var(--ink, #111); }
.xp-drinks-c { max-width: var(--w, 1380px); margin: 0 auto; padding: 64px 60px; }
.xp-drinks-hed { max-width: 640px; margin-bottom: 44px; }
.xp-drinks-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin: 8px 0 16px; }
.xpd-out { display: inline-block; color: transparent; -webkit-text-stroke: 2px var(--black, #0C0C0C); margin-right: 12px; }
.xpd-teal { display: inline-block; color: var(--white, #F8F6F2); }
.xp-drinks-intro { font-size: 15px; font-weight: 400; color: rgba(0,0,0,0.6); line-height: 1.8; margin: 0; }
.xp-drinks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.xp-drinks-col { background: var(--white, #F8F6F2); padding: 32px 32px 36px; border: 3px solid var(--ink, #111); }
.xp-drinks-cat {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal-deep, #2E747B); display: block; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 2px solid var(--rule, #DEDAD4);
}
.xp-drinks-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.xp-drinks-col li { font-size: 14px; font-weight: 400; color: var(--ink, #111); line-height: 1.4; }

/* ── INSTAGRAM ── */
.xp-insta { background: var(--off, #efefeb); border-bottom: 3px solid var(--ink, #111); }
.xp-insta-hed { max-width: var(--w, 1380px); margin: 0 auto; padding: 56px 60px 32px; }
.xp-insta-h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin-top: 8px; }
.xpig-out { color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.xpig-teal { color: var(--teal-dark, #5A9499); }
.xp-insta-hed p { font-size: 14px; font-weight: 300; color: var(--mid, #555); line-height: 1.7; margin-top: 12px; }
.xp-insta-hed a { color: var(--teal-deep, #2E747B); text-decoration: none; font-weight: 700; }
.xp-insta-hed a:hover { color: var(--ink, #111); }
.xp-insta-feed { border-top: 3px solid var(--ink, #111); }

/* ── CTA ── */
.xp-cta { background: var(--teal, #A8CCCF); border-bottom: 3px solid var(--ink, #111); }
.xp-cta-c { max-width: var(--w, 1380px); margin: 0 auto; padding: 56px 60px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.xp-cta-h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--black, #0C0C0C); margin-top: 6px; }
.xp-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .xp-music-c { grid-template-columns: 1fr; gap: 36px; }
  .xp-drinks-grid { grid-template-columns: 1fr; gap: 16px; }
  .xp-space-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, 240px); }
  .xp-space-cell { grid-column: 1 !important; border-right: none; border-bottom: 3px solid var(--ink, #111); }
  .xp-space-cell:nth-child(6) { border-bottom: none; }
}
@media (max-width: 820px) {
  .xp-hero-inner { padding: 0 32px 40px; }
  .xp-intro-c { padding: 56px 32px; }
  .xp-music-c { padding: 56px 32px; }
  .xp-video-c { padding: 48px 24px; }
  .xp-space-hed, .xp-insta-hed { padding-left: 32px; padding-right: 32px; }
  .xp-drinks-c { padding: 48px 32px; }
  .xp-cta-c { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   SMASH BALLOON INSTAGRAM FEED — site-wide
   Moved here from front-page.php inline styles so the feed matches on
   EVERY page it appears (homepage, experience page, etc.)
   ════════════════════════════════════════════════════════════════════ */
#sb_instagram #sbi_images { padding: 0 !important; }
#sb_instagram #sbi_images .sbi_item { padding: 0 !important; border-right: 3px solid var(--ink) !important; box-sizing: border-box !important; }
#sb_instagram #sbi_images .sbi_item:last-child { border-right: none !important; }
#sb_instagram #sbi_images .sbi_photo_wrap,
#sb_instagram #sbi_images .sbi_photo { border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
#sb_instagram #sbi_images .sbi_photo { aspect-ratio: 1 / 1 !important; height: auto !important; display: block !important; }
#sb_instagram #sbi_images .sbi_photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; }

/* ════════════════════════════════════════════════════════════════════
   SERVICES LIST — used by page-services.php
   Grouped service rows: image (with name overlay) + description + arrow
   ════════════════════════════════════════════════════════════════════ */
.svc-list { background: var(--off, #efefeb); border-bottom: 3px solid var(--ink, #111); }
.svc-list-c { max-width: var(--w, 1380px); margin: 0 auto; }

.svc-group-title {
  display: flex; align-items: baseline; gap: 14px;
  padding: 36px 60px 18px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink, #111);
  border-bottom: 3px solid var(--ink, #111);
  background: var(--white, #F8F6F2);
}
.svc-group-num { font-size: 11px; font-weight: 800; color: var(--teal-dark, #5A9499); letter-spacing: 0.1em; }

.svc-row {
  display: grid; grid-template-columns: 1fr 2fr;
  border-bottom: 3px solid var(--ink, #111);
  text-decoration: none; background: var(--white, #F8F6F2);
  transition: background 0.2s;
}
.svc-row:hover { background: var(--teal, #A8CCCF); }

.svc-row-img {
  position: relative; min-height: 180px;
  background-size: cover; background-position: center;
  border-right: 3px solid var(--ink, #111);
  display: flex; align-items: flex-end;
}
.svc-row-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.15) 55%, transparent 100%);
}
.svc-row-name {
  position: relative; z-index: 1;
  padding: 22px 26px;
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 800;
  color: var(--white, #F8F6F2); letter-spacing: -0.02em; line-height: 1.05;
}
.svc-row-body {
  padding: 40px 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.svc-row-desc {
  font-size: 15px; font-weight: 300; color: var(--mid, #555);
  line-height: 1.8; margin: 0;
}
.svc-row:hover .svc-row-desc { color: var(--ink, #111); }
.svc-row-arrow {
  font-size: 24px; font-weight: 800; color: var(--teal-dark, #5A9499); flex-shrink: 0;
}
.svc-row:hover .svc-row-arrow { color: var(--ink, #111); }

@media (max-width: 760px) {
  .svc-group-title { padding: 28px 32px 16px; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-row-img { border-right: none; border-bottom: 3px solid var(--ink, #111); min-height: 200px; }
  .svc-row-body { padding: 28px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   SERVICE PAGE (reusable) — used by page-service.php
   hero (featured image) → editor body → sub-page links → FAQ → contact
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.svc-hero {
  position: relative; height: 44vh; min-height: 300px; max-height: 440px;
  display: flex; align-items: flex-end;
  border-bottom: 3px solid var(--ink, #111); overflow: hidden;
}
.svc-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; background-repeat: no-repeat; }
.svc-hero-bg-fallback { background: linear-gradient(135deg, var(--teal-dark, #5A9499) 0%, var(--teal-deep, #2E747B) 100%); }
.svc-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to top, rgba(10,10,10,0.55) 0%, transparent 60%);
}
.svc-hero-inner { position: relative; z-index: 2; max-width: var(--w, 1380px); margin: 0 auto; width: 100%; padding: 0 60px 48px; }
.svc-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--teal, #A8CCCF); display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.svc-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--teal, #A8CCCF); display: block; }
.svc-h1 { font-size: clamp(40px, 5vw, 68px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.92; }
.svc-h1-out { display: block; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,0.55); }
.svc-h1-name { display: block; color: var(--white, #F8F6F2); }
.svc-h1-loc { display: block; color: var(--teal, #A8CCCF); }
.svc-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: stretch; }
.svc-hero-cta .hero-cta-primary { min-width: 280px; }
.svc-hero-cta .hero-cta-secondary { min-width: 200px; }

/* ── TRUST STRIP ── */
.svc-trust { background: var(--black, #0C0C0C); border-bottom: 3px solid var(--ink, #111); }
.svc-trust-c {
  max-width: var(--w, 1380px); margin: 0 auto; padding: 16px 60px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
}
.svc-trust-item { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; }
.svc-trust-item strong { color: var(--teal, #A8CCCF); font-weight: 700; }
.svc-trust-dot { color: rgba(255,255,255,0.3); }

/* ── MID-PAGE CTA BAND ── */
.svc-ctaband { background: var(--teal, #A8CCCF); border-bottom: 3px solid var(--ink, #111); }
.svc-ctaband-c {
  max-width: var(--w, 1380px); margin: 0 auto; padding: 48px 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
}
.svc-ctaband-text { flex: 1; min-width: 280px; }
.svc-ctaband-h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--black, #0C0C0C); margin-top: 6px; }
.svc-ctaband-sub { font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.6); line-height: 1.7; margin-top: 10px; max-width: 460px; }
.svc-ctaband-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

/* ── contact section action buttons ── */
.svc-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ── BODY (editor content) ── */
.svc-body { background: var(--white, #F8F6F2); border-bottom: 3px solid var(--ink, #111); }
.svc-body-c { max-width: 820px; margin: 0 auto; padding: 72px 60px; }
/* entry-content: style whatever the editor outputs so service pages look consistent */
/* Force the house font on ALL body content — overrides fonts carried over from
   pasted content, page-builder markup, or inline styles in migrated pages. */
.svc-body-c.entry-content,
.svc-body-c.entry-content * {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.entry-content h2 {
  font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.05; color: var(--ink, #111); margin: 40px 0 18px;
}
.entry-content h2:first-child { margin-top: 0; }
/* Outlined first word on body H2s — the site signature (matches blog + homepage).
   The .ec-h2-out / .ec-h2-fill spans are injected by JS in page-service.php. */
.svc-body-c.entry-content h2 .ec-h2-out { color: transparent !important; -webkit-text-stroke: 2px var(--ink, #111); }
.svc-body-c.entry-content h2 .ec-h2-fill { color: var(--ink, #111); }
.entry-content h3 {
  font-size: 20px; font-weight: 800; color: var(--ink, #111);
  margin: 28px 0 12px; letter-spacing: -0.01em;
}
.entry-content p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mid, #555); margin: 0 0 18px; }
.entry-content strong { color: var(--ink, #111); font-weight: 700; }
.entry-content a { color: var(--teal-deep, #2E747B); text-decoration: none; border-bottom: 1.5px solid var(--teal-deep, #2E747B); }
.entry-content a:hover { color: var(--ink, #111); border-color: var(--ink, #111); }
.entry-content ul, .entry-content ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.entry-content ul li, .entry-content ol li {
  font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--mid, #555);
  padding: 12px 0 12px 32px; border-bottom: 1px solid var(--rule, #DEDAD4); position: relative;
}
.entry-content ul li::before { content: '—'; position: absolute; left: 0; top: 12px; color: var(--teal-dark, #5A9499); font-weight: 700; }
.entry-content ol { counter-reset: ec; }
.entry-content ol li { counter-increment: ec; }
.entry-content ol li::before { content: counter(ec); position: absolute; left: 0; top: 12px; color: var(--teal-dark, #5A9499); font-weight: 800; font-size: 13px; }
.entry-content img { max-width: 100%; height: auto; display: block; margin: 28px 0; border: 3px solid var(--ink, #111); }
.entry-content blockquote {
  border-left: 3px solid var(--teal-dark, #5A9499); padding: 4px 0 4px 20px; margin: 24px 0;
  font-style: italic; color: rgba(0,0,0,0.55);
}

/* ── SUB-PAGE LINKS ── */
.svc-subs { background: var(--off, #efefeb); border-bottom: 3px solid var(--ink, #111); }
.svc-subs-c { max-width: var(--w, 1380px); margin: 0 auto; padding: 64px 60px; }
.svc-subs-hed { margin-bottom: 36px; }
.svc-subs-h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin-top: 8px; }
.ssh-out { color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.ssh-teal { color: var(--teal-dark, #5A9499); }
.svc-subs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3px; border: 3px solid var(--ink, #111); }
.svc-sub-card {
  background: var(--white, #F8F6F2); text-decoration: none; display: flex; flex-direction: column;
  border: 1.5px solid transparent; transition: border-color 0.2s;
}
.svc-sub-card:hover { border-color: var(--teal-deep, #2E747B); }
.svc-sub-img { width: 100%; aspect-ratio: 3 / 2; background-size: cover; background-position: center; }
.svc-sub-img-fallback { background: linear-gradient(135deg, var(--teal, #A8CCCF) 0%, var(--teal-dark, #5A9499) 100%); }
.svc-sub-name {
  padding: 16px 20px; font-size: 14px; font-weight: 800; color: var(--ink, #111);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.svc-sub-arrow { color: var(--teal-dark, #5A9499); }

/* ── FAQ ── */
.svc-faq { background: var(--white, #F8F6F2); border-bottom: 3px solid var(--ink, #111); }
.svc-faq-c { max-width: 860px; margin: 0 auto; padding: 72px 60px; }
.svc-faq-hed { margin-bottom: 28px; }
.svc-faq-h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin-top: 8px; }
.sfh-out { color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.sfh-teal { color: var(--teal-dark, #5A9499); }
.svc-faq-group {
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-deep, #2E747B); margin: 28px 0 12px;
}
.svc-faq-accordion { background: var(--white, #F8F6F2); border: 3px solid var(--ink, #111); }
.svc-faq-item { border-bottom: 1px solid var(--rule, #DEDAD4); }
.svc-faq-item:last-child { border-bottom: none; }
.svc-faq-item .faq-q { padding: 18px 24px; font-size: 15px; font-weight: 700; color: var(--ink, #111); }
.svc-faq-item .faq-q:hover { background: rgba(168, 204, 207, 0.08); }
.svc-faq-item.open .faq-q { background: rgba(168, 204, 207, 0.15); }
.svc-faq-item .faq-a { padding: 0 24px; font-size: 14px; font-weight: 300; color: var(--mid, #555); line-height: 1.85; }
.svc-faq-item.open .faq-a-tall { max-height: 1000px; padding: 4px 24px 22px; }
.svc-faq-item .faq-a p { margin: 0; }

/* ── CONTACT ── */
.svc-contact { background: var(--teal, #A8CCCF); border-bottom: 3px solid var(--ink, #111); }
.svc-contact-c { max-width: 820px; margin: 0 auto; padding: 64px 60px; }
.svc-contact-hed { margin-bottom: 28px; }
.svc-contact-h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--black, #0C0C0C); margin-top: 6px; }
.svc-contact-note { font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.6); line-height: 1.7; margin-top: 12px; }
.svc-contact-note a { color: var(--black, #0C0C0C); font-weight: 700; }
.svc-contact-form { background: var(--white, #F8F6F2); padding: 36px; border: 3px solid var(--ink, #111); }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .svc-hero-inner { padding: 0 32px 36px; }
  .svc-body-c { padding: 56px 32px; }
  .svc-subs-c, .svc-faq-c, .svc-contact-c { padding-left: 32px; padding-right: 32px; }
  .svc-contact-form { padding: 24px; }
}

/* ════════════════════════════════════════════════════════════════════
   SERVICE PAGE — conversion additions (what-to-expect, reviews, sticky CTA)
   ════════════════════════════════════════════════════════════════════ */

/* ── WHAT TO EXPECT ── */
.svc-expect { background: var(--off, #efefeb); border-bottom: 3px solid var(--ink, #111); }
.svc-expect-c { max-width: var(--w, 1380px); margin: 0 auto; padding: 64px 60px; }
.svc-expect-hed { margin-bottom: 40px; }
.svc-expect-h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin-top: 8px; }
.se-out { color: transparent; -webkit-text-stroke: 2px var(--ink, #111); }
.se-teal { color: var(--teal-dark, #5A9499); }
.svc-expect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border: 3px solid var(--ink, #111); }
.svc-expect-step { background: var(--white, #F8F6F2); padding: 28px 26px 32px; }
.ses-num { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--teal-dark, #5A9499); display: block; margin-bottom: 14px; }
.ses-t { font-size: 17px; font-weight: 800; color: var(--ink, #111); margin: 0 0 10px; letter-spacing: -0.01em; }
.ses-p { font-size: 13px; font-weight: 300; color: var(--mid, #555); line-height: 1.7; margin: 0; }

/* ── REVIEWS ── */
.svc-reviews { background: var(--black, #0C0C0C); border-bottom: 3px solid var(--ink, #111); }
.svc-reviews-c { max-width: var(--w, 1380px); margin: 0 auto; padding: 64px 60px; }
.svc-reviews-hed { margin-bottom: 36px; }
.svc-reviews-h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; color: var(--white, #F8F6F2); margin-top: 8px; }
.sr-teal { color: var(--teal, #A8CCCF); }
.svc-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border: 3px solid var(--ink, #111); }
.svc-review { background: #141414; padding: 30px 28px; display: flex; flex-direction: column; }
.sr-stars { color: var(--teal, #A8CCCF); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.sr-text { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.82); line-height: 1.7; margin: 0 0 18px; flex: 1; }
.sr-name { font-size: 14px; font-weight: 800; color: var(--white, #F8F6F2); }
.sr-svc { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 4px; }

/* ── STICKY MOBILE CTA BAR ── */
.svc-sticky-cta { display: none; }
@media (max-width: 760px) {
  .svc-sticky-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    border-top: 3px solid var(--ink, #111); background: var(--white, #F8F6F2);
  }
  .svc-sticky-cta a {
    flex: 1; text-align: center; padding: 16px 8px; text-decoration: none;
    font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
    display: flex; align-items: center; justify-content: center;
  }
  .svc-sticky-book { background: var(--teal, #A8CCCF); color: var(--black, #0C0C0C); flex: 1.6 !important; border-right: 2px solid var(--ink, #111); }
  .svc-sticky-call { background: var(--black, #0C0C0C); color: var(--white, #F8F6F2); border-right: 2px solid var(--ink, #111); }
  .svc-sticky-wa { background: var(--ink, #111); color: var(--white, #F8F6F2); }
  /* stop the sticky bar covering the footer's last content */
  .site-footer, footer { padding-bottom: 80px; }
}

/* ── RESPONSIVE (expect + reviews) ── */
@media (max-width: 900px) {
  .svc-expect-grid { grid-template-columns: 1fr 1fr; }
  .svc-reviews-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .svc-expect-c, .svc-reviews-c { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 520px) {
  .svc-expect-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   CLOSING CTA BAND + INSTAGRAM (bp-cta / bp-ig)
   Originally inline in single.php (blog); moved here so service pages
   (and any page) can reuse the same treatment.
   ════════════════════════════════════════════════════════════════════ */
.bp-cta { background:var(--teal); border-bottom:3px solid var(--ink); }
.bp-cta-in { max-width:var(--w); margin:0 auto; padding:74px 60px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.bp-cta-left { max-width:620px; }
.bp-cta-kicker { font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--teal-deep); display:block; margin-bottom:14px; }
.bp-cta-h { font-size:clamp(32px,4vw,56px); font-weight:800; letter-spacing:-0.03em; line-height:0.96; color:var(--black); }
.bp-cta-sub { font-size:15px; font-weight:300; color:var(--teal-deep); line-height:1.7; margin-top:18px; max-width:480px; }
.bp-cta-actions { display:flex; flex-direction:column; gap:12px; min-width:280px; }
.bp-cta-btn-primary { display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:var(--white); font-size:15px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; padding:20px 26px; text-decoration:none; border:2px solid var(--ink); transition:all 0.2s; }
.bp-cta-btn-primary:hover { background:var(--white); color:var(--ink); }
.bp-cta-btn-ghost { display:flex; align-items:center; justify-content:space-between; background:transparent; color:var(--ink); font-size:14px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; padding:18px 26px; text-decoration:none; border:2px solid var(--ink); transition:all 0.2s; }
.bp-cta-btn-ghost:hover { background:var(--ink); color:var(--teal); }

.bp-ig { background:var(--ink); border-bottom:3px solid var(--ink); }
.bp-ig-in { max-width:var(--w); margin:0 auto; padding:70px 60px; }
.bp-ig-hed { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.bp-ig-kicker { font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:12px; }
.bp-ig-h2 { font-size:clamp(28px,3.4vw,46px); font-weight:800; letter-spacing:-0.03em; line-height:1; }
.bp-ig-h2 .bp-ig-out { color:transparent; -webkit-text-stroke:1.5px var(--white); }
.bp-ig-h2 .bp-ig-fill { color:var(--teal); }
.bp-ig-link { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); text-decoration:none; border-bottom:1.5px solid var(--teal); padding-bottom:3px; transition:all 0.15s; }
.bp-ig-link:hover { color:var(--white); border-color:var(--white); }
.bp-ig .sbi_header_text, .bp-ig .sbi_header_text *, .bp-ig .sb_instagram_header *,
.bp-ig .sbi_bio, .bp-ig .sbi_name, .bp-ig .sbi_username { color:rgba(255,255,255,0.7) !important; }
.bp-ig .sbi_header_text a, .bp-ig .sb_instagram_header a, .bp-ig .sbi_username a,
.bp-ig a.sbi_header_link { color:var(--white) !important; }
.bp-ig #sb_instagram .sbi_follow_btn a, .bp-ig .sbi_load .sbi_btn_text { color:var(--ink) !important; }
@media (max-width: 760px) {
  .bp-cta-in { padding:52px 24px; }
  .bp-cta-actions { width:100%; }
  .bp-ig-in { padding:52px 24px; }
}