/* ============================================================
   Avroma Jewellers — implemented from "Avroma Jewellers.dc.html"
   ============================================================ */

:root{
  --carmine:#960018;
  --carmine-deep:#590200;
  --off:#F8F8F8;
  --grey:#B4B4B4;
  --ink:#373737;
  --paper:#F1EEEE;
  --tile:#ECE8E8;
  --pad-x:clamp(24px, 6vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--off);
  color:var(--carmine);
  font-family:'Jost', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-anchor:none;
}
::selection{ background:var(--carmine); color:var(--off); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
button{ font-family:'Jost', sans-serif; }

@keyframes avFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(7px); }
}

.page{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }

/* ---------- pre-render / no-JS fallback ----------
   #app carries a static copy of the homepage so crawlers and no-JS visitors
   get a real <h1> and description. app.js replaces it on boot, so this is
   only ever painted for a frame — styled so that frame looks like the site
   rather than raw markup. */
.prerender{
  max-width:1100px; margin:0 auto;
  padding:calc(92px + clamp(40px, 8vw, 90px)) var(--pad-x) clamp(60px, 10vw, 120px);
  font-weight:300; color:var(--ink);
}
.prerender h1{
  margin:0 0 28px; font-weight:200; color:var(--carmine);
  font-size:clamp(32px, 5vw, 62px); line-height:1.1; letter-spacing:-0.01em;
}
.prerender h2{
  margin:44px 0 14px; font-weight:300; color:var(--carmine);
  font-size:clamp(20px, 2.4vw, 28px);
}
.prerender p{ margin:0 0 16px; font-size:clamp(15px, 1.4vw, 18px); line-height:1.7; max-width:62ch; }
.prerender ul{ margin:0; padding-left:1.1em; line-height:1.9; font-size:clamp(15px, 1.4vw, 18px); }
.prerender a{ color:var(--carmine); border-bottom:1px solid rgba(150,0,24,0.3); }

/* Visually hidden, still read by screen readers and search engines. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{ transition:opacity 1.05s ease, transform 1.05s ease; }
[data-reveal="pending"]{ opacity:0; transform:translateY(26px); }

/* ---------- image slots ---------- */
.slot{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; background:var(--tile); }
.slot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  opacity:0; transition:opacity 0.8s ease;
}
.slot img.loaded{ opacity:1; }

/* ---------- header ---------- */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:120;
  height:92px;
  background:rgba(248,248,248,0);
  border-bottom:1px solid rgba(150,0,24,0);
  transition:height 0.5s ease, background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
}
#site-header.scrolled{
  height:70px;
  background:rgba(248,248,248,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(150,0,24,0.12);
}
.header-inner{
  max-width:1480px; margin:0 auto;
  padding:0 clamp(20px, 5vw, 64px);
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo-link{ display:flex; align-items:center; cursor:pointer; flex:0 0 auto; }
#site-logo{ height:26px; width:auto; display:block; transition:height 0.5s ease; }
#site-header.scrolled #site-logo{ height:20px; }
#site-nav{ display:flex; align-items:center; gap:clamp(18px, 2.6vw, 42px); }
#site-nav a{
  cursor:pointer;
  font-size:12px; font-weight:400;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--carmine); opacity:0.5; white-space:nowrap;
  transition:opacity 0.4s ease, letter-spacing 0.4s ease;
}
#site-nav a:hover{ opacity:1; letter-spacing:0.34em; }
#site-nav a.active{ opacity:1; }

/* Mobile menu toggle — hidden on desktop, becomes a burger/X below 860px */
#nav-toggle{
  display:none;
  width:32px; height:24px; padding:0;
  background:none; border:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:7px;
}
#nav-toggle span{
  display:block; width:100%; height:1px;
  background:var(--carmine);
  transition:transform 0.4s ease;
}
body.nav-open #nav-toggle span:first-child{ transform:translateY(4px) rotate(45deg); }
body.nav-open #nav-toggle span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ---------- shared type ---------- */
.kicker{
  margin:0 0 18px;
  font-size:11px; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--grey);
}
.page-title{
  margin:0; font-weight:200;
  font-size:clamp(40px, 7vw, 104px);
  line-height:0.98; letter-spacing:-0.01em;
}
.page-lede{
  margin:30px 0 0; max-width:56ch;
  font-weight:300; font-size:clamp(16px, 1.5vw, 20px);
  line-height:1.6; color:var(--ink);
}
.view-section{ padding-top:92px; }

