/* ============================================
   JLAW ENTERPRISE — Modern Editorial

   BREAKPOINTS — only three, each with one job.
   Do not introduce a fourth.
     1024px — layout density (multi-column grids collapse)
      900px — chrome only (hamburger, container/section padding)
      640px — single column, smallest padding, scrolling pill rows
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap");

/* ——— Tokens ——— */
:root {
  /* Colour */
  --ink: #0a0a0a;
  --paper: #f5f2ec;
  --paper-warm: #efeae0;
  --accent: #c4392b;
  --accent-deep: #8b2a1e;
  --gold: #b8935a;
  --muted: #5a5a5a;
  --hairline: rgba(10, 10, 10, 0.12);
  --hairline-inv: rgba(245, 242, 236, 0.14);
  --paper-soft: rgba(245, 242, 236, 0.72);

  /* Type families */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, sans-serif;

  /* Type scale — four tiers, one voice each */
  --t-display: clamp(56px, 11vw, 180px); /* h1 — exactly one per page */
  --t-statement: clamp(40px, 6vw, 88px); /* max two per page */
  --t-section: clamp(34px, 4.5vw, 64px); /* every section h2 */
  --t-sub: clamp(22px, 2.4vw, 30px); /* h3, card titles */
  --t-lede: clamp(19px, 2vw, 24px);
  --t-body: 17px;
  --t-small: 14px;
  --t-micro: 13px;
  --track-micro: 0.14em;

  /* Chrome geometry — everything that must clear the fixed nav derives
     from these, so the toolbar offset and anchor offset cannot drift. */
  --nav-h: 84px;
  --nav-h-scrolled: 68px;
  --subnav-h: 0px;
  --scroll-offset: calc(var(--nav-h-scrolled) + var(--subnav-h) + 24px);

  /* Stacking order */
  --z-subnav: 50;
  --z-scrolltop: 90;
  --z-menu: 110;
  --z-nav: 120;
  --z-skiplink: 200;
  --z-grain: 1000;
}

@media (max-width: 900px) {
  :root {
    --nav-h: 72px;
    --nav-h-scrolled: 64px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ——— Grain overlay ——— */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* ============================================
   A11Y PRIMITIVES
   ============================================ */

.skip-link {
  position: fixed;
  top: 12px;
  left: -9999px;
  z-index: var(--z-skiplink);
  padding: 14px 24px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
}

.skip-link:focus {
  left: 12px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main:focus {
  outline: none;
}

/* The only focus rule in the old codebase was `outline: none`.
   Every interactive element now shows a ring on keyboard focus. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav :focus-visible,
.mobile-menu :focus-visible,
.footer :focus-visible,
.cta-dark :focus-visible,
.scroll-top:focus-visible {
  outline-color: var(--gold);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.serif {
  font-family: var(--serif);
}
.italic {
  font-style: italic;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow-accent,
.eyebrow--accent {
  color: var(--accent);
}

/* Eyebrow with the 40px leading rule — replaces four hand-rolled copies
   and one inline <span> spacer hack. */
.eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow--rule::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.eyebrow--center {
  display: flex;
  justify-content: center;
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  color: #fff;
  transition:
    background 0.4s,
    height 0.4s,
    mix-blend-mode 0s;
}

.nav.scrolled {
  mix-blend-mode: normal;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: var(--nav-h-scrolled);
  color: var(--paper);
}

/* While the overlay menu is open the nav sits above a solid black sheet,
   so difference-blending would make it unreadable. Own class rather than
   borrowing .scrolled, so closing restores correctly at any scroll position. */
.nav--menu-open {
  mix-blend-mode: normal;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--paper);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
}

.nav-logo em {
  font-style: italic;
  font-weight: 400;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-size: var(--t-small);
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
  transition: opacity 0.3s;
}

.nav-links a:hover {
  opacity: 0.6;
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

/* ——— Mobile menu toggle ——— */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s;
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ——— Mobile overlay menu ———
   Sits BELOW the nav (--z-menu < --z-nav) so the close button stays
   clickable. The old build had it above, which swallowed every click. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition:
    opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s 0.4s;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}

.mobile-menu a {
  font-family: var(--serif);
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 400;
  color: var(--paper);
  text-decoration: none;
  padding: 16px 0;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.5s,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.3s;
}

.mobile-menu.open a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.open a:nth-child(1) {
  transition-delay: 0.1s, 0.1s, 0s;
}
.mobile-menu.open a:nth-child(2) {
  transition-delay: 0.15s, 0.15s, 0s;
}
.mobile-menu.open a:nth-child(3) {
  transition-delay: 0.2s, 0.2s, 0s;
}
.mobile-menu.open a:nth-child(4) {
  transition-delay: 0.25s, 0.25s, 0s;
}

.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--accent);
}
.mobile-menu a.active {
  font-style: italic;
}

/* ——— Scroll-to-top ——— */
.scroll-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: var(--z-scrolltop);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(245, 242, 236, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.4s,
    transform 0.4s,
    background 0.3s,
    visibility 0s 0.4s;
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.4s,
    transform 0.4s,
    background 0.3s,
    visibility 0s;
}

.scroll-top:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.scroll-top svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   LAYOUT PRIMITIVES
   ============================================ */

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  padding: 120px 0;
}

/* Hairline grid on ink — the 1px-gap pattern that was redeclared in
   three separate inline blocks. Set --cols per instance. */
.hairline-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1px;
  background: var(--hairline-inv);
  border: 1px solid var(--hairline-inv);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 999px;
}

