/* ==========================================================================
   post.css — blog posts and archives
   Extends site.css and product.css. Loads after both.

   The corpus this has to hold: 2,127 posts, median 5,237 characters of text,
   1,195 of them embedding video, 1,378 carrying inline style= attributes from
   9 years of editors. So the body rules stay defensive: nothing here assumes
   clean markup, and images and embeds are constrained rather than trusted.
   ========================================================================== */

/* ---------- post ---------- */
.post { padding-bottom: var(--pad-2); }
.post__head { padding-block: clamp(1rem, 2vw, 2rem) clamp(1.25rem, 2.5vw, 2rem); }
.post__head h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1;
  max-width: 22ch; text-wrap: balance; }

.post__lead { margin-block: 0 clamp(1.5rem, 3vw, 2.5rem); }
.post__lead img { width: 100%; height: auto; display: block; }

/* Measure. Long-form reading wants ~65 characters, not the full page width. */
.post__body { max-width: 68ch; font-size: clamp(1.02rem, 0.99rem + 0.2vw, 1.13rem);
  line-height: 1.68; color: var(--fg); }
.post__body > * + * { margin-top: 1.15em; }
.post__body h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); line-height: 1.2;
  margin-top: 2.2em; text-wrap: balance; }
.post__body h3 { font-size: clamp(1.12rem, 1.04rem + 0.4vw, 1.35rem); line-height: 1.25;
  margin-top: 1.9em; }
.post__body ul, .post__body ol { padding-left: 1.35em; }
.post__body li + li { margin-top: .45em; }
.post__body a { color: var(--red); text-underline-offset: .18em;
  text-decoration-thickness: from-font; }
.post__body a:hover { text-decoration-thickness: 2px; }
/* The site speaks in hairlines, not coloured bars. A quote in a post gets the
   same top rule as .pullquote so the two read as one system. */
.post__body blockquote { margin-inline: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line);
  color: var(--ink); font-style: normal; font-size: 1.08em; line-height: 1.42;
  letter-spacing: -0.018em; }
.post__body strong { font-weight: 600; }
.post__body hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.2em; }

/* Nine years of pasted markup carries hard widths, floats and inline styles.
   Constrain rather than trust: never let a post break the page. */
.post__body img { max-width: 100%; height: auto; display: block; margin-inline: auto;
  float: none !important; }
.post__body table { display: block; width: 100%; overflow-x: auto;
  border-collapse: collapse; font-size: .92rem; }
.post__body td, .post__body th { border: 1px solid var(--line); padding: .5rem .65rem;
  text-align: left; }
.post__body pre { overflow-x: auto; }

/* Embeds carry a hard width="560" height="315" and would overflow a phone.
   1,195 posts embed YouTube, Vimeo or Facebook. */
.post__body .embed { position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--paper-2); margin-block: 1.6em; }
.post__body .embed > iframe { position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; border: 0; }
/* Instagram and Facebook set their own height, so let those size themselves. */
.post__body .embed:has(> iframe[src*="instagram"]),
.post__body .embed:has(> iframe[src*="facebook"]) { aspect-ratio: auto; }
.post__body .embed:has(> iframe[src*="instagram"]) > iframe,
.post__body .embed:has(> iframe[src*="facebook"]) > iframe { position: static;
  height: auto !important; }
.post__body iframe { max-width: 100%; }
.post__body blockquote.instagram-media { border-left: 0; font-style: normal;
  padding-left: 0; }

/* ---------- feed: archive cards and the related strip ---------- */
.feed { display: grid; gap: 1px; background: var(--paper); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.feed__card { background: var(--paper); padding: 1.15rem; display: grid; gap: .6rem;
  align-content: start; transition: background var(--dur-fast) var(--ease); }
.feed__card:hover { background: var(--paper-2); }
.feed__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--paper-2); }
.feed__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed__t { font-size: 1.02rem; font-weight: 500; line-height: 1.28; text-wrap: balance; }
.feed__x { font-size: .88rem; line-height: 1.5; color: var(--fg-mute); }
/* 130 posts have no usable image. Give those cards a deliberate look rather
   than a hole where a picture should be. */
