/* =====================================================================
   Jeel · Professionals — STRICT MONOCHROME (brief §10): pure white, pure
   black, restrained grey. No purple/blue/cyan, no gradients, no glow, no
   coloured shadow. Interest comes from type, hierarchy, whitespace, borders.
   Shared across professionals.html, pro-cohorts.html, pro-coaching.html.
   Loads AFTER main.css (which supplies the General Sans @font-face);
   these rules override the dark kids-site theme to a light adult one.
   ===================================================================== */


/* =====================================================================
   Professional type scale (brief §7) — replaces 40 near-identical
   font-size values with 8 deliberate steps.
   ===================================================================== */
.pro, .pf-hero, .pf-sec, .pf-final, .pro-sec {
  --pro-type-meta: 0.75rem;
  --pro-type-small: 0.875rem;
  --pro-type-body: 1rem;
  --pro-type-body-large: 1.125rem;
  --pro-type-card-title: 1.375rem;
  --pro-type-panel-title: clamp(1.625rem, 1.45rem + 0.5vw, 1.875rem);
  --pro-type-section: clamp(2.25rem, 1.65rem + 2.3vw, 3.75rem);
  --pro-type-display: clamp(3.25rem, 2rem + 4.4vw, 5.4rem);
  --pro-leading-meta: 1.25;
  --pro-leading-body: 1.6;
  --pro-leading-heading: 1.02;
}

