:root{
  /* Brand palette taken from the client's holding page:
     deep teal ground + amber accent. */
  --teal-dk:#042634; --teal:#063642; --teal-lt:#08535b;
  --amber:#f6bd3c; --amber-lt:#f7d778;
  --ink:#062b36; --muted:#5b7079; --line:#dde7ea;
  --brand:#08535b; --brand-dk:#063642; --brand-lt:#e6f1f3;
  --gold:#f6bd3c; --gold-lt:#fdf3dc; --bg:#fff; --soft:#f3f8f9;
}

/* Logo badge — mirrors the holding page's AM mark */
.logo-icon{width:42px;height:42px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--amber);color:var(--teal);
  font-size:18px;font-weight:800;letter-spacing:-.02em;flex:none}
.logo{display:flex;align-items:center;gap:12px}
.logo-text{line-height:1.15}
.logo-title{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em}
.logo-subtitle{display:block;margin-top:3px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
footer .logo-subtitle{color:rgba(255,255,255,.62)}
footer .logo-title{color:#fff}

*{box-sizing:border-box;margin:0;padding:0}
body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--brand-dk)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:26px;height:66px}
.logo{font-weight:800;font-size:17px;letter-spacing:-.03em;margin-right:auto;white-space:nowrap}
.logo a{color:inherit;text-decoration:none}
.logo span{color:var(--brand)}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500}
.nav-links a:hover{color:var(--brand)}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:8px;font-weight:600;font-size:14.5px;border:0;cursor:pointer;
  transition:background .15s}
.btn:hover{background:var(--brand-dk)}
.btn-ghost{background:#fff;color:var(--brand-dk);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--soft);border-color:var(--brand)}

/* HERO */
.hero{position:relative;padding:96px 0 76px;overflow:hidden;
  background:linear-gradient(180deg,var(--brand-lt) 0%,#fff 100%)}
.hero::before{content:"";position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=2000&q=70');
  background-size:cover;background-position:center;opacity:.16}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.90) 62%,#fff 100%)}
.hero .wrap{position:relative;z-index:1}
.eyebrow{display:inline-block;background:#fff;border:1px solid #cfe3d9;color:var(--brand-dk);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;margin-bottom:20px}
.hero h1{font-size:clamp(34px,5.4vw,54px);font-weight:800;max-width:16ch}
.hero p.lede{font-size:19px;color:var(--muted);max-width:60ch;margin:20px 0 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.stat b{display:block;font-size:30px;font-weight:800;color:var(--brand);letter-spacing:-.03em}
.stat span{font-size:13.5px;color:var(--muted)}

/* SECTIONS */
section{padding:74px 0;border-top:1px solid var(--line)}
.sec-head{max-width:62ch;margin-bottom:34px}
.sec-head h2{font-size:clamp(26px,3.6vw,36px);font-weight:800}
.sec-head p{color:var(--muted);margin-top:12px;font-size:17px}

/* FILTERS + COURSE CARDS */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--muted);
  padding:8px 16px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:.15s}
.chip:hover{border-color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{border-color:#bcd6c9;box-shadow:0 8px 24px rgba(20,80,59,.09);transform:translateY(-2px)}
.card .thumb{position:relative;height:150px;background:var(--brand-lt) center/cover no-repeat}
.card .thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.34) 100%)}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card .tag{position:absolute;top:12px;left:12px;z-index:1;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-dk);background:rgba(255,255,255,.94);padding:5px 10px;border-radius:6px}
.card h3{font-size:18px;font-weight:700;margin:0 0 6px}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--brand)}
.card .venue{font-size:14px;color:var(--muted)}
.card .desc{font-size:14.5px;color:var(--muted);margin-top:8px}
.card .meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.card .meta b{color:var(--ink);font-weight:600}
.card .card-cta{margin-top:16px}
.card .card-cta .btn{width:100%;text-align:center}

/* FEATURES */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feat div{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:24px}
.feat .ic{font-size:26px;display:block;margin-bottom:12px}
.feat h3{font-size:16.5px;font-weight:700;margin-bottom:7px}
.feat p{font-size:14.5px;color:var(--muted)}

