/* TK Coaching front page. Bright, warm and family friendly. Cream, deep pitch green, one sunshine gold.
   Fonts: Bricolage Grotesque (headings, light) and Figtree (body). No scroll effects anywhere. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../vendor/fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../vendor/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --cream: #F7F1E3;
  --paper: #FBF7EC;
  --ink: #17281F;
  --ink-soft: #46564B;
  --green: #163A2A;
  --green-2: #1F4D39;
  --gold: #E3AE3B;
  --gold-deep: #8A6516;
  --gold-light: #EBC76E;
  --line: rgba(23, 40, 31, .14);
  --r: 14px;
  --bar: 64px;
  --gut: clamp(18px, 4.4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --head: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--gold-light); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--head); font-weight: 300; margin: 0; letter-spacing: -.022em; line-height: 1.04; }
h1 { font-size: clamp(2.5rem, 1.2rem + 5.3vw, 5.4rem); }
h2 { font-size: clamp(2rem, 1rem + 3.5vw, 3.9rem); }
h3 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); line-height: 1.08; }
p { margin: 0 0 1em; }
.sub { color: var(--ink-soft); font-size: 1.15rem; max-width: 34em; margin-top: 1em; }
.small { font-size: .9rem; }
.wrap { width: min(100% - 2 * var(--gut), 1240px); margin-inline: auto; }
.tbc { color: var(--gold-deep); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .28em; }

/* buttons and links: one soft corner, never a pill */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95em 1.6em; border: 0; border-radius: 12px;
  background: var(--gold); color: var(--ink);
  font: 500 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  transition: transform .4s var(--ease), background-color .3s var(--ease);
}
.btn:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-small { padding: .8em 1.25em; font-size: .95rem; }
.link {
  color: var(--green); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .32em;
  transition: color .3s var(--ease), text-underline-offset .3s var(--ease);
}
.link:hover { color: var(--gold-deep); text-underline-offset: .5em; }

/* top bar: his real logo, untouched, on the brand green */
.bar {
  height: var(--bar); background: var(--green); color: var(--cream);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
}
.bar-logo { display: block; margin-right: auto; }
.bar-logo img { height: 46px; width: auto; }
.bar-links { display: none; gap: 28px; }
.bar-links a { color: var(--cream); text-decoration: none; font-size: .98rem; opacity: .86; transition: opacity .3s; }
.bar-links a:hover { opacity: 1; }
@media (min-width: 900px) { .bar-links { display: flex; } }

/* ---------- HERO ---------- */
.hero {
  --slot-h: min(74dvh, 760px);
  --slot-w: calc(var(--slot-h) * 2 / 3);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100dvh - var(--bar));
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: clamp(24px, 4vw, 48px) var(--gut);
  background:
    radial-gradient(52vmax 52vmax at 80% 48%, rgba(227, 174, 59, .22), transparent 68%),
    var(--cream);
}
.hero::after {            /* paper grain, static, never over scrolling content */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .16  0 0 0 0 .12  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.ring {                    /* the centre circle of a pitch, drawn in one thin line */
  position: absolute; z-index: 0; aspect-ratio: 1; width: calc(var(--slot-h) * 1.02);
  right: calc(var(--gut) + var(--slot-w) / 2 - var(--slot-h) * .51);
  top: 50%; translate: 0 -50%;
  border: 2px solid rgba(22, 58, 42, .11); border-radius: 50%;
}
.hero-copy { position: relative; z-index: 2; max-width: 40rem; }
.js .hero-copy { visibility: hidden; }
.hero-sub { font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem); color: var(--ink-soft); max-width: 29em; margin: 1.4em 0 1.6em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 1.8em; }
.hero-note { font-size: .98rem; color: var(--ink-soft); margin: 0; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wi { display: inline-block; }

.hero-photo {
  position: relative; z-index: 3; justify-self: end;
  height: var(--slot-h); aspect-ratio: 2 / 3;
}
.frame {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r);
  background: #DCD3BE; transform-origin: 0 0;
  box-shadow: 0 30px 60px -28px rgba(22, 58, 42, .45);
}
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .g { z-index: 1; }

