/* ==========================================================================
   Golden Thread Connections — Design System
   Built on the brand kit's design tokens (brand-kit/04_Website_Starter/tokens.css).
   Palette, type, and component rules follow BRAND_GUIDELINES.md.
   ========================================================================== */

/* woff2 only: supported everywhere since 2016 and ~85% smaller than the .ttf
   originals these replaced (3.0MB -> 485KB). CormorantGaramond-SemiBold was
   dropped entirely — weight 600 was declared but never applied to anything. */
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/CormorantGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/CormorantGaramond-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../assets/fonts/LibreBaskerville-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../assets/fonts/LibreBaskerville-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../assets/fonts/LibreBaskerville-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Palette — locked, see brand-kit/03_Color_Palette/color_specs.json */
  --gold: #daaf37;
  --gold-text: #9c7d20; /* accessible gold for links/small text on cream */
  --black: #111111;
  --taupe: #bdb2a3;
  --beige: #efe6da;
  --cream: #faf6f0;
  --hairline: #e0d5c0;

  /* Derived from the locked ramp, same hue family — not new brand colours.
     cream→beige is only 1.15:1, which is why the old alternating bands read as
     flat. sand is 1.44:1 from cream, so a tinted band actually registers. */
  --sand: #dacebd;

  /* The content bands: home Services, Services page, About philosophy.

     Deliberately the same value as --beige. Kept as its own token so those three
     can be retuned without touching the testimonials band, which is also beige
     and was the reason a separate name existed in the first place.

     At 1.15:1 from cream this is a very quiet band, chosen for exactly that.
     Text and borders are unaffected: body sits at 15.3:1, gold labels at
     4.72:1. */
  --sand-light: #efe6da;

  /* Accessible text tones. --gold-text is 3.63:1 on cream, which fails AA for
     the 12.5px eyebrow it was used on. */
  --gold-ink: #7b6219;  /* 5.41:1 on cream, 4.72:1 on beige */
  --ink-soft: #4a3f2a;  /* 6.65:1 on sand */

  /* Type */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Libre Baskerville", Georgia, serif;
  --track-display: 0.18em;
  --track-label: 0.28em;

  /* Scale */
  --h1: clamp(40px, 6vw, 72px);
  --h2: clamp(26px, 3.5vw, 36px);
  --h3: 20px;
  --body: 16px;
  --caption: 12.5px;

  /* Spacing */
  --section-pad: clamp(44px, 6vw, 84px);
  --section-pad-tight: clamp(32px, 4.5vw, 60px);
  --gap: 24px;
  --max-width: 1180px;
}

/* On narrow phones, the 6vw/3.5vw parts of --h1/--h2 shrink well past the
   clamp() floor, so long single words (all-caps, tracked) can still be wider
   than the screen. Lower the floor and ease the tracking so nothing needs to
   break mid-word to fit. */
@media (max-width: 480px) {
  :root {
    --h1: clamp(30px, 9vw, 72px);
    --h2: clamp(22px, 7vw, 36px);
    --track-display: 0.08em;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* NB: do not put overflow-x:hidden on body. It forces overflow-y to compute to
   auto, which makes body a scroll container that never actually scrolls. The
   scroll-driven animations in section-focus.css bind to the nearest scroll
   container, so they would freeze at a fixed progress. The guard on html is
   enough; html is the element that really scrolls. */

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

a { color: var(--gold-text); text-decoration: none; }
a:hover { color: var(--black); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--black);
  line-height: 1.15;
  margin: 0 0 var(--gap);
  overflow-wrap: break-word;
  word-break: break-word;
}

h1, h2 {
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}

h1 { font-size: var(--h1); line-height: 1.1; }
h2 { font-size: var(--h2); line-height: 1.3; }
h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--h3); line-height: 1.4; text-transform: none; letter-spacing: 0; }

p { margin: 0 0 var(--gap); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before, .eyebrow::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  /* currentColor, not --gold: #daaf37 is 1.33:1 on sand and effectively
     invisible there. Tracking the text colour keeps the rules legible on
     every surface. */
  background: currentColor;
  opacity: 0.55;
}

/* Some labels are also headings, for the document outline and for search.
   Strip what the h1-h4 rules would otherwise impose so they still read as
   small tracked labels rather than headings. */
