:root{
  --navy:#081b3a;
  --ink:#0b1b33;
  --blue:#2f63d4;
  --blue2:#3c7dff;
  --ice:#c9d8ff;
  --paper:#f6f8fc;
  --white:#ffffff;
  --mist:#eaf0fb;
  --muted:#51607a;
  --line:#dde4f1;
  --shadow:0 12px 36px rgba(7,18,39,.08);
  --shadow-lg:0 22px 60px rgba(7,18,39,.14);
  --focus:0 0 0 4px rgba(47,99,212,.28);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}

/* ---------- section heads: the section NAME is the heading ---------- */
.head{max-width:48rem;margin:0 auto 3rem;text-align:center}
.head h2{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,4vw,3rem);line-height:1.1;letter-spacing:-.01em;color:var(--navy)}
.head h2::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:var(--blue2);margin:.8rem auto 0;transition:width .9s cubic-bezier(.2,.8,.2,1) .35s}
.head.reveal:not(.in) h2::after{width:0}
.head p{margin-top:1rem;color:var(--muted);font-size:1.08rem}
.dark .head h2,.dark h3{color:#fff}
.dark .head p{color:rgba(255,255,255,.82)}
h3{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.2}

/* ---------- buttons ---------- */
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:.94rem;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s,color .25s;cursor:pointer;border:1px solid transparent;font-family:inherit}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--blue2);color:#fff;box-shadow:0 10px 26px rgba(60,125,255,.35)}
.btn-primary:hover{background:#5590ff;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--blue);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}

/* ---------- slim nav: pill | links | logo | links | pill ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);color:#fff;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.nav.scrolled,.nav.menu-open{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line);color:var(--navy)}
.nav-in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:1280px;margin:0 auto;padding:0 24px}
.side{display:flex;align-items:center;justify-content:space-between;gap:24px}
.side.right{flex-direction:row-reverse}
.nav-links{display:flex;gap:26px;list-style:none;font-size:.86rem;font-weight:500}
.nav-links a{text-decoration:none;opacity:.85;padding:6px 0}
.nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border-radius:999px;font-size:.84rem;font-weight:600;text-decoration:none;border:1px solid currentColor;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.pill svg{width:14px;height:14px}
.pill.solid{background:#fff;color:var(--navy);border-color:#fff}
.nav.scrolled .pill.solid,.nav.menu-open .pill.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.pill:hover{background:var(--blue2);color:#fff;border-color:var(--blue2)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand img{width:24px;height:auto}
.brand span{font-family:var(--serif);font-weight:700;font-size:1.3rem}
.brand .on-light{display:none}
.nav.scrolled .brand .on-dark,.nav.menu-open .brand .on-dark{display:none}
.nav.scrolled .brand .on-light,.nav.menu-open .brand .on-light{display:block}
.menu-btn{display:none;background:none;border:0;color:inherit;width:44px;height:44px;cursor:pointer;justify-self:end}
.menu-btn svg{width:24px;height:24px}
.m-login{display:none}
.drawer{display:none}

/* ---------- photo sections with faded edges ---------- */
.scene{--above:var(--white);--below:var(--white);--fade:110px;position:relative;isolation:isolate;text-align:center;padding:168px 24px;overflow:hidden;background:linear-gradient(var(--above),var(--below))}
.scene .bg{position:absolute;inset:0;z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) calc(var(--fade) * 0.00),rgba(0,0,0,0.029) calc(var(--fade) * 0.10),rgba(0,0,0,0.104) calc(var(--fade) * 0.20),rgba(0,0,0,0.216) calc(var(--fade) * 0.30),rgba(0,0,0,0.352) calc(var(--fade) * 0.40),rgba(0,0,0,0.500) calc(var(--fade) * 0.50),rgba(0,0,0,0.648) calc(var(--fade) * 0.60),rgba(0,0,0,0.784) calc(var(--fade) * 0.70),rgba(0,0,0,0.896) calc(var(--fade) * 0.80),rgba(0,0,0,0.971) calc(var(--fade) * 0.90),rgba(0,0,0,1.000) calc(var(--fade) * 1.00),rgba(0,0,0,1.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.10),rgba(0,0,0,0.000) calc(100% - var(--fade) * 0.00));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) calc(var(--fade) * 0.00),rgba(0,0,0,0.029) calc(var(--fade) * 0.10),rgba(0,0,0,0.104) calc(var(--fade) * 0.20),rgba(0,0,0,0.216) calc(var(--fade) * 0.30),rgba(0,0,0,0.352) calc(var(--fade) * 0.40),rgba(0,0,0,0.500) calc(var(--fade) * 0.50),rgba(0,0,0,0.648) calc(var(--fade) * 0.60),rgba(0,0,0,0.784) calc(var(--fade) * 0.70),rgba(0,0,0,0.896) calc(var(--fade) * 0.80),rgba(0,0,0,0.971) calc(var(--fade) * 0.90),rgba(0,0,0,1.000) calc(var(--fade) * 1.00),rgba(0,0,0,1.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.10),rgba(0,0,0,0.000) calc(100% - var(--fade) * 0.00));
}
.scene .bg::before{content:"";position:absolute;inset:-9% 0;background:var(--img) var(--pos,center)/cover no-repeat;translate:0 var(--py,0px);will-change:translate,scale}
.scene .bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 55% 45% at 50% 50%, rgba(8,27,58,.35), transparent 75%),
  linear-gradient(to bottom, rgba(8,27,58,.42) 0, rgba(8,27,58,.8) 30%, rgba(8,27,58,.8) 70%, rgba(8,27,58,.42) 100%)}
