/* ============================================================
   CARA MURPHY — Makeup & Fine Line Tattoo Studio
   styles.css
   Charcoal/black gallery palette with GOLD (#C6A15B — from the
   logo underline) as the signature accent.
   ============================================================ */

:root {
  /* Core palette — charcoal / black */
  --bg:            #0D0D0D;
  --card:          #161616;
  --card-2:        #1F1F1F;
  --ink:           #F3F0EA;
  --ink-soft:      #DCD8D0;
  --muted:         #9A948A;
  --line:          #2B2B2B;
  --line-soft:     #222222;

  /* Signature accents */
  --gold:          #C6A15B;
  --gold-deep:     #D5B472;
  --gold-glow:     rgba(198,161,91,.28);
  --clay:          #C56B4E;   /* rare tertiary touch */

  /* Deepest surface (footer) */
  --espresso:      #000000;
  --espresso-2:    #0A0A0A;

  /* Type */
  --serif:  "Playfair Display", Georgia, serif;
  --sans:   "Inter", system-ui, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, monospace;

  /* Rhythm */
  --edge: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1,h2,h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); }

/* Utility label / eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 1.8rem; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow.center::after {
  content: "";
  width: 1.8rem; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow.center { justify-content: center; }
.eyebrow.noline::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: all .4s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: transparent; color: var(--ink); }
.btn.gold { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn.gold:hover { background: var(--gold-deep); color: #12100E; }
.btn.light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn.light:hover { background: #fff; color: var(--espresso); }
.btn.light.solid { background: #fff; color: var(--espresso); border-color:#fff; }
.btn.light.solid:hover { background: transparent; color:#fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--edge);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.solid {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-block: .75rem;
}
.brand { display: flex; align-items: center; gap: .8rem; z-index: 210; }
.brand img { height: 52px; width: auto; transition: height .4s var(--ease); }
.site-header.solid .brand img { height: 44px; }
/* dark site — the white logo is always the right one */
.brand .logo-dark { display: block; }
/* header CTA reads as ink on the light hero */
.site-header:not(.on-dark) .btn.light.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.site-header:not(.on-dark) .btn.light.solid:hover { background: transparent; color: var(--ink); }

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); position: relative; padding: .3rem 0;
  transition: color .3s;
}
.site-header.on-dark:not(.solid) .nav a,
.site-header.on-dark:not(.solid) .menu-btn { color: #f2ecdf; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav a.active { color: var(--gold-deep); }

.header-cta { display: flex; align-items: center; gap: 1rem; }

.menu-btn { display: none; position: relative; width: 40px; height: 40px; color: var(--ink); z-index: 2; }
.menu-btn span { display:block; width:22px; height:1.5px; background: currentColor; margin: 5px auto; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 190; background: var(--bg);
  transform: translateY(-100%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
  transition: transform .5s var(--ease), visibility .5s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding: calc(1.1rem + 52px + 2.2rem) var(--edge) calc(var(--edge) + 1rem); }
.drawer.open { transform: translateY(0); visibility: visible; }
.drawer a { font-family: var(--serif); font-size: clamp(1.5rem,5.6vw,2.15rem); line-height:1.25; padding:.62rem 0; border-bottom:1px solid var(--line); transition: color .3s var(--ease), padding-left .3s var(--ease); }
.drawer a:last-child { border-bottom:none; }
.drawer a:hover, .drawer a:active { color: var(--gold); padding-left:.4rem; }
/* short viewports: tighten so all eight fit without scrolling where possible */
@media (max-height: 720px) {
  .drawer { padding-top: calc(1.1rem + 46px + 1.2rem); }
  .drawer a { font-size: clamp(1.15rem,4.4vw,1.6rem); padding:.42rem 0; }
}
@media (max-height: 560px) {
  .drawer a { font-size: 1.1rem; padding:.3rem 0; }
}
/* header stays reachable above the open drawer — opaque band so scrolled links pass behind it */
body.menu-open .site-header { background: var(--bg); backdrop-filter: none; border-bottom-color: transparent; }
body.menu-open .site-header .header-cta .btn { display: none; }

/* ---------- Split hero (signature) ---------- */
.split-hero { height: 100svh; min-height: 640px; display: flex; position: relative; overflow: hidden; }
.split-panel {
  position: relative; flex: 1; overflow: hidden;
  transition: flex .8s var(--ease);
  display: flex; align-items: flex-end;
}
.split-hero:hover .split-panel { flex: .82; }
.split-hero .split-panel:hover { flex: 1.7; }
.split-panel .ph-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 1.4s var(--ease), filter .8s var(--ease);
  filter: brightness(.62) saturate(.95);
}
.split-panel:hover .ph-img { transform: scale(1); filter: brightness(.72) saturate(1); }
.split-panel::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(23,19,15,.82) 100%);
}
.split-body { position: relative; z-index: 3; padding: 0 var(--edge) clamp(3rem,7vh,6rem); width:100%; }
.split-body .p-eyebrow { font-family: var(--mono); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color: var(--gold); }
.split-body h2 { color:#fff; font-size: clamp(2.4rem, 4.6vw, 4.4rem); margin: .5rem 0 .4rem; }
.split-body p { color: rgba(255,255,255,.82); max-width: 34ch; font-size:.98rem; }
.split-enter {
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.4rem;
  font-family: var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:#fff;
}
.split-enter .arrow { transition: transform .4s var(--ease); }
.split-panel:hover .split-enter .arrow { transform: translateX(8px); }
.left-panel { align-items: flex-end; }

/* Centre seam + wordmark bridge */
.hero-seam { position:absolute; top:0; bottom:0; left:50%; width:1px; background: linear-gradient(var(--gold), transparent); z-index:4; transform: translateX(-50%); opacity:.7; }
.hero-crest {
  position:absolute; left:50%; top:clamp(21%,26vh,30%); transform: translate(-50%,-50%);
  z-index:6; text-align:center; pointer-events:none; width:min(90vw,640px);
}
.hero-crest .loc { font-family: var(--mono); font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color: rgba(255,255,255,.85); }
.hero-crest .mark {
  font-family: var(--serif); color:#fff; font-weight:500; line-height:.92;
  font-size: clamp(3.2rem, 9vw, 7rem); letter-spacing:.02em; margin:.5rem 0 .1rem;
  text-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.hero-crest .mark .dot { color: var(--gold); }
.hero-crest .tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1rem,2.2vw,1.5rem); color: rgba(255,255,255,.92); }
.hero-scroll { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:6; color:rgba(255,255,255,.7); font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.hero-scroll .line { width:1px; height:34px; background: rgba(255,255,255,.5); animation: scrollpulse 2s var(--ease) infinite; transform-origin: top; }
@keyframes scrollpulse { 0%,100%{ transform: scaleY(.3); opacity:.4;} 50%{ transform: scaleY(1); opacity:1;} }

/* ---------- Home hero (intro band + choose cards) ---------- */
.home-intro { text-align: center; padding: clamp(8rem,17vh,12rem) var(--edge) clamp(2rem,5vh,3.5rem); }
.home-intro .loc { font-family: var(--mono); font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color: var(--gold-deep); }
.home-intro .mark { font-family: var(--serif); font-weight:500; line-height:.94; font-size: clamp(3.4rem,10vw,7.5rem); letter-spacing:.01em; color: var(--ink); margin:.6rem 0 .5rem; }
.home-intro .mark .dot { color: var(--gold); }
.home-intro .tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem,2.4vw,1.6rem); color: var(--muted); }

