/* ============================================================================
   Isaac Lee Tennis
   ----------------------------------------------------------------------------
   Presence comes from scale, colour and photography — not from decoration.
   One motion idea (fade + lift), applied consistently with a stagger.

   Everything adjustable is in :root below.
   ========================================================================== */

:root {
  /* Strictly black and white. The only "colour" decisions here are how far
     down from white the greys sit. */
  --bg:      #ffffff;
  --bg-soft: #f4f4f2;   /* the alternating band */
  --card:    #fafafa;   /* card fill on white sections */
  --ink:     #0d0d0d;   /* the full-bleed black blocks */
  --accent:  #111111;   /* accent marks — black, not a colour */
  --text:    #111111;
  --muted:   #5e5e5e;
  --line:    #e5e5e3;

  /* System UI font — native-looking, instant, zero network requests. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --wrap: 1140px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7rem);

  --radius: 6px;

  /* Motion. This curve moves most of the distance early and settles slowly,
     which is what makes a fade feel smooth rather than mechanical. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fade: .8s;    /* text and blocks arriving */
  --dur-img: 1.15s;   /* photos settling out of a slight zoom */
  --dur-ui: .3s;      /* hovers */
}

/* ---------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
dl, dd { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--text); color: #fff; padding: .7rem 1.1rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.band { background: var(--bg-soft); }

/* --------------------------------------------------------------- Header -- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 66px; }
.brand {
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em;
  text-decoration: none; margin-right: auto;
}
.nav { display: flex; gap: 1.7rem; }
.nav a {
  font-size: .9375rem; color: var(--muted); text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
.nav a:hover { color: var(--text); }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px; margin-inline: auto;
  background: var(--text); transition: transform var(--dur-ui) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* -------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.5rem;
  font-size: .9375rem; font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease),
              color var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover { background: #383838; }   /* accent is black now, so lift the hover instead */

.btn-quiet { border-color: var(--line); color: var(--text); background: var(--bg); }
.btn-quiet:hover { border-color: var(--text); }

