/* ============================================================
   GUITAR VAULT — MAIN STYLESHEET
   Mobile-first: base → components → pages → responsive
   ============================================================


   TABLE OF CONTENTS
   -----------------
   1.  Custom Properties
   2.  Fonts
   3.  Reset
   4.  Base
   5.  Navigation
       5a. Top bar
       5b. Brand lockup
       5c. Nav links
       5d. Hamburger toggle
       5e. Menu overlay
   6.  Landing Page
       6a. Page layout
       6b. Hero
       6c. Signup form  (stacked by default — expands at 521px)
   7.  Doc Pages (Terms, Privacy, Contact)
       7a. Wrapper & header
       7b. Body & sections
       7c. Legal page nav
       7d. Doc footer  (stacked by default — expands at 521px)
   8.  Contact Form
       8a. Fields  (stacked by default — expands at 521px)
       8b. Submit & feedback
       8c. Success state
       8d. Page two-column layout  (single col mobile → two col at 768px)
   9.  Responsive — Tablet & Desktop (min-width: 521px)

   ============================================================ */


/* ---- 1. Custom Properties --------------------------------------- */

:root {
  --gv-gold: #c4944a;
  --gv-gold-bright: #d9a441;
  --gv-gold-soft: #e3c07a;
  --gv-on-gold: #1c1407;
  --gv-bg: #1a1918;
  --gv-bg-deep: #121110;
  --gv-surface-1: #252220;
  --gv-surface-2: #352e24;
  --gv-text: #f9f7f2;
  --gv-text-2: #9a958d;
  --gv-text-3: #CCC;
  --gv-border: #38332c;
  --gv-border-gold: rgba(196, 148, 74, .45);
  --gv-r-md: 16px;
  --gv-r-pill: 999px;
  --gv-success: #6fae6b;
  --gv-serif: "Playfair Display", "Georgia", serif;
  --gv-sans: "Urbanist", system-ui, -apple-system, sans-serif;
  --gv-glow-gold: 0 6px 22px rgba(196, 148, 74, .30);
}


/* ---- 2. Fonts --------------------------------------------------- */

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/PlayfairDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("/fonts/Urbanist-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ---- 3. Reset --------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
}

/* Fix browser autofill styling (removes yellow background) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
  -webkit-text-fill-color: var(--gv-text) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: transparent !important;
}


/* ---- 4. Base ---------------------------------------------------- */

body {
  font-family: var(--gv-sans);
  color: var(--gv-text);
  background-color: var(--gv-bg-deep);
  background-image:
    radial-gradient(115% 115% at 50% 45%, transparent 30%, rgba(0, 0, 0, .45) 70%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(rgba(0, 0, 0, .40), rgba(0, 0, 0, .40)),
    url("/assets/bkg-leather-seamless.png");
  background-size: cover, auto, 1100px 1100px;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, scroll, fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---- 5a. Top bar ------------------------------------------------ */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 200;
  /* stays above menu overlay */
}

.topbar--sub {
  padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 48px);
}


/* ---- 5b. Brand lockup ------------------------------------------ */

.brand-mini {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-mini__logo {
  width: 110px;
  height: 52px; /* Scale up the image to crop out the transparent space in the SVG */
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
  margin: -2px 0; /* Offset the extra height so the header doesn't expand */
}

@media (min-width: 768px) {
  .brand-mini__logo {
    width: 135px;
    height: 62px;
    margin: -7px 0;
  }
}


/* ---- 5c. Nav links --------------------------------------------- */

.topnav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topnav__link {
  font-family: var(--gv-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gv-text);
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid var(--gv-border-gold);
  border-radius: var(--gv-r-pill);
  background: rgba(196, 148, 74, 0);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.topnav__link:hover {
  color: var(--gv-on-gold);
  background: var(--gv-gold);
  border-color: var(--gv-gold);
}


/* ---- 5d. Hamburger toggle ------------------------------------- */

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gv-border-gold);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition:
    border-color 160ms cubic-bezier(.2, .8, .2, 1),
    background 160ms cubic-bezier(.2, .8, .2, 1);
}

.menu-toggle:hover,
.menu-toggle.is-open {
  background: rgba(37, 34, 32, .6);
}