.choose { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.1rem,2.5vw,2rem); max-width: var(--maxw); margin-inline:auto; padding: clamp(1rem,2vh,2rem) var(--edge) clamp(4rem,9vh,7rem); }
.choose-card { display:block; color: var(--ink); }
.choose-card .cc-img { position:relative; overflow:hidden; border-radius:6px; aspect-ratio: 4/4.4; background: var(--card-2); }
.choose-card .cc-img img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.choose-card:hover .cc-img img { transform: scale(1.05); }
.choose-card .cc-body { padding: 1.4rem .1rem 0; }
.choose-card .cc-eyebrow { display:block; font-family: var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); line-height:1.5; }
.choose-card h2 { font-size: clamp(1.9rem,3.6vw,3rem); margin:.45rem 0 .55rem; }
.choose-card p { color: var(--muted); max-width: 42ch; font-size: 1rem; }
.choose-card .cc-enter { display:inline-flex; align-items:center; gap:.7rem; margin-top: 1.1rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color: var(--ink); }
.choose-card .cc-enter .arrow { transition: transform .4s var(--ease); }
.choose-card:hover .cc-enter .arrow { transform: translateX(8px); }

/* ---------- Standard page hero (interior pages) — editorial split ---------- */
.page-hero { display:grid; grid-template-columns: 1.02fr 1fr; column-gap: clamp(2rem,5vw,5rem); align-items: stretch; background: var(--card); border-bottom: 1px solid var(--line); padding: clamp(7.5rem,15vh,11rem) var(--edge) clamp(3.5rem,8vh,6rem); overflow: hidden; }
.page-hero .ph-bg { position: static; width:100%; height:100%; min-height: clamp(340px,52vh,560px); object-fit: cover; filter: none; transform: none; border-radius: 6px; }
.page-hero::after { display: none; }
.page-hero .ph-inner { position: static; z-index:3; order:-1; justify-self: start; align-self: center; color: var(--ink); max-width: 600px; margin: 0; padding-inline: 0; }
.page-hero .ph-inner .eyebrow { color: var(--gold-deep); }
.page-hero h1 { color: var(--ink); font-size: clamp(2.4rem, 5vw, 4.4rem); margin:.7rem 0 1.1rem; max-width: 16ch; }
.page-hero p.lede { color: var(--muted); max-width: 46ch; font-size: 1.08rem; }
.page-hero .ph-actions { margin-top: 1.8rem; display:flex; gap:1rem; flex-wrap:wrap; }
.page-hero .btn.light { border-color: var(--ink); color: var(--ink); }
.page-hero .btn.light:hover { background: var(--ink); color: var(--bg); }
.page-hero .btn.light.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.page-hero .btn.light.solid:hover { background: transparent; color: var(--ink); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 10vh, 8rem); }
.section.tight { padding-block: clamp(3rem, 6vh, 5rem); }
.section-head { max-width: 60ch; margin-bottom: clamp(2rem,5vh,3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin:.7rem 0; }
.section-head p { color: var(--muted); font-size: 1.05rem; max-width: 54ch; }
.section-head.center p { margin-inline: auto; }

.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }

