/* Camp Pink — project styles. Loaded after mobius.css (the vendored framework,
   never edited). Mobius sets body/html to a centred white page and defines a
   global .card, so this file pins the page ground and uses .pkg-card instead. */

:root{
  --ink:#0E090D;
  --ink-2:#191216;
  --surface:#1D141C;
  --surface-2:#241A20;
  --line:#40303A;
  --line-soft:#2C1F26;
  --gold:#D4AD66;
  --gold-soft:#987B48;
  --ember:#D6796C;
  --ember-soft:#95564A;
  --ivory:#FBF7F2;
  --fog:#C6B9B7;
  --fog-dim:#8B7C7A;
  color-scheme: dark;
  background:var(--ink);
}
img{ filter:saturate(1.12) contrast(1.05); }

*{ box-sizing:border-box; }
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--gold); color:var(--ink); }

h1,h2,h3{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:440;
  line-height:1.06;
  letter-spacing:-0.01em;
  text-wrap:balance;
  color:var(--ivory);
  margin:0;
}
p{ margin:0; }
a{ color:inherit; }

.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.7rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:1.4em; height:1px;
  background:var(--gold-soft);
  display:inline-block;
}

.wrap{
  max-width:1640px;
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 64px);
}

/* ---------- ambient layers ---------- */
#glow-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  opacity:0.75;
}
#grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:overlay; opacity:0.05;
}
#cursor-glow{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(320px 320px at var(--cx,50%) var(--cy,50%), rgba(201,166,107,0.10), transparent 70%);
  transition:opacity .3s ease; opacity:0;
}
@media (hover:hover) and (pointer:fine){ #cursor-glow{ opacity:1; } }

main[body], footer[footer]{ position:relative; z-index:2; }

/* ---------- nav ---------- */
nav[nav]{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:10;
  background:transparent;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
}
.wordmark{
  font-family:'Fraunces', serif; font-weight:500; font-size:1.05rem;
  letter-spacing:0.06em; text-transform:uppercase; text-decoration:none;
  display:flex; align-items:center; gap:0.55em;
}
.logo-mark{ width:34px; height:auto; flex:none; }
.nav-links{
  display:flex; align-items:center; gap:clamp(16px,3vw,32px);
  font-size:0.86rem;
}
.nav-link{
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--fog); transition:color .25s ease;
}
.nav-link:hover, .nav-link:focus-visible{ color:var(--ivory); }
.nav-links .links-group{ display:flex; gap:clamp(14px,2.4vw,28px); }
@media (max-width:640px){ .nav-links .links-group{ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  padding:0.72em 1.3em;
  border-radius:2px;
  font-size:0.86rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn-solid{
  background:linear-gradient(135deg, var(--gold), var(--gold-soft));
  color:#1B140D;
}
.btn-solid:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(201,166,107,0.55); }
.btn-ghost{
  background:transparent; color:var(--ivory); border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--gold-soft); background:rgba(201,166,107,0.06); }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(100px,20vh,190px) clamp(80px,15vh,140px);
  text-align:left;
}
.hero .wrap.kinetic{ position:relative; z-index:1; }