.scene::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1.000) calc(var(--fade) * 0.00),rgba(0,0,0,0.971) calc(var(--fade) * 0.10),rgba(0,0,0,0.896) calc(var(--fade) * 0.20),rgba(0,0,0,0.784) calc(var(--fade) * 0.30),rgba(0,0,0,0.648) calc(var(--fade) * 0.40),rgba(0,0,0,0.500) calc(var(--fade) * 0.50),rgba(0,0,0,0.352) calc(var(--fade) * 0.60),rgba(0,0,0,0.216) calc(var(--fade) * 0.70),rgba(0,0,0,0.104) calc(var(--fade) * 0.80),rgba(0,0,0,0.029) calc(var(--fade) * 0.90),rgba(0,0,0,0.000) calc(var(--fade) * 1.00),transparent calc(var(--fade) + 1px),transparent calc(100% - var(--fade) - 1px),rgba(0,0,0,0.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.10),rgba(0,0,0,1.000) calc(100% - var(--fade) * 0.00));mask-image:linear-gradient(to bottom,rgba(0,0,0,1.000) calc(var(--fade) * 0.00),rgba(0,0,0,0.971) calc(var(--fade) * 0.10),rgba(0,0,0,0.896) calc(var(--fade) * 0.20),rgba(0,0,0,0.784) calc(var(--fade) * 0.30),rgba(0,0,0,0.648) calc(var(--fade) * 0.40),rgba(0,0,0,0.500) calc(var(--fade) * 0.50),rgba(0,0,0,0.352) calc(var(--fade) * 0.60),rgba(0,0,0,0.216) calc(var(--fade) * 0.70),rgba(0,0,0,0.104) calc(var(--fade) * 0.80),rgba(0,0,0,0.029) calc(var(--fade) * 0.90),rgba(0,0,0,0.000) calc(var(--fade) * 1.00),transparent calc(var(--fade) + 1px),transparent calc(100% - var(--fade) - 1px),rgba(0,0,0,0.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.10),rgba(0,0,0,1.000) calc(100% - var(--fade) * 0.00))}
.scene > .inner{position:relative;z-index:1}
.inner{max-width:1200px;margin:0 auto}

/* hero */
.hero{min-height:100svh;display:grid;place-items:center;padding:calc(var(--nav-h) + 20px) 20px 190px;
  }
.hero{--fade:130px}
.hero{--img:url(../images/hero-equations.jpg);--pos:center 45%}
.hero .bg::before{animation:breathe 22s ease-in-out infinite alternate}
@keyframes breathe{from{scale:1}to{scale:1.08}}
.hero .bg{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,1.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.10),rgba(0,0,0,0.000) calc(100% - var(--fade) * 0.00));mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,1.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.10),rgba(0,0,0,0.000) calc(100% - var(--fade) * 0.00))}
.hero::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(100% - var(--fade) - 1px),rgba(0,0,0,0.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.10),rgba(0,0,0,1.000) calc(100% - var(--fade) * 0.00));mask-image:linear-gradient(to bottom,transparent 0,transparent calc(100% - var(--fade) - 1px),rgba(0,0,0,0.000) calc(100% - var(--fade) * 1.00),rgba(0,0,0,0.029) calc(100% - var(--fade) * 0.90),rgba(0,0,0,0.104) calc(100% - var(--fade) * 0.80),rgba(0,0,0,0.216) calc(100% - var(--fade) * 0.70),rgba(0,0,0,0.352) calc(100% - var(--fade) * 0.60),rgba(0,0,0,0.500) calc(100% - var(--fade) * 0.50),rgba(0,0,0,0.648) calc(100% - var(--fade) * 0.40),rgba(0,0,0,0.784) calc(100% - var(--fade) * 0.30),rgba(0,0,0,0.896) calc(100% - var(--fade) * 0.20),rgba(0,0,0,0.971) calc(100% - var(--fade) * 0.10),rgba(0,0,0,1.000) calc(100% - var(--fade) * 0.00))}
.hero .bg::after{background:
  radial-gradient(ellipse 55% 50% at 50% 46%, rgba(8,27,58,.4), transparent 75%),
  linear-gradient(to bottom, rgba(8,27,58,.82) 0, rgba(8,27,58,.8) 62%, rgba(8,27,58,.42) 100%)}
.tag{font-size:.8rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--ice)}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(3rem,9vw,6.6rem);line-height:1.04;letter-spacing:-.015em;color:#fff;margin-top:1.5rem}
.hero h1 em{font-style:italic;font-weight:500;color:var(--ice)}
.hero .sub{max-width:40rem;margin:1.7rem auto 0;color:rgba(255,255,255,.88);font-size:clamp(1.05rem,1.6vw,1.2rem)}
.hero .btns{margin-top:2.4rem}
.hero .btn{min-height:54px;padding:0 32px;font-size:1rem}
.hero .btn-primary{animation:glow 3.8s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 10px 26px rgba(60,125,255,.35)}50%{box-shadow:0 14px 44px rgba(60,125,255,.62)}}
.scroll-cue{position:absolute;left:50%;bottom:118px;z-index:1;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.66);text-decoration:none;transition:opacity .5s}
.scroll-cue i{width:1px;height:48px;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.nav.scrolled ~ main .scroll-cue{opacity:0;pointer-events:none}
@media (min-width:941px) and (max-height:840px){.scroll-cue{display:none}.hero{padding-bottom:150px}}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--blue),var(--blue2));transform:scaleX(0);transform-origin:left}
.hero .note{margin-top:1.4rem;font-size:.88rem;color:rgba(255,255,255,.66)}

/* ---------- light bands ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;padding:104px 24px;background:var(--white)}
.band::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;background:
  radial-gradient(34vw 26vw at 22% 30%, rgba(60,125,255,.09), transparent 70%),
  radial-gradient(30vw 24vw at 78% 72%, rgba(99,102,241,.07), transparent 70%);
  animation:drift 19s ease-in-out infinite alternate}
.band:nth-of-type(even)::before{animation-duration:23s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate3d(-4%,-3%,0) rotate(-2deg)}to{transform:translate3d(4%,3%,0) rotate(2deg)}}
.band.tint{background:var(--paper)}

/* method */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1160px;margin:0 auto}
.pillar{text-align:center;padding:36px 30px;border-radius:20px;background:var(--paper)}
.pillar .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:.9rem}
.pillar h3{font-size:1.55rem;margin:.8rem 0 .45rem}
.pillar p{color:var(--muted);font-size:1rem}

/* subjects */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1220px;margin:0 auto}
.tier{text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 24px;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tier{position:relative;overflow:hidden}
.tier::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(60,125,255,.12), transparent 70%)}
.tier:hover::before{opacity:1}
.tier > *{position:relative}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tier .ic{width:52px;height:52px;border-radius:14px;margin:0 auto 1rem;display:grid;place-items:center;background:var(--mist);color:var(--blue)}
.tier .ic svg{width:22px;height:22px}
.tier .stage{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:600}
.tier h3{font-size:1.5rem;margin:.4rem 0 .4rem}
.tier p{font-size:.96rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:.9rem;list-style:none}
.chips li{font-size:.8rem;padding:5px 12px;border-radius:999px;background:var(--mist);color:var(--navy);font-weight:500}

