:root{
  --ink:#0B0510;
  --panel:#150D1B;
  --plum:#330E27;
  --plum-light:#7A2B5E;
  --lilac:#C79AB0;
  --wine:#210A14;
  --wine-bright:#3C0F1D;
  --wine-hover:#4C1425;
  --blood:#4A0E1E;
  --blood-bright:#7A1830;
  --blood-glow:#9C2038;
  --gold:#C6A96E;
  --gold-soft:rgba(198,169,110,0.5);
  --gold-bright:#D8BE85;
  --bone:#EEE3E8;
  --bone-dim:#C9B6C0;
  --line:rgba(140,44,85,0.22);
  --accent-purple:#B48FCB;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Spectral', serif;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Playfair Display', serif;}
.label{font-family:'Jost', sans-serif; letter-spacing:0.08em;}

/* velvet damask texture, tiled rather than stretched (it's a repeating
   pattern, not a single photographic scene) — a dark scrim keeps text
   readable over the embossed pattern. Oversized (120%) so the scroll-
   drift script (bg-parallax.js) has room to move without revealing an
   edge. */
.bg-image{
  position:fixed; top:-10%; left:-10%; width:120%; height:120%; z-index:0;
  background:
    linear-gradient(rgba(6,4,9,0.55), rgba(6,4,9,0.68)),
    url('images/velvet.png') 0 0/480px repeat;
  will-change:transform;
}

/* black vignette — darkens the corners/edges so focus stays centered */
.texture{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 100% 90% at 50% 42%, transparent 12%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.94) 100%);
}

.wrap{position:relative; z-index:1; max-width:900px; margin:0 auto; padding:0 32px;}

/* PAGE HEADER — used by every page, including the homepage's brand header.
   Full thin border (not just bottom) so it reads as a framed box, with
   angular filigree ornaments layered at each corner (no curves, per
   direction — mitered line + faceted diamond, not a rounded scroll). */
header.page-header{
  padding:84px 0 56px;
  text-align:center;
  border:1px solid var(--line);
  position:relative;
}
header.page-header h1{
  font-size:clamp(34px, 5.5vw, 52px);
  font-weight:700;
  margin:0 0 6px;
  color:var(--bone);
  letter-spacing:-0.005em;
}
header.page-header h1 .moth{
  color:var(--blood-glow);
  font-style:italic;
  font-weight:700;
  text-shadow:0 0 22px rgba(122,24,48,0.5);
}
header.page-header p{
  margin:16px auto 0;
  color:var(--bone-dim);
  font-style:italic;
  font-size:18px;
  max-width:440px;
}

.corner-filigree{ position:absolute; width:40px; height:40px; opacity:0.9; pointer-events:none; }
.corner-filigree.tl{ top:-1px; left:-1px; }
.corner-filigree.tr{ top:-1px; right:-1px; transform:scaleX(-1); }
.corner-filigree.bl{ bottom:-1px; left:-1px; transform:scaleY(-1); }
.corner-filigree.br{ bottom:-1px; right:-1px; transform:scale(-1,-1); }

/* faceted diamond medallion divider */
.header-divider{ margin:28px auto 0; width:80px; height:22px; opacity:0.95; display:block; }

