/* ==========================================================================
   VALMONT SOCIETY
   Private creator growth & management, site stylesheet
   --------------------------------------------------------------------------
   Palette (per the founder blueprint, 02 / The Valmont Society World)
     background   soft black      #100D0E
     signature    dark oxblood    #34151C
     metallic     antique gold    #C6AA76
     primary text soft ivory      #F5EEE7
     secondary    warm taupe      #B7A9A2
   Type
     display      Cormorant Garamond  (editorial serif)
     script       Pinyon Script       (logo lockup only)
     body / UI    Jost                (clean geometric sans)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* ink */
  --ink:          #100D0E;
  --ink-deep:     #0A0809;
  --surface:      #161114;
  --surface-2:    #1D1519;
  --surface-3:    #241A1F;

  /* rouge */
  --rouge:        #34151C;
  --rouge-deep:   #240F14;
  --rouge-lift:   #47202A;

  /* metal */
  --gold:         #C6AA76;
  --gold-lift:    #E2CA98;
  --gold-deep:    #9C844F;

  /* type */
  --ivory:        #F5EEE7;
  --taupe:        #B7A9A2;
  --taupe-dim:    #948781;

  /* alpha helpers */
  --g-04: rgba(198,170,118,.04);
  --g-08: rgba(198,170,118,.08);
  --g-14: rgba(198,170,118,.14);
  --g-22: rgba(198,170,118,.22);
  --g-35: rgba(198,170,118,.35);
  --g-55: rgba(198,170,118,.55);

  /* families */
  --display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --script:  "Pinyon Script", "Cormorant Garamond", cursive;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* metrics */
  --wrap:        1240px;
  --wrap-wide:   1440px;
  --wrap-narrow: 760px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --bay:         clamp(4.5rem, 9vw, 8.5rem);   /* section rhythm */
  --hairline:    1px solid var(--g-14);

  /* motion */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.78;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* film grain, stops large dark fields from reading flat */
body::after {
  content: "";
  position: fixed; inset: -50%;
  z-index: 2000;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--gold); text-decoration: none; transition: color .3s var(--ease), opacity .3s var(--ease); }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--rouge-lift); color: var(--ivory); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: #2C2126; border: 3px solid var(--ink-deep); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--rouge-lift); }

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

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ivory);
  letter-spacing: -.005em;
  text-wrap: pretty;
}
/* centred headlines read better with balanced line lengths */
.head--center h1, .head--center h2, .band h2, .center h2 { text-wrap: balance; }

/* anchor links must clear the fixed header */
[id] { scroll-margin-top: 7rem; }

h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); }

/* the italic gold phrase inside a headline */
h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.12;
}

/* small structural label, used above almost every headline */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .95rem;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  flex: none;
  width: 36px; height: 1px;
  background: linear-gradient(270deg, var(--gold), transparent);
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  color: var(--taupe);
  max-width: 44ch;
  font-weight: 300;
}
.lede--wide { max-width: 56ch; }
.lede--center { margin-inline: auto; }

p + p { margin-top: 1.1rem; }
.muted { color: var(--taupe); }
.small { font-size: .92rem; }

.micro {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

/* small uppercase heading used above lists and asides */
.label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

/* the email address on the contact page */
.contact-email {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--ivory);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--g-35);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.contact-email:hover { color: var(--gold); border-color: var(--gold); }


