/* ============================================================
   KINGSWARD COLLECTIVE — luxury trading card restoration
   Direction: a speakeasy gallery. Hammered gold on leather black,
   engraved Trajan capitals, content emerging from darkness.
   Rolex restraint meets Westeros gravitas.
   ============================================================ */

/* ---- Tokens ---- */
:root {
  /* Color — drawn from the logo */
  --black:      #000000;   /* pure black base */
  --black-2:    #000000;   /* panels — same black so images have no edge */
  --black-3:    #121010;   /* card / hover (kept faintly raised for interaction) */
  --line:       #2A251C;   /* hairline on black */
  --line-soft:  #201C15;

  /* Metallic gold ramp */
  --gold-deep:  #6E561F;
  --gold:       #A9852F;
  --gold-mid:   #C6A24E;
  --gold-lite:  #E8CE8F;   /* champagne highlight */
  --gold-text:  #D9BE84;   /* readable gold on black */

  --parch:      #EDE4D0;   /* warm off-white text */
  --parch-dim:  #B8AC94;   /* muted */
  --parch-mute: #857C69;   /* faint captions */

  /* Type */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body:    "EB Garamond", Georgia, serif;
  --util:    "Cormorant Garamond", Georgia, serif;

  /* Scale */
  --step--1: clamp(0.82rem, 0.8rem + 0.12vw, 0.9rem);
  --step-0:  clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --step-1:  clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  --step-2:  clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem);
  --step-3:  clamp(2.3rem, 1.8rem + 2.4vw, 4rem);
  --step-4:  clamp(3rem, 2rem + 5vw, 6.5rem);

  --wrap: 1240px;
  --gutter: clamp(1.3rem, 4vw, 3.5rem);
  --radius: 1px;

  /* Gold as a gradient — for text and rules */
  --gold-grad: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-lite) 42%, var(--gold) 60%, var(--gold-lite) 82%, var(--gold-deep) 100%);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--parch);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; color: inherit; }

/* Pure black page — no wash, no veins, no glow */

/* ---- Layout helpers ---- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.stack > * + * { margin-top: 1.2rem; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* Gold text (metallic) */
.gold {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-text);
}

/* Eyebrow with compass-point flourish */
.eyebrow {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: inline-flex; align-items: center; gap: 0.9rem;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 2rem; height: 1px; background: var(--gold-grad); display: inline-block; opacity: 0.7;
}
.eyebrow.solo::after { display: none; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.12; letter-spacing: 0.01em; }
h1 { font-size: var(--step-4); font-weight: 600; letter-spacing: 0.02em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: 0.04em; }
p { max-width: 64ch; }

.lede { font-family: var(--util); font-size: var(--step-2); line-height: 1.35; color: var(--parch-dim); font-weight: 400; }

/* Divider: hairline with a compass diamond in the middle */
.rule {
  display: flex; align-items: center; gap: 1rem; justify-content: center;
  color: var(--gold); margin-block: 2rem;
}
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; max-width: 8rem; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.rule .diamond { width: 8px; height: 8px; background: var(--gold-grad); transform: rotate(45deg); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--display); font-weight: 500;
  font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1.05em 2em;
  border: 1px solid var(--gold-deep);
  background: transparent; color: var(--gold-text);
  border-radius: var(--radius); text-decoration: none;
  position: relative; overflow: hidden;
  transition: color .4s ease, border-color .4s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold-grad); opacity: 0;
  transition: opacity .4s ease;
}
.btn:hover { color: var(--black); border-color: var(--gold-lite); }
.btn:hover::before { opacity: 1; }
/* Gold granite — dense mineral speckle plus fine veining over a brighter mottled
   gold base. Stony and substantial, but unmistakably gold. */
