/* ============================================================
   Nova Carta Consulting
   Palette sampled from the original brand, not invented.
   Structural device: the arch from the wordmark, never a rule.
   ============================================================ */

:root{
  --ground:      #f7efee;   /* blush, the brand ground */
  --paper:       #ffffff;
  --warm:        #e4d9d7;   /* warm grey */
  --terracotta:  #db423d;   /* the accent, from the mark */
  --terracotta-d:#b8322e;
  --ink:         #1a1310;   /* warm near-black */
  --ink-soft:    #6b5a55;
  --hair:        #d9c9c6;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max:    76rem;
  --band-y: clamp(4rem, 7.5vw, 7rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; }

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

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--ground);
  padding:.75rem 1rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

/* ── Shared type ───────────────────────────────────────────── */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  letter-spacing:-0.015em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem); }
h2{ font-size:clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem); }
h3{ font-size:1.3rem; letter-spacing:-0.01em; }

.h1-line{ display:block; }

h1 em{
  font-style:italic;
  color:var(--terracotta);
}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin:0 0 1.25rem;
}
.eyebrow-centred{ text-align:center; }

/* ── Buttons ───────────────────────────────────────────────── */

.btn{
  display:inline-block;
  background:var(--terracotta);
  color:var(--paper);
  font-family:var(--body);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.01em;
  padding:.95rem 1.9rem;
  border:1px solid var(--terracotta);
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d); }
.btn:active{ transform:translateY(1px); }

.btn-quiet{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.btn-quiet:hover{ color:var(--terracotta); border-color:var(--terracotta); }

/* ── Header ────────────────────────────────────────────────── */

.site-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.5rem var(--gutter);
  max-width:var(--max); margin-inline:auto;
}
.brand img{ width:clamp(112px,12vw,152px); height:auto; }

.site-nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem); }
.site-nav a{
  font-size:.9rem; text-decoration:none; color:var(--ink-soft);
  transition:color .18s ease;
}
.site-nav a:hover{ color:var(--terracotta); }
.site-nav .nav-cta{
  color:var(--ink);
  border:1px solid var(--hair);
  border-radius:100px;
  padding:.5rem 1.15rem;
}
.site-nav .nav-cta:hover{ border-color:var(--terracotta); color:var(--terracotta); }

@media (max-width:640px){
  .site-nav a:not(.nav-cta){ display:none; }
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(2.5rem,6vw,5rem) var(--gutter) 0;
}
.hero h1{ margin-bottom:1.75rem; }