/* body-copy links get an underline that retracts on hover */
main p a:not(.btn), main li a:not(.btn), .faq__body a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .35s var(--ease), color .3s var(--ease);
}
main p a:not(.btn):hover, main li a:not(.btn):hover { background-size: 0 1px; color: var(--gold-lift); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap        { width: 100%; max-width: var(--wrap);        margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide   { width: 100%; max-width: var(--wrap-wide);   margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.bay { position: relative; padding-block: var(--bay); }
.bay--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.bay--flush-top { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

.bay--surface { background: var(--surface); }
.bay--rouge {
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(71,32,42,.7), transparent 70%),
    linear-gradient(165deg, var(--rouge-deep), var(--rouge) 55%, var(--rouge-deep));
  border-block: 1px solid var(--g-14);
  overflow: hidden;
}

/* hairline separators between stacked bays */
.bay--edge-top    { border-top: var(--hairline); }
.bay--edge-bottom { border-bottom: var(--hairline); }

.cols        { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.cols--2     { grid-template-columns: 1fr 1fr; }
.cols--2-3   { grid-template-columns: 2fr 3fr; }
.cols--3-2   { grid-template-columns: 3fr 2fr; }
.cols--3     { grid-template-columns: repeat(3, 1fr); }
.cols--4     { grid-template-columns: repeat(4, 1fr); }
.cols--mid   { align-items: center; }
.cols--top   { align-items: start; }

.stack-sm > * + * { margin-top: .8rem; }
.stack    > * + * { margin-top: 1.4rem; }
.stack-lg > * + * { margin-top: 2.4rem; }

.center { text-align: center; }
.sticky { position: sticky; top: 130px; align-self: start; }

/* section heading block, the measure is set in em of the heading itself, so it
   scales with the display size instead of the container's body font */
.head { margin-bottom: 2.2rem; }
.head h1, .head h2 { max-width: 13em; }
.head--wide h1, .head--wide h2 { max-width: 17em; }
.head--center { margin-inline: auto; text-align: center; }
.head--center h1, .head--center h2 { max-width: 15em; margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  isolation: isolate;
  padding: 1.05rem 2.6rem;
  border: 1px solid var(--g-55);
  background: transparent;
  color: var(--gold);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--gold), var(--gold-lift));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.btn:hover, .btn:focus-visible {
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 12px 36px rgba(198,170,118,.12);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

.btn--gold {
  background: linear-gradient(100deg, var(--gold), var(--gold-lift));
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 12px 38px rgba(198,170,118,.13);
}
.btn--gold::before { background: var(--surface-2); }
.btn--gold:hover, .btn--gold:focus-visible { color: var(--gold); }

.btn--sm { padding: .68rem 1.5rem; font-size: .66rem; letter-spacing: .22em; }

/* quiet text link with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.link-arrow::after {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  transition: width .4s var(--ease-out);
}
.link-arrow:hover { color: var(--gold-lift); }
.link-arrow:hover::after { width: 42px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2.6rem; }
.actions--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. BRAND LOCKUP
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .95rem;
  color: var(--ivory);
  line-height: 1;
}
.brand__mark {
  flex: none;
  width: 42px; height: 42px;
  overflow: visible;
  transition: transform .6s var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(45deg); }
.brand__ring  { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .55; transition: opacity .5s var(--ease); }
.brand:hover .brand__ring { opacity: 1; }
.brand__vs {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  fill: var(--gold);
  letter-spacing: .02em;
}
.brand__type { display: flex; flex-direction: column; gap: .18rem; }
.brand__script {
  font-family: var(--script);
  font-style: normal;
  font-size: 1.62rem;
  line-height: .95;
  color: var(--ivory);
  transition: color .4s var(--ease);
}
.brand:hover .brand__script { color: var(--gold-lift); }
.brand__sub {
  font-family: var(--sans);
  font-style: normal;
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: .18em;
}

/* stacked / large version for the footer and loader */
.brand--stack { flex-direction: column; gap: 1rem; text-align: center; }
.brand--lg .brand__script { font-size: 2.6rem; }
.brand--lg .brand__sub { font-size: .68rem; letter-spacing: .58em; }
.brand--lg .brand__mark { width: 58px; height: 58px; }

/* --------------------------------------------------------------------------
   7. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */

.hdr {
  position: fixed; inset: 0 0 auto 0;
  z-index: 900;
  transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 92px;
  transition: height .45s var(--ease);
}
/* gold hairline that only appears once the header has a background */
.hdr::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-35) 20%, rgba(226,202,152,.7) 50%, var(--g-35) 80%, transparent);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.hdr.is-stuck {
  background: rgba(13,10,11,.82);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 16px 44px rgba(0,0,0,.4);
}
.hdr.is-stuck::after { opacity: 1; }
.hdr.is-stuck .hdr__in { height: 74px; }
.hdr.is-hidden { transform: translateY(-100%); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}
.nav a:not(.btn) {
  position: relative;
  padding-block: .5rem;
  color: var(--taupe);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.nav a:not(.btn):hover { color: var(--ivory); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

/* active page, driven by body[data-page], so it works without JS */
body[data-page="index"]        .nav a[data-nav="index"],
body[data-page="society"]      .nav a[data-nav="society"],
body[data-page="how-it-works"] .nav a[data-nav="how-it-works"],
body[data-page="services"]     .nav a[data-nav="services"],
body[data-page="faq"]          .nav a[data-nav="faq"],
body[data-page="contact"]      .nav a[data-nav="contact"] { color: var(--ivory); }
body[data-page="index"]        .nav a[data-nav="index"]::after,
body[data-page="society"]      .nav a[data-nav="society"]::after,
body[data-page="how-it-works"] .nav a[data-nav="how-it-works"]::after,
body[data-page="services"]     .nav a[data-nav="services"]::after,
body[data-page="faq"]          .nav a[data-nav="faq"]::after,
body[data-page="contact"]      .nav a[data-nav="contact"]::after { transform: scaleX(1); }

.nav__cta { margin-left: .4rem; }

/* burger */
.burger {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  border: 1px solid var(--g-35);
  background: transparent;
  cursor: pointer;
  transition: border-color .35s var(--ease);
}
.burger:hover { border-color: var(--gold); }
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1px;
  background: var(--gold);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.burger span:nth-child(1) { transform: translate(-50%, -5px); }
.burger span:nth-child(2) { transform: translate(-50%, 0); }
.burger span:nth-child(3) { transform: translate(-50%, 5px); }
.burger.is-open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* full-screen drawer */
.drawer {
  position: fixed; inset: 0;
  z-index: 890;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--gutter) 3rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(52,21,28,.85), transparent 70%),
    rgba(10,8,9,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__nav { display: flex; flex-direction: column; gap: .2rem; }
.drawer__nav a {
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  font-weight: 300;
  color: var(--ivory);
  padding-block: .45rem;
  border-bottom: 1px solid var(--g-08);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out), color .3s var(--ease);
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:hover { color: var(--gold); }
.drawer__foot { margin-top: 2.6rem; }
.drawer__foot .btn { width: 100%; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 12rem 5.5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 45%;
  transform: scale(1.06);
  animation: kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(-1.4%, -1.6%, 0); }
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 55% at 22% 55%, rgba(198,170,118,.10), transparent 68%),
    linear-gradient(100deg, rgba(10,8,9,.92) 0%, rgba(12,9,10,.74) 36%, rgba(16,13,14,.3) 68%, rgba(16,13,14,.08) 100%),
    linear-gradient(180deg, rgba(10,8,9,.66) 0%, transparent 24%, transparent 54%, rgba(16,13,14,.94) 100%);
}
.hero__inner { position: relative; width: 100%; }
.hero h1 { max-width: 13ch; }
.hero .lede { margin-top: 1.8rem; max-width: 46ch; }

/* couture detail, rotated micro-caption pinned to the page edge.
   Only shown once the layout has genuine margin to the left of the text. */
.hero__rail {
  position: absolute;
  left: 1.4rem;
  bottom: 7rem;
  display: none;
  align-items: center;
  gap: 1rem;
  font-size: .6rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--taupe-dim);
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}
@media (min-width: 1500px) { .hero__rail { display: flex; } }

@keyframes cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* word-by-word headline reveal */
.reveal-words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;      /* room for italic descenders inside the mask */
  margin-bottom: -.14em;
}
.reveal-words .w > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 65ms + 250ms);
}
.reveal-words.is-in .w > span { transform: none; }

