/* The Mindfulness Place, programme landing pages.
   One stylesheet for every page in every vertical.
   Per page you change --hero. Per vertical you add a body class. Nothing else. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* PER PAGE: the programme's hero photograph. The only line that changes. */
  --hero:url('assets/sport-mindfulness-for-football-soccer-hero.webp');
  --cream:#f2f0eb;
  --shell:#e8e4da;
  --paper:#fbfaf7;
  --ink:#1a1a18;
  --mid:#6b6b62;
  --faint:#a8a296;
  --rule:#d4d0c8;
  --sport:#0F5C4E;   /* the accent. Overridden per vertical by the body class below. */
  --sport-soft:#a9cfc3;
  --tint:rgba(15,92,78,.06);
  --serif:Cormorant,'Times New Roman',serif;
  --sans:Outfit,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --frame:1180px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;text-wrap:balance;line-height:1.08}
p{margin:0;text-wrap:pretty}

.wrap{max-width:var(--frame);margin:0 auto;padding:0 40px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.lede{color:var(--mid);font-size:17px;max-width:62ch;text-wrap:pretty}
.btn{
  display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--sport);color:#fff;border-radius:3px;
  padding:14px 24px;text-decoration:none;border:0;
}
.btn:focus-visible,.quiet:focus-visible{outline:2px solid var(--sport);outline-offset:3px}
.quiet{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mid);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.quiet:hover{color:var(--ink);border-color:var(--ink)}
.sec{padding:104px 0;border-top:1px solid var(--rule)}
.sec__head{display:flex;flex-direction:column;gap:18px;margin-bottom:44px}
.sec h2{font-size:clamp(30px,3.4vw,42px)}
.it{font-style:italic;color:var(--mid)}

.shot{background:var(--shell);border:1px solid var(--rule)}
.shot--place{
  display:flex;flex-direction:column;gap:8px;align-items:center;
  justify-content:center;text-align:center;padding:32px;color:var(--faint);
}
.shot--place b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sport);font-weight:500;
}
.shot--place span{font-size:13px;max-width:34ch;line-height:1.6}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(242,240,235,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{width:30px;height:auto;flex:none}
.brand__txt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.brand__txt i{font-style:normal;color:var(--faint);display:block;letter-spacing:.2em}

/* ---------- hero ---------- */
.hero{padding:96px 0 104px}
.hero__grid{display:grid;grid-template-columns:1.22fr .78fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(42px,5.1vw,68px)}
.hero h1 em{display:block;font-style:italic;color:var(--sport)}
.hero__sub{margin-top:26px;color:var(--mid);font-size:17px}
.hero__act{margin-top:36px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero__note{margin-top:22px;font-size:13.5px;color:var(--faint)}
.hero .shot{aspect-ratio:4/5}

/* ---------- pattern ---------- */
.pattern{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.pattern div{padding:34px 32px 34px 0;border-right:1px solid var(--rule);color:var(--mid);font-size:15.5px;text-wrap:pretty}
.pattern div:last-child{border-right:0}
.pattern div:not(:first-child){padding-left:32px}
.pattern__no{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--sport);display:block;margin-bottom:14px}
.claim{margin-top:56px;font-family:var(--serif);font-size:clamp(26px,3vw,36px);line-height:1.2}

/* ---------- produces ---------- */
.produces{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plist li{padding:18px 0;border-bottom:1px solid var(--rule);color:var(--mid);font-size:15.5px;display:flex;gap:16px;text-wrap:pretty}
.plist li::before{content:'';flex:none;width:5px;height:5px;margin-top:11px;background:var(--sport)}

/* ---------- the one dark band ---------- */
.dark{background:var(--ink);color:var(--cream);padding:120px 0;text-align:center}
.dark p{font-family:var(--serif);font-size:clamp(28px,4vw,50px);line-height:1.16;max-width:20ch;margin:0 auto}
.dark em{font-style:italic;color:var(--sport-soft)}

/* ---------- portal preview ---------- */
.portal{background:var(--shell)}
.portal .sec{border-top:0}
.portal__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.steps li{display:grid;grid-template-columns:26px 1fr;gap:14px;color:var(--mid);font-size:15.5px;text-wrap:pretty}
.steps b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--sport);font-weight:500;padding-top:5px}


/* ---------- sessions, built like the portal ---------- */
.sess{display:flex;flex-direction:column}
.sess a{
  display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:baseline;
  background:var(--paper);border:1px solid var(--rule);border-bottom:0;
  padding:20px 24px;text-decoration:none;
}
.sess a:last-child{border-bottom:1px solid var(--rule)}
.sess a:hover{border-color:var(--ink);position:relative;z-index:1}
.sess a:not(:last-child):hover{border-bottom:1px solid var(--ink);margin-bottom:-1px}
.sess__no{font-family:var(--mono);font-size:11px;color:var(--faint)}
.sess__nm{font-family:var(--serif);font-size:23px}

/* ---------- price ---------- */
.price{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);background:var(--paper)}
.price__l{padding:48px;border-right:1px solid var(--rule)}
.price__r{padding:48px;background:var(--tint)}
.price__fig{display:flex;align-items:baseline;gap:10px;margin:22px 0 6px}
.price__fig strong{font-family:var(--serif);font-size:62px;font-weight:500;line-height:1}
.price__fig span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint)}
.price__terms{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--sport)}
.price__note{margin-top:26px;font-size:13px;color:var(--faint);text-wrap:pretty}