/* lessons + medicine (dark photo bands) */
.lessons{--above:var(--paper);--below:var(--white)}
.lessons{--img:url(../images/lessons-desk.jpg)}
.medicine{--above:var(--white);--below:var(--paper)}
.medicine{--img:url(../images/medicine-heart.jpg);--pos:center 45%}
.duo{display:grid;grid-template-columns:1fr 1fr;max-width:780px;margin:0 auto;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.duo div{padding:28px 24px}
.duo div+div{border-left:1px solid rgba(255,255,255,.2)}
.duo strong{display:block;font-family:var(--serif);font-size:1.5rem;color:#fff}
.duo span{font-size:.96rem;color:rgba(255,255,255,.8)}
.fine{margin-top:1rem;font-size:.8rem;color:rgba(255,255,255,.66)}
.medicine .btns{margin-top:1.6rem}

/* approach */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1220px;margin:0 auto;list-style:none;text-align:center}
.steps::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--line),var(--blue2),var(--line));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .2s}
.steps.in::before{transform:scaleX(1)}
.step .dot{position:relative;width:52px;height:52px;border-radius:50%;margin:0 auto .9rem;display:grid;place-items:center;font-weight:700;font-size:1.05rem;background:#fff;border:1px solid var(--line);color:var(--blue)}
.step:nth-child(3) .dot{background:var(--navy);color:#fff;border-color:var(--navy)}
.step:nth-child(3) .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--blue2);animation:ping 2.8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.step h3{font-size:1.28rem;margin-bottom:.4rem}
.step p{font-size:.96rem;color:var(--muted);max-width:14rem;margin:0 auto}

/* results */
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:1080px;margin:0 auto;text-align:center}
.stat+.stat{border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--serif);font-size:3rem;line-height:1;color:var(--navy)}
.stat span{display:block;margin-top:.6rem;font-size:.92rem;color:var(--muted)}
blockquote{max-width:48rem;margin:3.2rem auto 0;text-align:center}
blockquote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.6rem;line-height:1.4;color:var(--navy)}
blockquote cite{display:block;margin-top:.8rem;font-style:normal;font-size:.84rem;color:var(--muted)}

/* faq */
.faq-list{max-width:880px;margin:0 auto}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 6px;font-weight:600;font-size:1.1rem;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary .plus{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);position:relative}
summary .plus::before,summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--blue);transform:translate(-50%,-50%)}
summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .plus{background:var(--navy);border-color:var(--navy)}
details[open] .plus::after{opacity:0}
details[open] .plus::before{background:#fff}
details p{padding:0 6px 22px;color:var(--muted);font-size:1rem}

/* contact */
.contact{--above:var(--white);--below:var(--white);padding:132px 24px}
.contact{--img:url(../images/cta-desk.jpg);--pos:center 55%}
.contact .head{margin-bottom:1.8rem}
.form{max-width:920px;margin:0 auto;padding:34px;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,0.337);text-align:left}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:5px}
.field.span2{grid-column:span 2}
.field label{font-size:.84rem;font-weight:600;color:var(--navy)}
.field input,.field select{height:50px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.93rem;padding:0 14px}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23081b3a' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field input::placeholder{color:#8a97ad}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:var(--focus)}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.form-foot small{color:#6b7890;font-size:.78rem}
.sent{display:none;text-align:center;padding:20px 0}
.sent h3{font-size:1.5rem;margin-bottom:.3rem}
.sent p{color:var(--muted)}
.form.done .sent{display:block}
.form.done .form-body{display:none}

