/* ==========================================================================
   ProvenTrainer — Design Tokens
   ========================================================================== */

:root{
  /* Color */
  --color-bg: #FAFAFA;
  --color-bg-raised: #FFFFFF;
  --color-bg-raised-2: #F1F0EC;
  --color-border: #E3E1DC;
  --color-border-strong: #D1CEC7;

  --color-text: #1B1C20;
  --color-text-muted: #57595F;
  --color-text-faint: #85878D;

  --color-blue: #2F5FE0;
  --color-blue-hover: #2249CC;
  --color-blue-dim: #9FB4EE;
  --color-blue-tint: rgba(47, 95, 224, 0.08);
  --color-blue-tint-strong: rgba(47, 95, 224, 0.16);

  --color-green: #178A4C;
  --color-green-tint: rgba(23, 138, 76, 0.12);

  /* Type */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html{ scrollbar-gutter: stable; }

body{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

h1, h2, h3{
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h2{ font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); }
h3{ font-size: 1.15rem; font-weight: 600; }

p{ color: var(--color-text-muted); }

.icon-sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.icon{ width: 20px; height: 20px; flex-shrink: 0; }
.icon-xs{ width: 14px; height: 14px; }
.icon-sm{ width: 16px; height: 16px; }
.icon-md{ width: 26px; height: 26px; color: var(--color-blue); }
.icon-check{ width: 16px; height: 16px; color: var(--color-green); }

.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{ padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }

/* Alternating section background — breaks up flat, uniform page background.
   Paired with .section-wave-bottom on the
   section above a color change, and .section-wave--raised when the wave
   should reveal --color-bg-raised-2 instead of the default --color-bg
   (see .section-wave--raised path override further down, next to
   .section-wave itself, so it wins the cascade). */
.section--raised{ background: var(--color-bg-raised-2); }
.section-wave-bottom{ position: relative; overflow: hidden; }

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: absolute;
  left: 1rem; top: -100px;
  background: var(--color-blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

:focus-visible{
  outline: 2px solid var(--color-blue-hover);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Buttons / Links
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--color-blue);
  color: #fff;
  border: 1px solid var(--color-blue);
}
.btn-primary:hover{ background: var(--color-blue-hover); border-color: var(--color-blue-hover); }

.btn-ghost{
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn-ghost:hover{ border-color: var(--color-blue); color: #fff; }

.btn-small{ padding: 0.6rem 1.1rem; font-size: 0.875rem; }
.btn-large{ padding: 1rem 2rem; font-size: 1rem; }

.link-arrow{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-blue-hover);
  padding-bottom: 2px;
  transition: gap var(--dur-fast) var(--ease-out);
  width: fit-content;
}
.link-arrow::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-blue-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover{ gap: 0.75rem; }
.link-arrow:hover::after{ transform: scaleX(1); }
.link-arrow .icon{ transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .icon{ transform: translateX(2px); }
.link-arrow-wrap{ text-align: center; }

/* ==========================================================================
   Sample tag (reused label for placeholder/example content)
   ========================================================================== */

.sample-tag{
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-faint);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-blue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header-inner{
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 72px;
}

.logo{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.logo-accent{ color: var(--color-blue-hover); }

.nav-left,
.nav-right{
  display: none;
  align-items: center;
}
.nav-right{
  gap: 1.75rem;
  margin-left: auto;
}

.nav-dropdown{ position: relative; }

.nav-dropdown__trigger{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-dropdown__trigger:hover,
.nav-dropdown__trigger[aria-expanded="true"]{ color: var(--color-text); }

.nav-dropdown__trigger--outline{
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  color: var(--color-text);
}
.nav-dropdown__trigger--outline:hover,
.nav-dropdown__trigger--outline[aria-expanded="true"]{ border-color: var(--color-blue-dim); }

.nav-dropdown__caret{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__caret{ transform: rotate(180deg); }

.nav-dropdown__menu{
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  z-index: 20;
  min-width: 220px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
}
.nav-dropdown__menu[hidden]{ display: none; }
.nav-dropdown__menu--right{ left: auto; right: 0; }

.nav-dropdown__menu li + li{ margin-top: 0.15rem; }
.nav-dropdown__menu a{
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible{ background: var(--color-bg-raised); }
.nav-dropdown__menu a[aria-current="page"]{ color: var(--color-blue-hover); font-weight: 600; }

.nav-link{
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover{ color: var(--color-text); }
.nav-link[aria-current="page"]{ color: var(--color-blue-hover); }

.header-cta{ display: none; }

/* Blue header (below) makes every default text/border color inside it a
   fixed white — the header doesn't follow the page's normal
   --color-text/--color-border tokens. Dropdown panels are left alone:
   they already use the normal (non-blue) surface tokens. */
.site-header .logo{ color: #fff; }
.site-header .logo-accent{ color: rgba(255, 255, 255, 0.75); }

.site-header .nav-dropdown__trigger,
.site-header .nav-link{ color: rgba(255, 255, 255, 0.85); }
.site-header .nav-dropdown__trigger:hover,
.site-header .nav-dropdown__trigger[aria-expanded="true"],
.site-header .nav-link:hover{ color: #fff; }

.site-header .nav-dropdown__trigger--outline{
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.site-header .nav-dropdown__trigger--outline:hover,
.site-header .nav-dropdown__trigger--outline[aria-expanded="true"]{
  border-color: #fff;
}

.site-header .header-cta{
  background: #fff;
  color: var(--color-blue);
  border-color: #fff;
}
.site-header .header-cta:hover{
  background: #e7e9f0;
  border-color: #e7e9f0;
  color: var(--color-blue-hover);
}

.nav-toggle{
  margin-left: auto;
  width: 40px; height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span{
  width: 20px; height: 2px;
  background: #fff;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 0;
  overflow: hidden;
  background: var(--color-bg-raised);
  border-top: 1px solid transparent;
  transition: max-height var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.mobile-nav.is-open{
  max-height: 420px;
  border-top-color: var(--color-border);
}
.mobile-nav a{
  padding: 1rem var(--gutter);
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav a[aria-current="page"]{ color: var(--color-blue-hover); }
.mobile-nav .btn{ margin: 1rem var(--gutter); align-self: flex-start; }

.mobile-nav__heading{
  padding: 1rem var(--gutter) 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

@media (min-width: 900px){
  .nav-left,
  .nav-right{ display: flex; }
  .header-cta{ display: inline-flex; }
  .nav-toggle{ display: none; }
  .mobile-nav{ display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* Clips only the decorative ✓ mark — kept separate from .hero itself so an
   open hero-search dropdown (which needs to overflow the hero) isn't cut. */
.hero-bg-clip{
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}

.hero-bg-mark{
  position: absolute;
  top: -8%;
  right: -6%;
  width: min(48vw, 560px);
  color: var(--color-blue);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.hero-bg-mark svg{ width: 100%; height: 100%; }

.hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  /* Explicit 1fr, not left implicit: an aspect-ratio-only child (.hero-photo,
     no intrinsic width of its own) inside an undeclared auto-sized grid
     column can't resolve its own size and collapses to ~2px — pre-existing
     bug, found on for-trainers.html too (untouched by this edit), not
     something the .hero-head split introduced. */
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* index.html only (.hero-grid is shared with for-trainers.html/
   how-it-works.html — untouched there, hence a modifier instead of
   changing align-items on the base .hero-grid rule). The hero-sub
   paragraph + link list is short next to a 4:5 photo; centering the short
   column against the tall one left empty space above AND below the text.
   align-items:start anchors both to the top; the max-height/width:auto
   pair on .verify-photo below then shortens the photo itself so the row
   doesn't stay photo-height with empty space under the now top-anchored
   text. */
.hero-grid--fit-photo{ align-items: start; }
@media (min-width: 860px){
  .hero-grid--fit-photo .verify-photo{
    max-height: 300px;
    width: auto;
  }
}

/* Τίτλος πλήρους πλάτους, δικό του μπλοκ πάνω από το .hero-grid/.hero-copy
   (index.html, directory.html) — μέσα στη μισή στήλη .hero-copy δίπλα στην
   εικόνα, ένας δίπροτασος τίτλος σε ελληνικά κεφαλαία έσπαγε σε 6 γραμμές.
   Άλλες σελίδες (how-it-works.html, for-trainers.html, pricing.html κ.ά.)
   κρατούν το h1 μέσα στο .hero-copy όπως πριν — δεν αγγίχτηκαν, γι' αυτό
   το μέγεθος γραμματοσειράς του .hero-head h1 ζει σε ξεχωριστό κανόνα από
   το .hero-copy h1 παρακάτω, όχι μαζί του. */
.hero-head{ position: relative; z-index: 1; }

.eyebrow{
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-hover);
  margin-bottom: 1rem;
}

.hero-copy h1{
  font-size: clamp(1.65rem, 1.15rem + 4vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
}
/* The 4vw scaling term keeps h1 above ~500px viewports; below that the full-
   sentence benefit headlines now used site-wide (marketplace-redesign copy
   pass) wrap 5-6 times at the uncapped ~2.1rem size — reads as broken, not
   bold. Smaller, tighter treatment specifically under 480px. */
@media (max-width: 480px){
  .hero-copy h1{ font-size: 1.5rem; letter-spacing: 0.01em; }
}

/* .hero-head h1 — full .wrap width now (no more max-width:20ch strangling
   it into short lines), sized to fill that width horizontally at each
   breakpoint instead of wrapping short or overflowing. This shared rule is
   tuned against directory.html's single sentence (the longer of the two
   pages' titles now that index.html's is also one sentence) — see
   #index-hero-h1 below for index.html's own, larger tuning, since its
   shorter sentence would otherwise sit noticeably under-filled here. */
.hero-head h1{
  font-size: clamp(1rem, 3.37vw, 2.62rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
}
@media (max-width: 480px){
  .hero-head h1{ font-size: 1.85rem; letter-spacing: 0.01em; }
}

/* index.html only — shorter single sentence than directory.html's, so it
   gets its own larger clamp to actually fill the line instead of
   inheriting the shared rule's smaller, directory-calibrated size.
   Values below are placeholders pending empirical measurement. */
#index-hero-h1{ font-size: clamp(1rem, 3.6vw, 2.8rem); }
@media (max-width: 480px){
  #index-hero-h1{ font-size: 2rem; }
}

.hero-sub{
  font-size: 1.1rem;
  max-width: 44ch;
  margin-bottom: 2.25rem;
}

/* pricing.html hero — a full sentence, not a short headline, so the default
   .hero-copy h1 (uppercase, up to 4rem) would blow up to fill the screen.
   Scoped down for its own long, non-headline h1. */
#pricing-hero-h1{
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
#pricing-hero-h1 em{
  font-style: normal;
  color: var(--color-blue-hover);
}

.hero-copy.section-head--center .hero-sub{ margin-inline: auto; }

.hero-search-row{ position: relative; margin-top: 2rem; }
.hero-search-row.has-open-dropdown{ z-index: 50; }

.hero-search{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 1rem;
}

.hero-search__submit{ width: 100%; justify-content: center; }

@media (min-width: 720px){
  .hero-search{
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    padding: 0.75rem;
  }
  .hero-search__submit{ width: auto; }
}

.hero-links{
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.hero-visual{ position: relative; }

.verify-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background-image: url("../assets/img/hero-verify.jpg");
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-raised);
  box-shadow: 0 20px 45px -20px rgba(20, 20, 20, 0.18);
}
.verify-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(185deg, rgba(21,23,29,0.12) 0%, rgba(21,23,29,0.55) 100%);
}

.verify-photo__badge{
  position: absolute;
  bottom: -18px;
  right: 24px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 8px 20px -6px rgba(20, 20, 20, 0.2);
}
.verify-photo__badge .icon{ width: 24px; height: 24px; color: var(--color-green); }

/* Entrance animation is a hero-only flourish — scoped to .hero-visual so
   the badge is simply visible (no fade-in) wherever else it's reused. */
.hero-visual .verify-photo__badge{
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.hero-visual.reveal-load-in .verify-photo__badge{
  opacity: 1;
  transform: scale(1);
  transition-delay: 550ms;
}

/* Same badge, reused verbatim (decisions-log §3) on every trainer-photo
   thumbnail — directory cards and carousel slots alike — just resized to
   fit a much smaller photo. Never varies per trainer: no number, no text.
   (.trainer-photo itself gets position:relative further down, where its
   main ruleset lives.) */
.trainer-photo .verify-photo__badge{
  width: 30px;
  height: 30px;
  bottom: 8px;
  right: 8px;
}
.trainer-photo .verify-photo__badge .icon{ width: 15px; height: 15px; }

@media (min-width: 860px){
  .hero-grid{ grid-template-columns: 7fr 5fr; gap: 2rem; }
  .hero-visual{ transform: translateY(1.5rem); }
  .verify-photo{ margin-inline: 0; margin-left: auto; }
}

/* ==========================================================================
   Page hero (inner pages — single column, shorter than the homepage hero)
   ========================================================================== */

.page-hero{
  padding-block: clamp(2.5rem, 1.8rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.page-hero .hero-copy{ max-width: 720px; }
.page-hero .hero-sub{ margin-bottom: 0; }

/* ==========================================================================
   Load animation
   ========================================================================== */

.reveal-load{
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 110ms);
}
@keyframes reveal-in{
  to{ opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Stats bar
   ========================================================================== */

.stats-bar{
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}

.stats-grid{
  display: grid;
  align-items: center;
  gap: 2rem 3rem;
}

.stat-num{
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 600;
  color: var(--color-blue-hover);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.stat-label{
  font-size: 0.9rem;
  max-width: 28ch;
}

.stat-label--lead{
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.9rem;
}

.pillar-tags{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pillar-tag{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  background: var(--color-bg-raised);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.pillar-tag .icon{ width: 15px; height: 15px; color: var(--color-blue-hover); }

@media (min-width: 720px){
  .stats-grid{ grid-template-columns: auto auto; justify-content: center; max-width: none; }
}

/* ==========================================================================
   Section head
   ========================================================================== */

.section-head{ max-width: 640px; margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 3.5rem); }
.section-head__note{ color: var(--color-text-faint); margin-top: 0.75rem; }
.section-head--center{ margin-inline: auto; text-align: center; }
.section-head--row{
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: none;
}
@media (min-width: 720px){
  .section-head--row{
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.carousel-nav__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  color: var(--color-text-faint);
  background: var(--color-bg);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.carousel-nav__btn:hover{ border-color: var(--color-blue); color: var(--color-blue-hover); }
.carousel-nav__btn:active{ transform: translateY(1px); }
.carousel-nav__btn .icon{ width: 16px; height: 16px; }
.carousel-nav__btn--prev .icon{ transform: scaleX(-1); }

.carousel-nav__btn--edge{
  display: none;
  position: absolute;
  top: 0;
  /* Height of the name+tag block below .trainer-photo, kept clear so the
     button centers against the photo itself, not the whole card. */
  bottom: 61.3px;
  margin-block: auto;
  z-index: 2;
}
.carousel-nav__btn--edge.carousel-nav__btn--prev{ left: -2.75rem; }
.carousel-nav__btn--edge.carousel-nav__btn--next{ right: -2.75rem; }

@media (min-width: 1200px){
  .carousel-nav__btn--edge{ display: inline-flex; }
}
.carousel-nav__btn--edge[hidden]{ display: none; }

/* ==========================================================================
   Verification steps
   ========================================================================== */

.steps-grid{
  display: grid;
  align-items: stretch;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.step-card{
  position: relative;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 16px -8px rgba(20, 20, 20, 0.1);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.step-card:hover{
  transform: translateY(-3px);
  border-color: var(--color-blue-dim);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,0.35);
}

.step-num{
  display: block;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.step-card .icon-md{ margin-bottom: 1rem; }
.step-card h3{ margin-bottom: 0.5rem; }
.step-card p{ font-size: 0.9rem; }

.step-card--outcome{
  background: var(--color-green-tint);
  border-color: rgba(34, 168, 90, 0.35);
}
.step-card--outcome:hover{ border-color: var(--color-green); }
.step-card--outcome .icon-check{ width: 28px; height: 28px; margin-bottom: 1rem; }

@media (min-width: 720px){
  .steps-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .steps-grid{ grid-template-columns: repeat(3, 1fr); }
}

.steps-grid--two{ max-width: 760px; margin-inline: auto; }
@media (min-width: 1080px){
  .steps-grid--two{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Detailed steps (how-it-works page)
   ========================================================================== */

.detail-steps{
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.detail-step{
  display: grid;
  gap: 1.75rem;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-bottom: 1px solid var(--color-border);
}
.detail-step:last-child{ border-bottom: none; padding-bottom: 0; }

.detail-step__head{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.detail-step__num{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-text-faint);
}
.detail-step__head h2{ font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }

.detail-step__lead{ font-size: 1.05rem; max-width: 46ch; }

.detail-step__meta{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
.detail-step__meta dt{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}
.detail-step__meta dd{
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

@media (min-width: 900px){
  .detail-step{
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
  }
}

/* ==========================================================================
   Photo band
   ========================================================================== */

.photo-band{
  position: relative;
  min-height: clamp(320px, 40vw, 480px);
  display: flex;
  align-items: center;
  background-color: var(--color-bg-raised);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.photo-band::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,23,29,0.6) 0%, rgba(21,23,29,0.88) 100%);
  z-index: 0;
}
.photo-band__inner{
  position: relative;
  z-index: 1;
}
/* .photo-band always shows a dark photo scrim (::before above) regardless
   of the page's own colors, so its text stays light-on-dark on purpose. */
.photo-band .eyebrow{ color: var(--color-blue-dim); }
.photo-band h2{ max-width: 18ch; margin-bottom: 0; color: #F5F4F1; }
/* Optional small-text subtitle under a photo-band h2 — headline states the
   visitor's benefit, this states why to believe it (verification). Own
   margin-top rather than a change to h2's margin-bottom, so bands without
   a subtitle are unaffected. */
.photo-band__sub{ max-width: 34ch; margin-top: 0.85rem; margin-bottom: 0; color: rgba(245,244,241,0.72); font-size: 1rem; }

/* ==========================================================================
   Section wave divider
   ========================================================================== */

.section-wave{
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 200%;
  max-width: none;
  height: clamp(36px, 6vw, 72px);
  z-index: 1;
  animation: section-wave-sway 26s linear infinite;
}
.section-wave path{ fill: var(--color-bg); }
.section-wave--raised path{ fill: var(--color-bg-raised-2); }

@keyframes section-wave-sway{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   Hero photo — plain rectangular photo used side-by-side with hero copy
   inside .hero-grid (no mask, no scrim, no overlaid text).
   ========================================================================== */

.hero-photo{
  /* Explicit width, not left to grid's default justify-self:stretch: with
     align-items:center on .hero-grid (align-self != stretch), an
     aspect-ratio box with no other intrinsic size collapses to ~2px instead
     of filling its column — pre-existing bug, unrelated to this session's
     .hero-head split, present wherever .hero-grid + .hero-photo pair up
     (for-trainers.html, how-it-works.html, pricing.html, directory.html). */
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-raised);
  background-size: cover;
  background-position: center;
}
@media (max-width: 899px){
  .hero-photo{ max-width: 420px; margin-inline: auto; }
}

/* ==========================================================================
   Categories
   ========================================================================== */

.category-grid{
  display: grid;
  align-items: stretch;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

.category-card{
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 1.75rem;
  box-shadow: 0 4px 16px -8px rgba(20, 20, 20, 0.1);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.category-card:hover{
  border-color: var(--color-blue-dim);
  background: var(--color-bg-raised-2);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,0.35);
}
.category-card .icon-md{ margin-bottom: 1.1rem; }
.category-card h3{ margin-bottom: 0.4rem; }
.category-card p{ font-size: 0.9rem; }
.category-card .link-arrow{ margin-top: auto; padding-top: 1rem; }

/* Outline variant — reads as an invitation/CTA, not another category */
.category-card--other{
  background: transparent;
  border-style: dashed;
  border-color: var(--color-border-strong);
  box-shadow: none;
}
.category-card--other h3{ color: var(--color-text-muted); }
.category-card--other:hover{
  background: var(--color-bg-raised);
  border-color: var(--color-blue-dim);
  transform: translateY(-3px);
}

.path-grid{
  display: grid;
  align-items: stretch;
  gap: 1.1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem;
}
@media (min-width: 720px){
  .path-grid{ grid-template-columns: repeat(2, 1fr); }
}

.path-note{ font-size: 0.9rem; color: var(--color-text-faint); max-width: 60ch; }

.economics-list{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 62ch;
  margin-bottom: 1.75rem;
}
.economics-list li{
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.economics-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue-hover);
}

.benefit-grid{
  display: grid;
  align-items: stretch;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .benefit-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px){
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
  .category-grid .category-card--other{ grid-column: 1 / -1; justify-self: center; width: calc((100% - 1.1rem) / 2); }
}
@media (min-width: 1000px){
  .category-grid{ grid-template-columns: repeat(6, 1fr); }
  .category-grid .category-card{ grid-column: span 2; }
  .category-grid .category-card--other{ grid-column: 3 / span 2; width: auto; }
}

/* ==========================================================================
   Directory preview
   ========================================================================== */

.trainer-carousel{
  position: relative;
  display: grid;
  gap: 1.25rem;
}

.trainer-slot{
  display: block;
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  transition-delay: 0s;
}
.trainer-slot[hidden]{ display: none; }
.trainer-slot:hover .trainer-photo{ border-color: var(--color-blue-dim); }
.trainer-slot.is-leaving{
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  transition-delay: 0s;
}
.trainer-slot.is-entering{
  opacity: 0;
  transform: translateY(14px);
  transition: none;
  transition-delay: 0s;
}

/* Fallback avatar for trainer/profile photos before a real one loads — a
   generic person glyph on a neutral tint, covering the whole box exactly
   like a real photo would (background-size:cover on each rule below), so a
   trainer without a photo yet never looks like a broken/empty box. main.js
   only replaces this with the real photo (inline style, so it always wins
   the cascade) after confirming the file actually exists. */
.trainer-photo,
.profile-photo,
.author-avatar{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23F1F0EC'/%3E%3Ccircle cx='50' cy='38' r='16' fill='none' stroke='%23C9C6BD' stroke-width='6'/%3E%3Cpath d='M20 84c0-17.3 13.4-27 30-27s30 9.7 30 27' fill='none' stroke='%23C9C6BD' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.trainer-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-raised);
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px -8px rgba(20, 20, 20, 0.1);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.trainer-slot:hover .trainer-photo,
.directory-card:hover .trainer-photo{
  transform: scale(1.04);
}

.trainer-slot__name{
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}

/* Sport is what the athlete searched for, so it gets its own chip — the
   site's one accent color, not a new one — while city/format read as
   secondary metadata underneath (decisions-log-adjacent card hierarchy). */
.trainer-slot__sport{
  display: inline-block;
  background: var(--color-blue-tint);
  color: var(--color-blue-hover);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.22rem 0.65rem;
  border-radius: var(--r-pill);
  margin-bottom: 0.45rem;
}

.trainer-slot__meta{ font-size: 0.85rem; color: var(--color-text-muted); }

/* Declared areas within a city — omitted entirely (no element at all) when
   a trainer hasn't declared any, same empty-field rule as everywhere else.
   Smaller/fainter than .trainer-slot__meta: it's a refinement of the city
   already stated there, not new top-level information. */
.trainer-slot__areas{ font-size: 0.78rem; color: var(--color-text-faint); margin-top: 0.15rem; }

@media (min-width: 720px){
  .trainer-carousel{ grid-template-columns: repeat(3, 1fr); }
}

/* Fewer real trainers than carousel slots — center the visible card(s)
   instead of stretching them across the full 3-column grid. */
.trainer-carousel--single{
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
}

/* ==========================================================================
   Filter bar (directory page — visual only, not wired to real filtering)
   ========================================================================== */

.filter-bar{
  position: relative;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* The actual grid of controls — kept separate from .filter-bar itself so
   the "Online" note (a direct child of .filter-bar, full-width, below the
   grid) never sits inside a filter-group and never changes any group's
   height. */
.filter-bar__grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.filter-group{ display: flex; flex-direction: column; gap: 0.5rem; }
/* [hidden] and .filter-group{display:flex} have equal specificity, so the
   later author rule was winning and the area group stayed visible (with
   zero content) even while "hidden" — this makes the native attribute win
   explicitly instead of relying on cascade order. */
.filter-group[hidden]{ display: none; }
.filter-group label{
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.filter-select{
  appearance: none;
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 0.7rem 2.25rem 0.7rem 0.9rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9adb9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.filter-select:hover{ border-color: var(--color-blue-dim); }
.filter-select:focus-visible{ outline: 2px solid var(--color-blue-hover); outline-offset: 2px; }

/* ==========================================================================
   Custom select — JS-built dropdown that replaces the native <select>'s
   open list with a dark, site-styled listbox. The native <select> is kept
   in the DOM (hidden once enhanced) as the source of truth for js/main.js.
   ========================================================================== */

.custom-select{ position: relative; z-index: 1; }
.custom-select.is-open{ z-index: 50; }
/* Kept rendered (not display:none) on purpose: a display:none <select> is
   barred from constraint validation, so a required field would silently
   skip validation on submit. Overlaid exactly on the trigger instead —
   invisible, non-interactive, but still focusable when the browser needs
   to report a validation error. */
.custom-select.is-enhanced .filter-select{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.custom-select__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  appearance: none;
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.custom-select__trigger:hover{ border-color: var(--color-blue-dim); }
.custom-select__trigger:focus-visible{ outline: 2px solid var(--color-blue-hover); outline-offset: 2px; }
.custom-select.is-open .custom-select__trigger{ border-color: var(--color-blue-hover); }

.custom-select__value{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.custom-select__caret{
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.custom-select.is-open .custom-select__caret{ transform: rotate(180deg); }

.custom-select__list{
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
  max-height: 280px;
  overflow-y: auto;
}
.custom-select__list[hidden]{ display: none; }

.custom-select__option{
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.custom-select__option.is-active{ background: var(--color-bg-raised); }
.custom-select__option.is-selected{ color: var(--color-blue-hover); font-weight: 600; }

.filter-bar__count{
  font-size: 0.88rem;
  color: var(--color-text-faint);
  margin: 1rem 0 0;
}

/* Disabled filter (Γ2 — city/area while format = "Online"): dims the
   trigger and blocks interaction without touching the native <select>'s
   own disabled state handling elsewhere. */
.custom-select__trigger:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
.custom-select__trigger:disabled:hover{ border-color: var(--color-border-strong); }

.filter-note{
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin: 0;
}
.filter-note--results{
  margin-bottom: 1.25rem;
  margin-top: -0.5rem;
}
/* Full-width, below .filter-bar__grid, inside the same .filter-bar card —
   never inside a filter-group, so no group's height ever shifts when this
   appears/disappears (Γ2 layout bug). */
.filter-note--full{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.directory-grid__divider{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0.5rem;
}
.directory-grid__divider::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}
.directory-grid__divider[hidden]{ display: none; }

.filter-bar.has-open-dropdown{ z-index: 50; }

.active-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: -0.75rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.active-filters[hidden]{ display: none; }

.active-filters__label{
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-faint);
}

.active-filters__list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.active-filters__list li{
  display: inline-flex;
  align-items: center;
  background: var(--color-blue-tint);
  color: var(--color-blue-hover);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
}

.active-filters__clear{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  transition: color var(--dur-fast) var(--ease-out);
}
.active-filters__clear:hover{ color: var(--color-text); }

.filter-group--budget{ grid-column: 1 / -1; }

@media (min-width: 780px){
  .filter-bar__grid{
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }
}

/* ==========================================================================
   Budget filter — radio list with live per-zone counts (replaces the old
   dropdown+optgroup select). Two small toggle buttons switch which set of
   zones is shown instead of grouping units inside one list.
   ========================================================================== */

.budget-filter__units{
  display: inline-flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.budget-unit-btn{
  appearance: none;
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  color: var(--color-text-faint);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.budget-unit-btn:hover{ border-color: var(--color-blue-dim); color: var(--color-text); }
.budget-unit-btn:focus-visible{ outline: 2px solid var(--color-blue-hover); outline-offset: 2px; }
.budget-unit-btn.is-active{
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
}

.budget-filter__list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px){
  .budget-filter__list{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.budget-option{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.budget-option:hover{ border-color: var(--color-blue-dim); }
.budget-option:has(input:checked){
  border-color: var(--color-blue-hover);
  background: var(--color-bg-raised-2);
}
.budget-option:has(input:disabled){ cursor: not-allowed; opacity: 0.5; }

.budget-option input{ accent-color: var(--color-blue); flex-shrink: 0; }

.budget-option__label{ font-size: 0.88rem; color: var(--color-text); flex: 1; }
.budget-option__count{ font-size: 0.8rem; color: var(--color-text-faint); }

/* ==========================================================================
   Directory grid (full browsable grid — static, not rotating)
   ========================================================================== */

.directory-disclaimer{
  font-size: 0.85rem;
  color: var(--color-text-faint);
  margin-bottom: 1.5rem;
}

/* One ✓ for the whole list, not per-card — states that every profile below
   already passed identity + certification review. Small, plain text, no
   box/background — reads as information, not a promotional banner. Doesn't
   change when the user filters. */
.verify-assurance{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}
.verify-assurance .icon{ flex-shrink: 0; }

.assist-banner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-blue-tint);
  border: 1px solid var(--color-blue-tint-strong);
  border-radius: var(--r-md);
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.75rem;
}
.assist-banner p{ color: var(--color-text); font-weight: 600; }

.directory-grid{
  display: grid;
  align-items: stretch;
  gap: 1.75rem 1.25rem;
  grid-template-columns: 1fr;
}

.directory-card{ display: block; transition: transform var(--dur-base) var(--ease-out); }
.directory-card:hover{ transform: translateY(-3px); }
.directory-card:hover .trainer-photo{ border-color: var(--color-blue-dim); }

/* Trainer-declared price range — NOT a verified fact (decisions-log §3):
   no check/tick shape, no color scheme, deliberately muted so it reads as
   the trainer's own statement rather than something we checked. */
.trainer-price{
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.trainer-price--none{ color: var(--color-text-faint); }
.trainer-price__unit{ font-weight: 700; color: var(--color-text); }

@media (min-width: 640px){
  .directory-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px){
  .directory-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1300px){
  .directory-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Blog / article cards
   ========================================================================== */

.article-grid{
  display: grid;
  align-items: stretch;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .article-grid{ grid-template-columns: repeat(2, 1fr); }
}

.article-card{
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.article-card:hover{
  border-color: var(--color-blue-dim);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,0.35);
}

.article-card__thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-raised-2);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--color-border);
}
.article-card__thumb .icon{
  width: 34px;
  height: 34px;
  color: var(--color-blue);
  opacity: 0.55;
}
/* loadBg() in main.js sets this inline once the photo has loaded — the
   sprite icon underneath is the fallback for the split-second before that
   (or if data-bg is ever missing), so it only needs hiding once a real
   photo is actually in place. */
.article-card__thumb[style] .icon{ display: none; }

.article-card__body{ padding: 1.5rem; }

.article-card__meta{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.article-card__tag{
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-hover);
}
.article-card__date{ font-size: 0.78rem; color: var(--color-text-faint); }

.article-card h3{ font-size: 1.1rem; margin-bottom: 0.6rem; }
.article-card p{ font-size: 0.9rem; }

/* Smaller avatar for the compact card context than the full article
   header's .author-byline .author-avatar (24px) — see the shared
   .author-byline/.author-avatar pattern above. */
.article-card__author{ margin-top: 0.85rem; font-size: 0.82rem; color: var(--color-text-faint); }
.article-card__author .author-avatar{ width: 18px; height: 18px; }

/* ==========================================================================
   About (contact page)
   ========================================================================== */

.about-block{ max-width: 62ch; }
.about-block p{ font-size: 1.05rem; margin-bottom: 1.25rem; }
.about-block p:last-child{ margin-bottom: 0; }

/* ==========================================================================
   Trainer profile (sample detail page)
   ========================================================================== */

/* Mobile: φωτογραφία-thumbnail δίπλα στο όνομα (row 1) + πλήρους πλάτους
   ενέργειες (badge/στατιστικά/CTA) από κάτω (row 2) — κρατάει τα στατιστικά
   μέσα στο πρώτο viewport στα 375px. Desktop (≥860px): μεγάλη φωτογραφία
   4:5 αριστερά, spanning και τις δύο σειρές, ό,τι ίσχυε πριν. */
.profile-header{
  display: grid;
  grid-template-columns: 84px 1fr;
  column-gap: 1.1rem;
  row-gap: 1.5rem;
  align-items: center;
}
.profile-photo{
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 1 / 1;
  max-width: 84px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-raised);
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.profile-info{ grid-column: 2; grid-row: 1; }
.profile-hero-actions{ grid-column: 1 / -1; grid-row: 2; }
/* .profile-header__content (trainer-skavaras.html): wraps .profile-info +
   .profile-hero-actions. display:contents on mobile means it has no box of
   its own — the two children keep placing directly into .profile-header's
   grid exactly as above, mobile layout unchanged. At ≥860px it becomes a
   real flex column spanning the same 2 rows the photo spans, as ONE grid
   item — see media query below for why. */
.profile-header__content{ display: contents; }
@media (min-width: 860px){
  .profile-header{ grid-template-columns: 380px 1fr; column-gap: 3rem; row-gap: 0; align-items: start; }
  .profile-photo{
    grid-row: 1 / span 2;
    aspect-ratio: 4 / 5;
    width: auto;
    max-width: 380px;
    /* Caps how tall the profile photo gets so it can't dictate a taller
       hero than the text next to it needs — without this, aspect-ratio at
       max-width:380px alone computes to 475px regardless of content. */
    max-height: 460px;
    border-radius: var(--r-lg);
  }
  /* Before this, .profile-info and .profile-hero-actions were two separate
     grid items each pinned to their own row (row 1 / row 2), with the photo
     spanning both. When the photo's own height (475px) exceeded what those
     two rows needed on their own, CSS Grid inflated row 2 to cover the
     deficit — and align-items:start then top-aligned .profile-hero-actions
     WITHIN that artificially tall row, leaving visible empty space under
     the "Ζήτα γνωριμία" button. Wrapping both into one flex column (this
     rule) removes the two-row-track math entirely: the wrapper is a single
     spanning grid item, and flex's own default (no stretch along the main
     axis) means its children just sit at their natural height with no
     injected gap, however short the text is. align-content:start kept per
     request, though for a non-wrapping column flex container it has no
     visible effect on its own — the flex restructuring above is what
     actually does the work. */
  .profile-header__content{
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: start;
  }
  .profile-header__content .profile-meta{ margin-bottom: 0.5rem; }
  .profile-header__content .profile-bio{ margin-top: 1rem; }
  .profile-info{ grid-column: 2; grid-row: 1; }
  .profile-hero-actions{ grid-column: 2; grid-row: 2; }
}

.profile-info h1{
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.profile-meta{ font-size: 1rem; color: var(--color-text-faint); margin-bottom: 0; }
/* Περιοχή — ξεχωριστή γραμμή από τα αθλήματα: μικρότερη, πιο σκούρη (πιο
   readable/πρόσφορη σε σχέση με το αχνό .profile-meta από πάνω της). Κανένα
   εικονίδιο τοποθεσίας — δεν υπάρχει pin/marker symbol στο icon-sprite του
   site, οπότε δεν φτιάχτηκε ένα μόνο γι' αυτό. */
.profile-location{ font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.35rem; margin-bottom: 0; }

/* Declared areas within the city — omitted entirely (no element) when a
   trainer hasn't declared any, same empty-field rule as the rest of the
   profile. Smaller/fainter than .profile-location: a refinement of the
   city already stated there, not new top-level information. */
.profile-areas{ font-size: 0.78rem; color: var(--color-text-faint); margin-top: 0.2rem; margin-bottom: 0; }
.profile-hero-actions .btn{ margin-bottom: 0.5rem; }

/* Compact one-line trust stamp in the hero — reuses .verify-assurance
   (directory.html) as-is, same "small text, no box" treatment, just a
   bigger bottom margin here to separate it from the stat row below. */
.profile-verify-badge{ margin-bottom: 1.75rem; }

/* Retention — the most persuasive number on the page, pulled out of the
   verified list and put directly under the fold (§B.1), since it's the
   number most likely to actually move a decision. Deliberately its own
   smaller scale, not .stat-num/.stat-label, which are tuned for the
   full-width index.html stats bar. Plain flex row, no fixed child count
   assumed: the single stat here is itself conditional (new trainers have
   no retention data yet), so this can render with 0 or 1 item — no
   justify-content/nth-child rule depends on there being more than one. */
.profile-hero-stats{
  display: flex;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  margin-bottom: 1.75rem;
}
.profile-hero-stat__num{
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.6rem);
  font-weight: 600;
  color: var(--color-blue-hover);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.profile-hero-stat__label{ font-size: 0.82rem; color: var(--color-text-muted); max-width: 18ch; }

/* Τιμή στο hero (§2) — κάτω από τα στατιστικά, πάνω από το CTA. Ίδια
   τυπογραφική λογική με .declared-info__price παλιότερα (καμία ✓, καμία
   απόχρωση επαλήθευσης δίπλα της, μιας και είναι δηλωμένο στοιχείο) —
   απλά χωρίς κουτί, ενσωματωμένη στη ροή του hero. */
.profile-hero-price{
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

/* Short positioning statement (§2) — δικό της .profile-block, όχι μέσα στο
   hero grid· άνετο περιθώριο πάνω/κάτω ίδιο με τις υπόλοιπες ενότητες
   (βλ. .profile-block + .profile-block πιο κάτω), όχι κολλητά κάτω από τη
   φωτογραφία. Ελαφρώς μεγαλύτερο μέγεθος από το κανονικό σώμα κειμένου —
   είναι η πρώτη πρόταση που διαβάζει κάποιος. */
.profile-bio{ font-size: 1.1rem; line-height: 1.6; max-width: 68ch; margin-bottom: 0; }
/* .profile-bio is normally a <p> (one flowing sentence) — a trainer can
   instead give it as a short emoji-led list, rendered as <ul> here. */
ul.profile-bio{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }

.profile-note{
  font-size: 0.85rem;
  color: var(--color-text-faint);
  max-width: 70ch;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.profile-block + .profile-block{ margin-top: clamp(3rem, 2.25rem + 3.5vw, 4.5rem); }

/* "Πώς δουλεύω" — same dt/dd label-value rhythm as .detail-step__meta on
   how-it-works.html, reused here for a different context. */
.how-i-work{
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .how-i-work{ grid-template-columns: repeat(2, 1fr); }
}
.how-i-work dt{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 0.5rem;
}
/* dd has a 40px inline-start margin by default in every browser — without
   resetting it, the value text reads as an indented sub-item instead of a
   plain line under its label. */
.how-i-work dd{ margin: 0; font-size: 0.98rem; color: var(--color-text); line-height: 1.55; }

/* Πτυσσόμενο πλήρες βιογραφικό (§8) — native <details>, ίδια λογική με
   .article-faq αλλά χωρίς border ανά item, μια και υπάρχει μόνο ένα. */
.profile-bio-full{ border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.profile-bio-full summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--color-blue-hover);
  font-size: 0.98rem;
}
.profile-bio-full p{ font-size: 1rem; line-height: 1.65; margin: 1.1rem 0 0; max-width: 68ch; }
.profile-bio-full p + p{ margin-top: 0.9rem; }
/* Optional sub-headings for a longer, sectioned bio (§8) — same margin
   rhythm as .article-body h3 for consistency across long-form text. */
.profile-bio-full h3{ margin-top: 1.75rem; margin-bottom: 0.6rem; }
.profile-bio-full h3:first-child{ margin-top: 1.1rem; }
/* Optional bulleted sub-lists (e.g. a CV-style bio with dated entries per
   section) — same visual weight as .article-body p, just list-formatted. */
.profile-bio-full ul{ margin: 1.1rem 0 0; padding-left: 1.2rem; max-width: 68ch; display: flex; flex-direction: column; gap: 0.5rem; }
.profile-bio-full ul li{ font-size: 1rem; line-height: 1.55; color: var(--color-text-muted); }

.profile-final-cta{
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
}
.profile-final-cta h2{ margin-bottom: 1.5rem; }

/* Σταθερή κάτω μπάρα σε mobile (§Γ) — μόνιμο CTA, κρυμμένη από τα 960px
   και πάνω (εκεί η τιμή είναι ήδη ορατή στο hero, δεν χρειάζεται floating
   στοιχείο). body παίρνει αντίστοιχο padding-bottom στο ίδιο breakpoint
   (βλ. .site-footer παρακάτω) ώστε να μη σκεπάζει το footer. */
.mobile-sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: var(--color-bg-raised);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.35);
}
.mobile-sticky-cta__price{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
}
/* Χωρίς δηλωμένη τιμή (§1α/§4), το .mobile-sticky-cta__price λείπει
   εντελώς — το κουμπί μένει μόνο του παιδί· χωρίς αυτό, το space-between
   θα το άφηνε κολλημένο αριστερά με άδειο χώρο δεξιά. */
.mobile-sticky-cta .btn:only-child{ margin-left: auto; }
@media (min-width: 960px){
  .mobile-sticky-cta{ display: none; }
}
/* Reserve room for the fixed bar so it never covers the footer underneath
   it — only applies on pages that actually have the bar. */
@media (max-width: 959px){
  body:has(.mobile-sticky-cta){ padding-bottom: 4.5rem; }
}

/* Profile photo gallery + lightbox */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (min-width: 640px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}

.gallery-item{
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-raised-2);
  font: inherit;
}
.gallery-item:focus-visible{ outline: 2px solid var(--color-blue-hover); outline-offset: 2px; }
.gallery-item__thumb{
  display: block;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-raised-2);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.gallery-item:hover .gallery-item__thumb,
.gallery-item:focus-visible .gallery-item__thumb{ transform: scale(1.05); }

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 15, 0.92);
  padding: 4.5rem 1.25rem;
}
.lightbox[hidden]{ display: none; }
.lightbox__figure{
  width: 100%;
  max-width: 1000px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
}
.lightbox__image{
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--r-md);
}
.lightbox__caption{
  color: #F5F4F1;
  font-size: 0.92rem;
  text-align: center;
}
.lightbox__close,
.lightbox__nav{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background: rgba(255, 255, 255, 0.2); }
.lightbox__close .icon,
.lightbox__nav .icon{ width: 18px; height: 18px; }
.lightbox__close{ top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev{ left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next{ right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px){
  .lightbox{ padding: 3.5rem 0.75rem; }
  .lightbox__close{ top: 0.75rem; right: 0.75rem; }
  .lightbox__nav--prev{ left: 0.5rem; }
  .lightbox__nav--next{ right: 0.5rem; }
}

.verify-list{ display: flex; flex-direction: column; gap: 1.25rem; }
.verify-list li{
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.verify-list li:last-child{ border-bottom: none; padding-bottom: 0; }
.verify-list .icon-check{ margin-top: 4px; }
.verify-list__claim{ font-weight: 600; color: var(--color-text); margin-bottom: 0.3rem; }
.verify-list__meta{ font-size: 0.85rem; color: var(--color-text-faint); }
.verify-list__note{ font-weight: 400; color: var(--color-text-faint); }

/* Declared-but-not-verified details (decisions-log §3): must NOT reuse any
   check/tick shape or color scheme from .verify-list. Same width/container
   and the same list rhythm as .verify-list right above it — the distinction
   is plain typographic hierarchy (small-caps label, same width/rhythm as
   .verify-list right above it) — no card, no shadow, no border, so it
   reads as a continuation of the page instead of a detached widget. */
.declared-info__heading{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.9rem;
}

.declared-credentials__intro{
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  max-width: 70ch;
}
.declared-credentials__list{
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.declared-credentials__list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.declared-credentials__list li:last-child{ padding-bottom: 0; border-bottom: none; }
.declared-credentials__claim{ flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--color-text); }

/* Neutral text-only label for pending/unverified declared credentials — no
   icon, no red/green/warning color (decisions-log §3): a symbol next to an
   unverified claim reads as a mark against the trainer, when the gap is
   almost always the issuer's, not theirs. Green ✓ stays the only shape on
   the page, reserved for status:verified. */
.status-pill{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-faint);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.reviews-grid{
  display: grid;
  align-items: stretch;
  gap: 1.1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px){
  .reviews-grid{ grid-template-columns: repeat(2, 1fr); }
}

.review-card{
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-bg-raised);
  padding: 1.5rem;
}
.review-card__quote{ font-size: 0.98rem; line-height: 1.6; margin-bottom: 0.9rem; }
.review-card__meta{ font-size: 0.82rem; color: var(--color-text-faint); }

.reviews-disclaimer{ font-size: 0.85rem; color: var(--color-text-faint); max-width: 65ch; }

/* ==========================================================================
   Article detail (sample blog post page)
   ========================================================================== */

.article-header{ max-width: 70ch; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.article-header h1{
  font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-block: 1rem;
}

.article-body{ max-width: 68ch; }
.article-body p{ font-size: 1.05rem; margin-bottom: 1.5rem; line-height: 1.7; }
.article-body h2{
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.article-body h2:first-child{ margin-top: 0; }

/* Sits inside .article-main now — width follows the text column instead of
   breaking full-bleed out of .wrap. A fixed aspect-ratio cropped every photo
   to the same shape regardless of what was actually uploaded (a tall photo
   became a thin strip). --banner-ratio lets each usage declare the shape
   that actually fits its image (defaults to a typical landscape photo);
   max-height still caps how tall any single ratio can get. background-size:
   cover is the background-image equivalent of object-fit:cover — the site
   uses data-bg divs everywhere instead of <img>, so there's no element to
   apply object-fit to directly, but the visual result (fill the box, crop
   to center, never distort) is the same. */
.article-banner{
  width: 100%;
  aspect-ratio: var(--banner-ratio, 16 / 9);
  max-height: 420px;
  background-color: var(--color-bg-raised);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.article-eyebrow{ margin-bottom: 0; }

.article-deck{
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin-top: 0.75rem;
}

.article-byline{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--color-text-faint);
  margin-top: 1.25rem;
}
.article-byline__dot{ opacity: 0.6; }

/* Reusable author pattern (blog-article-sample.html header, blog.html
   card) — avatar + linked name, same two classes wherever an article
   credits a trainer as its author. .author-byline is layout-only, so it
   works on an <a> (the article header, where the profile link is real
   content) or a <span> (an article-card, which is already itself one big
   <a> to the article — nesting a second <a> for the author inside it
   would be invalid HTML and unpredictable to click). .author-avatar reuses
   the site's existing fallback-avatar background (see .trainer-photo,
   .profile-photo above) so a future article's author never shows a
   broken/empty photo before a real one is added. */
.author-byline{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
}
a.author-byline:hover{ color: var(--color-blue-hover); }
.author-avatar{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-bg-raised-2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* Two-column layout: sticky TOC + article content. Sidebar comes first in
   source order so it naturally sits above the content on mobile too — the
   grid only reorders into side-by-side at the desktop breakpoint. */
.article-layout{
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 960px){
  .article-layout{ grid-template-columns: 240px 1fr; gap: 3.5rem; }
}

.article-toc{ font-size: 0.9rem; }
@media (min-width: 960px){
  /* top offset = ύψος του sticky site-header (72px + 1px border) */
  .article-toc{
    position: sticky;
    top: calc(73px + 1.5rem);
    max-height: calc(100vh - 73px - 3rem);
    overflow-y: auto;
  }
}

.article-toc__mobile{
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 0.9rem 1.1rem;
}
@media (min-width: 960px){
  .article-toc__mobile{ background: none; border: none; padding: 0; }
  .article-toc__mobile summary{ display: none; }
  .article-toc__mobile .article-toc__list{ display: flex !important; }
}

.article-toc__mobile summary{
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.article-toc__list{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 0.9rem;
}
.article-toc__mobile[open] summary{ margin-bottom: 0; }
.article-toc__list a{
  display: block;
  color: var(--color-text-faint);
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.article-toc__list a:hover{ color: var(--color-text); }
.article-toc__list a.is-active{
  color: var(--color-blue-hover);
  border-left-color: var(--color-blue-hover);
  font-weight: 600;
}

/* Callouts */
.callout{
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}
.callout__label{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.callout p:last-child{ margin-bottom: 0; }

.callout--quick{
  background: var(--color-blue-tint);
  border-left: 3px solid var(--color-blue-hover);
}
.callout--quick .callout__label{ color: var(--color-blue-hover); }
.callout--quick p{ font-size: 1rem; }

.callout--facts{
  background: var(--color-bg-raised-2);
  border: 1px solid var(--color-border-strong);
}
.callout--facts .callout__label{ color: var(--color-text-faint); }
.callout__facts{ display: flex; flex-direction: column; gap: 0.9rem; margin: 0; }
.callout__facts dt{ font-weight: 700; color: var(--color-text); }
.callout__facts dd{ margin: 0.15rem 0 0; color: var(--color-text-muted); font-size: 0.92rem; }

/* Figures — same data-bg lazy-load pattern as the rest of the site, no <img> */
.article-body figure{ margin: 2rem 0; }
.article-figure{
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-raised);
  background-size: cover;
  background-position: center;
}
.article-body figcaption{
  font-size: 0.85rem;
  color: var(--color-text-faint);
  margin-top: 0.6rem;
}

.article-body sup a{
  color: var(--color-blue-hover);
  font-weight: 600;
  text-decoration: none;
}
.article-body sup a:hover{ text-decoration: underline; }

/* Legal/policy pages — subheadings, tables, plain lists inside .article-body */
.article-body h3{ font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: 0.75rem; }
.article-body ul.policy-list{ margin: 0 0 1.5rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.article-body ul.policy-list li{ font-size: 1.02rem; line-height: 1.65; color: var(--color-text-muted); }

.table-scroll{ overflow-x: auto; margin-bottom: 1.75rem; max-width: 100%; }
.policy-table{
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 0.88rem;
}
.policy-table th,
.policy-table td{
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.policy-table th{
  background: var(--color-bg-raised-2);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.policy-table td{ color: var(--color-text-muted); }
.policy-table td strong{ color: var(--color-text); }

.article-faq details{
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 0;
}
.article-faq details:first-of-type{ border-top: 1px solid var(--color-border); }
.article-faq summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  font-size: 1.02rem;
}
.article-faq details p{ margin-top: 0.9rem; margin-bottom: 0; font-size: 1rem; }

.article-glossary dl{ display: flex; flex-direction: column; gap: 1.1rem; }
.article-glossary dt{ font-weight: 700; color: var(--color-text); font-family: var(--font-serif); }
.article-glossary dd{ margin: 0.25rem 0 0; color: var(--color-text-muted); }

.article-refs ol{ padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.article-refs li{ font-size: 0.92rem; color: var(--color-text-muted); }
.article-refs li:target{ color: var(--color-text); }

.back-to-top{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-blue);
  border: 1px solid var(--color-blue);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.back-to-top:hover{ background: var(--color-blue-hover); transform: translateY(-2px); }
.back-to-top[hidden]{ display: none; }
.back-to-top .icon{ width: 18px; height: 18px; transform: rotate(-90deg); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid{
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

.contact-info{ display: flex; flex-direction: column; gap: 2rem; }
.contact-info h3{
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-bottom: 0.7rem;
}
.contact-info a{
  display: block;
  color: var(--color-text);
  font-size: 1rem;
  padding-block: 0.2rem;
  transition: color var(--dur-fast) var(--ease-out);
  width: fit-content;
}
.contact-info a:hover{ color: var(--color-blue-hover); }

.contact-cta{ align-self: start; }

@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1.4fr; gap: 4rem; }
}

/* ==========================================================================
   Audience split
   ========================================================================== */

.audience-grid{
  display: grid;
  align-items: stretch;
  gap: 1.25rem;
}

.audience-card{
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  box-shadow: 0 4px 16px -8px rgba(20, 20, 20, 0.1);
}
.audience-card h3{ font-size: 1.5rem; margin-bottom: 0.75rem; }
.audience-card p{ margin-bottom: 1.5rem; max-width: 40ch; }

.audience-card--accent{
  background: var(--color-blue-tint);
  border-color: var(--color-blue-tint-strong);
}

@media (min-width: 780px){
  .audience-grid{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band{
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.cta-band::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21, 23, 29, 0.93);
  z-index: 0;
}
.cta-band__inner{
  position: relative;
  z-index: 1;
  text-align: left;
  /* Sits on the always-dark ::before scrim above, not the page background —
     var(--color-border) would be near-invisible there. */
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
.cta-band h2{ max-width: 16ch; color: #F5F4F1; }

@media (min-width: 780px){
  .cta-band__inner{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  /* Footer is deliberately always dark-toned, independent of the page's
     own (light) tokens — pin its own local values here rather than
     inheriting :root. */
  background: #15171d;
  --color-bg: #15171d;
  --color-bg-raised: #1b1e26;
  --color-border: #2a2e3a;
  --color-border-strong: #383e4d;
  --color-text: #f1efe8;
  --color-text-muted: #a9adb9;
  --color-text-faint: #6d7280;

  border-top: 1px solid var(--color-border);
  padding-top: clamp(3rem, 2rem + 4vw, 4.5rem);
}

.footer-grid{
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.site-footer .logo{ color: var(--color-text); }
.footer-brand p{ margin-top: 1rem; max-width: 32ch; font-size: 0.9rem; color: var(--color-text-muted); }

.footer-col h4{
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: 1rem;
}
.footer-col a{
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding-block: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover{ color: var(--color-text); }

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-border);
  padding-block: 1.5rem;
}
.footer-bottom p{ font-size: 0.82rem; color: var(--color-text-faint); }

.footer-legal{ display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.footer-legal a{ color: var(--color-text-faint); transition: color var(--dur-fast) var(--ease-out); }
.footer-legal a:hover{ color: var(--color-text); }
.footer-legal span{ color: var(--color-text-faint); }

@media (min-width: 720px){
  .footer-grid{ grid-template-columns: 2fr 1fr 1fr; }
}