.hero .lede{
  font-size:clamp(1.05rem,1rem + 0.4vw,1.3rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:44ch;
  margin:0 0 2.5rem;
}

.hero-actions{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1.5rem 2rem;
  margin:0 0 clamp(3rem,7vw,5.5rem);
}

/* The signature: an arch spanning three markets at true longitude */
.span{ margin:0; }
.span svg{ display:block; width:100%; max-width:56rem; height:auto; overflow:visible; }

.span-arc{
  stroke:var(--terracotta);
  stroke-width:1.5;
  stroke-linecap:round;
}
.span-base{ stroke:var(--hair); stroke-width:1; }
.span-drop line{ stroke:var(--hair); stroke-width:1; stroke-dasharray:2 4; }
.span-pin circle{ fill:var(--terracotta); }
.span-label text{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.12em;
  fill:var(--ink-soft);
}

.span figcaption{
  font-size:.95rem;
  color:var(--ink-soft);
  max-width:52ch;
  margin:2.5rem 0 0;
}

@media (prefers-reduced-motion: no-preference){
  .span-arc{
    stroke-dasharray:1600;
    stroke-dashoffset:1600;
    animation:draw 1.6s .2s cubic-bezier(.6,0,.2,1) forwards;
  }
  .span-pin circle, .span-label text, .span-drop line{
    opacity:0;
    animation:fade .5s 1.4s ease forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @keyframes fade{ to{ opacity:1; } }
}

.span-label-sm{ display:none; }

@media (max-width:560px){
  .span-label-lg{ display:none; }
  .span-label-sm{ display:block; }
  .span-label text{ font-size:40px; letter-spacing:.06em; }
  .h1-line{ display:inline; }
}

/* ── Bands (shared section shell) ──────────────────────────── */

.band{
  max-width:var(--max);
  margin-inline:auto;
  padding:var(--band-y) var(--gutter);
}
.band-head{ max-width:44ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.band-head h2{ margin-bottom:1.25rem; }
.band-lede{ color:var(--ink-soft); margin:0; }

/* ── Pillars ───────────────────────────────────────────────── */

.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(2rem,4vw,3.5rem);
}
.pillar{ display:flex; flex-direction:column; }
.pillar h3{ margin-bottom:.75rem; }
.pillar p{ color:var(--ink-soft); margin:0 0 1.25rem; }

/* the arch, drawn in CSS, standing in for a bullet or a number */
.arch-mark{
  display:block;
  width:2.75rem; height:1.375rem;
  border:1.25px solid var(--terracotta);
  border-bottom:0;
  border-radius:100px 100px 0 0;
  margin-bottom:1.5rem;
}

.pillar ul{
  list-style:none; margin:auto 0 0; padding:0;
  border-top:1px solid var(--hair);
}
.pillar li{
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--ink);
  padding:.7rem 0;
  border-bottom:1px solid var(--hair);
}

/* ── Approach ──────────────────────────────────────────────── */

.band-paper{
  background:var(--paper);
  max-width:none;
  border-radius:0;
}
.band-paper > *{ max-width:var(--max); margin-inline:auto; }

.approach{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.approach-copy h2{ margin-bottom:1.5rem; }
.approach-copy p{ color:var(--ink-soft); margin:0 0 1.15rem; max-width:46ch; }

.approach-aside{ display:flex; flex-direction:column; gap:clamp(2.5rem,5vw,3.5rem); }

.pull{
  margin:0;
  padding:2.25rem 0 0;
  border-top:1.25px solid var(--terracotta);
}
.pull p{
  font-family:var(--display);
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  font-style:italic;
  line-height:1.18;
  letter-spacing:-0.015em;
  margin:0;
  text-wrap:balance;
}

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

.deliverables{ margin-top:0; }
.deliverables-label{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1.25rem;
}
.deliverables ul{
  display:flex; flex-wrap:wrap; gap:.65rem;
  list-style:none; margin:0; padding:0;
}
.deliverables li{
  font-family:var(--mono);
  font-size:.82rem;
  padding:.55rem 1.1rem;
  border:1px solid var(--hair);
  border-radius:100px;
  background:var(--ground);
}

/* ── Clients ───────────────────────────────────────────────── */

.clients{ padding:clamp(2.5rem,5vw,4rem) 0; }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:inline-flex; align-items:center;
  gap:clamp(2.5rem,5vw,4.5rem);
  width:max-content;
  list-style:none; margin:0; padding:0;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-track img{
  height:calc(clamp(26px,3.4vw,40px) * var(--s, 1));
  width:auto;
  filter:grayscale(100%);
  opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.marquee-track li:hover img{ filter:none; opacity:1; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; padding:0 var(--gutter); }
}

/* ── About ─────────────────────────────────────────────────── */

.band-about{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.portrait{ margin:0; }
.portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:24% 42%;
  border-radius:12rem 12rem 10px 10px;   /* the arch again, at scale */
}
.about-copy h2{ margin-bottom:1.5rem; }
.about-copy p{ color:var(--ink-soft); margin:0 0 1.15rem; max-width:44ch; }
.about-note{
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--ink) !important;
  padding-left:1rem;
  border-left:2px solid var(--terracotta);
}
.about-links{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:2rem !important; }
.about-links a{
  font-family:var(--mono); font-size:.82rem;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--hair); padding-bottom:2px;
}
.about-links a:hover{ color:var(--terracotta); border-color:var(--terracotta); }

@media (max-width:800px){
  .band-about{ grid-template-columns:1fr; }
  .portrait img{ aspect-ratio:4/5; max-width:22rem; margin-inline:auto; }
}

/* ── Contact ───────────────────────────────────────────────── */