/* ---------- buttons & links ---------- */
.btn-outline-light{
  cursor:pointer; display:inline-flex; align-items:center; gap:14px;
  color:var(--off); font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  border:1px solid rgba(248,248,248,0.55); padding:16px 30px;
  transition:all 0.5s ease;
}
.btn-outline-light:hover{ background:var(--off); color:var(--carmine); border-color:var(--off); }
.btn-solid{
  cursor:pointer; display:inline-block; padding:16px 32px;
  background:var(--carmine); color:var(--off);
  font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  transition:background 0.4s ease; border:none;
}
.btn-solid:hover{ background:var(--carmine-deep); }
.btn-outline{
  cursor:pointer; display:inline-block; padding:16px 32px;
  border:1px solid rgba(150,0,24,0.35); color:var(--carmine);
  font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  transition:all 0.4s ease;
}
.btn-outline:hover{ background:var(--carmine); color:var(--off); border-color:var(--carmine); }
.link-arrow{
  cursor:pointer; display:inline-flex; align-items:center; gap:14px;
  font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--carmine);
  border-bottom:1px solid rgba(150,0,24,0.4); padding-bottom:8px;
  transition:gap 0.4s ease, border-color 0.4s ease;
}
.link-arrow:hover{ gap:24px; border-color:var(--carmine); }
.link-back{
  cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--grey);
  transition:color 0.4s ease, gap 0.4s ease;
}
.link-back:hover{ color:var(--carmine); gap:16px; }

/* ============================================================
   HOME
   ============================================================ */
.hero{ position:relative; height:100vh; min-height:620px; width:100%; overflow:hidden; }
.hero .slot{ position:absolute; inset:0; }
.hero-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,5,8,0.30) 0%, rgba(20,5,8,0.12) 42%, rgba(20,5,8,0.58) 100%);
}
.hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(28px, 7vw, 96px);
  pointer-events:none;
}
.hero-kicker{
  margin:0 0 18px; color:var(--off);
  font-size:12px; font-weight:400; letter-spacing:0.42em; text-transform:uppercase;
  opacity:0.92;
}
.hero-title{
  margin:0; color:var(--off); font-weight:200;
  font-size:clamp(40px, 7.6vw, 118px);
  line-height:0.96; letter-spacing:-0.01em; max-width:14ch;
}
.hero-sub{
  margin:26px 0 0; color:var(--off); font-weight:300;
  font-size:clamp(15px, 1.5vw, 20px); letter-spacing:0.02em;
  max-width:46ch; opacity:0.94;
}
.hero-cta{ display:flex; align-items:center; gap:14px; margin-top:40px; pointer-events:auto; }
.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:var(--off); font-size:10px; letter-spacing:0.4em; text-transform:uppercase;
  opacity:0.8; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero-scroll .line{
  display:block; width:1px; height:42px;
  background:linear-gradient(var(--off), transparent);
  animation:avFloat 2.4s ease-in-out infinite;
}

.intro-statement{
  max-width:1100px; margin:0 auto;
  padding:clamp(80px, 13vw, 180px) var(--pad-x);
  text-align:center;
}
.intro-statement p{
  margin:0; font-weight:200;
  font-size:clamp(24px, 3.4vw, 46px);
  line-height:1.35; letter-spacing:-0.01em; color:var(--carmine);
}

.feature-split{ display:grid; grid-template-columns:repeat(2, 1fr); align-items:stretch; }
.feature-media{ position:relative; min-height:clamp(420px, 52vw, 760px); overflow:hidden; }
.feature-text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(36px, 6vw, 96px); background:var(--paper);
}
.feature-kicker{ margin:0 0 22px; font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--grey); }
.feature-title{ margin:0; font-weight:200; font-size:clamp(34px, 5vw, 72px); line-height:1; letter-spacing:0.02em; }
.feature-desc{
  margin:30px 0 0; font-weight:300;
  font-size:clamp(15px, 1.4vw, 19px); line-height:1.6;
  color:var(--ink); max-width:42ch;
}
.feature-text .link-arrow{ margin-top:42px; align-self:flex-start; }