/* GALLERY */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.gallery-item{
  aspect-ratio:3/4;
  border:1px solid var(--line);
  background:var(--panel);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.gallery-item::before{
  content:"";
  position:absolute; top:8px; left:8px;
  width:12px; height:12px;
  border-top:1px solid var(--gold-soft);
  border-left:1px solid var(--gold-soft);
  pointer-events:none; z-index:1;
}
.gallery-item img, .gallery-item video{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  color:var(--plum-light);
}
.gallery-item .placeholder svg{ opacity:0.6; width:26px; height:26px; }
.gallery-item .placeholder span{
  font-family:'Jost', sans-serif;
  font-size:10px;
  letter-spacing:0.1em;
}
.gallery-item .tag{
  position:absolute; top:10px; left:10px;
  font-family:'Jost', sans-serif;
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--lilac);
  background:rgba(10,7,16,0.75);
  padding:4px 8px;
}
@media (max-width:640px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* GALLERY MASONRY — tile height driven by each image's own dimensions, no forced cropping */
.gallery-masonry{
  column-count:3;
  column-gap:14px;
}
.gallery-masonry .g-item{
  break-inside:avoid;
  margin-bottom:14px;
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
.gallery-masonry .g-item img{
  width:100%;
  height:auto;
  display:block;
}

/* GALLERY WALL — true packed masonry (gallery-wall.js computes each item's grid-row-end
   span from its own rendered height, so different-shaped images tile together with even
   gaps and no leftover blank space). Hero is explicitly centered and doubled in width. */
.gallery-wall{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(4px, auto);
  grid-auto-flow:dense;
  gap:14px;
}
.gallery-wall .g-cell{
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
.gallery-wall .g-cell img{
  width:100%;
  height:auto;
  display:block;
}
.gallery-wall .g-hero{ grid-column:2 / 4; }
.gallery-wall .g-puddle{ grid-column:span 2; }
@media (max-width:640px){
  .gallery-wall{ grid-template-columns:repeat(2, 1fr); }
  .gallery-wall .g-hero{ grid-column:1 / 3; }
}
@media (max-width:640px){
  .gallery-masonry{ column-count:2; }
}

/* NAV — real links between real pages */
nav.tabs{
  position:sticky; top:0; z-index:5;
  background:rgba(10,7,16,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav.tabs .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
}
.tab-scroll{
  display:flex;
  align-items:center;
  gap:6px;
}
.tab-btn{
  display:inline-block;
  background:none;
  border:none;
  color:var(--bone-dim);
  font-family:'Jost', sans-serif;
  font-size:13px;
  letter-spacing:0.12em;
  padding:20px 22px;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  transition:color 0.25s ease;
}
.tab-btn:hover{ color:var(--bone); }
.tab-btn.active{ color:var(--lilac); }
.tab-btn.active::after{
  content:"";
  position:absolute;
  left:22px; right:22px; bottom:0;
  height:2px;
  background:var(--blood-glow);
}
/* Apply — visually distinct from the plain text tabs, but muted merlot,
   not bright red — this was explicitly settled after many color passes,
   don't let it drift back toward "bloody" */
.tab-apply{
  margin-left:10px;
  display:inline-block;
  color:var(--bone);
  background:linear-gradient(180deg, var(--wine-bright), var(--wine));
  border:1px solid var(--gold-soft);
  font-family:'Jost', sans-serif;
  font-size:12px;
  letter-spacing:0.14em;
  padding:10px 20px;
  text-decoration:none;
  transition:background 0.25s ease;
  box-shadow:0 0 14px rgba(74,16,32,0.22);
}
.tab-apply:hover{ background:linear-gradient(180deg, var(--wine-hover), var(--wine-bright)); color:var(--bone); }
.tab-apply.active{ box-shadow:0 0 0 1px var(--lilac) inset, 0 0 14px rgba(74,16,32,0.22); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:5px;
  width:34px;
  height:34px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--bone-dim); }
.nav-toggle:hover span{ background:var(--bone); }
.nav-dropdown{ display:none; }

main.page-content{ padding:70px 0 100px; }

h2.section-title{
  font-size:34px;
  font-weight:500;
  margin:0 0 30px;
  color:var(--bone);
}
p{
  font-size:19px;
  line-height:1.75;
  color:var(--bone-dim);
  max-width:640px;
}
p + p{ margin-top:18px; }

/* ABOUT layout */
.about-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  align-items:start;
}
/* sharp-cornered antique frame — tight radius, thin gold edge, deep drop shadow */
.about-portrait{
  width:100%;
  aspect-ratio:3/4;
  position:relative;
  border-radius:2px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px var(--gold-soft),
    0 0 0 5px var(--ink),
    0 0 0 6px var(--gold-soft),
    0 20px 46px rgba(0,0,0,0.7),
    0 0 30px rgba(122,24,48,0.18);
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02) contrast(1.12) brightness(0.92); }
.about-portrait::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% 40%, transparent 50%, rgba(0,0,0,0.62) 100%);
  pointer-events:none;
}
/* thin diagonal sheen catching the gold edge, like a leather highlight */
.about-portrait::before{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(125deg, transparent 30%, rgba(216,190,133,0.06) 45%, transparent 60%);
  pointer-events:none;
}
.about-portrait .placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  color:var(--plum-light);
}
.about-portrait .placeholder svg{ opacity:0.7; }
.about-portrait .placeholder span{
  font-size:10px;
  letter-spacing:0.14em;
}

