/*
Theme Name: Jomari Manto ePortfolio
Theme URI: https://jomarimanto.com
Author: Jomari Manto
Author URI: https://jomarimanto.com
Description: A light, two-purpose ePortfolio theme for Jomari Manto. A split Cover entry screen leads to Professional Services (Home, About, Experience, Services, Courses, Contact) and to Academics (course hub plus course pages with collapsible terms). Apple system font stack, lime accent, single 860px breakpoint.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jomari-eportfolio
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --bg:#ffffff;
  --panel:#f5f6f8;
  --panel2:#eceef1;
  --ink:#16181d;
  --muted:#5c6470;
  --line:#e2e5ea;
  --accent:#c6f24e;
  --accent-ink:#4c7a00;
  --on-accent:#0b0c0e;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--accent);color:var(--ink);}
input,textarea{font-family:var(--font);}
input::placeholder,textarea::placeholder{color:#5c636d;}
input:focus,textarea:focus{outline:none;border-color:var(--accent-ink);}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes spinring{to{transform:rotate(360deg);}}

.reveal{opacity:0;}
.reveal.is-visible{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both;}
.no-js .reveal{opacity:1;}

.site-main{max-width:1180px;margin:0 auto;padding:40px;}

/* ============================================================
   Professional top navigation
   ============================================================ */
.navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar__inner{
  max-width:1320px;margin:0 auto;
  padding:0 clamp(22px,4vw,56px);
  height:clamp(70px,6vw,98px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:relative;
}
.navbar__brand{display:flex;align-items:center;gap:clamp(11px,1vw,16px);min-width:0;}
.back-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(38px,3vw,48px);height:clamp(38px,3vw,48px);
  border:1px solid var(--line);border-radius:50%;
  color:var(--ink);font-size:clamp(16px,1.4vw,20px);flex:none;background:var(--bg);
  transition:border-color .2s,color .2s;
}
.back-btn:hover{border-color:var(--accent-ink);color:var(--accent-ink);}
.avatar-circle{
  width:clamp(42px,3.4vw,56px);height:clamp(42px,3.4vw,56px);
  border-radius:50%;overflow:hidden;border:1px solid var(--line);flex:none;background:var(--panel);
}
.avatar-circle img{width:100%;height:100%;object-fit:cover;}
.brand-name{font-weight:800;font-size:clamp(17px,1.5vw,23px);letter-spacing:-.01em;line-height:1.05;}
.brand-sub{
  font-size:clamp(10px,.82vw,12px);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink);margin-top:2px;
}
.navbar__links{
  display:flex;align-items:center;gap:clamp(20px,2.3vw,40px);
  font-size:clamp(14px,1.15vw,17px);letter-spacing:.02em;
}
.navbar__links a{color:var(--muted);transition:color .2s;}
.navbar__links a:hover{color:var(--accent-ink);}
.navbar__links a.is-active,
.navbar__links li.current-menu-item > a,
.navbar__links li.current_page_item > a{color:var(--accent-ink);font-weight:600;}
.navbar__toggle{
  display:none;align-items:center;justify-content:center;
  width:clamp(46px,6vw,54px);height:clamp(46px,6vw,54px);
  font-size:20px;cursor:pointer;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;flex:none;
}