.hero-grid{
  display:grid; grid-template-columns:1.08fr 0.92fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-collage{
  position:relative;
  height:clamp(380px,46vw,600px);
  opacity:0; transform:translateY(14px);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:.5s;
}
@media (prefers-reduced-motion:reduce){ .hero-collage{ animation:none; opacity:1; transform:none; } }
.hero-collage::before{
  content:""; position:absolute; inset:-12%;
  background:radial-gradient(55% 55% at 50% 50%, rgba(201,123,114,0.28), transparent 70%);
  filter:blur(44px); z-index:0; pointer-events:none;
}
.hero-collage figure{
  margin:0; position:absolute; overflow:hidden; z-index:1;
  border:3px solid var(--ink);
  outline:1px solid rgba(201,166,107,0.5);
  border-radius:4px;
  box-shadow:0 22px 44px -18px rgba(0,0,0,0.65);
  transition:transform .35s ease, box-shadow .35s ease, z-index 0s;
}
.hero-collage figure:hover{ box-shadow:0 30px 55px -18px rgba(0,0,0,0.75); z-index:9; }
.hero-collage img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-collage .c1{ width:46%; aspect-ratio:4/5; top:2%; left:2%; transform:rotate(-5deg); }
.hero-collage .c1:hover{ transform:rotate(-5deg) translateY(-6px); }
.hero-collage .c2{ width:42%; aspect-ratio:3/4; top:4%; right:0; transform:rotate(6deg); }
.hero-collage .c2:hover{ transform:rotate(6deg) translateY(-6px); }
.hero-collage .c3{ width:38%; aspect-ratio:1/1; bottom:6%; left:0; transform:rotate(7deg); }
.hero-collage .c3:hover{ transform:rotate(7deg) translateY(-6px); }
.hero-collage .c4{ width:40%; aspect-ratio:4/5; bottom:0; right:10%; transform:rotate(-7deg); }
.hero-collage .c4:hover{ transform:rotate(-7deg) translateY(-6px); }
.hero-collage .c5{ width:24%; aspect-ratio:1/1; top:40%; left:38%; transform:rotate(-3deg); border-radius:50%; }
.hero-collage .c5:hover{ transform:rotate(-3deg) translateY(-6px); }
@media (max-width:900px){
  .hero-collage{
    height:auto; display:flex; gap:14px; overflow-x:auto;
    padding-block:8px 12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .hero-collage::before{ display:none; }
  .hero-collage figure{
    position:static; transform:none !important; flex:0 0 60%;
    aspect-ratio:4/5; scroll-snap-align:start;
  }
}
.hero-kick{ margin-bottom:22px; }
.hero h1{
  font-size:clamp(2.6rem, 1.4rem + 5.2vw, 5.9rem);
  font-weight:480;
  max-width:16ch;
}
.hero .accent{ font-style:italic; font-weight:400; color:var(--ember); }
.hero-sub{
  margin-top:28px;
  max-width:52ch;
  font-size:clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  color:var(--fog);
}
.hero-cta{
  margin-top:40px;
  display:flex; flex-wrap:wrap; gap:14px;
}
.kinetic > *{
  opacity:0; transform:translateY(18px);
  animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.kinetic > *:nth-child(1){ animation-delay:.05s; }
.kinetic > *:nth-child(2){ animation-delay:.18s; }
.kinetic > *:nth-child(3){ animation-delay:.32s; }
.kinetic > *:nth-child(4){ animation-delay:.46s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .kinetic > *{ animation:none; opacity:1; transform:none; }
}

.scroll-cue{
  margin-top:clamp(48px,9vh,88px);
  display:flex; align-items:center; gap:12px;
  color:var(--fog-dim); font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
}
.scroll-cue .line{
  width:1px; height:38px; background:linear-gradient(var(--gold), transparent);
  animation:drop 2.2s ease-in-out infinite;
}
@keyframes drop{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .scroll-cue .line{ animation:none; opacity:.6; } }

/* ---------- sections generic ---------- */
section{ padding-block:clamp(64px,10vh,120px); position:relative; }
.section-head{ max-width:62ch; margin-bottom:clamp(36px,6vh,56px); }
.section-head h2{ margin-top:14px; font-size:clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem); }

.reveal{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }
.reveal.pending{ opacity:0; transform:translateY(26px); }

/* ---------- about ---------- */
.about-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,56px);
  align-items:center;
}
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.about-media{
  aspect-ratio:1/1; max-width:440px; margin-inline:auto;
  overflow:hidden;
  clip-path:url(#heart-clip);
  position:relative;
}
.about-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-media::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 6px var(--gold), inset 0 0 60px 10px rgba(19,13,18,0.35);
  pointer-events:none;
}
@media (max-width:820px){ .about-media{ max-width:340px; } }
.about-body{ max-width:60ch; color:var(--fog); font-size:1.05rem; }