/* SERVICES — pricing boxes */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-bottom:56px;
}
.pricing-box{
  border:1px solid var(--line);
  background:var(--panel);
  padding:28px 24px;
  position:relative;
}
.pricing-box::before{
  content:"";
  position:absolute; top:10px; left:10px;
  width:16px; height:16px;
  border-top:1px solid var(--gold-soft);
  border-left:1px solid var(--gold-soft);
  pointer-events:none;
}
.pricing-box h3{
  font-family:'Playfair Display', serif;
  font-weight:500;
  font-size:20px;
  margin:0 0 6px;
  color:var(--bone);
}
.pricing-box .pricing-sub{
  font-size:13px;
  font-style:italic;
  color:var(--lilac);
  margin:0 0 16px;
}
.pricing-box ul{ list-style:none; margin:0; padding:0; }
.pricing-box li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:16px;
  color:var(--bone-dim);
}
.pricing-box li:last-child{ border-bottom:none; }
.pricing-box li span:last-child{
  color:var(--bone);
  font-family:'Jost', sans-serif;
  font-size:14px;
  letter-spacing:0.02em;
}
.pricing-note{
  margin-top:14px;
  font-size:13px;
  font-style:italic;
  color:var(--plum-light);
}
@media (max-width:640px){
  .pricing-grid{ grid-template-columns:1fr; }
}

/* SERVICES — specialty checklist, a comprehensive scannable list beneath
   the narrative service categories above. Diamond marker echoes the
   header-divider medallion for consistency. */
.specialty-grid{
  list-style:none;
  margin:36px 0 0;
  padding:24px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px 28px;
}
.specialty-grid li{
  position:relative;
  padding-left:20px;
  font-size:16px;
  color:var(--bone-dim);
  line-height:1.5;
}
.specialty-grid li::before{
  content:"";
  position:absolute; left:1px; top:7px;
  width:6px; height:6px;
  background:var(--gold);
  transform:rotate(45deg);
}
@media (max-width:640px){
  .specialty-grid{ grid-template-columns:1fr 1fr; }
}

/* SERVICES */
.service-list{ border-top:1px solid var(--line); }
.service-row{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:32px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.service-row h3{
  font-family:'Playfair Display', serif;
  font-weight:500;
  font-size:22px;
  margin:0;
  color:var(--bone);
}
.service-row p{ font-size:17px; margin:0; }

/* PROTOCOL */
.protocol-list{ list-style:none; margin:0; padding:0; max-width:640px; }
.protocol-list li{
  display:flex;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  font-size:18px;
  color:var(--bone-dim);
  line-height:1.6;
}
.protocol-list li .mark{ color:var(--gold); font-family:'Playfair Display', serif; font-style:italic; flex-shrink:0; }

.platform-list{ list-style:none; margin:0; padding:0; max-width:640px; }
.platform-list li{ border-bottom:1px solid var(--line); }
.platform-list li:first-child{ border-top:1px solid var(--line); }
.platform-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 4px;
  text-decoration:none;
  color:var(--bone);
  transition:color 0.25s ease, padding-left 0.25s ease;
}
.platform-list a:hover{ color:var(--lilac); padding-left:10px; }
.platform-text{ display:flex; flex-direction:column; gap:4px; }
.platform-name{ font-family:'Playfair Display', serif; font-size:20px; font-weight:500; }
.platform-note{ font-family:'Jost', sans-serif; font-size:13px; letter-spacing:0.04em; color:var(--bone-dim); }
.platform-arrow{ color:var(--gold); font-size:18px; flex-shrink:0; transition:transform 0.25s ease; }
.platform-list a:hover .platform-arrow{ transform:translateX(4px); }
.platform-group{ margin-top:44px; }
.platform-group:first-of-type{ margin-top:0; }
.platform-group h2{
  font-family:'Playfair Display', serif;
  font-weight:500;
  font-size:20px;
  color:var(--gold);
  margin:0 0 4px;
}
.links-contact{ margin-top:22px; text-align:center; }
.links-contact .field{
  margin:6px auto 0;
  font-family:'Jost', sans-serif;
  font-style:normal;
  font-size:14px;
  letter-spacing:0.04em;
  color:var(--bone-dim);
}
.links-contact .field-label{ color:var(--gold); }

/* "See more" CTA — option A: under the header tagline/divider */
.see-more-header{
  display:inline-block;
  margin-top:22px;
  font-family:'Jost', sans-serif;
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--lilac);
  text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  padding-bottom:3px;
  transition:color 0.25s ease, border-color 0.25s ease;
}
.see-more-header:hover{ color:var(--bone); border-color:var(--gold); }