.teaser-wrap{ padding:clamp(80px, 12vw, 160px) var(--pad-x); max-width:1480px; margin:0 auto; }
.teaser-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:clamp(36px, 5vw, 64px);
}
.teaser-head h2{ margin:0; font-weight:200; font-size:clamp(30px, 4.4vw, 60px); letter-spacing:-0.01em; }
.link-quiet{
  cursor:pointer; flex:0 0 auto;
  font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--grey); padding-bottom:6px;
  border-bottom:1px solid transparent;
  transition:color 0.4s ease, border-color 0.4s ease;
}
.link-quiet:hover{ color:var(--carmine); border-color:var(--carmine); }
.teaser-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(14px, 1.6vw, 24px);
}
.teaser-card{ cursor:pointer; position:relative; display:block; }
.teaser-cover{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--tile); }
.teaser-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:18px 2px 0;
}
.teaser-meta h3{ margin:0; font-weight:300; font-size:22px; letter-spacing:0.02em; }
.teaser-meta .season{
  font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap;
}
.teaser-count{ margin:7px 2px 0; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--grey); }

.about-teaser{
  position:relative; background:var(--ink); color:var(--off);
  padding:clamp(80px, 12vw, 170px) var(--pad-x);
}
.about-teaser-inner{ max-width:920px; margin:0 auto; text-align:center; }
.about-teaser-inner .kicker{ margin-bottom:26px; }
.about-teaser-inner p.statement{ margin:0; font-weight:200; font-size:clamp(22px, 3vw, 40px); line-height:1.4; }
.btn-outline-dark{
  cursor:pointer; margin-top:46px; display:inline-flex; align-items:center; gap:14px;
  font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--off); border:1px solid rgba(248,248,248,0.4); padding:16px 32px;
  transition:all 0.5s ease;
}
.btn-outline-dark:hover{ background:var(--off); color:var(--ink); }

/* ============================================================
   LOOKBOOKS OVERVIEW
   ============================================================ */
.catalogue-head{
  max-width:1480px; margin:0 auto;
  padding:clamp(56px, 9vw, 120px) var(--pad-x) clamp(28px, 4vw, 56px);
}
.lb-rows{ display:flex; flex-direction:column; }
.lb-row{
  cursor:pointer; display:grid; grid-template-columns:repeat(2, 1fr);
  border-top:1px solid rgba(150,0,24,0.14);
}
.lb-row-media{ position:relative; overflow:hidden; min-height:clamp(380px, 46vw, 640px); }
.lb-row.reverse .lb-row-media{ order:2; }
.lb-row-text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px, 6vw, 90px);
}
.lb-row.reverse .lb-row-text{ order:1; }
.lb-row-idx{ font-size:13px; letter-spacing:0.3em; color:var(--grey); }
.lb-row-text h2{ margin:20px 0 0; font-weight:200; font-size:clamp(34px, 5vw, 66px); line-height:1; letter-spacing:0.01em; }
.lb-row-season{ margin:14px 0 0; font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--carmine); }
.lb-row-tagline{
  margin:26px 0 0; font-weight:300;
  font-size:clamp(15px, 1.4vw, 19px); line-height:1.65;
  color:var(--ink); max-width:44ch;
}
.lb-row .link-arrow{ margin-top:38px; align-self:flex-start; }
.lb-row:hover .link-arrow{ gap:24px; }

/* ============================================================
   LOOKBOOK (magazine) PAGE
   ============================================================ */