.btn:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.4s;
}
.btn:hover svg {
  transform: translateX(4px);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 100px 0 40px;
}

.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--hairline-inv);
}

/* Wordmark, not a heading — it used to occupy an <h3> slot on every page. */
.footer-wordmark {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(48px, 5vw, 72px);
  margin-bottom: 20px;
}

.footer-brand p:not(.footer-wordmark) {
  color: var(--paper-soft);
  max-width: 380px;
  font-size: 15px;
  line-height: 1.7;
}

.footer-col h2,
.footer-col h4 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--paper-soft);
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
}
.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: var(--paper);
  text-decoration: none;
  font-size: var(--t-small);
  transition: opacity 0.3s;
}

.footer-col a:hover {
  opacity: 0.6;
}

.footer-bottom {
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  font-size: var(--t-micro);
  color: var(--paper-soft);
  letter-spacing: 0.05em;
}

/* ——— Reduced motion ———
   Stills every motion system for people who ask for it. Everyone else
   keeps the animations exactly as they are. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .line-reveal > span,
  .js .hero-line > span {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee-track {
    animation: none !important;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* 1024 — layout density */
@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

/* 900 — chrome only. Hamburger arrives here, closing the old 601–900px
   dead zone where four 12px links had no fallback. */
@media (max-width: 900px) {
  .nav {
    padding: 0 20px;
  }
  .nav.scrolled {
    padding: 0 20px;
  }
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .container {
    padding: 0 20px;
  }
  .section {
    padding: 80px 0;
  }
  .scroll-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
}

/* 640 — single column */
@media (max-width: 640px) {
  .footer {
    padding: 72px 0 32px;
  }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 48px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
  .btn {
    padding: 16px 26px;
  }
}

/* ============================================
   SHARED COMPONENTS
   Previously re-declared inline on two to four pages each.
   ============================================ */

/* ——— Page hero (portfolio / story / contact) ——— */
.page-hero {
  padding: calc(var(--nav-h) + 80px) 40px 72px;
  max-width: 1440px;
  margin: 0 auto;
}

.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  color: var(--accent);
}

.page-hero .eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.page-hero h1 {
  font-size: var(--t-display);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 40px;
}

.page-hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.page-hero p.lede,
.lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.5;
  font-weight: 300;
  max-width: 680px;
  color: #333;
}