.feed__card--noimg { box-shadow: inset 2px 0 0 var(--red), 1px 0 0 var(--line), 0 1px 0 var(--line); }
.feed__card--noimg .feed__t { font-size: 1.12rem; }

.feed--rel { margin-top: 1.35rem; }

/* ---------- pager ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 2rem; font: 600 .78rem/1 var(--cond); letter-spacing: .1em;
  text-transform: uppercase; }
.pager__step { color: var(--ink); border-bottom: 2px solid var(--red); padding-bottom: .2rem;
  transition: color var(--dur-fast) var(--ease); }
.pager__step:hover { color: var(--red); }
.pager__count { color: var(--fg-soft); margin-inline: auto; }


/* ---------- testimonial quotes ----------
   Long quotes, 426 to 1,103 characters, so they need a real measure and clear
   separation rather than a card grid that would set them all to one height. */
.quotes { display: grid; gap: 1px; background: var(--paper);
  border: 1px solid var(--line); }
.quote { background: var(--paper); margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem); }
.quote blockquote { margin: 0; border: 0; padding: 0; font-style: normal; }
.quote blockquote p { margin: 0; max-width: 68ch;
  font-size: clamp(1.02rem, .99rem + .25vw, 1.16rem); line-height: 1.6; color: var(--fg); }
.quote blockquote p::before { content: '\201C'; }
.quote blockquote p::after  { content: '\201D'; }
.quote figcaption { margin-top: 1rem; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .2rem .6rem; }
.quote figcaption b { font-family: var(--cond); font-weight: 600; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase; }
.quote figcaption span { font: 500 .86rem/1.4 var(--sans); color: var(--fg-soft); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- search ---------- */
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.srch { margin-top:.4rem; }
.srch input { width:100%; max-width:34rem; padding:.85rem 1rem; font:400 1.05rem/1.3 var(--sans);
  color:var(--fg); background:var(--paper); border:1px solid var(--line); border-radius:0;
  -webkit-appearance:none; appearance:none; }
.srch input:focus { outline:2px solid var(--red); outline-offset:2px; border-color:var(--red); }
.srch input::placeholder { color:var(--fg-soft); }
#results .feed__x { font:600 .68rem/1 var(--cond); letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); }
#results .feed__card { gap:.4rem; }

/* Partial rows: cards draw their own hairlines so an empty grid cell stays
   paper rather than showing the container colour as a grey block. */
.feed__card, .quote { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }

/* ---------- forms ---------- */
.formblock { max-width: 40rem; margin-top: clamp(1.5rem,3vw,2.5rem); }
.wform { display: grid; gap: 1.05rem; margin-top: 1.2rem; }
.field { margin: 0; display: grid; gap: .35rem; }
.field label { font: 600 .76rem/1.4 var(--cond); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg); }
.field abbr { color: var(--red); text-decoration: none; border: 0; }
.field input, .field textarea { width: 100%; padding: .75rem .9rem;
  font: 400 1rem/1.4 var(--sans); color: var(--fg); background: var(--paper);
  border: 1px solid var(--line); border-radius: 0; -webkit-appearance: none; appearance: none; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--red);
  outline-offset: 2px; border-color: var(--red); }
.wform .btn { justify-self: start; cursor: pointer; border: 0; }
/* Honeypot. Off-screen rather than display:none so bots that skip hidden inputs
   still fill it, and aria-hidden keeps it away from screen readers. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Interior page composition
   The old template put the h1 in a full-width .wrap and the body in a centred
   68ch column, so the heading and the copy it belonged to sat 231px apart and
   the page read as empty gutters. Everything here shares one gutter.
   ========================================================================== */

/* ---------- masthead ---------- */
.phero { position: relative; background: var(--black); color: var(--fg-inv);
  display: grid; align-items: end; min-height: clamp(19rem, 34vw, 30rem); overflow: hidden; }
.phero__media { position: absolute; inset: 0; }
.phero__media picture { display: contents; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Scrim carries the type, so it is weighted to the bottom left where the type
   sits rather than flattening the whole photograph. */
.phero__media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.12) 68%, rgba(0,0,0,.28) 100%),
    linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 52%, rgba(0,0,0,0) 78%); }