.lb-head{
  max-width:1480px; margin:0 auto;
  padding:clamp(48px, 7vw, 96px) var(--pad-x) 0;
}
.lb-title-row{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(20px, 4vw, 64px); align-items:end;
  margin-top:clamp(28px, 4vw, 52px);
}
.lb-big-idx{
  font-weight:200; font-size:clamp(40px, 6vw, 84px);
  line-height:0.8; color:rgba(150,0,24,0.25);
}
.lb-title-row h1{ margin:0; font-weight:200; font-size:clamp(40px, 7vw, 100px); line-height:0.94; letter-spacing:-0.01em; }
.lb-title-meta{ margin:16px 0 0; font-size:11px; letter-spacing:0.34em; text-transform:uppercase; color:var(--carmine); }
.lb-story{
  margin:clamp(28px, 4vw, 48px) 0 0; max-width:64ch;
  font-weight:300; font-size:clamp(16px, 1.5vw, 21px);
  line-height:1.65; color:var(--ink);
}
.lb-body{
  max-width:1480px; margin:0 auto;
  padding:clamp(48px, 7vw, 96px) var(--pad-x) clamp(80px, 11vw, 150px);
}
.mag-grid{
  display:grid; grid-template-columns:repeat(12, 1fr);
  gap:clamp(12px, 1.6vw, 26px); align-items:start;
}
.mag-tile{
  position:relative; overflow:hidden;
  background:var(--tile); cursor:pointer;
}
.mag-tile .slot img{ transition:opacity 0.8s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mag-tile:hover .slot img{ transform:scale(1.05); }
.mag-tile-overlay{
  position:absolute; inset:0; pointer-events:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(18px, 2vw, 28px);
  background:linear-gradient(180deg, rgba(20,5,8,0) 35%, rgba(20,5,8,0.62) 100%);
  opacity:0; transition:opacity 0.6s ease;
}
.mag-tile:hover .mag-tile-overlay{ opacity:1; pointer-events:auto; }
.mag-tile-pill{
  cursor:pointer; align-self:flex-start;
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--off); background:rgba(20,5,8,0.42);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:10px 16px;
}
.pull-quote{ padding:clamp(52px, 8vw, 128px) 0; max-width:24ch; }
.pull-quote .season{ margin:0 0 18px; font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--grey); }
.pull-quote .quote{
  margin:0; font-weight:200;
  font-size:clamp(28px, 4.2vw, 62px);
  line-height:1.12; letter-spacing:-0.01em; color:var(--carmine);
}

/* ============================================================
   LOOK (product) PAGE
   ============================================================ */
.look-back{ max-width:1480px; margin:0 auto; padding:clamp(40px, 6vw, 80px) var(--pad-x) 0; }
.look-grid{
  max-width:1480px; margin:0 auto;
  padding:clamp(28px, 4vw, 52px) var(--pad-x) clamp(60px, 8vw, 110px);
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(32px, 5vw, 80px); align-items:start;
}
.look-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--tile); }
.look-panel{ position:sticky; top:120px; }
.look-crumb{ cursor:pointer; font-size:11px; letter-spacing:0.34em; text-transform:uppercase; color:var(--grey); }
.look-panel h1{ margin:16px 0 0; font-weight:200; font-size:clamp(36px, 4.6vw, 68px); line-height:1; letter-spacing:-0.005em; }
.look-metal{ margin:18px 0 0; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--carmine); }
.look-story{
  margin:28px 0 0; font-weight:300;
  font-size:clamp(16px, 1.4vw, 20px); line-height:1.7;
  color:var(--ink); max-width:46ch;
}
.spec-table{ margin:36px 0 0; border-top:1px solid rgba(150,0,24,0.14); display:flex; flex-direction:column; }
.spec-row{
  display:flex; justify-content:space-between;
  padding:16px 0; font-size:14px;
  border-bottom:1px solid rgba(150,0,24,0.1);
}
.spec-row:last-child{ border-bottom:none; }
.spec-row .k{ color:var(--grey); letter-spacing:0.16em; text-transform:uppercase; font-size:11px; }
.spec-row .v{ color:var(--ink); font-weight:300; }
.look-cta{
  cursor:pointer; margin-top:34px; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 26px; background:var(--carmine); color:var(--off);
  font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  border:none; transition:background 0.4s ease;
}
.look-cta:hover{ background:var(--carmine-deep); }
.look-note{ margin:16px 2px 0; font-size:13px; font-weight:300; color:var(--grey); line-height:1.6; }

.pieces-wrap{
  max-width:1480px; margin:0 auto;
  padding:0 var(--pad-x) clamp(56px, 7vw, 90px);
  scroll-margin-top:90px;
}
.pieces-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-bottom:clamp(24px, 3vw, 40px);
}
.pieces-head h2{ margin:0; font-weight:200; font-size:clamp(24px, 2.8vw, 38px); }
.pieces-head .tag{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--grey); }
.pieces-scroller{
  display:flex; gap:clamp(14px, 1.8vw, 28px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:8px;
  scrollbar-width:thin; scrollbar-color:rgba(150,0,24,0.3) transparent;
}
.piece-card{
  flex:0 0 auto;
  width:clamp(220px, calc((100% - 3 * clamp(14px, 1.8vw, 28px)) / 4), 360px);
  scroll-snap-align:start;
}
.piece-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--tile); }
.piece-meta{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding-top:14px;
}
.piece-meta .name{ font-size:13px; font-weight:300; color:var(--ink); }
.piece-enquire{
  cursor:pointer; font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--carmine); background:none; border:none; padding:0 0 3px;
  border-bottom:1px solid rgba(150,0,24,0.35);
  transition:border-color 0.3s ease;
}
.piece-enquire:hover{ border-color:var(--carmine); }

