/* ==========================================================================
   JOHN CHALMERS PERSONAL TRAINING — styles.css
   --------------------------------------------------------------------------
   CONTENTS
   1.  Design tokens (colours, fonts, spacing) — edit these first
   2.  Reset & base
   3.  Shared utilities (container, buttons, section layout, placeholders)
   4.  Header & navigation
   5.  Hero
   6.  Marquee ticker
   7.  About
   8.  Gym gallery
   9.  Services
   10. Pricing
   11. Location
   12. Testimonials
   13. Final CTA
   14. Contact form
   15. Footer
   16. Reveal animations
   17. Responsive breakpoints
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS — change the accent colour here to re-theme the site
   ========================================================================== */
:root {
  /* Colours — brand palette:
     grey #575756 · highlight #47B9AC · lighter grey #D6DCDD
     (darker shades below are tints of the brand grey, used where
     white or highlight text needs enough contrast to stay readable) */
  --ink: #2c2c2b;            /* deep shade of brand grey — nav, hero, headings */
  --charcoal: #373736;       /* dark section background */
  --charcoal-2: #454544;     /* cards on dark sections */
  --paper: #d6dcdd;          /* brand lighter grey — light section background */
  --white: #f5f7f7;          /* near-white surfaces */
  --accent: #47b9ac;         /* brand highlight — the one bold accent */
  --accent-ink: #10312d;     /* text colour used on accent backgrounds */
  --grey: #575756;           /* brand grey — muted body text on light */
  --grey-light: #b9c0c1;     /* muted body text on dark */
  --line-light: rgba(87, 87, 86, 0.3);
  --line-dark: rgba(214, 220, 221, 0.18);

  /* Typography */
  --font-display: "Big Shoulders Display", Impact, sans-serif;
  --font-body: "Archivo", Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --section-pad: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 2px;             /* deliberately sharp, industrial corners */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Keeps anchored sections clear of the fixed header */
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  list-style: none;
}

em {
  font-style: normal; /* <em> is used for visual emphasis in headings */
}

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

/* Film-grain overlay for texture across the whole page */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. SHARED UTILITIES
   ========================================================================== */
.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2.2rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), color 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  box-shadow: 0 10px 30px rgba(71, 185, 172, 0.35);
}

.btn--ghost {
  border-color: currentColor;
  color: var(--white);
  background: transparent;
}

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

.btn--dark {
  background: var(--ink);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px rgba(71, 185, 172, 0.4);
}

.btn--lg {
  font-size: 1.35rem;
  padding: 1.1rem 3rem;
}

.btn--block {
  display: block;
  text-align: center;
  width: 100%;
}

/* ---- Sections ---- */
.section {
  position: relative;
  padding-block: var(--section-pad);
  overflow: hidden;
}

.section--light {
  background: var(--paper);
  color: var(--ink);
}

.section--dark {
  background: var(--charcoal);
  color: var(--white);
}

.section__head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.section__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.35em;
  color: var(--accent);
  background: var(--ink);
  padding: 0.25rem 0.8rem;
  display: inline-block;
  margin-bottom: 1rem;
}

.section--dark .section__number {
  background: var(--accent);
  color: var(--accent-ink);
}

.section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.section__intro {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--grey);
}

.section--dark .section__intro {
  color: var(--grey-light);
}

/* Giant solid background word behind each section (decorative).
   Dark grey fill on light sections; lighter grey on dark sections. */
.bg-word {
  position: absolute;
  top: 0.5rem;
  right: -1rem;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
  user-select: none;
  pointer-events: none;
}

.bg-word--dark {
  color: var(--paper);
}

/* Keep section content layered above the background word */
.section .container {
  position: relative;
  z-index: 1;
}

/* ---- Image placeholders ----
   Replace any .img-placeholder with a real <img> when photos are ready. */
.img-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(71, 185, 172, 0.08), transparent 55%),
    repeating-linear-gradient(
      -45deg,
      var(--charcoal-2) 0 14px,
      #3d3d3c 14px 28px
    );
  border: 1px solid var(--line-dark);
}

.img-placeholder__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-light);
  border: 1px dashed var(--grey-light);
  padding: 0.5rem 1rem;
  text-align: center;
}

/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background 0.35s var(--ease), padding 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}

/* .is-scrolled is toggled by script.js once the page scrolls */
.site-header.is-scrolled {
  background: rgba(44, 44, 43, 0.92);
  backdrop-filter: blur(10px);
  padding-block: 0.7rem;
  box-shadow: 0 1px 0 var(--line-dark);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--white);
  z-index: 102;
}

/* ---- JC logo (inline SVG monogram + wordmark) ----
   Swap the <svg> for <img src="images/logo.png" class="logo-mark">
   when the real logo file is added. */
