/* ============================================
   TASTEMAKERS COLLECTIVE
   Design system and page styles
   Business card system: rich black ground, amethyst
   structure, white copy, grey hairlines.
   ============================================ */

/* === TOKENS === */
/* === FONTS ===
   Self-hosted rather than fetched from Google. Two files, the latin subsets
   of the same variable faces the site has always used, served from our own
   origin so they can be preloaded against a URL that does not change when
   Google rotates a version, and so a visitor makes no third-party request.

   font-display: swap means the fallback shows immediately and is replaced
   when the file lands, so text is never invisible while a font loads. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ground */
  --black: #231F20;
  --black-deep: #1B1819;
  /* Raised card surface, solved against the widened ground. It is the
     lightest aubergine that still keeps amethyst text at 4.60:1, which
     leaves it 15% above the ground at the ground's lightest point, so a
     card reads as raised even in the middle of a long page. Blue leads,
     red second, green last, matching the ground's own hue direction: a
     warm grey card on an aubergine ground read as a dirty patch. */
  --black-raised: #2D233A;

  /* amethyst.
     --amethyst is the printed card value. On this ground it measures
     2.12:1, below the 3:1 large text floor, so it is used for frames,
     rules, fills and borders only, never for text.
     --amethyst-text measures 5.05:1 and carries every accent word. */
  --amethyst: #684385;
  --amethyst-text: #A67FC9;

  /* hairlines and copy */
  --grey: #706E6E;
  --hairline: rgba(112, 110, 110, 0.40);
  --hairline-soft: rgba(112, 110, 110, 0.22);
  --white: #FFFFFF;
  --white-soft: rgba(255, 255, 255, 0.74);
  --white-dim: rgba(255, 255, 255, 0.55);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Height of the sticky header. The hero subtracts it and the mobile menu
     hangs off it. script.js measures the real header and overwrites this on
     load and on resize; the value here is only the pre-script fallback. */
  --nav-h: 77px;
}

/* === RESET === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--amethyst-text); outline-offset: 3px; }

/* === GROUND PROGRESSION ===
   A four stop gradient on the page wrapper, which spans nav, main and
   footer and so refits itself on every route change. The travel is in HUE,
   not lightness: near black at the top, an aubergine tinted charcoal
   through the middle, back to near black at the footer. That buys a shift
   the eye can actually see without moving the ground's luminance, which is
   what the contrast floor is sensitive to.

   Sections stay transparent so the ground runs edge to edge; painting them
   individually would stripe the page, because .tmc-body and friends are
   narrow centred boxes. */
/* Registered so the middle stop can be transitioned. An unregistered
   custom property has no type, so it snaps; a registered <color> can be
   interpolated, and because the gradient reads it, the whole ground
   crossfades between routes. Browsers without @property snap, as before.

   This is the one exception to the transform and opacity rule: a custom
   property transition shifts no layout. Approved 9/21/2026. */
@property --ground-mid {
  syntax: '<color>';
  inherits: true;
  initial-value: #261C33;
}
.tmc {
  --ground-0: #0C0A0D;
  --ground-1: #1C1626;
  --ground-mid: #261C33;
  --ground-3: #0C0A0D;
  background:
    linear-gradient(to bottom,
      var(--ground-0) 0%,
      var(--ground-1) 35%,
      var(--ground-mid) 70%,
      var(--ground-3) 100%);
  color: var(--white);
  min-height: 100vh;
  position: relative;
  /* 600ms, so the tint is still moving as the new page fades up and the
     two read as one change. Under 700ms like everything else. */
  transition: --ground-mid 0.6s ease;
}

/* Per route tint. Only the middle stop moves, and every variant is matched
   to the same luminance within one percent, so the pages differ in hue and
   not in how dark they are. */
.tmc[data-route="weddings"]  { --ground-mid: #241A40; }   /* deeper, cooler */
.tmc[data-route="events"],
.tmc[data-route="vending"]   { --ground-mid: #211C3A; }   /* cooler purple */
.tmc[data-route="corporate"],
.tmc[data-route="menus"]     { --ground-mid: #241E2B; }   /* neutral       */

/* === GRAIN ===
   Fixed to the viewport so it never slides against the page, inert to the
   pointer, and painted between the ground and the content: .tmc::before
   sits at z-index 0 and #tmc-main is lifted to 1. Cards have opaque
   backgrounds so the grain stops at their edges and never sits under text
   on a card. The noise is an inline SVG data URI, so it costs no request.
   It does not animate, so prefers-reduced-motion leaves it alone. */
.tmc::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
}
#tmc-main { position: relative; z-index: 1; }
/* The footer sits outside main now, so it needs the same lift above the grain. */
.tmc-footer { position: relative; z-index: 1; }

/* === NAV === */
.tmc-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(35, 31, 32, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}

/* header lockup, matching the card */
.tmc-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
}
.tmc-logo-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--amethyst-text);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  white-space: nowrap;
}
.tmc-logo-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.tmc-logo-rule { flex: 1; height: 1px; background: var(--grey); }
.tmc-logo-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9px;
  color: var(--amethyst-text);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  white-space: nowrap;
}

.tmc-nav-links {
  display: flex;
  gap: 26px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}
.tmc-nav-links a {
  color: var(--white-soft);
  transition: color 0.2s;
  cursor: pointer;
}
.tmc-nav-links a:hover { color: var(--white); }
.tmc-nav-links a[aria-current="page"] { color: var(--white); }

.tmc-nav-cta { display: flex; align-items: center; }

.tmc-nav-btn {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--amethyst);
  color: var(--white);
  padding: 13px 22px;
  transition: background-color 0.2s;
  display: inline-block;
}
.tmc-nav-btn:hover { background: var(--amethyst); }

.tmc-mobile-toggle { display: none; flex-direction: column; gap: 4px; padding: 8px; }
.tmc-mobile-toggle span { width: 20px; height: 1px; background: var(--white); display: block; }

.tmc-mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  /* Opaque overlay, matched to the top of the ground, where it opens. */
  background: #16121F;
  border-bottom: 1px solid var(--hairline);
  padding: 18px 24px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 99;
}
.tmc-mobile-menu.open { display: flex; }
.tmc-mobile-menu a {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  font-weight: 300;
}
.tmc-mobile-menu a[aria-current="page"] { color: var(--amethyst-text); }

