/* ════════════════════════════════════════════
   TONY PAGLIOCCO — tonypag.com
   Clean, readable, faithful to original tone
   Inter (body) + Barlow Condensed (display)
════════════════════════════════════════════ */

:root {
  /* Palette */
  --black:   #0a0a0a;
  --dark:    #111;
  --card-dk: #1a1a1a;
  --border-dk: #282828;
  --mute-dk: #666;
  --text-dk: #d8d3cb;

  --white:   #fff;
  --off:     #f5f4f1;
  --border:  #e2e0db;
  --grey:    #888;
  --text:    #333;

  --gold:    #c9a96e;
  --gold-dk: #a07840;
  --gold-bg: rgba(201,169,110,.09);

  /* Fonts — narrow, clean, no wide letterforms */
  --head: 'Barlow Condensed', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max:  1160px;
  --nav:  64px;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; font-size: 16px; }
body { font-family: var(--body); color: var(--text); background: var(--white); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul { list-style: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
@media (max-width: 680px) { .container { padding: 0 1.2rem; } }

/* ── Shared ────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1rem;
  display: block;
}
.eyebrow--dim { color: var(--mute-dk); }

.h2 {
  font-family: var(--head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 1.5rem;
}
.h2--light { color: var(--text-dk); }
.h2--single { white-space: nowrap; }

.gold { color: var(--gold); }

.sec-sub { font-size: .9rem; color: var(--mute-dk); line-height: 1.7; max-width: 480px; }
.sec-top { margin-bottom: 3rem; }

.section { padding: 6rem 0; }
.section--dark { background: var(--dark); }

/* ── Buttons ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.75rem;
  font-family: var(--body); font-size: .8rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 3px; transition: all .3s var(--ease);
}
.btn--gold { background: var(--gold); color: var(--black); }
.btn--gold:hover { background: var(--gold-dk); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,169,110,.3); }
.btn--ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.35); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.1); }
.btn--full { width: 100%; }

/* ── Reveal ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.on { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .4s; }

/* ── Progress bar ──────────────────────────── */
#pbar { position: fixed; top: 0; left: 0; z-index: 300; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-dk)); pointer-events: none; }

/* ════════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav);
  transition: background .4s var(--ease), border-bottom .4s var(--ease), backdrop-filter .4s;
}
.nav.solid { background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 2rem; }

/* Logo */
.logo-tp { font-family: var(--head); font-size: 1.25rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; transition: color .3s; }
.logo-tp span { color: var(--gold); }
.logo-dot { font-family: var(--mono); font-size: .65rem; color: rgba(255,255,255,.35); transition: color .3s; }
.nav.solid .logo-tp { color: var(--black); }
.nav.solid .logo-dot { color: var(--grey); }

/* Links */
.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__link {
  font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.6); transition: color .3s; position: relative;
}
.nav.solid .nav__link { color: var(--grey); }
.nav__link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .3s var(--ease); }
.nav__link:hover::after { width: 100%; }
.nav__link:hover { color: var(--white); }
.nav.solid .nav__link:hover { color: var(--black); }

.nav__cta { font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; background: var(--gold); color: var(--black) !important; padding: .38rem 1rem; border-radius: 3px; transition: background .3s; }
.nav__cta:hover { background: var(--gold-dk); color: var(--white) !important; }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: transform .3s, opacity .3s; }
.nav.solid .nav__burger span { background: var(--black); }
.nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 820px) { .nav__links { display: none; } .nav__burger { display: flex; } }

/* Mobile menu */
.mob { position: fixed; inset: 0; z-index: 99; background: var(--dark); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.mob.open { opacity: 1; pointer-events: all; }
.mob__close { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 1.3rem; color: var(--mute-dk); transition: color .2s; padding: .5rem; }
.mob__close:hover { color: var(--white); }
.mob ul { display: flex; flex-direction: column; gap: 1.25rem; text-align: center; }
.mob__link { font-family: var(--head); font-size: clamp(2rem, 7vw, 3rem); font-weight: 600; letter-spacing: -.01em; color: var(--text-dk); transition: color .3s; }
.mob__link:hover { color: var(--gold); }

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--black); overflow: hidden;
}

/* Video */
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.55) brightness(0.55);
  will-change: transform;
}
/* Strong, clean scrim — dark at top and bottom, lighter in middle */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.38) 30%,
      rgba(0,0,0,.38) 65%,
      rgba(0,0,0,.78) 100%
    );
}