/* FLYER */
#flyer{background:var(--soft)}
.flyer{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 40px rgba(20,80,59,.10)}
.flyer-top{position:relative;color:#fff;padding:52px 38px;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-dk),var(--brand))}
.flyer-top::before{content:"";position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1466637574441-749b8f19452f?auto=format&fit=crop&w=1600&q=70');
  background-size:cover;background-position:center;opacity:.28}
.flyer-top::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(20,80,59,.92) 0%,rgba(20,80,59,.72) 55%,rgba(29,107,79,.55) 100%)}
.flyer-top > *{position:relative;z-index:1}
.flyer-top .kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  opacity:.85;margin-bottom:12px}
.flyer-top h3{font-size:clamp(25px,3.8vw,36px);font-weight:800;max-width:20ch}
.flyer-top p{margin-top:14px;opacity:.92;max-width:52ch;font-size:16px}
.flyer-body{padding:34px 38px;display:grid;grid-template-columns:1.15fr .85fr;gap:38px}
.flyer-body h4{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.flyer-list{list-style:none;display:grid;gap:11px}
.flyer-list li{padding-left:27px;position:relative;font-size:15.5px}
.flyer-list li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--brand);
  font-weight:800;font-size:16px}
.price{background:var(--brand-lt);border:1px solid #cfe3d9;border-radius:12px;padding:22px}
.price .amt{font-size:30px;font-weight:800;color:var(--brand-dk);letter-spacing:-.03em}
.price .amt small{font-size:14px;font-weight:600;color:var(--muted)}
.price ul{list-style:none;margin-top:16px;display:grid;gap:9px;font-size:14px;color:var(--muted)}
.price ul li{display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px dashed #cfe3d9;padding-bottom:9px}
.price ul li:last-child{border:0;padding:0}
.flyer-foot{background:var(--ink);color:#fff;padding:22px 38px;display:flex;
  justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14.5px}
.flyer-foot b{font-size:16px}
.flyer-foot a{color:#fff}

/* FORM */
form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;
  max-width:760px;box-shadow:0 4px 18px rgba(20,80,59,.05)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:13.5px;font-weight:650}
label .req{color:#c0392b}
input,select,textarea{font:inherit;font-size:15px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);width:100%;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(29,107,79,.12)}
textarea{resize:vertical;min-height:88px}
.hint{font-size:12.5px;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);
  grid-column:1/-1;line-height:1.5}
.check input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--brand)}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.ok{background:var(--brand-lt);border:1px solid #a9d3c0;color:var(--brand-dk);
  border-radius:10px;padding:15px 18px;margin-bottom:20px;font-size:14.5px;display:none}
.ok.show{display:block}

/* SHARE + GOOGLE REVIEW (course hero — sits on the dark teal ground) */
.share-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:16px 0 4px}
.share-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-right:2px}
.share-btn{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;
  text-decoration:none;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.share-btn:hover{background:var(--amber);border-color:var(--amber);color:var(--teal);
  transform:translateY(-2px)}
.review-btn{display:inline-flex;align-items:center;gap:8px;margin-left:5px;padding:8px 15px;
  border-radius:100px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;
  transition:background .15s ease,border-color .15s ease}
.review-btn:hover{background:var(--amber);border-color:var(--amber);color:var(--teal)}
.review-stars{color:var(--amber);font-size:13px;letter-spacing:1px}
.review-btn:hover .review-stars{color:var(--teal)}
@media(max-width:560px){
  .share-row{gap:7px}
  .review-btn{margin-left:0;width:100%;justify-content:center;margin-top:4px}
}

/* CONTACT + FOOTER */
/* Form on the left, contact details + map on the right. The two columns are
   independent heights — the map fills whatever space the details leave, so the
   right column finishes flush with the form instead of running past it. */
.contact-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch}
.contact-form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;
  display:flex;flex-direction:column}
/* Let the textarea absorb any surplus height so the submit button sits flush
   with the bottom of the map column rather than leaving a white gap. */
.contact-form-card form{display:flex;flex-direction:column;flex:1 1 auto}
/* Rows keep their natural height except the message row, which absorbs the slack
   (auto auto 1fr auto = name/email rows, textarea, consent checkbox). */
.contact-form-card .fgrid{flex:1 1 auto;grid-template-rows:auto auto 1fr auto}
.contact-form-card .field.full{display:flex;flex-direction:column}
.contact-form-card textarea{flex:1 1 auto}
.contact-form-card h3{font-size:19px;font-weight:800;letter-spacing:-.02em}
.contact-form-sub{font-size:14.5px;color:var(--muted);margin:6px 0 20px}
/* The card is the frame — cancel the global form card styling so the border,
   padding and shadow are not drawn twice. */