/* alt background band */
.band { background: var(--card); border-block: 1px solid var(--line); }
.band-2 { background: var(--card-2); }

/* ---------- Split feature (image + text) ---------- */
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.feature.rev .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media img { width:100%; aspect-ratio: 4/5; object-fit: cover; }
.feature-media .tag { position:absolute; bottom:1rem; left:1rem; background: var(--bg); color: var(--ink); font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; padding:.5rem .8rem; border:1px solid var(--line); }
.feature-body h2 { font-size: clamp(1.9rem,3.6vw,3rem); margin:.7rem 0 1.1rem; }
.feature-body p { color: var(--muted); margin-bottom: 1rem; }
.feature-body .btn { margin-top: .8rem; }

/* stat row */
.stats { display:flex; gap: clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap; margin: 1.6rem 0; }
.stat .n { font-family: var(--serif); font-size: clamp(2rem,4vw,3rem); line-height:1; }
.stat .n .dot { color: var(--gold); }
.stat .l { font-family: var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); margin-top:.4rem; }

/* ---------- Cards / service list ---------- */
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem; }
.card {
  background: var(--card); border: 1px solid var(--line); padding: 2rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover { transform: translateY(-4px); border-color: var(--gold); }
.card .k { font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold-deep); }
.card h3 { font-size: 1.5rem; margin:.6rem 0 .7rem; }
.card p { color: var(--muted); font-size: .98rem; }

