/* ============================================================
   SlaterGraphics — All Media Services — style.css
   Editorial, luxury-modern aesthetic. Miami night retro palette.
   ------------------------------------------------------------
   EDIT HERE → Brand colors, fonts, and spacing all live in the
   :root block below. Change a hex value once and it updates
   across the entire site.
   ============================================================ */

:root {
  /* ---------- BRAND COLORS (edit these) ----------
     Miami night retro palette: deep midnight purple, neon
     hot pink, electric cyan, and sunset orange/violet accents.
     (Token names are kept from the original theme so nothing
     else in the site needs to change.) */
  --army:      #FF2E97;   /* primary — neon hot pink */
  --army-deep: #12072B;   /* deepest midnight purple — topbar / hero / footer */
  --bone:      #FBEFFF;   /* soft neon-white — light text on dark */
  --sand:      #22E6F2;   /* electric cyan accent */
  --moss:      #8A4DFF;   /* retro violet accent */
  --ink:       #F3E6FF;   /* body text (light lavender on dark) */

  /* ---------- NIGHT SURFACES ---------- */
  --night:     #1B0D3D;   /* page background — midnight purple */
  --surface:   #26134F;   /* cards, panels, form fields */
  --on-accent: #12072B;   /* dark text on bright neon buttons */
  --sunset:    #FF8A3D;   /* sunset orange highlight */

  /* ---------- LOGO ----------
     "SLATER" uses --wordmark-slate, "GRAPHICS" uses --wordmark-roc. */
  --wordmark-slate: #22E6F2;   /* electric cyan */
  --wordmark-roc:   #FF2E97;   /* neon hot pink */

  /* ---------- HERO VIDEO ----------
     Tint over the background video: midnight purple fading to a pink sunset glow. */
  --hero-tint: linear-gradient(180deg, rgba(18, 7, 43, 0.55) 0%, rgba(58, 12, 90, 0.40) 60%, rgba(255, 46, 151, 0.22) 100%);

  /* ---------- TYPE ---------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;   /* italic editorial accents */

  /* ---------- LAYOUT ---------- */
  --max-w: 1320px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 2px;

  /* ---------- CONTACT DETAILS (edit these) ----------
     Phone number also appears inside tel:/sms: links in the HTML. */
  --brand-phone: "305-310-0107";
}

/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: 3px;
}

.container {
  width: min(var(--max-w), 100% - 2 * var(--pad));
  margin-inline: auto;
}

/* ============ TYPOGRAPHY ============ */
/* Titles, buttons, pull quotes and excerpts are ALL CAPS by design. */

h1, h2, h3, .caps {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
  font-weight: 800;
}

h1 { font-size: clamp(2.6rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: 0.05em; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--army);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 34px; height: 2px;
  background: var(--sand);
  margin-right: 14px;
  vertical-align: middle;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  max-width: 62ch;
  color: color-mix(in srgb, var(--ink) 82%, var(--army));
}

/* Editorial serif italic accent inside big caps headlines */
.accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pullquote {
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  border-left: 4px solid var(--sand);
  padding-left: clamp(1.2rem, 3vw, 2.4rem);
  max-width: 24ch;
}