/* Academic top bar */
.acbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.acbar__inner{
  max-width:1320px;margin:0 auto;
  padding:0 clamp(22px,4vw,56px);
  height:clamp(70px,6vw,98px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.acbar__links{display:flex;align-items:center;gap:clamp(18px,2.2vw,36px);font-size:clamp(14px,1.15vw,17px);}
.acbar__links a{color:var(--muted);transition:color .2s;}
.acbar__links a:hover{color:var(--ink);}
.acbar__links a.is-active{color:var(--accent-ink);font-weight:600;}

/* ============================================================
   Cover (front page)
   ============================================================ */
.cover{position:relative;min-height:100vh;}
.cover__brand{
  position:absolute;top:26px;left:50%;transform:translateX(-50%);z-index:10;
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:100px;padding:7px 16px 7px 7px;
}
.cover__brand-photo{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid var(--line);flex:none;background:var(--panel);}
.cover__brand-photo img{width:100%;height:100%;object-fit:cover;}
.cover__brand-name{font-weight:800;font-size:15px;letter-spacing:-.01em;}
.cover__split{display:flex;min-height:100vh;}
.cover__half{
  flex:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:64px;transition:background .35s ease;
}
.cover__half--left{align-items:flex-end;text-align:right;border-right:1px solid var(--line);background:var(--bg);}
.cover__half--left:hover{background:var(--panel);}
.cover__half--right{align-items:flex-start;text-align:left;background:var(--panel);}
.cover__half--right:hover{background:#eef0d9;}
.cover__title{
  margin:0;display:flex;align-items:center;gap:18px;
  font-weight:800;font-size:52px;line-height:1.02;letter-spacing:-.03em;
}
.cover__arrow{font-size:38px;color:var(--accent-ink);}
.cover__title span.txt{max-width:9ch;}

/* ============================================================
   Shared content atoms
   ============================================================ */
.eyebrow{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px;
}
.page-h1{
  margin:0 0 40px;font-weight:800;font-size:60px;line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;
}
.page-h1 .accent{color:var(--accent-ink);}
.section{margin-top:28px;}
.section__head{margin:0 4px 16px;}
.section__title{margin:0;font-weight:800;font-size:28px;letter-spacing:-.02em;text-transform:uppercase;}

.cta{
  margin-top:28px;background:var(--accent);color:var(--on-accent);border-radius:20px;
  padding:40px 44px;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
}
.cta h2{margin:0;font-weight:800;font-size:32px;letter-spacing:-.02em;text-transform:uppercase;}
.cta__btn{
  font-weight:800;font-size:16px;background:var(--on-accent);color:var(--accent-ink);
  padding:15px 28px;border-radius:100px;transition:opacity .2s;
}
.cta__btn:hover{opacity:.85;}

.chip{font-weight:700;font-size:15px;padding:9px 16px;border:1px solid var(--line);border-radius:100px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--muted);}
.tags span{border:1px solid var(--line);padding:5px 10px;border-radius:6px;}

/* Profile ring (Home hero + About) */
.ring-tile{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow:hidden;
}
.ring-wrap{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-ink),#ffffff,var(--accent-ink),var(--accent));
  animation:spinring 5s linear infinite;
}
.ring-inner{
  position:relative;width:calc(100% - 14px);aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;background:var(--panel);border:3px solid var(--panel);
}
.ring-inner img{width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion:reduce){.ring{animation:none;}}

/* ============================================================
   Home
   ============================================================ */
.hero{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:minmax(150px,auto);gap:14px;}
.hero__big{
  grid-column:span 2;grid-row:span 2;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;
}
.hero__eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);}
.hero__title{margin:24px 0 0;font-weight:800;font-size:64px;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;}
.hero__title .accent{color:var(--accent-ink);}
.hero__lead{margin:24px 0 0;max-width:46ch;font-size:16px;line-height:1.6;color:var(--muted);}
.hero__ring{grid-row:span 2;}
.chips-row{
  grid-column:span 3;background:var(--panel2);border:1px solid var(--line);border-radius:20px;
  padding:22px 26px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.chips-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:8px;}
.explore-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 16px;}
.explore-head span{font-size:12px;color:var(--muted);}
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.explore-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;
  display:flex;justify-content:space-between;align-items:center;
  transition:border-color .25s,transform .25s;color:var(--ink);
}
.explore-card:hover{border-color:var(--accent-ink);transform:translateY(-4px);}
.explore-card__idx{font-size:11px;color:var(--accent-ink);margin-bottom:8px;}
.explore-card h3{margin:0;font-weight:700;font-size:22px;}
.explore-card p{margin:6px 0 0;color:var(--muted);font-size:14px;}
.explore-card__arrow{font-size:24px;}
.cta--home{padding:44px 48px;}
.cta--home h2{font-size:38px;line-height:.95;}
.cta--home .cta__btn{padding:16px 30px;}

/* ============================================================
   About
   ============================================================ */
.about-grid{display:grid;grid-template-columns:340px 1fr;gap:32px;align-items:start;}
.about-aside{position:sticky;top:40px;}
.facts{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;}
.facts__label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;}
.facts__list{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.facts__row{display:flex;justify-content:space-between;}
.facts__row .k{color:var(--muted);}
.facts__row .v.accent{color:var(--accent-ink);}
.bio{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:40px;}
.bio__lead{margin:0 0 20px;font-weight:700;font-size:26px;line-height:1.25;letter-spacing:-.01em;}
.bio p{margin:0 0 16px;font-size:16px;line-height:1.75;color:var(--muted);}
.bio p:last-of-type{margin:0;}
.bio__stats{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:30px;}
.bio__stat-num{font-weight:800;font-size:44px;color:var(--accent-ink);line-height:.9;}
.bio__stat-cap{font-size:13px;color:var(--muted);margin-top:6px;}
.drives-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.drive-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;}
.drive-card__title{font-weight:800;font-size:30px;color:var(--accent-ink);}
.drive-card p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.6;}