.siblings-wrap{
  max-width:1480px; margin:0 auto;
  padding:0 var(--pad-x) clamp(80px, 11vw, 140px);
  border-top:1px solid rgba(150,0,24,0.14);
}
.siblings-wrap h2{
  margin:clamp(48px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
  font-weight:200; font-size:clamp(26px, 3vw, 40px);
}
.siblings-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2vw, 32px); }
.sibling-card{ cursor:pointer; display:block; }
.sibling-media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--tile); }
.sibling-media .slot img{ transition:opacity 0.8s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sibling-card:hover .slot img{ transform:scale(1.05); }
.sibling-card h3{ margin:14px 0 0; font-weight:300; font-size:17px; }
.sibling-card .metal{ margin:5px 0 0; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--grey); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-head{
  max-width:1080px; margin:0 auto;
  padding:clamp(56px, 9vw, 130px) var(--pad-x) clamp(48px, 6vw, 90px);
}
.about-head h1{ margin:0; font-weight:200; font-size:clamp(40px, 6.6vw, 96px); line-height:1; letter-spacing:-0.01em; }
.about-head .kicker{ margin-bottom:22px; }
.about-hero{ position:relative; height:clamp(360px, 52vw, 680px); overflow:hidden; }
.about-body{ max-width:1080px; margin:0 auto; padding:clamp(56px, 8vw, 120px) var(--pad-x); }
.about-cols{
  display:grid; grid-template-columns:1fr 1.3fr;
  gap:clamp(28px, 5vw, 80px); align-items:start;
}
.about-cols h2{
  margin:0; font-weight:200;
  font-size:clamp(26px, 3.2vw, 44px);
  line-height:1.2; letter-spacing:-0.005em;
}
.about-cols p{
  margin:0; font-weight:300;
  font-size:clamp(16px, 1.4vw, 19px); line-height:1.75; color:var(--ink);
}
.about-cols p + p{ margin-top:24px; }
.about-stats{ background:var(--ink); color:var(--off); }
.about-stats-inner{
  max-width:1280px; margin:0 auto;
  padding:clamp(56px, 8vw, 110px) var(--pad-x);
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(28px, 4vw, 56px);
}
.stat .big{ margin:0; font-weight:200; font-size:clamp(40px, 5vw, 64px); line-height:1; color:var(--off); }
.stat .small{ margin:14px 0 0; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--grey); }
.about-cta{
  max-width:1080px; margin:0 auto;
  padding:clamp(64px, 9vw, 130px) var(--pad-x);
  text-align:center;
}
.about-cta p{ margin:0; font-weight:200; font-size:clamp(22px, 3vw, 40px); line-height:1.4; }
.about-cta .actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:40px; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-head{
  max-width:1480px; margin:0 auto;
  padding:clamp(56px, 9vw, 130px) var(--pad-x) clamp(28px, 4vw, 52px);
}
.services-list-wrap{
  max-width:1480px; margin:0 auto;
  padding:clamp(40px, 6vw, 80px) var(--pad-x) clamp(80px, 11vw, 150px);
}
.services-list{ display:flex; flex-direction:column; }
.service-row{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(20px, 4vw, 64px); align-items:baseline;
  padding:clamp(28px, 4vw, 52px) 0;
  border-top:1px solid rgba(150,0,24,0.14);
}
.services-list::after{ content:""; display:block; border-top:1px solid rgba(150,0,24,0.14); }
.service-no{ font-weight:200; font-size:clamp(22px, 2.4vw, 32px); color:rgba(150,0,24,0.3); }
.service-row h2{ margin:0; font-weight:300; font-size:clamp(26px, 3.2vw, 46px); line-height:1.05; letter-spacing:0.005em; }
.service-row .desc{
  margin:18px 0 0; max-width:60ch;
  font-weight:300; font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.65; color:var(--ink);
}
.service-enquire{
  cursor:pointer; white-space:nowrap;
  font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--carmine); padding-bottom:6px;
  border-bottom:1px solid rgba(150,0,24,0.35);
  transition:border-color 0.3s ease;
}
.service-enquire:hover{ border-color:var(--carmine); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-head{
  max-width:1480px; margin:0 auto;
  padding:clamp(56px, 9vw, 130px) var(--pad-x) clamp(40px, 6vw, 80px);
}
.contact-grid{
  max-width:1480px; margin:0 auto;
  padding:0 var(--pad-x) clamp(80px, 11vw, 150px);
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(32px, 5vw, 80px); align-items:start;
}
.contact-details{ display:flex; flex-direction:column; gap:clamp(28px, 4vw, 44px); }
.contact-label{ margin:0 0 12px; font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--grey); }
.contact-big{ margin:0; font-weight:300; font-size:clamp(20px, 2vw, 26px); line-height:1.5; color:var(--ink); }
.contact-tel{
  display:block; font-weight:300;
  font-size:clamp(20px, 2vw, 26px); color:var(--carmine);
  transition:color 0.3s ease;
}
.contact-tel:hover{ color:var(--carmine-deep); }
.contact-tel + .contact-tel{ margin-top:6px; }
.contact-insta{
  display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:100%;
  font-weight:300; font-size:clamp(20px, 2vw, 26px); color:var(--carmine);
  border-bottom:1px solid rgba(150,0,24,0.3); padding-bottom:6px;
  transition:gap 0.3s ease;
}
.contact-insta:hover{ gap:20px; }
.contact-social-second{ margin-top:28px; }
.contact-social-note{ margin:0 0 8px; font-weight:300; font-size:14px; color:var(--grey); }
.contact-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--tile); }