.logo-mark {
  height: 2.75rem;
  width: auto;
  flex-shrink: 0;
}

/* Teal C — drawn as a thick circle stroke with a gap on the right */
.logo-mark__c {
  fill: none;
  stroke: var(--accent);
  stroke-width: 20;
  stroke-dasharray: 178 36;
  stroke-dashoffset: -18;
}

/* Outline under the J, in the background colour, so the J separates
   cleanly from the C — matches the dark header/footer backgrounds */
.logo-mark__gap {
  fill: none;
  stroke: var(--ink);
  stroke-width: 24;
}

/* Grey J (light grey so it stays visible on dark backgrounds) */
.logo-mark__j {
  fill: none;
  stroke: var(--grey-light);
  stroke-width: 13;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text__name {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0;
}

.logo-text__name strong {
  color: var(--accent);
  font-weight: 700;
}

.logo-text__sub {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--grey-light);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  position: relative;
  padding-block: 0.25rem;
}

/* Animated underline on hover / active section */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link--cta {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.45rem 1.2rem;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.nav__link--cta::after {
  display: none;
}

.nav__link--cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(71, 185, 172, 0.35);
}

/* Burger button (mobile only) */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 102;
  padding: 6px;
}

.nav__toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Burger → X animation when menu is open */
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

/* Darken the hero photo so headline text stays readable */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(44, 44, 43, 0.94) 0%,
    rgba(44, 44, 43, 0.75) 55%,
    rgba(44, 44, 43, 0.45) 100%
  );
}

.hero__bg .img-placeholder,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: 8rem 6rem;
}

.hero__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero__kicker::before {
  content: "";
  width: 3rem;
  height: 2px;
  background: var(--accent);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.2rem, 10vw, 7.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 14ch;
}

.hero__line {
  display: block;
}

/* Outlined word inside the headline */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
}

.hero__sub {
  max-width: 46ch;
  margin-top: 2rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Scroll indicator, bottom-right of hero */
.hero__scroll {
  position: absolute;
  right: 2.5rem;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--grey-light);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 2px;
  height: 4.5rem;
  background: var(--line-dark);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: scrollPulse 2s var(--ease) infinite;
}

@keyframes scrollPulse {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ==========================================================================
   6. MARQUEE TICKER
   ========================================================================== */
.ticker {
  background: var(--accent);
  color: var(--accent-ink);
  overflow: hidden;
  padding-block: 0.9rem;
  border-block: 2px solid var(--ink);
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: ticker 22s linear infinite;
}

.ticker__dot {
  font-size: 0.6rem;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* track content is duplicated, so -50% loops seamlessly */
}

/* ==========================================================================
   7. ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.about__media {
  position: relative;
  aspect-ratio: 4 / 5;
}

.about__media .img-placeholder,
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Volt "years coaching" badge overlapping the portrait */
.about__badge {
  position: absolute;
  right: -1.25rem;
  bottom: 2rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.about__badge-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
}

.about__badge-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.3;
}

.about__copy .lead {
  font-size: 1.3rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.about__copy p + p {
  margin-top: 1.1rem;
  color: var(--grey);
}

.about__values {
  margin: 1.75rem 0 2.25rem;
  display: grid;
  gap: 0.6rem;
  font-weight: 600;
}

.about__values .accent {
  /* On the light background, use ink for the dash so it stays readable;
     the accent colour is reserved for dark backgrounds */
  color: var(--ink);
  font-weight: 700;
  margin-right: 0.5rem;
}

/* John's motto, quoted in the About section */
.about__quote {
  margin: 0 0 2.25rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--grey);
}

/* ==========================================================================
   8. GYM GALLERY
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.gallery__item {
  position: relative;
  overflow: hidden;
}

.gallery__item--wide {
  grid-column: span 2;
}

.gallery__media {
  aspect-ratio: 16 / 10;
  transition: transform 0.6s var(--ease);
}

.gallery__item:hover .gallery__media {
  transform: scale(1.04);
}

.gallery__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
}

/* ==========================================================================
   9. SERVICES
   ========================================================================== */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--line-light);
  padding: 2.25rem 1.9rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--accent), 8px 8px 0 1px var(--ink);
}

.service-card__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.service-card__icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}

.service-card p {
  color: var(--grey);
  font-size: 0.98rem;
}

/* ==========================================================================
   10. PRICING
   ========================================================================== */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--charcoal-2);
  border: 1px solid var(--line-dark);
  padding: 2.5rem 2rem;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}

.price-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Featured (middle) package */
.price-card--featured {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--accent);
}

.price-card__tag {
  position: absolute;
  top: -1px;
  right: 1.5rem;
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
}