/* === HERO === */
.tmc-hero {
  padding: 88px 24px;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  /* Keeps the glow below in its own stacking context; overflow: hidden
     clips it to the hero, so no glow reaches the rest of the page. */
  isolation: isolate;
  background: transparent;
  border-bottom: 1px solid var(--hairline-soft);
  overflow: hidden;
}

/* === HERO GLOW ===
   One soft radial wash behind the wordmark, on Home only, in the frame
   amethyst rather than the text amethyst. Centred above the lockup rather
   than on it. script.js fades it as the hero leaves by writing
   --hero-glow; under prefers-reduced-motion it binds no scroll handler and
   the fallback below holds it at full strength. */
.tmc-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(1200px, 155vw);
  height: min(760px, 98vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(104, 67, 133, 0.18) 0%,
    rgba(104, 67, 133, 0.11) 36%,
    rgba(104, 67, 133, 0.04) 58%,
    rgba(104, 67, 133, 0) 72%);
  opacity: var(--hero-glow, 1);
  pointer-events: none;
  z-index: -1;
  /* A very slow drift, a few pixels and a few percent. Atmosphere, not a
     pulse. The keyframes multiply --hero-glow rather than replacing it, so
     the scroll fade still governs the overall strength. */
  animation: tmcGlowDrift 8s ease-in-out infinite;
}
@keyframes tmcGlowDrift {
  0%, 100% { transform: translate(-50%, -50%);              opacity: var(--hero-glow, 1); }
  50%      { transform: translate(-50%, calc(-50% - 7px));  opacity: calc(var(--hero-glow, 1) * 0.94); }
}
.tmc-brand-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* As wide as the wordmark itself, so the COLLECTIVE rule row below lines
     up with the letters rather than with an arbitrary 820px column. */
  width: max-content;
  max-width: 100%;
  /* It is an h1, so the default heading margin and size are cleared. Every
     visible size comes from .tmc-brand-line and .tmc-brand-sub below. */
  margin: 0 0 56px;
  font-size: inherit;
  font-weight: inherit;
}
.tmc-brand-line {
  font-family: var(--font-display);
  font-weight: 500;
  /* Sized from the gutter rule at every width: the lockup always leaves at
     least 16px of air each side, and the size is whatever that allows. Its
     width is a fixed multiple of the font size, measured rather than
     guessed:

         0.20em tracking -> 11.530x      0.14em -> 10.210x
         0.12em tracking ->  9.770x      0.10em ->  9.330x

     Phones buy size with tracking instead of space: at 0.12em the lockup is
     15% narrower per point of size, so the same 16px gutter pays for much
     larger letters. Each formula divides by a hair more than the measured
     ratio, so rounding can never eat the gutter. No floor on purpose: a
     very narrow phone gets smaller letters, not crowded edges. */
  font-size: calc(10.16vw - 3.25px);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  line-height: 1.05;
  color: var(--amethyst-text);
  display: flex;
  white-space: nowrap;
}

.tmc-brand-line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  animation: brandReveal 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
/* From 768 up the original 0.2em tracking returns and the cap rises to
   118px. The lockup width is continuous across the breakpoint, about 730px
   either side of it; only size and tracking trade places. The cap only
   binds above about 1400px, so 1280 is still sized by the gutter rule. */
@media (min-width: 768px) {
  .tmc-brand-line {
    font-size: min(118px, calc(8.62vw - 2.76px));
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}

@keyframes brandReveal { to { opacity: 1; transform: translateY(0); } }

.tmc-brand-sub-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
  opacity: 0;
  animation: fadeIn 1s ease 1.1s forwards;
}
.tmc-brand-rule { flex: 1; height: 1px; background: var(--grey); }
.tmc-brand-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(10px, 2.1vw, 16px);
  color: var(--amethyst-text);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  white-space: nowrap;
}

.tmc-hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--white-soft);
  /* Tight to LOS ANGELES so the two read as one unit. */
  margin-bottom: 12px;
  opacity: 0;
  animation: fadeIn 1s ease 0.9s forwards;
  max-width: 900px;
  line-height: 1.35;
}
@keyframes fadeIn { to { opacity: 1; } }

/* The line inside the home h1, under COLLECTIVE. It carries the hero-sub
   style and fades in with the sub row. */
.tmc-hero-line { display: block; margin-top: 18px; }

.tmc-hero-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  font-weight: 400;
  opacity: 0;
  animation: fadeIn 1s ease 1.1s forwards;
}

/* Five dish names, the last thing in the hero. Same small amethyst row
   as the service styles on the cards, allowed to wrap on a phone. It is
   the nearest thing to a photograph a text only page has, and it fades in
   last so the lockup and the tagline land first. */
.tmc-hero-dishes {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  font-weight: 400;
  line-height: 2.1;
  /* Wide enough for the five names on one line at 1280; it wraps to
     two or three lines on a phone. */
  max-width: 920px;
  margin-top: 40px;
  opacity: 0;
  animation: fadeIn 1s ease 1.3s forwards;
}

/* === WHY === */
.tmc-why {
  padding: 88px 24px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  background: transparent;
}
.tmc-why-label,
.tmc-section-label,
.tmc-page-eyebrow,
.tmc-wwd-tile-label,
.tmc-block-label,
.tmc-primary-cta-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  font-weight: 400;
}
.tmc-why-label { margin-bottom: 26px; }

.tmc-why-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px);
  color: var(--white);
  margin: 0 0 32px;
  letter-spacing: 0.01em;
  line-height: 1.22;
}
.tmc-why-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  margin: 0 auto 22px;
  max-width: 660px;
}

/* === SECTION HEADER === */
.tmc-section-header {
  padding: 88px 24px 34px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  background: transparent;
}
.tmc-section-label { display: block; margin-bottom: 22px; }
.tmc-section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px);
  color: var(--white);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.22;
}
/* Three items, not a sentence: the gap does the work a comma and an "and"
   used to. Wrapping to two lines on a phone is fine; breaking a word is
   not, so the words stay whole and the spacing is trimmed at the ends. */