.sheet {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  padding: 20px var(--gut) 36px; pointer-events: none;
}
.sheet-grid {
  --cols: 5; --gap-x: 8px; --gap-y: 24px;
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap-y) var(--gap-x); width: min(100%, 1320px);
  padding: clamp(12px, 2vw, 26px) clamp(12px, 2vw, 26px) 12px;
}
.paper {                  /* the printed sheet itself */
  position: absolute; inset: 0; z-index: -1; border-radius: 10px;
  background: #FFFDF7; box-shadow: 0 44px 70px -42px rgba(22, 58, 42, .5), 0 2px 6px rgba(22, 58, 42, .06);
}
.sheet-cap {
  grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: -4px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(23, 40, 31, .55);
}
.cell { position: relative; aspect-ratio: 2 / 3; }
.cell .frame { box-shadow: 0 10px 22px -14px rgba(22, 58, 42, .5); }
.num {
  position: absolute; left: 1px; bottom: -17px;
  font-size: 10px; letter-spacing: .16em; color: rgba(23, 40, 31, .5);
}
.pencil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.pencil path { fill: none; stroke: var(--gold-deep); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

@media (min-width: 900px) {
  .sheet-grid { --cols: 10; --gap-x: 10px; --gap-y: 28px; }
}
@media (max-width: 899px) {
  .hero {
    --slot-h: min(40dvh, 400px);
    grid-template-columns: 1fr; align-content: center; gap: 22px;
    background:
      radial-gradient(70vmax 70vmax at 50% 22%, rgba(227, 174, 59, .22), transparent 66%),
      var(--cream);
  }
  .hero-photo { order: -1; justify-self: center; }
  .ring { right: 50%; translate: 50% -50%; top: calc(var(--slot-h) / 2 + 28px); }
  .hero-copy { max-width: 34rem; }
  h1 { font-size: clamp(2.3rem, 9vw, 3.4rem); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero { --slot-h: 38dvh; }
}

/* ---------- COACH ---------- */
.coach {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px); align-items: center;
  width: min(100% - 2 * var(--gut), 1340px); margin-inline: auto;
  padding-block: clamp(72px, 10vw, 150px);
}
.coach-photo img { width: 100%; height: auto; border-radius: var(--r); aspect-ratio: 5 / 3; object-fit: cover; }
.coach-text .lead { font-size: 1.25rem; color: var(--ink); margin-top: 1.4em; }
.three {
  font-family: var(--head); font-weight: 300; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); color: var(--green);
  display: flex; flex-wrap: wrap; gap: .1em .5em; margin: 1em 0 1em;
}
.three span:nth-child(2) { color: var(--gold-deep); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding: .8em 0 .8em 1.7em; border-top: 1px solid var(--line);
}
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before {
  content: ""; position: absolute; left: .2em; top: 1.05em; width: .5em; height: .85em;
  border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); rotate: 40deg;
}
@media (max-width: 899px) { .coach { grid-template-columns: 1fr; } }