.menu-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gv-text);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 320ms cubic-bezier(.4, 0, .2, 1),
    opacity 200ms ease;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ---- 5e. Menu overlay ------------------------------------------ */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 7vh, 72px);
  padding: clamp(80px, 12vh, 100px) 24px clamp(48px, 7vh, 72px);
  background: rgba(0, 0, 0, .5);
  /* Closed: hidden above viewport */
  transform: translateY(-100%);
  visibility: hidden;
  opacity: 0;
  backdrop-filter: blur(10px);
  ;
  transition:
    transform 0.45s cubic-bezier(.4, 0, .2, 1),
    opacity 0.35s ease,
    visibility 0s linear 0.45s;
}

.menu-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  transition:
    transform 0.45s cubic-bezier(.4, 0, .2, 1),
    opacity 0.35s ease,
    visibility 0s linear 0s;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease 0.2s, transform 0.4s cubic-bezier(.2, .8, .2, 1) 0.2s;
}

.menu-overlay.is-open .menu-nav {
  opacity: 1;
  transform: translateY(0);
}

.menu-nav__link {
  font-family: var(--gv-sans);
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #CCC;
  text-decoration: none;
  padding: 10px 4px;
  position: relative;
  transition: color 160ms ease;
}

.menu-nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--gv-gold);
  border-radius: 1px;
  transition: width 300ms cubic-bezier(.2, .8, .2, 1);
}

.menu-nav__link:hover {
  color: #FFF;
}

.menu-nav__link:hover::after {
  width: 100%;
}

.menu-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease 0.3s, transform 0.4s cubic-bezier(.2, .8, .2, 1) 0.3s;
}

.menu-overlay.is-open .menu-secondary {
  opacity: 1;
  transform: translateY(0);
}

.menu-secondary__link {
  font-family: var(--gv-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #EEE;
  text-decoration: none;
  padding: 7px 16px;
  border: 1px solid var(--gv-border-gold);
  border-radius: var(--gv-r-pill);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.menu-secondary__link:hover {
  color: var(--gv-text);
  background: rgba(196, 148, 74, .08);
  border-color: var(--gv-gold);
}


/* ---- 6a. Landing page layout ----------------------------------- */

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 48px);
  gap: clamp(24px, 4vh, 48px);
}


/* ---- 6b. Hero -------------------------------------------------- */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(20px, 3.4vh, 34px);
  margin-top: -10%;
}

.hero__logo {
  width: clamp(120px, 30vw, 250px);
  height: auto;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .6));
}

.hero__copy {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 18px);
}

.strapline {
  font-family: var(--gv-serif);
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--gv-text);
  text-wrap: balance;
  padding: 0 24px;
}

.strapline em {
  font-style: italic;
  color: var(--gv-gold-bright);
}

.word-cycle {
  display: inline-block;
  position: relative;
  /* Clip the rolling wheel effect; negative bottom allows the underline through */
  clip-path: inset(0 -4px -8px -4px);
  will-change: opacity, transform;
}

.word-cycle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--gv-gold);
  border-radius: 1px;
}

.word-cycle.is-final::after {
  animation: gv-word-progress 5s linear forwards;
}

@keyframes gv-word-progress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.description {
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.6;
  color: var(--gv-text-2);
  max-width: 780px;
  text-wrap: pretty;
}


/* ---- 6c. Signup form (stacked by default) ---------------------- */

.signup {
  width: 100%;
  max-width: 480px;
  margin-top: clamp(6px, 1.4vh, 12px);
}

.signup__overline {
  font-family: var(--gv-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gv-gold);
  margin-bottom: 24px;
}

.signup__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(37, 34, 32, .72);
  border: 1px solid var(--gv-border);
  border-radius: 22px;
  padding: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(249, 247, 242, .04), 0 10px 30px rgba(0, 0, 0, .45);
  transition: border-color 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms cubic-bezier(.2, .8, .2, 1);
}

.signup__form:focus-within {
  border-color: var(--gv-border-gold);
  box-shadow: inset 0 1px 0 rgba(249, 247, 242, .04), 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 3px rgba(196, 148, 74, .14);
}

.signup__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--gv-text);
  font-family: var(--gv-sans);
  font-size: 16px;
  padding: 12px;
  text-align: center;
}

.signup__input::placeholder {
  color: var(--gv-text-3);
}