.tmc-section-heading.is-list {
  word-spacing: 0.5em;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
@media (max-width: 560px) {
  .tmc-section-heading.is-list { word-spacing: 0.34em; }
}

/* === SERVICES === */
.tmc-services-wrap { background: transparent; padding: 0 24px 88px; }
.tmc-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
}
.tmc-service-block {
  background: transparent;
  border: 1px solid var(--amethyst);
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.tmc-service-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--white);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
  line-height: 1.16;
}
.tmc-service-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  margin: 0 auto 24px;
  max-width: 620px;
  flex: 1 1 auto;
}
.tmc-service-styles {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  margin-bottom: 26px;
  font-weight: 400;
}
/* The description absorbs the slack and the button sits last, so a style
   tag line that wraps cannot push one card's button below its neighbours. */
.tmc-service-menu-link { align-self: center; margin-top: auto; }
.tmc-service-menu-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--amethyst);
  padding: 16px 30px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 400;
}
.tmc-service-menu-link:hover { background: var(--amethyst); }

/* Honeypot. Visually gone but still a real, fillable field for a bot.
   Deliberately not display:none, which some bots skip. */
.tmc-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* === SKIP LINK ===
   The first focusable element in the document. Kept off screen rather than
   display:none so it stays in the tab order, and brought into view the
   moment it takes focus. */
.tmc-skip-link {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--amethyst);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--amethyst);
  transition: top 0.15s ease;
}
.tmc-skip-link:focus {
  top: calc(8px + env(safe-area-inset-top, 0px));
}
/* Elements the script focuses on the visitor's behalf: main, the page h1
   on every route change, and the form success message. None of them is in
   the tab order, so there is no keyboard focus to indicate here, and a box
   drawn around a whole heading or page reads as a rendering fault. Real
   controls keep their :focus-visible outline, defined below. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

/* === BUTTONS ===
   Two kinds only. Primary is filled, secondary is outlined. A secondary
   button never borrows the filled style. */
.tmc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid var(--amethyst);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.tmc-btn-primary {
  background: var(--amethyst);
  color: var(--white);
}
.tmc-btn-secondary {
  background: transparent;
  color: var(--white);
}
@media (hover: hover) {
  .tmc-btn-primary:hover { background: transparent; }
  .tmc-btn-secondary:hover { background: var(--amethyst); }
}
.tmc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* === STICKY ACTION BAR ===
   Mobile only. Hidden until script.js adds is-shown, which it does once
   the hero is behind the visitor and removes again as the footer arrives. */
.tmc-sticky-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  gap: 10px;
  padding: 10px calc(12px + env(safe-area-inset-left, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(12px + env(safe-area-inset-right, 0px));
  background: rgba(12, 10, 13, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  /* Slides up from the bottom edge rather than appearing. Hidden from the
     pointer and the tab order while it is off screen. */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
}
.tmc-sticky-bar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease-out, visibility 0s;
}
.tmc-sticky-bar .tmc-btn {
  flex: 1;
  padding: 14px 10px;
  font-size: 10px;
}
@media (max-width: 768px) {
  .tmc-sticky-bar { display: flex; }
}

/* === PRIMARY CTA BAND === */
.tmc-primary-cta-band {
  padding: 88px 24px;
  text-align: center;
  /* Darkens the ground beneath it rather than naming a colour, so the band
     stays distinguishable wherever it lands on the ramp. */
  background: rgba(0, 0, 0, 0.32);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.tmc-primary-cta-label { display: block; margin-bottom: 24px; }
.tmc-primary-cta-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px);
  color: var(--white);
  margin: 0 auto 36px;
  letter-spacing: 0.01em;
  line-height: 1.22;
  max-width: 780px;
}

/* === WHAT WE DO === */
.tmc-wwd-section {
  background: transparent;
  padding: 88px 24px;
}
.tmc-wwd-header {
  max-width: 880px;
  margin: 0 auto 48px;
  text-align: center;
}
.tmc-wwd-intro {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  max-width: 620px;
  margin: 22px auto 0;
}
.tmc-wwd-grid {
  display: grid;
  /* Two tiles: Pop-ups and Supper Clubs. Vending has its own service card
     above, so a third tile here said it twice. */
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
}
.tmc-wwd-tile {
  background: transparent;
  border: 1px solid var(--amethyst);
  padding: 40px 28px;
  text-align: center;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tmc-wwd-tile-label { display: block; margin-bottom: 18px; }
.tmc-wwd-tile-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--white);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.tmc-wwd-tile-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  flex: 1;
}

/* === TRUST STRIP ===
   Above the footer on every page: the permit, kitchen, insurance and
   manager facts, in the small amethyst label style, one item each. */
.tmc-trust {
  padding: 40px 24px;
  border-top: 1px solid var(--hairline-soft);
  background: transparent;
}
.tmc-trust-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 34px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 768px) {
  .tmc-trust { padding: 32px 20px; }
  .tmc-trust-list { flex-direction: column; gap: 8px; }
}

/* The review form while its handler is not live: a disabled fieldset, and
   one line saying so. The fieldset itself draws nothing. */
.tmc-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tmc-fieldset[disabled] { opacity: 0.55; }
.tmc-form-note {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  text-align: center;
  margin: 0 0 22px;
}
.tmc-form-check { display: flex; align-items: flex-start; gap: 12px; }
.tmc-form-check input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 18px; accent-color: var(--amethyst); }
.tmc-form-check label { margin: 0; text-transform: none; letter-spacing: 0.02em; font-size: 14px; line-height: 1.6; }

/* Menus: the row of service links under the dishes. */
.tmc-service-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* === FOOTER === */
/* The footer is the darkest band, not the lightest. It already was, it
   gives the lowest contrast text on the site its best ground, and after a
   page that has been getting steadily lighter, resolving back to black
   reads as an ending rather than the fade running out. */
.tmc-footer {
  background: var(--ground-0);
  padding: 64px 24px 30px;
  border-top: 1px solid var(--hairline);
}
.tmc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto 40px;
  text-align: left;
}
.tmc-footer-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--amethyst-text);
  margin-bottom: 14px;
  letter-spacing: 0.16em;
}
.tmc-footer-tag {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.8;
  max-width: 280px;
}
.tmc-footer-col h4 {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  margin: 0 0 18px;
  font-weight: 400;
}
.tmc-footer-col a,
.tmc-footer-col div {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--white-soft);
  display: block;
  margin-bottom: 12px;
  cursor: pointer;
  transition: color 0.2s;
  /* An address is one word. It may only break where the markup offers a
     break, which is before the @, never inside a run of letters. */
  overflow-wrap: normal;
  word-break: keep-all;
}
.tmc-footer-col a:hover { color: var(--white); }
.tmc-footer-bottom {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 24px;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--white-dim);
  text-transform: uppercase;
  font-weight: 300;
}