.price-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.price-card__price {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--grey-light);
}

.price-card--featured .price-card__price {
  color: var(--grey);
}

.price-card__amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent);
  margin-right: 0.35rem;
}

.price-card--featured .price-card__amount {
  color: var(--ink);
}

.price-card__desc {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--grey-light);
}

.price-card--featured .price-card__desc {
  color: var(--grey);
}

.price-card__features {
  margin: 1.5rem 0 2rem;
  display: grid;
  gap: 0.65rem;
  flex-grow: 1; /* pushes the button to the card's bottom edge */
}

.price-card__features li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
}

/* Volt tick marks */
.price-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--accent);
}

.price-card--featured .price-card__features li::before {
  color: var(--ink);
}

/* Ghost buttons inside dark price cards need dark-context colours */
.price-card .btn--ghost {
  color: var(--white);
}

.price-card .btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* "Training for two" strip below the main packages */
.pricing__duo {
  margin-top: 2.5rem;
  padding: 2rem 2.25rem;
  background: var(--charcoal-2);
  border: 1px solid var(--line-dark);
  border-left: 4px solid var(--accent);
}

.pricing__duo-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.pricing__duo-text {
  color: var(--grey-light);
  font-size: 0.98rem;
  max-width: 68ch;
}

.pricing__duo-list {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  font-size: 0.98rem;
}

.pricing__duo-list strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--accent);
  margin-right: 0.4rem;
}

.pricing__note {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--grey-light);
}

.pricing__note a {
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   11. LOCATION
   ========================================================================== */
.location__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

.location__map {
  position: relative;
  min-height: 380px;
  border: 1px solid var(--line-light);
  overflow: hidden;
}

/* ---- Stylised map illustration (SVG) ---- */
.map-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
}

.map-bg {
  fill: var(--charcoal);
}

/* Building footprints (real OpenStreetMap data) */
.map-building {
  fill: #454544;
  stroke: none;
}

/* Parks, pitches and green spaces — a quiet teal-tinted dark */
.map-green {
  fill: #31403c;
  stroke: none;
}

/* Giant faint village name, echoing the section background words */
.map-bigword {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 150px;
  fill: var(--paper);
  opacity: 0.05;
  letter-spacing: 0.04em;
}

/* Roads, by importance (real OpenStreetMap geometry) */
.map-road {
  fill: none;
  stroke: #5a5a59;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-road--main {
  stroke: #6a6a68;
  stroke-width: 8;
}

.map-road--minor {
  stroke: #4a4a49;
  stroke-width: 3;
}

/* Footpaths and tracks */
.map-road--path {
  fill: none;
  stroke: #464645;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
}

.map-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--grey-light);
}

.map-place {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  fill: var(--paper);
}

.map-place--small {
  font-size: 14px;
  fill: var(--grey-light);
}

.map-church path {
  stroke: var(--grey-light);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Studio pin */
.map-pin__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  transform-origin: 392.5px 300px;
  animation: mapPulse 2.5s var(--ease) infinite;
}

.map-pin__dot {
  fill: var(--accent);
}

.map-pin__core {
  fill: var(--accent-ink);
}

.map-pin__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}

.map-pin__label rect {
  fill: var(--accent);
}

.map-pin__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--accent-ink);
}

.map-pin__addr {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  fill: var(--accent-ink);
}

.map-compass circle {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 2;
}

.map-compass path {
  fill: var(--accent);
}

.map-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  fill: var(--grey-light);
  opacity: 0.7;
}

@keyframes mapPulse {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Directions button overlaid on the map */
.map-directions {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  font-size: 1rem;
  padding: 0.7rem 1.5rem;
}

.img-placeholder--map {
  height: 100%;
}

.location__details {
  display: grid;
  gap: 1.75rem;
  align-content: start;
}

.location__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
}

.location__block p {
  color: var(--grey);
}

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.testimonial {
  position: relative;
  background: var(--charcoal-2);
  border: 1px solid var(--line-dark);
  padding: 2.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.testimonial:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
}

.testimonial__quote-mark {
  position: absolute;
  top: 0.4rem;
  left: 1.25rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.9;
}

.testimonial blockquote p {
  font-size: 0.98rem;
  color: var(--grey-light);
  font-style: italic;
}

.testimonial__meta {
  margin-top: auto;
  padding-top: 1.5rem;
  display: grid;
  gap: 0.2rem;
}

