/* ==========================================================================
   HACKADEMIA TECHNOLOGY INSTITUTE — public website
   Single file. Sections are marked with big comment banners so you can find
   anything fast. Order: tokens, header, hero, home sections, about, footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Every colour, size and shadow lives here. Change it once, it changes
   everywhere on the site.
   -------------------------------------------------------------------------- */
:root{
  --wine:#9e1b1b;            /* main brand red: buttons, links, footer */
  --wine-deep:#7d1414;       /* darker red for hover states */
  --wine-soft:#c9736c;       /* muted rose used on the Request A Call button */
  --blush:#fbe7e7;           /* pink band behind the hero and Why Choose */
  --blush-pale:#fdf2f2;      /* even lighter pink for panels */
  --sand:#f3ce8d;            /* warm mustard band on the Corporate page */
  --ink:#111111;             /* headings */
  --body:#4a4a4a;            /* paragraph text */
  --body-soft:#6b6b6b;       /* small print */
  --line:#e2e2e2;            /* card borders and hairlines */
  --band:#ededed;            /* grey blog band */
  --taupe:#9c8977;           /* social circles on the About page */
  --white:#ffffff;

  --display:'Poppins',system-ui,sans-serif;   /* headings and buttons */
  --text:'Lato',system-ui,sans-serif;         /* body copy */

  --shell:1180px;            /* max content width */
  --gutter:24px;
  --radius:4px;              /* buttons and cards are only slightly rounded */
  --header-h:88px;
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE TYPE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--text);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--wine);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.15;}
p{margin:0 0 1.1em;}
:focus-visible{outline:3px solid var(--wine);outline-offset:3px;}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);}
.section{padding:84px 0;}
.section--tight{padding:60px 0;}
.section--pink{background:var(--blush);}
.section--band{background:var(--band);}

/* Centred section heading + intro line, used all over the home page */
.head{text-align:center;max-width:900px;margin:0 auto 52px;}
.head h2{font-size:clamp(1.75rem,3.4vw,2.35rem);font-weight:800;letter-spacing:-.01em;}
.head p{margin:18px auto 0;max-width:820px;font-size:1.05rem;color:var(--body);}