/* === INTERIOR PAGE HERO === */
.tmc-page-hero {
  padding: 96px 24px 88px;
  /* 42, not 60: at 60vh a title and one line sat on a black stage with
     nothing else on it, which read as an empty page. */
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--hairline-soft);
  text-align: center;
  background: transparent;
  /* Own stacking context and clip, so the glow below stays in the hero. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* === INNER HERO GLOW ===
   The Home wash at a little over a third of its strength, 0.07 against
   0.18, centred on the hero. Without it every inner hero was a flat black
   stage, which is what made them read as empty. Same drift as Home. The
   contrast audit composites it under every text style in the hero. */
.tmc-page-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1200px, 155vw);
  height: min(760px, 98vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(104, 67, 133, 0.07) 0%,
    rgba(104, 67, 133, 0.043) 36%,
    rgba(104, 67, 133, 0.016) 58%,
    rgba(104, 67, 133, 0) 72%);
  pointer-events: none;
  z-index: -1;
  animation: tmcGlowDrift 8s ease-in-out infinite;
}
.tmc-page-hero-inner { width: 100%; max-width: 900px; position: relative; }
.tmc-page-eyebrow { display: block; margin-bottom: 18px; }
/* Short rule under the eyebrow, echoing the hairlines on the card lockup. */
.tmc-page-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--amethyst);
  margin: 0 auto 22px;
}
.tmc-page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 76px);
  color: var(--white);
  margin: 0 auto 24px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  max-width: 900px;
}
.tmc-page-intro {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  max-width: 560px;
  margin: 0 auto;
}
.tmc-page-intro a { color: var(--amethyst-text); cursor: pointer; }
/* The service styles row, same style as on the Home cards. */
.tmc-page-styles {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  font-weight: 400;
  margin-top: 26px;
  line-height: 2;
}

/* === BODY / FORM === */
.tmc-body { padding: 52px 24px; max-width: 720px; margin: 0 auto; background: transparent; }

.tmc-form-step {
  background: var(--black-raised);
  border: 1px solid var(--amethyst);
  padding: 36px 30px;
  margin-bottom: 18px;
  text-align: left;
}
.tmc-form-step h3 {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  margin: 0 0 26px;
  font-weight: 400;
}
.tmc-form-field { margin-bottom: 22px; }
.tmc-form-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-soft);
  margin-bottom: 10px;
  font-weight: 400;
}
.tmc-form-field input,
.tmc-form-field select,
.tmc-form-field textarea {
  width: 100%;
  /* A well inside a card: darker than the card, same family. */
  background: #1E1828;
  border: 1px solid var(--hairline);
  color: var(--white);
  padding: 15px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
}
.tmc-form-field input::placeholder,
.tmc-form-field textarea::placeholder { color: var(--white-dim); }
.tmc-form-field input:focus,
.tmc-form-field select:focus,
.tmc-form-field textarea:focus {
  outline: none;
  border-color: var(--amethyst-text);
}
.tmc-form-submit {
  background: var(--amethyst);
  color: var(--white);
  border: 1px solid var(--amethyst);
  padding: 19px 32px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 14px;
  transition: background-color 0.2s;
}
.tmc-form-submit:hover { background: transparent; }
.tmc-form-submit:disabled {
  background: transparent;
  color: var(--white-soft);
  border-color: var(--hairline);
  cursor: default;
}

/* Shown only when a submission fails. */
.tmc-form-status {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white);
  background: rgba(0, 0, 0, 0.32);
  border-left: 2px solid var(--amethyst);
  padding: 16px 18px;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.tmc-form-status a { color: var(--amethyst-text); text-decoration: underline; }

.tmc-form-success {
  background: var(--black-raised);
  border: 1px solid var(--amethyst);
  padding: 46px 30px;
  text-align: center;
}
.tmc-form-success h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.tmc-form-success p {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--white-soft);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* === CONTACT === */
.tmc-contact-block { padding: 88px 24px 0; max-width: 1240px; margin: 0 auto; background: transparent; }
.tmc-contact-grid {
  display: grid;
  /* Two cards, Email and Call or text. Serving is a sentence in the hero
     intro now rather than a card with one word in it. */
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
}
.tmc-contact-card {
  background: var(--black-raised);
  border: 1px solid var(--amethyst);
  padding: 32px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tmc-contact-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  margin-bottom: 14px;
  font-weight: 400;
}
.tmc-contact-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--white);
  margin: 0;
  letter-spacing: 0.03em;
  /* Same rule as the footer: an address is one word, and the only break it
     is offered is the one before the @ in the markup. */
  overflow-wrap: normal;
  word-break: keep-all;
}

/* === BODY SECTIONS ===
   The plain, repeating block used by Weddings, Events, Vending, About and
   Order: a kicker, a heading and either a numbered list or a plain list. */
.tmc-block {
  padding: 88px 24px;
  max-width: 1100px;
  margin: 0 auto;
  background: transparent;
  border-top: 1px solid var(--hairline-soft);
}
.tmc-block-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.tmc-block-label { display: block; margin-bottom: 18px; }
.tmc-block-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--white);
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.tmc-block-intro {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  margin: 18px auto 0;
  max-width: 620px;
}
.tmc-block-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.tmc-block-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tmc-block-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.tmc-block-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tmc-block-item {
  border: 1px solid var(--amethyst);
  padding: 30px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.tmc-block-item-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--white);
  margin: 0 0 12px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.tmc-block-item-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  margin: 0;
}
/* Plain list variant, no frames. */
.tmc-list { max-width: 720px; margin: 0 auto; }
.tmc-list-item {
  border-top: 1px solid var(--hairline-soft);
  padding: 22px 0;
  text-align: center;
}
.tmc-list-item:last-child { border-bottom: 1px solid var(--hairline-soft); }
.tmc-list-item-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--white);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.tmc-list-item-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  margin: 0;
}
.tmc-block-note {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  max-width: 660px;
  margin: 32px auto 0;
  text-align: center;
}
.tmc-block-cta { text-align: center; margin-top: 40px; }