/* Content */
.hero__content {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center;
  padding: calc(var(--nav) + 5rem) 0 4rem;
}

.hero__eyebrow {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 1.5rem; display: block;
}

.hero__h1 {
  font-family: var(--head);
  /* Condensed font stays narrow even at large sizes */
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.01em;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.hero__tagline {
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  font-weight: 300;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin-bottom: 2.25rem;
  /* Subtle text shadow for legibility */
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.hero__actions { display: flex; gap: .875rem; flex-wrap: wrap; margin-bottom: 3rem; }

/* Featured logos */
.hero__featured { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.hero__featured-label { font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.3); white-space: nowrap; }
.hero__logos { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; }
.hero__logos span { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: rgba(255,255,255,.35); transition: color .3s; }
.hero__logos span:hover { color: var(--gold); }

/* Stats bar */
.hero__bar { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.1); padding: 1.75rem 0; }
.hero__bar-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; gap: .2rem; }
.hstat strong { font-family: var(--head); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--gold); }
.hstat span { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.hbar-sep { width: 1px; height: 32px; background: rgba(255,255,255,.1); flex-shrink: 0; }
@media (max-width: 600px) { .hbar-sep { display: none; } .hero__bar-inner { gap: 1.5rem; } }

/* ════════════════════════════════════════════
   ABOUT
════════════════════════════════════════════ */
.about__grid { display: grid; grid-template-columns: 320px 1fr; gap: 5rem; align-items: start; }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: 3rem; } }

.about__photo { position: sticky; top: calc(var(--nav) + 2rem); }
@media (max-width: 900px) { .about__photo { position: static; } }

.photo-wrap { position: relative; }
.photo-placeholder {
  width: 100%; aspect-ratio: 3/4; border-radius: 4px;
  background: linear-gradient(145deg, #1c1c1c, #242424);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 48px rgba(0,0,0,.15);
  overflow: hidden; position: relative;
}
.photo-placeholder::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(201,169,110,.1) 100%);
}
.photo-placeholder span { font-family: var(--head); font-size: 5rem; font-weight: 700; color: rgba(255,255,255,.07); }

.photo-img {
  width: 100%; aspect-ratio: 3/4; border-radius: 4px;
  object-fit: cover; object-position: center top;
  display: block;
  box-shadow: 0 16px 48px rgba(0,0,0,.15);
}

.photo-badge {
  position: absolute; bottom: -1rem; right: -1rem;
  background: var(--gold); padding: .75rem 1rem; border-radius: 3px;
  display: flex; align-items: center; gap: .6rem; max-width: 220px;
}
.photo-badge strong { display: block; font-size: .8rem; font-weight: 600; color: var(--black); }
.photo-badge small { display: block; font-size: .65rem; color: rgba(0,0,0,.6); line-height: 1.3; }

.about__body { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.about__body p { font-size: .93rem; line-height: 1.85; color: #444; }

.quote {
  border-left: 3px solid var(--gold); padding: 1.25rem 1.5rem;
  background: var(--off); border-radius: 0 4px 4px 0;
  margin-bottom: 2rem;
}
.quote p { font-size: .95rem; line-height: 1.75; color: var(--text); }
.quote p strong { color: var(--black); }
.quote cite { display: block; margin-top: .75rem; font-size: .78rem; color: var(--grey); font-style: normal; font-family: var(--mono); letter-spacing: .04em; }

.about__meta { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.meta-item { display: flex; flex-direction: column; gap: .2rem; }
.meta-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-bottom: .15rem; }
.meta-val { font-size: .85rem; color: var(--text); line-height: 1.5; }
.meta-co { font-size: .78rem; color: var(--grey); }



/* ════════════════════════════════════════════
   EXPERIENCE CAROUSEL
════════════════════════════════════════════ */
.exp { padding-bottom: 0; }

.car {
  position: relative;
  margin-top: 2.5rem;
}

.car__stage {
  position: relative;
  overflow: hidden;
}

/* Track */
.car__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* Slide */
.car__slide {
  flex: 0 0 100%;
  height: 68vh;
  min-height: 420px;
  max-height: 600px;
  position: relative;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Strong scrim — always readable */
.car__slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.65) 40%,
    rgba(0,0,0,0.25) 100%
  );
}

