/* ============================================================
   SlaterGraphics — All Media Services — style.css
   Editorial, luxury-modern aesthetic. Army green + natural 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) ---------- */
  --army:      #4A5322;   /* primary — army green */
  --army-deep: #2F3516;   /* darker army green for footer / hero */
  --bone:      #F0EDE3;   /* warm off-white background */
  --sand:      #C8B48C;   /* natural sand accent */
  --moss:      #9AA07B;   /* soft moss green accent */
  --ink:       #1C1D16;   /* near-black text */

  /* ---------- LOGO ----------
     "SLATER" uses --wordmark-slate, "GRAPHICS" uses --wordmark-roc.
     EDIT HERE to try another accent, e.g.
       #B4531F rust (current) · #9A6B1F ochre · #7A1F1F oxblood · #2D6A6A teal */
  --wordmark-slate: #101010;   /* black */
  --wordmark-roc:   #C8102E;   /* red */

  /* ---------- HERO VIDEO ----------
     Tint strength over the background video (30% black). */
  --hero-tint: rgba(0, 0, 0, 0.30);

  /* ---------- 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(--bone);
  -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(--bone); transform: translateY(-2px); }

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

.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(--ink); }
.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(--bone) 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: column;
  line-height: 1.05;
}
/* 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(--bone);
  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 color-mix(in srgb, var(--ink) 18%, transparent);
  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) 32%, var(--bone)); }
.section--sand { background: color-mix(in srgb, var(--sand) 38%, var(--bone)); }

.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: #fff;
  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(28, 29, 22, 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(28, 29, 22, 0.85));
  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: var(--army);
  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: #fff;
  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(--bone);
  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(--bone);
    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: 760px; }
  .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; }

  /* Services inside the mobile menu: sub-links show as a plain indented list */
  .nav__item { position: static; display: block; }
  .nav__drop { width: 100%; padding: 16px 0; text-align: left; }
  .caret { display: none; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px 18px;
  }
  .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) 16%, #fff), #fff);
  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: #fff;
  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: #fff;
  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; }