/* interior page masthead */
.masthead {
  position: relative;
  padding-block: clamp(10rem, 18vw, 15rem) clamp(4rem, 7vw, 6.5rem);
  overflow: hidden;
  border-bottom: var(--hairline);
  background:
    radial-gradient(ellipse 65% 100% at 88% 10%, rgba(198,170,118,.07), transparent 62%),
    radial-gradient(ellipse 85% 120% at 6% 0%, rgba(52,21,28,.9), transparent 68%),
    linear-gradient(180deg, #1A0F13 0%, var(--ink) 82%);
}
.masthead h1 { max-width: 14em; font-size: clamp(2.5rem, 5.6vw, 4.3rem); }
.masthead .lede { margin-top: 1.6rem; }
.masthead__mono {
  position: absolute;
  right: -2%;
  bottom: -32%;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18rem, 34vw, 30rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,170,118,.08);
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   9. STATEMENT STRIP (honest metrics)
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-block: var(--hairline);
}
.facts__item {
  position: relative;
  padding: 2.3rem 1.6rem;
  text-align: center;
  transition: background .5s var(--ease);
}
.facts__item + .facts__item { border-left: var(--hairline); }
.facts__item:hover { background: var(--g-04); }
.facts__item .micro { display: block; margin-bottom: .8rem; }
.facts__item strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.35;
  color: var(--ivory);
}
.facts__item::before {
  content: "";
  position: absolute; inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform .55s var(--ease-out);
}
.facts__item:hover::before { transform: scaleX(1); }

/* four-value creed row */
.creed { display: grid; grid-template-columns: repeat(4, 1fr); }
.creed__item {
  padding: 1.9rem 1.6rem;
  text-align: center;
  transition: background .5s var(--ease);
}
.creed__item + .creed__item { border-left: var(--hairline); }
.creed__item:hover { background: var(--g-04); }
.creed__item h3 {
  margin-bottom: .8rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.creed__item p { font-size: .93rem; color: var(--taupe); }

/* values line */
.values {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3.4rem);
  padding: 2.4rem var(--gutter);
  border-bottom: var(--hairline);
  background: linear-gradient(180deg, rgba(36,15,20,.5), transparent);
}
.values span {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  color: rgba(245,238,231,.4);
}
.values i {
  font-style: normal;
  color: var(--g-55);
  font-size: .7rem;
}

/* --------------------------------------------------------------------------
   10. INDEX LIST (numbered editorial rows)
   -------------------------------------------------------------------------- */

.index { margin-top: 3.2rem; border-top: var(--hairline); }
.index__row {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(180px, 250px) 1fr;
  gap: 2.2rem;
  align-items: baseline;
  padding: 2.2rem .8rem;
  border-bottom: var(--hairline);
  transition: padding-left .55s var(--ease-out), background .5s var(--ease);
}
.index__row::before {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-out);
}
.index__row:hover { padding-left: 1.8rem; background: var(--g-04); }
.index__row:hover::before { transform: scaleX(1); }
.index__no {
  font-family: var(--display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: rgba(198,170,118,.42);
  transition: color .5s var(--ease), text-shadow .5s var(--ease);
}
.index__row:hover .index__no { color: var(--gold); text-shadow: 0 0 24px rgba(198,170,118,.5); }
.index__row h3 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: color .5s var(--ease);
}
.index__row:hover h3 { color: var(--gold); }
.index__row p { font-size: .98rem; color: var(--taupe); }

/* --------------------------------------------------------------------------
   11. EDITORIAL SPLIT (two services, side by side)
   -------------------------------------------------------------------------- */

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 3rem;
}
.split::before {
  content: "";
  position: absolute; top: 8%; bottom: 8%; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--g-35), transparent);
}
.split__item { position: relative; padding: 2rem 4rem 2rem 0; }
.split__item + .split__item { padding: 2rem 0 2rem 4rem; }
.split__no {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(198,170,118,.26);
  margin-bottom: 1.4rem;
  transition: color .6s var(--ease), text-shadow .6s var(--ease);
}
.split__item:hover .split__no { color: rgba(198,170,118,.8); text-shadow: 0 0 34px rgba(198,170,118,.35); }
.split__item h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ivory);
  margin-bottom: 1rem;
}
.split__item p { color: var(--taupe); }
.split__fee {
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: var(--hairline);
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .05em;
  width: 100%;
}
.split__fee b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