/* Buttons -----------------------------------------------------------------*/
.btn{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:1rem;
  padding:15px 30px;border-radius:var(--radius);border:2px solid transparent;
  text-align:center;transition:background .18s ease,color .18s ease;
}
.btn:hover{text-decoration:none;}
.btn--solid{background:var(--wine);color:#fff;}
.btn--solid:hover{background:var(--wine-deep);}
.btn--ghost{background:transparent;color:var(--wine);border-color:var(--wine);}
.btn--ghost:hover{background:var(--wine);color:#fff;}
.btn--rose{background:var(--wine-soft);color:#fff;}
.btn--rose:hover{background:var(--wine);}
.btn--sm{padding:12px 24px;font-size:.95rem;}

/* --------------------------------------------------------------------------
   3. LOGO
   The mark is a sheared "H" built from three angled bars, then the wordmark
   sits beside it with "Institute" tucked under the tail.
   -------------------------------------------------------------------------- */
.logo{display:flex;align-items:flex-end;gap:6px;text-decoration:none;}
.logo:hover{text-decoration:none;}
.logo__mark{width:26px;height:34px;flex:none;}
.logo__img{height:46px;width:auto;display:block;}
.logo__img--light{height:52px;}
@media (max-width:560px){.logo__img{height:38px;}}
.plogo{max-width:180px;max-height:74px;width:auto;height:auto;object-fit:contain;}
@media (max-width:860px){.plogo{max-width:140px;max-height:62px;}}
.logo__type{display:flex;flex-direction:column;align-items:flex-end;line-height:1;}
.logo__word{
  font-family:var(--display);font-weight:800;font-size:1.9rem;letter-spacing:-.03em;
  color:var(--ink);transform:skewX(-4deg);
}
.logo__sub{
  font-family:var(--text);font-size:.72rem;letter-spacing:.04em;color:var(--ink);
  margin-top:2px;
}
.logo--light .logo__word,.logo--light .logo__sub{color:#fff;}

/* --------------------------------------------------------------------------
   4. HEADER AND NAVIGATION
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:120;background:#fff;
  border-bottom:1px solid var(--line);
}
.header__inner{
  max-width:1440px;margin:0 auto;padding:0 28px;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav{display:flex;align-items:center;gap:34px;}
.nav__item{position:relative;}
.nav__link{
  font-family:var(--display);font-weight:700;font-size:.86rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:7px;
  background:none;border:0;padding:10px 0;
}
.nav__link:hover{text-decoration:none;color:var(--wine);}
.nav__link[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;}
.nav__caret{width:11px;height:11px;transition:transform .18s ease;}
.nav__item.open .nav__caret{transform:rotate(180deg);}

.menu{
  position:absolute;top:100%;left:-18px;min-width:236px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.10);
  padding:8px 0;display:none;
}
.nav__item.open>.menu{display:block;}
.menu a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 22px;font-family:var(--display);font-weight:600;font-size:.95rem;
  color:var(--ink);
}
.menu a:hover{background:var(--blush-pale);color:var(--wine);text-decoration:none;}
.menu__group{position:relative;}
.menu__group>.menu{top:-9px;left:100%;}
.menu__group:hover>.menu{display:block;}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius);position:relative;
}
.burger span{
  position:absolute;left:12px;right:12px;height:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.burger span:nth-child(1){top:15px;}
.burger span:nth-child(2){top:21px;}
.burger span:nth-child(3){top:27px;}
body.drawer-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.drawer-open .burger span:nth-child(2){opacity:0;}
body.drawer-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Mobile drawer ----------------------------------------------------------*/
.drawer{
  position:fixed;inset:var(--header-h) 0 0 0;background:#fff;z-index:110;
  transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;
  padding:22px var(--gutter) 60px;
}
body.drawer-open .drawer{transform:translateX(0);}
.drawer__row{border-bottom:1px solid var(--line);}
.drawer__top{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:18px 2px;background:none;border:0;font-family:var(--display);
  font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);text-align:left;
}
.drawer__sub{display:none;padding:0 2px 16px;}
.drawer__row.open .drawer__sub{display:block;}
.drawer__row.open .nav__caret{transform:rotate(180deg);}
.drawer__sub a{
  display:block;padding:10px 0;font-family:var(--display);font-weight:500;
  font-size:.98rem;color:var(--body);
}
.drawer .btn{width:100%;margin-top:26px;}

@media (max-width:1023px){
  .nav{display:none;}
  .burger{display:block;}
  .header__cta{display:none;}
}

/* --------------------------------------------------------------------------
   5. HERO
   Pink band, big oblique headline on the left, framed photo on the right,
   and a white curve scooped out of the bottom edge.
   -------------------------------------------------------------------------- */
.hero{background:var(--blush);position:relative;padding:76px 0 118px;}
.hero__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.hero h1{
  font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:800;font-style:italic;
  line-height:1.02;letter-spacing:-.025em;
}
.hero h1 .accent{color:var(--wine);}
.hero__lede{
  font-style:italic;font-size:clamp(1.05rem,1.5vw,1.3rem);color:#2f2f2f;
  max-width:30ch;margin:26px 0 34px;line-height:1.5;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;}

/* Photo sits inside a soft pale panel, with a thin wine outline offset
   behind it, exactly like the current site. */
/* Photo sits inside a wine outline that is offset up and to the left, and
   crosses over the photo on its right and bottom edges. Percentages are
   measured from the original artwork, so the whole thing scales cleanly. */
.hero__frame{position:relative;aspect-ratio:1200/1096;}
.hero__frame img{
  position:absolute;left:11.7%;top:6%;width:88.3%;height:93.6%;
  object-fit:cover;border-radius:8.5%/9%;
  background:linear-gradient(135deg,#f6dede,#efc9c9);
}
.hero__frame::after{
  content:"";position:absolute;left:0;top:0;width:92.9%;height:92.7%;
  border:1.5px solid rgba(158,27,27,.85);border-radius:9%/9.5%;pointer-events:none;
}
.curve{display:block;width:100%;height:74px;margin-top:-1px;}

@media (max-width:900px){
  .hero{padding:52px 0 84px;}
  .hero__grid{grid-template-columns:1fr;gap:38px;}
  .hero__lede{max-width:none;}
  .hero__frame::after{border-radius:7%/7.5%;}
}

/* --------------------------------------------------------------------------
   6. PARTNER AND CLIENT WORDMARKS
   Real logo files are not in this file, so each partner is drawn as a clean
   text wordmark in its own brand colour. Swap any .mark block for an <img>
   when you have the real asset.
   -------------------------------------------------------------------------- */
.logos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:56px 40px;align-items:center;
  justify-items:center;
}
.logos--row{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 56px;}
.mark{
  font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;line-height:1.1;text-align:center;
}
.mark__dot{width:34px;height:34px;border-radius:50%;flex:none;}
.mark__sq{width:30px;height:30px;flex:none;}
.mark--stack{flex-direction:column;gap:2px;font-size:.82rem;font-weight:800;letter-spacing:.02em;}
.mark small{display:block;font-family:var(--text);font-weight:400;font-size:.68rem;letter-spacing:.06em;}
.and-more{text-align:center;margin:38px 0 0;color:var(--body);}
.medialink{display:inline-block;text-decoration:none;transition:opacity .18s ease;}
.medialink:hover{opacity:.7;text-decoration:none;}

@media (max-width:860px){.logos{grid-template-columns:repeat(2,1fr);gap:44px 24px;}}

/* --------------------------------------------------------------------------
   7. SCHOOL CARDS  (Explore our School)
   -------------------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.card{
  border:1px solid var(--line);background:#fff;padding:18px 18px 26px;
  display:flex;flex-direction:column;text-align:center;
}
.card__img{
  aspect-ratio:16/10;object-fit:cover;width:100%;
  background:linear-gradient(135deg,#eee,#dcdcdc);
}
.card h3{font-size:1.3rem;font-weight:500;margin:22px 0 12px;}
.card p{font-size:1rem;color:var(--body);flex:1;}
.card .btn{margin-top:20px;align-self:center;}

@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cards{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   8. IMPACT GALLERY
   Three columns of stacked photos, so tall and short shots sit side by side
   without cropping oddly.
   -------------------------------------------------------------------------- */
.gallery{
  border:1px solid var(--line);padding:26px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.gallery__col{display:flex;flex-direction:column;gap:20px;}
.gallery img{width:100%;object-fit:cover;background:linear-gradient(135deg,#eee,#dcdcdc);}
.gallery .tall{aspect-ratio:3/4;}
.gallery .wide{aspect-ratio:4/3;}
@media (max-width:820px){
  .gallery{grid-template-columns:repeat(2,1fr);padding:14px;gap:14px;}
  .gallery__col{gap:14px;}
}

/* --------------------------------------------------------------------------
   9. ALUMNI STRIP  (full bleed, four portraits with names under them)
   -------------------------------------------------------------------------- */
.alumni__head{text-align:center;max-width:1000px;margin:0 auto 44px;}
.alumni__head h2{
  font-size:clamp(1.9rem,4.2vw,3rem);font-weight:400;letter-spacing:-.02em;color:#1b1b1b;
}
.strip{display:grid;grid-template-columns:repeat(4,1fr);}
.strip figure{margin:0;}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#e6e6e6;}
.strip figcaption{
  text-align:center;font-family:var(--display);font-weight:400;font-size:1.15rem;
  color:var(--ink);padding:22px 10px 0;
}
@media (max-width:760px){.strip{grid-template-columns:repeat(2,1fr);}}

/* --------------------------------------------------------------------------
   10. WHY CHOOSE HACKADEMIA  (numbered steps joined by a hairline)
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.step{text-align:center;position:relative;}
.step__num{
  width:74px;height:74px;border:1px solid rgba(17,17,17,.35);display:grid;place-items:center;
  font-family:var(--display);font-weight:400;font-size:2rem;color:var(--ink);
  margin:0 auto 26px;background:var(--blush);position:relative;z-index:2;
}
.step:not(:last-child)::before{
  content:"";position:absolute;top:37px;left:calc(50% + 46px);right:calc(-50% + 46px);
  height:1px;background:rgba(17,17,17,.25);
}
.step h3{font-size:1.35rem;font-weight:400;margin-bottom:12px;}
.step p{font-size:1rem;color:#3f3f3f;max-width:28ch;margin:0 auto;}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:40px 24px;}
  .step:not(:last-child)::before{display:none;}
}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   11. ADVISOR FORM  (Having Difficulty Picking a Course?)
   -------------------------------------------------------------------------- */
.formwrap{border:1px solid var(--line);padding:56px 24px;}
.form{max-width:600px;margin:0 auto;}
.field{margin-bottom:26px;}
.field>label,.field__legend{
  display:block;font-family:var(--display);font-weight:700;font-size:1rem;
  color:#3a3a3a;margin-bottom:10px;
}
.req{color:var(--wine-soft);}
.hint{font-size:.95rem;color:#9a9a9a;margin:-4px 0 10px;}
.input,select,textarea{
  width:100%;font-family:var(--text);font-size:1rem;color:var(--ink);
  padding:14px 16px;border:1px solid #dcdcdc;border-radius:var(--radius);background:#fff;
}
.input::placeholder{color:#bdbdbd;}
.input:focus,select:focus,textarea:focus{border-color:var(--wine);outline:none;}
textarea{min-height:190px;resize:vertical;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.phone{display:grid;grid-template-columns:120px 1fr;gap:0;}
.phone select{border-radius:var(--radius) 0 0 var(--radius);border-right:0;background:#fafafa;}
.phone .input{border-radius:0 var(--radius) var(--radius) 0;}
fieldset{border:0;padding:0;margin:0 0 26px;}
.check{
  display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:1.02rem;
  color:#6f6f6f;cursor:pointer;
}
.check input{width:19px;height:19px;margin:4px 0 0;accent-color:var(--wine);flex:none;}
.check input:disabled+span{color:#c4c4c4;}
.captcha{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid #dcdcdc;border-radius:var(--radius);padding:16px 18px;max-width:340px;
  margin:0 0 28px;background:#fafafa;
}
.captcha label{display:flex;align-items:center;gap:12px;font-size:1rem;color:#555;cursor:pointer;}
.captcha__brand{text-align:right;font-size:.68rem;color:#8a8a8a;line-height:1.35;}
.form__submit{display:flex;justify-content:center;}
.form__note{
  display:none;margin:22px 0 0;padding:16px 18px;background:var(--blush-pale);
  border-left:3px solid var(--wine);color:#3a3a3a;font-size:1rem;
}
.form__note.show{display:block;}
@media (max-width:560px){
  .pair{grid-template-columns:1fr;}
  .formwrap{padding:34px 16px;}
}

/* --------------------------------------------------------------------------
   12. BLOG CARDS
   -------------------------------------------------------------------------- */
.posts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
  background:#fff;padding:34px;border:1px solid #e4e4e4;
}
.post img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#e0e0e0;}
.post h3{
  font-family:var(--text);font-weight:400;font-size:1.35rem;color:#2b2b2b;
  margin:22px 0 10px;line-height:1.3;
}
.post__meta{font-size:1.05rem;color:var(--wine);margin-bottom:14px;}
.post__meta a{color:var(--wine);}
.post p{font-size:1.02rem;color:var(--body);}
@media (max-width:900px){.posts{grid-template-columns:1fr;padding:20px;}}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.footer{background:var(--wine);color:#fff;padding:64px 0 34px;}
.footer a{color:#fff;text-decoration:underline;}
.footer__grid{
  display:grid;grid-template-columns:1.1fr 1fr 1fr 1.1fr 1fr;gap:34px;
}
.footer h4{
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:14px;
}
.footer ul{list-style:none;margin:0;padding:0;}
.footer li{margin-bottom:9px;font-size:1rem;}
.footer__contact{display:flex;flex-direction:column;gap:14px;align-items:flex-end;text-align:right;}
.footer__social{display:flex;gap:14px;}
.footer__social a{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  display:grid;place-items:center;text-decoration:none;
}
.footer__social a:hover{background:rgba(255,255,255,.16);}
.footer__social svg{width:18px;height:18px;fill:#fff;}
.footer__line{display:flex;align-items:center;gap:10px;justify-content:flex-end;font-size:1rem;}
.footer__line svg{width:16px;height:16px;fill:#fff;flex:none;}
.footer__base{
  margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.35);
  text-align:center;font-size:1.05rem;
}
@media (max-width:980px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer__contact{align-items:flex-start;text-align:left;}
  .footer__line{justify-content:flex-start;}
}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   14. ABOUT PAGE
   -------------------------------------------------------------------------- */
.abouthero{background:var(--blush);padding:70px 0 90px;text-align:center;}
.abouthero__eyebrow{
  font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--wine);
  letter-spacing:.02em;margin-bottom:26px;
}
.abouthero h1{
  font-size:clamp(2rem,4.6vw,3.6rem);font-style:italic;font-weight:400;line-height:1.14;
  max-width:1000px;margin:0 auto;letter-spacing:-.02em;
}
.abouthero h1 strong{font-weight:800;}

.split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;}
.split--flip .split__media{order:2;}
.split__media img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#e8e8e8;}
.split h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;color:var(--wine);margin-bottom:22px;}
.split p{font-size:1.05rem;}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:32px;}
  .split--flip .split__media{order:0;}
  .split__media img{aspect-ratio:4/3;}
}

.vision{background:var(--blush-pale);padding:46px 40px;}
.vision h3{font-family:var(--display);font-weight:600;font-size:1.6rem;margin-bottom:20px;}
.vision__box{border:1px solid rgba(17,17,17,.14);padding:24px 26px;background:rgba(255,255,255,.35);}
.vision__box p:last-child{margin-bottom:0;}
.portrait-card{
  margin-top:32px;border-radius:22px;overflow:hidden;background:#123028;
}
.portrait-card img{width:100%;aspect-ratio:4/5;object-fit:cover;}
@media (max-width:560px){.vision{padding:28px 18px;}}

.founder h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.2rem);color:var(--ink);margin-bottom:8px;}
.founder__role{font-size:1.05rem;color:var(--body-soft);margin-bottom:22px;}

.quote{
  border:1px solid var(--line);padding:26px 30px;text-align:center;font-style:italic;
  font-size:1.08rem;color:#3f3f3f;max-width:1000px;margin:0 auto 46px;line-height:1.7;
}
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;}
.member{border:1px solid var(--line);background:#fff;padding:16px 16px 22px;text-align:center;}
.member img{
  width:100%;aspect-ratio:3/4;object-fit:cover;background:#e8e8e8;
  border-radius:110px 110px 14px 14px;
}
.member h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:18px 0 6px;}
.member span{font-size:.98rem;color:var(--body-soft);}
@media (max-width:1000px){.team{grid-template-columns:repeat(3,1fr);}}
@media (max-width:620px){.team{grid-template-columns:repeat(2,1fr);}}

.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;}
.socials a{
  width:96px;height:96px;border-radius:50%;background:var(--taupe);display:grid;place-items:center;
  transition:background .18s ease;
}
.socials a:hover{background:#83725f;}
.socials svg{width:46px;height:46px;fill:#fff;}
@media (max-width:560px){
  .socials{gap:16px;}
  .socials a{width:70px;height:70px;}
  .socials svg{width:34px;height:34px;}
}

.cutouts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:end;}
.cutouts img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;}
@media (max-width:760px){.cutouts{grid-template-columns:repeat(2,1fr);}}

.boxed-title{border:1px solid var(--line);padding:22px 24px;text-align:center;max-width:1000px;margin:0 auto 18px;}
.boxed-title h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;}

/* Two column Programs menu: audience on the left, schools on the right ----*/
.menu--wide{min-width:600px;padding:0;}
.nav__item.open>.menu--wide{display:grid;grid-template-columns:210px 1fr;}
.menu__col{padding:14px 0;}
.menu__col--tabs{border-right:1px solid var(--line);background:#fff;}
.menu__tab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);
}
.menu__tab:hover{background:var(--blush-pale);color:var(--wine);text-decoration:none;}
.menu__tab[aria-current="true"]{color:var(--wine);}
.menu__col a.is-lead{color:var(--wine);font-weight:700;}

/* --------------------------------------------------------------------------
   5b. AI PROGRAMMES PAGE
   Solid wine hero, then alternating photo and grey panel rows, then the
   instalment offer band.
   -------------------------------------------------------------------------- */
.winehero{background:var(--wine);color:#fff;text-align:center;padding:92px 0 100px;}
.winehero h1{
  color:#fff;font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.02em;
  line-height:1.14;max-width:20ch;margin:0 auto;
}
.winehero p{
  color:#fff;font-size:clamp(1.05rem,1.6vw,1.35rem);max-width:64ch;margin:26px auto 0;
  line-height:1.5;
}
.btn--pale{background:var(--blush-pale);color:var(--ink);}
.btn--pale:hover{background:#fff;}
.btn--outline-light{background:transparent;color:#fff;border-color:#fff;}
.btn--outline-light:hover{background:#fff;color:var(--wine);}

.prow{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;margin-bottom:46px;
}
.prow__media{background:linear-gradient(135deg,#e8e2dc,#d8cfc6);overflow:hidden;}
.prow__media img{width:100%;height:100%;min-height:420px;object-fit:cover;}
.prow__panel{background:var(--band);padding:46px 48px;}
.prow__panel h3{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:700;margin-bottom:22px;}
.prow__for{font-style:italic;color:#3d3d3d;}
.prow__panel ul{margin:0 0 22px;padding-left:22px;}
.prow__panel li{margin-bottom:12px;}
.prow__req{color:#3d3d3d;}
.prow__prereq{
  color:var(--wine);font-style:italic;font-weight:700;margin:22px 0;
}
.prow__spec{line-height:1.85;}
.prow__spec strong{color:var(--ink);}
.prow__spec em{color:#4a4a4a;}
.prow__panel .toggle{display:block;margin-top:20px;}
.prow__panel .weeks{border-top-color:#dcdcdc;}
.prow__price{font-weight:700;color:var(--ink);font-size:1.08rem;}
.prow__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;}
@media (max-width:900px){
  .prow{grid-template-columns:1fr;gap:0;margin-bottom:34px;}
  .prow__media img{min-height:240px;}
  .prow__panel{padding:30px 22px;}
}

.offerband{background:var(--wine);color:#fff;text-align:center;padding:88px 0;}
.offerband h2{
  color:#fff;font-weight:400;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.24;
  max-width:34ch;margin:0 auto 34px;
}
.offerband strong{font-weight:800;}

/* Why Choose Hackademia, grey panel beside a photo -----------------------*/
.whygrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;}
.whygrid__panel{background:var(--band);padding:46px 48px;}
.whygrid__panel h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:700;margin-bottom:22px;}
.whygrid__panel .lede{font-style:italic;color:#3d3d3d;}
.whygrid__panel h4{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:26px 0 12px;}
.whygrid__panel ol{margin:0;padding-left:24px;}
.whygrid__panel li{margin-bottom:9px;}
.whygrid__media img{width:100%;height:100%;min-height:460px;object-fit:cover;background:#e2ddd8;}
@media (max-width:900px){
  .whygrid{grid-template-columns:1fr;gap:0;}
  .whygrid__panel{padding:30px 22px;}
  .whygrid__media img{min-height:260px;}
}

/* --------------------------------------------------------------------------
   5d. SCHOLARSHIP PAGES
   -------------------------------------------------------------------------- */
.sandhero--blush{background:var(--blush);}
.sandhero h1 .plain{display:block;color:var(--ink);}
.sandhero--center{text-align:center;}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
.dcard{border:1px solid var(--line);padding:34px 36px;}
.dcard h3{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:700;margin-bottom:20px;}
.dcard h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:22px 0 12px;}
.dcard ul{margin:0 0 16px;padding-left:22px;}
.dcard li{margin-bottom:9px;}
.dcard p:last-child{margin-bottom:0;}
@media (max-width:860px){
  .duo{grid-template-columns:1fr;gap:22px;}
  .dcard{padding:24px 22px;}
}

.whygrid--flip .whygrid__panel{order:2;}
.steps--white .step__num{background:#fff;}

.aboutbox{border:1px solid var(--line);padding:34px 38px;max-width:1180px;margin:0 auto;}
.aboutbox .lede{font-weight:700;font-size:1.12rem;color:var(--ink);}
.aboutbox h4{font-family:var(--display);font-weight:700;font-size:1.08rem;margin:28px 0 14px;}
.aboutbox ol{margin:0;padding-left:24px;}
.aboutbox ol li{margin-bottom:10px;}
.aboutbox .flag{color:var(--wine);font-weight:700;}
@media (max-width:640px){.aboutbox{padding:24px 20px;}}

.closed{background:var(--blush);text-align:center;padding:84px 0;}
.closed h2{font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:8px;}
.closed p{font-size:clamp(1.4rem,2.8vw,2rem);color:var(--ink);margin:0 0 32px;}

.sponsor{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
.sponsor__text{padding:40px 44px;text-align:center;}
.sponsor__text p{font-size:1.05rem;}
.sponsor__logo{max-width:340px;margin:26px auto 0;display:block;}
.sponsor__panel{background:#141414;color:#fff;padding:40px 44px;text-align:center;}
.sponsor__panel h3{color:#fff;font-family:var(--display);font-weight:700;font-size:1.2rem;margin-bottom:24px;}
.sponsor__panel p{color:#fff;font-size:1.05rem;}
.sponsor__panel img{width:100%;border-radius:22px;margin-top:26px;background:#2a2a2a;}
@media (max-width:860px){
  .sponsor{grid-template-columns:1fr;}
  .sponsor__text,.sponsor__panel{padding:30px 22px;}
}

/* --------------------------------------------------------------------------
   5c. CORPORATE PAGE
   Sand hero with a left-aligned headline, then the wine card grid.
   -------------------------------------------------------------------------- */
.sandhero{background:var(--sand);padding:70px 0 40px;}
.sandhero__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;}
.sandhero h1{
  font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:800;line-height:1.04;letter-spacing:-.02em;
}
.sandhero h1 .accent{color:var(--wine);display:block;}
.sandhero__lede{
  font-style:italic;font-size:clamp(1.05rem,1.5vw,1.3rem);color:#2f2f2f;
  max-width:34ch;margin:26px 0 34px;line-height:1.55;
}
.sandhero__actions{display:flex;flex-wrap:wrap;gap:16px;}
.sandhero__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  background:linear-gradient(135deg,#e8d3ad,#dcc194);
}
@media (max-width:900px){
  .sandhero{padding:48px 0 24px;}
  .sandhero__grid{grid-template-columns:1fr;gap:34px;}
  .sandhero__lede{max-width:none;}
}

.wide-figure{border:1px solid var(--line);padding:10px;margin-top:40px;}
.wide-figure img{width:100%;aspect-ratio:21/9;object-fit:cover;background:#eee;}

/* Wine section with outlined cards ---------------------------------------*/
.section--wine{background:var(--wine);color:#fff;padding:84px 0;}
.section--wine h2,.section--wine h3{color:#fff;}
.section--wine .head p{color:rgba(255,255,255,.92);}
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.ccard{border:1px solid rgba(255,255,255,.45);padding:30px 32px;}
.ccard h3{font-size:1.4rem;font-weight:700;margin-bottom:16px;line-height:1.25;}
.ccard p{margin:0;color:rgba(255,255,255,.92);}
@media (max-width:860px){
  .ccards{grid-template-columns:1fr;gap:22px;}
  .ccard{padding:24px 22px;}
}

.head--lede-wine p strong{color:var(--wine);}

/* --------------------------------------------------------------------------
   15. PROGRAMME PAGES
   Course cards carry the real duration, pace, level and fee, with the week
   by week breakdown folded away until someone asks for it.
   -------------------------------------------------------------------------- */
.hero-sub{max-width:70ch;margin:26px auto 0;font-size:1.08rem;color:#3c3c3c;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px;}

.course{border:1px solid var(--line);background:#fff;padding:32px;margin-bottom:26px;}
.course__top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:baseline;}
.course h3{font-size:1.55rem;font-weight:700;}
.course__fee{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--wine);white-space:nowrap;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px;}
.chip{
  font-family:var(--display);font-weight:600;font-size:.8rem;padding:6px 13px;
  background:var(--blush-pale);color:#6d2020;border:1px solid #f2d5d5;border-radius:999px;
}
.chip--soon{background:#f4f4f4;color:#5d5d5d;border-color:#e4e4e4;}
.course__body{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;}
.course__body h4{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:12px;}
.ticks{list-style:none;margin:0;padding:0;}
.ticks li{position:relative;padding-left:22px;margin-bottom:9px;font-size:1rem;}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--wine);}
.course__actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:24px;}
.toggle{
  background:none;border:0;padding:8px 0;font-family:var(--display);font-weight:700;
  font-size:.95rem;color:var(--wine);text-decoration:underline;
}
.weeks{display:none;margin-top:24px;border-top:1px solid var(--line);padding-top:20px;}
.course.open .weeks{display:block;}
.weeks ol{list-style:none;margin:0;padding:0;}
.weeks li{
  display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;
  border-bottom:1px solid #f2f2f2;font-size:1rem;
}
.weeks li:last-child{border-bottom:0;}
.weeks b{font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--wine);letter-spacing:.02em;}
@media (max-width:760px){
  .course{padding:22px 18px;}
  .course__body{grid-template-columns:1fr;gap:22px;}
  .weeks li{grid-template-columns:1fr;gap:2px;}
}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.fact h4{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:10px;}
.fact p{font-size:1rem;margin:0;}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr;gap:26px;}}
@media (max-width:520px){.facts{grid-template-columns:1fr;}}

.ctaband{background:var(--blush);text-align:center;padding:66px 0;}
.ctaband h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;margin-bottom:16px;}
.ctaband p{max-width:60ch;margin:0 auto 28px;}

/* --------------------------------------------------------------------------
   16b. FAQ PAGE
   Blush hero with an oblique headline, a video, then wine question bars in
   two columns with the answer sitting on white underneath.
   -------------------------------------------------------------------------- */
.faqhero{background:var(--blush);text-align:center;padding:78px 0 66px;}
.faqhero h1{
  font-style:italic;font-weight:800;font-size:clamp(2.1rem,5.4vw,4.3rem);
  line-height:1.06;letter-spacing:-.025em;max-width:24ch;margin:0 auto;
}
.faqhero__sub{
  color:var(--wine);font-size:clamp(1.15rem,2.4vw,1.9rem);margin:34px 0 0;
}
.videowrap{
  position:relative;padding-top:56.25%;max-width:1000px;margin:44px auto 0;background:#111;
}
.videowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.faq2{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;align-items:start;}
.faq2__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--wine);color:#fff;border:0;padding:22px 26px;text-align:left;
  font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.28rem);
}
.faq2__q:hover{background:var(--wine-deep);}
.faq2__q svg{width:15px;height:15px;flex:none;transition:transform .2s ease;}
.faq2__item.open .faq2__q svg{transform:rotate(90deg);}
.faq2__a{display:none;padding:22px 26px 0;font-size:1.06rem;color:var(--body);}
.faq2__a p:last-child{margin-bottom:0;}
.faq2__item.open .faq2__a{display:block;}
@media (max-width:820px){
  .faq2{grid-template-columns:1fr;gap:20px;}
  .faq2__q{padding:18px 20px;}
  .faq2__a{padding:18px 20px 0;}
}

/* --------------------------------------------------------------------------
   16. FAQ LIST
   -------------------------------------------------------------------------- */
.faq{max-width:880px;margin:0 auto;border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
  width:100%;display:flex;gap:18px;align-items:center;justify-content:space-between;
  background:none;border:0;text-align:left;padding:22px 4px;
  font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);
}
.faq__q:hover{color:var(--wine);}
.faq__q .nav__caret{width:14px;height:14px;flex:none;}
.faq__item.open .nav__caret{transform:rotate(180deg);}
.faq__a{display:none;padding:0 4px 26px;max-width:72ch;}
.faq__a p:last-child{margin-bottom:0;}
.faq__item.open .faq__a{display:block;}
.contact-card{
  max-width:880px;margin:52px auto 0;border:1px solid var(--line);padding:30px 32px;
}
.contact-card h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin-bottom:14px;}
.contact-card ul{list-style:none;margin:0;padding:0;}
.contact-card li{margin-bottom:9px;}

/* --------------------------------------------------------------------------
   17b. BLOG LISTING, POST PAGE AND ADMIN
   -------------------------------------------------------------------------- */
.bloghead{text-align:center;padding:70px 0 0;}
.bloghead h1{
  font-size:clamp(2.2rem,5vw,3.6rem);font-weight:400;letter-spacing:-.02em;color:#1b1b1b;
}
.bloghead__intro{
  border:1px solid var(--line);padding:22px 26px;max-width:1000px;margin:32px auto 0;
  text-align:left;font-size:1.05rem;
}
.bloghead__intro p{margin:0;}

.tabs{
  display:flex;flex-wrap:wrap;gap:30px;border-bottom:1px solid var(--line);
  max-width:1000px;margin:44px auto 0;
}
.tab{
  background:none;border:0;padding:10px 0 14px;font-family:var(--text);font-size:1.05rem;
  color:#8a8a8a;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{color:var(--wine);border-bottom-color:var(--wine);}

.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 34px;margin-top:52px;}
.pcard{display:flex;flex-direction:column;}
.pcard__img{
  width:100%;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,#eee,#ddd);
}
.pcard h3{
  font-family:var(--text);font-weight:400;font-size:1.3rem;color:#2b2b2b;line-height:1.3;
  margin:22px 0 8px;
}
.pcard h3 a{color:#2b2b2b;text-decoration:none;}
.pcard h3 a:hover{color:var(--wine);}
.pcard__date{color:var(--wine);font-size:1.05rem;margin:0 0 6px;}
.pcard__cats{color:var(--wine);font-size:1rem;margin:0 0 12px;}
.pcard__excerpt{font-size:1.02rem;color:var(--body);margin:0;}
.blog-empty{text-align:center;padding:60px 0;color:var(--body-soft);}
@media (max-width:1000px){.postgrid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.postgrid{grid-template-columns:1fr;gap:34px;}}

/* Single post -------------------------------------------------------------*/
.posthero{
  background:linear-gradient(120deg,#1e2140,#5b3a52 45%,#8d7c63);
  color:#fff;text-align:center;padding:96px 0 84px;
}
.posthero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:700;max-width:22ch;margin:0 auto;}
.posthero p{color:rgba(255,255,255,.9);font-style:italic;margin:18px auto 0;max-width:60ch;}
.postbody{max-width:820px;margin:0 auto;padding:44px 0 0;}
.postbody__meta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding-bottom:16px;
  border-bottom:1px solid var(--line);color:var(--body-soft);
}
.postbody__meta a{color:var(--wine);}
.postbody__text{padding:30px 0 10px;font-size:1.08rem;}
.postbody__text h2{font-size:1.5rem;margin:32px 0 12px;}
.subscribe{
  background:#f1f1f1;padding:22px;display:flex;gap:14px;flex-wrap:wrap;margin:36px 0 0;
}
.subscribe .input{flex:1;min-width:220px;background:#fff;}
.postfoot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:30px;padding:22px 0 0;
}
.postfoot__share{display:flex;gap:14px;}
.postfoot__share a{
  width:36px;height:36px;border-radius:50%;background:#e9e9e9;display:grid;place-items:center;
}
.postfoot__share a:hover{background:var(--blush);}
.postfoot__share svg{width:17px;height:17px;fill:#4a4a4a;}

/* Admin -----------------------------------------------------------------*/
.admin{display:grid;grid-template-columns:250px 1fr;min-height:70vh;}
.admin__side{background:#20232a;color:#fff;padding:26px 0;}
.admin__brand{
  font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff;padding:0 22px 20px;
}
.admin__nav{list-style:none;margin:0;padding:0;}
.admin__nav button{
  width:100%;text-align:left;background:none;border:0;color:#c9ccd4;padding:13px 22px;
  font-family:var(--display);font-weight:600;font-size:.98rem;
}
.admin__nav button:hover{background:#2b2f39;color:#fff;}
.admin__nav button[aria-current="true"]{background:#2b2f39;color:#fff;box-shadow:inset 3px 0 0 var(--wine);}
.admin__side .btn{margin:22px 22px 0;width:calc(100% - 44px);}
.admin__main{padding:30px 34px;background:#fff;}
.admin__bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:26px;
}
.admin__bar h2{font-size:1.45rem;font-weight:800;}
.admin__tools{display:flex;gap:10px;flex-wrap:wrap;}
.admin__tools .input,.admin__tools select{width:auto;min-width:170px;padding:10px 12px;}

.prow-admin{border-bottom:1px solid var(--line);padding:18px 2px;}
.prow-admin__top{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;}
.prow-admin h3{font-family:var(--text);font-weight:400;font-size:1.25rem;color:#2b2b2b;margin:0;}
.pill{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border:1px solid;border-radius:3px;
}
.pill--live{color:#3f7d20;border-color:#8cc63f;background:#f4fbec;}
.pill--draft{color:#6b6b6b;border-color:#cfcfcf;background:#f6f6f6;}
.prow-admin__meta{color:var(--body-soft);font-size:.95rem;margin:6px 0 0;}
.prow-admin__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.abtn{
  font-family:var(--display);font-weight:600;font-size:.88rem;padding:8px 14px;
  border:1px solid var(--line);background:#fff;border-radius:var(--radius);color:var(--ink);
}
.abtn:hover{border-color:var(--ink);}
.abtn--go{background:#7ab929;border-color:#7ab929;color:#fff;}
.abtn--go:hover{background:#6aa421;}
.abtn--danger{color:#a11b1b;border-color:#e6c2c2;}
.abtn--danger:hover{background:#fdf2f2;}

.editor{max-width:820px;}
.editor .field{margin-bottom:22px;}
.editor textarea{min-height:280px;font-family:var(--text);line-height:1.7;}
.catpick{display:flex;flex-wrap:wrap;gap:10px;}
.catpick label{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:9px 14px;
  border-radius:999px;font-size:.95rem;cursor:pointer;
}
.catpick input{accent-color:var(--wine);}
.editor__bar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  border-top:1px solid var(--line);padding-top:22px;margin-top:8px;
}
.admin-note{
  background:var(--blush-pale);border-left:3px solid var(--wine);padding:14px 18px;
  margin:0 0 24px;font-size:.98rem;
}
.admin-say{
  display:none;margin:18px 0 0;padding:14px 18px;background:#f4fbec;border-left:3px solid #7ab929;
  font-size:.98rem;
}
.admin-say.show{display:block;}
.admin__h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:34px 0 14px;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:8px;}
.stat{border:1px solid var(--line);padding:18px 20px;}
.stat__n{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink);}
.stat__l{display:block;font-size:.88rem;color:var(--body-soft);margin-top:4px;}
.bars{display:grid;gap:10px;max-width:620px;}
.bar{display:grid;grid-template-columns:130px 1fr 34px;gap:12px;align-items:center;font-size:.95rem;}
.bar__t{background:#f0f0f0;height:12px;border-radius:6px;overflow:hidden;}
.bar__t i{display:block;height:100%;background:var(--wine);}
.bar__n{text-align:right;font-family:var(--display);font-weight:700;}
.tablewrap{overflow-x:auto;border:1px solid var(--line);}
.atable{width:100%;border-collapse:collapse;font-size:.94rem;min-width:640px;}
.atable th,.atable td{text-align:left;padding:11px 14px;border-bottom:1px solid #f0f0f0;}
.atable th{background:#fafafa;font-family:var(--display);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--body-soft);}
.atable tr:last-child td{border-bottom:0;}
.pill--new{color:#8a5a00;border-color:#f0cd8a;background:#fdf6e8;}
.pill--contacted{color:#1f5d8a;border-color:#a9cfe8;background:#eef7fd;}
.pill--enrolled{color:#3f7d20;border-color:#8cc63f;background:#f4fbec;}
.pill--lost{color:#8a1f1f;border-color:#e6bcbc;background:#fdf1f1;}
.prow-admin__detail{font-size:.95rem;color:var(--body);margin:10px 0 0;line-height:1.7;}
.paylabel{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--body-soft);}
.payinput{width:130px;padding:9px 10px;}
@media (max-width:640px){
  .bar{grid-template-columns:104px 1fr 28px;gap:8px;font-size:.88rem;}
  .paylabel{width:100%;}
  .payinput{flex:1;width:auto;}
}
.codeblock{background:#20232a;color:#e8eaee;padding:14px 16px;overflow-x:auto;font-size:.86rem;border-radius:4px;margin:0 0 18px;}
code{background:#f2f2f2;padding:2px 6px;border-radius:3px;font-size:.92em;}
@media (max-width:900px){
  .admin{grid-template-columns:1fr;}
  .admin__side{padding:18px 0;}
  .admin__main{padding:24px 18px;}
}

/* --------------------------------------------------------------------------
   17. PLACEHOLDER PAGE  (for the pages whose screenshots are still coming)
   -------------------------------------------------------------------------- */
.stub{padding:110px 0;text-align:center;}
.stub h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;margin-bottom:18px;}
.stub p{max-width:56ch;margin:0 auto 26px;}

/* --------------------------------------------------------------------------
   16. ROUTING AND MOTION
   Only one .page is visible at a time. Motion is limited to real feedback.
   -------------------------------------------------------------------------- */
.page{display:none;}
.page.active{display:block;}
.bleed{max-width:none;padding:0;}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}

/* --------------------------------------------------------------------------
   18. CROSS-DEVICE REFINEMENTS
   Everything above sets the layout. This block hardens it for real phones,
   tablets and touch screens. Kept last so it always wins.
   -------------------------------------------------------------------------- */

/* Anchored links must not land underneath the sticky header ---------------*/
html{scroll-padding-top:104px;}
[id]{scroll-margin-top:104px;}

/* Long words, URLs and emails must never push the page sideways ----------*/
body{overflow-wrap:break-word;}
p,li,h1,h2,h3,h4,td,figcaption,label,.prow__spec,.pcard h3{overflow-wrap:break-word;}
a[href^="mailto:"],a[href^="http"]{word-break:break-word;}

/* Tablet: 1024px down to 861px -------------------------------------------*/
@media (max-width:1024px){
  :root{--gutter:20px;}
  .header__inner{padding:0 20px;}
  .section{padding:64px 0;}
  .section--tight{padding:48px 0;}
  .hero{padding:60px 0 96px;}
  .prow__panel,.whygrid__panel,.prow__media img{padding-inline:auto;}
  .prow__panel{padding:36px 34px;}
  .whygrid__panel{padding:36px 34px;}
  .aboutbox{padding:30px 32px;}
  .dcard{padding:28px 30px;}
}

/* Phone: 640px down ------------------------------------------------------*/
@media (max-width:640px){
  body{font-size:16px;}
  html{scroll-padding-top:88px;}
  [id]{scroll-margin-top:88px;}
  .section{padding:48px 0;}
  .section--tight{padding:36px 0;}
  .head{margin-bottom:34px;}

  /* Two-up grids that are still too tight on a phone */
  .gallery{grid-template-columns:1fr;}
  .team{grid-template-columns:1fr 1fr;}
  .duo,.ccards,.facts{grid-template-columns:1fr;}

  /* Buttons go full width so they are easy to hit */
  .hero__actions .btn,.sandhero__actions .btn,.hero-actions .btn,
  .ctaband .btn,.offerband .btn,.closed .btn{width:100%;}
  .hero__actions,.sandhero__actions,.hero-actions{gap:12px;}

  /* Forms */
  .formwrap{padding:26px 14px;}
  .form__submit .btn{width:100%;}
  .captcha{max-width:none;}
  .phone{grid-template-columns:96px 1fr;}

  /* Content blocks */
  .prow__panel,.whygrid__panel,.vision{padding:24px 18px;}
  .aboutbox,.dcard,.contact-card{padding:22px 18px;}
  .sponsor__text,.sponsor__panel{padding:26px 18px;}
  .quote{padding:20px 18px;}
  .bloghead__intro{padding:18px 20px;}
  .gallery{padding:12px;}
  .posts{padding:16px;}
}

/* Very small phones: 380px down ------------------------------------------*/
@media (max-width:380px){
  .logos{grid-template-columns:1fr;gap:32px;}
  .team,.cutouts,.strip{grid-template-columns:1fr;}
  .logo__img{height:34px;}
  .header__inner{padding:0 14px;}
  .step__num{width:62px;height:62px;font-size:1.7rem;}
}

/* Category tabs scroll sideways rather than wrapping into a tangle -------*/
@media (max-width:820px){
  .tabs{
    flex-wrap:nowrap;overflow-x:auto;gap:22px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab{white-space:nowrap;}
}

/* Admin toolbar stacks instead of spilling ------------------------------*/
@media (max-width:700px){
  .admin__bar{flex-direction:column;align-items:stretch;}
  .admin__tools{flex-direction:column;}
  .admin__tools .input,.admin__tools select,.admin__tools .abtn{width:100%;min-width:0;}
  .prow-admin__acts .abtn,.prow-admin__acts a.abtn{flex:1 1 auto;text-align:center;}
  .editor__bar{flex-direction:column;align-items:stretch;}
  .editor__bar .abtn,.editor__bar a.abtn{width:100%;text-align:center;}
}

/* Touch devices: bigger targets, and no hover-only behaviour ------------*/
@media (hover:none){
  .btn--sm{padding:14px 24px;}
  .tab{padding:14px 0 16px;}
  .abtn{padding:12px 16px;}
  .toggle{padding:12px 0;}
  .postfoot__share a{width:44px;height:44px;}
  .faq2__q,.faq__q{padding-block:20px;}
  .menu a,.menu__tab{padding-block:16px;}
  .check{padding:10px 0;}
  .check input{width:22px;height:22px;}
}

/* Landscape phones are short: stop the hero eating the whole screen -----*/
@media (max-height:520px) and (orientation:landscape){
  .hero,.sandhero,.winehero,.faqhero,.abouthero{padding-block:40px;}
  .drawer{padding-bottom:80px;}
}

/* Wide screens: keep the shell centred and readable ---------------------*/
@media (min-width:1600px){
  :root{--shell:1280px;}
  .header__inner{max-width:1600px;}
}

/* Printing: drop the furniture, keep the words --------------------------*/
@media print{
  .header,.drawer,.footer,.burger,.hero__actions,.sandhero__actions,
  .hero-actions,.formwrap,.tabs{display:none !important;}
  .page{display:block !important;}
  body{font-size:11pt;color:#000;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;}
}