/* Direction B, "Field notebook": warm paper, Fraunces display headings, layered photography, pill actions.
   Loaded after site.css; overrides tokens and the components that change shape. */
:root {
  --green: #0b7a1f; --green-dark: #075a16; --green-soft: #e4efe3; --green-ink: #0f3d18;
  --amber: #c9891a; --amber-soft: #f7ecd6;
  --ink: #1b2420; --ink-2: #46524b; --muted: #5a6760; --line: #e3ddcf; --paper: #fffdf7; --bg: #f7f4ec; --bg-2: #efeadf;
  --radius: 14px; --shadow: 0 14px 40px rgba(20, 30, 20, .10);
  --display: Fraunces, Georgia, "Times New Roman", serif;
}
body { background: var(--bg); color: var(--ink); }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; line-height: 1.02; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
h4 { font-family: Manrope, Inter, sans-serif; }
.kicker { font-family: Manrope, sans-serif; color: var(--green); }
.lead { color: var(--ink-2); }
.alt { background: var(--paper); }
.btn { border-radius: 999px; padding: .8rem 1.35rem; }
.btn-sm { padding: .55rem 1rem; }
.btn-outline { border-width: 1.5px; }
.btn-light { background: var(--paper); color: var(--green-ink); }
.btn-ghost { border-color: rgba(255,255,255,.7); }
.topbar { background: var(--green-ink); }
header.site { background: rgba(255,253,247,.96); border-bottom: 1px solid var(--line); }
nav.main .menu { background: var(--paper); border-color: var(--line); border-radius: 14px; }
.mobile-nav { background: var(--paper); }