/* For use on the dark green block */
.btn-invert { background: #fff; color: var(--ink); }
.btn-invert:hover { background: #f0efe9; }
.btn-outline { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.btn-lg { padding: .95rem 1.8rem; font-size: 1rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .875rem; }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

.link-btn {
  padding: 0; font-size: .9375rem; font-weight: 500;
  color: var(--text);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color var(--dur-ui) var(--ease);
}
.link-btn:hover { color: var(--muted); }

/* Small label above each heading. A short green rule instead of the
   wide-tracked uppercase that every template reaches for. */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: .875rem; color: var(--muted); margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--accent); flex: 0 0 auto;
}

/* ----------------------------------------------------------------- Hero -- */
.hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;               /* guards the bleed against side-scroll */
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* The text stays aligned to the container, but the photo runs off the right
   edge of the screen. Breaking the grid on one side only is what stops the
   layout feeling like a row of boxes. */
.hero-text {
  padding-left: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  padding-right: var(--pad);
}
.hero h1 {
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  letter-spacing: -0.055em;
  line-height: .92;
  margin-bottom: 1.4rem;
}
.hero-sub { font-size: 1.1875rem; color: var(--muted); max-width: 42ch; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero-facts dt { font-size: .8125rem; color: var(--muted); margin-bottom: .3rem; }
.hero-facts dd { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.hero-facts dd span { font-size: .875rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* No rounded corner on the bleeding side — it has to meet the edge cleanly. */
.hero-photo { margin: 0; overflow: hidden; }
.hero-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* ------------------------------------------------------------ Statement -- */
.statement {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.statement blockquote {
  margin: 0;
  max-width: 22ch;                /* forces a dramatic line break */
  font-size: clamp(1.85rem, 5.2vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

/* --------------------------------------------------------- Shared blocks -- */
.two-col {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.section-head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head h2, .about-text h2, .contact-text h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}
.section-sub { color: var(--muted); margin-top: 1rem; }

/* ---------------------------------------------------------------- About -- */
.about-photo { margin: 0; border-radius: var(--radius); overflow: hidden; }
.about-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-text h2 { margin-bottom: 1.4rem; }
.about-text p { color: var(--muted); max-width: 60ch; }

.facts {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 2.25rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.facts dt { font-size: .8125rem; color: var(--muted); margin-bottom: .25rem; }
.facts dd { font-weight: 600; font-size: 1.125rem; }

/* -------------------------------------------------------------- Lessons -- */
.lesson-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.lesson {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease);
}
.lesson:hover {
  transform: translateY(-3px);
  border-color: #d6d3cb;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}
.lesson h3 { font-size: 1.125rem; }
.lesson p { color: var(--muted); font-size: 1rem; }

.price {
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em;
  margin: .5rem 0 .9rem; line-height: 1.2;
}
.price span { font-size: .875rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* --------------------------------------------------------------- Photos -- */
.photos { padding-block: var(--section-y); }
.photos .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Edge to edge, hairline gaps. No container, no rounded corners — the run of
   images reads as one band rather than three cards. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
/* Two frames rather than three. Left on the three-column grid a pair reads as
   a missing photo rather than a deliberate pair. */
.photo-strip--two { grid-template-columns: repeat(2, 1fr); }
.photo {
  position: relative;
  display: block; padding: 0;
  overflow: hidden;
  background: var(--ink);
}
.photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform .6s var(--ease), filter .5s var(--ease), opacity .5s var(--ease);
}
.photo:hover img { transform: scale(1.04); }

/* Caption sits on the image and slides up on hover. */
.photo-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem .9rem;
  font-size: .8125rem; font-weight: 500; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.photo:hover .photo-tag, .photo:focus-visible .photo-tag { opacity: 1; transform: none; }

/* ------------------------------------------------- Black-and-white photos --
   Every photograph on the page is desaturated and returns to colour on hover.
   On a monochrome layout this is what keeps the images part of the design
   instead of three colour rectangles dropped into it. The lightbox is
   deliberately left in full colour, so opening a photo is the reward. */
.hero-photo img,
.about-photo img,
.photo img {
  filter: grayscale(100%) contrast(1.05);
  transition: filter .55s var(--ease), transform .6s var(--ease), opacity .5s var(--ease);
}
.hero-photo:hover img,
.about-photo:hover img,
.photo:hover img {
  filter: grayscale(0%) contrast(1.02);
}

/* -------------------------------------------------------------- Reviews -- */
.review-list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.review {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
.review blockquote { margin: 0 0 1.5rem; font-size: 1.0625rem; }
.review figcaption {
  display: flex; align-items: center; gap: .85rem;
  font-size: .9375rem; color: var(--muted);
  padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.review figcaption strong { display: block; color: var(--text); font-weight: 600; }

.avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; background: #ebe9e3;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { font-size: .8125rem; font-weight: 600; color: var(--muted); }

/* -------------------------------------------------------------- Contact -- */
.contact { background: var(--ink); color: #fff; }
.contact-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-text h2 { margin-bottom: 1.2rem; }
.contact-text p { color: rgba(255, 255, 255, .76); max-width: 44ch; }

.contact-details { display: grid; gap: 1.4rem; }
.contact-details dt { font-size: .8125rem; color: rgba(255, 255, 255, .58); margin-bottom: .2rem; }
.contact-details dd { font-weight: 500; }
.contact-details a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  transition: border-color var(--dur-ui) var(--ease);
}
.contact-details a:hover { border-bottom-color: #fff; }

/* Inside the popups the details sit on white, so recolour them back. */
.modal-details dt { color: var(--muted); }
.modal-details a { border-bottom-color: var(--line); }
.modal-details a:hover { border-bottom-color: var(--text); }

/* --------------------------------------------------------------- Footer -- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .6); }
.footer-row {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .9375rem;
}
.footer-row p { margin: 0; }
.footer-row a { text-decoration: none; transition: color var(--dur-ui) var(--ease); }
.footer-row a:hover { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ==========================================================================
   MOTION
   Two variants of one idea. --d staggers siblings; everything is scoped to
   .js so the page is never blank if the script fails to load.
   ========================================================================== */
.js .fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-fade) var(--ease),
              transform var(--dur-fade) var(--ease);
  transition-delay: var(--d, 0s);
}
.fade.is-in { opacity: 1; transform: none; }

/* Photos fade in while easing back from a slight zoom. */
.fade-img { border-radius: var(--radius); overflow: hidden; }
.js .fade-img img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--dur-fade) var(--ease),
              transform var(--dur-img) var(--ease);
  transition-delay: var(--d, 0s);
}
.fade-img.is-in img { opacity: 1; transform: scale(1); }

/* Cascade grouped items. */
.lesson-list .lesson:nth-child(2)  { --d: .09s; }
.lesson-list .lesson:nth-child(3)  { --d: .18s; }
.photo-strip .photo:nth-child(2)   { --d: .09s; }
.photo-strip .photo:nth-child(3)   { --d: .18s; }
.review-list .review:nth-child(2)  { --d: .09s; }

/* ==========================================================================
   POPUPS
   ========================================================================== */
.modal, .lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none;
  padding: 0; border: none; background: transparent;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease),
              display var(--dur-ui) var(--ease) allow-discrete,
              overlay var(--dur-ui) var(--ease) allow-discrete;
}
.modal:not([open]), .lightbox:not([open]) { display: none; }
.modal[open], .lightbox[open] { opacity: 1; }
@starting-style { .modal[open], .lightbox[open] { opacity: 0; } }

.modal::backdrop, .lightbox::backdrop {
  background: rgba(15, 20, 16, 0);
  backdrop-filter: blur(0px);
  transition: background-color var(--dur-ui) var(--ease), backdrop-filter var(--dur-ui) var(--ease);
}
.modal[open]::backdrop, .lightbox[open]::backdrop {
  background: rgba(15, 20, 16, .5);
  backdrop-filter: blur(4px);
}
@starting-style {
  .modal[open]::backdrop, .lightbox[open]::backdrop {
    background: rgba(15, 20, 16, 0); backdrop-filter: blur(0px);
  }
}

.modal-card {
  position: relative;
  width: min(470px, calc(100vw - 2rem));
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--bg);
  border-radius: 10px;
  padding: clamp(1.75rem, 4vw, 2.25rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
  transform: translateY(10px) scale(.985);
  transition: transform var(--dur-ui) var(--ease);
}
.modal[open] .modal-card { transform: none; }
@starting-style { .modal[open] .modal-card { transform: translateY(10px) scale(.985); } }

.modal-card h3 { font-size: 1.3rem; margin-bottom: .7rem; }
.modal-card > p { color: var(--muted); }
.modal-card ul { margin: 1.25rem 0 0; }
.modal-card li {
  position: relative; padding: .6rem 0 .6rem 1.2rem;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.modal-card li::before {
  content: ""; position: absolute; left: 0; top: 1.25em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.modal-card .contact-details { margin: 1.4rem 0; }

.modal-close {
  position: absolute; top: .65rem; right: .8rem;
  width: 2rem; height: 2rem; font-size: 1.5rem; line-height: 1;
  color: var(--muted); border-radius: var(--radius);
  transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.modal-close:hover { color: var(--text); background: var(--bg-soft); }

.lightbox figure { margin: 0; display: grid; justify-items: center; gap: .75rem; padding: 1.5rem; }
.lightbox img { max-width: min(92vw, 640px); max-height: 82vh; width: auto; border-radius: var(--radius); }
.lightbox figcaption { font-size: .875rem; color: #fff; }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; color: #fff; }
.lightbox-close:hover { color: #fff; background: rgba(255, 255, 255, .16); }

body.modal-open { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 940px) {
  .hero-grid, .two-col, .contact-grid { grid-template-columns: 1fr; }
  .hero { padding-block: 2.5rem 1rem; }
  .hero-photo { order: -1; }
  .hero-photo img, .about-photo img { aspect-ratio: 3/2; }
  .about-photo { order: -1; }
  .lesson-list, .review-list { grid-template-columns: 1fr; }
  .contact-details { margin-top: 1rem; }
}

@media (max-width: 680px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0 var(--pad) .75rem;
  }
  .nav.is-open { display: flex; animation: navIn .28s var(--ease); }
  @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav a:last-child { border-bottom: none; }

  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip .photo:first-child { grid-column: 1 / -1; }
  /* The three-up strip leads with one full-width frame. A pair doing that
     would leave the second stranded at half width, so it stacks instead. */
  .photo-strip--two { grid-template-columns: 1fr; }
  .photo-strip--two .photo:first-child { grid-column: auto; }
  .photo-tag { opacity: 1; transform: none; }   /* no hover on touch */
  .actions .btn { width: 100%; }
  .hero-facts, .facts { gap: 1.5rem 2.25rem; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
/* Reduced motion means "no movement", not "no life". The accessibility
   guidance targets large, sliding, vestibular-triggering motion — a plain
   cross-fade is fine and is explicitly not the concern. So here we strip every
   translate, scale and parallax, and keep a gentle opacity fade.

   This matters more than it sounds: anyone who has Windows animations switched
   off (Settings > Accessibility > Visual effects) lands in this branch. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Movement off. */
  .js .fade { transform: none; transition: opacity .55s var(--ease); }
  .js .fade-img img { transform: none; transition: opacity .55s var(--ease); }
  .fade.is-in { transform: none; }
  .fade-img.is-in img { transform: none; }

  /* Hover lifts and zooms off too — colour changes are harmless and stay. */
  .btn:hover, .lesson:hover { transform: none; }
  .photo:hover img { transform: none; }
  .modal-card, .modal[open] .modal-card { transform: none; }
}

@media print {
  .header, .nav-toggle, .actions { display: none; }
  .fade, .fade-img img { opacity: 1 !important; transform: none !important; }
  .contact, .footer { background: #fff; color: #000; }
}