/* UniPrep101, hand-built. Navy and orange, photography led.
   Breakpoints, decided before building: desktop >=1024, tablet 760 to 1023, phone <760. */

:root{
  --navy:#101B24; --navy-soft:#1B2A36; --orange:#EC4909; --orange-dark:#C93C05;
  --ink:#4A4D4F; --paper:#FFFFFF; --tint:#F7F4F2; --line:rgba(16,27,36,.10);
  --line-strong:rgba(16,27,36,.18); --max:1320px; --pad:30px;
  --r:18px; --r-pill:999px;
  --shadow:0 1px 2px rgba(16,27,36,.04), 0 8px 30px rgba(16,27,36,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--navy);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img,video{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; letter-spacing:-.028em; line-height:1.08; font-weight:700}
h1{font-size:clamp(38px,6vw,72px)}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(19px,2vw,23px); letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.section{padding:96px 0}
.section--tint{background:var(--tint)}
.section--navy{background:var(--navy); color:#fff}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--orange)}
.section--navy .eyebrow{color:#FFB08A}
.lead{font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--ink); max-width:70ch}
.section--navy .lead{color:rgba(255,255,255,.8)}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:var(--r-pill);
  font-size:16px; font-weight:600; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--orange); color:#fff}
.btn--primary:hover{background:var(--orange-dark)}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--line-strong)}
.section--navy .btn--ghost,.hero .btn--ghost{color:#fff; border-color:rgba(255,255,255,.4)}

/* header */
.site-head{position:sticky; top:0; z-index:60; background:rgba(16,27,36,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.site-head .wrap{display:flex; align-items:center; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:700; letter-spacing:-.02em}
.brand img{width:26px; height:26px}
.nav{display:flex; gap:26px; margin-left:auto}
.nav a{color:rgba(255,255,255,.82); text-decoration:none; font-size:15px}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.head-cta{margin-left:20px}
.burger{display:none; margin-left:auto; width:42px; height:42px; border:1px solid rgba(255,255,255,.28);
  border-radius:10px; background:transparent; cursor:pointer; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:2px; background:#fff; transition:.2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero */
.hero{position:relative; min-height:min(94vh,860px); display:flex; align-items:flex-end; overflow:hidden; background:var(--navy)}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img,.hero__media video{width:100%; height:100%; object-fit:cover}
.hero__scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(16,27,36,.72) 0%,rgba(16,27,36,.28) 30%,rgba(16,27,36,.12) 52%,rgba(16,27,36,.66) 84%,rgba(16,27,36,.9) 100%)}
.hero__scrim--side{background:linear-gradient(90deg,rgba(16,27,36,.72) 0%,rgba(16,27,36,.42) 34%,rgba(16,27,36,0) 66%)}
.hero .wrap{position:relative; z-index:2; padding-top:110px; padding-bottom:74px; width:100%}
.hero h1{color:#fff; max-width:16ch}
.hero h1 .accent{color:var(--orange)}
.hero__sub{color:rgba(255,255,255,.86); max-width:46ch; margin-top:20px; font-size:clamp(16px,1.5vw,19px)}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; max-width:680px}
.chip{padding:8px 16px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.10); color:#fff; font-size:14px; backdrop-filter:blur(6px)}
.chip--fee{background:rgba(236,73,9,.94); border-color:transparent; font-weight:600}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.stat{padding:30px 28px; border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat b{display:block; font-size:clamp(30px,3.4vw,42px); letter-spacing:-.03em; line-height:1}
.stat span{display:block; margin-top:8px; font-size:14px; color:var(--ink)}

/* cards */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.card{border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease; text-decoration:none; color:inherit}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card__media{aspect-ratio:16/9; overflow:hidden; background:var(--tint)}
.card__media img{width:100%; height:100%; object-fit:cover}
.card__body{padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.card__uni{font-size:13px; color:var(--orange); font-weight:600}
.card__row{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.card__price{font-size:20px; font-weight:700; color:var(--navy); white-space:nowrap}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:16px}
.meta span{font-size:13px; color:var(--ink); background:var(--tint); padding:6px 12px; border-radius:var(--r-pill)}

/* facts strip */
.facts{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fact{padding:26px 28px; border-left:1px solid var(--line)}
.fact:first-child{border-left:none; padding-left:0}
.fact dt{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(16,27,36,.45); font-weight:600}
.fact dd{margin:8px 0 0; font-size:16px; font-weight:500}

/* checklist */
.checks{display:grid; grid-template-columns:1fr 1fr; gap:14px 40px}
.checks li{list-style:none; display:flex; gap:14px; align-items:flex-start; font-size:17px; color:var(--ink); line-height:1.5}
.checks li::before{content:""; flex:0 0 auto; width:8px; height:8px; margin-top:9px; border-radius:2px;
  background:var(--orange); transform:rotate(45deg)}
ul.checks{margin:0; padding:0}

/* itinerary */
.days{border-bottom:1px solid var(--line)}
.day{display:grid; grid-template-columns:140px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line)}
.day__n{font-size:20px; font-weight:600}
.day__when{display:inline-block; margin-top:8px; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--tint); font-size:12px; color:var(--ink); white-space:nowrap}
.day__where{font-size:17px; font-weight:600; margin-bottom:6px}
.day__what{font-size:16px; color:var(--ink); line-height:1.6}

/* logos */
.logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px 40px}
.logos img{height:34px; width:auto; opacity:.9}

/* founder */
.founder{display:grid; grid-template-columns:340px 1fr; gap:52px; align-items:start}
.founder img{border-radius:var(--r); width:100%}
.founder__logos{display:flex; align-items:center; gap:22px; margin-top:28px}
.founder__logos img{height:38px; width:auto; border-radius:0}

/* quotes */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.quote{border:1px solid var(--line); border-radius:20px; padding:32px; background:#fff; display:flex; flex-direction:column}
.quote p{font-size:17px; line-height:1.62; color:var(--ink); flex:1}
.quote footer{display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.mono{width:46px; height:46px; border-radius:var(--r-pill); background:var(--tint); display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:700; flex:0 0 auto}
.quote cite{font-style:normal; font-weight:600; font-size:16px; display:block}
.quote small{color:var(--ink); font-size:14px}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; font-size:18px; font-weight:600; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy); transform:translateY(-70%) rotate(45deg); transition:.2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .answer{padding:0 0 24px; color:var(--ink); font-size:16px; line-height:1.65}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.step{border:1px solid var(--line); border-radius:var(--r); padding:28px; background:#fff}
.step b{display:block; font-size:13px; color:var(--orange); letter-spacing:.1em; text-transform:uppercase}
.step h3{margin-top:12px}
.step p{margin-top:10px; color:var(--ink); font-size:16px}

/* forms */
.form{display:grid; gap:18px; max-width:640px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; padding:14px 16px; border:1px solid var(--line-strong);
  border-radius:12px; font:inherit; font-size:16px; background:#fff; color:var(--navy)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:transparent}
.field textarea{min-height:130px; resize:vertical}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-note{font-size:13px; color:var(--ink)}
.form-status{font-size:15px; padding:14px 16px; border-radius:12px; display:none}
.form-status.ok{display:block; background:#EAF6EE; color:#1B5E34}
.form-status.err{display:block; background:#FBEAE6; color:#8A2B10}

/* footer */
.site-foot{background:var(--navy); color:rgba(255,255,255,.72); padding:72px 0 40px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.site-foot a{color:rgba(255,255,255,.72); text-decoration:none}
.site-foot a:hover{color:#fff}
.site-foot h4{margin:0 0 14px; color:#fff; font-size:15px; font-weight:600}
.site-foot ul{margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:15px}
.foot-bottom{margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px}

/* reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

@media (max-width:1023px){
  :root{--pad:24px}
  .section{padding:74px 0}
  .nav,.head-cta{display:none}
  .burger{display:block}
  .site-head.open .nav{display:grid; position:absolute; top:72px; left:0; right:0; background:var(--navy);
    padding:18px 24px 24px; gap:14px; border-bottom:1px solid rgba(255,255,255,.1)}
  .site-head.open .head-cta{display:inline-flex; position:absolute; top:calc(72px + 190px); left:24px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){border-left:none; padding-left:0}
  .fact:nth-child(3),.fact:nth-child(4){border-top:1px solid var(--line)}
  .checks{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .founder{grid-template-columns:1fr; gap:32px}
  .founder img{max-width:340px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:759px){
  :root{--pad:20px}
  body{font-size:16px}
  .section{padding:60px 0}
  .hero{min-height:min(92vh,760px)}
  .hero .wrap{padding-top:92px; padding-bottom:56px}
  .stats,.facts,.grid-2,.quotes,.steps{grid-template-columns:1fr}
  .stat,.fact{border-left:none; padding-left:0; border-top:1px solid var(--line)}
  .stat:first-child,.fact:first-child{border-top:none}
  .day{grid-template-columns:1fr; gap:10px}
  .row-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .logos img{height:26px}
}

/* three-up variant, must still collapse on small screens, an inline
   grid-template-columns here beat the media query and caused a 182px overflow on phone */
.steps--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1023px){ .steps--3{grid-template-columns:1fr 1fr} }
@media (max-width:759px){ .steps--3{grid-template-columns:1fr} }

/* the hero picture element needs to fill like a bare img would */
.hero__media picture{display:block; position:absolute; inset:0}
.hero__media picture img{width:100%; height:100%; object-fit:cover}