/* ============================================================
   Experience
   ============================================================ */
.timeline{display:flex;flex-direction:column;gap:12px;}
.tl-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 36px;
  display:grid;grid-template-columns:170px 1fr;gap:28px;transition:border-color .25s;
}
.tl-card:hover{border-color:var(--accent-ink);}
.tl-card__date{font-size:13px;color:var(--accent-ink);}
.tl-card__cat{
  margin-top:12px;font-size:12px;color:var(--muted);border:1px solid var(--line);
  display:inline-block;padding:5px 11px;border-radius:100px;
}
.tl-card__title{margin:0 0 8px;font-weight:800;font-size:24px;}
.tl-card__desc{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.65;max-width:64ch;}
.skillcloud{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-wrap:wrap;gap:10px;}
.skillcloud .chip{padding:10px 18px;background:var(--panel);}

/* ============================================================
   Services
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.svc-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px;
  transition:transform .25s,border-color .25s;
}
.svc-card:hover{transform:translateY(-5px);border-color:var(--accent-ink);}
.svc-card__idx{font-weight:800;font-size:38px;color:var(--accent-ink);line-height:1;}
.svc-card__title{margin:16px 0 10px;font-weight:800;font-size:24px;}
.svc-card__desc{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.65;}
.svc-card .tags span{padding:4px 10px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.step{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:26px;}
.step__num{font-size:12px;color:var(--accent-ink);}
.step__title{margin:12px 0 6px;font-weight:700;font-size:19px;}
.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;}

/* ============================================================
   Courses (professional certifications)
   ============================================================ */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.course-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;
  transition:transform .25s,border-color .25s;
}
.course-card:hover{transform:translateY(-5px);border-color:var(--accent-ink);}
.course-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.course-card__num{font-size:12px;color:var(--muted);}
.course-card h3{margin:0 0 8px;font-weight:800;font-size:20px;}
.course-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;}
.badge{font-size:10px;padding:4px 9px;border-radius:6px;}
.badge--certified{color:var(--on-accent);background:var(--accent);}
.badge--progress{color:var(--accent-ink);border:1px solid var(--accent-ink);}
.badge--outline{color:var(--muted);border:1px solid var(--line);}
.course-next{
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent-ink);
  border-radius:18px;padding:30px;display:flex;flex-direction:column;justify-content:center;
}
.course-next__label{font-size:11px;opacity:.7;margin-bottom:10px;}
.course-next p{margin:0;font-weight:800;font-size:22px;line-height:1.1;}
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.focus{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:26px;}
.focus__head{display:flex;justify-content:space-between;align-items:baseline;}
.focus__name{font-weight:700;font-size:17px;}
.focus__pct{font-size:12px;color:var(--accent-ink);}
.focus__bar{height:6px;background:var(--line);border-radius:100px;margin-top:12px;overflow:hidden;}
.focus__bar > span{display:block;height:100%;background:var(--accent);}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.contact-left{display:flex;flex-direction:column;gap:14px;}
.email-card{background:var(--accent);color:var(--on-accent);border-radius:18px;padding:32px;display:block;transition:opacity .2s;}
.email-card:hover{opacity:.9;}
.email-card__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.email-card__addr{font-weight:800;font-size:26px;letter-spacing:-.01em;word-break:break-word;}
.details-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.detail__label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.detail__value{font-weight:600;}
.detail__value.accent{color:var(--accent-ink);}
.online-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;}
.online-card__label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;}
.online-list{display:flex;flex-direction:column;gap:2px;font-size:14px;}
.online-list a{padding:11px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--ink);transition:color .2s;}
.online-list a:last-child{border-bottom:1px solid var(--line);}
.online-list a:hover{color:var(--accent-ink);}
.contact-form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px;display:flex;flex-direction:column;gap:16px;}
.contact-form__title{font-weight:800;font-size:22px;}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted);}
.contact-form input,.contact-form textarea{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--ink);font-size:15px;
}
.contact-form textarea{resize:vertical;}
.contact-form button{
  font-weight:800;font-size:16px;background:var(--accent);color:var(--on-accent);
  border:none;border-radius:100px;padding:15px;cursor:pointer;margin-top:4px;transition:opacity .2s;
}
.contact-form button:hover{opacity:.9;}
.contact-foot{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted);
}