/* --------------------------------------------------------------------------
   12. CARDS & PILLARS
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: 2.6rem 2.2rem;
  border: var(--hairline);
  background: linear-gradient(165deg, var(--surface-2) 0%, rgba(16,13,14,.6) 100%);
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform .6s var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--g-35);
  box-shadow: 0 28px 60px rgba(0,0,0,.5);
}
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: .9rem; color: var(--gold); font-family: var(--sans); font-size: .78rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }
.card p { font-size: .96rem; color: var(--taupe); }
.card__no {
  position: absolute;
  top: 1rem; right: 1.3rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(198,170,118,.14);
  transition: color .5s var(--ease);
}
.card:hover .card__no { color: rgba(198,170,118,.4); }

/* --------------------------------------------------------------------------
   13. STEP LIST & TIMELINE
   -------------------------------------------------------------------------- */

.steps { list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  counter-increment: step;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 1.8rem;
  padding: 2.1rem 0;
  border-bottom: var(--hairline);
}
.steps li::before {
  content: "0" counter(step);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.85rem;
  line-height: 1.2;
  color: var(--gold);
}
.steps li:nth-child(n+10)::before { content: counter(step); }
.steps li::after {
  content: "";
  position: absolute;
  left: 15px; top: 4.4rem; bottom: -.4rem;
  width: 1px;
  background: linear-gradient(180deg, var(--g-35), transparent);
}
.steps li:last-child::after { display: none; }
.steps h3 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; color: var(--ivory); margin-bottom: .5rem; }
.steps p { font-size: .98rem; color: var(--taupe); }

.tline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 3.4rem;
  padding-top: 2.8rem;
}
.tline::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, var(--g-55), var(--g-14));
}
.tline__step { position: relative; }
.tline__step::before {
  content: "";
  position: absolute;
  top: calc(-2.8rem - 4px); left: 0;
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 16px rgba(198,170,118,.6);
}
.tline__n {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 2.3rem;
  line-height: 1;
  color: rgba(198,170,118,.48);
  margin-bottom: 1rem;
  transition: color .5s var(--ease), text-shadow .5s var(--ease);
}
.tline__step:hover .tline__n { color: var(--gold); text-shadow: 0 0 26px rgba(198,170,118,.45); }
.tline__step h3 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--ivory); margin-bottom: .6rem; }
.tline__step p { font-size: .96rem; color: var(--taupe); }

/* --------------------------------------------------------------------------
   14. LISTS, QUOTES, NOTICES
   -------------------------------------------------------------------------- */

.ticks { list-style: none; }
.ticks li {
  position: relative;
  padding: .6rem 0 .6rem 2.1rem;
  color: var(--taupe);
  font-size: 1rem;
  border-bottom: 1px solid var(--g-08);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35rem;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}
.ticks--plain li { border-bottom: 0; padding-block: .45rem; }

.quote {
  position: relative;
  padding-left: 3.2rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.6;
  color: var(--ivory);
  max-width: 19em;
}
.quote::before {
  content: "\201C";
  position: absolute;
  left: -.5rem; top: -1.7rem;
  font-family: var(--display);
  font-size: 6.5rem;
  line-height: 1;
  color: rgba(198,170,118,.4);
}
.quote cite {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.pull {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.45;
  color: var(--gold);
  max-width: 15em;
  margin-inline: auto;
  text-align: center;
}

.note {
  position: relative;
  padding: 1.5rem 1.8rem;
  border: var(--hairline);
  border-left: 2px solid var(--gold);
  background: var(--g-04);
  font-size: .94rem;
  color: var(--taupe);
}
.note strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--gold);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.note--warn { border-left-color: var(--gold); background: rgba(52,21,28,.35); }

/* ornament divider */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
.ornament::before, .ornament::after {
  content: "";
  width: min(180px, 24vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-35));
}
.ornament::after { background: linear-gradient(270deg, transparent, var(--g-35)); }
.ornament i { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   15. IMAGERY
   -------------------------------------------------------------------------- */

.arch { position: relative; padding: 15px; }
.arch::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--g-22);
  border-radius: 999px 999px 4px 4px;
  pointer-events: none;
}
.arch__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 2px 2px;
  overflow: hidden;
  isolation: isolate;
}
.arch__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s var(--ease-out);
}
.arch:hover .arch__frame img { transform: scale(1.09); }

/* Grades a photograph to the brand duotone, collapse to a gold-toned
   monochrome, then multiply oxblood over it, so that outside imagery sits with
   the founder's own renders instead of fighting them. No page uses it now that
   the arches carry her own photography, which is already in the brand palette;
   it is kept for any future picture that needs bringing into line. */
.arch__frame--duotone img {
  filter: grayscale(1) sepia(1) hue-rotate(-14deg) saturate(1.9) brightness(.8) contrast(1.12);
}
.arch__frame--duotone::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--rouge);
  mix-blend-mode: multiply;
  opacity: .45;
  pointer-events: none;
}
/* Both founder photographs are landscape and the arch is portrait, so roughly
   half of each frame is cropped away. Which half is a composition decision, not
   a default: the lounge is framed on the monogram wall and the mirrors, the
   dressing table on the monogrammed case. Written as modifiers so the choice
   travels with the markup that uses the picture. */
