/* city-pages.css — scoped to the two location pages (main.cty). Reuses the site's own fonts (Matroska display caps,
   Grift body), colours (#020202 ground, white, #282828 ghost, #cacaca / #9c9c9c greys), outlined white buttons, bordered
   dark cards and the whiteConcrete texture. Nothing here touches any other page. */
.cty { --ink: #020202; --paper: #fafafa; --card: #ffffff0f; --grey: #cacaca; --ghost: #282828; --dark: #1d1d1d;
  font-family: Grift, "Palatino Linotype", sans-serif; color: #fff; background: var(--ink); }
.cty *, .cty *::before, .cty *::after { box-sizing: border-box; }
.cty img { display: block; max-width: 100%; height: auto; }
.cty a { color: inherit; }
:where(.cty) p { margin: 0; }
.cty-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; }
.cty-sec { position: relative; padding: 96px 0; overflow: hidden; }
.cty-sec--flush { padding: 0; }
.cty-concrete { background: url("../images/whiteConcrete.png") center / cover; background-image: image-set(url("../images/whiteConcrete.avif") type("image/avif"), url("../images/whiteConcrete.webp") type("image/webp"), url("../images/whiteConcrete.png") type("image/png")); color: var(--dark); }
.cty-concrete .cty-ghost { color: rgba(0, 0, 0, .06); }
.cty-concrete .cty-grey, .cty-concrete .cty-small { color: #4a4a4a; }

/* type */
.cty-h2 { font-family: Matroska, Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.08; margin: 0; color: inherit; position: relative; z-index: 1; }
.cty-h3 { font-family: Grift, "Palatino Linotype", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.25; margin: 0; color: inherit; }
.cty-eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.cty-eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; flex: none; }
.cty-body { font-size: 17px; line-height: 1.65; }
.cty-grey { color: var(--grey); }
.cty-small { font-size: 14px; line-height: 1.5; color: var(--grey); }
.cty-ghost::before { content: attr(data-ghost); }
.cty-ghost { position: absolute; left: 0; top: -.12em; max-width: 100%; overflow: hidden; font-family: Matroska, Impact, sans-serif; text-transform: uppercase; white-space: nowrap; font-size: clamp(44px, 8vw, 112px); line-height: 1; color: var(--ghost); pointer-events: none; user-select: none; z-index: 0; }
.cty-head { position: relative; margin-bottom: 44px; min-height: 1.1em; padding-top: clamp(26px, 5vw, 70px); }

/* buttons: the site's outlined white button, plus light-ground and inverted variants */
.cty .primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 16px 28px; text-decoration: none; text-align: center; letter-spacing: .04em; }
.cty-btnrow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cty .cty-btn-ghost { background: transparent; }
.cty-concrete .primary-button { color: var(--dark); border-color: var(--dark); background: rgba(255, 255, 255, .55); }
.cty .cty-invert .primary-button { background: var(--ink); color: #fff; border-color: var(--ink); }
.cty a:focus-visible, .cty summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cty-concrete a:focus-visible, .cty-concrete summary:focus-visible, .cty .cty-invert a:focus-visible { outline-color: var(--dark); }
.cty-link { font-weight: 700; text-underline-offset: 4px; }

/* hero (Johns Creek: full-bleed photo) */
.cty-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(90vh, 840px); display: flex; align-items: flex-end; padding: 150px 0 72px; }
.cty-hero__img, .cty-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cty-hero::after, .cty-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 2, 2, .62) 0%, rgba(2, 2, 2, .78) 55%, #020202 100%); }
.cty-hero .cty-ghost { top: 96px; opacity: .55; }
.cty-hero__copy { max-width: 780px; position: relative; z-index: 1; }
.cty-h1 { font-family: Matroska, Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 4.2vw, 54px); line-height: 1.08; margin: 0 0 22px; color: #fff; }
.cty-lede { font-size: 18px; line-height: 1.65; max-width: 680px; }