/* === MENU DETAIL === */
.tmc-menu-detail { padding: 88px 24px; max-width: 980px; margin: 0 auto; background: transparent; }
.tmc-menu-section + .tmc-menu-section { margin-top: 72px; }
.tmc-menu-section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--white);
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
}
.tmc-menu-group + .tmc-menu-group { margin-top: 12px; }

/* Vegan and gluten free marks, shown only where the source says so. */
.tmc-menu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 10px;
}
.tmc-menu-tag {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--amethyst-text);
  border: 1px solid var(--amethyst);
  padding: 5px 10px;
}

/* Plain text link out to the Menus page from a service page. */
.tmc-menu-link-row { text-align: center; margin-top: 8px; }
/* The menu leads, the dishes sit under it. Nothing inside a menu is
   larger than the menu's own name. */
.tmc-menu-section-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1.25;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 14px;
  margin: 44px 0 28px;
  text-align: center;
}

/* Two columns of dishes on desktop, one from 768 down. Multi-column so the
   dishes flow continuously rather than sitting in fixed rows. */
.tmc-menu-items {
  column-count: 2;
  column-gap: 32px;
}
.tmc-menu-item {
  margin-bottom: 26px;
  /* Left aligned inside each column on desktop, centred on mobile. The menu
     name and the section heading above stay centred at every width. */
  text-align: left;
  /* A dish never splits across the column break. */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.tmc-menu-item-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.tmc-menu-item-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-soft);
  margin: 0;
}
.tmc-menu-back-card {
  margin: 48px auto 0;
  padding: 32px;
  background: var(--black-raised);
  border: 1px solid var(--amethyst);
  text-align: center;
  max-width: 480px;
}
.tmc-back-link {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
  cursor: pointer;
}
.tmc-back-link:hover { color: var(--white); }


/* ============================================
   MOTION
   Every hidden state here is switched on by a class that script.js adds,
   so with JavaScript off, or under prefers-reduced-motion, nothing is
   hidden and nothing waits. Only opacity and transform animate, so no
   animation can move the layout or delay text being readable.
   ============================================ */

/* === TYPOGRAPHIC MOTION ===
   The site is text only, so motion carries the weight photography usually
   would. House rules for everything below: transform and opacity only
   except where noted, nothing that moves other content, no single
   animation longer than 700ms, each element fires once and never again,
   and the whole system is off under prefers-reduced-motion with every
   element at full opacity.

   script.js writes a per element delay into --d and adds .is-in to the
   group when it enters the viewport. Order inside a section is kicker,
   then heading 60ms later, then body 80ms after the heading. */

/* The initial state lives on .is-pre, which script.js removes to play the
   animation. The finished state is therefore each element's own ordinary
   CSS, not an override that has to win a cascade battle, so "revealed" is
   the same thing as "not marked pre". That makes invisible text structurally
   impossible: a sweep removes any .is-pre left after three seconds. */

/* --- 1. headings, line by line --- */
.tmc-anim-line {
  display: block;
  overflow: hidden;
  /* Descenders would otherwise be clipped by the mask. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.tmc-anim-line > span {
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.85, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.tmc-anim-line.is-pre > span { transform: translateY(110%); }
/* Once the lines have arrived the mask is released, so a later reflow can
   never cut a descender. */
.tmc-anim-line.is-done { overflow: visible; }

/* --- 2. kickers settle --- */
.tmc-anim-kicker {
  transition: opacity 0.5s ease, letter-spacing 0.5s cubic-bezier(0.22, 0.85, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.tmc-anim-kicker.is-pre { opacity: 0; letter-spacing: 0.5em; }

/* --- 3. body copy --- */
.tmc-anim-fade {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.85, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.tmc-anim-fade.is-pre { opacity: 0; transform: translateY(10px); }

/* --- 4. cards: the frame draws itself, then the contents arrive --- */
.tmc-anim-card { position: relative; }
.tmc-anim-card.is-pre { border-color: transparent; }
.tmc-anim-card::before,
.tmc-anim-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 0 solid var(--amethyst);
  clip-path: inset(0 0 0 0);
}
/* top and left, opening from the top left corner */
.tmc-anim-card::before {
  border-top-width: 1px;
  border-left-width: 1px;
  transition: clip-path 0.18s ease-out;
  transition-delay: var(--d, 0ms);
}
/* bottom and right, following from the opposite corner */
.tmc-anim-card::after {
  border-bottom-width: 1px;
  border-right-width: 1px;
  transition: clip-path 0.18s ease-out;
  transition-delay: calc(var(--d, 0ms) + 140ms);
}
.tmc-anim-card.is-pre::before { clip-path: inset(0 100% 100% 0); }
.tmc-anim-card.is-pre::after  { clip-path: inset(100% 0 0 100%); }
/* Contents follow the frame closely. At +500ms the fourth card in a row
   was an empty frame for over a second at phone scroll speed. */
.tmc-anim-card > *:not(.tmc-sheen) {
  transition: opacity 0.4s ease;
  transition-delay: calc(var(--d, 0ms) + 260ms);
}
.tmc-anim-card.is-pre > *:not(.tmc-sheen) { opacity: 0; }

/* The sheen sweeps the border once on hover or focus. A gradient clipped
   to the 1px ring by two masks that cancel each other out everywhere
   except the border itself. */
.tmc-anim-card .tmc-sheen {
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg,
    transparent 38%, var(--amethyst-text) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media (hover: hover) {
  .tmc-anim-card:hover .tmc-sheen { animation: tmcSheen 0.7s ease-out 1; }
}
.tmc-anim-card:focus-within .tmc-sheen { animation: tmcSheen 0.7s ease-out 1; }
@keyframes tmcSheen {
  0%   { opacity: 0;   background-position: 100% 0; }
  15%  { opacity: 0.9; }
  100% { opacity: 0;   background-position: 0 0; }
}

/* --- 5. buttons: the fill wipes in from the left --- */
/* z-index 0 makes the button its own stacking context, so the fill below
   can sit at -1: behind the label and the arrow, in front of the button's
   own background. Lifting the children instead would only raise the
   elements, and a button's label is a bare text node, so the fill painted
   straight over the word and left just the arrow showing. */
.tmc-btn { position: relative; overflow: hidden; z-index: 0; }
.tmc-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amethyst);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease-out;
}
.tmc-btn-primary::before { transform: scaleX(1); }
@media (hover: hover) {
  .tmc-btn-secondary:hover::before { transform: scaleX(1); }
  .tmc-btn-primary:hover::before { transform: scaleX(0); transform-origin: right center; }
}
.tmc-btn-secondary:focus-visible::before { transform: scaleX(1); }
.tmc-btn-primary:focus-visible::before { transform: scaleX(0); transform-origin: right center; }

/* --- 6. menu dishes, in sequence --- */
.tmc-anim-dish {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.85, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.tmc-anim-dish.is-pre { opacity: 0; transform: translateY(8px); }

/* --- 8. route changes --- */
#tmc-main { transition: opacity 0.12s ease; }
#tmc-main.is-leaving { opacity: 0; }
#tmc-main.is-entering > * {
  animation: tmcPageIn 0.42s cubic-bezier(0.22, 0.85, 0.3, 1) both;
}
@keyframes tmcPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* The plain reveal, for anything the classifier does not claim, so nothing
   is ever left out of the system. */
.tmc-reveal {
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--d, 0ms);
}
.tmc-reveal.is-pre { opacity: 0; transform: translateY(16px); }

/* Section hairlines draw in from the left on first reveal. The border is
   replaced by a pseudo element so it can be scaled without reflowing. */
.tmc-block,
.tmc-primary-cta-band { position: relative; }
.tmc-block.tmc-rule,
.tmc-primary-cta-band.tmc-rule { border-top-color: transparent; }
.tmc-block.tmc-rule::before,
.tmc-primary-cta-band.tmc-rule::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline-soft);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s ease;
}
.tmc-block.tmc-rule.is-in::before,
.tmc-primary-cta-band.tmc-rule.is-in::before { transform: scaleX(1); }