/* ---------- SESSIONS ---------- */
.sessions { background: var(--paper); padding-block: clamp(72px, 10vw, 150px); }
.rows { list-style: none; margin: clamp(32px, 5vw, 64px) 0 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 112px minmax(0, 1.4fr) minmax(0, .9fr) auto;
  grid-template-areas: "thumb main facts book";
  gap: 18px clamp(20px, 3vw, 48px); align-items: center;
  padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row-thumb {
  grid-area: thumb; width: 112px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r);
  transition: transform .6s var(--ease);
}
.row:hover .row-thumb { transform: rotate(-3deg) scale(1.04); }
.row-main { grid-area: main; }
.row-main p { margin: .7em 0 0; color: var(--ink-soft); max-width: 32em; }
.row-facts { grid-area: facts; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.row-facts div { display: flex; gap: 10px; }
.row-facts dt { color: var(--ink-soft); min-width: 7.5em; }
.row-facts dd { margin: 0; }
.row-book { grid-area: book; justify-self: end; white-space: nowrap; }
@media (max-width: 899px) {
  .row {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: "thumb main" "facts facts" "book book";
  }
  .row-thumb { width: 84px; height: auto; align-self: start; }
  .row-book { justify-self: start; }
}

/* ---------- PHOTOS ---------- */
.photos { padding-block: clamp(72px, 10vw, 150px); }
.gallery-wrap { container-type: inline-size; margin-top: clamp(32px, 5vw, 64px); }
.gallery {
  --g: 14px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g);
  grid-auto-rows: calc((1.5 * (4 * ((100cqw - 11 * var(--g)) / 12) + 3 * var(--g)) - 4 * var(--g)) / 5);
}
.g { padding: 0; border: 0; background: #DCD3BE; border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.g img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.g:hover img, .g:focus-visible img { transform: scale(1.045); }
.g1 { grid-column: 1 / 5;  grid-row: 1 / 6; }
.g2 { grid-column: 5 / 10; grid-row: 1 / 4; }
.g2 img { object-position: 50% 60%; }
.g3 { grid-column: 10 / 13; grid-row: 1 / 4; }
.g3 img { object-position: 50% 38%; }
.g4 { grid-column: 5 / 9;  grid-row: 4 / 6; }
.g4 img { object-position: 50% 68%; }
.g5 { grid-column: 9 / 13; grid-row: 4 / 6; }
.g5 img { object-position: 50% 62%; }
.g6 { grid-column: 1 / 5;  grid-row: 6 / 11; }
.g7 { grid-column: 5 / 9;  grid-row: 6 / 11; }
.g8 { grid-column: 9 / 13; grid-row: 6 / 11; }
@media (max-width: 719px) {
  .gallery { --g: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .g { grid-column: auto; grid-row: auto; aspect-ratio: 2 / 3; }
  .g1 { grid-column: 1 / 3; aspect-ratio: 4 / 5; }
  .g2 { grid-column: 1 / 3; aspect-ratio: 4 / 3; }
}

/* ---------- PARENTS ---------- */
.parents { background: var(--paper); padding-block: clamp(72px, 10vw, 150px); }
.parents-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.parents-head .link { display: inline-block; margin-top: 1.6em; }
.parents-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote {
  margin: 0; padding: clamp(22px, 3vw, 34px); border-radius: var(--r);
  border: 1.5px dashed rgba(23, 40, 31, .28); color: var(--ink-soft);
}
.quote-big { grid-column: 1 / 3; }
.quote blockquote { margin: 0 0 .8em; font: 300 clamp(1.3rem, 1rem + 1.2vw, 2rem)/1.2 var(--head); letter-spacing: -.015em; }
.quote-big blockquote { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem); }
.quote figcaption { font-size: .92rem; }
@media (max-width: 899px) {
  .parents-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .parents-slots { grid-template-columns: 1fr; }
  .quote-big { grid-column: auto; }
}

/* ---------- SAFE ---------- */
.safe { background: var(--green); color: var(--cream); padding-block: clamp(72px, 10vw, 150px); }
.safe .sub { color: rgba(247, 241, 227, .78); }
.safe-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 1.05em 0; border-top: 1px solid rgba(247, 241, 227, .18); font-size: 1.1rem;
}
.checks li:last-child { border-bottom: 1px solid rgba(247, 241, 227, .18); }
.safe .tbc { color: var(--gold-light); font-size: .95rem; white-space: nowrap; }
@media (max-width: 899px) { .safe-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(72px, 10vw, 150px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 1.15em 0; font: 400 1.25rem/1.25 var(--head); letter-spacing: -.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 300 1.9rem/1 var(--head); color: var(--gold-deep); transition: rotate .4s var(--ease); }
details[open] summary::after { rotate: 45deg; }
details p { margin: 0 0 1.3em; color: var(--ink-soft); max-width: 36em; }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- BOOK ---------- */
.book { background: var(--paper); padding-block: clamp(72px, 10vw, 150px); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.contact { list-style: none; margin: 2em 0 0; padding: 0; max-width: 26rem; }
.contact li { display: flex; justify-content: space-between; gap: 16px; padding: .8em 0; border-top: 1px solid var(--line); }
.contact li:last-child { border-bottom: 1px solid var(--line); }
.contact li > span:first-child { color: var(--ink-soft); }
.form {
  display: grid; gap: 18px; padding: clamp(22px, 3vw, 38px); border-radius: 20px;
  background: var(--cream); box-shadow: 0 40px 70px -40px rgba(22, 58, 42, .4);
}
.form label { display: grid; gap: 8px; font-size: .95rem; color: var(--ink-soft); }
.form-two { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.form input, .form select, .form textarea {
  width: 100%; padding: .85em 1em; border-radius: 12px; border: 1.5px solid rgba(23, 40, 31, .22);
  background: #FFFDF7; color: var(--ink); font: 400 1rem/1.4 var(--body);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(227, 174, 59, .35);
}
.form .btn { justify-self: start; }
.form-note { margin: 0; font-size: .9rem; color: var(--ink-soft); min-height: 1.4em; }
@media (max-width: 899px) { .book-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form-two { grid-template-columns: 1fr; } }

/* ---------- FOOTER ---------- */
.foot { background: var(--green); color: var(--cream); padding: clamp(56px, 8vw, 110px) var(--gut) 36px; }
.foot-motto { font: 300 clamp(1.8rem, 1rem + 3.4vw, 3.6rem)/1.08 var(--head); letter-spacing: -.02em; max-width: 16em; margin-bottom: 1.6em; }
.foot-small { margin: 0; font-size: .92rem; color: rgba(247, 241, 227, .7); }

/* ---------- LIGHTBOX ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 640px); max-height: 94dvh; overflow: visible; }
.lightbox::backdrop { background: rgba(15, 33, 24, .84); }
.lightbox img { width: 100%; max-height: 86dvh; object-fit: contain; border-radius: var(--r); }
.lightbox-close {
  position: absolute; right: 0; top: -46px; padding: .6em 1.1em; border: 0; border-radius: 12px;
  background: var(--cream); color: var(--ink); font: 500 .95rem var(--body); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}