/* Google Maps preview — the cover sits above the iframe so a click opens
   directions rather than panning the embedded map. */
.contact-map{ display:block; cursor:pointer; }
.contact-map-frame{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; pointer-events:none;
  filter:grayscale(0.35) contrast(0.98);
  transition:filter 0.5s ease;
}
.contact-map:hover .contact-map-frame{ filter:grayscale(0) contrast(1); }
.contact-map-cover{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:clamp(16px, 2vw, 24px);
  background:linear-gradient(180deg, rgba(20,5,8,0) 55%, rgba(20,5,8,0.30) 100%);
  transition:background 0.45s ease;
}
.contact-map:hover .contact-map-cover{
  background:linear-gradient(180deg, rgba(20,5,8,0.06) 35%, rgba(20,5,8,0.48) 100%);
}
.contact-map-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--off); background:rgba(20,5,8,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:11px 17px;
  transition:gap 0.35s ease, background 0.35s ease;
}
.contact-map:hover .contact-map-cta{ gap:18px; background:var(--carmine); }
.contact-band{ background:var(--carmine); color:var(--off); }
.contact-band-inner{
  max-width:1080px; margin:0 auto;
  padding:clamp(56px, 8vw, 110px) var(--pad-x);
  text-align:center;
}
.contact-band-inner p{ margin:0; font-weight:200; font-size:clamp(24px, 3.2vw, 44px); line-height:1.35; }
.contact-band-btn{
  display:inline-block; margin-top:40px; padding:18px 38px;
  background:var(--off); color:var(--carmine);
  font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  transition:opacity 0.4s ease;
}
.contact-band-btn:hover{ opacity:0.88; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--carmine-deep); color:var(--off); }
.footer-inner{
  max-width:1480px; margin:0 auto;
  padding:clamp(56px, 8vw, 96px) var(--pad-x) clamp(36px, 5vw, 52px);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(32px, 5vw, 64px); align-items:start;
}
.footer-logo{ height:34px; width:auto; opacity:0.95; }
.footer-blurb{
  margin:26px 0 0; font-weight:300; font-size:15px; line-height:1.7;
  color:rgba(248,248,248,0.72); max-width:34ch;
}
.footer-heading{
  margin:0 0 20px; font-size:11px; letter-spacing:0.32em;
  text-transform:uppercase; color:rgba(248,248,248,0.5);
}
.footer-links{ display:flex; flex-direction:column; gap:13px; }
.footer-links a{
  cursor:pointer; font-weight:300; font-size:15px;
  color:rgba(248,248,248,0.82);
  transition:color 0.3s ease, padding-left 0.3s ease;
}
.footer-links a:hover{ color:var(--off); padding-left:6px; }
.footer-text{ margin:0; font-weight:300; font-size:15px; line-height:1.8; color:rgba(248,248,248,0.82); }
.footer-insta{
  display:inline-block; margin-top:16px;
  font-size:13px; letter-spacing:0.2em;
  color:rgba(248,248,248,0.82);
  border-bottom:1px solid rgba(248,248,248,0.3); padding-bottom:4px;
  transition:color 0.3s ease;
}
.footer-insta:hover{ color:var(--off); }
.footer-base{
  margin-top:clamp(40px, 6vw, 72px); padding-top:26px;
  border-top:1px solid rgba(248,248,248,0.16);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(248,248,248,0.5);
}