/* footer */
footer{padding:56px 20px 36px;text-align:center;background:var(--white);border-top:1px solid var(--line)}
footer .brand{justify-content:center;color:var(--navy)}
footer .brand img{width:28px}
footer .blurb{color:var(--muted);margin-top:.6rem;font-size:.92rem}
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin:1.4rem 0;list-style:none;font-size:.88rem}
.foot-links a{text-decoration:none;color:var(--muted)}
.foot-links a:hover{color:var(--blue)}
.socials{display:flex;justify-content:center;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--navy);transition:background .2s,color .2s}
.socials a:hover{background:var(--navy);color:#fff}
.socials svg{width:17px;height:17px}
.legal{margin-top:1.6rem;font-size:.76rem;color:#8a97ad}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* responsive */
@media (max-width:1100px){.nav-links{gap:18px}.side{gap:18px}}
@media (max-width:1000px){
  .tiers{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .steps::before{display:none}
}
@media (max-width:940px){
  :root{--nav-h:58px}
  .side{display:none}
  .m-login{display:inline-flex;justify-self:start;height:34px;padding:0 14px}
  .menu-btn{display:grid;place-items:center;grid-column:3}
  .nav-in{padding:0 12px}
  .drawer{display:flex;position:fixed;inset:var(--nav-h) 0 0;z-index:49;background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;pointer-events:none;transition:opacity .25s}
  .drawer.open{opacity:1;pointer-events:auto}
  .drawer a{font-family:var(--serif);font-weight:600;font-size:1.6rem;text-decoration:none;color:var(--navy)}
  .drawer a.btn{font-family:var(--sans);font-size:.95rem;margin-top:8px;color:#fff}
  .pillars{grid-template-columns:1fr;max-width:460px}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .stat:nth-child(3){border-left:0}
  .grid3{grid-template-columns:1fr 1fr}
  .field.span2{grid-column:1/-1}
}
@media (max-width:600px){
  .band{padding:64px 16px}
  .scene{--fade:70px;padding:100px 16px}
  .contact{padding:90px 16px}
  .hero{padding-bottom:110px}
  .scroll-cue{bottom:84px}
  .scroll-cue i{height:34px}
  .head{margin-bottom:1.8rem}
  .grid3{grid-template-columns:1fr}
  .pillars{gap:10px}
  .pillar{display:grid;grid-template-columns:34px 1fr;column-gap:14px;text-align:left;padding:16px 18px;align-items:center}
  .pillar .n{grid-row:span 2}
  .pillar h3{margin:0;font-size:1.15rem}
  .pillar p{font-size:.88rem}
  .tiers{grid-template-columns:1fr 1fr;gap:10px}
  .tier{padding:16px 10px}
  .tier .ic{width:36px;height:36px;margin-bottom:.5rem}
  .tier .ic svg{width:18px;height:18px}
  .tier h3{font-size:1.1rem}
  .tier > p:not(.stage){display:none}
  .chips{margin-top:.6rem}
  .steps{grid-template-columns:1fr 1fr;row-gap:18px}
  .step:last-child{grid-column:1/-1}
  .step .dot{width:36px;height:36px;margin-bottom:.5rem}
  .step h3{font-size:1rem}
  .step p{font-size:.82rem}
  .duo{grid-template-columns:1fr}
  .duo div+div{border-left:0;border-top:1px solid rgba(255,255,255,.2)}
  .form{padding:20px 16px}
  .form-foot{flex-direction:column-reverse;align-items:stretch;text-align:center}
  .btns{flex-direction:column;align-items:stretch;max-width:300px;margin-inline:auto}
  .tag{letter-spacing:.2em;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .scene .bg::before{translate:none;scale:none}
  .steps::before{transform:none}
  .head.reveal:not(.in) h2::after{width:44px}
}

/* =====================================================================
   INTERACTION LAYER
   ===================================================================== */

/* ---------- page transitions: old page fades out, new page slides in ---------- */
body{transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1)}
html.pt-enter body{opacity:0;transform:translateY(18px)}
html.pt-leave body{opacity:0;transform:translateY(-14px);pointer-events:none}
.pt-curtain{position:fixed;inset:0;z-index:100;pointer-events:none;background:var(--navy);opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
html.pt-leave .pt-curtain{opacity:.14}

/* ---------- button feedback: press + ripple ---------- */
.btn,.pill,.seg button,.menu-btn{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn:active,.pill:active{transform:translateY(0) scale(.965)}
.ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.45;background:currentColor;animation:ripple .6s cubic-bezier(.2,.8,.2,1) forwards}
.btn-primary .ripple,.btn-navy .ripple{background:#fff}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---------- segmented toggles with a sliding thumb ---------- */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.seg button{z-index:1;border:0;background:none;font:inherit;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.78);padding:11px 26px;border-radius:999px;cursor:pointer;transition:color .35s}
.seg button[aria-selected="true"],.seg button[aria-checked="true"]{color:var(--navy)}
.seg-thumb{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .45s cubic-bezier(.34,1.4,.5,1),width .45s cubic-bezier(.34,1.4,.5,1)}
.switcher{display:flex;flex-direction:column;align-items:center;gap:22px}
.seg-panels{display:grid;max-width:620px;width:100%}
.seg-panel{grid-area:1/1;padding:24px 26px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.seg-panel[hidden]{display:block;visibility:hidden;opacity:0;transform:translateY(10px) scale(.98)}
.seg-panel strong{display:block;font-family:var(--serif);font-size:1.45rem;color:#fff}
.seg-panel span{display:block;margin-top:.3rem;color:rgba(255,255,255,.82)}
.seg-sm{display:grid;background:var(--paper);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;padding:4px}
.seg-sm button{color:var(--muted);font-size:.86rem;padding:10px 6px}
.seg-sm .seg-thumb{top:4px;bottom:4px;left:4px;background:var(--navy);box-shadow:0 4px 12px rgba(8,27,58,.25)}
.seg-sm button[aria-checked="true"]{color:#fff}
.field .label{font-size:.84rem;font-weight:600;color:var(--navy)}

/* sound switch (footer) */
.sound-switch{display:inline-flex;align-items:center;gap:10px;margin-top:1.4rem;font-size:.84rem;color:var(--muted);cursor:pointer;user-select:none}
.sound-switch input{position:absolute;opacity:0;width:1px;height:1px}
.sound-switch .track{position:relative;width:46px;height:26px;border-radius:999px;background:#cfd8e8;transition:background .35s}
.sound-switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .45s cubic-bezier(.34,1.5,.5,1)}
.sound-switch input:checked + .track{background:var(--blue2)}
.sound-switch input:checked + .track .knob{transform:translateX(20px)}
.sound-switch input:focus-visible + .track{box-shadow:var(--focus)}
.sound-switch:active .knob{width:24px}

/* ---------- live form validation ---------- */
.ctl{position:relative}
.ctl input,.ctl select{width:100%;padding-right:40px}
.ctl select{background-position:right 14px center}
.field[data-rule="select"] .ok{right:36px}
.ok{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#1f9d62;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.6,.5,1)}
.ok::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.field.valid .ok{transform:scale(1)}
.field.valid input,.field.valid select{border-color:#9fd8bb}
.field.invalid input,.field.invalid select{border-color:#e58a8a;background:#fff7f7}
.msg{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.msg span{overflow:hidden;font-size:.8rem;color:#c64545;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.field.invalid .msg{grid-template-rows:1fr}
.field.invalid .msg span{opacity:1;transform:none;padding-top:2px}
.form.shake,.login-card.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.submit .spin{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;opacity:0;animation:spin .8s linear infinite}
.submit.loading .lbl{opacity:0}
.submit.loading .spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.tick{width:64px;height:64px;margin:0 auto 12px;display:block}
.tick circle{fill:none;stroke:#1f9d62;stroke-width:2.5;stroke-dasharray:152;stroke-dashoffset:152}
.tick path{fill:none;stroke:#1f9d62;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.form.done .tick circle{animation:draw .7s cubic-bezier(.65,0,.45,1) forwards}
.form.done .tick path{animation:draw .45s cubic-bezier(.65,0,.45,1) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.form.done .sent{animation:rise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* ---------- hover reveals + 3D tilt on subject cards ---------- */
.tiers{perspective:1100px}
.tier.tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.tier.tilt:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);transition:transform .12s linear,box-shadow .4s}
.tier > .reveal-img{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;opacity:0;transform:scale(1.12);transition:opacity .55s,transform .9s cubic-bezier(.2,.8,.2,1)}
.tier > .reveal-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,27,58,.72),rgba(8,27,58,.9))}
.tier:hover > .reveal-img,.tier:focus-within > .reveal-img{opacity:1;transform:scale(1)}
.tier > :not(.reveal-img){z-index:1;transition:color .45s,transform .5s cubic-bezier(.2,.8,.2,1)}
.tier.tilt:hover h3,.tier.tilt:hover > p{color:#fff}
.tier.tilt:hover .stage{color:var(--ice)}
.tier.tilt:hover .ic{background:rgba(255,255,255,.14);color:#fff;transform:translateZ(30px)}
.tier.tilt:hover h3{transform:translateZ(22px)}
.tier.tilt:hover .chips li{background:rgba(255,255,255,.14);color:#fff}
.tier .chips li{transition:background .45s,color .45s}

/* ---------- 3D helix ---------- */
.helix-wrap{position:relative;width:min(560px,100%);height:250px;margin:-.6rem auto 1.4rem;cursor:grab;touch-action:pan-y}
.helix-wrap:active{cursor:grabbing}
#helix{width:100%;height:100%;display:block}
.helix-hint{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;font-size:.76rem;letter-spacing:.08em;color:rgba(255,255,255,.6);transition:opacity .5s}
.helix-hint svg{width:16px;height:16px}
.helix-wrap.used .helix-hint{opacity:0}

/* ---------- ambient video ---------- */
.bg-video{position:absolute;left:0;right:0;top:-9%;width:100%;height:118%;object-fit:cover;translate:0 var(--py,0px);opacity:.75}

/* ---------- FAQ smooth open/close ---------- */
details .faq-body{overflow:hidden}

/* ---------- services page ---------- */
.page-hero{min-height:62vh;display:grid;place-items:center;padding:calc(var(--nav-h) + 70px) 20px 150px}
.page-hero{--img:url(../images/offer-hero.jpg);--fade:120px}
.page-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,6.5vw,4.8rem);line-height:1.05;color:#fff;margin-top:1rem}
.page-hero .sub{max-width:40rem;margin:1.2rem auto 0;color:rgba(255,255,255,.86);font-size:1.1rem}
.filters{display:flex;justify-content:center;margin:0 auto 2.4rem}
.filters .seg{background:var(--paper);border-color:var(--line);backdrop-filter:none}
.filters .seg button{color:var(--muted);padding:11px 20px;font-size:.9rem}
.filters .seg .seg-thumb{background:var(--navy)}
.filters .seg button[aria-selected="true"]{color:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1220px;margin:0 auto}
.svc{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 22px;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:inherit;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .4s,border-color .35s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(47,99,212,.35)}
.svc.hide{opacity:.18;transform:scale(.96);filter:saturate(.3);pointer-events:none}
.svc .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--mist);color:var(--blue);transition:background .35s,color .35s,transform .45s cubic-bezier(.34,1.5,.5,1)}
.svc:hover .ic{background:var(--navy);color:#fff;transform:rotate(-6deg) scale(1.06)}
.svc .ic svg{width:22px;height:22px}
.svc .tagline{display:inline-block;margin-top:1rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:600}
.svc h3{font-size:1.3rem;margin:.35rem 0 .45rem}
.svc .one{color:var(--muted);font-size:.93rem}
.svc .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.svc .more > div{overflow:hidden}
.svc.open .more{grid-template-rows:1fr}
.svc .more p{margin-top:.9rem;font-size:.92rem;color:var(--ink)}
.svc .more ul{list-style:none;margin-top:.7rem;display:grid;gap:6px}
.svc .more li{font-size:.88rem;color:var(--muted);padding-left:22px;position:relative}
.svc .more li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border:solid var(--blue2);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.svc .more dl{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);display:grid;gap:6px;font-size:.85rem}
.svc .more dt{font-weight:600;color:var(--navy)}
.svc .more dd{color:var(--muted);margin-bottom:4px}
.svc .toggle-ic{position:absolute;right:20px;top:26px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);transition:transform .45s cubic-bezier(.34,1.5,.5,1),background .3s}
.svc .toggle-ic::before,.svc .toggle-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--blue);transform:translate(-50%,-50%)}
.svc .toggle-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc.open .toggle-ic{transform:rotate(135deg);background:var(--navy);border-color:var(--navy)}
.svc.open .toggle-ic::before,.svc.open .toggle-ic::after{background:#fff}
.cta-band{--img:url(../images/lessons-desk.jpg)}
.cta-band .btns{margin-top:1.6rem}
.nav-links a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px}

@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .svc-grid{grid-template-columns:1fr}
  .filters .seg{grid-auto-flow:row;grid-template-columns:1fr 1fr;border-radius:18px}
  .filters .seg .seg-thumb{display:none}
  .filters .seg button[aria-selected="true"]{background:var(--navy)}
  .seg button{padding:11px 18px}
  .helix-wrap{height:200px}
  .tier.tilt:hover{transform:none}
}
@media (hover:none){.tier:hover > .reveal-img{opacity:0}.tier:hover h3,.tier:hover > p{color:inherit}}
@media (prefers-reduced-motion:reduce){
  html.pt-enter body,html.pt-leave body{opacity:1;transform:none}
  .tier.tilt:hover{transform:none}
  .ripple{display:none}
}

/* never leave the page hidden if scripts fail */
html.pt-enter body{animation:pt-failsafe 0s 1.5s forwards}
@keyframes pt-failsafe{to{opacity:1;transform:none}}

/* =====================================================================
   PORTAL SIGN-IN
   ===================================================================== */
.topbar{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);color:#fff}
.topbar .nav-in{grid-template-columns:1fr auto 1fr}
.topbar .pill:first-child{justify-self:start}
.topbar .pill:last-child{justify-self:end}
.login-scene{--img:url(../images/portal-bg.jpg);--fade:0px;min-height:100svh;display:grid;place-items:center;padding:calc(var(--nav-h) + 36px) 16px 48px}
.login-scene .bg,.login-scene::before{-webkit-mask-image:none;mask-image:none}
.login-scene::before{display:none}
.login-scene .bg::before{animation:breathe 26s ease-in-out infinite alternate}
.login-scene .bg::after{background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,27,58,.72), rgba(8,27,58,.86))}
.login-wrap{width:100%;max-width:460px;margin:0 auto}
.login-card{margin-top:1.2rem;padding:34px 32px 26px;border-radius:24px;background:#fff;box-shadow:0 40px 100px rgba(0,0,0,.35);text-align:left}
.login-card h1{font-family:var(--serif);font-weight:700;font-size:2.2rem;color:var(--navy);line-height:1.1}
.login-card h1::after{content:"";display:block;width:40px;height:3px;border-radius:3px;background:var(--blue2);margin-top:.7rem}
.login-card .lead{margin:.9rem 0 1.4rem;color:var(--muted);font-size:.95rem}
.login-card .field{margin-bottom:14px}
.login-card .ctl .lead-ic{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:#8a97ad;pointer-events:none;transition:color .25s}
.login-card .ctl input{padding-left:42px}
.login-card .ctl:focus-within .lead-ic{color:var(--blue)}
.login-card .field[data-rule="password"] .ok{display:none}
.eye{position:absolute;right:8px;top:50%;width:36px;height:36px;margin-top:-18px;border:0;border-radius:10px;background:none;color:#6b7890;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.eye:hover{background:var(--mist);color:var(--navy)}
.eye svg{width:20px;height:20px;overflow:visible}
.eye .slash{stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .35s cubic-bezier(.2,.8,.2,1)}
.eye[aria-pressed="true"] .slash{stroke-dashoffset:24}
.caps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.caps span{overflow:hidden;font-size:.8rem;color:#a86b00}
.caps.on{grid-template-rows:1fr}
.caps.on span{padding-top:4px}
.login-card .submit{width:100%;margin-top:6px}
#msg{display:block;min-height:0;margin-top:12px;font-size:.88rem;border-radius:12px;padding:0 12px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .3s,padding .3s}
#msg.err,#msg.ok{max-height:120px;opacity:1;padding:10px 12px}
#msg.err{background:#fff4f4;color:#b43c3c}
#msg.ok{background:#eef7f2;color:#1b6e47}
.login-card .alt{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.linkish{border:0;background:none;font:inherit;font-size:.88rem;font-weight:600;color:var(--blue);cursor:pointer;padding:8px 2px;text-decoration:none;position:relative}
.linkish::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.linkish:hover::after{transform:scaleX(1)}
.roles{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:1.4rem;list-style:none}
.roles li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.82rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.roles svg{width:15px;height:15px;opacity:.85}
.login-foot{margin-top:1rem;font-size:.76rem;color:rgba(255,255,255,.6);text-align:center}

/* =====================================================================
   MOBILE POLISH
   ===================================================================== */
.touch-hint{display:none}
@media (hover:none){
  .touch-hint{display:block;margin-top:.5rem;font-size:.85rem;color:var(--blue)}
  .tier.peek > .reveal-img{opacity:1;transform:none}
  .tier.peek h3,.tier.peek > p{color:#fff}
  .tier.peek .stage{color:var(--ice)}
  .tier.peek .ic{background:rgba(255,255,255,.14);color:#fff}
  .tier.peek .chips li{background:rgba(255,255,255,.14);color:#fff}
}
@media (max-width:940px){
  .m-login{height:40px;padding:0 16px}
  .menu-btn{width:44px;height:44px}
}
@media (max-width:600px){
  /* 16px stops iOS zooming into fields */
  .field input,.field select,.login-card input{font-size:16px}
  .seg button{min-height:44px}
  .foot-links{gap:4px 8px}
  .foot-links a{display:inline-block;padding:8px 8px}
  .socials a{width:44px;height:44px}
  .sound-switch{padding:8px 0}
  .login-card{padding:26px 20px 20px}
  .login-card h1{font-size:1.9rem}
  .topbar .pill span.t{display:none}
  .roles li{font-size:.78rem}
  .svc{padding:22px 18px}
  .svc .toggle-ic{right:16px;top:22px}
}
@media (max-width:360px){
  .hero h1{font-size:2.6rem}
  .btn{padding:0 20px}
}

/* touch screens of any size: 16px fields (no iOS zoom) and 44px tap targets */
@media (pointer:coarse){
  .field input,.field select,.login-card input{font-size:16px}
  .brand{min-height:44px}
  .pill{min-height:44px;height:auto}
  .eye{width:44px;height:44px;margin-top:-22px;right:4px}
  .linkish{min-height:44px;display:inline-flex;align-items:center}
  .linkish::after{bottom:10px}
  .foot-links{gap:0 6px}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .sound-switch{min-height:44px}
  .socials a{width:44px;height:44px}
  .seg button{min-height:44px}
  .login-card .ctl input{padding-right:52px}
}
@media (max-width:600px){
  .btns{max-width:340px}
  .btn{white-space:nowrap}
  .hero .btn{padding:0 22px;font-size:.98rem}
}
@media (max-width:360px){.hero .btn{font-size:.92rem;padding:0 16px}}

/* =====================================================================
   TRUSTPILOT RATING + REVIEWS
   ===================================================================== */
.stars{display:inline-flex;gap:3px;color:#f5b301}
.stars svg{width:18px;height:18px;fill:currentColor}
/* partial fill for a 4.1 rating: gold up to --fill, grey after */
.stars.partial{position:relative;color:#d5dbe6}
.stars.partial::after{content:"";position:absolute;inset:0;width:var(--fill,100%);background:inherit}
.stars.partial{background:linear-gradient(90deg,#f5b301 var(--fill,100%),#d5dbe6 var(--fill,100%));-webkit-mask:var(--star-mask);mask:var(--star-mask)}
.stars.partial svg{fill:transparent}
.stars.partial{--star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 18'%3E%3Cg%3E%3Cpath d='M9 1.9l2.2 4.6 5 .6-3.7 3.4 1 5L9 13l-4.5 2.5 1-5L1.8 7.1l5-.6z'/%3E%3Cpath transform='translate(21 0)' d='M9 1.9l2.2 4.6 5 .6-3.7 3.4 1 5L9 13l-4.5 2.5 1-5L1.8 7.1l5-.6z'/%3E%3Cpath transform='translate(42 0)' d='M9 1.9l2.2 4.6 5 .6-3.7 3.4 1 5L9 13l-4.5 2.5 1-5L1.8 7.1l5-.6z'/%3E%3Cpath transform='translate(63 0)' d='M9 1.9l2.2 4.6 5 .6-3.7 3.4 1 5L9 13l-4.5 2.5 1-5L1.8 7.1l5-.6z'/%3E%3Cpath transform='translate(84 0)' d='M9 1.9l2.2 4.6 5 .6-3.7 3.4 1 5L9 13l-4.5 2.5 1-5L1.8 7.1l5-.6z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;width:102px;height:18px;gap:0}
.stars.partial::after{display:none}

.tp-badge{display:flex;align-items:center;gap:18px;width:max-content;max-width:100%;margin:3rem auto 0;padding:16px 24px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tp-badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tp-score{font-family:var(--serif);font-weight:700;font-size:2.6rem;line-height:1;color:var(--navy)}
.tp-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:.9rem;color:var(--muted);text-align:left}
.tp-meta strong{color:var(--navy)}
.tp-arrow{width:18px;height:18px;color:var(--blue);transition:transform .3s}
.tp-badge:hover .tp-arrow{transform:translateX(4px)}

.hero-tp{display:inline-flex;align-items:center;gap:10px;margin-top:1rem;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.88);font-size:.86rem;text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s}
.hero-tp:hover{background:rgba(255,255,255,.18)}
.hero-tp strong{color:#fff}
.hero-tp .stars.partial{background:linear-gradient(90deg,#f5b301 var(--fill),rgba(255,255,255,.3) var(--fill));width:85px;height:15px}

.reviews{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:20px;max-width:1220px;margin:0 auto;align-items:start}
.review{margin:0;text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.review.featured{background:linear-gradient(160deg,#0b2350,var(--navy));border-color:transparent;color:#fff}
.review blockquote{margin:14px 0 0}
.review blockquote p{font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.45;color:var(--navy)}
.review.featured blockquote > p{font-size:1.4rem;color:#fff}
.review blockquote > p::before{content:"\201C"}
.review blockquote > p::after{content:"\201D"}
.review-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.review-more > div{overflow:hidden}
.review-more p{font-family:var(--sans)!important;font-size:.95rem!important;line-height:1.6!important;color:rgba(255,255,255,.82)!important;margin-top:.8rem}
.review.open .review-more{grid-template-rows:1fr}
.read-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .25s}
.read-more:hover{background:rgba(255,255,255,.16)}
.read-more svg{width:14px;height:14px;transition:transform .4s cubic-bezier(.34,1.5,.5,1)}
.review.open .read-more svg{transform:rotate(180deg)}
.review figcaption{display:flex;flex-direction:column;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.review figcaption strong{color:var(--navy);font-size:.95rem}
.review.featured figcaption{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.7)}
.review.featured figcaption strong{color:#fff}
.btn-ghost-dark{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-ghost-dark:hover{border-color:var(--navy);transform:translateY(-2px)}

/* ---------- enquiry form additions ---------- */
.field.full{grid-column:1/-1}
.field label em{font-style:normal;font-weight:500;color:#8a97ad}
.field textarea{width:100%;min-height:84px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.93rem;padding:12px 14px;resize:vertical;transition:border-color .2s,background .2s,box-shadow .2s}
.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:var(--focus)}
.field textarea::placeholder{color:#8a97ad}
.count{align-self:flex-end;font-size:.75rem;color:#8a97ad;transition:color .3s}
.count.near{color:#a86b00}
.form{max-width:980px}

@media (max-width:1000px){.reviews{grid-template-columns:1fr 1fr}.review.featured{grid-column:1/-1}}
@media (max-width:600px){
  .reviews{grid-template-columns:1fr}
  .tp-badge{gap:14px;padding:14px 18px}
  .tp-score{font-size:2.2rem}
  .review{padding:22px 20px}
  .review.featured blockquote > p{font-size:1.22rem}
}
@media (pointer:coarse){.field textarea{font-size:16px}.read-more{min-height:44px}}
/* tighter contact block so it fits a 768px-tall laptop with the header */
.contact{padding-top:120px;padding-bottom:120px}
.contact .head{margin-bottom:1.4rem}
.contact .head p{margin-top:.7rem}
.form{padding:26px 30px}
.grid3{gap:10px 16px}
.field textarea{min-height:64px}
.form-foot{margin-top:10px}

@media (max-width:600px){
  /* reviews become a swipeable carousel */
  .reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -16px;padding:4px 16px 18px;scrollbar-width:none}
  .reviews::-webkit-scrollbar{display:none}
  .review{flex:0 0 86%;scroll-snap-align:center}
  .swipe-hint{display:block}
  /* year + exam share a row */
  .grid3{grid-template-columns:1fr 1fr}
  .grid3 .field{grid-column:1/-1}
  .grid3 .field:has(#fYear),.grid3 .field:has(#fExam){grid-column:auto}
}
.swipe-hint{display:none;margin-top:.4rem;font-size:.85rem;color:var(--blue)}
/* review cards read left-aligned; the full review is plain body text */
.review blockquote{max-width:none;text-align:left}
.review blockquote > p{font-style:italic}
.review-more p{font-style:normal!important;text-align:left}

/* =====================================================================
   RATINGS + ROTATING REVIEW
   ===================================================================== */
.ratings{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:3rem}
.ratings .tp-badge{margin:0}

.rv{position:relative;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:18px;max-width:980px;margin:0 auto}
.rv-stage{display:grid;overflow:hidden;padding:6px 4px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.rv-slide{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateX(48px);pointer-events:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.rv-slide.is-leaving{opacity:0;transform:translateX(-48px)}
.rv.back .rv-slide{transform:translateX(-48px)}
.rv.back .rv-slide.is-active{transform:none}
.rv.back .rv-slide.is-leaving{transform:translateX(48px)}
.rv-chip{display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px;background:var(--navy);color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.02em}
.rv-slide .stars svg{width:20px;height:20px}
.rv-slide blockquote{margin:18px auto 0;max-width:46rem}
.rv-slide blockquote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.38;color:var(--navy)}
.rv-slide blockquote p::before{content:"\201C";display:inline;font-size:1em;color:var(--navy);margin:0}
.rv-slide blockquote p::after{content:"\201D"}
.rv-slide figcaption{margin-top:1.2rem;display:flex;flex-direction:column;align-items:center;gap:2px}
.rv-slide figcaption strong{color:var(--navy);font-size:1rem}
.rv-slide figcaption span{color:var(--muted);font-size:.88rem}
.rv-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:background .25s,color .25s,transform .25s}
.rv-arrow:hover{background:var(--navy);color:#fff}
.rv-arrow:active{transform:scale(.94)}
.rv-arrow svg{width:22px;height:22px}
.rv-foot{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:1.4rem}
.rv-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rv-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#cfd8e8;cursor:pointer;transition:width .45s cubic-bezier(.2,.8,.2,1),background .3s}
.rv-dot.on{width:28px;background:var(--navy)}
.rv-bar{width:160px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.rv-bar i{display:block;height:100%;background:var(--blue2);transform-origin:left;transform:scaleX(0)}
.rv-bar i.run{animation:rvfill var(--rv-dur,7s) linear forwards}
.rv.paused .rv-bar i{animation-play-state:paused}
@keyframes rvfill{to{transform:scaleX(1)}}

@media (max-width:700px){
  .rv{grid-template-columns:1fr;gap:6px}
  .rv-arrow{display:none}
  .rv-slide blockquote p{font-size:1.3rem}
}
@media (pointer:coarse){
  .rv-dot{width:10px;height:10px;position:relative}
  .rv-dot::after{content:"";position:absolute;inset:-17px -8px}
  .rv-dot.on{width:30px}
}
@media (prefers-reduced-motion:reduce){.rv-slide{transform:none!important}}

/* =====================================================================
   MULTI-PAGE ADDITIONS
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph-about{--img:url(../images/about-hero.jpg)}
.ph-faq{--img:url(../images/faq-hero.jpg)}
.ph-medicine{--img:url(../images/medicine-hero.jpg)}
.ph-legal{--img:url(../images/offer-hero.jpg);min-height:48vh}
.ph-contact{--img:url(../images/cta-desk.jpg);--pos:center 55%;min-height:52vh}

/* simple closing call to action */
.cta-final{padding:150px 24px}
.cta-title{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.06;letter-spacing:-.015em;color:#fff}
.cta-title em{font-style:italic;font-weight:500;color:var(--ice)}
.cta-text{max-width:40rem;margin:1.3rem auto 0;color:rgba(255,255,255,.86);font-size:clamp(1rem,1.5vw,1.15rem)}
.cta-final .btns{margin-top:2.2rem}

/* contact page */
.methods{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;list-style:none;margin:0 auto 2rem}
.methods a{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.methods a:hover{transform:translateY(-3px);border-color:rgba(47,99,212,.4)}
.methods svg{width:22px;height:22px;color:var(--blue);flex:none}
.methods span{display:flex;flex-direction:column;text-align:left;font-size:.88rem;color:var(--muted)}
.methods strong{color:var(--navy);font-size:.95rem}
.contact-page .form{box-shadow:var(--shadow-lg)}
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:2.2rem auto 0;list-style:none}
.next-steps li{display:flex;gap:12px;align-items:flex-start;text-align:left}
.next-steps b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-size:.9rem}
.next-steps span{display:flex;flex-direction:column;font-size:.9rem;color:var(--muted)}
.next-steps strong{color:var(--navy)}

/* medicine page */
.tier .ic .num{font-family:var(--serif);font-weight:700;font-size:1.3rem}
.chips.big{gap:10px;margin-top:0}
.chips.big li{font-size:1rem;padding:10px 20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}

/* about page */
.statement{max-width:52rem;margin:0 auto;text-align:center;font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.25;color:var(--navy)}
.statement em{font-weight:500;color:var(--blue)}
.tutor-quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:0 auto}
.tq{margin:0;padding:30px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.tq blockquote{margin:0;max-width:none;text-align:left}
.tq blockquote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.25rem;line-height:1.45;color:var(--navy)}
.tq blockquote p::before{content:"\201C";display:inline;font-size:1em;margin:0;color:var(--navy)}
.tq blockquote p::after{content:"\201D"}
.tq figcaption{display:flex;flex-direction:column;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.tq figcaption strong{color:var(--navy);font-size:.95rem}

/* faq page filter */
details[hidden]{display:none}

/* privacy outline */
.draft-note{max-width:820px;margin:0 auto 2rem;padding:16px 20px;border-radius:14px;background:#fff8e6;border:1px solid #f1d58a;color:#6b5000;font-size:.95rem}
.legal-block{max-width:820px;margin:0 auto 1.6rem;padding:26px 28px;border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.legal-block h2{font-family:var(--serif);font-size:1.6rem;color:var(--navy);margin-bottom:.8rem}
.legal-block ol{padding-left:1.2rem;display:grid;gap:6px;color:var(--muted)}
.legal a{color:inherit}

@media (max-width:760px){
  .next-steps{grid-template-columns:1fr;max-width:420px}
  .tutor-quotes{grid-template-columns:1fr}
  .methods{flex-direction:column;align-items:stretch;max-width:420px}
}

/* ---------- level pages + linked subject cards ---------- */
.ph-primary{--img:url(../images/primary-hero.jpg)}
.ph-gcse{--img:url(../images/gcse-hero.jpg)}
.ph-alevel{--img:url(../images/alevel-hero.jpg)}
#cover .tiers{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:1100px}
#cover .tier .ic .num{font-size:1.05rem}
.card-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:1.1rem;font-size:.88rem;font-weight:600;color:var(--blue);text-decoration:none}
.card-link svg{width:14px;height:14px;transition:transform .3s}
.card-link::before{content:"";position:absolute;inset:-400px -400px;z-index:0}
.tier{isolation:isolate}
.tier.tilt:hover .card-link{color:#fff}
.tier:hover .card-link svg{transform:translateX(4px)}
.tier .card-link::before{inset:auto}
.tier:has(.card-link){cursor:pointer}
/* eight nav links: tighten before the menu button takes over */
@media (max-width:1240px){.nav-links{gap:18px;font-size:.84rem}.side{gap:18px}}
@media (max-width:1100px){.nav-links{gap:13px;font-size:.8rem}.side{gap:12px}.side .pill:not(.solid){padding:0 12px}}
@media (max-width:1060px){.side .pill:not(.solid) svg + *{display:none}}

/* ---------- mobile audit fixes (26-09) ---------- */
@media (max-width:600px){
  .tag{font-size:.76rem;letter-spacing:.16em}
}
@media (pointer:coarse){
  .card-link{min-height:44px;padding:0 6px}
  .hero-tp{min-height:44px}
}
/* the menu scrolls instead of clipping on short phones */
@media (max-width:940px){
  .drawer{justify-content:flex-start;overflow-y:auto;padding:max(24px,calc((100svh - var(--nav-h) - 640px)/2)) 16px 32px;gap:14px}
  .drawer a{min-height:44px;display:flex;align-items:center}
}
@media (max-width:940px) and (max-height:700px){
  .drawer a{font-size:1.35rem}
  .drawer{gap:4px}
}

.send-error{margin-top:12px;padding:10px 12px;border-radius:12px;background:#fff4f4;color:#b43c3c;font-size:.9rem}