.phero__in { position: relative; z-index: 1;
  padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(1.9rem, 4vw, 3.1rem); }
.phero h1 { max-width: 18ch; text-wrap: balance; letter-spacing: -0.03em; line-height: 1.02; }
.phero .lead { margin-top: 1rem; color: rgba(255,255,255,0.82); max-width: 52ch; }
/* No photograph: the type carries it on ink, same gutter, same rhythm. */
.phero--type { min-height: 0; background: var(--ink); }
.phero--type .phero__in { padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(2rem, 4vw, 3rem); }

/* ---------- body ---------- */
.pbody { padding-block: clamp(2rem, 4vw, 3.2rem) var(--pad-2); }
.pbody .crumb { padding-block: 0 clamp(1.6rem, 3vw, 2.4rem); }
/* Left-aligned to the gutter, not centred in it. This is the alignment fix. */
.prose { max-width: 68ch; margin-inline: 0; font-size: clamp(1.02rem, 0.99rem + 0.2vw, 1.12rem);
  line-height: 1.66; }
.prose > * + * { margin-top: 1.15em; }
.blog-search { display: grid; gap: .55rem; margin-top: 1.35rem; max-width: 38rem; }
.blog-search > label { font: 700 .72rem/1 var(--cond); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-soft); }
.blog-search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.blog-search input[type="search"] { min-height: 46px; padding: .72rem .82rem;
  border: 1px solid var(--line); border-radius: 0; background: var(--paper);
  color: var(--ink); font: 500 .95rem/1.2 var(--sans); }
.blog-search input[type="search"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 480px) {
  .blog-search > div { grid-template-columns: 1fr; }
  .blog-search .btn { width: 100%; }
}
.prose h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); line-height: 1.16;
  letter-spacing: -0.028em; margin-top: 2.4em; text-wrap: balance; max-width: 24ch; }
