/* ==========================================================================
   Beyond Your Degree — design tokens
   Palette and type from BYD-Moodboard-FINAL.pdf. Plain CSS with custom
   properties so this file drops straight into a WordPress theme unchanged.
   ========================================================================== */

:root {
  /* Brand palette */
  --navy: #16283C;
  --sand: #E6DBC8;
  --sage: #879786;
  --gold: #C2A35E;
  --charcoal: #32353A;
  --offwhite: #FAF8F4;

  /* Derived tints */
  --sand-soft: #F2EBDF;
  --sage-soft: #B9C2B6;
  --navy-soft: rgba(22, 40, 60, 0.08);
  --rule: rgba(135, 151, 134, 0.35);

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;

  /* Rhythm — the client asked for breathing room, so sections are generous */
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 68ch;
}

/* --------------------------------------------------------------- reset */

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

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

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

/* UA gives blockquote/figure a 40px inline margin — kill it, we own the spacing */
blockquote, figure { margin: 0; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.25em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

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

/* --------------------------------------------------------------- layout */

.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--sand { background: var(--sand-soft); }
.section--navy { background: var(--navy); color: var(--offwhite); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--offwhite); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--offwhite);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- type */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.section--navy .eyebrow { color: var(--sage-soft); }

.display {
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
}

.h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }

.lede {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.65;
  color: var(--charcoal);
}

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem);
  line-height: 1.22;
  color: var(--navy);
  max-width: 22ch;
  margin: 0;
}
.section--navy .statement { color: var(--offwhite); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.0625rem 2rem;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--primary { background: var(--gold); color: var(--navy); }
.btn--primary:hover { background: var(--navy); color: var(--offwhite); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--offwhite); }

.section--navy .btn--outline { color: var(--offwhite); border-color: rgba(250, 248, 244, 0.5); }
.section--navy .btn--outline:hover { background: var(--offwhite); color: var(--navy); border-color: var(--offwhite); }

.btn--ghost { background: transparent; color: var(--offwhite); border-color: rgba(250, 248, 244, 0.55); }
.btn--ghost:hover { background: var(--offwhite); color: var(--navy); border-color: var(--offwhite); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 92px;
  padding-block: 0.75rem;
}


.site-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }

.site-nav a {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--charcoal);
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* :not(.btn) — otherwise this beats .btn--primary:hover and paints navy on navy */
.site-nav a:not(.btn):hover { color: var(--navy); border-color: var(--gold); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--navy); border-color: var(--gold); }

.site-nav .btn { padding: 0.75rem 1.5rem; border-bottom: 1px solid transparent; }
.site-nav .btn:hover { border-bottom-color: transparent; }

/* `.site-nav a` (0,1,1) outranks `.btn--primary` (0,1,0), so without these the
   nav button inherits the link colour — dark text on a dark hover background. */
.site-nav .btn--primary { color: var(--navy); }
.site-nav .btn--primary:hover { color: var(--offwhite); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--offwhite);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.75rem;
  }
  .site-nav[hidden] { display: none; }
  .site-nav a {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
  }
  .site-nav .btn { margin-top: 1.25rem; justify-content: center; }
  .site-header__inner { min-height: 76px; }
}

/* --------------------------------------------------------------- lockup */

/* Horizontal lockup: mark beside the wordmark, strapline on ONE line
   directly beneath and exactly as wide as the wordmark. The strapline is SVG
   text with textLength locked to the viewBox, so it always fills that width
   on a single line regardless of font loading, and inherits the logo colour
   via currentColor. A stacked lockup forced either a three-line strapline or
   a 140px header; this keeps the header short. */
.lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--navy);
}

.lockup__mark { width: 52px; height: auto; display: block; flex-shrink: 0; }

.lockup__text { display: block; width: 248px; }

.lockup__wordmark { width: 100%; height: auto; display: block; }

.lockup__tagline {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-weight: 500;
}

.lockup--footer { color: var(--offwhite); align-items: center; }
.lockup--footer .lockup__mark { width: 54px; }
.lockup--footer .lockup__text { width: 268px; }

@media (max-width: 900px) {
  .lockup__mark { width: 38px; }
  .lockup__text { width: 192px; }
  .lockup { gap: 0.55rem; }
}

/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  color: var(--offwhite);
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.hero--tall { min-height: clamp(560px, 82vh, 820px); }
.hero--default { min-height: clamp(480px, 68vh, 700px); }
.hero--short { min-height: clamp(340px, 44vh, 460px); }

.hero__media { position: absolute; inset: 0; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Scrim keeps the copy legible over any photograph the client swaps in */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(22, 40, 60, 0.90) 0%, rgba(22, 40, 60, 0.62) 45%, rgba(22, 40, 60, 0.24) 100%),
    linear-gradient(to right, rgba(22, 40, 60, 0.48) 0%, rgba(22, 40, 60, 0.06) 62%);
}