.btn--solid {
  color: #2A2008; border-color: var(--gold-mid);
  background-color: #c99e3c;
  background-image:
    /* light mineral grains — stronger & brighter */
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,250,226,.95), transparent 55%),
    radial-gradient(1.4px 1.4px at 34% 68%, rgba(255,250,226,.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 58% 16%, rgba(255,250,226,.9), transparent 55%),
    radial-gradient(1.4px 1.4px at 76% 54%, rgba(255,250,226,.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 90% 30%, rgba(255,250,226,.8), transparent 55%),
    radial-gradient(1.4px 1.4px at 22% 88%, rgba(255,250,226,.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 66% 82%, rgba(255,250,226,.8), transparent 55%),
    /* dark mineral grains — stronger contrast */
    radial-gradient(2px 2px at 18% 44%, rgba(38,26,6,.9), transparent 58%),
    radial-gradient(2px 2px at 44% 28%, rgba(38,26,6,.8), transparent 58%),
    radial-gradient(2px 2px at 52% 74%, rgba(38,26,6,.85), transparent 58%),
    radial-gradient(2px 2px at 72% 20%, rgba(38,26,6,.78), transparent 58%),
    radial-gradient(2px 2px at 84% 66%, rgba(38,26,6,.85), transparent 58%),
    radial-gradient(2px 2px at 30% 12%, rgba(38,26,6,.78), transparent 58%),
    radial-gradient(2px 2px at 6% 74%, rgba(38,26,6,.82), transparent 58%),
    /* fine veins — thin off-diagonal streaks in light and dark */
    repeating-linear-gradient(58deg, transparent 0 34px, rgba(255,250,226,.14) 34px 35px, transparent 35px 70px),
    repeating-linear-gradient(58deg, transparent 0 52px, rgba(38,26,6,.20) 52px 53.4px, transparent 53.4px 96px),
    repeating-linear-gradient(122deg, transparent 0 68px, rgba(38,26,6,.14) 68px 69px, transparent 69px 130px),
    /* mottled base */
    radial-gradient(60% 80% at 30% 25%, color-mix(in srgb, var(--gold-lite) 55%, transparent), transparent 70%),
    radial-gradient(70% 90% at 78% 80%, color-mix(in srgb, var(--gold-deep) 55%, transparent), transparent 72%),
    linear-gradient(135deg, var(--gold), var(--gold-mid) 50%, var(--gold-deep));
  background-size:
    23px 23px, 29px 29px, 19px 19px, 31px 31px, 25px 25px, 27px 27px, 21px 21px,
    24px 24px, 30px 30px, 20px 20px, 28px 28px, 22px 22px, 26px 26px, 33px 33px,
    auto, auto, auto,
    100% 100%, 100% 100%, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,250,226,.3), inset 0 -1px 2px rgba(38,26,6,.5);
  text-shadow: 0 1px 1px rgba(38,26,6,.35);
}
.btn--solid::before { background: var(--gold-lite); opacity: 0; }
.btn--solid:hover { color: #2A2008; border-color: var(--gold-lite); }
.btn--solid:hover::before { opacity: .14; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--black) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 1.1rem; }
.brand { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand__txt { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; }
.brand__mark { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.2em; color: var(--parch); white-space: nowrap; }
.brand__tag { font-family: var(--display); font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-text); margin-top: 0.4rem; white-space: nowrap; }
.nav { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav a { text-decoration: none; font-size: 0.72rem; font-family: var(--display); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parch-dim); position: relative; padding-block: 0.4rem; transition: color .3s ease; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold-grad); transition: width .3s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav-toggle { display: none; grid-column: 3; justify-self: end; background: none; border: 1px solid var(--gold-deep); border-radius: var(--radius); padding: 0.55rem 0.8rem; color: var(--gold-text); font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; }

@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }
  /* keep the brand from colliding with the menu button on narrow screens */
  .site-head .wrap { grid-template-columns: auto 1fr auto; gap: 0.75rem; }
  .brand { grid-column: 1; justify-self: start; gap: 0.6rem; }
  .brand img { width: 38px; height: 38px; }
  .brand__txt { align-items: flex-start; text-align: left; }
  .brand__mark { font-size: 0.92rem; letter-spacing: 0.14em; }
  .brand__tag { font-size: 0.5rem; letter-spacing: 0.24em; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--black-2); padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    border-bottom: 1px solid var(--line);
  }
  .nav a { width: 100%; padding: 1.1rem var(--gutter); border-bottom: 1px solid var(--line-soft); }
  .nav.open { max-height: 26rem; }
}