/* Content block — left-anchored, always on the dark side */
.car__slide-content {
  position: absolute;
  bottom: 3rem; left: 3.5rem;
  max-width: 560px;
  z-index: 2;
}

@media (max-width: 640px) {
  .car__slide-content { left: 1.5rem; bottom: 2rem; max-width: calc(100% - 3rem); }
  .car__slide { height: 72vw; min-height: 320px; }
}

.car__badge {
  display: inline-block;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--gold); color: var(--black);
  padding: 0.18rem 0.6rem; border-radius: 2px;
  margin-bottom: 1rem; min-height: 1.2rem;
}

.car__company {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem;
}

.car__title {
  font-family: var(--head); font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 0.6rem;
  /* text shadow ensures legibility over any image */
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.car__sub {
  font-weight: 400; font-size: 0.75em; color: rgba(255,255,255,0.7);
}

.car__period {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
}

.car__summary {
  font-size: 0.9rem; line-height: 1.72; font-weight: 300;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  max-width: 480px;
}

/* See more */
.car__see-more {
  position: absolute; bottom: 2rem; right: 2rem;
  z-index: 3;
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: none; border: none; cursor: pointer;
  transition: color 0.25s var(--ease);
  padding: 0;
}
.car__see-more:hover { color: var(--gold); }
@media (max-width: 640px) { .car__see-more { bottom: 1.25rem; right: 1.25rem; } }

/* Thumbnails */
.car__thumbs {
  display: flex; gap: 0;
  border-top: 1px solid var(--border-dk);
  background: #0e0e0e;
  overflow-x: auto;
  scrollbar-width: none;
}
.car__thumbs::-webkit-scrollbar { display: none; }

.car__thumb {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  border-right: 1px solid var(--border-dk);
  flex: 1; min-width: 160px;
  background: transparent;
  transition: background 0.2s;
  cursor: pointer; text-align: left;
  border-radius: 0;
}
.car__thumb:last-child { border-right: none; }
.car__thumb:hover { background: rgba(255,255,255,0.04); }

.car__thumb--active {
  background: rgba(201,169,110,0.1) !important;
  border-bottom: 2px solid var(--gold);
}

.car__thumb-img {
  width: 48px; height: 36px; border-radius: 3px;
  background-image: var(--bg);
  background-size: cover; background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--border-dk);
  transition: border-color 0.2s;
}
.car__thumb--active .car__thumb-img { border-color: var(--gold); }

.car__thumb-info { display: flex; flex-direction: column; gap: 0.15rem; }
.car__thumb-info strong {
  font-family: var(--head); font-size: 0.82rem; font-weight: 600;
  color: var(--text-dk); letter-spacing: -0.01em; white-space: nowrap;
}
.car__thumb--active .car__thumb-info strong { color: var(--gold); }
.car__thumb-info span {
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.07em; color: var(--mute-dk); white-space: nowrap;
}

@media (max-width: 900px) {
  .car__thumb { min-width: 130px; padding: 0.75rem 1rem; gap: 0.65rem; }
  .car__thumb-img { width: 38px; height: 28px; }
}
@media (max-width: 580px) {
  .car__thumb-info strong { font-size: 0.72rem; }
  .car__thumb { min-width: 110px; }
}