/* Cards lift and their frame brightens. :focus-within so tabbing to the
   button inside lifts the card too. */
.tmc-service-block,
.tmc-wwd-tile,
.tmc-block-item,
.tmc-contact-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .tmc-service-block:hover,
  .tmc-wwd-tile:hover,
  .tmc-block-item:hover,
  .tmc-contact-card:hover {
    transform: translateY(-2px);
    border-color: var(--amethyst-text);
  }
}
.tmc-service-block:focus-within,
.tmc-wwd-tile:focus-within,
.tmc-block-item:focus-within,
.tmc-contact-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--amethyst-text);
}
/* Touch: no hover state, a pressed state instead. */
@media (hover: none) {
  .tmc-service-block:active,
  .tmc-wwd-tile:active,
  .tmc-block-item:active,
  .tmc-contact-card:active {
    transform: translateY(1px);
    border-color: var(--amethyst-text);
  }
}

/* Nav and footer links: a hairline that wipes in from the left. */
.tmc-nav-links a,
.tmc-mobile-menu a,
.tmc-footer-col a {
  position: relative;
}
.tmc-nav-links a::after,
.tmc-mobile-menu a::after,
.tmc-footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--amethyst-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}
.tmc-nav-links a:hover::after,
.tmc-nav-links a:focus-visible::after,
.tmc-mobile-menu a:hover::after,
.tmc-mobile-menu a:focus-visible::after,
.tmc-footer-col a:hover::after,
.tmc-footer-col a:focus-visible::after { transform: scaleX(1); }

/* Button arrows nudge right. */
.tmc-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  a:hover > .tmc-arrow { transform: translateX(3px); }
}
a:focus-visible > .tmc-arrow { transform: translateX(3px); }

/* Headings avoid a single word stranded on the last line, and body copy
   avoids a one word last line, where the browser supports it. */
.tmc-hero-tagline,
.tmc-page-title,
.tmc-why-headline,
.tmc-section-heading,
.tmc-block-heading,
.tmc-menu-section-heading,
.tmc-primary-cta-headline,
.tmc-service-title,
.tmc-block-item-title,
.tmc-wwd-tile-title,
.tmc-list-item-title { text-wrap: balance; }
.tmc-page-intro,
.tmc-why-body,
.tmc-service-desc,
.tmc-block-intro,
.tmc-block-item-desc,
.tmc-list-item-desc,
.tmc-wwd-tile-desc,
.tmc-block-note,
.tmc-menu-item-desc { text-wrap: pretty; }

/* === TAP TARGETS ===
   Everything tappable clears 44px. */
.tmc-mobile-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.tmc-nav-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tmc-mobile-menu a { min-height: 44px; display: flex; align-items: center; }
.tmc-footer-col a {
  display: flex;
  align-items: center;
  /* max-content, not fit-content: inside a flex container fit-content was
     resolving short of the text's natural width, which split the address
     over two lines even where the column had room for it. Capped at the
     column so it still wraps, at the @, when it genuinely does not fit. */
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  margin-bottom: 0;
}
/* Not a flex container: a wbr inside one becomes a flex item and stops
   being a break opportunity at all. Padding carries the tap height. */
.tmc-contact-value a { display: inline-block; min-height: 44px; padding: 9px 0; }
.tmc-service-menu-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* === RESPONSIVE === */
@media (max-width: 1180px) {
  .tmc-nav { padding: 16px 22px; }
  .tmc-nav-links { gap: 16px; }
  .tmc-nav-btn { padding: 13px 16px; }
}