/* ============ BUTTONS / CTAs ============ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05em 2.1em;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.btn:hover { background: var(--army); border-color: var(--army); color: var(--on-accent); transform: translateY(-2px); }

.btn--solid { background: var(--army); border-color: var(--army); color: var(--on-accent); }
.btn--solid:hover { background: var(--sand); border-color: var(--sand); color: var(--on-accent); }

.btn--light { border-color: var(--bone); color: var(--bone); }
.btn--light:hover { background: var(--bone); border-color: var(--bone); color: var(--army-deep); }

.btn--sand { background: var(--sand); border-color: var(--sand); color: var(--on-accent); }
.btn--sand:hover { background: var(--bone); border-color: var(--bone); color: var(--army-deep); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.2rem;
}

/* ============ UTILITY TOP BAR ============ */
.topbar {
  background: var(--army-deep);
  color: var(--bone);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.topbar a { padding: 2px 0; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.topbar a:hover { border-color: var(--sand); }
.topbar__contacts { display: flex; gap: 26px; }

/* ============ HEADER / NAV ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--night) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  line-height: 1.05;
}
/* SG circle mark to the left of the wordmark (also used as the favicon) */
.logo__mark {
  width: 44px;
  height: 44px;
  flex: none;
  display: block;
}
.logo__text { display: inline-flex; flex-direction: column; }
@media (max-width: 480px) {
  .logo__mark { width: 38px; height: 38px; }
  .logo { gap: 10px; }
}
/* two-tone wordmark: SLATER + GRAPHICS */
.wm { display: inline-block; }
.wm-a { color: var(--wordmark-slate); }
.wm-b { color: var(--wordmark-roc); }
/* on the dark footer, "SLATER" flips to bone so it stays readable */
.site-footer .wm-a { color: var(--bone); }

/* small "All Media Services" line under the SlaterGraphics wordmark */
.logo__tag {
  display: block;
  font-size: 0.47em;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-top: 5px;
  color: var(--army);
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;   /* keep "Social Media" / "Working Together" on one line */
}
/* keep the bar on one row on smaller laptops */
@media (min-width: 1041px) and (max-width: 1280px) {
  .nav { gap: clamp(12px, 1.5vw, 20px); }
  .nav__link { font-size: 0.72rem; letter-spacing: 0.14em; }
  .nav .btn { font-size: 0.72rem; letter-spacing: 0.14em; white-space: nowrap; }
}

/* ---------- SERVICES DROPDOWN ---------- */
.nav__item { position: relative; display: flex; align-items: center; }

/* the Services trigger is a <button> — strip the browser's button chrome */
.nav__drop {
  font-family: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__drop.is-current { color: var(--army); }
.nav__drop.is-current::after { width: 100%; }

.caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.22s ease;
}
.has-drop.is-open .caret,
.has-drop:hover .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-top: 2px solid var(--wordmark-roc);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(5, 0, 20, 0.55);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 120;
}
.has-drop:hover .dropdown,
.has-drop:focus-within .dropdown,
.has-drop.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 11px 22px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.dropdown a:hover,
.dropdown a:focus-visible { background: color-mix(in srgb, var(--army) 12%, transparent); color: var(--army); }
.dropdown a[aria-current="page"] { color: var(--army); background: color-mix(in srgb, var(--army) 8%, transparent); }

/* ---------- HEADER PHONE (left of Start a Project) ---------- */
.nav__phone {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--wordmark-roc);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav__phone::before { content: "\260E"; margin-right: 8px; font-weight: 400; }
.nav__phone:hover { color: var(--army); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--army);
  transition: width 0.25s ease;
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--army); }