/* numbered process */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
.step { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.step .num { font-family: var(--serif); font-size: 2.4rem; color: var(--gold); line-height:1; }
.step h4 { font-family: var(--serif); font-size:1.2rem; margin:.5rem 0 .4rem; font-weight:500; }
.step p { color: var(--muted); font-size:.92rem; }

/* service bullets */
.svc-list { display:flex; flex-direction:column; gap:0; }
.svc-item { display:grid; grid-template-columns: auto 1fr; gap:1.6rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); align-items:start; }
.svc-item:first-child { border-top: 1px solid var(--line); }
.svc-item .idx { font-family:var(--mono); font-size:.72rem; color: var(--gold-deep); letter-spacing:.1em; padding-top:.4rem; }
.svc-item h3 { font-size: 1.5rem; margin-bottom:.4rem; }
.svc-item p { color: var(--muted); font-size:.98rem; max-width:60ch; }

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; border-block: 1px solid var(--line); background: var(--card); padding-block: 1rem; }
.marquee-track { display:flex; gap:2.5rem; width:max-content; animation: marq 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--ink-soft); white-space:nowrap; }
.marquee span::after { content:"·"; color: var(--gold); margin-left: 2.5rem; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Testimonials ---------- */
.quotes { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.quotes.pairs { grid-template-columns: repeat(2,1fr); }
.quote { background: var(--card); border:1px solid var(--line); padding: 2rem; position:relative; }
.quote .mark { font-family: var(--serif); font-size: 3.5rem; color: var(--gold); line-height:.6; opacity:.5; }
.quote p { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height:1.5; margin:.6rem 0 1.2rem; }
.quote .by { font-family: var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }

/* ---------- Two-doors (contact) ---------- */
.doors { display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.door { background: var(--card); border:1px solid var(--line); padding: clamp(2rem,4vw,3rem); }
.door h3 { font-size: 1.9rem; margin:.6rem 0 .8rem; }
.door p { color: var(--muted); margin-bottom: 1.4rem; }
.doors.three { grid-template-columns: repeat(3, 1fr); }
.door { min-width: 0; }
.doors.three .door .btn { white-space: normal; max-width: 100%; text-align: center; overflow-wrap: break-word; letter-spacing: .14em; }
.door .handle { font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; color: var(--gold-deep); }

/* ---------- Bento gallery ---------- */
.bento { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; grid-auto-flow: dense; gap: 14px; }
.bento-item { position: relative; overflow: hidden; border-radius: 4px; cursor: pointer; background: var(--card-2); }
.bento-item img { width:100%; height:100%; object-fit: cover; transition: transform 1s var(--ease); }
.bento-item:hover img { transform: scale(1.06); }
.bento-item::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); opacity:0; transition: opacity .4s var(--ease); }
.bento-item:hover::after { opacity:1; }
.bento-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 1rem; color:#fff; opacity:0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.bento-item:hover .bento-cap { opacity:1; transform: translateY(0); }
.bento-cap .t { font-family: var(--serif); font-size: 1.05rem; }
.bento-cap .d { font-size: .78rem; color: rgba(255,255,255,.8); }
/* spans — two full rows: [2+1+1] / [1+2+1], no gaps */
.sp-a { grid-column: span 2; grid-row: span 3; }
.sp-b { grid-column: span 1; grid-row: span 3; }
.sp-c { grid-column: span 1; grid-row: span 3; }
.sp-d { grid-column: span 1; grid-row: span 3; }
.sp-e { grid-column: span 2; grid-row: span 3; }
.sp-f { grid-column: span 2; grid-row: span 3; }

/* lightbox */
.lightbox { position: fixed; inset:0; z-index: 500; display:none; align-items:center; justify-content:center; padding: 1.5rem; }
.lightbox.open { display:flex; }
.lightbox-scrim { position:absolute; inset:0; background: rgba(20,16,12,.78); backdrop-filter: blur(10px); }
.lightbox-stage { position: relative; z-index:2; max-width: min(920px, 92vw); width:100%; }
.lightbox-frame { position:relative; border-radius:8px; overflow:hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); background:#000; }
.lightbox-frame img { width:100%; max-height: 74vh; object-fit: contain; background:#0c0a08; display:block; }
.lightbox-frame .lb-meta { position:absolute; left:0; right:0; bottom:0; padding: 1.4rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); color:#fff; }
.lightbox-frame .lb-meta .t { font-family: var(--serif); font-size: 1.4rem; }
.lightbox-frame .lb-meta .d { font-size:.9rem; color: rgba(255,255,255,.8); }
.lb-close { position:absolute; top:-14px; right:-14px; z-index:5; width:40px; height:40px; border-radius:50%; background:#fff; color:#12100E; display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.4); transition: transform .3s var(--ease); }
.lb-close:hover { transform: scale(1.1) rotate(90deg); }
.bento-item { cursor: zoom-in; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:1.9rem; line-height:1; padding-bottom:4px; color:#fff; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); transition: background .3s var(--ease), border-color .3s var(--ease); }
.lb-nav:hover { background: rgba(0,0,0,.6); border-color: var(--gold); color: var(--gold); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
@media (max-width: 640px) { .lb-nav { width:38px; height:38px; font-size:1.5rem; } .lb-prev { left:.5rem; } .lb-next { right:.5rem; } }
/* draggable dock */
.lb-dock { position: fixed; left:50%; bottom: 1.5rem; transform: translateX(-50%); z-index:4; cursor: grab; }
.lb-dock.dragging { cursor: grabbing; }
.lb-dock-inner { display:flex; align-items:center; gap:2px; padding:.6rem .8rem; border-radius: 16px; background: rgba(255,255,255,.12); backdrop-filter: blur(18px); border:1px solid rgba(255,255,255,.22); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.dock-thumb { width: 42px; height:42px; border-radius:9px; overflow:hidden; flex:0 0 auto; transition: transform .35s var(--ease), box-shadow .35s var(--ease); transform-origin:center bottom; opacity:.85; }
.dock-thumb img { width:100%; height:100%; object-fit:cover; }
.dock-thumb:hover { transform: translateY(-8px) scale(1.15); opacity:1; }
.dock-thumb.active { transform: translateY(-10px) scale(1.2); opacity:1; box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 10px 24px var(--gold-glow); }

/* ---------- Featured strip (home) ---------- */
.feat-cta { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top: 2.4rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso); border-top: 1px solid var(--line); color: #E8E3DA; padding-block: clamp(3.5rem,8vh,5.5rem) 2rem; }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand img { height: 40px; width: auto; margin-bottom: 1.2rem; }
.footer-brand p { color: rgba(255,255,255,.6); max-width: 34ch; font-size:.95rem; }
.footer-col h4 { font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.footer-col a, .footer-col p { display:block; color: rgba(255,255,255,.72); font-size:.95rem; padding:.32rem 0; transition: color .3s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-family: var(--mono); font-size:.66rem; letter-spacing:.1em; color: rgba(255,255,255,.5); }
.footer-hours { font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); }

/* JDX Digital credit */
.footer-bottom { position: relative; }
.jdx-credit { display:flex; align-items:center; justify-content:center; width:100%; order: 99; margin-top: 1.6rem; flex-basis: 100%; }
.jdx-credit img { height: 30px; width: auto; display:block; filter: brightness(0) invert(1); opacity:.75; transition: opacity .3s var(--ease); }
.jdx-credit a:hover img { opacity: 1; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform: none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .nav, .header-cta .btn { display:none; }
  .menu-btn { display:block; }
  .feature { grid-template-columns: 1fr; }
  .feature.rev .feature-media { order: 0; }
  .grid-3, .quotes, .steps { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .doors { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2,1fr); grid-auto-rows: 96px; }
  .sp-a,.sp-e,.sp-f { grid-column: span 2; grid-row: span 3; }
  .sp-b,.sp-c,.sp-d { grid-column: span 1; grid-row: span 2; }
}
@media (max-width: 720px) {
  .split-hero { flex-direction: column; height: auto; }
  .split-panel { min-height: 46vh; flex: none; }
  .split-hero:hover .split-panel { flex: none; }
  .split-hero .split-panel:hover { flex: none; }
  .split-panel:first-child { min-height: 54vh; }
  .split-panel .p-eyebrow { display: none; }
  .hero-crest { top: 15%; width: min(92vw, 520px); }
  .hero-crest .mark { font-size: clamp(3rem, 13vw, 4.6rem); }
  .hero-seam { display:none; }
  .hero-scroll { display: none; }
  .split-body { text-align:center; padding-bottom: 2.4rem; }
  .split-body p { margin-inline:auto; font-size:.9rem; }
  .split-body h2 { font-size: clamp(2rem, 9vw, 3rem); }
}
@media (max-width: 560px) {
  .footer-col a, .footer-col p { font-size: .88rem; }
  .grid-3, .quotes, .quotes.pairs, .steps, .grid-2 { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .btn { padding: .9rem 1.4rem; }
}

@media (max-width: 820px) {
  .page-hero { grid-template-columns: 1fr; row-gap: 1.8rem; padding-top: clamp(6.5rem,16vh,8.5rem); }
  .page-hero .ph-inner { max-width: none; }
  .page-hero .ph-bg { min-height: clamp(280px,44vh,420px); }
  .choose { grid-template-columns: 1fr; }
  .choose-card .cc-img { aspect-ratio: 4/3.2; }
}

/* very narrow phones — two footer columns get too tight, stack them */
@media (max-width: 370px) {
  .footer-top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Small-screen safety: long Instagram handles must wrap, not overflow ---------- */
.card { min-width: 0; }
@media (max-width: 560px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; overflow-wrap: anywhere; letter-spacing: .12em; padding: .95rem 1.3rem; }
  .page-hero .ph-actions, .feat-cta { max-width: 100%; }
}


/* ============================================================
   Revised build additions
   ============================================================ */

/* Links inside running text */
.inline-link { color: var(--gold-deep); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.inline-link:hover { color: var(--ink); }
a.card { display:block; color: var(--ink); }
.card-link { display:inline-block; margin-top:1rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color: var(--gold-deep); overflow-wrap:anywhere; }

/* FAQ */
.faq-jump { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.6rem; }
.faq-jump a { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink); border-bottom:1px solid var(--gold); padding-bottom:.2rem; }
.faq-jump a:hover { color: var(--gold-deep); }
.faq-wrap { max-width: 860px; }
.faq-group { scroll-margin-top: 110px; }
.faq-group + .faq-group { margin-top: clamp(3rem,7vh,4.5rem); }
.faq-group h2 { font-size: clamp(1.7rem,3.2vw,2.4rem); margin-bottom: 1.2rem; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-of-type { border-top:1px solid var(--line); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.25rem 0; font-family: var(--serif); font-size: 1.22rem; line-height:1.3; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-family:var(--sans); font-weight:300; font-size:1.6rem; color: var(--gold); line-height:1; transition: transform .3s var(--ease); flex-shrink:0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-a { padding: 0 0 1.4rem; }
.faq-a p { color: var(--muted); max-width: 62ch; }

/* Aftercare lists + notice */
.tick-list { list-style:none; margin-top:1rem; display:grid; gap:.75rem; }
.tick-list li { position:relative; padding-left:1.6rem; color: var(--muted); }
.tick-list li::before { content:""; position:absolute; left:0; top:.62em; width:.75rem; height:1px; background: var(--gold); }
.notice { border:1px solid var(--gold); border-left-width:4px; padding: clamp(1.6rem,4vw,2.4rem); max-width: 860px; }
.notice h2 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom:.8rem; }
.notice p { color: var(--ink-soft); max-width: 64ch; }

/* Enquiry builder */
#enquire { scroll-margin-top: 80px; }
.enq { max-width: 900px; }
.enq-type { border:none; display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom: 1.8rem; }
.enq-type legend { font-family:var(--serif); font-size:1.3rem; margin-bottom:1rem; }
.enq-type label { position:relative; cursor:pointer; }
.enq-type input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.enq-type label { border:1px solid var(--line); padding:.75rem 1.2rem; font-size:.95rem; transition: border-color .3s, background .3s, color .3s; }
.enq-type label:has(input:checked) { border-color: var(--gold); background: var(--gold); color:#12100E; }
.enq-type label:has(input:focus-visible) { outline:2px solid var(--gold); outline-offset:3px; }
.enq-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.fld { display:flex; flex-direction:column; gap:.45rem; }
.fld[hidden], .enq-tip[hidden] { display:none; }
.fld-wide { grid-column: 1 / -1; }
.fld span, .enq-preview label { font-size:.88rem; color: var(--ink-soft); }
.fld input, .fld select, .fld textarea, .enq-preview textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border:1px solid var(--line); padding:.8rem .9rem; border-radius:0; width:100%;
  transition: border-color .3s; color-scheme: dark;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--gold); outline: none; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--muted); opacity: 1; }
.enq-tip { margin-top:1rem; color: var(--muted); font-size:.92rem; }
.enq-preview { margin-top: 1.8rem; display:flex; flex-direction:column; gap:.45rem; }
.enq-preview textarea { font-family: var(--mono); font-size:.85rem; line-height:1.6; background: var(--card-2); resize: vertical; }
.enq-actions { margin-top:1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.enq-status { color: var(--gold-deep); font-size:.95rem; max-width: 52ch; }

/* 404 */
.notfound { min-height: 70vh; display:flex; align-items:center; padding-top: clamp(8rem,16vh,11rem); }
.notfound h1 { font-size: clamp(2.4rem,6vw,4rem); margin:.7rem 0; }

@media (max-width: 940px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .enq-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 370px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* WhatsApp */
[data-wa-block][hidden], a[data-wa][hidden] { display: none !important; }
.wa-ico { flex-shrink: 0; }
.wa-strip { padding-top: 0; }
.wa-row { display:flex; justify-content:space-between; align-items:center; gap:1.4rem 2rem; flex-wrap:wrap; border:1px solid var(--line); background: var(--card); padding: clamp(1.6rem,4vw,2.4rem); }
.wa-row h2 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom:.4rem; }
.wa-row p { color: var(--muted); }

/* Long Instagram handles used as headings */
.handle { overflow-wrap: break-word; }
@media (max-width: 480px) { .handle { font-size: clamp(1.05rem, 5.2vw, 1.4rem); } }

/* Three contact doors: side by side only when there's room */
@media (max-width: 1100px) { .doors.three { grid-template-columns: 1fr; } }

/* Enquiry builder: second-level options */
.enq-type[hidden] { display: none; }
.enq-sub { margin-top: -.4rem; padding-left: 1.2rem; }
.enq-sub legend { font-family: var(--sans); font-size: .95rem; color: var(--ink-soft); margin-bottom: .8rem; }
.enq-sub label { font-size: .9rem; padding: .6rem 1rem; }