h3.eyebrow {
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.eyebrow.align-left { justify-content: flex-start; }
.eyebrow.align-left::before { display: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.section { padding: var(--section-pad) 0; }
.section--tight { padding: var(--section-pad-tight) 0; }
.section--alt { background: var(--beige); }

/* Surfaces are declared with data-surface so more than two can coexist.
   .section--alt is kept as an alias for anything not yet migrated. */
[data-surface="cream"] { background: var(--cream); }
[data-surface="sand"]  { background: var(--sand); }
[data-surface="sand-light"] { background: var(--sand-light); }
[data-surface="beige"], .section--alt { background: var(--beige); }

/* Two sections stacked directly would otherwise add both paddings into one
   oversized gap, so the second drops its top padding — but ONLY when the two
   share a surface. Across a colour change the second needs its own padding or
   its content sits flush against the seam.

   This must test the surfaces explicitly. The previous version keyed off
   :not(.section--alt), which is correct for two surfaces and silently wrong
   for three: a sand section followed by a cream one matched it (neither being
   --alt) and collapsed padding straight across a colour boundary. */
main > [data-surface="cream"] + [data-surface="cream"],
main > [data-surface="sand"]  + [data-surface="sand"],
main > [data-surface="sand-light"] + [data-surface="sand-light"],
main > [data-surface="beige"] + [data-surface="beige"],
:is(.section, .section--tight):not([data-surface]):not(.section--alt)
  + :is(.section, .section--tight):not([data-surface]):not(.section--alt) {
  padding-top: 0;
}
.section--dark { background: var(--black); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .eyebrow { color: var(--gold); }
.section--dark .eyebrow::before, .section--dark .eyebrow::after { background: var(--gold); }

/* Gold-ink is 4.30:1 on sand-light, clear of AA, so that surface keeps the gold
   eyebrow. Only full sand drops to --ink-soft, where gold measures 3.76:1. */
[data-surface="sand"] .eyebrow { color: var(--ink-soft); }

/* ---------- Thread divider (locked brand element — never redrawn) ---------- */

.thread-divider {
  display: block;
  width: 220px;
  height: auto;
  margin: 32px auto;
}

.thread-divider--tight { margin: 24px auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  position: relative;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid var(--black);
  color: var(--black);
  background: transparent;
  transition: color 0.2s ease;
}

.btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.25s ease, left 0.25s ease;
}

.btn:hover { color: var(--gold-text); }
.btn:hover::after { width: 60%; left: 20%; }

.btn--solid {
  background: var(--black);
  color: var(--cream);
}

.btn--solid:hover { color: var(--gold); }

.section--dark .btn { border-color: var(--cream); color: var(--cream); }
.section--dark .btn:hover { color: var(--gold); }

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 240, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(460px, 78vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 28px;
  overflow: hidden;
  background: var(--black);
}

/* Poster carries the hero on its own: it shows before the video can play, if
   the video fails, on phones (where no video is downloaded at all) and under
   reduced-motion. The video simply sits on top when it is allowed to run. */
.hero--media {
  background-image: url("../assets/img/photos/hero-poster.jpg");
  background-size: cover;
  background-position: center;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* The hero footage carries burnt-in labels near the frame edges, so above 900px
   the hero takes the video's own 16:9 and nothing is cropped away.

   min-height must be cleared here, or the browser resolves the ratio backwards
   and derives WIDTH from the minimum height: measured at a 390px viewport the
   hero came out 996px wide, overflowing the page by 606px.

   Only above 900px. At 16:9 a 560px viewport would give a 315px hero, too short
   for the logo, headline and button to sit inside. Below that the hero keeps its
   viewport-based height and the video crops in from the sides. */
@media (min-width: 900px) {
  .hero--media { aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
}

/* The old scrim was rgba(17,17,17,.12)→(.22), far too light to carry cream
   text over arbitrary frames of footage. */
.hero--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17,17,17,0.58), rgba(17,17,17,0.72));
}

.hero .container {
  max-width: 720px;
  /* .hero already supplies the side padding; .container adding its own 28px on
     top squeezed the headline enough that it broke mid-word on phones. */
  padding: 0;
}

/* The global h1-h4 rule sets word-break:break-word, which splits CONNECTIONS
   across lines at narrow widths. The hero headline must never do that. */
.hero h1 {
  word-break: normal;
  overflow-wrap: normal;
}

.hero__content { max-width: 720px; }

/* The eyebrow used to be overridden to gold below this. Gold measured 2.78:1
   over the current footage, which is brighter than the stock loop it replaced
   (that one gave 4.98:1), so the override is gone and the eyebrow inherits cream
   like the rest. That clears AA without deepening the scrim, which would have
   dimmed the burnt-in labels the footage is carrying. */
.hero--media h1,
.hero--media p,
.hero--media .eyebrow { color: var(--cream); }

.hero--media .btn { border-color: var(--cream); color: var(--cream); }
.hero--media .btn:hover { color: var(--gold); }
.hero--media .btn--solid { background: var(--cream); color: var(--black); border-color: var(--cream); }
.hero--media .btn--solid:hover { color: var(--gold-ink); }

.hero p {
  font-size: 1.05rem;
  max-width: 520px;
  margin: var(--gap) auto 28px;
}

@media (max-width: 900px) {
  .hero { min-height: clamp(420px, 66vh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---------- Full-bleed bands ---------- */

/* Sections are already full width, so bleeding only means dropping the
   container's max-width and padding. Do NOT use width:100vw with a negative
   margin — that overflows by the scrollbar width.
   The .container class must stay on the element: css/section-focus.css targets
   `main > section > .container`, and anything else gets no rise-in animation
   and sits dead still while its neighbours move. */
.container--bleed {
  max-width: none;
  padding: 0;
}

.section--bleed { padding: 0; }

.band-photo {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

@media (max-width: 900px) {
  .band-photo { aspect-ratio: 4 / 3; }
}

/* ---------- Feature photo (image half of an image/text split) ---------- */

.feature-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .feature-photo { aspect-ratio: 4 / 3; }
}

/* ---------- Photo mosaic ---------- */

/* 3 x 3 cells, with the first tile taking a 2 x 2 block. Six square images
   fill it exactly: 4 + 2 + 3 = 9. */
.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.photo-mosaic img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.photo-mosaic img:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 900px) {
  .photo-mosaic { grid-template-columns: repeat(2, 1fr); }
  /* 2 columns: the lead tile goes full width, the other five pair off with the
     last one spanning so no half-empty cell is left. */
  .photo-mosaic img:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  .photo-mosaic img:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* ---------- Grids / Cards ---------- */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: 48px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Solid warm darks, not rgba over the parent. The alpha version composited
   against whatever was behind it, so the same markup rendered different greys
   on index (over beige) and services (over cream), and stripped the brand's
   warmth to a cool grey. It also put gold labels at 2.38:1 and 3.88:1 on the
   two lightest cards, well under the 4.5:1 AA floor. */
.card--dark {
  text-align: left;
  padding: 28px 24px;
  background: var(--card-dark, #2b241d);
  color: var(--cream);
}

.card--dark .eyebrow { color: var(--gold); }        /* 8.0:1+ on these darks */
.card--dark h3 { color: var(--cream); }
.card--dark p { font-size: 0.92rem; }

.card--dark:nth-child(1) { --card-dark: #3a322a; }  /* gold 6.09:1 */
.card--dark:nth-child(2) { --card-dark: #302921; }  /* gold 6.94:1 */
.card--dark:nth-child(3) { --card-dark: #241f19; }  /* gold 7.91:1 */
.card--dark:nth-child(4) { --card-dark: #111111; }  /* gold 9.14:1 */

.card { text-align: center; }
.card h3 { margin-top: var(--gap); }
.card .eyebrow { margin-bottom: 8px; }

/* ---------- Process row (circular step badges) ---------- */

.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
}

/* The golden thread runs behind the numbered steps: left to right on desktop,
   top to bottom on phones. Both use the brand thread asset itself (the vertical
   file is the same path under a rotate transform), never a redrawn line. */
.process-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 28px; /* badge vertical centre */
  left: 3%;
  right: 9%;
  height: 150px;
  transform: translateY(-50%);
  background: url("../assets/img/logo/Brand_Element_Thread_Connector_H.svg") center / 100% 100% no-repeat;
  opacity: 0.6;
}

.process-step { position: relative; text-align: center; }

.process-step__badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--cream);
  font-family: var(--font-display);
  color: var(--gold-text);
  font-size: 1.1rem;
}

.process-step h3 { margin: 0 0 6px; }
.process-step p { margin: 0; font-size: 0.9rem; }

@media (max-width: 900px) {
  .process-row { grid-template-columns: 1fr; gap: 36px; }

  /* Vertical run: the thread threads down through the centred badges. */
  .process-row::before {
    top: -1%;
    bottom: 9%;
    left: 50%;
    right: auto;
    width: 190px;
    height: auto;
    transform: translateX(-50%);
    background-image: url("../assets/img/logo/Brand_Element_Thread_Connector_V.svg");
    opacity: 0.4;
  }
}

/* ---------- Pull quote ---------- */

.pull-quote { text-align: center; max-width: 720px; margin: 0 auto; }

.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--black);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}


/* ---------- Event types ---------- */

/* Six equal squares plus one wide block carrying the longest label. The wide
   block is always the last item, so it falls at the end of the grid flow and
   needs no explicit placement; only its span changes per breakpoint.

   Column count steps with width because a square is as tall as its column is
   wide. Two columns held up to 700px produced 318px squares and a list nearly
   a thousand pixels tall before anyone reached the services below it.

     <= 460px   2 cols, wide spans 2   squares 145-190px
     461-760    3 cols, wide spans 3   squares ~150-215px
     > 760      4 cols, wide spans 2   squares ~160-280px                     */

.svc-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

/* Grid items default to min-width:auto and refuse to shrink below their
   longest word, which is what pushed the 4-column layout 95px past a 560px
   viewport. */
.svc-types li { display: flex; min-width: 0; }

/* The link fills the block, so the whole square is the target, not just the
   words. */
.svc-types a,
.svc-types span {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Height is set here rather than derived from the column width. A square
     block is as tall as its column is wide, which at two columns on a phone
     meant 163px blocks and a list 680px tall. A clamped min-height keeps every
     block equal, scales gently with the viewport, and stops growing on
     desktop. */
  min-height: clamp(66px, 17vw, 104px);
  padding: 10px;
  /* Cream tiles on the beige band: light cards on a tinted field, the same
     cream as the section above so the page reads as one piece. 1.15:1 against
     the band, with the border carrying the edge. Text sits at 9.58:1. */
  background: var(--cream);
  border: 1px solid rgba(74, 63, 42, 0.55);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* The wide block keeps the squares' height by widening its ratio to match its
   span, so every block on a row is the same height. */
.svc-types li:last-child { grid-column: span 2; }

@media (hover: hover) {
  .svc-types a:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--cream);
  }
}

.svc-types a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (min-width: 461px) and (max-width: 760px) {
  .svc-types { grid-template-columns: repeat(3, 1fr); }
  .svc-types li:last-child { grid-column: span 3; }
  .svc-types a,
  .svc-types span { font-size: 10px; letter-spacing: 0.06em; padding: 8px; }
}

@media (max-width: 460px) {
  .svc-types {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 24px 0 28px;
  }
  .svc-types a,
  .svc-types span { font-size: 9.5px; letter-spacing: 0.06em; padding: 8px; }
}

@media (max-width: 385px) {
  .svc-types a,
  .svc-types span { font-size: 8.5px; letter-spacing: 0.04em; padding: 6px; }
}

/* ---------- Privacy policy ---------- */

/* The site-wide h2 is large tracked uppercase, built for section openers. A legal
   page has nine of them in a row, so here they drop to a quieter reading scale. */
.policy h2 {
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  margin: 36px 0 10px;
}
.policy p, .policy li { font-size: 0.95rem; line-height: 1.75; }
.policy ul { padding-left: 1.2em; margin: 0 0 var(--gap); }
.policy li { margin-bottom: 4px; }
.policy-meta { color: var(--ink-soft); font-size: 0.85rem; margin-top: -8px; }

.form-notice { font-size: 0.8rem; color: var(--ink-soft); margin: 14px 0 0; }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--sand);
  color: var(--black);
  text-align: center;
  padding: 48px 0;   /* .container now supplies the side padding */
}

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto;
}