/* ——— Stat block ——— */
.stat-block .num,
.stat .num {
  font-family: var(--serif);
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.stat-block .num em,
.stat .num em {
  color: var(--accent);
  font-style: italic;
}

.stat-block .lbl,
.stat .lbl {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* ——— Pill controls (portfolio filters, story chapters) ——— */
.pill {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.3s,
    border-color 0.3s,
    background 0.3s,
    opacity 0.3s;
}

.pill:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.pill[aria-pressed="true"],
.pill[aria-current="true"],
.pill.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pill .count {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
  opacity: 0.75;
}

.pill[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Horizontal pill rail that scrolls rather than wrapping on small screens. */
.pill-rail {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ——— Dark closing CTA ———
   Was hand-inlined with style="" attributes on two pages. ——— */
.cta-dark {
  padding: 140px 40px;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
}

.cta-dark h2 {
  font-size: var(--t-statement);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 40px;
}

.cta-dark h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.cta-dark p {
  font-family: var(--serif);
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.5;
  color: var(--paper-soft);
  max-width: 620px;
  margin: 0 auto 40px;
}

.cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-dark .btn {
  background: var(--paper);
  color: var(--ink);
}
.cta-dark .btn:hover {
  background: var(--accent);
  color: var(--paper);
}

.cta-dark .btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(245, 242, 236, 0.35);
}

.cta-dark .btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ——— Editorial pull quote ——— */
.pull-quote {
  margin: 56px 0;
  padding: 36px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.pull-quote blockquote,
.pull-quote p {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.2;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

.pull-quote figcaption,
.pull-quote span {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 20px;
}

/* ============================================
   PAGE — OUR STORY
   ============================================ */

.chapter-nav {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 24px;
}

.chapter-nav .pill-rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
}
.chapter-nav .pill-rail::-webkit-scrollbar {
  display: none;
}

.story {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 40px;
}

.story-chapter {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  padding: 72px 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: var(--scroll-offset);
}

.story-chapter:last-child {
  border-bottom: 1px solid var(--hairline);
}

.ch-marker {
  position: sticky;
  top: calc(var(--nav-h-scrolled) + 24px);
  align-self: start;
}

.ch-marker .num {
  font-family: var(--serif);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

.ch-marker .label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  display: block;
}

.ch-body h2 {
  font-size: var(--t-section);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
  max-width: 720px;
}

.ch-body h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.ch-body p {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 300;
  color: #222;
  max-width: 680px;
  margin-bottom: 26px;
}

.ch-body p.body-sans {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: #444;
  max-width: 640px;
}

.ch-body p.drop-cap::first-letter {
  font-family: var(--serif);
  font-size: 96px;
  line-height: 0.85;
  float: left;
  padding-right: 18px;
  padding-top: 10px;
  font-weight: 400;
  color: var(--accent);
}

/* ——— Values ——— */
.values {
  padding: 130px 40px;
  background: var(--ink);
  color: var(--paper);
}

.values-wrap {
  max-width: 1440px;
  margin: 0 auto;
}

.values-header {
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}

.values-header h2 {
  font-size: var(--t-section);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.values-header h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.values-header p {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--paper-soft);
  font-weight: 300;
  max-width: 460px;
}

.values-grid {
  --cols: 4;
}

.value {
  background: var(--ink);
  padding: 44px 32px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s;
}

.value:hover {
  background: rgba(255, 255, 255, 0.03);
}

.value h3 {
  font-size: var(--t-sub);
  line-height: 1.12;
  margin-bottom: 18px;
}

.value h3 em {
  font-style: italic;
  font-weight: 300;
}

.value p {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--paper-soft);
  margin-top: auto;
}

/* ——— Numbers ——— */
.numbers {
  padding: 130px 40px;
  max-width: 1440px;
  margin: 0 auto;
}

.numbers-header {
  text-align: center;
  margin-bottom: 64px;
}

.numbers-header h2 {
  font-size: var(--t-section);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.numbers-header h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.number-cell {
  padding: 52px 28px;
  text-align: center;
  border-right: 1px solid var(--hairline);
}

.number-cell:last-child {
  border-right: none;
}

.number-cell .big {
  font-family: var(--serif);
  font-size: clamp(52px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 400;
}

.number-cell .big em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.number-cell .big sup {
  font-size: 0.36em;
  vertical-align: top;
  color: var(--accent);
}

.number-cell .lbl {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

/* ——— Duo ——— */
.duo {
  padding: 130px 40px;
  background: var(--paper-warm);
  max-width: 1440px;
  margin: 0 auto;
}

.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.duo-img {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}

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

.duo-content .eyebrow {
  color: var(--accent);
  margin-bottom: 24px;
}

.duo-content h2 {
  font-size: var(--t-section);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}

.duo-content h2 em {
  font-style: italic;
  font-weight: 300;
}

.duo-content p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 300;
  color: #222;
  margin-bottom: 20px;
}

/* ============================================
   PAGE — CONTACT
   ============================================ */

.contact-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 40px 130px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.contact-col h2 {
  font-size: var(--t-section);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}

.contact-col h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.channel-list {
  margin: 0;
}

.contact-item {
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: var(--scroll-offset);
  transition:
    background 0.3s,
    padding 0.3s;
}

.contact-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

/* Footer "Careers / Franchise / Press" now land on their own channel. */
.contact-item:target {
  background: var(--paper-warm);
  padding-left: 20px;
  border-left: 3px solid var(--accent);
}

.contact-item .type {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.contact-item .detail {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.contact-item .detail a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s;
}

.contact-item .detail a:hover {
  color: var(--accent);
}

.contact-item .sub {
  font-size: var(--t-small);
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.6;
}

/* ——— Form ——— */
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
}

.contact-form > .btn {
  align-self: flex-start;
}

.form-group label {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.4);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  transition:
    border-color 0.3s,
    background 0.3s;
  border-radius: 0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--ink);
  background: #fff;
}

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

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--accent);
}

.field-error {
  display: block;
  font-size: var(--t-micro);
  color: var(--accent);
  margin-top: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.form-status {
  font-size: var(--t-small);
  line-height: 1.55;
  padding: 0;
}

.form-status:not(:empty) {
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--paper-warm);
}

.form-note {
  font-size: var(--t-micro);
  color: var(--muted);
  line-height: 1.6;
}

.form-note a {
  color: var(--ink);
}
.form-note em {
  font-style: italic;
  color: var(--accent);
}

/* ——— Inquiry types ——— */
.inquiries {
  padding: 120px 40px;
  background: var(--ink);
  color: var(--paper);
}

.inquiries-wrap {
  max-width: 1440px;
  margin: 0 auto;
}

.inquiries-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 64px;
  align-items: end;
}

.inquiries-header h2 {
  font-size: var(--t-section);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.inquiries-header h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.inquiries-header p {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--paper-soft);
  font-weight: 300;
  max-width: 440px;
}

.inquiry-grid {
  --cols: 3;
}

.inquiry-card {
  background: var(--ink);
  padding: 44px 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.4s;
}

.inquiry-card:hover {
  background: var(--accent-deep);
}

.inquiry-card h3 {
  font-size: var(--t-sub);
  line-height: 1.12;
  margin-bottom: 14px;
}

.inquiry-card h3 em {
  font-style: italic;
  font-weight: 300;
}

.inquiry-card p {
  font-size: var(--t-small);
  color: var(--paper-soft);
  line-height: 1.6;
}