.signup__btn {
  width: 100%;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: var(--gv-gold);
  color: var(--gv-on-gold);
  font-family: var(--gv-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: var(--gv-r-pill);
  box-shadow: var(--gv-glow-gold);
  transition: background 160ms cubic-bezier(.2, .8, .2, 1), transform 120ms cubic-bezier(.2, .8, .2, 1);
  white-space: nowrap;
}

.signup__btn:hover {
  background: var(--gv-gold-bright);
}

.signup__btn:active {
  transform: scale(.97);
}

.signup__note {
  margin-top: 24px;
  font-size: 14px;
  color: rgb(173, 170, 164);
  min-height: 18px;
  transition: color 180ms ease;
}

.signup__note.is-success {
  color: var(--gv-success);
  padding: 20px;
  border: 1px solid var(--gv-success);
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.2);
}

.signup__note.is-error {
  color: var(--gv-gold-soft);
}

.signup.is-done .signup__form {
  display: none;
}


/* ---- 7a. Doc page wrapper & header ----------------------------- */

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 48px) clamp(48px, 8vh, 96px);
}

.doc-head {
  border-bottom: 1px solid var(--gv-border);
  padding-bottom: clamp(20px, 4vh, 32px);
  margin-bottom: clamp(28px, 5vh, 44px);
}

.doc-overline {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gv-gold);
  margin-bottom: 14px;
}

.doc-title {
  font-family: var(--gv-serif);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--gv-text);
}

.doc-updated {
  margin-top: 16px;
  font-size: 14px;
  color: var(--gv-text-3);
}


/* ---- 7b. Doc body & sections ----------------------------------- */

.doc-body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 40px);
}

.doc-section h2 {
  font-family: var(--gv-serif);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  color: var(--gv-text);
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.doc-section h2 .num {
  font-family: var(--gv-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--gv-gold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.doc-section h3 {
  font-family: var(--gv-serif);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.3;
  color: var(--gv-text-2);
  margin-top: clamp(20px, 3vh, 30px);
  margin-bottom: 10px;
}

.doc-section p {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--gv-text-2);
  text-wrap: pretty;
}

.doc-section p+p {
  margin-top: 14px;
}

.doc-section ul {
  margin-top: 14px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-section li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  color: var(--gv-text-2);
}

.doc-section li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gv-gold);
}

.doc-section a {
  color: var(--gv-gold-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--gv-border-gold);
}

.doc-section a:hover {
  color: var(--gv-gold-bright);
}


/* ---- 7d. Doc footer (stacked by default) ----------------------- */

.doc-foot {
  margin-top: clamp(40px, 7vh, 72px);
  padding-top: clamp(24px, 4vh, 36px);
  border-top: 1px solid var(--gv-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.doc-foot__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.foot-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gv-text-2);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-pill);
  background: rgba(26, 25, 24, .45);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.foot-link:hover {
  color: var(--gv-text);
  border-color: var(--gv-border-gold);
  background: rgba(53, 46, 36, .5);
}

.foot-link.is-active {
  color: var(--gv-gold-soft);
  border-color: var(--gv-border-gold);
}

.doc-foot__copyright {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gv-text-3);
}


/* ---- 7c. Legal page nav ---------------------------------------- */

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: clamp(20px, 3vh, 28px) 0;
  border-top: 1px solid var(--gv-border);
  border-bottom: 1px solid var(--gv-border);
  margin-bottom: clamp(28px, 4vh, 40px);
}

.legal-nav+.doc-body+.legal-nav {
  border-top: 1px solid var(--gv-border);
  border-bottom: none;
  margin-top: clamp(28px, 4vh, 40px);
  margin-bottom: 0;
}

.legal-nav__link {
  font-family: var(--gv-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gv-text-2);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-pill);
  background: rgba(26, 25, 24, .45);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.legal-nav__link:hover {
  color: var(--gv-text);
  border-color: var(--gv-border-gold);
  background: rgba(53, 46, 36, .5);
}

.legal-nav__link.is-active {
  color: var(--gv-gold-soft);
  border-color: var(--gv-border-gold);
  background: rgba(196, 148, 74, .08);
  pointer-events: none;
}


