/* ============================================================
   Lingual Planet — the front door.

   ────────────────────────────────────────────────────────────
   WHY THIS PAGE IS DARK AT THE TOP

   Version one was one cream field from the header to the footer.
   Cream is a fine colour and a terrible amount of it, because with
   nothing to sit against, every element floats and nothing reads as
   more important than anything else. The page had no hierarchy — not
   because the type was wrong, but because the page had one ground.

   So this version has four: a night hero, a paper section for the two
   programmes, a night band, and a night foot. The eye is told where
   to go by the ground changing under it, which is cheaper and more
   reliable than making the headline bigger.

   ────────────────────────────────────────────────────────────
   THE PALETTE IS INHERITED, NOT INVENTED

   MedicomSkills and English Academy were built years apart and reached
   for almost the same colours: ink #16242E against #16232B, grounds of
   #F3F2EC against #F1F3EF, teal accents of #1F6B6E against #1B7A6E.
   Three units apart on one channel, in one case.

   So this page does not invent a third identity. It keeps the shared
   ink, paper and teal, adds a night made from the same hue pushed
   down, and lets each programme carry its OWN second colour — clay
   for MedicomSkills, gold for English Academy. Somebody who arrives
   here and then lands on either site should feel they went through a
   door, not to a different company.

   The two accents also appear together exactly once, in the rule down
   the left of the hero, where teal runs into clay and gold. That is
   the only place the umbrella has to say what it contains.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* grounds */
  --night:#0B1A21; --night2:#0F2731; --night3:#071319;
  --paper:#F4F2EA; --card:#FFFDF8; --line:#E4E0D5;
  /* ink */
  --ink:#16242E; --ink2:#5A6472; --sky:#DCEDEA; --sky2:#8FB3B2;
  /* the three accents */
  --teal:#31A6A0; --teal-d:#1F6B6E;
  --clay:#C4604F; --clay-d:#A44B3C;
  --gold:#C08C1E; --gold-d:#9A6F13;

  --display:'Bricolage Grotesque','Zen Kaku Gothic New',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --r:14px;
  --shadow:0 1px 2px rgba(11,26,33,.05), 0 12px 32px -12px rgba(11,26,33,.18);
  --shadow-up:0 2px 4px rgba(11,26,33,.06), 0 26px 56px -18px rgba(11,26,33,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;text-wrap:balance}
p{margin:0}

.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}

/* an eyebrow is data about the page, so it is set in the data face */
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
}

/* ── the header ───────────────────────────────────────────────
   Not sticky. A bar that follows you down would have to change
   colour four times on this page to stay legible, and every one of
   those transitions is a chance to get it wrong. */
.top{position:relative;z-index:3;background:var(--night)}
.top__in{display:flex;align-items:center;justify-content:space-between;
         gap:1.5rem;padding:1.4rem 0 .2rem}
.mark{
  display:inline-flex;align-items:center;gap:.6rem;color:#fff;
  font-weight:600;font-size:1.06rem;letter-spacing:-.02em;text-decoration:none;
}
.mark__dot{
  width:13px;height:13px;border-radius:50%;flex:none;
  background:
    conic-gradient(from 200deg, var(--teal) 0deg 140deg, var(--gold) 140deg 250deg, var(--clay) 250deg 360deg);
}
.top__right{display:flex;align-items:center;gap:1.5rem}
.top__nav{display:flex;gap:1.6rem}
.top__nav a{
  color:var(--sky2);text-decoration:none;font-size:.88rem;font-weight:500;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.top__nav a:hover{color:#fff;border-bottom-color:var(--teal)}

/* ── the language button ──────────────────────────────────────
   The page is already in their language; this is only here for the
   times the browser was wrong. So it is quiet — no flag, no banner,
   no coloured badge — and it is a <details> element, which opens and
   closes with no JavaScript on a page that has none. */
.lang{position:relative}
.lang summary{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;
  color:var(--sky2);font-size:.85rem;font-weight:500;
  padding:.34rem .7rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  transition:color .18s,border-color .18s,background .18s;
}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:#fff;border-color:rgba(49,166,160,.6);background:rgba(49,166,160,.10)}
.lang[open] summary{color:#fff;border-color:rgba(49,166,160,.6);background:rgba(49,166,160,.12)}
.lang__globe{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}

.lang__menu{
  position:absolute;top:calc(100% + .55rem);inset-inline-end:0;z-index:40;
  min-width:21.5rem;padding:.95rem 1rem 1.05rem;
  background:var(--night2);border:1px solid rgba(255,255,255,.13);border-radius:12px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.6);
}
.lang__h{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky2);margin-bottom:.7rem;
}
.lang__grid{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .6rem;
            max-height:min(58vh,26rem);overflow-y:auto}
.lang__grid a{
  display:block;padding:.34rem .5rem;border-radius:6px;text-decoration:none;
  text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#D3E2E1;font-size:.9rem;line-height:1.45;
  transition:background .14s,color .14s;
}
.lang__grid a:hover{background:rgba(255,255,255,.07);color:#fff}
.lang__grid a.on{color:var(--night);background:var(--teal);font-weight:600}

/* ── the hero ─────────────────────────────────────────────────
   Full height, dark, and moving. The image is the software's own
   interface text in the twenty languages it ships in — which is a
   fact rather than a photograph of somebody else's students. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--night);color:#fff;
  min-height:min(92svh,900px);display:flex;align-items:center;
  padding:5rem 0 6.5rem;
}
.hero::before{ /* one lit spot, so the ground is not flat black */
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 18% 38%, rgba(49,166,160,.20), transparent 68%),
    radial-gradient(46% 50% at 88% 88%, rgba(192,140,30,.13), transparent 70%);
}
.hero::after{ /* settles the foot of the hero into the section below */
  content:'';position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--night) 82%);
}