.band-contact{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.contact-head h2{ margin-bottom:1.25rem; }
.contact-head p{ color:var(--ink-soft); margin:0; max-width:34ch; }

.form{ margin:0; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.field{ margin:0 0 1.25rem; display:flex; flex-direction:column; }
.field label{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:.55rem;
}
.req{ color:var(--hair); }
.field input, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:6px;
  padding:.85rem 1rem;
  width:100%;
  transition:border-color .18s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--terracotta); }
.field textarea{ resize:vertical; min-height:8rem; }

.check{ display:flex; align-items:center; gap:.6rem; margin:0 0 2rem; }
.check label{ font-size:.9rem; color:var(--ink-soft); }
.check input{ width:1.05rem; height:1.05rem; accent-color:var(--terracotta); }

.hp{ position:absolute; left:-9999px; }

@media (max-width:800px){
  .band-contact{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .form .row{ grid-template-columns:1fr; gap:0; }
}

/* ── Footer ────────────────────────────────────────────────── */

.site-foot{
  background:var(--paper);
  border-top:1px solid var(--hair);
}
.foot-inner{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(2.5rem,5vw,3.5rem) var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1.5rem 2.5rem;
}
.foot-logo{ width:110px; height:auto; }
.foot-links{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.foot-links a{
  font-family:var(--mono); font-size:.82rem;
  color:var(--ink-soft); text-decoration:none;
}
.foot-links a:hover{ color:var(--terracotta); }
.foot-fine{
  font-size:.8rem; color:var(--ink-soft);
  margin:0; flex-basis:100%;
}

/* placeholder wordmarks, replaced as real logo files land */
.marquee-track .logo-text{
  font-family:var(--display);
  font-size:clamp(1.05rem,2vw,1.5rem);
  letter-spacing:-0.01em;
  color:var(--ink-soft);
  opacity:.75;
  white-space:nowrap;
  transition:color .25s ease, opacity .25s ease;
}
.marquee-track .logo-text:hover{ color:var(--terracotta); opacity:1; }

/* ── Events ────────────────────────────────────────────────── */

.events-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.5rem);
  align-items:start;
}
.ev{ margin:0; }
.ev img{
  width:100%;
  height:clamp(300px,30vw,430px);
  object-fit:cover;
  border-radius:10px;
}
.ev-board img{ object-position:50% 28%; }
.ev-panel img{ object-position:50% 45%; }
.ev-ltw img{ object-position:50% 58%; }
.ev figcaption{
  font-family:var(--mono);
  font-size:.76rem;
  line-height:1.5;
  color:var(--ink-soft);
  padding:.75rem .25rem 0;
}
.events-cta{ margin:clamp(2rem,4vw,3rem) 0 0; }

@media (max-width:800px){
  .events-grid{ grid-template-columns:1fr; }
  .ev img{ height:clamp(240px,60vw,340px); }
}

/* ── Guest-list modal ──────────────────────────────────────── */

.modal{
  border:0;
  border-radius:14px;
  padding:0;
  width:min(30rem, calc(100vw - 2.5rem));
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 30px 80px rgba(26,19,16,.35);
}
.modal::backdrop{ background:rgba(26,19,16,.45); }
.modal-body{ position:relative; padding:clamp(1.75rem, 4vw, 2.5rem); }
.modal h3{ font-size:clamp(1.6rem, 3vw, 2rem); margin:.2rem 0 .7rem; }
.modal-lede{ color:var(--ink-soft); margin:0 0 1.5rem; max-width:38ch; }
.modal-x{
  position:absolute; top:.75rem; right:.9rem;
  background:none; border:0; cursor:pointer;
  font-size:1.6rem; line-height:1; color:var(--ink-soft);
  padding:.35rem; z-index:1;
}
.modal-x:hover{ color:var(--terracotta); }
.modal-form .btn{ width:100%; }
.modal-done{ text-align:center; padding:.5rem 0 .25rem; }
.modal-done h3{ margin-bottom:.4rem; }
.modal-done p{ color:var(--ink-soft); margin:0 0 1.5rem; }

.field select{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background-color:var(--paper);
  border:1px solid var(--hair);
  border-radius:6px;
  padding:.85rem 2.6rem .85rem 1rem;
  width:100%;
  transition:border-color .18s ease;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b5a55' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  cursor:pointer;
}
.field select:focus{ border-color:var(--terracotta); }
.field select:invalid{ color:var(--ink-soft); }