/* proof strip */
.cty-proof { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.cty-proof > * { padding: 30px 20px; text-align: center; text-decoration: none; }
.cty-proof > * + * { border-left: 1px solid #ffffff55; }
.cty-proof__n { display: block; font-family: Matroska, Impact, sans-serif; font-size: clamp(34px, 4.4vw, 56px); line-height: 1; }
.cty-proof__l { display: block; margin-top: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
a.cty-proof__tile:hover .cty-proof__l { color: #fff; text-decoration: underline; }

/* cards */
.cty-grid { display: grid; gap: 24px; }
.cty-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cty-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cty-card { background: var(--card); border: 1px solid #fff; border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.cty-card .cty-body { color: #f1f1f1; }
.cty-card__icon { width: 56px; height: 56px; object-fit: contain; }
.cty-card__icon--svg { width: 56px; height: 56px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cty-card.cty-invert { background: #fff; color: var(--ink); border-color: #fff; }
.cty-card.cty-invert .cty-body { color: #1d1d1d; }
.cty-card.cty-invert .primary-button { margin-top: auto; }
.cty-session { gap: 10px; justify-content: space-between; min-height: 150px; }
.cty-session .cty-h3 { font-family: Matroska, Impact, sans-serif; font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); text-transform: uppercase; line-height: 1.1; }
.cty-session__len { display: flex; align-items: center; gap: 10px; color: var(--grey); font-size: 15px; }
.cty-session__len img { width: 22px; height: 22px; }

/* getting here (Johns Creek) */
.cty-dir { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
.cty-map { border: 1px solid var(--dark); border-radius: 4px; overflow: hidden; background: #e8e8e8; }
.cty-map iframe { display: block; width: 100%; height: 440px; border: 0; }
.cty-timeline { list-style: none; margin: 26px 0 22px; padding: 0 0 0 30px; position: relative; }
.cty-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--dark); }
.cty-timeline li { position: relative; padding: 0 0 22px; font-size: 17px; line-height: 1.5; }
.cty-timeline li::before { content: ""; position: absolute; left: -30px; top: 5px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--dark); background: #fff; }
.cty-timeline li:last-child { padding-bottom: 0; }

/* coaches grid (Johns Creek) */
.cty-coaches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cty-coach { margin: 0; }
.cty-coach img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid #fff; border-radius: 4px; }
.cty-coach figcaption { padding: 14px 2px 0; text-align: left; }
.cty-role { color: var(--grey); font-size: 15px; margin-top: 4px; }

/* star testimonial cards (Johns Creek) */
.cty-stars { display: flex; gap: 6px; }
.cty-stars img { width: 22px; height: 22px; }
.cty-quote { margin: 0; background: var(--card); border: 1px solid #fff; border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.cty-quote p { font-size: 17px; line-height: 1.6; }
.cty-quote cite { font-style: normal; font-weight: 700; color: var(--grey); }

/* faq accordion */
.cty-faq { border-top: 1px solid currentColor; max-width: 900px; }
.cty-faq details { border-bottom: 1px solid currentColor; }
.cty-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 4px; min-height: 64px; }
.cty-faq summary::-webkit-details-marker { display: none; }
.cty-faq summary::after { content: "+"; font-family: Matroska, Impact, sans-serif; font-size: 26px; line-height: 1; flex: none; }
.cty-faq details[open] summary::after { content: "\2212"; }
.cty-faq summary .cty-h3 { font-size: 18px; }
.cty-faq details > p { padding: 0 4px 24px; font-size: 17px; line-height: 1.65; max-width: 760px; }

/* closing */
.cty-close { text-align: center; }
.cty-close .cty-h2 { margin-bottom: 26px; }
.cty-close .cty-btnrow { justify-content: center; }
.cty-close .cty-lede { margin: 0 auto 8px; }
.cty-band { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0; }

/* ---------- Cumming ---------- */
.cty-split { position: relative; overflow: hidden; padding: 192px 0 150px; }
.cty-split .cty-ghost { top: auto; bottom: -.3em; font-size: clamp(56px, 13vw, 190px); }
.cty-split__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.cty-split__photo { position: relative; }
.cty-split__photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid #fff; border-radius: 4px; z-index: 0; }
.cty-split__photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.cty-define .cty-h2 { font-family: Grift, "Palatino Linotype", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .16em; margin-bottom: 26px; }
.cty-statement { font-family: Grift, "Palatino Linotype", sans-serif; font-weight: 700; font-size: clamp(26px, 3.9vw, 50px); line-height: 1.16; max-width: 1000px; }
.cty-rows { border-top: 1px solid #fff; }
.cty-row { display: grid; grid-template-columns: 110px 1fr 1.3fr; gap: 28px; padding: 34px 0; border-bottom: 1px solid #fff; align-items: baseline; }
.cty-row__n { font-family: Matroska, Impact, sans-serif; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: #9c9c9c; }
.cty-route { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: stretch; }
.cty-sign { border: 4px solid #fff; border-radius: 14px; padding: 8px; background: var(--ink); }
.cty-sign__in { border: 1px solid #fff; border-radius: 8px; padding: 28px 26px; display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.cty-sign__top { font-family: Matroska, Impact, sans-serif; text-transform: uppercase; font-size: clamp(18px, 2.2vw, 26px); }
.cty-sign__exit { font-family: Matroska, Impact, sans-serif; text-transform: uppercase; font-size: clamp(34px, 4.2vw, 60px); line-height: 1; margin: 6px 0; white-space: nowrap; }
.cty-sign__road { font-weight: 700; font-size: 20px; }
.cty-map--dark { border: 1px solid #fff; border-radius: 4px; overflow: hidden; background: #111; }
.cty-map--dark iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
.cty-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.cty-tile { border: 1px solid #fff; border-radius: 4px; padding: 24px; background: var(--card); }
.cty-tile__n { font-family: Matroska, Impact, sans-serif; font-size: clamp(30px, 3.6vw, 46px); line-height: 1; }
.cty-tile__from { margin-top: 12px; font-weight: 700; }
.cty-tile__d { margin-top: 4px; color: var(--grey); font-size: 15px; }
.cty-hours { border: 1px solid #fff; border-radius: 4px; padding: 44px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; background: var(--card); }
.cty-hours__line { font-size: 19px; line-height: 1.5; margin-top: 16px; }
.cty-cols4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.cty-cols4 > div { padding: 30px 22px 30px 0; }
.cty-cols4 > div + div { padding-left: 22px; border-left: 1px solid #ffffff55; }
.cty-cols4 .cty-h3 { font-family: Matroska, Impact, sans-serif; font-weight: 400; font-size: clamp(18px, 1.9vw, 24px); text-transform: uppercase; line-height: 1.15; }
.cty-cols4 p { margin-top: 10px; color: var(--grey); }
.cty-studio { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.cty-studio img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid #fff; border-radius: 4px; }
.cty-pull { margin: 0 0 44px; max-width: 920px; }
.cty-pull p { font-weight: 700; font-size: clamp(22px, 3vw, 36px); line-height: 1.25; }
.cty-pull cite { display: block; margin-top: 16px; font-style: normal; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #4a4a4a; }
.cty-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #fff; }
.cty-cols3 > div { padding: 30px 28px 30px 0; }
.cty-cols3 > div + div { padding-left: 28px; border-left: 1px solid #ffffff55; }
.cty-cols3 p { margin-top: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .cty-sec { padding: 72px 0; }
  .cty-grid--3, .cty-coaches { grid-template-columns: repeat(2, 1fr); }
  .cty-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cty-dir, .cty-route, .cty-studio, .cty-hours { grid-template-columns: 1fr; }
  .cty-split__grid { grid-template-columns: 1fr; gap: 44px; }
  .cty-split__photo { max-width: 460px; margin: 0 22px 22px 0; }
  .cty-proof { grid-template-columns: repeat(2, 1fr); }
  .cty-proof > *:nth-child(3) { border-left: 0; }
  .cty-proof > *:nth-child(n+3) { border-top: 1px solid #ffffff55; }
  .cty-row { grid-template-columns: 70px 1fr; }
  .cty-row .cty-body { grid-column: 2; }
  .cty-cols4 { grid-template-columns: repeat(2, 1fr); }
  .cty-cols4 > div, .cty-cols4 > div + div { padding: 24px 18px; border-left: 0; }
  .cty-cols4 > div:nth-child(even) { border-left: 1px solid #ffffff55; }
  .cty-cols4 > div:nth-child(n+3) { border-top: 1px solid #ffffff55; }
  .cty-cols3 { grid-template-columns: 1fr; }
  .cty-cols3 > div, .cty-cols3 > div + div { padding: 24px 0; border-left: 0; border-bottom: 1px solid #ffffff55; }
  .cty-tiles { grid-template-columns: 1fr; }
  .cty-hours { padding: 30px 24px; }
}
@media (max-width: 600px) {
  .cty-wrap { padding: 0 16px; }
  .cty-hero { padding: 162px 0 52px; min-height: 0; }
  .cty-split { padding: 162px 0 56px; }
  .cty-grid--3, .cty-grid--4 { grid-template-columns: 1fr; }
  .cty-cols4 { grid-template-columns: 1fr; }
  .cty-cols4 > div, .cty-cols4 > div + div, .cty-cols4 > div:nth-child(even) { border-left: 0; padding: 22px 0; }
  .cty-cols4 > div + div { border-top: 1px solid #ffffff55; }
  .cty-coaches { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cty-card, .cty-quote { padding: 24px; }
  .cty-map iframe { height: 320px; }
  .cty-lede, .cty-body { font-size: 16px; }
  .cty-band { padding: 84px 0; }
  .cty-btnrow .primary-button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { .cty-faq summary::after { transition: transform .2s ease; } }

/* map: placeholder until the visitor scrolls near it (the iframe is then created by a tiny inline script) */
.cty-map__ph { min-height: 340px; padding: 32px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; background: #ececec; color: var(--dark); }
.cty-map--dark .cty-map__ph { background: #111; color: #fff; }
.cty-map--dark .cty-map__ph .cty-small { color: var(--grey); }
.cty-map.is-live .cty-map__ph, .cty-map--dark.is-live .cty-map__ph { display: none; }
.cty-concrete .cty-map__ph .primary-button { background: #fff; }