/* ---- 8a. Contact form fields (stacked by default) -------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 24px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.field__label {
  font-family: var(--gv-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gv-gold);
}

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  font-family: var(--gv-sans);
  font-size: 16px;
  color: var(--gv-text);
  background: rgba(37, 34, 32, .72);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-md);
  padding: 14px 16px;
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 160ms cubic-bezier(.2, .8, .2, 1), box-shadow 160ms cubic-bezier(.2, .8, .2, 1);
}

.field__textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.55;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--gv-text-3);
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  border-color: var(--gv-border-gold);
  box-shadow: 0 0 0 3px rgba(196, 148, 74, .14);
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239a958d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.field__row {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 24px);
}

.field__row .field {
  flex: 1;
  min-width: 0;
}


/* ---- 8b. Submit button & form feedback ------------------------- */

.contact-submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: var(--gv-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--gv-on-gold);
  background: var(--gv-gold);
  padding: 15px 32px;
  border-radius: var(--gv-r-pill);
  box-shadow: var(--gv-glow-gold);
  transition: background 160ms cubic-bezier(.2, .8, .2, 1), transform 120ms cubic-bezier(.2, .8, .2, 1);
}

.contact-submit:hover {
  background: var(--gv-gold-bright);
}

.contact-submit:active {
  transform: scale(.97);
}

.contact-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.form-note {
  font-size: 14px;
  color: var(--gv-text-3);
  min-height: 20px;
  transition: color 160ms ease;
}

.form-note.is-success {
  color: var(--gv-success);
}

.form-note.is-error {
  color: var(--gv-gold-soft);
}


/* ---- 8c. Contact success state --------------------------------- */

.contact-success {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 4vh, 36px);
  border: 1px solid var(--gv-border-gold);
  border-radius: 22px;
  background: rgba(196, 148, 74, .06);
}

.contact-success h2 {
  font-family: var(--gv-serif);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 30px);
  color: var(--gv-text);
}

.contact-success p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gv-text-2);
}

.is-sent .contact-form {
  display: none;
}

.is-sent .contact-success {
  display: flex;
}


/* ---- 8d. Contact page two-column layout ------------------------ */

.contact-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 48px) clamp(48px, 8vh, 96px);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(32px, 5vh, 48px);
  align-items: start;
}

.contact-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 18px);
}

.contact-intro__meta {
  font-size: 14px;
  color: var(--gv-text-3);
}

.contact-intro__body {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--gv-text-2);
  text-wrap: pretty;
}

.contact-intro__body a {
  color: var(--gv-gold-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--gv-border-gold);
}

.contact-intro__body a:hover {
  color: var(--gv-gold-bright);
}


/* ---- 9. Responsive — Tablet & Desktop (min-width: 521px) ------- */

@media (min-width: 521px) {

  .strapline {
    padding: 0;
  }

  /* Signup form: pill row layout */
  .signup__form {
    flex-direction: row;
    border-radius: var(--gv-r-pill);
    padding: 7px 7px 7px 8px;
    gap: 10px;
  }

  .signup__input {
    padding: 0 12px;
    text-align: left;
  }

  .signup__btn {
    width: auto;
    padding: 13px 24px;
  }

  /* Contact form: name & email side by side */
  .field__row {
    flex-direction: row;
    gap: 16px;
  }

  /* Doc footer: copyright inline with links */
  .doc-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* ---- 10. Signup Modal ------------------------------------------ */

.signup-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.signup-modal.is-visible {
  opacity: 1;
  visibility: visible;
}

.signup-modal__panel {
  background: #222;
  border: 1px solid var(--gv-border);
  border-top: 2px solid var(--gv-gold);
  border-radius: 14px;
  padding: clamp(28px, 5vw, 44px);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}

.signup-modal.is-visible .signup-modal__panel {
  transform: translateY(0);
}

.signup-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gv-text-3);
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  transition: color 200ms ease;
}

.signup-modal__close:hover {
  color: var(--gv-text);
}

.signup-modal__title {
  font-family: var(--gv-serif);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
  color: var(--gv-text);
  margin-bottom: 8px;
}

.signup-modal__sub {
  font-size: 16px;
  color: var(--gv-text-3);
  line-height: 1.6;
  margin-bottom: clamp(24px, 4vh, 32px);
}

.modal-field {
  margin-bottom: 20px;
}