.atmosphere-band{
  position:relative; height:clamp(260px,44vh,440px); overflow:hidden;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.atmosphere-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.atmosphere-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,13,18,0.1) 0%, rgba(19,13,18,0.75) 100%);
}
.atmosphere-caption{
  position:relative; z-index:1; height:100%;
  display:flex; align-items:flex-end;
  padding-block:clamp(20px,4vh,40px);
}
.atmosphere-caption p{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.2rem, 1rem + 1.6vw, 1.9rem);
  color:var(--ivory); max-width:20ch;
}
.quote{
  margin-top:clamp(40px,7vh,64px);
  border-top:1px solid var(--line-soft);
  padding-top:clamp(32px,5vh,44px);
}
.quote p{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.5rem, 1.1rem + 2vw, 2.4rem);
  max-width:18ch; color:var(--ivory);
}

.pillars{
  margin-top:clamp(48px,8vh,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }
.pillar{
  background:var(--ink);
  padding:clamp(24px,4vw,36px);
  display:flex; flex-direction:column; gap:14px;
}
.pillar .num{ font-family:'IBM Plex Mono',monospace; color:var(--ember); font-size:0.78rem; letter-spacing:0.14em; }
.pillar h3{ font-size:1.25rem; font-weight:500; }
.pillar p{ color:var(--fog); font-size:0.95rem; max-width:34ch; }

/* ---------- moments gallery (true masonry via CSS columns, no fixed spans) ---------- */
.gallery{
  column-count:4;
  column-gap:10px;
}
@media (max-width:1100px){ .gallery{ column-count:3; } }
@media (max-width:760px){ .gallery{ column-count:2; } }
.gallery figure{
  margin:0 0 10px; position:relative; overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}
.gallery img{
  width:100%; height:auto; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,13,18,0) 60%, rgba(19,13,18,0.32) 100%);
  pointer-events:none;
}

/* ---------- collections ---------- */
.collections-band{
  background:linear-gradient(180deg, var(--ink) 0%, var(--surface) 100%);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1.1rem;
}
.pkg-card{
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:1.4rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pkg-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-soft);
  box-shadow:0 22px 40px -24px rgba(0,0,0,0.6);
}
.swatch{
  height:190px; width:100%;
  border:1px solid rgba(255,255,255,0.08);
  position:relative; overflow:hidden;
}
.swatch img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.pkg-card:hover .swatch img{ transform:scale(1.045); }
.swatch::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120px 60px at 80% 20%, rgba(255,255,255,0.14), transparent 70%),
    linear-gradient(180deg, rgba(19,13,18,0) 55%, rgba(19,13,18,0.45) 100%);
  pointer-events:none;
}
.pkg-card h3{ font-size:1.15rem; font-weight:500; }
.pkg-card p{ color:var(--fog); font-size:0.92rem; }
.pkg-card .idx{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--fog-dim); letter-spacing:0.14em; }