html { background:#ffffff !important; }
body { background:#ffffff !important; color:#000000; animation:none !important; }
body::before { content:none !important; display:none !important; background:none !important; }

.pro {
  /* §10 canonical monochrome tokens */
  --pro-bg:#ffffff; --pro-surface:#ffffff; --pro-text:#000000; --pro-text-muted:#4a4a4a;
  --pro-border:#d9d9d9; --pro-divider:#eeeeee; --pro-button-bg:#000000; --pro-button-text:#ffffff; --pro-focus:#000000;
  /* legacy names remapped onto the monochrome system (all surfaces pure white) */
  --bg:#ffffff; --paper:#ffffff; --panel:#ffffff; --cream:#ffffff; --beige:#ffffff; --taupe:#ffffff;
  --ink:#000000; --mute:#4a4a4a; --faint:#6b6b6b; --line:#d9d9d9; --dark:#000000; --purple:#000000; --purple-d:#000000;
  font-family:"General Sans", system-ui, sans-serif; color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.6; letter-spacing:-.005em;
}
.pro *, .pro *::before, .pro *::after { border-radius:0 !important; box-sizing:border-box; }
.pro img { max-width:100%; display:block; }
.pro a { color:var(--ink); text-decoration:none; }

.pro-wrap { width:min(1180px, 100% - 48px); margin-inline:auto; }
.pro-eyebrow { font-size:var(--pro-type-meta); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.pro h1, .pro h2, .pro h3 { font-weight:700; letter-spacing:-.03em; line-height:1.02; margin:0; color:var(--ink); }
.pro p { margin:0; color:var(--mute); line-height:1.66; }

/* Buttons — rectangular, sharp */
.pro-btn { display:inline-flex; align-items:center; justify-content:center; gap:.72rem; padding:1rem 1.7rem; font-weight:600; font-size:var(--pro-type-small); border:1px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap; }
.pro-btn svg { width:15px; height:15px; }
.pro .pro-btn--dark  { background:#000; color:#fff; border-color:#000; }
.pro .pro-btn--dark:hover  { background:#fff; color:#000; border-color:#000; }
.pro .pro-btn--line  { background:#fff; color:#000; border-color:#000; }
.pro .pro-btn--line:hover  { background:#000; color:#fff; }
.pro .pro-btn--light { background:#000; color:#fff; border-color:#000; }
.pro .pro-btn--light:hover { background:#fff; color:#000; border-color:#000; }
.pro .pro-btn:focus-visible { outline:2px solid var(--pro-focus); outline-offset:2px; }

/* Header */
.pro-head { position:sticky; top:0; z-index:50; background:#ffffff; border-bottom:1px solid var(--pro-border); }
.pro-head__in { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.05rem; }
.pro-brand { display:inline-flex; align-items:center; gap:.6rem; font-family:"General Sans",sans-serif; font-weight:700; font-size:var(--pro-type-card-title); letter-spacing:-.03em; }
.pro-brand__tag { font-size:var(--pro-type-meta); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding-left:.6rem; border-left:1px solid var(--line); line-height:1; }
.pro-nav { display:flex; align-items:center; gap:1.7rem; }
.pro-nav a { font-size:var(--pro-type-small); font-weight:500; color:var(--mute); transition:color .15s; }
.pro-nav a:hover, .pro-nav a[aria-current="page"] { color:var(--ink); }
.pro-head__cta { display:flex; align-items:center; gap:.7rem; }
.pro-switch { display:inline-flex; align-items:center; gap:.35rem; font-size:var(--pro-type-small); font-weight:600; color:var(--mute); border:0; padding:.4rem .2rem; transition:.15s; }
.pro-switch svg { width:13px; height:13px; }
.pro-switch:hover { color:#000; border-color:#000; }

/* Hero */
.pro-hero { text-align:center; padding-block:clamp(3.2rem,2rem + 6vw,6rem) clamp(2.2rem,1.5rem + 3vw,3.6rem); }
.pro-hero h1 { font-size:var(--pro-type-display); max-width:16ch; margin-inline:auto; line-height:1.05; }
.pro-hero .lead { margin:2rem auto 0; max-width:54ch; font-size:var(--pro-type-body); line-height:1.62; color:var(--mute); }
.pro-hero__cta { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.75rem; }
.pro-hero__note { margin-top:1.9rem; font-size:var(--pro-type-small); color:var(--faint); font-weight:500; }
.pro-hero__note a { color:var(--ink); border-bottom:1px solid var(--ink); }

/* Section scaffolding */
.pro-sec { padding-block:clamp(3.6rem, 2.6rem + 3vw, 5.5rem); }
.pro-kicker { display:flex; align-items:center; gap:.6rem; }
.pro-kicker::before { content:""; width:26px; height:1px; background:var(--faint); }
.pro-lede { font-size:var(--pro-type-body-large); line-height:1.5; color:var(--ink); font-weight:500; max-width:46ch; margin-top:1rem; }

/* Split (copy | aside) */
.pro-split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,3vw,3.5rem); align-items:start; }
.pro-split--center { align-items:center; }

/* Feature panel with floating role chips */
.pro-feature { background:transparent; border:0; padding:0; position:relative; }
.pro-feature__top { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.pro-feature__body { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,3vw,3rem); align-items:center; }
.pro-feature__media { margin:0; }
.pro-feature__media img { width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--pro-border); }
.pro-feature__media figcaption { margin-top:.75rem; font-size:var(--pro-type-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--pro-text-muted); font-weight:600; }
.pro-tag { display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:0; padding:0; font-size:var(--pro-type-meta); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pro-tag--ghost { color:var(--faint); }
.pro-feature h2 { font-size:var(--pro-type-panel-title); max-width:18ch; color:var(--pro-text); line-height:1.08; }
.pro-feature p { margin-top:1.15rem; max-width:48ch; color:var(--pro-text-muted); line-height:1.66; }
.pro-chips { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .95rem; margin-top:clamp(1.6rem,3vw,2.4rem); }
.pro-chip { display:inline-flex; align-items:center; background:transparent; border:0; padding:0; }
.pro-chip__m { display:none; }
.pro-chip__t { min-width:0; }
.pro-chip__t b { display:inline; font-size:var(--pro-type-small); font-weight:600; color:var(--ink); }
.pro-chip__t span { display:none; }

/* Media frame (photos on cohorts/coaching pages) */
.pro-media { margin:0; }
.pro-media img { width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--pro-border); }
.pro-media figcaption { margin-top:.75rem; font-size:var(--pro-type-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--pro-text-muted); font-weight:600; }

/* Columns grid (2, 3 or 4) */
.pro-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,3rem); background:transparent; border:0; margin-top:2.6rem; }
.pro-grid3.cols-2 { grid-template-columns:repeat(2,1fr); }
.pro-cell { background:transparent; padding:1.8rem 0 0; border-top:1px solid var(--line); }
.pro-cell__n { font-size:var(--pro-type-meta); font-weight:600; letter-spacing:.14em; color:var(--faint); }
.pro-cell h3 { font-size:var(--pro-type-card-title); margin-top:1.3rem; line-height:1.15; }
.pro-cell p { margin-top:.85rem; font-size:var(--pro-type-small); line-height:1.62; }

/* Outline — numbered editorial list */
.pro-outline__head { margin-bottom:2.9rem; }
.pro-outline__head > p { margin-top:1.2rem; max-width:62ch; }
.pro-outline__head h2 { font-size:var(--pro-type-section); }
.modlist { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.modlist > li { display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,3rem); align-items:baseline; padding:clamp(1.5rem,1.1rem + 1.7vw,2.3rem) 0; border-bottom:1px solid var(--line); }
.modlist .modn { font-weight:700; font-size:var(--pro-type-card-title); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.modlist h3 { font-size:var(--pro-type-body-large); line-height:1.2; }
.modlist p { margin-top:.6rem; max-width:66ch; font-size:var(--pro-type-small); line-height:1.62; }
.modlist .modmeta { align-self:center; font-size:var(--pro-type-meta); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }

/* Schedule / dated rows */
.pro-rows { border-top:1px solid var(--ink); margin-top:2rem; }
.pro-row { display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2.5rem); align-items:center; padding:clamp(1.2rem,1rem + 1vw,1.8rem) 0; border-bottom:1px solid var(--line); }
.pro-row__date { font-weight:700; font-size:var(--pro-type-body-large); letter-spacing:-.02em; white-space:nowrap; }
.pro-row__t b { display:block; font-size:var(--pro-type-body-large); font-weight:600; }
.pro-row__t span { font-size:var(--pro-type-small); color:var(--mute); }
.pro-row__meta { font-size:var(--pro-type-meta); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }

/* Fact list */
.pro-facts { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.pro-facts { gap:1rem; }
.pro-facts li { display:flex; gap:.7rem; font-size:var(--pro-type-small); line-height:1.55; }
.pro-facts li svg { width:17px; height:17px; flex:none; margin-top:.25rem; color:var(--ink); }

/* Two ways cards */
.pro-two { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,5vw,4.5rem); margin-top:2.6rem; }
.pro-panel { background:transparent; border:0; padding:1.6rem 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; min-height:100%; }
.pro-panel--fill { background:transparent; }
.pro-panel h3 { font-size:var(--pro-type-panel-title); margin-top:1.1rem; }
.pro-panel p { margin-top:.9rem; font-size:var(--pro-type-small); line-height:1.6; }
.pro-panel ul { list-style:none; margin:1.7rem 0 0; padding:0; display:grid; gap:.95rem; }
.pro-panel li { display:flex; gap:.7rem; font-size:var(--pro-type-small); line-height:1.55; color:var(--ink); }
.pro-panel li svg { width:16px; height:16px; flex:none; margin-top:.2rem; }
.pro-panel .pro-btn { margin-top:2rem; align-self:flex-start; }
.pro-panel__tag { align-self:flex-start; font-size:var(--pro-type-meta); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pro-price { font-weight:700; font-size:var(--pro-type-panel-title); letter-spacing:-.03em; margin-top:1.2rem; }
.pro-price span { font-size:var(--pro-type-small); font-weight:600; color:var(--mute); letter-spacing:0; }

/* CTA band */
.pro-cta { background:transparent; color:var(--ink); text-align:center; padding:clamp(3.5rem, 2.5rem + 4vw, 6rem) 1.5rem; border-top:1px solid var(--line); margin-top:clamp(3rem, 2rem + 4vw, 6rem); }
.pro-cta h2 { font-size:var(--pro-type-section); color:var(--ink); max-width:18ch; margin-inline:auto; }
.pro-cta p { margin:1.35rem auto 0; max-width:52ch; line-height:1.6; color:var(--mute); }
.pro-cta__row { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.3rem; }
.pro-cta .pro-btn--line { color:#000; border-color:#000; }
.pro-cta .pro-btn--line:hover { background:#000; color:#fff; }

/* Footer */
.pro-foot { border-top:1px solid var(--line); padding-block:clamp(2.4rem,2rem + 2vw,3.6rem) 1.6rem; }
.pro-foot__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.pro-foot h3 { font-size:var(--pro-type-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 1rem; font-weight:600; }
.pro-foot ul { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pro-foot a { font-size:var(--pro-type-small); color:var(--mute); }
.pro-foot a:hover { color:var(--ink); }
.pro-foot__mark { font-weight:700; font-size:var(--pro-type-display); letter-spacing:-.04em; line-height:.9; color:var(--pro-divider); text-align:right; margin-top:2.4rem; }
.pro-foot__bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:var(--pro-type-meta); color:var(--faint); }

/* Side vertical labels */
.pro-side { position:fixed; top:50%; transform:translateY(-50%); font-size:var(--pro-type-meta); letter-spacing:.02em; color:var(--pro-text-muted); writing-mode:vertical-rl; z-index:2; }
.pro-side--l { left:18px; transform:translateY(-50%) rotate(180deg); }
.pro-side--r { right:18px; }

@media (max-width:1340px) { .pro-side { display:none; } }
@media (max-width:900px) {
  .pro-nav { display:none; }
  .pro-split { grid-template-columns:1fr; }
  .pro-feature__body { grid-template-columns:1fr; }
  .pro-grid3, .pro-grid3.cols-2 { grid-template-columns:1fr; }
  .pro-chips { grid-template-columns:repeat(2,1fr); }
  .pro-outline__head { grid-template-columns:1fr; }
  .pro-two { grid-template-columns:1fr; }
  .modlist > li { grid-template-columns:auto 1fr; }
  .modlist .modmeta { grid-column:2; align-self:start; }
  .pro-row { grid-template-columns:auto 1fr; row-gap:.4rem; }
  .pro-row__meta { grid-column:2; }
  .pro-foot__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) { .pro-chips { grid-template-columns:1fr; } .pro-foot__grid { grid-template-columns:1fr; } .pro-row { grid-template-columns:1fr; } }
/* keep the header inside small viewports: drop the secondary switch + wordmark tag, tighten gap */
@media (max-width:600px) { .pro-head__in { gap:.75rem; } .pro-switch { display:none; } .pro-brand__tag { display:none; } }

/* boxless role list separators */
.pro-chip::after { content:"·"; color:var(--faint); margin-left:.95rem; }
.pro-chip:last-child::after { content:""; margin-left:0; }

/* ---- Forms (team enquiry, light theme) ---- */
.pro-form { display:grid; gap:1.2rem; }
.pro-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.pro-field { display:grid; gap:.5rem; }
.pro-field > label { font-size:var(--pro-type-meta); font-weight:600; color:var(--ink); }
.pro-input, .pro-select, .pro-textarea { font-family:inherit; font-size:var(--pro-type-small); color:var(--ink); background:#fff; border:1px solid var(--line); padding:.85rem 1rem; width:100%; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
.pro-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236c6558' stroke-width='2'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }
.pro-textarea { min-height:132px; resize:vertical; }
.pro-input:focus, .pro-select:focus, .pro-textarea:focus { outline:2px solid var(--pro-focus); outline-offset:1px; border-color:#000; }
.pro-input::placeholder, .pro-textarea::placeholder { color:var(--faint); }
.pro-form__note { font-size:var(--pro-type-small); color:var(--faint); }
.pro-contactinfo { display:grid; gap:1.1rem; margin-top:2rem; }
.pro-contactinfo a { display:flex; align-items:center; gap:.7rem; font-weight:600; color:var(--ink); }
.pro-contactinfo a:hover { color:#000; text-decoration:underline; }
.pro-contactinfo svg { width:17px; height:17px; color:#000; flex:none; }
@media (max-width:640px){ .pro-form .row2 { grid-template-columns:1fr; } }

/* ---- button motion (award polish) ---- */
.pro .pro-btn { transition:background .18s ease, color .18s ease, border-color .18s ease; }
.pro .pro-btn:hover { transform:translateY(-2px); }
/* no coloured shadow / glow on buttons (§10) */
/* accessible form error (§23): announced, not colour-only */
.pro-form__err { margin-top:.6rem; font-size:var(--pro-type-small); font-weight:600; color:#000; border-left:3px solid #000; padding-left:.7rem; }


/* --- §9 section rhythm --- */
.pro-sec, .pf-sec{ padding-block: clamp(4rem, 3.25rem + 2vw, 5.75rem); }
.pf-shead{ margin-bottom: clamp(2.25rem, 1.9rem + 1.2vw, 3.5rem); }
.pf-shead h2{ margin-top:1.25rem; }

/* --- §10 number/label -> title -> body proximity --- */
.pf-c h3, .pf-o h3, .pf-lesson h3, .pro-cell h3{ margin-top:1.5rem; }
.pf-c p, .pf-o p, .pf-lesson p, .pro-cell p{ margin-top:.85rem; }

/* --- §11 never combine a big external margin with big internal padding --- */
.pro-cta{ margin-top:0; padding-block: clamp(4rem, 3.25rem + 2vw, 5.75rem); }
.pf-final{ margin-top:0 !important; padding-block: clamp(4.5rem, 3.5rem + 2.5vw, 6.5rem); }

/* --- §12 hero: restrained display size, balanced height --- */
.pf-hero{ padding-block: clamp(3.75rem, 3rem + 2vw, 5.5rem) clamp(3.5rem, 2.75rem + 2vw, 5rem); }
.pf-hero h1{ max-width:12ch; }

/* --- §14 no horizontal shift on hover; editorial rows stay aligned --- */
.pf-lesson:hover{ padding-left:0; background:#f7f7f7; }

/* --- §13 buttons wrap and stack on small screens, never clip --- */
@media (max-width:760px){
  .pro-btn{ white-space:normal; min-height:54px; text-align:center; }
  .pf-hero__cta, .pf-final__cta, .pro-cta__row{ display:grid; grid-template-columns:1fr; gap:.75rem; }
  .pf-hero__cta .pro-btn, .pf-final__cta .pro-btn, .pro-cta__row .pro-btn{ width:100%; }
}

/* §8: panel body copy and list items share ONE size — no 4th step in a panel */
.pf-panel > p, .pf-panel ul li,
.pro-panel > p, .pro-panel ul li,
.pro-facts li{
  font-size: var(--pro-type-body) !important; line-height: var(--pro-leading-body);
}



/* --- Operating-system card as a B&W session photo --- */
.pf-card--photo{ display:block; }
.pf-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.03); }
/* legibility scrims behind the label (top) and caption (bottom) */
.pf-card--photo::before,
.pf-card--photo::after{ content:""; position:absolute; left:0; right:0; z-index:1; pointer-events:none; }
.pf-card--photo::before{ top:0; height:86px; background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,0)); }
.pf-card--photo::after{ bottom:0; height:96px; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.pf-card--photo .pf-card__label{ color:#000; }
.pf-card--photo .pf-card__cap{ color:#fff; }
.pf-card--photo .pf-card__cap strong{ color:#fff; }

/* §8: restrained hover on the monochrome session photo (no dramatic zoom) */
.pf-card--photo .pf-card__img{ transition: transform .65s ease, filter .65s ease; }
.pf-card--photo:hover .pf-card__img{ transform: scale(1.015); filter: grayscale(1) contrast(1.06); }
@media (prefers-reduced-motion: reduce){ .pf-card--photo:hover .pf-card__img{ transform:none; } }