.contact-form-card form{background:transparent;border:0;padding:0;box-shadow:none;max-width:none}
.contact-form-card .fgrid{gap:15px}
.contact-form-card textarea{min-height:120px}
.contact-form-card .form-actions{margin-top:20px}
.contact-form-card .btn{width:100%;text-align:center}

.contact-side{display:flex;flex-direction:column;gap:16px;min-height:0}
.contact-list{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.contact-list li{display:flex;gap:13px;align-items:flex-start;background:#fff;padding:15px 18px}
.contact-list .ci{flex:none;width:34px;height:34px;border-radius:10px;display:grid;
  place-items:center;background:var(--brand-lt);color:var(--brand);font-size:15px}
.contact-list b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.contact-list a,.contact-list span:not(.ci){font-size:15px;color:var(--ink);line-height:1.5}
.contact-list a{text-decoration:none;font-weight:600;color:var(--brand)}
.contact-list a:hover{text-decoration:underline}

.contact-map{flex:1 1 auto;min-height:230px;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:var(--soft)}
.contact-map iframe{display:block;width:100%;height:100%;min-height:230px;border:0}
.map-link{font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;align-self:flex-start}
.map-link:hover{text-decoration:underline}

@media(max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:20px}
  .contact-map{min-height:260px}
}
@media(max-width:560px){
  .contact-form-card{padding:22px 18px}
  .contact-form-card .fgrid{grid-template-columns:1fr}
}
footer{background:var(--ink);color:#9fb3aa;padding:36px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer b{color:#fff}

/* COURSE DETAIL PAGE */
.course-hero{position:relative;padding:72px 0 56px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--brand-dk),var(--brand))}
.course-hero::before{content:"";position:absolute;inset:0;background-size:cover;
  background-position:center;opacity:.24}
.course-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(20,80,59,.92) 0%,rgba(20,80,59,.70) 55%,rgba(29,107,79,.5) 100%)}
.course-hero .wrap{position:relative;z-index:1}
.crumbs{font-size:13.5px;margin-bottom:18px;opacity:.9}
.crumbs a{color:#fff;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.course-hero .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.course-hero h1{font-size:clamp(28px,4.6vw,44px);font-weight:800;max-width:24ch}
.course-hero p.lede{font-size:17.5px;opacity:.93;max-width:62ch;margin:16px 0 26px}
.course-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:38px;align-items:start}
.course-main h2{font-size:22px;font-weight:800;margin:34px 0 14px}
.course-main h2:first-child{margin-top:0}
/* Product image at the top of the course body. aspect-ratio + object-fit keeps
   every course the same shape regardless of the source photo's dimensions. */