@media (max-width: 1024px) {
  .tmc-nav-links { gap: 12px; letter-spacing: 0.14em; }
  .tmc-nav-btn { padding: 13px 14px; letter-spacing: 0.16em; text-indent: 0.16em; }
  .tmc-services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Eight links. Below 900 the row is tightened by gap, tracking and the
   bar's own padding, never by size, so it keeps clear air on both sides
   down to the point where the phone menu takes over. */
@media (max-width: 900px) {
  .tmc-nav { padding: 16px 16px; }
  .tmc-nav-links { gap: 8px; letter-spacing: 0.08em; }
  .tmc-nav-btn { padding: 13px 12px; letter-spacing: 0.12em; text-indent: 0.12em; }
}

@media (max-width: 768px) {
  /* Shorter header padding here, so the fallback shrinks with it. */
  :root { --nav-h: 69px; }

  .tmc-nav { padding: 13px 20px; }
  .tmc-nav-links { display: none; }
  .tmc-mobile-toggle { display: flex; }
  .tmc-nav-btn { display: none; }
  .tmc-nav-cta { display: none; }

  .tmc-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .tmc-footer-bottom { flex-direction: column; gap: 12px; text-align: center; align-items: center; }

  /* Sections sit closer together so the page reads as one flow. */
  /* Symmetric again: the extra 70px at the foot was making room for the
     scroll cue, which no longer exists. The hero is min-height driven, so
     this re-centres the lockup rather than changing the page height. */
  .tmc-hero { padding: 56px 20px; }
  /* 72, not 100: a full screen of dark with 190px of content in it was
     580px of nothing before the page began. The first section now starts
     at the fold. */
  .tmc-hero {
    min-height: calc(72vh - var(--nav-h));
    min-height: calc(72svh - var(--nav-h));
  }
  .tmc-brand-stack { margin-bottom: 40px; }
  /* One vertical rhythm on phones: 44px at the top and foot of a band,
     20px where a band leads straight into the next one. */
  .tmc-why { padding: 44px 20px; }
  .tmc-section-header { padding: 44px 20px 20px; }
  .tmc-services-wrap { padding: 0 20px 44px; }
  .tmc-services-grid { grid-template-columns: 1fr; gap: 14px; }
  .tmc-cta-actions { flex-direction: column; align-items: stretch; }
  .tmc-cta-actions .tmc-btn { width: 100%; }
  .tmc-wwd-section { padding: 44px 20px; }
  .tmc-wwd-grid { grid-template-columns: 1fr; gap: 14px; }
  /* The closing band's foot plus the footer's head used to leave a 112px
     empty run above the footer. 40 + 36 is enough to separate them. */
  .tmc-primary-cta-band { padding: 44px 20px 40px; }
  .tmc-block { padding: 44px 20px; }
  .tmc-menu-detail { padding: 44px 20px; }
  .tmc-menu-items { column-count: 1; }
  .tmc-menu-item { text-align: center; }
  .tmc-menu-tags { justify-content: center; }
  .tmc-menu-section-title { font-size: 20px; margin: 36px 0 24px; }
  .tmc-menu-section + .tmc-menu-section { margin-top: 44px; }
  .tmc-contact-block { padding: 44px 20px 0; }
  .tmc-body { padding: 40px 20px; }

  /* One column, one padding value for every card and tile. */
  .tmc-service-block,
  .tmc-wwd-tile,
  .tmc-block-item,
  .tmc-contact-card,
  .tmc-form-step,
  .tmc-menu-back-card { padding: 28px 22px; }
  .tmc-wwd-tile { min-height: 0; }
  .tmc-block-grid,
  .tmc-block-grid.cols-5,
  .tmc-block-grid.cols-3,
  .tmc-block-grid.cols-2 { grid-template-columns: 1fr; gap: 14px; }
  .tmc-contact-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Body copy at 16px and a roomier line height. */
  .tmc-page-intro,
  .tmc-why-body,
  .tmc-service-desc,
  .tmc-block-intro,
  .tmc-block-item-desc,
  .tmc-list-item-desc,
  .tmc-wwd-tile-desc,
  .tmc-wwd-intro,
  .tmc-block-note,
  .tmc-menu-item-desc,
  .tmc-contact-value,
  .tmc-footer-tag { font-size: 16px; line-height: 1.6; }
  /* Stays below the 20px menu name above it. */
  .tmc-menu-item-name { font-size: 17px; }
  .tmc-footer-col a { font-size: 16px; }

  /* A form control under 16px makes iOS zoom the page when it takes focus,
     which then leaves the visitor scrolled sideways. 16px prevents it. */
  .tmc-form-field input,
  .tmc-form-field select,
  .tmc-form-field textarea { font-size: 16px; }

  /* Headings come down a step and keep their balance. */
  .tmc-page-hero { min-height: 30vh; padding: 56px 20px 48px; }
  /* Contact leads with a form, so its heading gets room to breathe. */
  .tmc-page-hero-contact { min-height: 48vh; }
  .tmc-page-title { font-size: clamp(28px, 8vw, 40px); }
  .tmc-why-headline,
  .tmc-section-heading,
  .tmc-block-heading,
  .tmc-menu-section-heading,
  .tmc-primary-cta-headline { font-size: clamp(25px, 6.6vw, 34px); }
  .tmc-service-title { font-size: 26px; }
}

@media (max-width: 900px) {
  .tmc-block-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* Tighter rhythm, still two columns. Stacking starts at 400, below. */
  .tmc-footer { padding: 36px 24px 22px; }
  .tmc-footer-grid { gap: 22px; margin-bottom: 24px; }
  .tmc-footer-col h4 { margin-bottom: 10px; }
  /* The link fills the column here rather than shrinking to its text. As a
     shrink to fit flex container it was resolving narrower than the address
     needs, which split it over two lines even with room to spare. Full
     width gives the text the whole column, so it stays on one line and the
     break before the @ is only used when it is genuinely needed. */
  .tmc-footer-col a {
    /* Block, not flex. As a flex container the wbr became a flex item, so
       it could not act as a break opportunity at all and a long address
       would have overflowed instead of wrapping. As a block the text flows
       normally, the wbr is a real break point, and the padding carries the
       44px tap height. */
    display: block;
    width: auto;
    max-width: 100%;
    padding: 9px 0;
    min-height: 44px;
  }
  .tmc-footer-bottom { padding-top: 18px; }

  .tmc-block-grid,
  .tmc-block-grid.cols-5,
  .tmc-block-grid.cols-3,
  .tmc-block-grid.cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .tmc-contact-grid { grid-template-columns: 1fr; }
}

/* One column only where two genuinely stop fitting. Stacking at 560 made
   the page taller at 430, which is the opposite of the point. */
@media (max-width: 400px) {
  .tmc-footer-grid { grid-template-columns: 1fr; }
}

/* Everything that moves is decoration. Switch it all off and show the
   finished state when the visitor has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .tmc-brand-line span { opacity: 1 !important; transform: none !important; }
  .tmc-brand-sub-row,
  .tmc-hero-tagline,
  .tmc-hero-sub,
  .tmc-hero-dishes { opacity: 1 !important; }

  /* script.js already skips the whole motion system here, so these are
     belt and braces for a preference that changes after the page has
     rendered. Everything ends visible, at full opacity, in place. */
  /* script.js never marks anything .is-pre here, so every element is
     already at its natural style. These only stop the decorative layers
     and make doubly sure nothing is left part way. */
  .is-pre {
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: revert !important;
    border-color: revert !important;
  }
  .tmc-reveal,
  .tmc-anim-fade,
  .tmc-anim-dish,
  .tmc-anim-kicker,
  .tmc-anim-card > *,
  .tmc-anim-line > span {
    transition: none !important;
    animation: none !important;
  }
  .tmc-anim-line { overflow: visible !important; }
  .tmc-anim-card::before,
  .tmc-anim-card::after,
  .tmc-anim-card .tmc-sheen { display: none !important; }
  .tmc-btn::before { transition: none !important; }
  .tmc-hero::before,
  .tmc-page-hero::before { animation: none !important; }
  #tmc-main,
  #tmc-main.is-entering > * { animation: none !important; transition: none !important; opacity: 1 !important; }
  .tmc-block.tmc-rule,
  .tmc-primary-cta-band.tmc-rule { border-top-color: var(--hairline-soft); }
  .tmc-block.tmc-rule::before,
  .tmc-primary-cta-band.tmc-rule::before { transform: scaleX(1) !important; }
  .tmc-service-block:hover,
  .tmc-wwd-tile:hover,
  .tmc-block-item:hover,
  .tmc-contact-card:hover { transform: none !important; }
  .tmc-arrow { transform: none !important; }
  .tmc-sticky-bar { transition: none !important; }
  .tmc-skip-link { transition: none !important; }
  .tmc-nav-links a::after,
  .tmc-mobile-menu a::after,
  .tmc-footer-col a::after { transition: none !important; }
}