.sw-white{ background:linear-gradient(135deg,#fbf4e8,#dcc9a8); }
.sw-red{ background:linear-gradient(135deg,#5c1418,#c9564f); }
.sw-luxury{ background:linear-gradient(135deg,#e7c98a,#5a3a1a); }
.sw-multi{ background:conic-gradient(from 200deg, #c9a66b, #c97b72, #5c1418, #8e7549, #c9a66b); }
.sw-violinist{ background:linear-gradient(135deg,#0e1c29,#7a2320,#c97b72); }

/* ---------- digital moment demo ---------- */
.device{ margin-top:clamp(36px,6vh,56px); text-align:center; }
.device-frame{
  position:relative; max-width:620px; margin-inline:auto;
  aspect-ratio:16/10;
  border-radius:16px;
  padding:10px;
  background:linear-gradient(160deg,#2b2126,#0f0a0d);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.device-frame::before{
  content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:#000;
  box-shadow:0 0 0 2px rgba(255,255,255,0.06); z-index:2;
}
.device-screen{
  position:relative; height:100%; width:100%;
  border-radius:10px; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #241a1f 0%, var(--ink) 72%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px;
}
.device-glow{
  position:absolute; inset:-20% -10% auto -10%; height:60%;
  background:radial-gradient(closest-side, rgba(201,166,107,0.25), transparent);
  filter:blur(6px); pointer-events:none;
}
.heart-outline{ display:block; width:34px; height:30px; fill:none; stroke:var(--gold); stroke-width:2.4; opacity:.9; }
.device-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:.2em;
  color:var(--fog-dim); text-transform:uppercase;
}
.device-screen h3{ font-size:clamp(1.6rem,1.3rem + 1.4vw,2.3rem); position:relative; z-index:1; }
.device-sub{ color:var(--fog); font-size:1rem; max-width:28ch; position:relative; z-index:1; }
.device-actions{
  display:flex; gap:14px; margin-top:6px; position:relative;
  height:52px; align-items:center; justify-content:center; width:100%; z-index:1;
}
#demo-no{ transition:transform .25s ease; }
.device-caption{
  margin-top:16px; font-size:.78rem; color:var(--fog-dim);
  font-family:'IBM Plex Mono',monospace; letter-spacing:.05em;
}
.device-screen.celebrate::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:10px; height:10px; border-radius:50%; background:transparent;
  box-shadow:0 0 0 0 rgba(201,166,107,.55);
  animation:pulse 1s ease-out forwards;
}
@keyframes pulse{ to{ box-shadow:0 0 0 260px rgba(201,166,107,0); } }
@media (prefers-reduced-motion:reduce){
  .device-screen.celebrate::after{ animation:none; }
}

/* ---------- exact reference recreation (pink mockup) ---------- */
.mock-tags{
  text-align:center; font-family:'IBM Plex Mono',monospace; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fog-dim); margin-bottom:14px;
}
.pink-mockup .device-screen{
  align-items:flex-start; justify-content:flex-start; text-align:left; gap:6px;
  padding:20px 22px;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,0.10), transparent 40%),
    radial-gradient(140% 120% at 88% 100%, #ff2f87 0%, #b31865 35%, #3a0e33 70%, #150610 100%);
}
.mock-bokeh{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.mock-bokeh span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%);
  animation:mockdrift 7s ease-in-out infinite; opacity:.55;
}
.mock-bokeh span:nth-child(1){ width:6px;height:6px; top:12%; left:20%; animation-delay:0s; }
.mock-bokeh span:nth-child(2){ width:4px;height:4px; top:30%; left:8%; animation-delay:1.1s; }
.mock-bokeh span:nth-child(3){ width:8px;height:8px; top:60%; left:15%; animation-delay:2s; }
.mock-bokeh span:nth-child(4){ width:5px;height:5px; top:78%; left:30%; animation-delay:.6s; }
.mock-bokeh span:nth-child(5){ width:5px;height:5px; top:15%; left:88%; animation-delay:1.6s; }
.mock-bokeh span:nth-child(6){ width:7px;height:7px; top:40%; left:92%; animation-delay:2.4s; }
.mock-bokeh span:nth-child(7){ width:4px;height:4px; top:68%; left:80%; animation-delay:.3s; }
.mock-bokeh span:nth-child(8){ width:6px;height:6px; top:85%; left:60%; animation-delay:1.9s; }
@keyframes mockdrift{ 0%,100%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(-10px); opacity:.9; } }
@media (prefers-reduced-motion:reduce){ .mock-bokeh span{ animation:none; opacity:.5; } }

.mock-nav{
  position:relative; z-index:1; display:flex; align-items:center; gap:14px;
  font-family:'Manrope',sans-serif; font-size:.7rem; letter-spacing:.03em;
  color:rgba(255,255,255,0.85); margin-bottom:2px;
}
.mock-nav .mock-heart{ color:#ff8fc7; }

.mock-couple{ position:absolute; right:14px; top:34px; width:42%; max-width:160px; height:auto; opacity:.92; z-index:0; }

.mock-kicker{ position:relative; z-index:1; font-family:'Pacifico', cursive; font-size:.95rem; color:#ffe1f0; margin-top:8px; }
.mock-kicker span{ display:block; font-size:1.3rem; }
.mock-headline{
  position:relative; z-index:1; font-family:'Pacifico', cursive; font-weight:400;
  font-size:clamp(1.9rem, 1.5rem + 2vw, 2.7rem); line-height:1.1; color:#fff;
  text-shadow:0 2px 18px rgba(255,47,135,0.55); margin-top:4px;
}
.mock-lines{
  position:relative; z-index:1; font-family:'Manrope',sans-serif; font-size:.85rem;
  line-height:1.55; color:rgba(255,255,255,0.85); margin-top:8px;
}
.pink-mockup .device-actions{ justify-content:flex-start; margin-top:14px; }
.mock-yes{ background:#fff; color:#c21e6b; border-radius:999px; font-weight:700; }
.mock-yes:hover{ transform:translateY(-1px); box-shadow:0 10px 20px -8px rgba(255,255,255,0.5); }
.mock-no{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.55); border-radius:999px; }
.mock-side{
  position:absolute; right:16px; bottom:16px; z-index:1;
  font-family:'Pacifico',cursive; font-size:.72rem; line-height:1.5; color:#ffd7ea;
  background:rgba(0,0,0,0.25); padding:8px 12px; border-radius:10px;
  max-width:130px; text-align:right; border:1px solid rgba(255,255,255,0.15);
  display:none;
}
@media (min-width:600px){ .mock-side{ display:block; } }

/* ---------- closing / inquiry ---------- */
.cta-band{
  position:relative;
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(201,166,107,0.14), transparent 70%),
    var(--ink);
  text-align:center;
}
.cta-band .section-head{ margin-inline:auto; text-align:center; }
.cta-band h2{ max-width:16ch; margin-inline:auto; }

.inquiry-grid{
  margin-top:clamp(40px,6vh,56px);
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:2.4rem;
  text-align:left;
}
@media (max-width:820px){ .inquiry-grid{ grid-template-columns:1fr; } }

form.card-form{
  background:var(--surface-2); border:1px solid var(--line);
  padding:clamp(20px,3vw,32px);
  display:flex; flex-direction:column; gap:16px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:0.78rem; letter-spacing:0.06em; color:var(--fog); text-transform:uppercase; }
.field input, .field textarea{
  background:var(--ink-2); border:1px solid var(--line);
  color:var(--ivory); padding:0.75em 0.9em; font-family:inherit; font-size:0.95rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(201,166,107,0.12);
}
#wa-link{
  text-align:center; justify-content:center;
  display:none;
}
#wa-link.show{ display:inline-flex; }
.form-note{ font-size:0.8rem; color:var(--fog-dim); }

.contact-panel{
  display:flex; flex-direction:column; gap:22px;
  border-left:1px solid var(--line-soft);
  padding-left:clamp(20px,3vw,32px);
}
@media (max-width:820px){ .contact-panel{ border-left:none; padding-left:0; border-top:1px solid var(--line-soft); padding-top:24px; } }
.contact-row{ display:flex; flex-direction:column; gap:6px; }
.contact-row .label{ font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fog-dim); font-family:'IBM Plex Mono',monospace; }
.contact-row .value-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.contact-row a{ text-decoration:none; color:var(--ivory); font-size:1.05rem; }
.contact-row a:hover{ color:var(--gold); }
.copy-btn{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.08em;
  background:transparent; border:1px solid var(--line); color:var(--fog);
  padding:0.3em 0.6em; cursor:pointer; text-transform:uppercase;
}
.copy-btn:hover{ border-color:var(--gold-soft); color:var(--ivory); }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line-soft);
  padding-block:28px;
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:0.78rem; color:var(--fog-dim);
}

/* ---------- LumenJS / Mobius integration ---------- */
html, body{ background:var(--ink); text-align:left; }
button{ font-family:inherit; }
button.btn{ font-family:inherit; }
.wordmark.nav-link{ color:var(--ivory); }
.wordmark.nav-link:hover{ color:var(--ivory); }
/* Mobius forces span{vertical-align:middle !important}; inside running text and
   headings that lifts inline spans off the baseline and opens up line gaps. */
h1 span, h2 span, h3 span, p span, .wordmark span{ vertical-align:baseline !important; }
.eyebrow{ align-items:flex-start; }
.eyebrow::before{ flex:none; margin-top:.55em; }