/* ===========================================================
   ASkills — static site stylesheet
   Palette pulled from the original WordPress theme:
   ink/dark   #141608   cream       #FBFBF4
   accent     #D2DE45   accent-dim  #8A9A1F
   card-light #EFEFE2   card-dark   #2C3018
   muted-lt   #5C614F   muted-dk    #C9CBB8
   =========================================================== */

:root{
  --ink:#141608;
  --ink-2:#2C3018;
  --cream:#FBFBF4;
  --card-light:#EFEFE2;
  --accent:#D2DE45;
  --accent-dim:#8A9A1F;
  --muted-on-light:#5C614F;
  --muted-on-dark:#C9CBB8;
  --radius:4px;
  --content-width:1040px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.wrap{
  max-width:var(--content-width);
  margin:0 auto;
  padding:0 1.5rem;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--accent);
  color:var(--ink);
  padding:.75rem 1.25rem;
  z-index:1000;
  font-weight:700;
  border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; top:0; }

/* ---------- Header ---------- */
.site-header{
  background:var(--ink);
  color:var(--cream);
  position:sticky;
  top:0;
  z-index:100;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-top:1.1rem;
  padding-bottom:1.1rem;
  flex-wrap:wrap;
}
.brand{
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--cream);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.brand .dot{
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--accent);
  display:inline-block;
}

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--muted-on-dark);
  color:var(--cream);
  border-radius:4px;
  padding:.4rem .6rem;
  cursor:pointer;
  font-size:1rem;
}