.nav .btn { padding: 0.8em 1.5em; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  width: 46px; height: 42px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span { top: 19px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after  { left: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO (home) ============ */
.hero {
  background: var(--army-deep);
  color: var(--bone);
  overflow: hidden;
  position: relative;
}
.hero__inner {
  padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
  z-index: 1;
}
.hero h1 {
  /* EDIT: Helvetica Black for the hero wordmark, sized 10% larger */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900; /* "Black" weight */
  font-size: clamp(3.3rem, 12.65vw, 11rem);
  letter-spacing: 0.01em;
  line-height: 0.92;
}
.hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--sand);
}
.hero .lede { color: color-mix(in srgb, var(--bone) 85%, var(--sand)); margin-top: 2rem; }

/* Page hero (interior pages) */
.page-hero {
  background: var(--army);
  color: var(--bone);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   HERO BACKGROUND VIDEO + 30% BLACK TINT
   Used by the home hero and every page hero. The brand green
   stays behind the video, so the section still looks right
   while the clip loads or if it can't play.
   ============================================================ */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.hero-tint {
  position: absolute;
  inset: 0;
  background: var(--hero-tint);
  z-index: 1;
  pointer-events: none;
}
/* copy sits above both layers */
.hero .hero__inner,
.page-hero .hero__inner { position: relative; z-index: 2; }

/* a touch of shadow keeps the copy crisp over moving footage */
.hero .hero__inner h1,
.page-hero .hero__inner h1,
.hero .hero__inner .lede,
.page-hero .hero__inner .lede { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.page-hero .eyebrow { color: var(--sand); }
.page-hero .eyebrow::before { background: var(--bone); }
.page-hero .lede { color: color-mix(in srgb, var(--bone) 88%, var(--sand)); margin-top: 1.6rem; }

/* ============ SERVICE MARQUEE (signature element) ============ */
.marquee {
  border-top: 1px solid color-mix(in srgb, var(--bone) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bone) 25%, transparent);
  overflow: hidden;
  background: var(--army);
  color: var(--bone);
  padding: 14px 0;
}
.marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 32s linear infinite;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track span::after { content: "◆"; color: var(--sand); margin-left: 3.5rem; font-size: 0.6em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ SECTIONS ============ */
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section--tight { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--army { background: var(--army-deep); color: var(--bone); }
.section--army .eyebrow { color: var(--sand); }
.section--army .lede { color: color-mix(in srgb, var(--bone) 85%, var(--sand)); }
.section--moss { background: color-mix(in srgb, var(--moss) 22%, var(--night)); }
.section--sand { background: color-mix(in srgb, var(--army) 16%, var(--night)); }

.section-head { max-width: 900px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin-bottom: 1.2rem; }

/* Two-column editorial split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--rev > :first-child { order: 2; }

.frame { position: relative; }
.frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--sand);
  border-radius: var(--radius);
  z-index: -1;
}

/* ============ CARD GRIDS ============ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
}

.card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -20px rgba(255, 46, 151, 0.35); }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card__body { padding: clamp(1.4rem, 2.5vw, 2.2rem); flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: 0.8rem; }
.card__body p { flex: 1; margin-bottom: 1.4rem; color: color-mix(in srgb, var(--ink) 80%, var(--army)); }
.card__link {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--army);
}
.card__link::after { content: "→"; margin-left: 10px; transition: margin-left 0.2s; }
.card:hover .card__link::after { margin-left: 18px; }

/* Service capability list */
.cap-list {
  columns: 2;
  gap: 3rem;
  margin-top: 1.8rem;
}
.cap-list li {
  break-inside: avoid;
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cap-list li::before { content: "—"; color: var(--sand); margin-right: 12px; }
.section--army .cap-list li { border-color: color-mix(in srgb, var(--bone) 20%, transparent); }

/* ============ STATS STRIP ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: left;
}
.stat h3 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--sand); }
.stat p {
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ============ PORTFOLIO GRID ============ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.work-item { position: relative; overflow: hidden; border-radius: var(--radius); }
.work-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work-item:hover img { transform: scale(1.05); }
.work-item__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.3rem 1.5rem;
  background: linear-gradient(transparent, rgba(18, 7, 43, 0.9));
  color: var(--bone);
}
.work-item__meta h3 { font-size: 1rem; letter-spacing: 0.12em; }
.work-item__meta p {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 4px;
}

/* ============ CTA BAND ============ */
.cta-band {
  background: linear-gradient(135deg, var(--sunset) 0%, var(--army) 40%, var(--moss) 100%);
  color: var(--bone);
  text-align: center;
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.cta-band h2 { max-width: 20ch; margin: 0 auto 1.4rem; }
.cta-band .cta-row { justify-content: center; }

/* ============ CONTACT FORM ============ */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--radius);
}
.form .full { grid-column: 1 / -1; }
.form label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  color: var(--army);
}
.form input,
.form select,
.form textarea {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 0.95em 1.1em;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.2s;
}
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--army); outline: none; }
.form textarea { min-height: 160px; resize: vertical; }
.form-note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--ink) 70%, var(--army));
}

.contact-aside h3 { margin-bottom: 1rem; }
.contact-aside p { margin-bottom: 1.6rem; }
.contact-aside .cta-row { margin-top: 1rem; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--army-deep);
  color: var(--bone);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bone) 18%, transparent);
}
.footer-grid h3 {
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--sand);
  margin-bottom: 1.2rem;
}
.footer-grid li { margin-bottom: 0.65rem; }
.footer-grid a {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.footer-grid a:hover { border-color: var(--sand); }
.footer-brand .logo { font-size: 1.4rem; }
.footer-brand p { margin-top: 1rem; max-width: 34ch; font-size: 0.92rem; color: color-mix(in srgb, var(--bone) 80%, var(--sand)); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 1.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone) 65%, var(--moss));
}

/* ============ SCROLL REVEAL ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .grid-3, .work-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
}

@media (max-width: 1040px) {
  /* Mobile: remove the CALL/TEXT top banner entirely */
  .topbar { display: none; }
  /* Mobile: keep the wordmark, tighten the small services line */
  .site-header .logo__tag { font-size: 0.42em; letter-spacing: 0.16em; margin-top: 4px; }

  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--night);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    padding: 0 var(--pad);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .nav.is-open { max-height: min(760px, 80dvh); overflow-y: auto; }
  .nav__link { padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
  .nav .btn { margin: 16px 0 22px; text-align: center; }

  /* Mobile submenus expand only when their trigger is activated. */
  .nav__item { position: static; display: block; }
  .nav__drop { width: 100%; padding: 16px 0; text-align: left; }
  .nav__drop .caret { display: inline-block; margin-left: auto; transform: none; }
  .has-drop.is-open .caret { transform: rotate(180deg); }
  .dropdown {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px 18px;
  }
  .has-drop.is-open .dropdown { display: block; }
  .dropdown a {
    padding: 13px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    font-size: 0.72rem;
    opacity: 0.86;
  }
  .nav__phone {
    padding: 16px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {
  .grid-3, .grid-2, .work-grid, .form, .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cap-list { columns: 1; }
  .topbar__inner { justify-content: center; }
  .topbar__tag { display: none; }
}


/* ============================================================
   OWNER BLOCK (about.html) — James Slater
   ============================================================ */
.owner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
.owner__media { position: relative; }
.owner__media img,
.owner__mono {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.owner__mono {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--army) 18%, var(--surface)), var(--surface));
  border: 1.5px dashed color-mix(in srgb, var(--army) 40%, transparent);
}
.owner__mono span {
  font-size: clamp(3.4rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--army);
  line-height: 1;
}
.owner__mono small {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.owner__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: var(--army);
  color: var(--bone);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: var(--radius);
}
.owner__role {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--army);
  margin-top: 0.7rem;
}
@media (min-width: 900px) {
  .owner { grid-template-columns: 0.8fr 1.2fr; }
}