.hero__content { position: relative; z-index: 1; }

.hero h1, .hero .display { color: var(--offwhite); }
.hero .eyebrow { color: var(--sage-soft); }

.hero__headline { max-width: 17ch; }
.hero--default .hero__headline, .hero--short .hero__headline { max-width: 21ch; }

.hero__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 58ch; }
.hero__body .lede { color: rgba(250, 248, 244, 0.88); }

.hero__actions { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* Hero sits directly under a translucent sticky header — pull it up so the
   image runs behind the header instead of starting below it. */
.hero { margin-top: -1px; }

/* --------------------------------------------------------------- figures */

.figure { margin: 0; }

.figure img {
  width: 100%;
  height: clamp(260px, 42vw, 560px);
  object-fit: cover;
  border-radius: 2px;
}

.figure figcaption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--sage);
  letter-spacing: 0.02em;
}

.figure--full { width: 100%; }

.figure__media { position: relative; }

/* Marks a stand-in image so it can't quietly ship as the real thing */
.figure__badge {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  background: rgba(22, 40, 60, 0.88);
  color: var(--offwhite);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 1px;
}

/* Placeholder shown until a real image is dropped in */
.figure__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  height: clamp(260px, 42vw, 560px);
  background: var(--sand-soft);
  border: 1px dashed var(--sage);
  border-radius: 2px;
  color: var(--sage);
  padding: 2rem;
}
.figure__placeholder span:first-child {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--navy);
}
.figure__placeholder span:last-child {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  max-width: 40ch;
}

/* --------------------------------------------------------------- program */

.section__intro { margin-top: 1.25rem; max-width: 62ch; }

/* All three programs visible at once — a set of tiers is meant to be compared,
   and a slider hid two thirds of the offering behind an interaction. */
.tier-stack {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  background: var(--offwhite);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  height: 100%;
}

.tier__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.tier__detail { display: flex; flex-direction: column; gap: 1.125rem; }

@media (max-width: 760px) {
  .tier { grid-template-columns: 1fr; gap: 1.5rem; }
}

.tier--featured {
  background: var(--sand-soft);
  border-color: var(--gold);
  box-shadow: 0 1px 0 var(--gold) inset, 0 0 0 1px var(--gold);
}

.tier__badge {
  position: absolute;
  top: 0;
  right: clamp(1.75rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 1px;
}

.program-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sand-soft);
  border: 1px solid var(--rule);
  color: var(--gold);
  flex-shrink: 0;
}

.program-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }

.tier .program-icon { margin-bottom: 0.5rem; }

@media (max-width: 600px) {
  .program-icon { width: 48px; height: 48px; }
  .program-icon svg { width: 24px; height: 24px; }
}

.tier__title { margin: 0; }

.tier__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.35;
  color: var(--sage);
  margin: 0;
  max-width: none;
}

.tier__body { margin: 0; max-width: none; font-size: 1rem; }

.tier__includes { margin: 0; }

.tier__label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.tier__includes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
}

.tier__includes li { display: flex; gap: 0.625rem; }

.tier__includes li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--gold);
}

.tier__bestfor {
  margin: 0;
  max-width: none;
  font-size: 0.9375rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
}

.tier__bestfor .tier__label { display: inline; margin: 0; letter-spacing: 0.12em; }

/* Pin every card's button to the bottom so the row of CTAs lines up */
.tier__cta { margin-top: 0.75rem; }

.pricing-note {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}
.pricing-note a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.pricing-note a:hover { color: var(--navy); }

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

.addon { display: flex; align-items: stretch; gap: 1.125rem; height: 100%; }

.addon .program-icon { align-self: flex-start; }

/* Columns stretch and the CTAs bottom-align, so the extra program label on
   one card doesn't leave the two buttons on different lines. */
.addon__content { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.addon__heading { margin: 0 0 0.25rem; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }

.addon__title {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.625rem;
}

.addon__body { margin: 0 0 1.5rem; font-size: 0.9375rem; max-width: 46ch; }

.addon__cta { padding: 0.8rem 1.5rem; margin-top: auto; align-self: flex-start; }

@media (max-width: 600px) {
  .addon { flex-direction: column; gap: 1rem; height: auto; }
  .addon__cta { margin-top: 0; }
}

/* --------------------------------------------------------------- carousel */

.carousel { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.carousel__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/* Controls are centred and solid rather than ghosted — the client could not
   tell the slider was a slider when the arrows were outlines at the edge. */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.875rem, 2vw, 1.25rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: var(--navy);
  color: var(--offwhite);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.carousel__arrow svg { width: 22px; height: 22px; }
.carousel__arrow:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: scale(1.05); }
.carousel__arrow:disabled { background: transparent; color: var(--sage); border-color: var(--rule); cursor: default; }

.carousel__dots { display: flex; align-items: center; gap: 0.5rem; }

.carousel__dot {
  width: 40px;
  height: 4px;
  padding: 0.6rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.carousel__dot::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  background: var(--sage-soft);
  transition: background-color 0.2s ease;
}
.carousel__dot[aria-current="true"]::after { background: var(--gold); }
.carousel__dot:hover::after { background: var(--sage); }

.carousel__count {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--sage);
  min-width: 4ch;
  text-align: center;
}