/* ============================================================
   HERO — entering the room
   ============================================================ */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero::before { content: none; }
.hero .wrap { position: relative; padding-block: clamp(4.5rem, 12vw, 9rem); display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1.05fr 0.95fr; align-items: center; }
.hero h1 em { font-style: normal; display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero__crest { width: clamp(56px, 8vw, 78px); height: auto; margin-bottom: 1.6rem; filter: drop-shadow(0 6px 24px rgba(169,133,47,0.25)); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero figure { order: -1; } }

/* Crest-forward hero — the logo as the face of the house */
.hero--crest { min-height: min(90svh, 820px); display: grid; place-items: center; text-align: center; }
.hero--crest .wrap { display: block; padding-block: clamp(2.5rem, 6vw, 5rem); }
.crest-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin-inline: auto; max-width: 800px; }
.crest-glow { display: none; }
.crest-hero__logo {
  width: clamp(300px, 44vw, 560px); height: auto;
  filter: drop-shadow(0 26px 74px rgba(0,0,0,0.78));
  animation: crestIn 1.3s cubic-bezier(.2,.7,.2,1) both;
}
.crest-hero h1 { margin-top: 1.3rem; animation: crestIn 1.3s .25s cubic-bezier(.2,.7,.2,1) both; }
.crest-hero .lede {
  margin-top: .9rem; margin-inline: auto;
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55;
  animation: crestIn 1.3s .4s cubic-bezier(.2,.7,.2,1) both;
}
.crest-hero .hero-actions { justify-content: center; animation: crestIn 1.3s .55s cubic-bezier(.2,.7,.2,1) both; }
.scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-weight: 500; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--parch-mute); display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.scroll-cue::after { content: ""; width: 1px; height: 2.2rem; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: cue 2.2s ease-in-out infinite; }

@keyframes crestIn { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes crestGlow { 0%,100% { opacity: .55; } 50% { opacity: .85; } }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* Before/after showcase — its own section now that the hero is the crest */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }

/* Atmospheric band — cinematic "breath" between sections; image melts into page black */
.atmos {
  position: relative; min-height: clamp(320px, 52vw, 560px);
  display: grid; place-items: end center; overflow: hidden;
  background: var(--black-2);
}
.atmos__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.atmos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, #000 0%, transparent 34% 52%, #000 100%),
    linear-gradient(to right, #000 0%, transparent 34% 66%, #000 100%);
}
.atmos__cap {
  position: relative; z-index: 1; text-align: center;
  padding: clamp(2rem, 5vw, 3.4rem) 1.5rem clamp(2.4rem, 5vw, 3.6rem);
  max-width: 40ch;
}
.atmos__cap .eyebrow { justify-content: center; }
.atmos__cap p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.4;
  color: var(--parch); margin-top: 1rem; text-shadow: 0 2px 20px rgba(0,0,0,.85);
}