.form-grid .field--full { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 8px;
}

input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--black);
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
}

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

textarea { resize: vertical; min-height: 140px; }

/* ---------- Social links (footer + contact column) ---------- */

.social-links {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition: color 0.2s ease;
}

.social-links a svg { width: 20px; height: 20px; display: block; }
.social-links a:hover { color: var(--gold); }

.site-footer .social-links {
  justify-content: center;
  margin: 0 0 22px;
  color: var(--cream);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--taupe);
  padding: 36px 0 28px;
  text-align: center;
}

.site-footer .thread-divider { margin-top: 0; margin-bottom: 20px; }

.site-footer__hours {
  display: block;
  margin: 0 0 10px;
  color: var(--taupe);
  letter-spacing: 0.02em;
}

.site-footer__nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.site-footer__nav a { color: var(--cream); }
.site-footer__nav a:hover { color: var(--gold); }

/* Four tracked links plus 28px gaps run ~1.3px past a 390px viewport, which is
   enough to give the whole page a horizontal scrollbar. Tighten and allow wrap. */
@media (max-width: 480px) {
  .site-footer__nav { flex-wrap: wrap; gap: 14px 18px; }
}

.footer-mark { height: 56px; width: auto; margin: 0 auto 20px; }

.site-footer small {
  display: block;
  margin-top: 8px;
  color: var(--taupe);
  font-size: var(--caption);
  letter-spacing: 0.02em;
}