.arch__frame--focus-right img       { object-position: 100% 50%; }
.arch__frame--focus-centre-right img { object-position: 56% 50%; }

.arch__frame::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--g-35), inset 0 -60px 90px rgba(16,13,14,.35);
  pointer-events: none;
}
.arch__cap,
.plate__cap {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .64rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.plate {
  position: relative;
  overflow: hidden;
  border: var(--hairline);
}
.plate img { display: block; width: 100%; transition: transform 1.6s var(--ease-out); }
.plate:hover img { transform: scale(1.05); }
/* The same inset the arch carries: a hairline and a soft floor shadow, so a
   bright photograph is seated in the dark page rather than punched through it. */
.plate::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--g-22), inset 0 -70px 110px rgba(16,13,14,.45);
  pointer-events: none;
}

/* cinematic full-bleed band */
.band {
  position: relative;
  padding-block: clamp(6rem, 12vw, 10rem);
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(16,13,14,.3), rgba(16,13,14,.8)),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%);
}
.band > * { position: relative; }
.band__line {
  max-width: 16em;
  margin: 1.8rem auto 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  line-height: 1.42;
  color: var(--ivory);
  text-shadow: 0 2px 40px rgba(0,0,0,.75);
}
.band__sub {
  margin-top: 1.2rem;
  font-size: .66rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold);
}
.band--cta::before {
  background:
    radial-gradient(ellipse 75% 95% at 50% 50%, rgba(16,13,14,.72), rgba(16,13,14,.94)),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 76%, var(--ink) 100%);
}

/* oversized outlined monogram behind a rouge bay */
.monogram {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(15rem, 32vw, 26rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,170,118,.1);
  pointer-events: none;
  user-select: none;
}