/* === PRINT ===
   Aimed at the Menus page, which gets printed for clients and crew, but safe
   on every route. Black on white, no chrome, nothing that only makes sense
   on a screen, and no dish broken across a page. */
@media print {
  /* The dark ground would empty a toner cartridge and many browsers drop
     background colours anyway, so commit to paper properly. */
  :root {
    --black: #FFFFFF;
    --black-deep: #FFFFFF;
    --black-raised: #FFFFFF;
    --white: #000000;
    --white-soft: #000000;
    --white-dim: #1a1a1a;
    --amethyst: #000000;
    --amethyst-text: #000000;
    --grey: #444444;
    --hairline: rgba(0, 0, 0, 0.35);
    --hairline-soft: rgba(0, 0, 0, 0.18);
  }

  /* The ground progression is a gradient on .tmc plus translucent washes
     on some bands. On paper none of it applies: kill the gradient, then
     clear every background inside main so no wash tints the page. The tag
     outlines below are borders, so they survive this. */
  html, body, .tmc { background: #FFFFFF !important; color: #000000 !important; }
  .tmc { background-image: none !important; }
  .tmc::before,
  .tmc-hero::before,
  .tmc-page-hero::before { display: none !important; }
  /* No motion layer survives to paper. */
  .tmc-anim-card::before,
  .tmc-anim-card::after,
  .tmc-anim-card .tmc-sheen,
  .tmc-btn::before { display: none !important; }
  .tmc-anim-line { overflow: visible !important; }
  .is-pre {
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: revert !important;
    border-color: revert !important;
  }
  #tmc-main, #tmc-main * { background-color: transparent !important; }

  /* Everything that is navigation, an action or decoration. A printed page
     cannot be tapped, so none of it earns its ink. */
  .tmc-nav,
  .tmc-mobile-menu,
  .tmc-mobile-toggle,
  .tmc-skip-link,
  .tmc-sticky-bar,
  .tmc-footer,
  .tmc-primary-cta-band,
  .tmc-block-cta,
  .tmc-cta-actions,
  .tmc-arrow,
  .tmc-btn { display: none !important; }

  /* The page hero keeps its title and drops the full-height staging. */
  .tmc-page-hero {
    min-height: 0 !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #000000;
  }
  .tmc-page-hero-inner { max-width: none; }
  .tmc-page-title { font-size: 28pt !important; margin: 0 0 6px; }
  .tmc-page-eyebrow { color: #000000 !important; }
  .tmc-page-intro { font-size: 11pt !important; color: #000000 !important; }

  /* Reveal animations never ran or are irrelevant on paper; make sure
     nothing prints at opacity 0. */
  .tmc-reveal,
  .tmc-brand-line span,
  .tmc-brand-sub-row,
  .tmc-hero-tagline,
  .tmc-hero-sub,
  .tmc-hero-dishes {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .tmc-block.tmc-rule::before,
  .tmc-primary-cta-band.tmc-rule::before { transform: scaleX(1) !important; }

  /* --- the menu itself --- */
  .tmc-menu-detail { padding: 0 !important; }

  .tmc-menu-section { break-inside: auto; }
  .tmc-menu-section-title {
    font-size: 15pt !important;
    margin: 18pt 0 8pt !important;
    /* A heading never sits alone at the foot of a page. */
    break-after: avoid;
    page-break-after: avoid;
  }
  .tmc-menu-section-heading {
    font-size: 12pt !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Single column on paper, so the dishes stay in the order they are read
     on screen rather than snaking down one column and back up another. */
  .tmc-menu-items { column-count: 1 !important; }

  .tmc-menu-item {
    /* No dish is ever cut across a page. */
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 10pt !important;
    text-align: left !important;
  }
  .tmc-menu-item-name { font-size: 11pt !important; }
  .tmc-menu-item-desc { font-size: 9.5pt !important; color: #1a1a1a !important; }

  /* Vegan and gluten free have to survive the trip to paper, so they are
     outlined rather than relying on a background that may not print. */
  .tmc-menu-tags { justify-content: flex-start !important; }
  .tmc-menu-tag {
    color: #000000 !important;
    border: 1px solid #000000 !important;
    background: transparent !important;
    font-size: 7.5pt !important;
  }

  /* Links print as plain text. A bare URL after every nav link is noise. */
  a { text-decoration: none !important; color: #000000 !important; }

  @page { margin: 14mm; }
}