/* ==========================================================================
   Site header
   Hoisted here from the inline <style> block that every page carried a copy of.
   All five copies were byte-identical apart from one comment, so they were
   2.8KB of duplication per page and a trap: a new page that wrote its own
   <style> block lost the header entirely, which is exactly what happened when
   faq.html was added.
   ========================================================================== */

.concept-header-inner {
  padding: 10px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.concept-logo {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.concept-logo-text {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}

.concept-logo-icon { height: 12px; width: auto; flex: 0 0 auto; }

.concept-nav { grid-column: 1; justify-self: start; }

.concept-nav-list {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.concept-nav-list a {
  color: var(--black);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.concept-nav-list a:hover, .concept-nav-list a[aria-current="page"] {
  border-color: var(--gold);
  color: var(--gold-text);
}

.concept-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 18px; }

.concept-btn-nav { padding: 0.5rem 1.2rem; font-size: 10px; white-space: nowrap; }

.concept-social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }

.concept-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  transition: color 0.2s ease;
}

.concept-social a svg { width: 17px; height: 17px; display: block; }

.concept-social a:hover { color: var(--gold-text); }

.concept-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* explicit, so it matches .concept-btn-contact exactly: a <button> and an <a>
     resolve `normal` line-height differently and came out 35px against 34px */
  line-height: 1.2;
  /* Both of these are for iOS. A <button> does not inherit body colour there:
     Safari paints its text in the system blue, so this rendered blue on a phone
     while looking correct in every desktop browser. appearance:none strips the
     rest of the native button chrome that comes with it. */
  color: var(--black);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.concept-nav-toggle:hover { border-color: var(--gold); color: var(--gold-text); }

/* Phone-only counterpart to the Menu button.

   The header CTA sits inside .concept-actions, which is display:none below
   900px until the menu is opened — so on a phone there was no way to reach the
   contact page without opening the menu first. This mirrors Menu on the
   opposite side: same border, padding and type, and the header's symmetric
   24px padding puts it the same distance from its edge. */
.concept-btn-contact {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* the global `a` rule would otherwise make this gold, unlike the Menu button */
  color: var(--black);
  line-height: 1.2;
}

.concept-btn-contact:hover { border-color: var(--gold); color: var(--gold-text); }

@media (max-width: 900px) {
  /* Pin the three header items to row 1 explicitly. Without this, the nav and
     actions rows (which span 1 / -1) come earlier in the DOM than the logo, so
     once the menu opened the browser auto-placed the logo and Contact button
     BELOW the nav list and the header row fell apart. */
  .concept-nav-toggle { display: inline-block; grid-row: 1; grid-column: 1; justify-self: start; }
  .concept-logo { grid-row: 1; grid-column: 2; }
  .concept-btn-contact { display: inline-block; grid-row: 1; grid-column: 3; justify-self: end; }
  .concept-header-inner.is-open .concept-nav { grid-row: 2; }
  .concept-header-inner.is-open .concept-actions { grid-row: 3; }

  /* Smaller, and equal width. At their natural widths MENU came out 79px and
     CONTACT 112px, so although both sat 24px from their edge the right side
     carried noticeably more weight and the header read as lopsided. A shared
     min-width makes them matching blocks; the logo grows to stay the largest
     thing in the row. */
  .concept-nav-toggle,
  .concept-btn-contact {
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 7px 8px;
    min-width: 90px;
    text-align: center;
  }


  /* With a permanent Contact button in the header and a Contact link in the nav
     list, the "Tell Me About Your Event" CTA was a third route to the same page
     inside the opened menu. Hide the CTA rather than the header button: an
     element disappearing from the header as the menu opens reads as a glitch,
     where the header staying put reads as solid. .concept-actions then carries
     just the LinkedIn icon, which is worth having in the menu. */
  .concept-btn-nav { display: none; }
  .concept-nav, .concept-actions { display: none; grid-column: 1 / -1; }
  .concept-header-inner.is-open .concept-nav,
  .concept-header-inner.is-open .concept-actions { display: flex; }
  .concept-nav { justify-self: stretch; padding-top: 16px; }
  .concept-actions { justify-self: stretch; padding-top: 4px; padding-bottom: 16px; }
  .concept-nav-list, .concept-actions { flex-direction: column; align-items: flex-start; gap: 16px; }

  .concept-logo-text { display: none; }
  /* 28px, up from 22px: with the buttons reduced the mark should be the
     largest thing in the header row, not the smallest. */
  .concept-logo-icon { height: 28px; }
}