/* ghost word set in the corner of a bay */
.ghost {
  position: absolute;
  top: 1.5rem; right: var(--gutter);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(5rem, 13vw, 10rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,170,118,.07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.ghost--left { right: auto; left: var(--gutter); }
.ghost--low { top: auto; bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   16. COMPARISON TABLE
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-top: 2.6rem; }
/* the comparison tables scroll sideways on small screens, say so */
.table-hint { display: none; }
@media (max-width: 760px) {
  .table-hint {
    display: block;
    margin-top: .9rem;
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--taupe-dim);
  }
}
table.compare {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: .94rem;
}
table.compare th, table.compare td {
  text-align: left;
  padding: 1.1rem 1.3rem;
  border-bottom: var(--hairline);
  vertical-align: top;
}
table.compare thead th {
  border-bottom: 1px solid var(--g-35);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 1.2rem;
}
table.compare thead th:first-child { color: var(--taupe-dim); }
table.compare td { color: var(--taupe); }
table.compare td:first-child { color: var(--ivory); font-weight: 400; }
table.compare tbody tr { transition: background .3s var(--ease); }
table.compare tbody tr:hover { background: var(--g-04); }
table.compare .yes { color: var(--gold); }
table.compare .no  { color: var(--taupe-dim); }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

.faq { border-bottom: var(--hairline); }
.faq:first-of-type { border-top: var(--hairline); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.7rem 3rem 1.7rem 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.42rem);
  color: var(--ivory);
  transition: color .35s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq[open] summary { color: var(--gold); }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: .4rem; top: 50%;
  background: var(--gold);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.faq summary::before { width: 13px; height: 1px; transform: translateY(-50%); }
.faq summary::after  { width: 1px; height: 13px; transform: translate(-6px, -50%); }
.faq[open] summary::after { opacity: 0; transform: translate(-6px, -50%) rotate(90deg); }
.faq__body {
  padding-bottom: 1.9rem;
  max-width: 62ch;
  color: var(--taupe);
  font-size: .99rem;
}

/* --------------------------------------------------------------------------
   18. FORMS
   -------------------------------------------------------------------------- */

.form { margin-top: 1rem; }

/* Netlify honeypot (bot-field): a decoy field only a bot fills in. Kept out of
   the layout, out of the tab order and out of the accessibility tree. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }

.field { position: relative; margin-bottom: 2.2rem; }
/* In a two-up grid the inputs must share one baseline even when a label wraps
   to two lines. The control is the last in-flow item and takes the slack; the
   hint floats in reserved space underneath so it cannot shift the control. */
.form__grid .field {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
  margin-bottom: .9rem;
}
.form__grid .field input,
.form__grid .field select,
.form__grid .field textarea { margin-top: auto; }
.form__grid .field__hint {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin-top: 0;
}
.field label {
  display: block;
  margin-bottom: .6rem;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .2rem;
  border: 0;
  border-bottom: 1px solid var(--g-22);
  background: transparent;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 300;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--taupe-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold), 0 14px 28px -22px rgba(198,170,118,.6);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.field select {
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 9px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: var(--surface-2); color: var(--ivory); }
.field__hint { margin-top: .5rem; font-size: .8rem; color: var(--taupe-dim); }

/* Conditional handle field (apply.html): the input for Telegram and Instagram,
   a line of type for Email. :has() does the swap without JavaScript so nothing
   flashes on load; js/main.js sets [hidden] as well for browsers without :has(),
   and relabels the field for the platform that was chosen. Both read the same
   <select>, so they cannot disagree. */
.form__grid .field--handle[hidden] { display: none; }

@supports selector(:has(*)) {
  .form__grid .field--handle { display: none; }
  .form:has(#contact-method option[value="Telegram"]:checked) .field--handle[data-handle="handle"],
  .form:has(#contact-method option[value="Instagram direct message"]:checked) .field--handle[data-handle="handle"],
  .form:has(#contact-method option[value="Email"]:checked) .field--handle[data-handle="email"] {
    display: flex;
  }
}

/* The email branch has no control of its own, a line of type stands in for it,
   sitting on the same baseline as the inputs beside it. */
.field__legend {
  display: block;
  margin-bottom: .6rem;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.field__static {
  padding: .8rem .2rem;
  border-bottom: 1px solid var(--g-22);
  color: var(--taupe);
  font-size: 1.02rem;
  font-weight: 300;
}
.form__grid .field .field__static { margin-top: auto; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: .95rem;
  margin-bottom: 1.3rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--g-08);
  background: rgba(255,255,255,.012);
  font-size: .93rem;
  color: var(--taupe);
  cursor: pointer;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.consent:hover { border-color: var(--g-22); background: var(--g-04); }
.consent input { margin-top: .38rem; accent-color: var(--gold); width: 15px; height: 15px; flex: none; }

.form__error {
  display: none;
  margin-bottom: 1.2rem;
  padding: .9rem 1.2rem;
  border-left: 2px solid #D98A8A;
  background: rgba(217,138,138,.08);
  color: #E7AEAE;
  font-size: .93rem;
}
.form__note { margin-top: 1.6rem; font-size: .9rem; color: var(--taupe-dim); max-width: 56ch; }

/* ---- application form: sections, marks and states ------------------------
   The application is the one page where a visitor is asked to give something
   rather than read something, so it is set like a private document: three
   numbered sections, an explicit note beside anything optional, and a single
   quiet gold line that draws itself under whatever field has focus. */

/* three quiet assurances under the masthead lede, before anything is asked */
.assure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.5rem;
  margin-top: 2.2rem;
  list-style: none;
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}
.assure li { display: flex; align-items: center; gap: 1.5rem; }
.assure li:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  opacity: .6;
  transform: rotate(45deg);
}

.form__intro {
  max-width: 48ch;
  margin-top: 1rem;
  color: var(--taupe);
  font-size: .98rem;
}

.fset {
  border: 0;
  padding: 0;
  min-width: 0;                     /* a fieldset will not shrink without this */
  /* the grid fields already carry padding for their hints, so the gap between
     sections is smaller than it looks written down */
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
}
.fset:first-of-type { margin-top: 2rem; }

.fset__legend { width: 100%; padding: 0; }
.fset__inner {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: 2.1rem;
}
/* the rule runs from the section name to the edge of the column */
.fset__inner::after {
  content: "";
  flex: 1;
  height: 1px;
  transform: translateY(-.35em);
  background: linear-gradient(90deg, var(--g-35), transparent 72%);
}
.fset__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold);
}
.fset__name {
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* "Optional" sits beside the label rather than inside it: the label text is
   what Netlify prints in the notification email, and it should stay clean. */
.field__flag {
  position: absolute;
  top: 0; right: 0;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}
/* the flag comes before the label in the markup, so the label can be told to
   keep clear of it without :has(), a long label then wraps instead of
   running underneath */
.field__flag ~ label { padding-right: 5.5rem; }

/* the label brightens with the field it belongs to */
.field:focus-within label,
.field:focus-within .field__legend { color: var(--gold-lift); }

/* A gold rule drawn from the left on focus, in place of the hard line the
   border used to snap to. Selects keep the plain treatment, their background
   already carries the chevron. */
.field input[type="text"],
.field input[type="email"],
.field textarea {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition:
    border-color .4s var(--ease),
    box-shadow .4s var(--ease),
    background-size .55s var(--ease-out);
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field textarea:focus {
  border-bottom-color: var(--g-22);
  background-size: 100% 1px;
  box-shadow: 0 14px 28px -22px rgba(198,170,118,.6);
}

/* keyboard users get a visible ring as well; a mouse click gets only the line */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 1px solid var(--g-35);
  outline-offset: 5px;
}

/* Wrong input is pointed out only after the applicant has finished with the
   field, never while they are still typing into it. */
.field input:user-invalid,
.field textarea:user-invalid {
  border-bottom-color: rgba(217,138,138,.55);
  background-image: linear-gradient(#D98A8A, #D98A8A);
  background-size: 100% 1px;
}

/* consent boxes: a drawn tick rather than the browser's own */
.consent input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 17px; height: 17px;
  border: 1px solid var(--g-35);
  background: transparent;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.consent input::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity .25s var(--ease), transform .35s var(--ease-out);
}
.consent input:checked {
  border-color: var(--gold);
  background: linear-gradient(100deg, var(--gold), var(--gold-lift));
}
.consent input:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.consent:has(input:checked) { border-color: var(--g-22); background: var(--g-04); }

/* submit sits under a hairline with the reassurance beside it, not below */
.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2.2rem;
  margin-top: 2.4rem;
  padding-top: 2.2rem;
  border-top: var(--hairline);
}
.form__submit .form__note { margin: 0; flex: 1 1 24ch; }
.btn--lg { padding: 1.22rem 3rem; font-size: .76rem; letter-spacing: .3em; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* a bordered pane for the column beside the form */
.pane {
  position: relative;
  overflow: hidden;
  padding: clamp(1.7rem, 3vw, 2.3rem);
  border: var(--hairline);
  background: linear-gradient(158deg, rgba(52,21,28,.55), rgba(22,17,20,.55));
}
.pane::after {
  content: "VS";
  position: absolute;
  right: -.22em; bottom: -.42em;
  font-family: var(--display);
  font-style: italic;
  font-size: 11rem;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,170,118,.07);
  pointer-events: none;
  user-select: none;
}
.pane > * { position: relative; }
.pane__cap {
  font-size: .58rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}