.testimonial__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.testimonial__result {
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   12b. FAQ ACCORDION (native <details>, no JS required)
   ========================================================================== */
.faq {
  max-width: 820px;
  border-top: 1px solid var(--line-light);
}

.faq__item {
  border-bottom: 1px solid var(--line-light);
}

.faq__question {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1.25rem 3rem 1.25rem 0;
  cursor: pointer;
  list-style: none; /* hide the default disclosure triangle */
  position: relative;
  transition: color 0.25s var(--ease);
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* Plus / minus indicator */
.faq__question::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  transition: transform 0.3s var(--ease);
}

.faq__item[open] .faq__question::after {
  content: "–";
}

.faq__question:hover {
  color: var(--grey);
}

.faq__answer {
  padding: 0 3rem 1.5rem 0;
  color: var(--grey);
  max-width: 65ch;
}

/* ==========================================================================
   13. FINAL CTA
   ========================================================================== */
.cta {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--section-pad);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Soft volt glow behind the CTA headline */
.cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60rem;
  height: 60rem;
  background: radial-gradient(circle, rgba(71, 185, 172, 0.09), transparent 60%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.cta__sub {
  max-width: 52ch;
  margin: 1.75rem auto 2.5rem;
  color: var(--grey-light);
  font-size: 1.1rem;
}

/* ==========================================================================
   14. CONTACT FORM
   ========================================================================== */
.contact-form {
  max-width: 820px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-field {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.required {
  color: #c0392b;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--accent);
}

/* Invalid state applied by script.js on submit */
.form-field input.is-invalid {
  border-color: #c0392b;
}

.contact-form__status {
  margin-top: 1.25rem;
  font-weight: 600;
  min-height: 1.5em;
}

.contact-form__status.is-success { color: #2e7d32; }
.contact-form__status.is-error   { color: #c0392b; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.footer {
  background: var(--ink);
  color: var(--white);
  padding-block: 3.5rem 2rem;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.footer__logo .logo-mark {
  height: 3.25rem;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.footer__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grey-light);
  transition: color 0.25s var(--ease);
}

.footer__nav a:hover {
  color: var(--accent);
}

.footer__social {
  display: flex;
  gap: 0.9rem;
}

.footer__social a {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  color: var(--white);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer__social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-3px);
}

.footer__social svg {
  width: 1.3rem;
  height: 1.3rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--grey-light);
}

.footer__tag {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   16. REVEAL ANIMATIONS
   ========================================================================== */

/* Hero load-in: staggered rise, delays set inline-order via CSS below */
.reveal-load {
  opacity: 0;
  transform: translateY(35px);
  animation: riseIn 0.9s var(--ease) forwards;
}

.hero__kicker.reveal-load                    { animation-delay: 0.1s; }
.hero__line.reveal-load:nth-child(1)         { animation-delay: 0.2s; }
.hero__line.reveal-load:nth-child(2)         { animation-delay: 0.32s; }
.hero__line.reveal-load:nth-child(3)         { animation-delay: 0.44s; }
.hero__line.reveal-load:nth-child(4)         { animation-delay: 0.56s; }
.hero__sub.reveal-load                       { animation-delay: 0.75s; }
.hero__actions.reveal-load                   { animation-delay: 0.9s; }

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

/* Scroll-triggered reveals: .is-visible is added by script.js.
   The hidden state only applies while JS is running (html.js), so all
   content stays visible for users and crawlers without JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings inside card grids */
.services .reveal:nth-child(2),
.pricing .reveal:nth-child(2),
.testimonials .reveal:nth-child(2),
.gallery .reveal:nth-child(2) { transition-delay: 0.12s; }

.services .reveal:nth-child(3),
.pricing .reveal:nth-child(3),
.testimonials .reveal:nth-child(3),
.gallery .reveal:nth-child(3) { transition-delay: 0.24s; }

.services .reveal:nth-child(4),
.gallery .reveal:nth-child(4) { transition-delay: 0.36s; }

.services .reveal:nth-child(5) { transition-delay: 0.48s; }
.services .reveal:nth-child(6) { transition-delay: 0.6s; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal-load {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .ticker__track,
  .hero__scroll-line::after,
  .map-pin__pulse {
    animation: none;
  }
}

/* ==========================================================================
   17. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .about__grid,
  .location__grid {
    grid-template-columns: 1fr;
  }

  .about__media {
    max-width: 480px;
  }

  .about__badge {
    right: 1rem;
  }

  .services,
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__item--wide {
    grid-column: span 2;
  }
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
  .nav__toggle {
    display: flex;
  }

  /* Full-screen slide-in menu */
  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: 101;
    flex-direction: column;
    justify-content: center;
    gap: 2.25rem;
    background: rgba(44, 44, 43, 0.97);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    font-size: 1.6rem;
  }

  .services,
  .testimonials,
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery__item--wide {
    grid-column: span 1;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero__scroll {
    display: none;
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
  }

  .footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
}