/* ============================================================
   NOTICE PANEL — "who you're paying" disclosure
   ============================================================ */
.notice {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-left: 4px solid var(--army);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}
.notice--tight { padding: clamp(1.2rem, 3vw, 1.8rem); border-left-color: var(--sand); }
.notice--tight p { max-width: 82ch; font-size: 0.95rem; }
.notice a { color: var(--army); font-weight: 600; text-decoration: underline; }

/* ============================================================
   NUMBERED PROCESS STEPS (working-together.html)
   ============================================================ */
.steps { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.step {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
}
.step__n {
  grid-column: 1;
  grid-row: 1 / span 2;      /* number sits beside both the heading and the copy */
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--sand);
  line-height: 1.1;
  min-width: 2.4ch;
}
.step h3 { grid-column: 2; grid-row: 1; margin-bottom: 0.5rem; }
.step p { grid-column: 2; grid-row: 2; max-width: 74ch; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:first-child { grid-column: 1 / -1; }
}

/* ============================================================
   Q&A GRID (working-together.html)
   ============================================================ */
.qa-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.qa h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.qa p { max-width: 62ch; }
.section--army .qa p { color: color-mix(in srgb, var(--bone) 82%, var(--sand)); }
@media (min-width: 820px) { .qa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .qa-grid { grid-template-columns: repeat(3, 1fr); } }

/* small owner line in the footer brand column */
.footer-owner { margin-top: 0.9rem; font-size: 0.85rem; opacity: 0.85; }
.footer-owner b { color: var(--sand); font-weight: 700; }

/* ============ VIDEO GRID (social-media.html) ============
   Click-to-play YouTube cards. The player only loads after a click,
   so the page stays fast. */
.video-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--bone) 12%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -20px rgba(255, 46, 151, 0.45); }
.yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sunset) 0%, var(--army) 45%, var(--moss) 100%);
}
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.3s ease; }
.yt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 7, 43, 0.05), rgba(18, 7, 43, 0.55));
  transition: opacity 0.3s ease;
}
.yt:hover img, .yt:focus-visible img { transform: scale(1.04); }
.yt:hover::after, .yt:focus-visible::after { opacity: 0.4; }
.yt__play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--army);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--army) 30%, transparent), 0 10px 30px rgba(18, 7, 43, 0.6);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.yt__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--on-accent);
}
.yt:hover .yt__play, .yt:focus-visible .yt__play {
  background: var(--sand);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sand) 30%, transparent), 0 10px 30px rgba(18, 7, 43, 0.6);
}
.yt--playing { cursor: default; }
.yt--playing::after { display: none; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__body {
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.video-card__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sand);
}

/* ============================================================
   BUSINESS CARD PRICING (business-card-printing.html)
   ============================================================ */