.pane__title {
  margin-top: .8rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--ivory);
}

/* the received-and-sealed medallion on the confirmation page */
.seal {
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  margin-bottom: 2rem;
  border: 1px solid var(--g-35);
  border-radius: 50%;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--gold);
  box-shadow:
    inset 0 0 0 5px rgba(198,170,118,.05),
    0 22px 50px -34px rgba(198,170,118,.7);
}

@media (max-width: 640px) {
  .form__submit .btn { width: 100%; }
  .pane::after { font-size: 8rem; }
}

/* --------------------------------------------------------------------------
   19. EARNINGS SCENARIO TOOL
   -------------------------------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 3rem;
  border: var(--hairline);
  background: linear-gradient(160deg, var(--surface-2), rgba(16,13,14,.7));
}
.calc__controls { padding: clamp(2rem, 3.5vw, 3rem); }
.calc__out {
  padding: clamp(2rem, 3.5vw, 3rem);
  border-left: var(--hairline);
  background:
    radial-gradient(ellipse 90% 70% at 80% 0%, rgba(52,21,28,.6), transparent 70%),
    rgba(10,8,9,.4);
}
.calc__legend {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: var(--hairline);
}

.slider { margin-bottom: 2.1rem; }
.slider__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.slider__top label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.slider__val {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  background: var(--g-35);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  background: var(--gold);
  border: 0;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(198,170,118,.55);
  cursor: pointer;
  transition: box-shadow .3s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 22px rgba(198,170,118,.85); }
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px;
  background: var(--gold);
  border: 0;
  border-radius: 0;
  transform: rotate(45deg);
  cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--g-22); }

/* segmented package / horizon choice */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--g-22);
  margin-bottom: 2.1rem;
}
.seg button {
  padding: .85rem .6rem;
  border: 0;
  background: transparent;
  color: var(--taupe);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.seg button + button { border-left: 1px solid var(--g-14); }
.seg button:hover { color: var(--ivory); background: var(--g-04); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(100deg, var(--gold), var(--gold-lift));
  color: var(--ink);
}

.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--g-08);
  font-size: .92rem;
  color: var(--taupe);
}
.calc__row b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--ivory);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.calc__row--total {
  margin-top: 1.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--g-35);
  border-bottom: 0;
}
.calc__row--total span { color: var(--gold); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; }
.calc__row--total b {
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--gold);
  line-height: 1;
}
.calc__bar {
  display: flex;
  height: 4px;
  margin-top: 1.8rem;
  overflow: hidden;
  background: var(--g-08);
}
.calc__bar i { display: block; height: 100%; transition: width .5s var(--ease-out); }
/* shared by the bar segments and the legend swatches */
.b-platform { background: rgba(183,169,162,.45); }
.b-agency   { background: var(--rouge-lift); }
.b-creator  { background: linear-gradient(90deg, var(--gold), var(--gold-lift)); }
.calc__key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1rem;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--taupe-dim);
}
.calc__key span { display: inline-flex; align-items: center; gap: .5rem; }
.calc__key i { flex: none; width: 9px; height: 9px; }

.disclaimer {
  margin-top: 1.8rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--g-22);
  background: rgba(52,21,28,.4);
  font-size: .86rem;
  line-height: 1.7;
  color: var(--taupe);
}
.disclaimer strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--gold);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   20. LEGAL PAGES
   -------------------------------------------------------------------------- */

.legal h2 {
  margin: 3.6rem 0 1.2rem;
  padding-top: 2.4rem;
  border-top: var(--hairline);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  margin: 2rem 0 .7rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal p, .legal li { color: var(--taupe); font-size: .99rem; }
.legal ul { padding-left: 1.4rem; margin: .9rem 0; }
.legal li { margin-bottom: .55rem; }

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: var(--hairline);
}
.toc a {
  padding: .6rem 1.2rem;
  border: 1px solid var(--g-22);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.toc a:hover { border-color: var(--gold); color: var(--gold); }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */

.ftr {
  position: relative;
  padding: clamp(4rem, 7vw, 6rem) 0 2.5rem;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(198,170,118,.06), transparent 68%),
    linear-gradient(180deg, var(--rouge-deep), #17090D);
  color: var(--taupe);
  font-size: .93rem;
}
.ftr::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-55) 50%, transparent);
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3.2rem;
  border-bottom: 1px solid var(--g-14);
}
.ftr h2 {
  margin-bottom: 1.3rem;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.ftr ul { list-style: none; }
.ftr li { margin-bottom: .65rem; }
.ftr a { color: var(--taupe); }
.ftr a:hover { color: var(--ivory); }
.ftr__tag { margin-top: 1.6rem; max-width: 34ch; font-size: .9rem; }
.ftr__legal {
  padding-top: 2rem;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--taupe-dim);
  max-width: 92ch;
}
.ftr__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--g-08);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--taupe-dim);
}