.prose h3 { font-size: clamp(1.12rem, 1.04rem + 0.45vw, 1.4rem); line-height: 1.25;
  margin-top: 2em; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose a { color: var(--red); text-underline-offset: .18em; text-decoration-thickness: from-font; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 600; }
.prose .pullquote { max-width: none; }
.prose .pullquote blockquote { color: var(--ink); }
.pfig { margin: clamp(1.8rem, 3vw, 2.6rem) 0; }
.pfig img { max-width: 100%; width: auto; height: auto; max-height: 32rem; display: block;
  margin-inline: auto; border: 1px solid var(--line); }

/* ---------- closing band ---------- */
.pclose { padding-block: clamp(2.8rem, 5vw, 4.5rem); }
.pclose .h-lg { max-width: 20ch; text-wrap: balance; }

/* ---------- forms sit in the same column ---------- */
.formblock { max-width: 40rem; margin-inline: 0; margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }

/* Build-time note to Trevor and the client, never decoration. Hairline box, no
   coloured bar, so it reads as an annotation rather than an alert component. */
.pagenote { max-width: 68ch; margin-top: 2rem; padding: .85rem 1rem;
  border: 1px solid var(--line); background: var(--paper-2);
  font: 500 .9rem/1.5 var(--sans); color: var(--fg-mute); }

/* ---------- FAQ ----------
   Their questions arrive as headings with the answer in the paragraphs after,
   so the pairing is real structure and gets a real component: hairline rows,
   question at heading weight, answer in the measure. */
.faq { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }
.faq__row { padding-block: clamp(1.15rem, 2.2vw, 1.65rem); border-bottom: 1px solid var(--line); }
.faq__q { margin: 0 0 .5rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; max-width: 34ch; }
.faq__a > * { margin: 0; color: var(--fg-mute); }
.faq__a > * + * { margin-top: .7em; }
.faq__a ul { padding-left: 1.25em; }
.faq__a li + li { margin-top: .45em; }

/* ---------- testimonial grid ----------
   3+ testimonials are a body of proof, so they get their own band and read as a
   set. Below that threshold a quote stays inline as a pull quote. */
.tgrid { padding-block: var(--pad-2); }
.tgrid__h { max-width: 20ch; text-wrap: balance; }
.tgrid__in { margin-top: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: 1px;
  background: var(--paper); border: 1px solid var(--line); }
@media (min-width: 780px) { .tgrid__in { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1200px) { .tgrid__in { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tcard { margin: 0; background: var(--paper-2); padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.tcard blockquote { margin: 0; font-size: .99rem; line-height: 1.58; color: var(--ink); }
.tcard blockquote::before { content: '\201C'; }
.tcard blockquote::after { content: '\201D'; }
.pbody2 { padding-block: var(--pad-2) var(--pad-2); }
.pbody2:empty, .pbody2:has(.prose:empty), .pbody2 .prose:empty { display: none; }
.tcard figcaption, .pullquote figcaption { margin-top: .85rem;
  font: 600 .74rem/1.4 var(--cond); letter-spacing: .11em; text-transform: uppercase;
  color: var(--fg-soft); }

/* ---------- category tiles ----------
   Their shop landing pages list categories as an image plus a "Name (count)"
   heading. Presented as a grid rather than as prose, which is what they are. */
.ctiles { padding-block: var(--pad-2); }
.ctiles__in { display: grid; gap: 1px; background: var(--paper);
  border: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ctiles__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ctiles__in { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ctile { background: var(--paper); padding: clamp(.75rem, 2vw, 1.2rem); display: grid; gap: .5rem;
  align-content: start; min-width: 0;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  transition: background var(--dur-fast) var(--ease); }
.ctile:hover { background: var(--paper-2); }
.ctile__shot { aspect-ratio: 4 / 3; display: flex; align-items: center;
  justify-content: center; min-width: 0; overflow: hidden; }
.ctile__shot img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply; }
.ctile__n { font-size: clamp(.84rem, .76rem + .3vw, 1rem); font-weight: 500; line-height: 1.3; }
.ctile__c { font: 600 .72rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-soft); }
.ctile--text { align-content: center; min-height: 6.5rem; }

/* ---------- Courses landing ----------
   Education is grouped by subject, not mixed with the physical shop taxonomy. */
.landing-intro { max-width: 58rem; display: grid; gap: .8rem; }
.landing-intro h2 { margin: 0; max-width: 22ch; font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.65rem);
  line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.landing-intro p { margin: 0; max-width: 54ch; color: var(--fg-mute); }
.coursecatalog { padding-block: var(--pad-2); }
.coursecards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.coursecard { min-width: 0; background: var(--paper); display: grid;
  grid-template-columns: minmax(6.7rem, 34%) 1fr; transition: background var(--dur-fast) var(--ease); }
.coursecard:hover { background: var(--paper-2); }
.coursecard__shot { min-width: 0; min-height: 8.2rem; display: grid; place-items: center;
  overflow: hidden; background: var(--paper-lift); }
.coursecard__shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.coursecard__body { min-width: 0; padding: clamp(1rem, 2vw, 1.4rem); display: flex;
  flex-direction: column; align-items: flex-start; }
.coursecard__name { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-weight: 600; line-height: 1.2; }
.coursecard__count { margin-top: .45rem; font: 600 .7rem/1 var(--cond); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-soft); }
.coursecard__link { margin-top: auto; padding-top: 1rem; font: 600 .72rem/1 var(--cond);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
@media (min-width: 640px) {
  .coursecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coursecard--lead { grid-column: 1 / -1; grid-template-columns: minmax(14rem, 42%) 1fr; }
}
@media (min-width: 980px) {
  .coursecards { grid-template-columns: 1.35fr 1fr 1fr; }
  .coursecard { grid-template-columns: minmax(7.5rem, 38%) 1fr; }
  .coursecard--lead { grid-column: auto; grid-row: span 3; grid-template-columns: 1fr; }
  .coursecard--lead .coursecard__shot { min-height: 23rem; }
  .coursecard--lead .coursecard__body { min-height: 11rem; }
}

/* ---------- Equipment comparison ----------
   Physical products use comparison plates with load, fit, and inclusions. */
/* Text and a clear, larger view of the full product range. */
.equipment-intro { max-width: none; grid-template-columns: minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 860px) {
  .equipment-intro { grid-template-columns: minmax(0, 1fr) auto; }
}
.eqcatalog { padding-block: var(--pad-2); }
.eqcatalog__browse { margin-bottom: clamp(2.8rem, 6vw, 4.8rem); }
.eqcatalog__browse > h2 { margin: .45rem 0 1.25rem;
  font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.65rem); line-height: 1.08;
  letter-spacing: -.03em; }
.equipment-categories { display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.equipment-categories a { min-width: 0; padding: clamp(.75rem, 1.5vw, 1rem);
  background: var(--paper); display: grid; grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: center; gap: clamp(.8rem, 1.4vw, 1.1rem);
  transition: background var(--dur-fast) var(--ease); }
.equipment-categories a:hover { background: var(--paper-2); }
.equipment-category__shot { width: 5.25rem; aspect-ratio: 1; display: grid; place-items: center;
  overflow: hidden; background: var(--paper-lift); }
.equipment-category__shot img { width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply; transition: transform var(--dur) var(--ease); }
.equipment-category__shot--photo img { object-fit: cover; mix-blend-mode: normal; }
.equipment-categories a:hover .equipment-category__shot img { transform: scale(1.035); }
.equipment-category__body { min-width: 0; display: grid; gap: .42rem; }
.equipment-category__body > span { font-size: clamp(1rem, .94rem + .25vw, 1.16rem);
  font-weight: 600; line-height: 1.2; }
.equipment-category__body small { font: 600 .68rem/1.25 var(--cond);
  letter-spacing: .09em; text-transform: uppercase; color: var(--fg-soft); }
@media (min-width: 660px) {
  .equipment-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .equipment-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.eqcatalog__head { display: grid; gap: .65rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.eqcatalog__head h2 { margin: 0; font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.65rem);
  line-height: 1.08; letter-spacing: -.03em; }
.eqcatalog__head p { margin: 0; color: var(--fg-mute); }
.eqgrid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.eqcard { min-width: 0; background: var(--paper); display: grid; align-items: stretch; }
.eqcard__shot { min-width: 0; min-height: 11rem; display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2rem); background: var(--paper-lift); overflow: hidden; }
.eqcard__shot img { max-width: 100%; max-height: 11rem; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur) var(--ease); }
.eqcard:hover .eqcard__shot img { transform: translateY(-3px); }
.eqcard__body { min-width: 0; padding: clamp(1.1rem, 2.3vw, 1.7rem); display: flex; flex-direction: column; }
.eqcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.eqcard__top h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem);
  line-height: 1.15; letter-spacing: -.025em; }
.eqcard__price { flex: none; font: 600 .82rem/1 var(--cond); color: var(--red); }
.eqcard dl { margin: 1.1rem 0 0; display: grid; gap: .85rem; }
.eqcard dl div { display: grid; gap: .2rem; }
.eqcard dt { font: 600 .68rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-soft); }
.eqcard dd { margin: 0; font-size: .92rem; line-height: 1.42; color: var(--fg); }
.eqcard__includes { margin: 1rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--fg-mute); }
.eqcard__link { margin-top: auto; padding-top: 1.2rem; font: 600 .72rem/1 var(--cond);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
@media (min-width: 760px) {
  .eqgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .eqcard { grid-template-columns: minmax(12rem, 42%) 1fr; }
  .eqcard__shot { min-height: 22rem; }
  .eqcard__shot img { max-height: 17rem; }
}
@media (max-width: 520px) {
  .equipment-intro { grid-template-columns: 1fr; }
}

/* ---------- certification catalogue ---------- */
/* Typographic, not photographic: the stored product images are Canva templates
   and a paperback mockup, so cards carry name, price and curriculum facts. */
.certgroup + .certgroup { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.certgroup__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem;
  padding-bottom: .8rem; margin-bottom: -1px; border-bottom: 1px solid var(--line); }
.certgroup__head h3 { margin: 0; font: 600 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.2 var(--sans);
  letter-spacing: -.02em; }
.certgroup__head p { margin: 0; font-size: .88rem; color: var(--fg-mute); }
/* Borders on the cards, not a background bleeding through 1px gaps: 7 cards in
   a 3-up grid leave an empty cell, and the bleed technique painted it as a slab
   of grey void. */
.certgrid { display: grid; gap: 0; border: 1px solid var(--line); border-width: 1px 0 0 1px; }
.certcard { --cert-pad: clamp(1.15rem, 2.3vw, 1.6rem); min-width: 0; background: var(--paper); display: flex; flex-direction: column;
  padding: var(--cert-pad);
  border: 1px solid var(--line); border-width: 0 1px 1px 0;
  transition: background var(--dur) var(--ease); }
.certcard:hover { background: var(--paper-2); }
.certcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.certcard__top h4 { margin: 0; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.certcard__price { flex: none; margin: 0; font: 600 .82rem/1 var(--cond); color: var(--red);
  font-variant-numeric: tabular-nums; }
.certcard__sum { margin: .7rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--fg-mute); }
.certcard__facts { margin: .95rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .35rem; }
.certcard__facts li { font: 600 .66rem/1 var(--cond); letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-soft);
  padding: .38rem .5rem; border: 1px solid var(--line); }