/* ============================================================
   Academics hub + course pages
   ============================================================ */
.ac-main{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(22px,4vw,56px);}
.ac-main--narrow{max-width:900px;}
.ac-h1{margin:0 0 40px;font-weight:800;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.03em;}
.ac-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px;}
.ac-list{display:flex;flex-direction:column;gap:14px;}
.ac-item{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 30px;
  transition:transform .25s,border-color .25s;color:var(--ink);
}
.ac-item:hover{transform:translateY(-4px);border-color:var(--accent-ink);}
.ac-item__title{font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-.01em;}
.ac-item__arrow{font-size:24px;color:var(--accent-ink);flex:none;}
.course-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:26px;transition:color .2s;}
.course-back:hover{color:var(--accent-ink);}
.course-back__arrow{font-size:17px;}
.course-h1{margin:0 0 34px;font-weight:800;font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.03em;max-width:18ch;}

summary{list-style:none;}
summary::-webkit-details-marker{display:none;}
.term{border:1px solid var(--line);border-radius:16px;background:var(--bg);margin-bottom:14px;overflow:hidden;}
.term:last-of-type{margin-bottom:0;}
.term__summary{
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(20px,3vw,28px);font-weight:800;font-size:clamp(18px,2vw,23px);letter-spacing:-.01em;
}
.chev{display:inline-block;color:var(--accent-ink);font-size:20px;transition:transform .25s;flex:none;}
.term[open] .chev{transform:rotate(90deg);}
.term__body{padding:0 clamp(20px,3vw,28px) clamp(24px,3vw,32px);}
.coming-soon{
  background:var(--panel);border:1px dashed var(--line);border-radius:12px;
  padding:34px;text-align:center;color:var(--muted);font-size:15px;
}
/* Rich text inside a term */
.term__body h2{margin:0 0 18px;font-weight:800;font-size:clamp(20px,2.2vw,27px);line-height:1.2;letter-spacing:-.02em;}
.term__body p{margin:0 0 18px;font-size:17px;line-height:1.8;}
.term__body p:last-child{margin-bottom:0;}
.term__body section{margin-bottom:40px;}
.term__body section:last-child{margin-bottom:0;}
.term__body .q-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px;}
.term__body .refs{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
.term__body .refs-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.term__body .refs p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted);padding-left:26px;text-indent:-26px;}
.term__body .refs p:last-child{margin-bottom:0;}

/* ============================================================
   Footers
   ============================================================ */
.site-footer{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:28px 40px;width:100%;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.site-footer__socials{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;}
.site-footer a{transition:color .2s;}
.site-footer a:hover{color:var(--ink);}
.site-footer__copy{opacity:.6;}
.ac-footer{border-top:1px solid var(--line);padding:24px clamp(22px,4vw,56px);text-align:center;font-size:13px;color:var(--muted);}
.page-shell{min-height:100vh;display:flex;flex-direction:column;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  html,body{overflow-x:hidden;}
  .site-main{padding:20px;}

  /* Nav collapses to a dropdown */
  .navbar__links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:4px 20px 16px;box-shadow:0 18px 30px -20px rgba(0,0,0,.25);
  }
  .navbar[data-open="true"] .navbar__links{display:flex;}
  .navbar__links a{padding:15px 2px;font-size:16px;border-bottom:1px solid var(--line);}
  .navbar__toggle{display:flex;}
  .navbar__inner{padding:0 20px;}

  /* Grids fold to one column */
  .hero,.explore-grid,.about-grid,.drives-grid,.svc-grid,.steps,
  .course-grid,.focus-grid,.contact-grid,.details-card,.tl-card{
    grid-template-columns:minmax(0,1fr);
  }
  .hero__big,.chips-row,.hero__ring{grid-column:auto;grid-row:auto;}
  .about-aside{position:relative;top:auto;}

  .page-h1,.hero__title{font-size:40px;line-height:.95;}
  .cta--home h2{font-size:34px;line-height:.96;}
  .site-footer{padding:28px 20px;}
}

@media (max-width:820px){
  .cover__split{flex-direction:column;}
  .cover__half{min-height:52vh;}
  .cover__brand{position:static;transform:none;margin:0 auto;}
  .cover__title{font-size:40px;}
}

@media (max-width:640px){
  .acbar__inner{height:auto;flex-direction:column;gap:10px;padding-top:12px;padding-bottom:12px;}
}