/* the wall of scripts */
.wall{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6vh 0 8vh;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.wall__row{display:flex;width:max-content;white-space:nowrap;
           font-family:var(--display);font-weight:500;color:var(--sky);line-height:1.15}
.wall__seq{display:flex;gap:.85em;padding-right:.85em}
.wall__seq span{unicode-bidi:isolate}
.wall__row--a{font-size:clamp(2rem,5.2vw,4.4rem);opacity:.18;animation:drift-l 68s linear infinite}
.wall__row--b{font-size:clamp(3.6rem,11.5vw,10.5rem);opacity:.085;animation:drift-r 104s linear infinite}
.wall__row--c{font-size:clamp(1.5rem,3.8vw,3.2rem);opacity:.15;animation:drift-l 84s linear infinite}
@keyframes drift-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes drift-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* the words on top of it */
.hero__in{position:relative;z-index:2;max-width:52rem;
          border-inline-start:3px solid transparent;padding-inline-start:1.9rem;
          border-image:linear-gradient(to bottom,var(--teal),var(--gold) 55%,var(--clay)) 1;}
.hero .eyebrow{color:var(--teal);margin-bottom:1.5rem}
.hero h1{
  font-size:clamp(2.5rem,6.6vw,5.4rem);line-height:1.0;letter-spacing:-.035em;
  font-weight:600;margin:0 0 1.5rem;max-width:15ch;
}
.hero .lede{
  font-family:var(--serif);font-size:clamp(1.06rem,1.6vw,1.32rem);line-height:1.62;
  color:#D3E2E1;max-width:47ch;
}
.cue{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:2.9rem;
  color:var(--sky2);text-decoration:none;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  transition:color .18s;
}
.cue::after{
  content:'';width:34px;height:1px;background:currentColor;
  animation:cue 2.6s ease-in-out infinite;transform-origin:left;
}
[dir="rtl"] .cue::after{transform-origin:right;
}
.cue:hover{color:#fff}
@keyframes cue{0%,100%{transform:scaleX(.55)}50%{transform:scaleX(1)}}

/* ── the two doors ────────────────────────────────────────────
   Cards, but destinations: each opens with a picture at full card
   width, carries its own accent through kicker, list marks and
   button, and ends in exactly one thing to press. */
.doors{background:var(--paper);padding:5.5rem 0 6rem}
.doors__h{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.03em}
.doors__d{font-family:var(--serif);color:var(--ink2);max-width:52ch;
          margin-top:.7rem;font-size:1.06rem}
.doors__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.9rem;margin-top:2.8rem}

.door{
  --accent:var(--teal-d); --accent-d:var(--teal-d);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
.door--ms{--accent:var(--clay);--accent-d:var(--clay-d)}
.door--ea{--accent:var(--gold);--accent-d:var(--gold-d)}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}

.door__art{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--night2);
           border-bottom:3px solid var(--accent)}