.certcard__link { margin-top: auto; padding-top: 1.2rem; font: 600 .72rem/1 var(--cond);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.certcard--soon { min-height: 13rem; background: var(--ink); color: #fff; }
.certcard--soon:hover { background: var(--ink-2); }
.certcard--soon .certcard__sum { color: var(--fg-inv-mute); }
.certcard--soon .certcard__facts li { color: var(--fg-inv-mute); border-color: var(--line-inv); }
.workshopcard__media { display: block; margin: calc(-1 * var(--cert-pad)) calc(-1 * var(--cert-pad)) 1.15rem;
  overflow: hidden; background: var(--ink); }
.workshopcard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
@media (min-width: 720px) {
  .certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1060px) {
  .certgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .certgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.certcatalog__next { margin: clamp(1.3rem, 2.5vw, 1.9rem) 0 0; font-size: .95rem;
  color: var(--fg-mute); }
.certcatalog__next a { color: var(--red); text-underline-offset: .18em; }

/* ---------- contact and distributor directories ---------- */
.contactintro, .distributorintro { display: grid; gap: 1rem; max-width: none; }
.contactintro > h2, .distributorintro > h2 { margin: 0; font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.65rem); }
.contactintro > p, .distributorintro > p { margin: 0; max-width: 62ch; color: var(--fg-mute); }
.contactintro a, .distributorintro > p a { color: var(--red); text-decoration: underline; text-underline-offset: .18em; }
.contactgrid, .distributorgrid { display: grid; margin-top: clamp(.75rem, 2vw, 1.4rem);
  border: 1px solid var(--line); border-width: 1px 0 0 1px; }
.contactgrid > div, .distributor { min-width: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line); border-width: 0 1px 1px 0; }
.contactgrid h3 { margin: 0 0 .65rem; font-size: 1.05rem; font-weight: 600; }
.contactgrid a { overflow-wrap: anywhere; }
.contactgrid p { margin: .45rem 0 0; color: var(--fg-mute); }
.contactgrid small { display: block; margin-top: .75rem; color: var(--fg-soft); line-height: 1.5; }
.distributor { display: grid; gap: .4rem; transition: background var(--dur) var(--ease); }
.distributor:hover { background: var(--paper-2); }
.distributor__region { font: 600 .7rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.distributor__name { font-size: clamp(1.05rem, .96rem + .4vw, 1.25rem); font-weight: 600; }
.distributor__link { margin-top: .5rem; font: 600 .72rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
@media (min-width: 700px) {
  .contactgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .distributorgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .distributorgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.policy-photo { margin: clamp(1.8rem, 4vw, 3rem) 0; max-width: 46rem; overflow: hidden; }
.policy-photo img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; object-position: 50% 34%; }

/* ---------- FAQ band ---------- */
/* Two columns only where the page gives the FAQ the full frame; inside a 68ch
   measure (getting-started, privacy policy) it stays a stack. */
.faqband { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.faqband__intro > * + * { margin-top: 1.15em; }
/* Answers keep a reading measure even when the band spans the full frame. */
.faq__a > * { max-width: 68ch; }
.prose--wide .faq__q { max-width: 54ch; }
.prose--measured > p, .prose--measured > h2, .prose--measured > h3,
.prose--measured > ul, .prose--measured > ol, .prose--measured > blockquote {
  max-width: 68ch; }
@media (min-width: 1000px) {
  .prose--wide .faqband { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .prose--wide .faqband__intro { position: sticky; top: calc(var(--header-h, 4rem) + 1.5rem); }
  .prose--wide .faqband__intro > * { max-width: none; }
}

/* ---------- supplied photography ---------- */
.pagefig { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); max-width: 46rem; }
.pagefig img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.pagefig figcaption { margin-top: .6rem;
  font: 500 .84rem/1.45 var(--sans); color: var(--fg-soft); }
.pagegallery { margin: 0 0 clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(.45rem, 1vw, .8rem);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pagegallery__item { margin: 0; min-width: 0; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-lift); }
.pagegallery__item:first-child { grid-column: 1 / -1; }
.pagegallery__item img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (min-width: 760px) {
  .pagegallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagegallery__item:first-child { grid-column: auto; }
}
.equipment-set { margin: 0; width: clamp(14rem, 24vw, 20rem); justify-self: end; }
.equipment-set img { width: 100%; height: auto; display: block; }
@media (max-width: 520px) {
  .equipment-set { width: min(18rem, 82vw); justify-self: center; }
}

/* Landing compositions (Courses, Equipment) are full-width, not body copy. */
.prose--wide { max-width: none; }

/* ---------- online coaching ---------- */
.coach-story { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.coach-story__people { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); }
.coach-story__people figure { min-width: 0; margin: 0; background: var(--paper-lift); }
.coach-story__people img { width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: cover; }
.coach-story__people figcaption { display: grid; gap: .25rem; min-height: 6rem; padding: .85rem; }
.coach-story__people strong { font-size: .98rem; font-weight: 600; }
.coach-story__people span { font: 600 .66rem/1.35 var(--cond); letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-soft); }
.coach-story__body { max-width: 43rem; }
.coach-story__body h2, .coach-plans__head h2, .coach-apply h2 {
  margin: .45rem 0 0; font-size: clamp(1.9rem, 1.4rem + 1.9vw, 3.4rem);
  line-height: 1.03; letter-spacing: -.04em; }
.coach-story__body > p:not(.eyebrow) { margin: 1rem 0 0; max-width: 58ch;
  color: var(--fg-mute); }
.coach-plans { margin-top: clamp(3.6rem, 8vw, 6.5rem); }
.coach-plans__head { display: grid; gap: .2rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.coach-plans__head p:last-child { margin: .65rem 0 0; color: var(--fg-mute); }
.coachplan-grid { display: grid; gap: 0; border: 1px solid var(--line);
  border-width: 1px 0 0 1px; }
.coachplan { min-width: 0; min-height: 24rem; padding: clamp(1.2rem, 2.5vw, 1.8rem);
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-width: 0 1px 1px 0; transition: background var(--dur) var(--ease); }
.coachplan:hover { background: var(--paper-2); }
.coachplan__term { margin: 0; font: 600 .68rem/1 var(--cond); letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); }
.coachplan h3 { margin: .85rem 0 0; font-size: clamp(1.2rem, 1.05rem + .55vw, 1.55rem);
  line-height: 1.15; letter-spacing: -.025em; }
.coachplan__price { margin: 1.1rem 0 0; color: var(--fg-mute); font-size: .82rem; }
.coachplan__price span { color: var(--fg); font-size: clamp(1.8rem, 1.5rem + 1vw, 2.5rem);
  line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.coachplan__was { display: block; margin-top: .4rem; color: var(--fg-soft);
  text-decoration: line-through; font-size: .78rem; }
.coachplan ul { margin: 1.3rem 0 0; padding: 0; list-style: none; display: grid; gap: .65rem; }
.coachplan li { position: relative; padding-left: 1rem; font-size: .88rem; line-height: 1.45;
  color: var(--fg-mute); }
.coachplan li::before { content: ""; position: absolute; left: 0; top: .55em; width: .35rem;
  height: .35rem; background: var(--red); }
.coachplan__link { margin-top: auto; padding-top: 1.4rem; font: 600 .72rem/1 var(--cond);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.coach-apply { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 4vw, 3rem);
  display: grid; gap: 1.5rem; align-items: end; background: var(--ink); color: #fff; }
.coach-apply .eyebrow { color: var(--fg-inv-soft); }
.coach-apply h2 { color: #fff; }
.coach-apply p:last-child { margin: .9rem 0 0; max-width: 56ch; color: var(--fg-inv-mute); }
.coach-apply__action { display: grid; justify-items: start; gap: .7rem; }
.coach-apply__action small { color: var(--fg-inv-soft); font-size: .78rem; line-height: 1.4; }
@media (min-width: 760px) {
  .coach-story { grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.1fr); }
  .coachplan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-apply { grid-template-columns: minmax(0, 1fr) auto; }
  .coach-apply__action { justify-items: end; text-align: right; }
}
@media (min-width: 1060px) {
  .coachplan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- short product shelves ---------- */
/* A pathway that matches 1 or 2 products should not stretch the shared 4-up
   category grid across an empty row. */
/* The container also carries the hairline frame, so it has to shrink with the
   columns or the border runs on past the cards and reads as an empty cell. */
.cat__grid--n1, .cat__grid--n2, .cat__grid--n3 { width: fit-content; max-width: 100%; }
.cat__grid--n1 { grid-template-columns: minmax(0, 22rem) !important; }
.cat__grid--n2 { grid-template-columns: repeat(2, minmax(0, 22rem)) !important; }
.cat__grid--n3 { grid-template-columns: repeat(3, minmax(0, 22rem)) !important; }
@media (max-width: 700px) {
  .cat__grid--n2, .cat__grid--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
  .cat__grid--n1, .cat__grid--n2, .cat__grid--n3 { grid-template-columns: minmax(0, 1fr) !important;
    width: auto; }
}

/* ---------- attributed testimonial with a portrait ---------- */
/* Their layout is portrait, then a heading holding the name, then the quote.
   Left in the reading column that was a face, a shouting heading and a long
   quote stacked three times on /our-story/. */
.pquote { margin: clamp(1.6rem, 3vw, 2.4rem) 0; display: grid; gap: 1.1rem;
  align-items: start; padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line); background: var(--paper-lift); }
.pquote__face { width: 4.5rem; height: 4.5rem; object-fit: cover;
  border-radius: 50%; display: block; }
.pquote__body > * { margin: 0; }
.pquote blockquote { font-size: clamp(.98rem, .95rem + .2vw, 1.08rem); line-height: 1.55;
  color: var(--fg); }
.pquote figcaption { margin-top: .8rem; font: 600 .7rem/1.35 var(--cond);
  letter-spacing: .09em; text-transform: uppercase; color: var(--fg-soft); }
@media (min-width: 680px) {
  .pquote { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.4rem; }
}

/* ---------- Our Story: published video and earned press ---------- */
.story-video { margin-block: clamp(2.8rem, 6vw, 5rem); display: grid;
  gap: clamp(1.2rem, 3vw, 2rem); align-items: end; }
.story-video > div:first-child { max-width: 38rem; }
.story-video h2, .story-press h2 { margin-top: 0; }
.story-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink); border: 1px solid var(--line); }
.story-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.story-press { margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: clamp(1.5rem, 3vw, 2.3rem);
  border-top: 1px solid var(--line); }
.story-press__logos { margin-top: 1.25rem; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.story-press__logos img { width: 100%; height: 5rem; padding: 1.1rem;
  object-fit: contain; background: var(--paper); filter: grayscale(1); opacity: .72; }
@media (min-width: 680px) {
  .story-press__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}