/* DRIVERS
════════════════════════════════════════════ */
.drivers__strip {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 3.5rem;
  background: var(--white);
}
.driver-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.75rem 1.75rem;
  border-right: 1px solid var(--border);
  position: relative;
  transition: background .25s var(--ease);
}
.driver-item:last-child { border-right: none; }
.driver-item:hover { background: var(--off); }
.driver-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .35s var(--ease);
  transform-origin: left;
}
.driver-item:hover::after { transform: scaleX(1); }
.driver-item__num {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.driver-item__icon { font-size: 2rem; margin-bottom: 1rem; line-height: 1; }
.driver-item__title {
  font-family: var(--head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.driver-item__text { font-size: .8rem; color: #666; line-height: 1.75; }
@media (max-width: 700px) {
  .drivers__strip { flex-direction: column; }
  .driver-item { border-right: none; border-bottom: 1px solid var(--border); padding: 2rem 1.5rem; align-items: flex-start; text-align: left; }
  .driver-item:last-child { border-bottom: none; }
}

/* Formula */
.drivers__formula { background: var(--black); border-radius: 5px; padding: 2.75rem; text-align: center; }
.formula { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.formula-part { font-family: var(--head); font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--text-dk); letter-spacing: -.01em; }
.formula-op { font-family: var(--head); font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 300; color: var(--mute-dk); }
.formula-result { font-family: var(--head); font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--gold); letter-spacing: -.01em; }
.formula-attr { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; color: var(--mute-dk); }

/* ════════════════════════════════════════════
   SPEAKING
════════════════════════════════════════════ */
.spk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 820px) { .spk-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .spk-grid { grid-template-columns: 1fr; } }

.spk-card { background: var(--card-dk); border: 1px solid var(--border-dk); border-radius: 5px; padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem; position: relative; transition: border-color .25s, transform .25s; }
.spk-card:hover { border-color: rgba(201,169,110,.3); transform: translateY(-2px); }
.spk-card--featured { border-color: rgba(201,169,110,.35); background: linear-gradient(135deg,#1e1b14,#181510); }

.spk-year { position: absolute; top: .9rem; right: .9rem; font-family: var(--mono); font-size: .57rem; letter-spacing: .09em; color: var(--mute-dk); background: rgba(255,255,255,.04); border: 1px solid var(--border-dk); padding: .15rem .45rem; border-radius: 2px; }
.spk-icon { font-size: 1.25rem; margin-bottom: .25rem; }
.spk-card h4 { font-family: var(--head); font-size: .95rem; font-weight: 600; color: var(--text-dk); letter-spacing: -.01em; line-height: 1.25; }
.spk-card p { font-size: .77rem; color: var(--mute-dk); line-height: 1.5; flex: 1; }
.spk-type { font-family: var(--mono); font-size: .57rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }

/* ════════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════════ */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
@media (max-width: 820px) { .testi-grid { grid-template-columns: 1fr; } }

.testi-card { background: var(--off); border: 1px solid var(--border); border-radius: 5px; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.testi-stars { color: var(--gold); font-size: .85rem; letter-spacing: .1em; }
.testi-card > p { font-size: .86rem; color: #444; line-height: 1.82; flex: 1; }
.testi-author { display: flex; align-items: center; gap: .875rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: .88rem; font-weight: 700; color: var(--black); flex-shrink: 0; }
.testi-author strong { display: block; font-size: .83rem; font-weight: 600; color: var(--black); }
.testi-author span { display: block; font-size: .72rem; color: var(--grey); line-height: 1.4; }

/* ════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════ */
.contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 6rem; align-items: start; }
@media (max-width: 820px) { .contact__grid { grid-template-columns: 1fr; gap: 3rem; } }

.contact__sub { font-size: .9rem; color: var(--mute-dk); line-height: 1.8; margin-bottom: 2rem; max-width: 360px; }

.c-links { display: flex; flex-direction: column; margin-bottom: 1.75rem; }
.c-link { display: flex; align-items: center; gap: .7rem; font-size: .85rem; color: var(--text-dk); padding: .85rem 0; border-bottom: 1px solid var(--border-dk); transition: color .25s; }
.c-link:last-child { border-bottom: none; }
.c-link:hover { color: var(--gold); }
.c-ico { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-dk); display: flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; transition: border-color .25s; }
.c-link:hover .c-ico { border-color: var(--gold); }

.c-loc { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; color: var(--mute-dk); }
.c-loc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Form */
.cform { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.fg { display: flex; flex-direction: column; gap: .4rem; }
.fg label { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-dk); }
.fg input, .fg select, .fg textarea { background: var(--card-dk); border: 1px solid var(--border-dk); border-radius: 3px; padding: .75rem .9rem; font-family: var(--body); font-size: .86rem; color: var(--text-dk); outline: none; transition: border-color .25s; resize: vertical; -webkit-appearance: none; }
.fg input::placeholder, .fg textarea::placeholder { color: var(--mute-dk); }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--gold); }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.footer { background: var(--black); border-top: 1px solid var(--border-dk); padding: 1.5rem 0; }
.footer__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer__brand .logo-tp { color: var(--text-dk); }
.footer__row > span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--mute-dk); }
.footer__r { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .65rem; color: var(--mute-dk); }
.footer__dot { opacity: .3; }
.footer__r a { color: var(--gold); transition: color .2s; }
.footer__r a:hover { color: var(--white); }