/* "See more" CTA — option B: caption under the portrait image */
.see-more-portrait{
  display:block;
  text-align:center;
  margin-top:14px;
  font-family:'Jost', sans-serif;
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--lilac);
  text-decoration:none;
}
.see-more-portrait:hover{ color:var(--bone); }

/* APPLY */
.apply-box{
  border:1px solid var(--line);
  background:var(--panel);
  padding:44px;
  max-width:560px;
  position:relative;
}
.apply-box::before{
  content:"";
  position:absolute; top:10px; left:10px;
  width:16px; height:16px;
  border-top:1px solid var(--gold-soft);
  border-left:1px solid var(--gold-soft);
  pointer-events:none;
}
.apply-box p{ font-size:18px; }
.field{ margin-top:22px; }
.field label{
  display:block;
  font-family:'Jost', sans-serif;
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--lilac);
  margin-bottom:8px;
}
.field input, .field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--bone);
  font-family:'Spectral', serif;
  font-size:17px;
  padding:8px 2px;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-bottom-color:var(--lilac);
}
.submit-btn{
  margin-top:32px;
  background:linear-gradient(180deg, var(--wine-bright), var(--wine));
  border:1px solid var(--gold-soft);
  color:var(--bone);
  font-family:'Jost', sans-serif;
  font-size:13px;
  letter-spacing:0.14em;
  padding:14px 30px;
  cursor:pointer;
  transition:background 0.25s ease;
}
.submit-btn:hover{ background:linear-gradient(180deg, var(--wine-hover), var(--wine-bright)); }
.sign{
  margin-top:40px;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:22px;
  color:var(--lilac);
}

footer{
  border-top:1px solid var(--line);
  padding:30px 0 60px;
  text-align:center;
  color:var(--plum-light);
  font-family:'Jost', sans-serif;
  font-size:12px;
  letter-spacing:0.12em;
  position:relative;
  z-index:1;
}
footer a{ color:var(--plum-light); }

@media (max-width:640px){
  .about-grid{ grid-template-columns:1fr; }
  .service-row{ grid-template-columns:1fr; }
  nav.tabs{ position:relative; }
  nav.tabs .wrap{ justify-content:space-between; }
  .tab-scroll{ display:none; }
  .nav-toggle{ display:flex; }
  .tab-btn{ padding:16px 14px; white-space:nowrap; }
  .tab-apply{ margin-left:0; flex-shrink:0; }
  nav.tabs.open .nav-dropdown{ display:flex; flex-direction:column; }
  .nav-dropdown{
    position:absolute;
    top:100%; left:0; right:0;
    background:rgba(10,7,16,0.98);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(6px);
  }
  .nav-dropdown .tab-btn{
    padding:16px 24px;
    text-align:left;
    white-space:normal;
    border-bottom:1px solid var(--line);
  }
  .nav-dropdown .tab-btn:last-child{ border-bottom:none; }
  .nav-dropdown .tab-btn.active::after{ display:none; }

  /* On mobile the apply form is usually taller than the screen, so forcing
     it to vertically center would push the top fields above the fold. */
  .page-apply .apply-center{
    min-height:0;
    display:block;
  }
  .page-apply header.page-header{
    padding:32px 0 20px;
  }
  .page-apply .apply-box{
    padding:28px 24px;
    max-width:100%;
  }
}

/* APPLY PAGE — compact, vertically centered so it fits a laptop viewport.
   The flex column here is only for vertical centering — but flex's auto-
   stretch is disabled on any child that has auto left/right margins (which
   .wrap and .apply-box both rely on for their own horizontal centering),
   so without this override they'd shrink to their content width instead of
   their intended 900px/560px max-width. width:100% restores that. */
.page-apply .apply-center > *{ width:100%; }
.page-apply .apply-center{
  min-height:calc(100vh - 65px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page-apply header.page-header{
  padding:24px 0 16px;
}
.page-apply header.page-header .header-divider{
  margin:16px auto 0;
}
.page-apply main.page-content{
  padding:24px 0 40px;
}
.page-apply .apply-box{
  padding:32px 40px;
  margin:0 auto;
}
.page-apply .apply-box p{ font-size:16px; }
.page-apply .field{ margin-top:16px; }
.page-apply .sign{ margin-top:24px; font-size:18px; }
@media (max-height:760px){
  .page-apply header.page-header h1{ font-size:32px; }
  .page-apply .field{ margin-top:12px; }
  .page-apply .apply-box{ padding:26px 36px; }
}