.door__art img{width:100%;height:100%;object-fit:cover;
               transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.door:hover .door__art img{transform:scale(1.035)}

/* English Academy has no photograph of its own, and a stand-in bought
   from a stock library would say nothing. This panel says the one
   thing the photograph could not: the interface exists in twenty
   languages. It is a different KIND of argument from its neighbour,
   deliberately — one card offers a room, the other offers the
   evidence — so it reads as a choice rather than a missing image. */
.door__art--type{
  display:flex;align-items:center;justify-content:center;
  padding:1.1rem;overflow:hidden;
  background:
    radial-gradient(78% 86% at 26% 16%, rgba(192,140,30,.30), transparent 72%),
    linear-gradient(158deg,#12303A,var(--night3));
}
/* Overflowing and masked, like the hero wall, so it reads as a wall of
   language that carries on past the frame rather than as a tidy little
   cluster of chips floating in an empty rectangle. */
.tiles{
  display:flex;flex-wrap:wrap;justify-content:center;align-content:center;
  gap:.5rem;width:100%;max-width:26rem;margin-inline:auto;
}
.tiles span{
  unicode-bidi:isolate;
  font-size:1.04rem;font-weight:500;line-height:1;color:#F2E8D2;
  padding:.6rem .85rem;border-radius:9px;
  background:rgba(255,255,255,.055);border:1px solid rgba(240,229,206,.16);
}
.tiles span:nth-child(3n){color:#FFF6E2;background:rgba(192,140,30,.30);border-color:rgba(214,168,64,.55)}
.tiles span:nth-child(4n){opacity:.55}
.door__artcap{
  position:absolute;inset-inline-start:1.25rem;bottom:1.05rem;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,229,206,.62);
  background:rgba(7,19,25,.62);padding:.32rem .55rem;border-radius:5px;
  backdrop-filter:blur(3px);
}

.door__body{display:flex;flex-direction:column;flex:1;padding:1.9rem 1.9rem 1.7rem}
.door__kicker{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-d);
}
.door__body h3{font-size:clamp(1.55rem,2.6vw,2.05rem);letter-spacing:-.032em;margin:.55rem 0 0}
.door__tag{font-family:var(--serif);font-size:1.08rem;color:var(--ink);margin-top:.3rem}
.door__d{font-family:var(--serif);color:var(--ink2);margin-top:.85rem;font-size:1rem;line-height:1.6}

.door__f{list-style:none;margin:1.35rem 0 0;padding:0;display:grid;gap:.55rem}
.door__f li{position:relative;padding-inline-start:1.5rem;font-size:.94rem;color:var(--ink)}
.door__f li::before{
  content:'';position:absolute;inset-inline-start:0;top:.62em;width:9px;height:2px;
  background:var(--accent);border-radius:2px;
}

.door__who{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink2);
}
.door__who b{color:var(--ink);font-weight:600;
             font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
             text-transform:uppercase;margin-inline-end:.45rem}

.door__go{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:auto;padding-top:1.6rem}
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  padding:.78rem 1.5rem;border-radius:999px;
  transition:background .18s,transform .18s;
}
.btn:hover{background:var(--accent-d);transform:translateY(-1px)}
.more{
  color:var(--ink2);text-decoration:none;font-size:.9rem;font-weight:500;
  border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .18s,border-color .18s;
}
.more:hover{color:var(--accent-d);border-bottom-color:var(--accent)}
.shut{
  display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2);
  padding:.62rem 1.05rem;border:1px dashed var(--line);border-radius:999px;background:#fff;
}

/* ── what is true of both ─────────────────────────────────── */
.band{background:var(--night);color:#fff;padding:5rem 0 5.2rem}
.band__h{font-size:clamp(1.5rem,2.7vw,2.05rem);letter-spacing:-.03em;color:#fff}
.band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2.6rem}
.band__c{border-top:2px solid rgba(49,166,160,.45);padding-top:1.2rem}
.band__c h3{font-size:1.12rem;letter-spacing:-.02em;color:#fff}
.band__c p{font-family:var(--serif);color:#A9C2C1;margin-top:.65rem;font-size:.99rem;line-height:1.62}

/* ── the foot ─────────────────────────────────────────────── */
.foot{background:var(--night3);color:var(--sky2);padding:2.2rem 0 2.6rem;
      border-top:1px solid rgba(255,255,255,.07)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
          gap:1rem;font-size:.85rem}
.foot__say{max-width:44ch}
.foot nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot a{color:var(--sky2);text-decoration:none;border-bottom:1px solid transparent;
        transition:color .18s,border-color .18s}
.foot a:hover{color:#fff;border-bottom-color:var(--teal)}

/* ── keyboard users get to see where they are ─────────────── */
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ── narrower ─────────────────────────────────────────────── */
@media (max-width:900px){
  .doors__grid{grid-template-columns:1fr}
  .band__grid{grid-template-columns:1fr;gap:1.9rem}
  .hero{min-height:auto;padding:4rem 0 5rem}
  .hero__in{padding-left:1.3rem}
  .wall{padding:3vh 0 4vh}
}
@media (max-width:560px){
  body{font-size:16px}
  /* The page IS the navigation below the fold — two cards, two doors.
     A duplicate menu up here only earned itself a second line. The
     language button stays: it is the one control that is not
     repeated anywhere else on the page. */
  .top__nav{display:none}
  .lang__menu{min-width:min(20rem,calc(100vw - 2.5rem))}
  .door__body{padding:1.5rem 1.35rem 1.4rem}
  .door__go{gap:1rem}
  .doors{padding:4rem 0 4.5rem}
}

/* ── motion is optional ───────────────────────────────────────
   Three rows of type moving across the screen is exactly the thing
   that makes some people ill. Turned off here, and nothing depends
   on it: the wall still reads as a wall standing still. */
@media (prefers-reduced-motion:reduce){
  .wall__row,.cue::after{animation:none}
  .cue::after{transform:scaleX(1)}
  .door,.door__art img,.btn{transition:none}
  .door:hover{transform:none}
  .door:hover .door__art img{transform:none}
}

/* LP_CSS_V2_END */