.calc {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-top: 4px solid var(--army); border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.6rem); margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.calc fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.calc legend { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--army); margin-bottom: 0.8rem; padding: 0; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: block; min-width: 96px; text-align: center; padding: 0.8em 1.1em; font-weight: 700; line-height: 1.25;
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: var(--radius); transition: all 0.2s;
}
.chip small { font-weight: 500; opacity: 0.75; font-size: 0.72em; letter-spacing: 0.04em; }
.chip:hover span { border-color: var(--sand); }
.chip input:checked + span { background: var(--army); border-color: var(--army); color: var(--on-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 2px; }
.calc__result { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.5rem; border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding-left: clamp(1rem, 3vw, 2.4rem); }
.calc__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sand); }
.calc__total { font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; line-height: 1; color: var(--bone); }
.calc__math { font-weight: 600; }
.calc__save { color: var(--sand); font-weight: 600; margin-bottom: 0.8rem; }
.price-h { margin: clamp(2rem, 4vw, 3rem) 0 0.6rem; }
.price-note { max-width: 70ch; margin-bottom: 1.4rem; }
.price-table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.price-table caption { text-align: left; font-size: 0.8rem; padding: 0 0 0.7rem; opacity: 0.8; caption-side: top; }
.price-table th, .price-table td { padding: 1em 1.1em; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.price-table thead th { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--army); white-space: nowrap; }
.price-table tbody th { font-weight: 800; }
.price-table td:nth-child(2) { font-weight: 800; color: var(--bone); font-size: 1.15rem; }
.price-table td:nth-child(5) { color: var(--sand); font-weight: 600; }
.price-foot { margin: 1.6rem 0 1.4rem; font-size: 0.9rem; max-width: 80ch; opacity: 0.85; }
@media (max-width: 760px) {
  .calc { grid-template-columns: 1fr; }
  .calc__result { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding-top: 1.4rem; }
  .price-table thead { position: absolute; left: -9999px; }
  .price-table tr { display: block; padding: 0.7rem 0; border-bottom: 3px solid var(--night); }
  .price-table th, .price-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.4em 1em; }
  .price-table td::before { content: attr(data-label); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
}

/* ============================================================
   BLOG (blog.html + article pages)
   ============================================================ */
.grid-2 .card img { aspect-ratio: 16 / 9; }
.card-date { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); margin-bottom: 0.6rem !important; flex: 0 !important; }
.card-title { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.15; margin-bottom: 0.9rem; }
.card__body .btn { align-self: flex-start; }
.post-hero .hero__inner { padding-bottom: clamp(2rem, 5vw, 4rem); }
.post-hero h1 { max-width: 24ch; font-size: clamp(2.2rem, 5.6vw, 4.4rem); }
.post-hero .eyebrow a { color: inherit; text-decoration: none; }
.post-meta { margin-top: 1.2rem; opacity: 0.8; font-size: 0.9rem; letter-spacing: 0.04em; }
.post { max-width: 1120px; margin-inline: auto; }
.post-photo { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: clamp(2rem, 4vw, 3.2rem); }
/* two-column magazine layout on desktop */
.post-cols { column-count: 2; column-gap: clamp(2rem, 4vw, 3.6rem); column-rule: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.post-cols h2, .post h2 { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; margin: 1.8rem 0 0.7rem; color: var(--sand); break-after: avoid; }
.post-cols > h2:first-child { margin-top: 0; }
.post-cols p { font-family: var(--font-serif); font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.8; margin-bottom: 1.1rem; break-inside: auto; }
.post-cols p b { color: var(--bone); font-family: var(--font-display); }
.post-faq { background: var(--surface); border-left: 4px solid var(--army); padding: clamp(1.4rem, 3vw, 2.4rem); margin: 2.4rem 0; }
.post-faq h2 { margin-top: 0; color: var(--army); }
.post-faq-grid { column-count: 2; column-gap: clamp(2rem, 4vw, 3.6rem); }
.post-qa { break-inside: avoid; margin-bottom: 1.4rem; }
.post-qa h3 { text-transform: none; letter-spacing: 0; font-size: 1.05rem; line-height: 1.3; margin-bottom: 0.4rem; color: var(--bone); }
.post-qa p { line-height: 1.7; }
.post-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2.6rem 0 1.4rem; }
.post-back a { color: var(--sand); font-weight: 600; text-decoration: none; }
@media (max-width: 900px) { .post-cols, .post-faq-grid { column-count: 1; column-rule: 0; } }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   BLOG HEADER (replaces hero on blog pages: article-style masthead)
   ============================================================ */
.post-head { background: var(--night); padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(1.8rem, 4vw, 3rem); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.post-head__inner { max-width: 860px; margin-inline: auto; text-align: center; }
.crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.78rem; letter-spacing: 0.08em; opacity: 0.85; margin-bottom: 1.6rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--sand); }
.post-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sand); border: 1px solid currentColor; border-radius: 999px; padding: 0.45em 1.2em; margin-bottom: 1.4rem; }
.post-head h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0 auto; }
.post-dek { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.6; max-width: 60ch; margin: 1.4rem auto 0; opacity: 0.9; }
.byline { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 2rem; text-align: left; }
.byline img { width: 44px; height: 44px; border-radius: 50%; }
.byline p { margin: 0; }
.byline__name { font-weight: 700; font-size: 0.95rem; }
.byline__meta { font-size: 0.8rem; opacity: 0.75; letter-spacing: 0.03em; }
.post-head + .section, article > .post-head + .section { padding-top: clamp(2rem, 4vw, 3.2rem); }