/* ============================================================
   ENQUIRE OVERLAY
   ============================================================ */
.enquire-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(30,8,11,0.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.enquire-overlay[hidden]{ display:none; }
.enquire-card{
  background:var(--off); max-width:520px; width:100%;
  padding:clamp(32px, 5vw, 56px); position:relative;
}
.enquire-close{
  position:absolute; top:20px; right:22px;
  background:none; border:none; cursor:pointer;
  font-size:13px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--grey);
}
.enquire-kicker{ margin:0 0 14px; font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--grey); }
.enquire-title{ margin:0; font-weight:200; font-size:clamp(26px, 3.4vw, 38px); line-height:1.1; }
.enquire-body{ margin:20px 0 0; font-weight:300; font-size:16px; line-height:1.7; color:var(--ink); }
.enquire-actions{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.enquire-primary{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; background:var(--carmine); color:var(--off);
  font-size:13px; letter-spacing:0.24em; text-transform:uppercase;
}
.enquire-secondary{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border:1px solid rgba(150,0,24,0.3); color:var(--carmine);
  font-size:13px; letter-spacing:0.24em; text-transform:uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .feature-split,
  .lb-row,
  .look-grid,
  .about-cols,
  .contact-grid{ grid-template-columns:1fr; }
  .lb-row.reverse .lb-row-media{ order:1; }
  .lb-row.reverse .lb-row-text{ order:2; }
  .look-panel{ position:static; }
  .siblings-grid{ grid-template-columns:repeat(2, 1fr); }
  .about-stats-inner{ grid-template-columns:1fr; }
  .service-row{ grid-template-columns:auto 1fr; }
  .service-row .service-enquire{ grid-column:2; justify-self:start; }
  .footer-grid{ grid-template-columns:1fr; }
  .mag-tile{ grid-column:span 12 !important; }

  /* The scroll cue sits at the bottom of the hero, where it collided with the
     "Explore Lookbooks" button once the hero content stacks. Mobile users
     scroll by instinct, so the cue is redundant here. */
  .hero-scroll{ display:none; }

  /* Five letterspaced links cannot fit a phone's width, so the inline nav
     becomes a full-screen menu behind a toggle. */
  #nav-toggle{ display:flex; position:relative; z-index:2; }
  .logo-link{ position:relative; z-index:2; }
  #site-nav{
    position:fixed; inset:0; z-index:1;
    background:var(--off);
    flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(20px, 4.5vh, 36px);
    opacity:0; visibility:hidden;
    transition:opacity 0.4s ease, visibility 0.4s ease;
  }
  body.nav-open #site-nav{ opacity:1; visibility:visible; }
  body.nav-open{ overflow:hidden; }
  /* A backdrop-filter makes the header the containing block for its
     position:fixed descendants, which collapsed the full-screen menu into the
     70px header bar. Toggling the filter off on open is not enough: it sits in
     the header's 0.5s transition, so the broken state stays on screen for the
     length of the animation. On mobile the blur is dropped altogether in favour
     of a near-opaque bar, so the header never becomes a containing block and
     the menu is correct on the very first frame. */
  #site-header.scrolled{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(248,248,248,0.97);
  }
  #site-nav a{ font-size:15px; letter-spacing:0.3em; opacity:0.65; }
  #site-nav a:hover{ letter-spacing:0.3em; }
  #site-nav a.active{ opacity:1; }
}
@media (max-width: 640px){
  #site-logo{ height:20px; }
  .siblings-grid{ grid-template-columns:1fr; }
}