/* Home page (index.html) since 2026-11-10. Built as "Home page V2" from the owner's Word document
   "home page.docx"; V1 is kept as home-v1.html.
   Our hero with his text, the MQA strip without the diploma line, then the sections of his demo
   (Welcome, Why Choose Mauritius, Beauty of Mauritius, FAQ, Enquire) word for word.
   His notes: "correct the fonts", "colours and background you can choose", so it uses our brand
   (forest, green and gold on cream, Playfair Display + Archivo) and our photos. Sizes and spacing come from the scale in site.css.
   Loaded after site.css, only by index.html. */

/* his small section labels, in the same style as the eyebrows on the other pages (centred ones get a rule each side) */
.v2-tag{display:flex;align-items:center;gap:12px;font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.v2-tag::before,.v2-head .v2-tag::after{content:"";flex:none;width:28px;height:1.5px;background:currentColor;opacity:.7}
.v2-head .v2-tag{justify-content:center}

/* ---------- hero: the photo melts into the cream behind the copy (as in his screenshot) ---------- */
.v2-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--cream)}
.v2-hero-bg{position:absolute;top:0;bottom:0;left:36%;right:0;z-index:-2;background:var(--sand-2)}
.v2-hero-bg picture{display:block;height:100%}
.v2-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:35% 38%}
.v2-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--cream) 0%,var(--cream) 42%,rgba(251,248,241,.7) 47%,rgba(251,248,241,0) 57%)}
.v2-hero-in{min-height:min(780px,calc(100vh - 78px));display:flex;align-items:center;padding:72px 0 136px}
.v2-hero-copy{max-width:min(540px,40vw)}
.v2-hero h1{font-size:var(--fs-h1);line-height:1.06;color:var(--text)}
.v2-hero h1 span{display:block}
.v2-hero h1 .g{color:#14522B}
.v2-hero-copy p{margin-top:22px;font-size:var(--fs-lede);line-height:1.6;color:#2E332B;max-width:50ch}
.v2-hero-copy p+p{margin-top:12px}
.v2-hero-copy .v2-motto{margin-top:24px;padding-left:16px;border-left:3px solid var(--gold);font-family:var(--serif);font-size:var(--fs-quote);line-height:1.4;color:var(--green-700)}
.v2-hero .btn-row{margin-top:30px}
.v2-hero .btn-ghost{border-color:#BDB6A4;background:rgba(255,255,255,.55)}
.v2-hero .btn-ghost:hover{background:#fff}

/* ---------- MQA strip: registration only (he asked to remove the diploma line) ---------- */
.v2-mqa{position:relative;z-index:2;background:linear-gradient(180deg,transparent 52px,var(--cream) 52px)}
.v2-mqa-card{margin-top:-52px;display:inline-flex;align-items:center;gap:28px;background:#fff;padding:22px 34px;box-shadow:var(--shadow)}
.v2-mqa-card img{height:56px;width:auto}
.v2-mqa-t{padding-left:28px;border-left:1px solid var(--line)}
.v2-mqa-t b{display:block;font-size:var(--fs-body);color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.v2-mqa-t>span{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
@media (min-width:621px){.v2-mqa-t>span{white-space:nowrap}}
/* phones: the number on its own line instead of a dot at the end of one */
@media (max-width:620px){.v2-mqa-dot{display:none}.v2-mqa-t .nw{display:block}}

/* ---------- sections with a centred header (his layout) ---------- */
.v2-sec{padding:var(--sec-y) 0}
.v2-sand{background:var(--sand)}
.v2-head{text-align:center;max-width:780px;margin:0 auto}
.v2-head h2{margin:16px auto 0;font-size:var(--fs-h2);line-height:1.1;color:var(--ink);max-width:none}
.v2-head p:not(.v2-tag){margin:18px auto 0;max-width:62ch;font-size:var(--fs-lede);line-height:1.6;color:var(--body)}

/* Welcome: photo beside "Education Designed Around Your Ambition." */
.v2-split{margin-top:var(--head-gap);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5.5vw,80px);align-items:center}
.v2-split picture{display:block}
.v2-split img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
.v2-split h3{margin-top:16px;font-family:var(--serif);font-weight:500;font-size:var(--fs-h3l);line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.v2-split p:not(.v2-tag){margin-top:18px;font-size:var(--fs-body);line-height:1.65;color:var(--body);max-width:52ch}
.v2-split .btn{margin-top:30px}

/* Why Choose Mauritius: six tiles */
.v2-tiles{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.v2-tile{background:#fff;padding:32px 30px 36px;box-shadow:var(--shadow-sm)}
.v2-ico{width:52px;height:52px;display:grid;place-items:center;background:var(--forest);color:var(--gold-soft)}
.v2-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v2-tile h3{margin-top:22px;font-family:var(--serif);font-weight:500;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.v2-tile p{margin-top:10px;font-size:var(--fs-card);line-height:1.65;color:var(--body)}

/* Experience the Beauty of Mauritius: three photos, the first wider */
.v2-gallery{margin-top:var(--head-gap);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.v2-gallery picture{display:block}
.v2-gallery img{width:100%;height:clamp(240px,26vw,360px);object-fit:cover}

/* Things You Should Know */
.v2-faq{max-width:820px;margin:var(--head-gap) auto 0}

/* ---------- Ready to Begin Your Global Journey? ----------
   Light since 2026-11-10: on forest it ran straight into the forest footer (Rahvi: "same colour,
   needs to be beautiful"). As on every other page, the footer is the only dark block at the
   bottom. Cream after the sand FAQ, a soft gold glow, his details on a white card, the form
   with a gold top edge. */
.v2-enq{position:relative;isolation:isolate;overflow:hidden;background:var(--cream);color:var(--text);padding:var(--sec-y) 0}
.v2-enq::before{content:"";position:absolute;z-index:-1;right:-220px;top:-260px;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(211,164,49,.16),rgba(211,164,49,0))}
/* the copy sits level with the middle of the taller form */
.v2-enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,88px);align-items:center}
.v2-enq h2{margin-top:16px;font-size:var(--fs-h2);line-height:1.1;color:var(--ink);max-width:15ch}
.v2-enq-lede{margin-top:18px;font-size:var(--fs-lede);line-height:1.6;color:var(--body);max-width:46ch}
.v2-enq-addr{position:relative;margin-top:32px;padding:22px 26px 22px 30px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);
  font-size:var(--fs-body);line-height:1.65;color:var(--body);max-width:440px;overflow:hidden}
.v2-enq-addr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.v2-enq-addr b{color:var(--green-700);letter-spacing:.12em;font-size:var(--fs-sm)}
.v2-enq-addr a{color:var(--green-700);font-weight:700;text-decoration-color:rgba(21,88,48,.35);text-decoration-thickness:1.5px;text-underline-offset:4px;overflow-wrap:anywhere}
.v2-enq-addr a:hover{color:var(--green);text-decoration-color:currentColor}
.v2-enq-motto{margin-top:28px;padding-left:16px;border-left:3px solid var(--gold);font-family:var(--serif);font-size:var(--fs-quote);line-height:1.35;color:var(--green-700)}
.v2-enq .form-card{box-shadow:var(--shadow);border-top:3px solid var(--gold)}

@media (max-width:960px){
  .v2-split,.v2-enq-grid{grid-template-columns:1fr}
  .v2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .v2-hero::before{display:none}
  .v2-hero-bg{position:static}
  .v2-hero-bg img{height:auto;aspect-ratio:16/11;object-position:50% 40%}
  .v2-hero-in{display:block;min-height:0;padding:30px 0 96px}
  .v2-hero-copy{max-width:none}
}
@media (max-width:620px){
  .v2-mqa-card{display:flex;gap:18px;padding:18px 20px;margin-top:-48px}
  .v2-mqa-card img{height:44px}
  .v2-mqa-t{padding-left:18px}
  .v2-tiles{grid-template-columns:1fr;gap:14px}
  .v2-tile{padding:26px 24px 28px}
  .v2-gallery{grid-template-columns:1fr 1fr;gap:10px}
  .v2-gallery picture:first-child{grid-column:1/-1}
  .v2-gallery img{height:200px}
}

/* Responsive fixes (2026-11-10 audit) */
/* Bigger tap areas on the admissions phone link and the footer links, without moving the layout. */
.v2-enq-addr a{padding-block:12px;margin-block:-12px}
/* Tablet: the Welcome photo goes full width at 960px; keep it from filling the screen. */
@media (min-width:621px) and (max-width:960px){.v2-split img{aspect-ratio:16/9}}
/* Phones: section headers line up on the left with the text under them (client: alignment, 2026-11-10). */
@media (max-width:760px){
  .v2-head{text-align:left;margin:0}
  .v2-head h2,.v2-head p:not(.v2-tag){margin-left:0;margin-right:0}
  .v2-head .v2-tag{justify-content:flex-start}
  .v2-head .v2-tag::after{display:none}
}

/* Corners: the scale in site.css (the rest of the site has them too since 2026-11-10). */
.v2-mqa-card,.v2-tile,.v2-split img,.v2-gallery img{border-radius:var(--r)}
.v2-ico{border-radius:var(--r-sm)}