.inquiry-card .go {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================
   RESPONSIVE — PAGE LAYOUTS
   Same three breakpoints as the shell. The old build used five different
   sets across five files, which is why the nav and the page content
   disagreed about what "mobile" meant between 601 and 900px.
   ============================================ */

@media (max-width: 1024px) {
  /* Story */
  .story-chapter {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ch-marker {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .ch-marker .num {
    margin-bottom: 0;
  }
  .values-header {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .values-grid {
    --cols: 2;
  }
  .numbers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .number-cell:nth-child(2) {
    border-right: none;
  }
  .number-cell:nth-child(1),
  .number-cell:nth-child(2) {
    border-bottom: 1px solid var(--hairline);
  }
  .duo-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Contact */
  .contact-main {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .inquiries-header {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .inquiry-grid {
    --cols: 1;
  }
}

@media (max-width: 900px) {
  .page-hero {
    padding: calc(var(--nav-h) + 56px) 20px 48px;
  }

  .values,
  .numbers,
  .duo,
  .inquiries {
    padding-left: 20px;
    padding-right: 20px;
  }

  .story {
    padding: 48px 20px;
  }
  .chapter-nav {
    padding: 0 20px 20px;
  }
  .city-section {
    padding: 72px 20px;
  }
  .contact-main {
    padding: 48px 20px 88px;
  }
  .cta-dark {
    padding: 96px 20px;
  }

  .portfolio-toolbar {
    padding: 8px 20px;
  }
  .toolbar-scroll {
    flex-wrap: nowrap;
  }
  .pill-rail {
    flex-wrap: nowrap;
  }
}

@media (max-width: 640px) {
  .values-grid {
    --cols: 1;
  }
  .numbers-grid {
    grid-template-columns: 1fr;
  }
  .number-cell {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .number-cell:last-child {
    border-bottom: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-item .detail {
    font-size: 22px;
  }
}

/* Business-first layouts. Photography and identities stay in their own brand colours. */
:root {
  --paper: #f7f7f4;
  --paper-warm: #efefea;
  --t-display: clamp(40px, 5.6vw, 80px);
  --t-section: clamp(30px, 3.2vw, 46px);
  --t-sub: clamp(21px, 2vw, 25px);
  --content-width: 1360px;
}
body::before {
  display: none;
}
.nav {
  background: var(--paper);
  color: var(--ink);
  mix-blend-mode: normal;
  border-bottom: 1px solid var(--hairline);
}
.nav.scrolled,
.nav--menu-open {
  background: var(--paper);
  color: var(--ink);
  backdrop-filter: none;
}
.nav-logo {
  display: flex;
  align-items: baseline;
  font-size: 30px;
}
.nav-logo em {
  color: var(--accent);
}
.nav-brand-name {
  font: 500 12px var(--sans);
  margin-left: 12px;
  letter-spacing: 0.04em;
}
.nav-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}
.nav-links a.active {
  color: var(--accent);
}
.nav-links a.active::after {
  bottom: 5px;
  height: 2px;
}
.nav-toggle {
  width: 78px;
  height: 44px;
  padding: 10px 0 10px 50px;
  position: relative;
}
.menu-label {
  font: 500 14px var(--sans);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.mobile-menu {
  padding-inline: 20px;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  padding-top: calc(var(--nav-h) + 40px);
  justify-content: flex-start;
  align-items: stretch;
  gap: 4px;
}
.mobile-menu a {
  font: 500 28px var(--sans);
  color: var(--ink);
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  transform: none;
  opacity: 1;
}
.mobile-menu a.active {
  color: var(--accent);
  font-style: normal;
}
.nav :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--accent);
}
.no-js .nav-toggle {
  display: none;
}
.btn {
  min-height: 48px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  padding: 14px 22px;
  border-radius: 4px;
  gap: 12px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  font-size: 15px;
  font-weight: 500;
}
.text-link:hover {
  color: var(--accent);
}
.text-link svg,
.business-link svg,
.home-city-grid svg,
.home-business-body svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.home-hero {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 40px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.home-origin {
  font: 500 14px var(--sans);
  color: var(--accent);
  margin-bottom: 24px;
}
.home-hero h1 {
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.home-lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 470px;
  margin-top: 26px;
}
.home-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.home-footnote {
  font-size: 13px;
  color: var(--muted);
  margin-top: 36px;
}
/* The hero introduces the enterprise; photography belongs to individual businesses. */
.home-brand-family {
  align-self: center;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--paper-warm);
}
.brand-family-title {
  margin-bottom: 22px;
  font: 400 28px/1.2 var(--serif);
  letter-spacing: -0.02em;
}
.brand-family-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.brand-family-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.25;
  min-width: 0;
  padding: 18px;
  background: white;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.15s;
}
.brand-family-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-family-tile--dark {
  background: #242424;
}
.brand-family-tile:hover {
  border-color: var(--accent);
}
.brand-family-tile:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.brand-family-note {
  margin-top: 20px;
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.home-businesses,
.home-cities,
.home-story,
.simple-cta {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 72px 40px;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.section-heading h2,
.home-story h2,
.simple-cta h2 {
  font-size: var(--t-section);
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.section-heading p {
  color: var(--muted);
  margin-top: 12px;
  font-size: 16px;
}
.section-heading > .text-link {
  flex-shrink: 0;
}
.home-business-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.home-business {
  color: inherit;
  text-decoration: none;
  border-radius: 5px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--hairline);
}
.home-business-media {
  aspect-ratio: 1.7;
  position: relative;
  overflow: hidden;
  background: #eceee9;
}
.featured-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s;
}
.home-business:hover .featured-photo {
  transform: scale(1.025);
}
.brand-badge {
  position: absolute;
  left: 16px;
  bottom: 14px;
  width: 95px;
  height: 58px;
  background: white;
  padding: 8px 10px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-business-body {
  position: relative;
  padding: 22px 50px 22px 22px;
}
.home-business h3 {
  font: 500 19px/1.35 var(--sans);
}
.home-business-body > span {
  color: var(--muted);
  font-size: 13px;
  display: block;
  margin-top: 5px;
}
.home-business-body > svg {
  position: absolute;
  right: 20px;
  top: 27px;
  color: var(--accent);
}
.home-business:hover h3 {
  color: var(--accent);
}
.brand-only {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eeefed;
}
.brand-only .featured-logo,
.brand-only .business-logo {
  object-fit: contain;
  width: 66%;
  height: 60%;
}
.brand-dark {
  background: #242424;
}
.brand-product .business-photo {
  object-fit: contain;
  padding: 12px;
  background: #f5eedf;
}
.business-type-links {
  display: flex;
  gap: 12px 22px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 28px;
  font-size: 14px;
}
.business-type-links > span {
  color: var(--muted);
}
.business-type-links a {
  color: var(--ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-underline-offset: 4px;
}
.business-type-links a:hover {
  color: var(--accent);
}
.home-cities {
  padding-top: 24px;
}
.home-city-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
}
.home-city-grid a {
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font: 400 25px var(--serif);
}
.home-city-grid small {
  display: block;
  color: var(--muted);
  font: 400 13px var(--sans);
  margin-top: 8px;
}
.home-city-grid a:hover {
  color: var(--accent);
}
.home-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-top: 1px solid var(--hairline);
}
.home-story > div > p:not(.home-origin) {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
}
.simple-cta {
  background: var(--paper-warm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.simple-cta h2 {
  font-size: clamp(28px, 3vw, 38px);
}
.simple-cta p {
  color: var(--muted);
  margin-top: 12px;
}
.simple-cta .btn {
  flex-shrink: 0;
}
/* Directory controls stay visible without occupying most of a mobile screen. */
.page-hero {
  padding: calc(var(--nav-h) + 44px) 40px 44px;
}
.page-hero h1 {
  font-size: var(--t-display);
  line-height: 1.08;
}
.page-hero p.lede {
  max-width: 700px;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  margin-top: 22px;
}
.page-portfolio {
  --subnav-h: 136px;
}
.directory-heading {
  max-width: var(--content-width);
  margin: 0 auto;
}
.directory-heading h1 {
  font-size: clamp(38px, 4.5vw, 64px);
}
.portfolio-toolbar {
  position: sticky;
  top: var(--nav-h-scrolled);
  z-index: var(--z-subnav);
  padding: 16px 40px 10px;
  background: var(--paper);
  border-block: 1px solid var(--hairline);
}
.directory-controls {
  max-width: calc(var(--content-width) - 80px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
.directory-controls label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #454545;
}
.directory-controls input,
.directory-controls select {
  width: 100%;
  height: 46px;
  min-width: 0;
  border: 1px solid #a5a5a0;
  border-radius: 4px;
  background: white;
  padding: 0 12px;
  color: var(--ink);
  font: 400 16px var(--sans);
}
.directory-controls input:focus,
.directory-controls select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.directory-controls select {
  padding-right: 24px;
}
.directory-status {
  max-width: calc(var(--content-width) - 80px);
  margin: 5px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}
.filter-status {
  font-size: 13px;
  color: var(--muted);
}
.clear-filters {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  font: 500 13px var(--sans);
  cursor: pointer;
  min-height: 36px;
  padding: 4px 6px;
  flex-shrink: 0;
}
.no-js .portfolio-toolbar {
  display: none;
}
.no-script-note {
  padding: 20px 40px;
}
.city-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 40px 24px;
}
.city-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.city-header h2 {
  font: 400 32px/1.2 var(--serif);
  letter-spacing: -0.02em;
}
.city-header p {
  font-size: 13px;
  color: var(--muted);
}
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.biz {
  border: 1px solid var(--hairline);
  background: white;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
}
.biz:target {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.biz:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.biz-img {
  height: 210px;
  position: relative;
  overflow: hidden;
  background-color: #eeefed;
}
.biz-img .business-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.biz-img .poke-bar-photo {
  object-fit: contain;
  object-position: center center;
  background: #fff;
}
.biz-img.brand-dark {
  background: #242424;
}
.business-nameplate {
  font: 500 28px/1.2 var(--serif);
  max-width: 80%;
  text-align: center;
  color: #363f49;
}
.biz-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.biz-tag {
  font-size: 12px;
  color: var(--muted);
}
.biz h3 {
  font: 500 20px/1.35 var(--sans);
}
.biz-content > p {
  font-size: 14px;
  color: #555;
  line-height: 1.65;
}
.biz-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 10px;
}
.biz-locations {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.biz-location-count {
  display: inline-block;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper-warm);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.biz-location-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.biz-location-list li {
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.business-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
}
.business-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portfolio-empty {
  text-align: center;
  padding: 70px 24px;
}
.portfolio-empty h2 {
  font-size: 32px;
}
.portfolio-empty p {
  color: var(--muted);
  margin: 12px 0 24px;
}
.page-portfolio .simple-cta {
  margin-top: 48px;
}
/* Secondary pages use the same quieter scale and direct routes. */
.chapter-nav .pill-rail {
  flex-wrap: wrap;
  overflow: visible;
}
.chapter-nav .pill {
  min-height: 44px;
}
.chapter-nav .pill .count {
  opacity: 1;
  color: var(--muted);
}
.inquiry-card {
  min-width: 0;
}
.inquiry-card .go {
  overflow-wrap: anywhere;
  letter-spacing: 0;
  text-transform: none;
}
.story-chapter {
  padding-block: 48px;
}
.contact-business-help {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 40px;
  background: var(--paper-warm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.contact-business-help strong {
  font-size: 16px;
}
.contact-business-help p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}
.contact-business-help .text-link {
  flex-shrink: 0;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-size: 16px;
}
.contact-item .detail {
  overflow-wrap: anywhere;
}
.form-note {
  overflow-wrap: anywhere;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.footer {
  margin-top: 0;
}
@media (max-width: 1024px) {
  .home-hero {
    gap: 30px;
  }
  .home-hero h1 {
    font-size: clamp(40px, 5.5vw, 62px);
  }
  .home-brand-family {
    padding: 20px;
  }
  .brand-family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-family-grid .brand-family-tile--wide {
    grid-column: 1 / -1;
    aspect-ratio: 3;
  }
  .brand-family-tile {
    padding: 12px;
  }
  .home-business-grid,
  .biz-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-city-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-heading {
    align-items: flex-start;
  }
  .page-portfolio {
    --subnav-h: 136px;
  }
  .home-story {
    gap: 36px;
  }
}
@media (max-width: 900px) {
  .home-hero {
    padding: calc(var(--nav-h) + 28px) 20px 28px;
  }
  .home-businesses,
  .home-cities,
  .home-story,
  .simple-cta {
    padding-inline: 20px;
  }
  .page-hero {
    padding: calc(var(--nav-h) + 36px) 20px 32px;
  }
  .portfolio-toolbar {
    padding: 12px 20px 8px;
  }
  .city-section {
    padding: 32px 20px 20px;
  }
  .contact-business-help {
    padding-inline: 20px;
  }
  .no-js .nav {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--nav-h);
    position: relative;
    padding-block: 10px;
    gap: 4px;
  }
  .no-js .nav-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  .no-js .home-hero,
  .no-js .page-hero {
    padding-top: 32px;
  }
}
@media (max-width: 640px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .home-hero h1 {
    font-size: clamp(39px, 10.8vw, 62px);
  }
  .home-origin {
    margin-bottom: 18px;
  }
  .home-lede {
    font-size: 16px;
    margin-top: 20px;
  }
  .home-actions {
    gap: 18px;
    margin-top: 24px;
  }
  .home-actions .btn {
    padding-inline: 16px;
  }
  .home-footnote {
    display: none;
  }
  .home-brand-family {
    padding: 20px;
  }
  .brand-family-title {
    font-size: 24px;
    margin-bottom: 18px;
  }
  .brand-family-grid {
    gap: 8px;
  }
  .brand-family-tile {
    padding: 10px;
    aspect-ratio: 1.15;
  }
  .brand-family-note {
    font-size: 13px;
    margin-top: 16px;
  }
  .home-businesses,
  .home-story {
    padding-block: 44px;
  }
  .section-heading {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
  }
  .section-heading h2 {
    font-size: 32px;
  }
  .home-business-grid,
  .biz-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .home-business-media {
    aspect-ratio: 1.65;
  }
  .home-city-grid {
    gap: 0 20px;
  }
  .home-city-grid a {
    font-size: 21px;
  }
  .home-story {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .home-story > div > p:not(.home-origin) {
    font-size: 16px;
  }
  .simple-cta,
  .contact-business-help {
    flex-direction: column;
    align-items: flex-start;
  }
  .simple-cta {
    padding-block: 36px;
  }
  .home-cities {
    padding-block: 12px 44px;
  }
  .directory-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .search-field {
    grid-column: 1 / -1;
  }
  .directory-controls label {
    margin-bottom: 4px;
  }
  .directory-controls input,
  .directory-controls select {
    height: 44px;
  }
  .page-portfolio {
    --subnav-h: 190px;
  }
  .city-header {
    margin-bottom: 20px;
    gap: 12px;
  }
  .city-header h2 {
    font-size: 27px;
  }
  .city-header p {
    font-size: 12px;
  }
  .biz-img {
    height: 205px;
  }
  .directory-heading .lede {
    font-size: 16px;
  }
  .directory-status {
    gap: 6px;
  }
  .filter-status {
    font-size: 12px;
  }
  .business-type-links {
    gap: 4px 20px;
  }
  .business-type-links > span {
    width: 100%;
  }
  .chapter-nav .pill-rail {
    gap: 8px;
  }
  .chapter-nav .pill {
    font-size: 12px;
    padding-inline: 10px;
  }
  .contact-main {
    padding-top: 36px;
  }
  .footer {
    padding-top: 44px;
  }
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    padding-bottom: 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-col h2 {
    margin-bottom: 10px;
  }
  .footer-col li {
    margin-bottom: 0;
  }
  .footer-col a {
    min-height: 44px;
  }
  .inquiry-card {
    padding: 28px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .featured-photo {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

.home-business[href$="#coras"] .featured-photo,
#coras .business-photo {
  object-position: 12% center;
}

/* Launch essentials: quiet secondary navigation and practical help. */
.breadcrumbs {
  margin-bottom: 24px;
  font: 400 13px/1.5 var(--sans);
  color: var(--muted);
}
.breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  gap: 10px;
  padding: 0;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--muted);
}
.breadcrumbs a {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map-link {
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-size: 13px;
  text-underline-offset: 3px;
}
.map-link:hover {
  color: var(--accent-deep);
}
.faq-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 40px 80px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
}
.faq-intro .eyebrow {
  margin-bottom: 16px;
}
.faq-intro h2 {
  font-size: clamp(28px, 3vw, 40px);
  max-width: 340px;
}
.faq-list details {
  border-bottom: 1px solid var(--hairline);
}
.faq-list summary {
  cursor: pointer;
  padding: 20px 8px 20px 0;
  font: 500 16px/1.6 var(--sans);
}
.faq-list summary::marker {
  color: var(--accent-deep);
}
.faq-list details > div {
  padding: 0 24px 22px 0;
  color: #444;
  font-size: 15px;
  line-height: 1.8;
}
.faq-list a,
.policy-content a,
.footer-bottom a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom a {
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.policy-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 40px 80px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.policy-date {
  font-size: 13px;
  color: var(--muted);
}
.policy-content h2 {
  font-size: 28px;
  line-height: 1.3;
  margin: 36px 0 16px;
  color: var(--ink);
}
.policy-content p + p {
  margin-top: 16px;
}
.error-page {
  min-height: 65vh;
  padding-bottom: 80px;
}
.utility-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 900px) {
  .faq-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 20px 48px;
  }
  .faq-intro h2 {
    max-width: none;
  }
  .policy-content {
    padding: 0 20px 48px;
  }
  .breadcrumbs {
    margin-bottom: 16px;
  }
}

.faq-list a,
.policy-content a {
  color: var(--accent-deep);
}

/* Careers extends the existing JLaw palette, typography and breakpoints. */
.nav-links .nav-careers {
  padding-inline: 16px;
  border: 1px solid var(--accent-deep);
  border-radius: 4px;
  color: var(--accent-deep);
}
.home-careers {
  max-width: 1360px;
  margin: 0 auto;
  padding: 56px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  background: var(--paper-warm);
  border-block: 1px solid var(--hairline);
}
.home-careers h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.1; }
.home-careers-copy > p:not(.home-origin) { max-width: 47ch; margin: 22px 0; }
.home-careers-details { align-self: center; border-left: 1px solid var(--hairline); padding-left: 40px; }
.home-careers-details h3 { font: 600 21px/1.4 var(--sans); margin-bottom: 16px; }
.home-careers-details p { color: var(--muted); font-size: 15px; max-width: 48ch; }
.home-careers-details ul { margin: 18px 0; padding-left: 20px; font-size: 15px; }
.business-apply { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 14px; border: 1px solid var(--accent-deep); color: var(--accent-deep); border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 600; }
.business-apply:hover { background: var(--accent-deep); color: white; }
.careers-hero { max-width: 1360px; margin: auto; }
.careers-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.careers-hero h1 { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.08; }
.careers-intro .lede { margin-top: 0; font-size: 19px; }
.careers-intro .btn { margin-top: 24px; }
.careers-caption { margin-top: 16px; font-size: 13px; color: var(--muted); }
.application-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; max-width: 1360px; padding: 48px 40px 80px; margin: auto; align-items: start; border-top: 1px solid var(--hairline); }
.application-aside h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.1; margin-bottom: 24px; }
.application-aside > p { max-width: 38ch; color: var(--muted); }
.application-steps { padding: 0; margin: 32px 0; list-style: none; counter-reset: step; }
.application-steps li { counter-increment: step; padding: 18px 0 18px 38px; position: relative; border-top: 1px solid var(--hairline); }
.application-steps li::before { content: counter(step); position: absolute; left: 0; color: var(--accent-deep); font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.application-steps strong { display: block; font-size: 15px; font-weight: 600; }
.application-steps span { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; }
.application-aside .text-link { margin-top: 18px; }
.application-panel { padding: 32px; border: 1px solid var(--hairline); border-radius: 5px; background: white; min-width: 0; }
.application-form { display: flex; flex-direction: column; gap: 24px; }
.application-required { font-size: 13px; color: var(--muted); }
.application-form fieldset { min-width: 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--hairline); display: grid; gap: 20px; }
.application-form legend { padding-right: 16px; font: 500 26px/1.3 var(--serif); }
.application-form .form-group { min-width: 0; }
.application-form .form-group label { font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.application-form label span:not(.application-consent span) { font-weight: 400; }
.application-form input, .application-form select, .application-form textarea { font-size: 16px; border-radius: 4px; background: white; padding: 12px; min-height: 48px; min-width: 0; }
.application-form textarea { min-height: 104px; }
.application-form select { text-overflow: ellipsis; }
.field-help { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.resume-upload { padding: 16px; background: var(--paper); border: 1px dashed #aaa49a; border-radius: 4px; }
.resume-upload input { border: 0; padding: 0; background: transparent; font-size: 14px; }
.resume-upload input::file-selector-button { font: 500 14px var(--sans); border: 1px solid var(--hairline); border-radius: 4px; padding: 12px; background: white; color: var(--ink); margin-right: 12px; cursor: pointer; }
.application-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.application-consent input { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; margin-top: 3px; accent-color: var(--accent-deep); }
.application-consent a { color: inherit; }
.application-form .btn { align-self: flex-start; cursor: pointer; }
.application-form .btn:disabled { opacity: .65; cursor: wait; }
.application-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.application-success h2 { font-size: 38px; margin-bottom: 24px; }
.application-success p { margin-bottom: 16px; }
.success-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: 24px; background: var(--paper-warm); color: var(--accent-deep); font-size: 26px; }
@media (max-width: 1024px) {
  .home-careers, .careers-intro, .application-layout { gap: 32px; }
  .application-layout { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
  .application-form .form-row { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 900px) {
  .home-careers, .application-layout { padding-inline: 20px; }
  .application-layout { grid-template-columns: 1fr; }
  .application-aside { max-width: 650px; }
  .application-aside > p { max-width: 65ch; }
  .application-aside h2 br { display: none; }
  .application-steps { display: none; }
  .application-aside .form-note { margin-top: 16px; }
  .application-form .form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 640px) {
  .home-careers, .careers-intro { grid-template-columns: 1fr; gap: 28px; }
  .home-careers { padding-block: 36px; }
  .home-careers-details { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .home-careers .home-origin { font-size: 13px; }
  .careers-intro .lede { font-size: 17px; }
  .application-layout { padding-block: 32px 48px; gap: 24px; }
  .application-panel { padding: 24px 16px; }
  .application-form .form-row { grid-template-columns: 1fr; }
  .application-form .btn { width: 100%; justify-content: center; }
  .application-form .form-group label { line-height: 1.5; }
}

/* White-background brand variants match the surrounding directory logos. */
.biz-img.brand-light { background: #fff; }

/* Candidate journey: clear first action, process and practical reassurance. */
.application-reassurance { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin-top: 24px; color: var(--muted); font-size: 13px; }
.application-reassurance li::before { content: '✓'; color: var(--accent-deep); margin-right: 7px; }
.hiring-process, .career-directions { max-width: 1360px; margin: auto; padding: 56px 40px; }
.hiring-process { background: var(--paper-warm); border-block: 1px solid var(--hairline); scroll-margin-top: calc(var(--nav-h) + 16px); }
.hiring-process .section-heading { align-items: center; }
.hiring-process .home-origin { margin-bottom: 14px; }
.hiring-process .section-heading p, .career-directions .section-heading p { max-width: 65ch; }
.hiring-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; gap: 40px; margin-top: 36px; }
.hiring-step-number { display: block; font: 400 34px/1 var(--serif); color: var(--accent-deep); margin-bottom: 20px; }
.hiring-steps h3 { font: 600 19px/1.4 var(--sans); margin-bottom: 10px; }
.hiring-steps p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 38ch; }
.career-direction-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.career-direction-grid > a { display: flex; flex-direction: column; gap: 14px; padding: 24px 0; border-block: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.career-direction-grid > a:hover { border-color: var(--accent); }
.career-direction-grid h3 { font: 500 24px/1.2 var(--serif); }
.career-direction-grid p { font-size: 15px; color: var(--muted); }
.career-direction-grid .text-link { margin-top: auto; color: var(--accent-deep); }
.career-other-paths { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 14px; color: var(--muted); }
.career-other-paths a { color: var(--ink); text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.hiring-faq { max-width: 1360px; margin: auto; }
.hiring-faq .faq-intro p { margin-top: 20px; color: var(--muted); }
.nav-apply-mobile { display: none; }
.application-availability h3 { font: 500 29px/1.2 var(--serif); margin-bottom: 16px; }
.application-availability p { font-size: 16px; line-height: 1.75; color: var(--muted); }
#availability-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 22px; }
#application-retry { border: 0; background: none; font-family: var(--sans); cursor: pointer; }
#application-retry:disabled { cursor: wait; opacity: .6; }
@media (max-width: 900px) {
  .hiring-process, .career-directions { padding-inline: 20px; }
  .nav { gap: 12px; }
  .nav-apply-mobile { display: inline-flex; margin-left: auto; min-height: 44px; align-items: center; justify-content: center; padding: 8px 15px; border-radius: 4px; background: var(--accent-deep); color: white; text-decoration: none; font-size: 14px; font-weight: 600; }
  .nav-toggle { flex-shrink: 0; }
  .nav-brand-name { display: none; }
  .no-js .nav-apply-mobile { display: none; }
  .hiring-steps { gap: 24px; }
  .career-direction-grid { gap: 20px; }
}
@media (max-width: 640px) {
  .application-reassurance { display: grid; gap: 6px; margin-top: 18px; }
  .home-actions { gap: 12px 20px; }
  .hiring-process, .career-directions { padding-block: 36px; }
  .hiring-process .section-heading { align-items: flex-start; }
  .hiring-steps, .career-direction-grid { grid-template-columns: 1fr; gap: 0; }
  .hiring-steps { margin-top: 22px; }
  .hiring-steps li { position: relative; padding: 20px 0 20px 40px; border-top: 1px solid var(--hairline); }
  .hiring-step-number { position: absolute; left: 0; top: 23px; font-size: 27px; }
  .hiring-steps p { max-width: none; }
  .career-direction-grid > a { border-bottom: 0; gap: 8px; padding-block: 20px; }
  .career-direction-grid > a:last-child { border-bottom: 1px solid var(--hairline); }
  .career-direction-grid h3 { font-size: 24px; }
}



/* Jolie’s chapter follows the existing story layout and responsive breakpoints. */
.jolie-chapter {
  border-top: 3px solid var(--accent);
}
.ch-body .jolie-eyebrow {
  font: 500 12px/1.5 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 24px;
}

/* Keep adjacent logo cards consistent; photographs retain their own backgrounds. */
.brand-family-grid .brand-family-tile,
.biz-grid .biz-img.brand-only,
.home-business-grid .home-business-media.brand-only {
  background: #fff;
}

/* Approved photos keep business names readable in the compact homepage grid. */
.brand-family-grid .brand-family-tile--photo {
  display: block;
  position: relative;
  padding: 0;
  overflow: hidden;
}
.brand-family-tile--photo .brand-family-photo {
  object-fit: cover;
}
.brand-family-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 22px 9px 9px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  font: 600 12px/1.25 var(--sans);
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Keep the subject visible in these unusually tall/wide source photos. */
.brand-card-media img[src$="/thumbs-up.png"],
.biz-img .business-photo[src$="/thumbs-up.png"] {
  object-position: center top;
  transform-origin: center top;
}
.brand-card-media img[src$="coras-breakfast.webp"],
.biz-img .business-photo[src$="coras-breakfast.webp"],
#coras .biz-img .business-photo {
  object-position: right center;
}