.modal-field__label {
  display: block;
  font-family: var(--gv-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gv-text-3);
  margin-bottom: 8px;
}

.modal-field__input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gv-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--gv-sans);
  font-size: 15px;
  color: var(--gv-text);
  transition: border-color 200ms ease;
}

.modal-field__input::placeholder {
  color: var(--gv-text-3);
}

.modal-field__input:focus {
  outline: none;
  border-color: var(--gv-gold);
}

/* Region dropdown */
.modal-dropdown {
  position: relative;
}

.modal-dropdown__trigger {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gv-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--gv-sans);
  font-size: 15px;
  color: var(--gv-text);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 200ms ease;
}

.modal-dropdown__trigger:hover,
.modal-dropdown__trigger.is-open {
  border-color: var(--gv-border-gold);
}

.dd-placeholder {
  color: var(--gv-text-3);
}

.modal-dropdown__chevron {
  flex-shrink: 0;
  margin-left: 10px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--gv-text-3);
  border-bottom: 1.5px solid var(--gv-text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms ease;
}

.modal-dropdown__trigger.is-open .modal-dropdown__chevron {
  transform: rotate(-135deg) translateY(2px);
}

.modal-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #111;
  border: 1px solid var(--gv-border);
  border-radius: 8px;
  z-index: 20;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.modal-dropdown__panel.is-open {
  display: block;
}

.modal-dropdown__search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gv-border);
  padding: 10px 14px;
  font-family: var(--gv-sans);
  font-size: 14px;
  color: var(--gv-text);
  outline: none;
}

.modal-dropdown__search::placeholder {
  color: var(--gv-text-3);
}

.modal-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 180px;
  overflow-y: auto;
}

.modal-dropdown__item {
  padding: 10px 14px;
  font-family: var(--gv-sans);
  font-size: 14px;
  color: var(--gv-text-2);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.modal-dropdown__item:hover {
  background: rgba(196, 148, 74, .1);
  color: var(--gv-text);
}

.modal-dropdown__item.is-selected {
  color: var(--gv-gold-soft);
}

.modal-dropdown__empty {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--gv-text-3);
}

/* Interest checkbox pills */
.modal-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-check {
  position: relative;
}

.modal-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.modal-check__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-pill);
  font-family: var(--gv-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gv-text-3);
  cursor: pointer;
  user-select: none;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.modal-check__label::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--gv-border);
  border-radius: 3px;
  transition: background 200ms ease, border-color 200ms ease;
}

.modal-check__label:hover {
  border-color: var(--gv-border-gold);
  color: var(--gv-text-2);
}

.modal-check__label:hover::before {
  border-color: var(--gv-border-gold);
}

.modal-check input:checked+.modal-check__label {
  border-color: var(--gv-gold);
  color: var(--gv-gold-soft);
  background: rgba(196, 148, 74, 0.08);
}

.modal-check input:checked+.modal-check__label::before {
  background: var(--gv-gold);
  border-color: var(--gv-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%230e0c09' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

.modal-check input:focus-visible+.modal-check__label {
  outline: 2px solid var(--gv-gold);
  outline-offset: 2px;
}

/* Modal action buttons */
.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: clamp(24px, 4vh, 32px);
}

.modal-submit {
  flex: 1;
  padding: 13px 20px;
  background: var(--gv-gold);
  color: #0e0c09;
  border: none;
  border-radius: var(--gv-r-pill);
  font-family: var(--gv-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease;
}

.modal-submit:hover:not(:disabled) {
  background: var(--gv-gold-bright);
}

.modal-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-skip {
  padding: 13px 20px;
  background: none;
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-pill);
  font-family: var(--gv-sans);
  font-size: 13px;
  color: var(--gv-text-3);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}

.modal-skip:hover {
  border-color: var(--gv-border-gold);
  color: var(--gv-text-2);
}

.modal-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--gv-text-3);
  text-align: center;
  min-height: 1em;
}

.modal-note.is-error {
  color: #e07070;
}


/* ---- Contact page: two columns at 768px+ ----------------------- */

@media (min-width: 768px) {
  .contact-page {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(48px, 7vw, 96px);
    row-gap: 0;
  }

  .contact-page__footer {
    grid-column: 1 / -1;
  }
}