/* ---------- bio ---------- */
.bio{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.bio .shot{aspect-ratio:1/1}
.shot--sq{aspect-ratio:1/1;width:100%}
.bio h3{font-size:30px}
.bio__role{margin-top:6px}
.bio p{margin-top:20px;color:var(--mid);max-width:60ch}

/* ---------- close + footer ---------- */
.close{text-align:center;padding:112px 0}
.close p{font-family:var(--serif);font-size:clamp(26px,3.2vw,38px);line-height:1.18;max-width:26ch;margin:0 auto}
.close .hero__act{justify-content:center;margin-top:40px}
.foot{border-top:1px solid var(--rule);padding:30px 0;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.foot__in{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}


@media (max-width:1000px){
  .portal__grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:900px){
  .wrap{padding:0 24px}
    .produces,.bio{grid-template-columns:1fr;gap:40px}
  .pattern{grid-template-columns:1fr}
  .pattern div{border-right:0;border-bottom:1px solid var(--rule);padding:26px 0}
  .pattern div:not(:first-child){padding-left:0}
  .price{grid-template-columns:1fr}
  .price__l{border-right:0;border-bottom:1px solid var(--rule)}
  .price__l,.price__r{padding:34px}
  .sec{padding:72px 0}
  .hero{padding:64px 0 72px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------- hero, landscape image ---------- */
.hero__grid{grid-template-columns:1.35fr 1fr}
.hero .shot{aspect-ratio:auto}
.hero__img{width:100%;height:auto;border:1px solid var(--rule)}

/* ---------- org: audience cards ---------- */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.who div{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--sport);padding:30px 26px}
.who h3{font-size:24px;margin-bottom:12px}
.who p{color:var(--mid);font-size:15px}

/* ---------- org: walkthrough ---------- */
.walk{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.walk .shot{aspect-ratio:16/9}

/* ---------- org: trial ---------- */
.trial__cols{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);margin-top:34px}
.trial__cols>div{padding:32px 34px 32px 0}
.trial__cols>div+div{border-left:1px solid var(--rule);padding-left:34px}
.guar{margin-top:30px;padding:22px 26px;background:var(--tint);border-left:3px solid var(--sport);color:var(--sport);font-size:14.5px;text-wrap:pretty}
.contact{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mid);display:flex;flex-direction:column;gap:5px}
.contact a{text-decoration:none;border-bottom:1px solid var(--rule);align-self:flex-start}

@media (max-width:900px){
    .who,.walk,.trial__cols{grid-template-columns:1fr}
  .trial__cols>div{padding:26px 0}
  .trial__cols>div+div{border-left:0;border-top:1px solid var(--rule);padding-left:0}
}

.hero__img{
  width:100%;aspect-ratio:4/5;border:1px solid var(--rule);
  background-image:var(--hero);
  background-size:cover;background-position:center;
}
.brand__mk{
  display:block;flex:none;
  background-image:url('assets/mark.webp');
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.brand__mk{width:30px;height:33px}

/* ---------- vertical themes ----------
   One template serves all four. Put the vertical's class on <body> and the
   accent changes everywhere it is used. Nothing else in this file changes. */
body.v-edu  { --sport:#2C5DA6; --sport-soft:#a8c2e6; --tint:rgba(44,93,166,.06) }
body.v-pro  { --sport:#4A3B69; --sport-soft:#c3b6da; --tint:rgba(74,59,105,.06) }
body.v-life { --sport:#A85338; --sport-soft:#e8bfae; --tint:rgba(168,83,56,.06) }

/* The portal screenshot ships as a rendered PNG, one per programme. */
.dash__img{width:100%;border:1px solid var(--rule);box-shadow:0 26px 64px rgba(26,26,24,.16);display:block}
.dash__cap{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- catalogue (organisation pages) ----------
   The inventory of what a school gets. One group per bucket, one row per
   programme. Rows collapse their shared border the way the portal library does:
   border-bottom on every row except the last, so the group closes cleanly. */
.cat{padding:96px 0;background:var(--cream)}
.cat__grp{margin-top:64px}
.cat__grp:first-of-type{margin-top:44px}
.cat__hd{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.cat__hd h3{font-family:var(--serif);font-size:29px;font-weight:500;margin:0;letter-spacing:-.01em}
.cat__n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-left:auto}
.cat__note{margin:14px 0 0;max-width:70ch;color:var(--mid);font-size:15px;line-height:1.7;text-wrap:pretty}
.cat__row{display:grid;grid-template-columns:1fr 216px 96px;gap:24px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--rule)}
.cat__row:last-child{border-bottom:1px solid var(--rule)}
.cat__nm{font-family:var(--serif);font-size:21px;color:var(--ink);letter-spacing:-.005em}
.cat__for{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid)}
.cat__ss{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);text-align:right}
.cat__sum{margin-top:56px;padding-top:26px;border-top:1px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:44px}
.cat__stat b{display:block;font-family:var(--serif);font-size:41px;font-weight:500;line-height:1;color:var(--ink)}
.cat__stat span{display:block;margin-top:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- how it runs ---------- */
.runs{padding:92px 0;background:var(--shell)}
.runs__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 64px;margin-top:52px}
.runs__it h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sport);margin:0 0 12px;font-weight:500}
.runs__it p{margin:0;color:var(--mid);font-size:15.5px;line-height:1.75;text-wrap:pretty}

/* ---------- access ---------- */
.acc{padding:96px 0;background:var(--cream)}
.acc__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:48px}
.acc__card{border:1px solid var(--rule);background:#fff;padding:38px 34px 34px}
.acc__card h4{font-family:var(--serif);font-size:26px;font-weight:500;margin:0 0 6px}
.acc__card .cat__for{display:block;margin-bottom:20px}
.acc__card ul{margin:0;padding:0;list-style:none}
.acc__card li{padding:11px 0;border-bottom:1px solid var(--rule);color:var(--mid);font-size:15px;line-height:1.65}
.acc__card li:last-child{border-bottom:0}
.acc__card .btn{margin-top:26px}


/* Plain single column hero, for pages with no photograph. */
.hero--plain .eyebrow{margin-bottom:18px}
.hero--plain h1{max-width:16ch}
.hero--plain .hero__sub{max-width:60ch}

/* ---------- faq ---------- */
.faq{padding:96px 0;background:var(--cream);border-top:1px solid var(--rule)}
.faq__list{margin-top:46px;border-top:1px solid var(--ink)}
.faq__it{padding:26px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,40ch) 1fr;gap:40px;align-items:start}
.faq__it h4{margin:0;font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink);text-wrap:balance}
.faq__it p{margin:0;color:var(--mid);font-size:15.5px;line-height:1.75;max-width:66ch;text-wrap:pretty}

/* ---------- responsive, and this block must stay last ----------
   There are older component media queries further up the file, which is fine
   because they touch components nothing below them redefines. This block is
   different. It has the same specificity as the .hero__grid and .cat__row rules
   above it, so source order is the only thing deciding which wins. Move it up
   and the stacked layouts silently stop working at every width. */
@media (max-width:1180px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__img{max-width:760px}
}
@media (max-width:860px){
  .cat__row{grid-template-columns:1fr;gap:7px}
  .faq__it{grid-template-columns:1fr;gap:12px}
  .cat__ss{text-align:left}
  .runs__grid{grid-template-columns:1fr;gap:38px}
  .acc__grid{grid-template-columns:1fr;gap:32px}
  .cat__sum{gap:30px}
}

/* header contact, per Scott 2026-09-07: the trigger sits in header and footer */
.top__contact{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);text-decoration:none;white-space:nowrap}
.top__contact:hover{color:var(--sport)}
@media (max-width:560px){.top__contact{display:none}}