/* hero: copy left, layered photographs right */
.hero { background: var(--bg); color: var(--ink); min-height: 0; display: block; overflow: visible; }
.hero::after { display: none; }
.hero > .slide { display: none !important; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; padding-block: 56px 48px; max-width: var(--max); }
.hero .wrap > * { max-width: none; }
.hero .copy { display: flex; flex-direction: column; gap: 1.1rem; }
.hero .badge { background: var(--paper); border: 1px solid var(--line); color: var(--green); font-family: Manrope, sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; width: fit-content; }
.hero h1 { color: #0f1a13; max-width: 14ch; }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--green); }
.hero .lead { color: var(--ink-2); font-size: 1.12rem; max-width: 46ch; }
.hero .actions { margin-top: .4rem; }
.hero .dots { display: none; }
.hero .stack { position: relative; min-height: 460px; }
.hero .stack img, .hero .stack video { position: absolute; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); display: block; background: #d9d4c7; }
.hero .stack .one { left: 0; top: 0; width: 74%; height: 70%; object-position: 50% 35%; }
.hero .stack .two { right: 0; bottom: 0; width: 48%; height: 50%; border: 6px solid var(--bg); object-position: 60% 30%; }
.hero .stack .cap { position: absolute; left: 10px; bottom: 10px; max-width: 44% !important; background: var(--paper); border: 1px solid var(--line); padding: .45rem .7rem; border-radius: 8px; font-size: .8rem; color: var(--ink-2); max-width: 60%; }

/* facts as paper cards */
.facts { background: transparent; color: var(--ink); }
.facts .wrap { gap: .8rem; padding-block: 0 34px; }
.facts .wrap > div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.facts b { font-family: var(--display); color: var(--green); font-size: 1.9rem; }
.facts span { color: var(--muted); }

/* paths as rows on the home page */
.path .body { padding: 0; gap: .35rem; }
.path h3 { font-size: 1.5rem; margin: .1rem 0 .2rem; }
.path ul { margin: .2rem 0 .4rem 1.1rem; }
.path .price { font-family: var(--display); font-size: 1.5rem; }
.path .price small { font-family: Inter, sans-serif; display: inline; font-size: .95rem; }
.path .actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.tag { background: var(--green-soft); color: var(--green-ink); font-family: Manrope, sans-serif; }
.tag.amber { background: var(--amber-soft); color: #6b4a0a; }

/* compare, courses, features, gallery, quotes, faq, contact */
.compare-wrap { border-radius: 16px; box-shadow: var(--shadow); }
.compare thead th { background: var(--green-ink); }
.compare tbody th { background: var(--bg); }
.compare td b { font-family: var(--display); font-size: 1.25rem; }
.course, .feature, .quote, .card, .faq details, .module, .equip div, .timeline div { background: var(--paper); border-color: var(--line); border-radius: 14px; }
.feature .ico { background: var(--green-soft); color: var(--green); font-family: var(--display); font-weight: 800; }
.course .fee { font-family: var(--display); }
.quote p { font-family: var(--display); font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.quote .av { background: var(--green-ink); }
.gallery figure { border-radius: 14px; }
.faq summary { font-family: Manrope, sans-serif; }
/* brand green surfaces: gradient with faint circuit traces, kept quiet behind the text */
:root { --circuit: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22%20stroke-opacity%3D%22.42%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M120%2060%20L120%2020%20L200%2020%20L220%2040%20L220%2080%22/%3E%3Cpath%20d%3D%22M80%2040%20L80%2020%20L100%200%20L200%2020%20L220%200%20L280%2020%22/%3E%3Cpath%20d%3D%22M200%20100%20L180%20120%20L180%20180%20L200%20200%20L260%20200%20L160%20200%22/%3E%3Cpath%20d%3D%22M120%20100%20L140%20120%20L140%20180%20L140%20100%20L120%2080%20L80%2080%20L100%20100%20L100%20180%22/%3E%3Cpath%20d%3D%22M20%20220%20L100%20220%20L120%20200%20L120%20100%20L20%20100%20L60%20100%20L40%2080%20L20%2080%22/%3E%3Cpath%20d%3D%22M20%20160%20L0%20180%20L20%20180%20L20%20180%20L20%2080%20L0%2060%20L20%2020%22/%3E%3Cpath%20d%3D%22M60%20280%20L60%20180%20L80%20160%20L80%20100%20L80%20160%20L180%20160%20L160%20180%20L160%20260%22/%3E%3Cpath%20d%3D%22M180%20120%20L160%20100%20L120%20100%20L100%2080%20L100%2020%20L120%200%20L120%2020%20L140%200%20L140%2020%22/%3E%3Cpath%20d%3D%22M20%20200%20L20%20280%20L80%20280%20L80%20300%22/%3E%3Cpath%20d%3D%22M160%2040%20L180%2060%20L280%2060%20L300%2080%20L300%2080%20L200%2080%20L220%20100%20L220%20140%20L220%20180%20L180%20180%22/%3E%3Cpath%20d%3D%22M180%20120%20L180%20180%20L120%20180%20L120%20240%20L120%20300%20L80%20300%22/%3E%3Cpath%20d%3D%22M160%20100%20L160%20200%20L140%20220%20L60%20220%20L40%20240%20L40%20300%20L20%20280%20L20%20240%20L60%20240%22/%3E%3Cpath%20d%3D%22M160%2060%20L160%2020%20L180%200%20L180%2020%20L180%2080%20L240%2080%20L240%2020%22/%3E%3Cpath%20d%3D%22M220%20120%20L200%20140%20L200%20180%20L200%20280%20L180%20300%20L180%20300%20L120%20300%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%2260%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2240%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22100%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22100%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22220%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22160%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22280%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22120%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22200%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2240%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22120%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22100%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2260%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22120%22%20r%3D%223%22/%3E%3Crect%20x%3D%22217%22%20y%3D%2277%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%22277%22%20y%3D%2217%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%22157%22%20y%3D%22197%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%2297%22%20y%3D%22177%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%2217%22%20y%3D%2277%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%2217%22%20y%3D%2217%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%22157%22%20y%3D%22257%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%22137%22%20y%3D%2217%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%2277%22%20y%3D%22297%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%22177%22%20y%3D%22177%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%2277%22%20y%3D%22297%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%2257%22%20y%3D%22237%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%22237%22%20y%3D%2217%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3Crect%20x%3D%22117%22%20y%3D%22297%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.42%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); }
.band, .phero, footer.site { background-color: var(--green-ink); }
.band { background-image: linear-gradient(100deg, rgba(8,34,14,.94) 0%, rgba(8,34,14,.7) 55%, rgba(8,34,14,.25) 100%), var(--circuit), linear-gradient(120deg, #0d3a17 0%, #0f5a21 60%, #0b7a1f 100%); background-size: auto, 400px 400px, auto; }
.phero { background-image: radial-gradient(130% 150% at 20% 40%, rgba(8,34,14,.97) 0%, rgba(8,34,14,.8) 50%, rgba(8,34,14,.2) 100%), var(--circuit), linear-gradient(120deg, #0d3a17 0%, #0f5522 55%, #0b7a1f 100%); background-size: auto, 400px 400px, auto; }
footer.site { background-image: linear-gradient(180deg, rgba(13,22,16,.97) 0%, rgba(13,22,16,.86) 100%), var(--circuit), linear-gradient(160deg, #0f2416, #121a14 70%); background-size: auto, 400px 400px, auto; }
.band h2 { color: #fff; }

/* programme and course pages */

.phero h1 { color: #fff; max-width: 16ch; }
.phero .lead { color: #d9e9dc; }
.feebox { background: var(--paper); border-radius: 16px; }
.feebox .big { font-family: var(--display); font-size: 2.4rem; }
.subnav { background: var(--paper); }
.module .n { background: var(--green-ink); font-family: var(--display); }
.module.final .n { background: var(--amber); color: #2b1d00; }
.prose h2 { font-size: 1.5rem; }
.modal .box { background: var(--paper); border-radius: 18px; }
.plan { border-radius: 14px; background: var(--paper); }
.plan.on { background: var(--green-soft); }
.steps span.on { color: var(--green-ink); }

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 36px 28px; }
  .hero .stack { min-height: 320px; }
}
@media (max-width: 600px) {
  .hero h1 { max-width: none; }
  .hero .stack { min-height: 240px; }
  .hero .stack .two, .hero .stack .cap { display: none; }
  .hero .stack .one { width: 100%; height: 100%; object-position: 50% 55%; }
}

/* calendar */
.tabs-cal { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.tabs-cal button { font: 700 .9rem Manrope, sans-serif; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.tabs-cal button.on { background: var(--green); border-color: var(--green); color: #fff; }
.cal-month { font-size: 1.5rem; margin: 1.4rem 0 .6rem; }
.cal-rows { display: grid; gap: .8rem; }
.cal-row { display: grid; grid-template-columns: 72px 1fr 200px; gap: 1.2rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; }
.cal-date { text-align: center; } .cal-date b { display: block; font-family: var(--display); font-size: 2rem; color: var(--green); line-height: 1; } .cal-date span { color: var(--muted); font-size: .85rem; }
.cal-body h3 { margin: .3rem 0 .2rem; font-size: 1.25rem; } .cal-body p { margin: 0 0 .2rem; font-size: .92rem; }
.cal-side { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; text-align: right; }
.cal-side b { font-family: var(--display); font-size: 1.3rem; }
.pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); }
.pill.ok { background: var(--green); color: #fff; } .pill.warn { background: var(--amber-soft); color: #6b4a0a; } .pill.bad { background: #ffe1e1; color: #8a1d1d; } .pill.mut { background: var(--bg-2); color: var(--ink-2); }
@media (max-width: 760px) { .cal-row { grid-template-columns: 1fr; } .cal-date { text-align: left; } .cal-side { align-items: flex-start; text-align: left; } }

.course h3 a { text-decoration: none; color: inherit; }
.course h3 a:hover { color: var(--green); }

#courseMeta { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* facility tour clip */
.tourclip { margin-bottom: 1.2rem; } .tourclip video { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 14px; background: #0f1a13; box-shadow: var(--shadow); display: block; }
.small { font-size: .85rem; }
/* register unavailable */
.reg-err { background: var(--amber-soft); color: #4a3407; border: 1px solid #ecd9ad; padding: .9rem 1.1rem; border-radius: 12px; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.reg-err button { font: 700 .9rem Manrope, sans-serif; padding: .5rem .9rem; border-radius: 999px; border: 1.5px solid #6b4a0a; background: transparent; color: #4a3407; cursor: pointer; }
/* professional catalogue: concise cards, curriculum at a glance */
.course details { margin: .4rem 0; font-size: .9rem; } .course details summary { cursor: pointer; font-weight: 700; color: var(--green-ink); font-family: Manrope, sans-serif; }
.course details ol { margin: .4rem 0 .2rem 1.2rem; padding: 0; color: var(--ink-2); }
.compare.names th, .compare.names td { font-size: .92rem; vertical-align: top; }

.course .meta { display: flex; flex-direction: column; gap: .15rem; }

/* round 4 visual review */
:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.btn:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.btn-primary:focus-visible, .btn-wa:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--green-ink); }
.btn-wa { background: #168040; color: #fff; }
.quote p { font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
.path .price small { display: block; margin-top: .2rem; line-height: 1.4; }
.two.start { align-items: start; }
input::placeholder { text-transform: none; }
#after-apply .features, .features.four { grid-template-columns: repeat(4, 1fr); }
#courseMeta { grid-template-columns: repeat(2, 1fr); }
#courseMeta > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.timeline.four { grid-template-columns: repeat(4, 1fr); }
.two .timeline.four, .feebox ~ .timeline.four { grid-template-columns: repeat(2, 1fr); }
.gallery { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.gallery figure.wide { aspect-ratio: 8 / 3; }
/* professional catalogue: five cards in one row, photo on each, fees aligned */
body[data-path="professional"] .courses { grid-template-columns: repeat(5, 1fr); gap: .9rem; }
body[data-path="professional"] .course { padding: 1rem; }
.course .pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin: .2rem 0 .3rem; }
.course h3 { min-height: 2.6em; font-size: 1.2rem; line-height: 1.25; }
.course .blurb { min-height: 4.6em; font-size: .9rem; }
.course .fee { font-size: 1.35rem; }
@media (max-width: 1240px) { body[data-path="professional"] .courses { grid-template-columns: repeat(6, 1fr); } body[data-path="professional"] .course { grid-column: span 2; } body[data-path="professional"] .course:nth-child(4), body[data-path="professional"] .course:nth-child(5) { grid-column: span 3; } .course h3, .course .blurb { min-height: 0; } }
@media (max-width: 1100px) { .timeline.four, #after-apply .features, .features.four { grid-template-columns: repeat(2, 1fr); } .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { body[data-path="professional"] .courses { grid-template-columns: repeat(2, 1fr); } body[data-path="professional"] .course, body[data-path="professional"] .course:nth-child(4) { grid-column: auto; } body[data-path="professional"] .course:nth-child(5) { grid-column: 1 / -1; } #courseMeta, .timeline.four { grid-template-columns: 1fr; } }
.swipe-hint { display: none; }
@media (max-width: 600px) {
  body[data-path="professional"] .courses { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; gap: .5rem; } .gallery figure { aspect-ratio: 1; } .gallery figure.wide { grid-column: span 2; aspect-ratio: 16 / 10; }
  .features, #after-apply .features { grid-template-columns: 1fr 1fr; gap: .6rem; } .feature { padding: .9rem; } .feature p { font-size: .88rem; }
  body.home .compare-wrap { display: none; }
  .scroll-x, .subnav .wrap { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .swipe-hint { display: block; font-size: .8rem; color: var(--muted); margin: .3rem 0 0; }
  #overview .wrap.two > div:last-child { order: -1; }
}

body[data-path="professional"] .course > .tag { min-height: 3.5em; display: flex; align-items: center; }

@media (min-width: 1241px) {
  body[data-path="professional"] .courses { grid-template-rows: auto; }
  body[data-path="professional"] .course { display: grid; grid-row: span 11; grid-template-rows: subgrid; gap: .4rem; align-content: start; }
  body[data-path="professional"] .course > * { margin: 0; }
}
/* V16: space above the proposed-wording note */
#outcomesList p.small { margin-top: .8rem; }

/* equipment tiles with a small photograph or line icon */
.equip div { display: grid; grid-template-columns: 64px 1fr; gap: .9rem; align-items: center; padding: .75rem .9rem; }
.equip .eq-th { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: block; }
.equip .eq-ico { width: 64px; height: 64px; border-radius: 10px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.equip .eq-tx { min-width: 0; } .equip .eq-tx small { display: block; line-height: 1.45; }

.course .fee small { white-space: nowrap; }
.timeline > div:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
@media (min-width: 1101px) { .timeline:not(.four):not(#courseMeta) > div:last-child:nth-child(odd):not(:first-child) { grid-column: auto; } }

/* compare page */
.cmp-cta { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: center; margin-top: 1.6rem; text-align: center; }
.cmp-presets { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.cmp-pick { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; display: grid; gap: .8rem; }
.pick-g { display: grid; grid-template-columns: 170px 1fr; gap: .6rem; align-items: start; }
.pick-l { font: 700 .78rem Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--green); padding-top: .55rem; }
.pick-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pick { font: 600 .9rem Inter, sans-serif; padding: .5rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.pick:hover:not([disabled]) { border-color: var(--green); }
.pick.on { background: var(--green); border-color: var(--green); color: #fff; }
.pick[disabled] { opacity: .45; cursor: not-allowed; }
.pick-note { margin: 0; }
.cmp-diff { margin: 1.4rem 0; background: var(--green-soft); border-radius: 16px; padding: 1.1rem 1.3rem; }
.cmp-diff h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.cmp-diff ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.cmp-grid { margin-top: 1.2rem; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: 210px repeat(var(--n), minmax(0, 1fr)); gap: 0 1rem; }
.cmp-head { position: sticky; top: 72px; z-index: 5; background: var(--bg); padding: .6rem 0; border-bottom: 2px solid var(--green-ink); }
.cmp-col-h { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem 2.4rem; display: grid; gap: .3rem; align-content: start; }
.cmp-col-h h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.cmp-h-fee { font-weight: 700; color: var(--green-ink); font-size: .92rem; }
.cmp-act { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.cmp-act .btn { padding: .45rem .8rem; font-size: .82rem; }
.cmp-x { position: absolute; left: .9rem; bottom: .6rem; background: none; border: 0; color: var(--muted); font: 600 .8rem Inter, sans-serif; cursor: pointer; text-decoration: underline; padding: 0; }
.cmp-sec { font-size: 1.15rem; margin: 1.6rem 0 .3rem; color: var(--green-ink); }
.cmp-row { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.cmp-l { font: 700 .82rem Manrope, sans-serif; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.cmp-row.same .cmp-c { color: var(--muted); }
.same-tag { display: block; font: 500 .72rem Inter, sans-serif; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: .2rem; }
.cmp-c { font-size: .92rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.cmp-c .big { font-family: var(--display); font-size: 1.25rem; color: var(--green-ink); display: block; }
.cmp-c small { display: block; color: var(--muted); }
.cmp-c .cl { margin: .2rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.cmp-c .cl li.no { color: var(--muted); }
.cmp-c .mini { font-weight: 700; font-size: .85rem; }
.tbc { color: #7a5200; background: var(--amber-soft); padding: .1rem .45rem; border-radius: 6px; font-size: .85rem; }
.na { color: var(--muted); font-style: italic; font-size: .88rem; }
.prop { color: var(--muted); font-size: .82rem; display: inline; }
@media (max-width: 860px) {
  .pick-g { grid-template-columns: 1fr; } .pick-l { padding-top: 0; }
  .cmp-head, .cmp-row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 .6rem; }
  .cmp-corner { display: none; }
  .cmp-head { top: 64px; }
  .cmp-l { grid-column: 1 / -1; margin-bottom: .35rem; }
  .cmp-c { font-size: .84rem; }
  .cmp-col-h { padding: .6rem .6rem 2.2rem; } .cmp-col-h h3 { font-size: .98rem; } .cmp-col-h .tag { font-size: .62rem; }
  .cmp-act .btn { flex: 1 1 100%; text-align: center; }
  .cmp-badges .pill { font-size: .7rem; }
}
@media (max-width: 860px) {
  .cmp-presets, .pick-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .cmp-presets .pick, .pick-row .pick { white-space: nowrap; flex: 0 0 auto; font-size: .84rem; padding: .45rem .8rem; }
  .cmp-presets > .muted { flex: 0 0 auto; }
  .cmp-pick { gap: .5rem; padding: .8rem; }
}

/* "Choose your path": three equal cards side by side (stacked on phones) */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; align-items: stretch; }
.path { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 24px rgba(20,30,20,.06); }
.path img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; min-height: 0; }
.path .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.path .tag { align-self: flex-start; }
.path h3 { font-size: 1.45rem; margin: .1rem 0 0; }
.path .who { min-height: 4.2em; }
.path ul { margin: .1rem 0 .3rem 1.1rem; font-size: .93rem; }
.path .price { margin-top: auto; }
.path .actions { margin-top: .5rem; }
.path .actions .btn { flex: 1 1 auto; text-align: center; }
@media (max-width: 960px) { .paths { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .path .who { min-height: 0; } }

.path .price small.inl { display: inline; margin: 0; }

/* comparison: compact pinned header once scrolling the rows */
.cmp-head.compact .tag, .cmp-head.compact .cmp-h-fee, .cmp-head.compact .cmp-badges, .cmp-head.compact .cmp-act, .cmp-head.compact .cmp-x { display: none; }
.cmp-head.compact .cmp-col-h { padding: .45rem .7rem; }
.cmp-head.compact .cmp-col-h h3 { font-size: 1rem; }
.cmp-c small { margin-top: .2rem; }
label.check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; }
label.check input { width: auto; margin-top: .25rem; }
/* softer circuit pattern behind headline text */
.phero { background-image: radial-gradient(130% 150% at 20% 40%, rgba(8,34,14,.985) 0%, rgba(8,34,14,.9) 50%, rgba(8,34,14,.3) 100%), var(--circuit), linear-gradient(120deg, #0d3a17 0%, #0f5522 55%, #0b7a1f 100%); background-size: auto, 400px 400px, auto; }

/* "Choose your path": clean centred cards (MD preference, 13 Oct) */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.2rem; align-items: stretch; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 2rem 1.8rem 1.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 10px 30px rgba(20,30,20,.06); }
.pc-ico { width: 64px; height: 64px; border-radius: 16px; background: var(--green-soft); color: var(--green-ink); display: grid; place-items: center; margin-bottom: 1.1rem; }
.pc-pill { display: block; width: 100%; background: var(--green-soft); color: var(--green); font: 700 .78rem Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: .6rem .8rem; border-radius: 10px; }
.pcard h3 { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 1.75rem; margin: 1.1rem 0 .6rem; color: var(--ink); }
.pc-lead { color: var(--ink-2); font-size: .98rem; line-height: 1.6; margin: 0 0 1.2rem; }
.pc-ticks { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .75rem; text-align: left; width: 100%; }
.pc-ticks li { display: grid; grid-template-columns: 22px 1fr; gap: .55rem; align-items: start; color: var(--ink); font-size: .96rem; line-height: 1.45; }
.pc-ticks svg { color: var(--green); margin-top: .1rem; }
.pc-price { margin: auto 0 .9rem; color: var(--ink-2); font-size: .95rem; }
.pc-price b { font-family: var(--display); font-size: 1.35rem; color: var(--green-ink); }
.pc-btn { width: 100%; justify-content: center; text-align: center; border-radius: 12px; padding: .95rem 1rem; font-size: 1rem; }
.pc-apply { margin-top: .7rem; font-weight: 600; font-size: .9rem; color: var(--green); }
@media (max-width: 960px) { .pcards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* "Why train with us": photo beside an icon list (13 Oct) */
.why { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 3rem; align-items: center; }
.why-pic { position: relative; margin: 0; }
.why-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); display: block; }
.why-pic figcaption { position: absolute; left: 1.2rem; bottom: 1.2rem; background: var(--paper); border-radius: 14px; padding: .8rem 1rem; display: flex; align-items: center; gap: .7rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.why-pic figcaption b { font-family: var(--display); font-size: 2rem; color: var(--green); line-height: 1; }
.why-pic figcaption span { font-size: .85rem; color: var(--ink-2); max-width: 12ch; line-height: 1.3; }
.why-body h2 { margin: .3rem 0 1.4rem; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.8rem; }
.why-item { display: grid; grid-template-columns: 48px 1fr; gap: .9rem; align-items: start; }
.why-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); display: grid; place-items: center; }
.why-item h4 { margin: .1rem 0 .3rem; font-size: 1.02rem; }
.why-item p { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
@media (max-width: 960px) { .why { grid-template-columns: 1fr; gap: 1.6rem; } .why-pic img { aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; gap: 1.1rem; } }
/* facility equipment: nine tiles, three by three */
body .equip.nine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { body .equip.nine { grid-template-columns: 1fr; } }

/* coming soon (Robotics, Instrumentation) */
.course .fee.soon { font-family: Manrope, sans-serif; font-size: 1.05rem; color: #7a5200; background: var(--amber-soft); padding: .35rem .7rem; border-radius: 8px; align-self: flex-start; }
.course.is-soon .meta, .course.is-soon [data-apply] { display: none !important; }
body.is-soon [data-apply], body.is-soon #stickyFee { display: none !important; }

.course .btn-outline { align-self: flex-start; flex: 0 0 auto; text-align: center; }

.soon-tag { display: inline-block; vertical-align: middle; font: 700 .72rem Manrope, sans-serif; letter-spacing: .04em; text-transform: uppercase; background: var(--amber-soft); color: #7a5200; border-radius: 999px; padding: .15rem .55rem; margin-left: .4rem; }
.module.is-soon { opacity: .75; }