.course-photo{margin:0 0 30px;border-radius:16px;overflow:hidden;background:var(--soft)}
.course-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;height:auto}
.course-main .course-photo+h2{margin-top:0}
.course-main p{color:var(--muted);font-size:15.5px}
.course-aside{position:sticky;top:88px}
.fact-card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:24px}
.fact-card h3{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.fact-card ul{list-style:none;display:grid;gap:10px;font-size:14.5px;color:var(--muted)}
.fact-card ul li{display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px dashed #cfe3d9;padding-bottom:10px}
.fact-card ul li:last-child{border:0;padding-bottom:0}
.fact-card ul b{color:var(--ink);font-weight:600;text-align:right}
/* Long values (modes of training, funding validity) read better stacked than
   squeezed into the right half of the row. */
.fact-card ul li.stack{display:block}
.fact-card ul li.stack b{display:block;text-align:left;margin-top:3px}
.fact-card .btn{width:100%;text-align:center;margin-top:18px}
.runs-table{width:100%;border-collapse:collapse;font-size:14.5px}
.runs-table th,.runs-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.runs-table th{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pill{background:var(--brand-lt);border:1px solid #cfe3d9;color:var(--brand-dk);
  font-size:13px;font-weight:600;padding:5px 12px;border-radius:100px}
.pill-invert{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
.course-hero .pill-row{margin-top:22px}

/* Course code label on cards */
.code-line{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);margin-bottom:7px}

/* Direct-contact block inside the course sidebar */
.aside-contact{margin-top:18px;padding-top:16px;border-top:1px solid #cfe3d9;
  display:grid;gap:6px;font-size:14px}
.aside-contact div{font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.aside-contact a{color:var(--brand-dk);text-decoration:none;font-weight:600}
.aside-contact a:hover{text-decoration:underline}

@media(max-width:820px){
  .nav-links{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .flyer-body{grid-template-columns:1fr;gap:28px}
  .fgrid{grid-template-columns:1fr}
  .flyer-top,.flyer-body,.flyer-foot{padding-left:24px;padding-right:24px}
  .course-layout{grid-template-columns:1fr}
  .course-aside{position:static}
}

/* ============================================================
   FOOD-CENTRIC HERO
   ============================================================ */
.hero{position:relative;padding:74px 0 64px;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,#f2f8f5 0%,#fff 62%)}
.hero::before,.hero::after{content:none}
.hero-bg{position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(200,137,43,.10) 0 22%, transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(29,107,79,.09) 0 26%, transparent 26%);
  background-repeat:no-repeat}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;
  gap:52px;align-items:center}
.hero-copy .eyebrow{background:#fff;border:1px solid #cfe3d9;color:var(--brand-dk)}
.hero h1{font-size:clamp(36px,5vw,56px);font-weight:800;max-width:14ch}
.hero h1 .hl{position:relative;color:var(--brand);white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.30em;
  background:rgba(200,137,43,.28);border-radius:3px;z-index:-1}
.hero p.lede{font-size:18.5px;color:var(--muted);max-width:54ch;margin:20px 0 28px}
.btn-lg{padding:14px 26px;font-size:15.5px}
.hero-ticks{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;
  font-size:14.5px;color:var(--muted);font-weight:600}
.hero-ticks li{white-space:nowrap}

.hero-art{position:relative;height:400px}
.hero-photo{position:absolute;border-radius:18px;background-size:cover;background-position:center;
  box-shadow:0 18px 44px rgba(20,80,59,.20);border:5px solid #fff}
.hero-photo-1{width:74%;height:70%;top:0;right:0;
  background-image:url('https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=900&q=70')}
.hero-photo-2{width:56%;height:52%;bottom:0;left:0;
  background-image:url('https://images.unsplash.com/photo-1581299894007-aaa50297cf16?auto=format&fit=crop&w=800&q=70')}
.hero-badge{position:absolute;right:4%;bottom:6%;z-index:2;background:var(--brand-dk);color:#fff;
  border-radius:16px;padding:16px 20px;box-shadow:0 12px 30px rgba(20,80,59,.30);
  display:flex;align-items:center;gap:12px}
.hero-badge b{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.hero-badge span{font-size:12.5px;line-height:1.35;opacity:.9}

.stats{position:relative;z-index:1;margin-top:56px}
.stat{position:relative;padding:22px 20px}
.stat-ic{display:block;font-size:20px;margin-bottom:8px}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%)}
.eyebrow-sm{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.quote-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:30px 26px 24px;display:flex;flex-direction:column;
  box-shadow:0 4px 18px rgba(20,80,59,.05);transition:.18s}
.quote-card:hover{border-color:#bcd6c9;box-shadow:0 10px 28px rgba(20,80,59,.10);
  transform:translateY(-2px)}
.quote-mark{font-size:62px;line-height:.7;color:var(--brand-lt);font-weight:800;
  font-family:Georgia,serif;margin-bottom:6px}
.quote-card blockquote{font-size:15.5px;line-height:1.62;color:var(--ink);flex:1;margin:0 0 20px}
.quote-card figcaption{display:flex;align-items:center;gap:13px;
  border-top:1px solid var(--line);padding-top:16px}
.q-avatar{flex:none;width:42px;height:42px;border-radius:50%;background:var(--brand);
  color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.quote-card figcaption b{display:block;font-size:14.5px;font-weight:700}
.quote-card figcaption span{display:block;font-size:13px;color:var(--muted)}
.quote-card .q-course{color:var(--brand);font-weight:600;margin-top:2px;font-size:12.5px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:#9fb3aa;padding:0;font-size:14px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;
  padding-top:56px;padding-bottom:44px;align-items:start}
.footer-brand .logo{color:#fff;font-size:19px;margin-bottom:14px}
.footer-brand .logo span{color:#7fc4a5}
.footer-brand p{font-size:14px;line-height:1.65;max-width:38ch}
.footer-brand .uen{margin-top:16px;font-size:13px;color:#8aa298}
.footer-brand .uen b{color:#fff}
.footer-col h4{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:16px}
.footer-col ul{list-style:none;display:grid;gap:11px}
.footer-col a{color:#9fb3aa;text-decoration:none;font-size:14px;line-height:1.45}
.footer-col a:hover{color:#fff}
.footer-col .addr{font-size:14px;line-height:1.5}
.footer-col .addr span{color:#7d938a}
/* Stays a single row at every width — the two items shrink rather than stack.
   Scoped as `footer .footer-bottom` to outrank `footer .wrap`, which sets
   flex-wrap:wrap on this same element. */
footer .footer-bottom{border-top:1px solid rgba(255,255,255,.10);padding:20px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:nowrap;font-size:13px;color:#7d938a}
.footer-bottom>div{min-width:0}

/* ============================================================
   WHATSAPP FLOATING WIDGET
   ============================================================ */
/* Brand teal button + amber accents, not WhatsApp green — the widget has to sit
   inside the site's palette rather than fight it. */
.wa-widget{position:fixed;right:22px;bottom:22px;z-index:200;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.wa-float{position:relative;display:flex;align-items:center;
  gap:0;background:var(--brand);color:#fff;border:0;cursor:pointer;font:inherit;
  text-decoration:none;border-radius:100px;
  padding:15px;box-shadow:0 8px 24px rgba(8,83,91,.42);
  transition:gap .22s ease,padding .22s ease,box-shadow .22s ease;overflow:hidden}
.wa-float:hover{gap:10px;padding:15px 22px 15px 17px;background:var(--brand-dk);
  box-shadow:0 12px 30px rgba(8,83,91,.55)}
.wa-float svg{flex:none;display:block}
.wa-label{max-width:0;opacity:0;white-space:nowrap;font-weight:700;font-size:15px;
  transition:max-width .22s ease,opacity .18s ease}
.wa-float:hover .wa-label,.wa-float[aria-expanded="true"] .wa-label{max-width:150px;opacity:1}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:100px;
  box-shadow:0 0 0 0 rgba(246,189,60,.55);animation:waPulse 2.6s infinite}
.wa-float[aria-expanded="true"]::before{animation:none}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(246,189,60,.5)}
  70%{box-shadow:0 0 0 16px rgba(246,189,60,0)}
  100%{box-shadow:0 0 0 0 rgba(246,189,60,0)}
}
@media(prefers-reduced-motion:reduce){.wa-float::before{animation:none}}

/* Suggested-query panel */
.wa-panel{width:320px;max-width:calc(100vw - 44px);background:#fff;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px rgba(6,43,54,.22);
  transform-origin:bottom right;animation:waPanelIn .18s ease}
.wa-panel[hidden]{display:none}
@keyframes waPanelIn{from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wa-panel{animation:none}}
.wa-panel-head{display:flex;align-items:center;gap:11px;padding:14px 15px;
  background:var(--brand-dk);color:#fff}
.wa-panel-avatar{width:40px;height:40px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.14);color:var(--amber)}
.wa-panel-avatar svg{width:24px;height:24px}
.wa-panel-head b{display:block;font-size:14.5px;letter-spacing:-.01em}
.wa-panel-head span{display:block;font-size:11.5px;color:rgba(255,255,255,.72);margin-top:2px}
.wa-close{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.75);
  font-size:24px;line-height:1;cursor:pointer;padding:0 2px}
.wa-close:hover{color:#fff}
.wa-panel-body{padding:15px;background:var(--soft)}
.wa-greeting{font-size:14px;color:var(--muted);margin-bottom:12px}
.wa-suggestions{display:grid;gap:8px}
.wa-chip{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;font-size:14px;line-height:1.45;color:var(--ink);text-decoration:none;
  transition:border-color .15s ease,background .15s ease,transform .15s ease}
.wa-chip:hover{border-color:var(--brand);background:var(--brand-lt);transform:translateX(2px)}
.wa-open{display:block;margin-top:12px;text-align:center;font-size:13.5px;font-weight:700;
  color:var(--brand);text-decoration:none}
.wa-open:hover{text-decoration:underline}

@media(max-width:980px){
  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
  .hero-inner{grid-template-columns:1fr;gap:38px}
  .hero-art{height:300px;max-width:520px}
  .hero h1{max-width:none}
}
@media(max-width:820px){
  .hero{padding:56px 0 48px}
  .hero-art{display:none}
  .footer-top{grid-template-columns:1fr;gap:30px;padding-top:42px}
  /* Kept on one row on mobile too — shrink the type rather than wrap. The extra
     bottom padding keeps the last line clear of the floating WhatsApp button. */
  /* The bottom padding keeps this last row clear of the fixed WhatsApp button. */
  footer .footer-bottom{flex-wrap:nowrap;gap:12px;font-size:11px;line-height:1.35;
    padding:20px 16px 92px}
  .wa-widget{right:16px;bottom:16px}
  .wa-float{padding:14px}
  .wa-float:hover{gap:0;padding:14px}
  .wa-float:hover .wa-label,
  .wa-float[aria-expanded="true"] .wa-label{max-width:0;opacity:0}
  .hero-ticks{gap:12px;font-size:13.5px}
}

/* ============================================================
   MALAY HERITAGE ACCENTS
   ============================================================ */
/* Woven songket texture behind the hero */
.hero-bg{
  background-image:
    radial-gradient(circle at 12% 18%, rgba(200,137,43,.11) 0 22%, transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(15,122,82,.10) 0 26%, transparent 26%),
    repeating-linear-gradient(45deg, rgba(15,122,82,.045) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(200,137,43,.045) 0 2px, transparent 2px 14px);
}
/* Gold songket rule under every section heading */
.sec-head h2{position:relative;padding-bottom:16px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;
  border-radius:3px;
  background-image:repeating-linear-gradient(90deg,var(--gold) 0 10px,var(--brand) 10px 16px)}
/* Halal-green top ribbon on course cards */
.card{position:relative}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background-image:repeating-linear-gradient(90deg,var(--brand) 0 14px,var(--gold) 14px 20px)}
/* Warmer, food-forward hero eyebrow */
.hero-copy .eyebrow{background:var(--gold-lt);border-color:#e6d3ad;color:#7a5312}
/* Songket band framing the flyer */
.flyer-top{border-top:5px solid var(--gold)}
.testimonials .quote-mark{color:var(--gold-lt)}
.q-avatar{background:linear-gradient(135deg,var(--brand),var(--brand-dk))}

/* ============================================================
   LARGER IMAGERY — food photography carries this design
   ============================================================ */
.card .thumb{height:230px}
.grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.hero{padding:80px 0 68px}
.hero-art{height:520px}
.hero-photo-1{width:78%;height:74%}
.hero-photo-2{width:60%;height:56%;bottom:0;left:0}
.hero-inner{gap:56px}
/* Flyer masthead now carries a real photo */
.flyer-top{background-size:cover;background-position:center;min-height:240px;
  display:flex;flex-direction:column;justify-content:center}
.flyer-top::before,.flyer-top::after{content:none}
/* Course hero images read larger and warmer */
.course-hero{padding:88px 0 68px}
.course-hero::before{opacity:.30}

@media(max-width:1100px){
  .hero-art{height:440px}
}
@media(max-width:980px){
  .hero-art{height:360px;max-width:100%}
  .card .thumb{height:210px}
}
@media(max-width:820px){
  .hero-art{display:block;height:280px;margin-top:8px}
  .hero-photo-1{width:82%;height:78%}
  .hero-photo-2{width:52%;height:50%}
  .hero-badge{right:2%;bottom:2%;padding:12px 16px}
  .hero-badge b{font-size:26px}
  .card .thumb{height:200px}
}

/* Footer: keep four true columns on desktop (brand column must not hog width) */
.footer-top{grid-template-columns:1.35fr 1.25fr .85fr 1fr;gap:34px}
.footer-brand p{max-width:34ch}
@media(max-width:1100px){
  .footer-top{grid-template-columns:1.2fr 1fr 1fr;gap:30px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:60ch}
}

/* ============================================================
   BRAND REBRAND — teal ground + amber accent
   Overrides the earlier green treatment.
   ============================================================ */
.btn{background:var(--amber);color:var(--teal)}
.btn:hover{background:var(--amber-lt);color:var(--teal)}
.btn-ghost{background:transparent;color:var(--teal);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--soft);border-color:var(--teal-lt);color:var(--teal)}

/* Dark teal hero, matching the holding page's gradient */
.hero{background:
    radial-gradient(circle at 82% 26%, rgba(255,255,255,.10), transparent 24%),
    radial-gradient(circle at 15% 85%, rgba(246,189,60,.10), transparent 24%),
    linear-gradient(115deg, var(--teal-dk), var(--teal-lt));
  border-bottom:0}
.hero h1{color:#fff}
.hero h1 .hl{color:var(--amber)}
.hero h1 .hl::after{background:rgba(246,189,60,.22)}
.hero p.lede{color:rgba(255,255,255,.80)}
.hero-copy .eyebrow{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--amber-lt);backdrop-filter:blur(8px)}
.hero-ticks{color:rgba(255,255,255,.72)}
.hero-bg{background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.030) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(246,189,60,.045) 0 2px, transparent 2px 14px)}
.hero-badge{background:var(--amber);color:var(--teal);
  box-shadow:0 12px 30px rgba(4,38,52,.38)}
.hero .btn-ghost{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.28)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
/* Stat tiles sit on the dark hero */
.stats .stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px)}
.stats .stat b{color:var(--amber)}
.stats .stat span{color:rgba(255,255,255,.72)}

/* Amber accents replace the gold/green songket */
.sec-head h2::after{background-image:none;background:var(--amber)}
.card::before{background-image:none;background:var(--amber)}
.code-line{color:var(--teal-lt)}
.card h3 a:hover{color:var(--teal-lt)}
.eyebrow-sm{color:var(--amber)}
.q-avatar{background:var(--amber);color:var(--teal)}
.quote-mark{color:var(--gold-lt)}
.pill{background:var(--brand-lt);border-color:#cfe2e6;color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--teal-lt);border-color:var(--teal-lt)}
.songket-band{background-color:var(--teal);
  background-image:
    repeating-linear-gradient(45deg,var(--amber) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(-45deg,var(--amber) 0 6px,transparent 6px 12px)}

/* Course hero + flyer masthead in teal */
.course-hero{background:linear-gradient(115deg,var(--teal-dk),var(--teal-lt))}
.course-hero .eyebrow{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);
  color:var(--amber-lt)}
.course-hero .pill-invert{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
.flyer-top{border-top:5px solid var(--amber)}
.price{background:var(--brand-lt);border-color:#cfe2e6}
.price .amt{color:var(--teal)}
.fact-card{background:var(--soft);border-color:var(--line)}
.fact-card ul li{border-bottom-color:#d7e5e8}
.aside-contact{border-top-color:#d7e5e8}
.aside-contact a{color:var(--teal-lt)}
.flyer-list li::before{color:var(--amber)}
a{color:var(--teal-lt)}
footer{background:var(--teal-dk)}
footer .footer-col a:hover{color:var(--amber)}

/* Logo must never inherit link underline/colour */
.logo,.logo:hover,.logo a,.logo a:hover{text-decoration:none;color:inherit}
nav .logo-title{color:var(--ink)}

/* ============================================================
   FIX: hero pills were dark-on-dark and unreadable
   ============================================================ */
.course-hero .pill,
.course-hero .pill-invert{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.42);
  color:#fff;
  font-weight:700;
  backdrop-filter:blur(6px);
}
/* Keep the masthead photo from washing out the text */
.course-hero::before{opacity:.20}
.course-hero::after{
  background:linear-gradient(120deg,rgba(4,38,52,.94) 0%,rgba(6,54,66,.86) 55%,rgba(8,83,91,.78) 100%)}

/* ============================================================
   TIGHTER RHYTHM — less dead space between sections
   ============================================================ */
section{padding:52px 0}
.sec-head{margin-bottom:26px}
.sec-head h2{padding-bottom:13px}
.sec-head p{margin-top:9px}
.hero{padding:64px 0 56px}
.stats{margin-top:38px}
.course-hero{padding:64px 0 52px}
.course-main h2{margin:26px 0 12px}
footer .footer-top{padding-top:44px;padding-bottom:34px}

/* ============================================================
   LEAD MAGNET
   ============================================================ */
.lead-magnet{background:linear-gradient(165deg,var(--brand-lt) 0%,#fff 70%);
  border-top:3px solid var(--amber)}
.lead-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.lead-copy h2{font-size:clamp(25px,3.3vw,34px);font-weight:800;margin:8px 0 14px;
  padding-bottom:0}
.lead-copy h2::after{content:none}
.lead-copy > p{color:var(--muted);font-size:16.5px;max-width:52ch}
.lead-benefits{list-style:none;display:grid;gap:11px;margin:20px 0 18px}
.lead-benefits li{position:relative;padding-left:30px;font-size:15.5px;font-weight:500}
.lead-benefits li::before{content:"✓";position:absolute;left:0;top:-1px;
  color:var(--amber);font-weight:800;font-size:17px}
.lead-trust{font-size:13.5px;color:var(--muted);font-weight:600;
  border-left:3px solid var(--amber);padding-left:12px}

.lead-form-card{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:30px 28px;box-shadow:0 14px 40px rgba(4,38,52,.13)}
.lead-form-card h3{font-size:21px;font-weight:800;margin-bottom:5px}
.lead-form-sub{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.lead-form-card form{background:transparent;border:0;padding:0;box-shadow:none;max-width:none}
.lead-form-card .field{margin-bottom:14px}
.lead-form-card .check{margin:6px 0 18px;font-size:13px}
.btn-block{width:100%;text-align:center}
.lead-fineprint{margin-top:11px;font-size:12.5px;color:var(--muted);text-align:center}

@media(max-width:900px){
  .lead-grid{grid-template-columns:1fr;gap:30px}
  section{padding:44px 0}
}

/* Footer attribution */
/* Sits as the right-hand cell of .footer-bottom, not as its own centred block. */
.powered-by{padding:0;margin:0;font-size:13px;color:#7d938a;text-align:right}
/* The WhatsApp button is position:fixed, so it hovers over whatever sits at the
   bottom of the viewport. Pad the end of the page so the last footer line scrolls
   clear of it instead of under it. Declared after the base rule above so it wins. */
.powered-by a{color:#9fb3aa;text-decoration:none;font-weight:600}
.powered-by a:hover{color:var(--amber);text-decoration:underline}

/* ============================================================
   TRAINERS — profile cards (source: SOP trainer profile PDFs)
   Reuses the card ribbon, avatar and panel treatments already
   in the system so the section does not read as a bolt-on.
   ============================================================ */
.trainers{background:linear-gradient(180deg,#fff 0%,var(--soft) 100%)}
.trainer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:24px}
.trainer-card{position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:30px 28px 26px;
  display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(20,80,59,.05);
  transition:.18s}
.trainer-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--amber);z-index:2}
.trainer-card:hover{box-shadow:0 10px 28px rgba(20,80,59,.10);transform:translateY(-2px)}
.trainer-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.trainer-avatar{flex:none;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-dk));
  color:#fff;font-weight:800;font-size:21px;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center}
.trainer-id h3{margin:0 0 4px;font-size:19px;line-height:1.25}
.trainer-role{margin:0;font-size:13px;color:var(--muted);font-weight:600;line-height:1.45}
.trainer-bio{flex:1}
.trainer-bio p{font-size:14.8px;line-height:1.62;color:var(--ink);margin:0 0 13px}
.trainer-exp{border-top:1px solid var(--line);padding-top:18px;margin-top:5px}
.trainer-exp h4{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand)}
.trainer-exp ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.trainer-exp li{position:relative;padding-left:24px;font-size:14.2px;line-height:1.5;
  color:var(--ink)}
.trainer-exp li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:2px;background:var(--amber)}
@media(max-width:820px){
  .trainer-grid{grid-template-columns:1fr}
  .trainer-card{padding:26px 20px 22px}
  .trainer-head{gap:13px}
  .trainer-avatar{width:52px;height:52px;font-size:18px}
  .trainer-id h3{font-size:17.5px}
}

/* ============================================================
   TRAINERS PAGE — standalone /trainers.html
   ============================================================ */
.page-hero{position:relative;padding:72px 0 56px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--brand-dk),var(--brand))}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.35);color:#fff}
.page-hero h1{font-size:clamp(28px,4.6vw,44px);font-weight:800;margin:0}
.page-hero-lede{font-size:17px;opacity:.93;max-width:70ch;margin:16px 0 0;line-height:1.6}
.trainers-page{padding:52px 0 64px}
.trainers-cta{margin-top:34px;text-align:center}
.trainers-cta p{margin:0 0 16px;font-size:16.5px;color:var(--ink);font-weight:600}
.trainers-cta .btn{margin:0 6px}
@media(max-width:820px){
  .page-hero{padding:52px 0 42px}
  .trainers-cta .btn{display:block;margin:10px auto;max-width:280px}
}