/* --------------------------------------------------------------------------
   22. CHROME, loader, progress, to-top, reveal
   -------------------------------------------------------------------------- */

.loader {
  position: fixed; inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: var(--ink-deep);
  transition: opacity .7s var(--ease), visibility .7s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.no-loader .loader { display: none; }
.loader__mark { position: relative; display: grid; place-items: center; }
.loader__ring {
  width: 92px; height: 92px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 1.6s var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.loader__vs {
  position: absolute;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--gold);
  opacity: 0;
  animation: fadeIn .9s var(--ease) .55s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.progress {
  position: fixed; top: 0; left: 0;
  z-index: 3100;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-lift));
  box-shadow: 0 0 12px rgba(198,170,118,.6);
  pointer-events: none;
}

.to-top {
  position: fixed;
  right: 1.8rem; bottom: 1.8rem;
  z-index: 800;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--g-35);
  background: rgba(13,10,11,.85);
  backdrop-filter: blur(8px);
  color: var(--gold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease-out), visibility .4s, border-color .35s var(--ease);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold); box-shadow: 0 0 24px rgba(198,170,118,.3); }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts__item:nth-child(3n+1) { border-left: 0; }
  .facts__item:nth-child(-n+3) { border-bottom: var(--hairline); }
  .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .ftr__grid > :nth-child(4) { grid-column: 1 / -1; padding-top: 2.4rem; border-top: 1px solid var(--g-08); }
}

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .hdr__in { height: 78px; }
  .hdr.is-stuck .hdr__in { height: 68px; }
}

@media (max-width: 900px) {
  .cols--2, .cols--2-3, .cols--3-2, .cols--3, .cols--4 { grid-template-columns: 1fr; }
  .creed { grid-template-columns: 1fr 1fr; }
  .creed__item:nth-child(odd) { border-left: 0; }
  .creed__item:nth-child(-n+2) { border-bottom: var(--hairline); }
  .calc { grid-template-columns: 1fr; }
  .calc__out { border-left: 0; border-top: var(--hairline); }
  .split { grid-template-columns: 1fr; }
  .split::before { display: none; }
  .split__item, .split__item + .split__item { padding: 2.4rem 0; }
  .split__item + .split__item { border-top: var(--hairline); }
  .index__row { grid-template-columns: 62px 1fr; gap: .5rem 1.4rem; }
  .index__row p { grid-column: 2; }
  .tline { grid-template-columns: 1fr; gap: 2.6rem; padding-top: 0; padding-left: 2.4rem; }
  .tline::before { inset: 6px auto 0 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--g-55), transparent); }
  .tline__step::before { top: 10px; left: calc(-2.4rem - 4px); }
  .form__grid { grid-template-columns: 1fr; }
  .ghost { display: none; }
  .band { background-attachment: scroll; }
  .hero__rail { display: none; }
  .sticky { position: static; }
}

/* on narrow screens the wall lettering in the hero photo sits right behind the
   headline, reframe it and weight the scrim towards the text */
@media (max-width: 700px) {
  .hero__media { background-position: 62% 38%; }
  .hero::before {
    background:
      radial-gradient(ellipse 80% 45% at 50% 72%, rgba(198,170,118,.07), transparent 72%),
      linear-gradient(180deg, rgba(10,8,9,.78) 0%, rgba(10,8,9,.4) 22%, rgba(10,8,9,.86) 55%, rgba(16,13,14,.97) 100%);
  }
  .eyebrow { letter-spacing: .26em; gap: .7rem; }
  .eyebrow::before, .eyebrow--center::after { width: 26px; }
}

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts__item { border-left: 0 !important; border-bottom: var(--hairline); }
  .facts__item:nth-child(even) { border-left: var(--hairline) !important; }
  .facts__item:last-child { grid-column: 1 / -1; border-left: 0 !important; }
  .ftr__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .ftr__grid > :nth-child(4) { padding-top: 0; border-top: 0; }
  .hero { padding-block: 9rem 4.5rem; min-height: 92svh; }
  .hero__cue { display: none; }
  .actions .btn { width: 100%; }
  .to-top { right: 1rem; bottom: 1rem; }
  .seg { grid-auto-flow: row; }
  .seg button + button { border-left: 0; border-top: 1px solid var(--g-14); }
}

/* short viewports: the drawer must never run out of room */
@media (max-height: 720px) {
  .drawer { padding-top: 5.5rem; overflow-y: auto; }
  .drawer__nav a { font-size: clamp(1.5rem, 6vw, 2rem); padding-block: .3rem; }
  .drawer__foot { margin-top: 1.8rem; }
}

/* --------------------------------------------------------------------------
   24. MOTION & PRINT PREFERENCES
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .loader { display: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal-words .w > span { transform: none; }
  .hero__media { animation: none; transform: none; }
  .band { background-attachment: scroll; }
}

@media print {
  .hdr, .drawer, .to-top, .progress, .loader, .band, .hero__cue { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
}