/* Banner variant — carries the page title, so center it vertically */
.atmos--banner { place-items: center; min-height: clamp(300px, 42vw, 460px); }
.atmos--banner .atmos__cap { max-width: none; }
.atmos--banner .atmos__cap h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem); white-space: nowrap;
  text-shadow: 0 3px 26px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9);
}
.atmos--banner .atmos__cap .eyebrow { text-shadow: 0 2px 14px rgba(0,0,0,.95); }
/* softer center so the cards stay visible, but every edge melts fully to black */
.atmos--banner::after {
  background:
    radial-gradient(115% 115% at 50% 50%, transparent 34%, #000 92%),
    linear-gradient(to bottom, #000 0%, transparent 32% 60%, #000 100%),
    linear-gradient(to right, #000 0%, transparent 30% 70%, #000 100%);
}

/* ============================================================
   SIGNATURE — before/after reveal w/ engraved frame
   ============================================================ */
.reveal-frame { position: relative; padding: 1.6rem; }
.reveal-frame::before {
  content: ""; position: absolute; inset: 0.6rem;
  border: 1px solid var(--gold-deep); pointer-events: none;
}
.reveal-frame .corner { position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--gold-mid); z-index: 2; }
.reveal-frame .corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.reveal-frame .corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.reveal-frame .corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.reveal-frame .corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.reveal {
  position: relative; aspect-ratio: 3 / 4; width: 100%;
  border-radius: var(--radius); overflow: hidden; user-select: none;
  background: var(--black-3); touch-action: none;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9), inset 0 0 0 1px var(--line);
}
.reveal__pane { position: absolute; inset: 0; }
.reveal__pane img { width: 100%; height: 100%; object-fit: cover; }
.reveal__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.reveal__tag {
  position: absolute; bottom: 1rem; font-family: var(--display); font-size: 0.6rem;
  font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--parch);
  background: color-mix(in srgb, var(--black) 62%, transparent); padding: 0.4rem 0.75rem; backdrop-filter: blur(3px);
}
.reveal__tag--b { left: 1rem; }
.reveal__tag--a { right: 1rem; color: var(--gold-lite); }
.reveal__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: var(--gold-grad); transform: translateX(-50%); }
.reveal__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--gold-grad); color: var(--black);
  display: grid; place-items: center; font-size: 1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.6); border: 1px solid var(--gold-lite);
}
.reveal__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.reveal__range:focus-visible + .reveal__handle .reveal__grip { outline: 2px solid var(--gold-lite); outline-offset: 4px; }
.reveal-caption { font-family: var(--display); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parch-mute); margin-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; }

/* ============================================================
   CREST STRIP
   ============================================================ */
.filestrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.filestrip--3 { grid-template-columns: repeat(3, 1fr); }
.filestrip .cell { background: var(--black); padding: 2rem 1.6rem; text-align: center; }
.filestrip .num { font-family: var(--display); font-weight: 600; font-size: var(--step-1); letter-spacing: 0.12em; }
.filestrip .lbl { font-family: var(--util); font-size: 1rem; letter-spacing: 0.04em; color: var(--parch-dim); margin-top: 0.5rem; }
@media (max-width: 720px) {
  .filestrip { grid-template-columns: repeat(2, 1fr); }
  /* Three-item strip: stack full-width and centered on mobile so every item
     (incl. "Reversible") is centered on solid black, with no empty tan cell. */
  .filestrip--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc {
  background: var(--black); padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: background .4s ease;
}
.svc:hover { background: var(--black-3); }
.svc__no { font-family: var(--display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.28em; color: var(--gold-text); }
.svc h3 { color: var(--parch); }
.svc p { color: var(--parch-dim); font-size: 1.05rem; }
.svc__price { font-family: var(--util); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--gold-text); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.svc__price-note { font-size: 0.85rem; font-style: italic; color: var(--parch-dim); letter-spacing: 0.01em; }

/* ============================================================
   PORTFOLIO — the vault (offset gallery plates)
   ============================================================ */
.vault { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.plate { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.plate:nth-child(even) .plate__panel { order: 2; }
.plate__frame { position: relative; padding: 0.9rem; border: 1px solid var(--line); background: var(--black-2); }
.plate__frame::after { content: ""; position: absolute; inset: 0.4rem; border: 1px solid var(--gold-deep); pointer-events: none; opacity: 0.5; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.duo .shot { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--black-3); }
.duo .shot img { width: 100%; height: 100%; object-fit: cover; }
.duo .shot__lbl { position: absolute; top: 0.6rem; left: 0.6rem; font-family: var(--display); font-weight: 500; font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--parch); background: color-mix(in srgb, var(--black) 65%, transparent); padding: 0.3rem 0.55rem; }
.duo .shot:nth-child(2) .shot__lbl { color: var(--gold-lite); }
.plate__no { font-family: var(--display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.28em; color: var(--gold-text); }
.plate h3 { margin-top: 0.6rem; color: var(--parch); font-size: var(--step-2); }
.plate__note { color: var(--parch-dim); margin-top: 1rem; }
.plate__spec { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: 0.5rem; }
.plate__spec li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line-soft); padding-bottom: 0.5rem; font-family: var(--util); font-size: 1.05rem; }
.plate__spec .k { color: var(--parch-mute); letter-spacing: 0.06em; }
.plate__spec .v { color: var(--gold-text); }
@media (max-width: 780px) { .plate { grid-template-columns: 1fr; } .plate:nth-child(even) .plate__panel { order: 0; } }

/* Placeholder image cell */
.ph-img { display: grid; place-items: center; text-align: center; color: var(--parch-mute); font-family: var(--display); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 1rem;
  background: repeating-linear-gradient(45deg, var(--black-3) 0 10px, var(--black-2) 10px 20px); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.6rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-family: var(--display); font-weight: 500; font-size: var(--step-1); color: var(--parch); transition: color .3s ease; }
.faq summary:hover { color: var(--gold-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sign { color: var(--gold); font-size: 1.5rem; font-family: var(--util); transition: transform .3s ease; flex: none; line-height: 1; }
.faq details[open] summary .sign { transform: rotate(45deg); }
.faq details[open] summary { color: var(--gold-text); }
.faq .answer { padding-bottom: 1.7rem; color: var(--parch-dim); }
.faq .answer p + p { margin-top: 0.9rem; }

/* ============================================================
   CONTACT / inquiry form
   ============================================================ */
.form-wrap { max-width: 820px; margin-inline: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.6rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--display); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: var(--step-0);
  padding: 0.9em 1.1em; border: 1px solid var(--line); background: var(--black-2); color: var(--parch);
  border-radius: var(--radius);
}
.field input::placeholder, .field textarea::placeholder { color: var(--parch-mute); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.field textarea { resize: vertical; min-height: 8.5rem; }
.form-note { font-family: var(--util); font-size: 1.05rem; color: var(--parch-mute); }
.form-status { font-family: var(--display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; padding: 1rem 1.2rem; border: 1px solid var(--gold-deep); background: color-mix(in srgb, var(--gold) 8%, var(--black)); border-radius: var(--radius); color: var(--gold-text); }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE HEADER (interior)
   ============================================================ */
.page-head { position: relative; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.page-head::before { content: none; }
.page-head .wrap { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem); text-align: center; }
.page-head .lede { margin-top: 1.4rem; }

/* Two-column intro */
.intro-2 { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 800px) { .intro-2 { grid-template-columns: 1fr; gap: 1rem; } }

/* ============================================================
   CTA band + FOOTER
   ============================================================ */
.cta-band { position: relative; border-block: 1px solid var(--line); overflow: hidden; text-align: center; }
.cta-band::before { content: none; }
.cta-band .wrap { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta-band h2 { margin-inline: auto; max-width: 20ch; }
/* Iconic card floating above the closing call-to-action */
.cta-card {
  width: clamp(150px, 20vw, 240px); height: auto;
  margin: 0 auto 2rem; display: block;
  transform: rotate(-4deg);
  filter: drop-shadow(0 22px 46px rgba(0,0,0,0.85)) drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  animation: crestIn 1.3s cubic-bezier(.2,.7,.2,1) both;
}
.cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }

.site-foot { background: var(--black-2); border-top: 1px solid var(--line); }
.site-foot .wrap { padding-block: 3.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.site-foot h4 { font-family: var(--display); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 1.2rem; }
.site-foot a { text-decoration: none; color: var(--parch-dim); display: block; padding: 0.3rem 0; font-family: var(--util); font-size: 1.1rem; transition: color .3s ease; }
.site-foot a:hover { color: var(--gold-text); }
.site-foot .brand { margin-bottom: 1rem; }
.foot-bottom { border-top: 1px solid var(--line); }
.foot-bottom .wrap { padding-block: 1.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-family: var(--display); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--parch-mute); text-transform: uppercase; }

/* ---- Reveal on scroll ---- */
.rise { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }
.rise[data-delay="1"] { transition-delay: .1s; }
.rise[data-delay="2"] { transition-delay: .2s; }
.rise[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .crest-hero__logo, .crest-hero h1, .crest-hero .lede, .crest-hero .hero-actions { animation: none; opacity: 1; transform: none; }
  .crest-glow, .scroll-cue::after { animation: none; }
}

/* Placeholder banner */
.ph {
  font-family: var(--display); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text); border: 1px dashed var(--gold-deep); border-radius: var(--radius);
  padding: 0.35rem 0.7rem; display: inline-block;
}