.main-nav{
  display:flex;
  gap:1.75rem;
  flex-wrap:wrap;
}
.main-nav a{
  color:var(--cream);
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  padding:.25rem 0;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.main-nav a:hover{ color:var(--accent); }
.main-nav a[aria-current="page"]{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

@media (max-width:820px){
  .nav-toggle{ display:inline-block; }
  .main-nav{
    flex-basis:100%;
    display:none;
    flex-direction:column;
    gap:0;
    border-top:1px solid #2b2e17;
    margin-top:.75rem;
    padding-top:.5rem;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{
    padding:.75rem 0;
    border-bottom:1px solid #2b2e17;
  }
}

/* ---------- Sections ---------- */
section{ padding:5rem 0; }
section.tight{ padding:3.5rem 0; }

.section-dark{ background:var(--ink); color:var(--cream); }
.section-cream{ background:var(--cream); color:var(--ink); }
.section-card-bg{ background:var(--card-light); color:var(--ink); }
.section-accent{ background:var(--accent); color:var(--ink); }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.82rem;
  font-weight:700;
  margin:0 0 .9rem;
  color:var(--accent-dim);
}
.section-dark .eyebrow{ color:var(--accent); }
.section-accent .eyebrow{ color:var(--ink); opacity:.7; }

h1{ font-size:3rem; line-height:1.08; margin:0 0 1.1rem; font-weight:800; }
h2{ font-size:2.15rem; line-height:1.15; margin:0 0 1rem; font-weight:800; }
h3{ font-size:1.25rem; line-height:1.15; margin:0 0 .6rem; font-weight:700; }
h4{ font-size:1rem; line-height:1.15; margin:0 0 .6rem; font-weight:700; }

.lede{ font-size:1.2rem; line-height:1.6; max-width:46rem; }
p{ margin:0 0 1.1rem; }
.muted-on-light{ color:var(--muted-on-light); }
.muted-on-dark{ color:var(--muted-on-dark); }

ul.plain{ padding-left:1.2rem; margin:0 0 1.1rem; }
ul.plain li{ margin-bottom:.5rem; }

hr.rule{ border:none; border-top:1px solid rgba(0,0,0,.08); margin:2rem 0; }
.section-dark hr.rule{ border-top-color:rgba(255,255,255,.12); }

/* ---------- Buttons ---------- */
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1rem; }
.btn{
  display:inline-block;
  padding:.85rem 1.7rem;
  border-radius:3px;
  text-decoration:none;
  font-weight:700;
  font-size:.98rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{ opacity:.9; }
.btn:active{ transform:translateY(1px); }

.btn-accent{ background:var(--accent); color:var(--ink); }
.btn-dark{ background:var(--ink); color:var(--accent); }
.btn-outline-dark{ background:var(--ink-2); color:var(--cream); }
.btn-ghost-on-dark{ background:transparent; color:var(--cream); border-color:var(--muted-on-dark); }

/* ---------- Grid / columns ---------- */
.grid{
  display:grid;
  gap:1.75rem;
  margin-top:1.5rem;
}
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:820px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}

/* ---------- Cards ---------- */
.card{
  background:var(--card-light);
  border-radius:var(--radius);
  padding:1.75rem;
}
.card.on-dark{
  background:var(--ink-2);
  color:var(--cream);
}
.card.on-cream-alt{
  background:var(--cream);
}
.card .step-no{
  font-size:2.1rem;
  line-height:1;
  color:var(--accent-dim);
  font-weight:800;
  margin-bottom:.75rem;
  display:block;
}
.card h3{ margin-top:0; }
.card p:last-child{ margin-bottom:0; }

.program-card{
  background:var(--card-light);
  border-radius:var(--radius);
  padding:1.75rem 2rem;
  margin-bottom:1.25rem;
}
.program-card .eyebrow{ margin-bottom:.5rem; }

.stage-block + .stage-block{ margin-top:0; }

/* Two-column "what happens / what you get" layout used on Our Approach */
.stage-cols{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:1.75rem;
  margin-top:1rem;
}
@media (max-width:820px){
  .stage-cols{ grid-template-columns:1fr; }
}
.stage-cols h4{
  font-size:1.02rem;
  text-transform:none;
  color:var(--accent-dim);
}
.section-dark .stage-cols h4{ color:var(--accent); }

/* ---------- Quote / callout ---------- */
.quote-heading{
  font-size:2.2rem;
  line-height:1.2;
  font-style:italic;
  margin:0 0 1.1rem;
}

/* ---------- Contact form ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2.5rem;
  margin-top:1.5rem;
}
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
}
form.enquiry{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
form.enquiry label{
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted-on-light);
  margin-bottom:.35rem;
  display:block;
}
form.enquiry input,
form.enquiry textarea{
  width:100%;
  padding:.75rem .9rem;
  border:1px solid #d8d8c9;
  border-radius:4px;
  font-family:inherit;
  font-size:1rem;
  background:#fff;
  color:var(--ink);
}
form.enquiry input:focus,
form.enquiry textarea:focus{
  outline:2px solid var(--accent-dim);
  outline-offset:1px;
}
form.enquiry textarea{ min-height:130px; resize:vertical; }
form.enquiry button{
  align-self:flex-start;
  border:none;
}
.form-note{
  font-size:.85rem;
  color:var(--muted-on-light);
}
#form-success{
  display:none;
  background:var(--card-light);
  border-left:4px solid var(--accent-dim);
  padding:1rem 1.25rem;
  border-radius:4px;
  margin-top:1rem;
}
#form-success.show{ display:block; }

.info-card{
  background:var(--card-light);
  border-radius:var(--radius);
  padding:1.75rem 2rem;
}
.info-card h3{ margin-top:1.4rem; }
.info-card h3:first-child{ margin-top:0; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:var(--cream);
  padding:3.5rem 0 2.5rem;
}
.footer-cols{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:2.5rem;
}
@media (max-width:820px){
  .footer-cols{ grid-template-columns:1fr; }
}
.footer-cols h3, .footer-cols h4{ color:var(--cream); }
.footer-cols a{
  color:var(--cream);
  text-decoration:none;
  display:block;
  margin-bottom:.6rem;
  font-size:.95rem;
}
.footer-cols a:hover{ color:var(--accent); text-decoration:underline; }
.footer-tagline{ color:var(--accent); margin-bottom:.6rem; }
.footer-bottom{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem;
  color:var(--muted-on-dark);
}

/* ---------- Offline/build notice (kept for transparency, easy to delete) ---------- */
.build-notice{
  background:#fff8e6;
  border-bottom:1px solid #f0dca0;
  color:#6b5500;
  font-size:.85rem;
  padding:.6rem 1.5rem;
  text-align:center;
}
.build-notice button{
  border:none;
  background:transparent;
  color:#6b5500;
  text-decoration:underline;
  cursor:pointer;
  font-size:.85rem;
  margin-left:.5rem;
}

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size:.9rem; }