/* --------------------------------------------------------------- reasons */

.reasons {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  counter-reset: reason;
}

.reasons li {
  counter-increment: reason;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  max-width: 72ch;
}
.reasons li:last-child { border-bottom: 0; padding-bottom: 0; }

.reasons li::before {
  content: "0" counter(reason);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .reasons li { grid-template-columns: 3.25rem minmax(0, 1fr); }
}

/* --------------------------------------------------------------- testimonials */

.testimonial {
  background: var(--offwhite);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

@media (max-width: 760px) {
  .testimonial { grid-template-columns: 1fr; gap: 1.5rem; }
}
.section--sand .testimonial { background: var(--offwhite); }

.testimonial__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--gold);
  height: 1.2rem;
  margin-bottom: 0.75rem;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.375rem);
  line-height: 1.5;
  color: var(--navy);
}

.testimonial__quote p { margin: 0 0 0.875em; max-width: none; }
.testimonial__quote p:last-child { margin-bottom: 0; }

.testimonial__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

@media (max-width: 760px) {
  .testimonial__footer { flex-direction: row; align-items: center; }
}

/* Monogram stands in until real names and photos arrive */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sand);
  border: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.testimonial__attribution {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: var(--sage);
  margin: 0;
  line-height: 1.45;
}

.placeholder-note {
  font-size: 0.8125rem;
  color: var(--sage);
  font-style: italic;
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------- closing band */

.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 3rem);
}

/* --------------------------------------------------------------- about */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.about-layout .figure img,
.about-layout .figure__placeholder { height: clamp(340px, 40vw, 520px); }
.about-layout .figure__media { height: clamp(340px, 40vw, 520px); }

.about-portrait { position: sticky; top: 124px; }

@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-portrait { position: static; }
}

.pull-quote {
  margin: clamp(2.25rem, 4vw, 3rem) 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.3;
  color: var(--navy);
  max-width: 26ch;
}

/* --------------------------------------------------------------- form */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.form { display: grid; gap: 1.5rem; }

.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--offwhite);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 0.875rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--sage); }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--navy); outline: none; }

.field textarea { min-height: 150px; resize: vertical; }

.field select { appearance: none; background-image: none; }

.form__note { font-size: 0.8125rem; color: var(--sage); margin: 0; }

.contact-aside { display: grid; gap: 1.75rem; }

.contact-aside dl { margin: 0; display: grid; gap: 1.25rem; }
.contact-aside dt {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.35rem;
}
.contact-aside dd { margin: 0; font-size: 1.0625rem; color: var(--navy); }
.contact-aside dd a { text-decoration: none; border-bottom: 1px solid var(--gold); }

/* --------------------------------------------------------------- footer */

.site-footer { background: var(--navy); color: var(--sage-soft); padding-block: clamp(3.5rem, 6vw, 5rem); }

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 800px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}


.site-footer p { font-size: 0.9375rem; color: var(--sage-soft); max-width: 34ch; }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.125rem;
  font-weight: 500;
}

.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer-list a {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--offwhite);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.footer-list a:hover { border-bottom-color: var(--gold); }

.site-footer__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(185, 194, 182, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--sage);
}

.site-credit a {
  color: var(--sage-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 163, 94, 0.6);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-credit a:hover { color: var(--offwhite); border-bottom-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.form__success {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.35;
  color: var(--navy);
  border-left: 2px solid var(--gold);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  max-width: 34ch;
}

/* --------------------------------------------------------------- instagram */

.instagram-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.5rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid rgba(185, 194, 182, 0.45);
  border-radius: 2px;
  text-decoration: none;
  color: var(--offwhite);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.instagram-cta:hover { background: rgba(250, 248, 244, 0.07); border-color: var(--gold); }

.instagram-cta svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--gold); }

.instagram-cta span { display: grid; gap: 0.15rem; }
.instagram-cta strong { font-size: 0.9375rem; font-weight: 500; }
.instagram-cta em { font-style: normal; font-size: 0.8125rem; color: var(--sage); }