/* =========================================================================
   Maths & Science Tutor
   Aesthetic: squared exercise book + chalkboard.
   Warm cream paper with faint graph ruling, deep pine chalkboard bands,
   red-pen vermilion accent. Fraunces headings / Karla body / DM Mono labels.
   ========================================================================= */

:root{
  /* paper */
  --paper:      #F6F2E9;
  --paper-2:    #FDFBF5;
  --paper-3:    #EFE9DC;
  /* ink */
  --ink:        #16241F;
  --ink-2:      #3B4C45;
  --ink-3:      #6C7B74;
  /* chalkboard */
  --pine:       #0E1D18;
  --pine-2:     #163028;
  --chalk:      #E9F0EA;
  --chalk-2:    #A9BDB4;
  /* accents */
  --pen:        #C0442C;
  --pen-2:      #A6371F;
  --pen-light:  #E5836A;
  --ochre:      #B98328;
  --moss:       #3E6B4A;
  --wa:         #128C7E;
  --wa-2:       #0B6B60;
  --wa-light:   #25D366;

  /* subject tints (desaturated to sit inside the palette) */
  --t-blue:     #2F5B76;
  --t-purple:   #6A4A6C;
  --t-green:    #3E6B4A;
  --t-orange:   #A9702A;

  --line:       rgba(22,36,31,.14);
  --line-soft:  rgba(22,36,31,.08);
  --rule:       rgba(22,36,31,.055);
  --rule-dark:  rgba(233,240,234,.055);

  --sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow:    0 1px 0 rgba(255,255,255,.65) inset, 0 22px 48px -34px rgba(22,36,31,.55);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.7) inset, 0 44px 80px -46px rgba(22,36,31,.6);

  --pad: clamp(3.75rem, 8vw, 7.5rem);
  --ease: cubic-bezier(.22,.75,.28,1);
}

*,*::before,*::after{box-sizing:border-box}

[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6.5rem;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper grain, fixed so it never repaints on scroll */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9000;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--pen);
  outline-offset:3px;
  border-radius:3px;
}
.dark :focus-visible,.contact-section :focus-visible,footer :focus-visible{outline-color:var(--pen-light)}

::selection{background:rgba(192,68,44,.18)}

.container{
  width:min(1180px,100% - clamp(1.5rem,5vw,3rem));
  margin-inline:auto;
}

/* ---------- typography ------------------------------------------------- */

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,1.6rem + 4.4vw,4.6rem);letter-spacing:-.032em}
h2{font-size:clamp(1.95rem,1.35rem + 2.4vw,3.05rem);letter-spacing:-.026em}
h3{font-size:clamp(1.2rem,1.1rem + .35vw,1.4rem);line-height:1.2}
p{margin:0}

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--pen);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px;
  background:currentColor; opacity:.55; flex:none;
}
.eyebrow.light{color:var(--pen-light)}

.section{
  position:relative;
  padding-block:var(--pad);
}
.section-intro{
  max-width:44ch;
  margin:0 auto clamp(2.75rem,5vw,4.25rem);
  text-align:center;
}
.section-intro.left{text-align:left;margin-inline:0}
.section-intro .eyebrow::before{display:none}
.section-intro.left .eyebrow::before{display:block}
.section-intro p{
  margin-top:1.1rem;
  color:var(--ink-2);
  font-size:1.05rem;
}
.section-intro h2{max-width:22ch;margin-inline:auto}
.section-intro.left h2{margin-inline:0}

/* graph-paper ruling, faded at the edges */
.paper-rule::before,
.hero::before,
.pricing-bg::before,
.faq-section::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 84%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 84%,transparent);
}
.hero>.container,
.pricing-bg>.container,
.faq-section>.container{position:relative;z-index:2}

/* ---------- buttons ---------------------------------------------------- */

.btn{
  --btn-shift:0px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem;
  border:1px solid transparent;
  border-radius:100px;
  font-family:var(--sans);
  font-weight:600;
  font-size:.97rem;
  letter-spacing:-.005em;
  cursor:pointer;
  white-space:nowrap;
  transform:translateY(var(--btn-shift));
  transition:transform .28s var(--ease), background-color .25s, color .25s,
             border-color .25s, box-shadow .28s var(--ease);
}
.btn span{transition:transform .3s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.btn:active{--btn-shift:0px}

.btn.primary{
  background:var(--pen);
  color:#FFF8F1;
  box-shadow:0 14px 26px -16px rgba(166,55,31,.7);
}
.btn.primary:hover{background:var(--pen-2);--btn-shift:-2px;box-shadow:0 20px 32px -16px rgba(166,55,31,.62)}

.btn.ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn.ghost:hover{border-color:var(--ink);background:rgba(22,36,31,.035);--btn-shift:-2px}
.btn.full{width:100%}

/* ---------- announcement ---------------------------------------------- */

.announcement{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; flex-wrap:wrap;
  padding:.6rem 1.25rem;
  background:var(--pine);
  color:var(--chalk-2);
  font-size:.83rem;
  letter-spacing:.005em;
  text-align:center;
}
.ann-icon{width:13px;height:13px;color:var(--pen-light);flex:none}
.ann-icon path{
  animation:slowspin 26s linear infinite;
  transform-box:view-box;
  transform-origin:center;
}
@keyframes slowspin{to{transform:rotate(360deg)}}
.announcement a{
  color:var(--chalk);
  font-weight:600;
  border-bottom:1px solid rgba(233,240,234,.35);
  padding-bottom:1px;
  transition:color .2s,border-color .2s;
}
.announcement a:hover{color:#fff;border-color:var(--pen-light)}

/* ---------- header ----------------------------------------------------- */

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,242,233,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background-color .3s;
}
.header.is-scrolled{
  border-bottom-color:var(--line-soft);
  box-shadow:0 12px 30px -26px rgba(22,36,31,.6);
}
.nav{
  display:flex; align-items:center; gap:1.5rem;
  min-height:4.6rem;
}

.brand{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--serif);
  font-size:1.06rem;
  font-weight:500;
  letter-spacing:-.02em;
  margin-right:auto;
}
.brand b{font-weight:700}
.brand-mark{
  display:grid; place-items:center;
  width:2.3rem; height:2.3rem;
  border-radius:10px;
  background:var(--pine);
  color:var(--paper);
  flex:none;
  transition:transform .4s var(--ease);
}
.brand-mark span{
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1;
  transform:translateY(1px);
}
.brand:hover .brand-mark{transform:rotate(-7deg)}

.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links>a:not(.nav-button){
  position:relative;
  padding:.5rem .8rem;
  font-size:.93rem;
  font-weight:500;
  color:var(--ink-2);
  transition:color .2s;
}
.nav-links>a:not(.nav-button)::after{
  content:"";
  position:absolute; left:.8rem; right:.8rem; bottom:.28rem;
  height:1.5px;
  background:var(--pen);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links>a:not(.nav-button):hover{color:var(--ink)}
.nav-links>a:not(.nav-button):hover::after,
.nav-links>a.active::after{transform:scaleX(1)}
.nav-links>a.active{color:var(--ink);font-weight:600}

.nav-button{
  margin-left:.7rem;
  padding:.68rem 1.15rem;
  border-radius:100px;
  background:var(--pine);
  color:var(--paper);
  font-size:.9rem;
  font-weight:600;
  transition:background-color .25s, transform .25s var(--ease);
}
.nav-button:hover{background:var(--pen);transform:translateY(-2px)}

.menu-toggle{
  display:none;
  width:2.7rem; height:2.7rem;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}
.menu-toggle svg{width:1.35rem;height:1.35rem;margin:auto}
.menu-toggle path{
  transition:transform .32s var(--ease), opacity .2s;
  transform-box:fill-box;
  transform-origin:center;
}

/* ---------- hero ------------------------------------------------------- */

.hero{
  position:relative;
  padding-block:clamp(3.5rem,7vw,6.5rem) clamp(4rem,8vw,7rem);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;
  gap:clamp(2.5rem,5vw,4.5rem);
}

/* compass-and-protractor geometry rather than neon blobs */
.hero-orb{position:absolute;pointer-events:none;z-index:1}
.orb-one{
  width:min(46rem,80vw); aspect-ratio:1;
  top:-16%; right:-16%;
  border:1px dashed rgba(22,36,31,.13);
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(192,68,44,.055), transparent 62%);
  animation:slowspin 90s linear infinite;
}
.orb-two{
  width:min(20rem,50vw); aspect-ratio:1;
  bottom:-6rem; left:-7rem;
  background-image:radial-gradient(rgba(22,36,31,.16) 1.1px, transparent 1.1px);
  background-size:15px 15px;
  transform:rotate(-11deg);
  -webkit-mask-image:radial-gradient(circle at 60% 40%,#000,transparent 68%);
          mask-image:radial-gradient(circle at 60% 40%,#000,transparent 68%);
}

.pill{
  display:inline-block;
  padding:.42rem .95rem;
  border:1px solid rgba(192,68,44,.35);
  border-radius:100px;
  background:rgba(192,68,44,.06);
  color:var(--pen);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1.6rem;
}

.hero-copy h1{margin-bottom:1.5rem}
/* hand-drawn pen underline under the emphasised word */
.hero-copy h1 span{
  position:relative;
  font-style:italic;
  color:var(--pen);
  white-space:nowrap;
}
.hero-copy h1 span::after{
  content:"";
  position:absolute; left:-.04em; right:.06em; bottom:.02em;
  height:.38em;
  background:
    radial-gradient(closest-side at 50% 118%, transparent 61%, var(--pen) 62%, var(--pen) 69%, transparent 70%);
  opacity:.5;
  transform:scaleX(0);
  transform-origin:left;
  animation:draw 1.05s .55s var(--ease) forwards;
}
@keyframes draw{to{transform:scaleX(1)}}

.hero-copy>p{
  max-width:52ch;
  font-size:clamp(1.06rem,1rem + .28vw,1.2rem);
  color:var(--ink-2);
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin:2.1rem 0 2.9rem;
}

.hero-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
  padding-top:1.9rem;
  border-top:1px solid var(--line-soft);
  max-width:34rem;
}
.hero-proof div+div{padding-left:1.4rem;border-left:1px solid var(--line-soft)}
.hero-proof strong{
  display:block;
  font-family:var(--serif);
  font-size:1.32rem;
  font-weight:600;
  letter-spacing:-.02em;
}
.hero-proof small{
  display:block;
  margin-top:.15rem;
  font-size:.83rem;
  line-height:1.45;
  color:var(--ink-3);
}

/* live-lesson mock */
.hero-visual{position:relative;z-index:2}
.lesson-window{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper-2);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:rotate(-1.1deg);
}
.window-head{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.15rem;
  background:var(--pine);
  color:var(--chalk-2);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.window-dots{display:flex;gap:.32rem}
.window-dots i{width:8px;height:8px;border-radius:50%;background:rgba(233,240,234,.22)}
.window-dots i:first-child{background:var(--pen-light)}
.window-head span{margin-right:auto}
.window-head b{
  width:8px; height:8px; border-radius:50%;
  background:var(--pen-light);
  box-shadow:0 0 0 0 rgba(229,131,106,.6);
  animation:blip 2.4s ease-out infinite;
  flex:none;
}
@keyframes blip{
  0%{box-shadow:0 0 0 0 rgba(229,131,106,.55)}
  70%,100%{box-shadow:0 0 0 11px rgba(229,131,106,0)}
}

.lesson-body{padding:clamp(1.5rem,3vw,2.1rem)}
.topic-label{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.equation{
  margin-top:.9rem;
  font-family:var(--mono);
  font-size:clamp(1.7rem,1.2rem + 1.7vw,2.35rem);
  letter-spacing:-.02em;
  line-height:1.15;
}
.factor{
  margin-top:.3rem;
  font-family:var(--mono);
  font-size:clamp(1.15rem,.95rem + .8vw,1.5rem);
  color:var(--ink-3);
}
.factor span{
  color:var(--pen);
  border-bottom:2px solid rgba(192,68,44,.28);
  padding-bottom:2px;
}
.question{
  margin-top:1.5rem;
  padding-top:1.3rem;
  border-top:1px dashed var(--line);
  font-size:.97rem;
  color:var(--ink-2);
}
.answer{
  display:inline-block;
  margin-top:.85rem;
  padding:.42rem .85rem;
  border-radius:100px;
  background:rgba(62,107,74,.1);
  color:var(--moss);
  font-size:.85rem;
  font-weight:600;
}
.lesson-progress{
  margin-top:1.75rem;
  height:6px;
  border-radius:100px;
  background:var(--paper-3);
  overflow:hidden;
}
.lesson-progress span{
  display:block;
  width:82%;
  height:100%;
  border-radius:100px;
  background:linear-gradient(90deg,var(--pen),var(--ochre));
  transform:scaleX(0);
  transform-origin:left;
  animation:draw 1.4s .7s var(--ease) forwards;
}
.lesson-body small{
  display:block;
  margin-top:.6rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.lesson-body small b{color:var(--ink)}

.floating-chip{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:.65rem;
  padding:.7rem .95rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper-2);
  box-shadow:var(--shadow);
  font-size:.83rem;
  font-weight:600;
  white-space:nowrap;
}
.chip-top{
  top:-1.1rem; right:-.9rem;
  color:var(--moss);
  transform:rotate(2.6deg);
  animation:bobA 7s ease-in-out infinite;
}
.chip-bottom{
  bottom:-1.5rem; left:-1.4rem;
  transform:rotate(-2.2deg);
  animation:bobB 8.5s ease-in-out infinite;
}
@keyframes bobA{50%{transform:rotate(2.6deg) translateY(-9px)}}
@keyframes bobB{50%{transform:rotate(-2.2deg) translateY(7px)}}
.chip-bottom b{display:block;font-size:.85rem;line-height:1.25}
.chip-bottom small{display:block;font-size:.72rem;font-weight:400;color:var(--ink-3)}
.mini-avatar{
  display:grid; place-items:center;
  width:2rem; height:2rem;
  border-radius:50%;
  background:var(--t-blue);
  color:#fff;
  font-family:var(--mono);
  font-size:.78rem;
  flex:none;
}

/* ---------- keystage strip -------------------------------------------- */

.logo-strip{
  border-block:1px solid var(--line-soft);
  background:var(--paper-3);
}
.logo-strip .container{
  display:flex; align-items:center;
  gap:clamp(1.1rem,3vw,2.6rem);
  padding-block:1.15rem;
  overflow-x:auto;
  scrollbar-width:none;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
}
.logo-strip .container::-webkit-scrollbar{display:none}
.logo-strip span{color:var(--ink-3);flex:none}
.logo-strip b{
  font-weight:500;
  color:var(--ink);
  flex:none;
  transition:color .2s;
}
.logo-strip b:hover{color:var(--pen)}

/* ---------- subject cards ---------------------------------------------- */

.cards.four{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.subject-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,2.4vw,1.9rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:var(--paper-2);
  box-shadow:0 20px 44px -40px rgba(22,36,31,.7);
  transition:opacity .7s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.subject-card:hover{
  transform:translateY(-6px);
  border-color:var(--line);
  box-shadow:0 34px 60px -40px rgba(22,36,31,.55);
}
/* stagger the row so it never reads as identical cards in a line */
@media (min-width:64rem){
  .cards.four>:nth-child(even){margin-top:2.4rem}
}

.subject-icon{
  display:grid; place-items:center;
  width:3rem; height:3rem;
  margin-bottom:1.25rem;
  border:1px solid currentColor;
  border-radius:12px;
  background:transparent;
  background:color-mix(in srgb, currentColor 8%, transparent);
  transition:transform .4s var(--ease);
}
.subject-icon svg{width:1.45rem;height:1.45rem}
.subject-card:hover .subject-icon{transform:rotate(-6deg) scale(1.04)}
.subject-icon.blue{color:var(--t-blue)}
.subject-icon.purple{color:var(--t-purple)}
.subject-icon.green{color:var(--t-green)}
.subject-icon.orange{color:var(--t-orange)}

.subject-card h3{margin-bottom:.6rem}
.subject-card>p{color:var(--ink-2);font-size:.95rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:1.1rem 0}
.tags span{
  padding:.2rem .58rem;
  border:1px solid var(--line);
  border-radius:100px;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.1em;
  color:var(--ink-3);
}
.subject-card ul{
  margin:0; padding:1.15rem 0 0;
  list-style:none;
  border-top:1px dashed var(--line);
  display:grid; gap:.55rem;
  font-size:.9rem;
  color:var(--ink-2);
}
.subject-card li{position:relative;padding-left:1.15rem}
.subject-card li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:5px; height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.4;
}

/* ---------- chalkboard band -------------------------------------------- */

.section.dark{
  background:var(--pine);
  color:var(--chalk);
  overflow:hidden;
}
.section.dark::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--rule-dark) 1px,transparent 1px),
    linear-gradient(to bottom,var(--rule-dark) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 15% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 90% at 15% 0%,#000,transparent 72%);
}
.section.dark>.container{position:relative;z-index:2}

.approach-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  align-items:start;
  gap:clamp(2.5rem,5vw,5rem);
}
.approach-copy h2{margin-bottom:1.15rem}
.approach-copy>p{
  color:var(--chalk-2);
  max-width:46ch;
  font-size:1.05rem;
}

.check-list{display:grid;gap:.1rem;margin-top:2.5rem}
.check-list>div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.2rem;
  align-items:start;
  padding:1.15rem .4rem;
  border-top:1px solid rgba(233,240,234,.11);
  transition:padding-left .35s var(--ease), background-color .35s;
}
.check-list>div:last-child{border-bottom:1px solid rgba(233,240,234,.11)}
.check-list>div:hover{padding-left:1rem;background:rgba(233,240,234,.03)}
.check-list b{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--pen-light);
  padding-top:.22rem;
}
.check-list strong{
  display:block;
  font-family:var(--serif);
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:-.015em;
  margin-bottom:.15rem;
}
.check-list span{font-size:.93rem;color:var(--chalk-2);line-height:1.55}

/* progress dashboard */
.dashboard{
  padding:clamp(1.6rem,2.6vw,2.1rem);
  border:1px solid rgba(233,240,234,.14);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(233,240,234,.075),rgba(233,240,234,.025));
  box-shadow:0 44px 80px -50px #000;
  transform:rotate(.9deg);
  transition:opacity .8s var(--ease);
}
.dash-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding-bottom:1.15rem;
  border-bottom:1px solid rgba(233,240,234,.12);
  font-size:.93rem;
}
.dash-head b{font-weight:600}
.dash-head span{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--pen-light);
}
.score{display:flex;align-items:baseline;gap:.85rem;padding:1.5rem 0}
.score strong{
  font-family:var(--serif);
  font-size:clamp(2.6rem,2rem + 2vw,3.4rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
}
.score span{font-size:.87rem;color:var(--chalk-2);max-width:11ch;line-height:1.35}

.bar-list{display:grid;gap:1.15rem}
.bar-list>div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.25rem .75rem;
}
.bar-list span{font-size:.88rem;color:var(--chalk-2)}
.bar-list b{
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:400;
}
.bar-list i{
  grid-column:1/-1;
  height:5px;
  border-radius:100px;
  background:rgba(233,240,234,.12);
  overflow:hidden;
}
.bar-list em{
  display:block;
  height:100%;
  border-radius:100px;
  background:linear-gradient(90deg,var(--pen-light),var(--ochre));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.15s var(--ease);
}
.dashboard.in .bar-list em{transform:scaleX(1)}
.bar-list>div:nth-child(2) em{transition-delay:.1s}
.bar-list>div:nth-child(3) em{transition-delay:.2s}
.bar-list>div:nth-child(4) em{transition-delay:.3s}

.dash-note{
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px dashed rgba(233,240,234,.15);
  font-size:.83rem;
  color:var(--chalk-2);
}

/* ---------- benefits + testimonials ----------------------------------- */

.benefits{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
  gap:clamp(1.4rem,3vw,2.2rem);
  margin-bottom:clamp(3.5rem,6vw,5.5rem);
}
.benefits>div{
  padding-top:1.3rem;
  border-top:2px solid var(--ink);
}
/* gentle diagonal stair — breaks the grid without losing alignment */
@media (min-width:60rem){
  .benefits>:nth-child(2){margin-top:1.5rem}
  .benefits>:nth-child(3){margin-top:3rem}
  .benefits>:nth-child(4){margin-top:4.5rem}
}
.benefits span{
  display:block;
  font-family:var(--serif);
  font-size:.9rem;
  font-weight:600;
  color:var(--pen);
  margin-bottom:.7rem;
  letter-spacing:.04em;
}
.benefits h3{margin-bottom:.5rem}
.benefits p{font-size:.93rem;color:var(--ink-2)}

.testimonials{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1.1rem,2vw,1.6rem);
}
.testimonials article{
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,2.4vw,1.9rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:var(--paper-2);
  box-shadow:0 24px 46px -42px rgba(22,36,31,.7);
  transition:opacity .7s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testimonials article:nth-child(2){transform:rotate(-.7deg)}
.testimonials article:nth-child(3){transform:rotate(.6deg)}
.testimonials article:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 36px 60px -40px rgba(22,36,31,.5)}
@media (min-width:60rem){
  .testimonials article:nth-child(2){margin-top:1.8rem}
}
.stars{color:var(--ochre);letter-spacing:.16em;font-size:.85rem}
.testimonials p{
  margin:1.05rem 0 1.6rem;
  font-family:var(--serif);
  font-size:1.06rem;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.012em;
  text-wrap:pretty;
}
.person{
  display:flex; align-items:center; gap:.8rem;
  margin-top:auto;
  padding-top:1.25rem;
  border-top:1px dashed var(--line);
}
.person>span{
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem;
  border-radius:50%;
  background:var(--pine);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.04em;
  flex:none;
}
.person b{display:block;font-size:.9rem}
.person small{display:block;font-size:.78rem;color:var(--ink-3)}

.disclaimer,.price-note{
  margin-top:2.25rem;
  font-size:.79rem;
  line-height:1.55;
  color:var(--ink-3);
  text-align:center;
  max-width:56ch;
  margin-inline:auto;
}

/* ---------- pricing ---------------------------------------------------- */

.pricing-bg{
  position:relative;
  background:var(--paper-3);
  overflow:hidden;
}
.pricing{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(1.1rem,2vw,1.5rem);
  align-items:start;
}
.price-card{
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,2.6vw,2.1rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:var(--paper-2);
  transition:opacity .7s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.price-card:hover{transform:translateY(-5px)}
.price-card h3{margin-bottom:.5rem}
.price-card>p{font-size:.92rem;color:var(--ink-2);min-height:2.9em}

.price-card.featured{
  position:relative;
  border-color:var(--ink);
  background:var(--paper-2);
  /* printed offset shadow — the one card that reads as pinned to the page */
  box-shadow:12px 12px 0 -1px rgba(192,68,44,.16);
}
@media (min-width:60rem){
  .price-card.featured{margin-top:-1.4rem;padding-block:2.6rem}
}
.popular{
  position:absolute; top:-.7rem; left:clamp(1.6rem,2.6vw,2.1rem);
  padding:.25rem .7rem;
  border-radius:100px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.61rem;
  letter-spacing:.15em;
}
.price{
  display:flex; align-items:baseline; gap:.35rem;
  margin:1.4rem 0 1.5rem;
  font-family:var(--serif);
  font-size:clamp(2.4rem,1.9rem + 1.8vw,3.1rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
}
.price small{
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--ink-3);
}
.price.custom{font-style:italic}
.price-card ul{
  margin:1.6rem 0 0; padding:1.4rem 0 0;
  list-style:none;
  border-top:1px dashed var(--line);
  display:grid; gap:.6rem;
  font-size:.91rem;
  color:var(--ink-2);
}
.price-card li{position:relative;padding-left:1.5rem}
.price-card li::before{
  content:"";
  position:absolute; left:.15rem; top:.52em;
  width:.5rem; height:.28rem;
  border-left:1.6px solid var(--pen);
  border-bottom:1.6px solid var(--pen);
  transform:rotate(-45deg);
}

/* ---------- consultation banner --------------------------------------- */

.booking-banner{padding-block:0 var(--pad)}
.banner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(1.6rem,4vw,3rem);
  padding:clamp(2rem,4vw,3.2rem);
  border-radius:var(--r-xl);
  background:var(--pen);
  color:#FFF6F0;
  overflow:hidden;
}
.banner::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(-52deg,rgba(255,255,255,.08) 0 1px,transparent 1px 15px);
}
.banner>div{position:relative;z-index:1}
.banner .eyebrow{color:rgba(255,246,240,.72)}
.banner h2{margin-bottom:.8rem}
.banner p{max-width:48ch;color:rgba(255,246,240,.86)}
.banner .btn.primary{
  position:relative; z-index:1;
  background:#FFF8F1;
  color:var(--pen-2);
  box-shadow:0 16px 30px -18px rgba(0,0,0,.5);
}
.banner .btn.primary:hover{background:#fff;color:var(--pen-2)}

/* ---------- faq -------------------------------------------------------- */

.faq-section{position:relative;overflow:hidden}
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(2.25rem,5vw,4.5rem);
  align-items:start;
}
.faq-grid .section-intro{margin-bottom:0}
@media (min-width:60rem){
  .faq-grid .section-intro{position:sticky;top:8rem}
}
.faq{display:grid}
.faq details{
  border-top:1px solid var(--line);
  overflow:hidden;
}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem;
  padding:1.3rem .25rem;
  cursor:pointer;
  list-style:none;
  font-family:var(--serif);
  font-size:1.06rem;
  font-weight:600;
  letter-spacing:-.015em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pen)}
.faq summary span{
  display:grid; place-items:center;
  width:1.7rem; height:1.7rem;
  border:1px solid var(--line);
  border-radius:50%;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:400;
  line-height:1;
  color:var(--ink-2);
  flex:none;
  transition:transform .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.faq summary:hover span{border-color:var(--pen);color:var(--pen)}
.faq details[open] summary{color:var(--pen)}
.faq details[open] summary span{
  transform:rotate(135deg);
  background:var(--pen);
  border-color:var(--pen);
  color:#fff;
}
.faq details p{
  margin:0;
  padding:0 3rem 1.5rem .25rem;
  font-size:.96rem;
  color:var(--ink-2);
  animation:fadeUp .4s var(--ease) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}}

/* ---------- contact --------------------------------------------------- */

.contact-section{
  position:relative;
  padding-block:var(--pad);
  background:var(--pine);
  color:var(--chalk);
  overflow:hidden;
}
.contact-section::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 55% at 85% 12%, rgba(192,68,44,.16), transparent 70%),
    radial-gradient(50% 50% at 5% 90%, rgba(185,131,40,.1), transparent 70%);
}
.contact-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(2.5rem,5vw,4.5rem);
}
.contact-copy h2{margin-bottom:1.1rem}
.contact-copy>p{color:var(--chalk-2);max-width:40ch}
.contact-points{display:grid;gap:.6rem;margin:2rem 0}
.contact-points span{font-size:.93rem;color:var(--chalk-2)}
.email-line{
  display:flex; align-items:center; gap:.6rem;
  margin-top:2rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(233,240,234,.13);
  font-family:var(--mono);
  font-size:.86rem;
  word-break:break-word;
}
.email-line svg{width:1.05rem;height:1.05rem;color:var(--pen-light);flex:none}
.whatsapp-line .wa-icon{color:var(--wa-light)}
.email-line a{border-bottom:1px solid rgba(233,240,234,.28);transition:color .2s,border-color .2s}
.email-line a:hover{color:#fff;border-color:var(--pen-light)}

/* the form sits on paper — highest legibility where it matters most */
.booking-form{
  display:grid; gap:1.15rem;
  padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:var(--r-xl);
  background:var(--paper-2);
  color:var(--ink);
  box-shadow:0 50px 90px -50px #000;
}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.booking-form label{
  display:grid; gap:.45rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.booking-form input,
.booking-form select,
.booking-form textarea{
  width:100%;
  padding:.8rem .95rem;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.97rem;
  letter-spacing:0;
  text-transform:none;
  transition:border-color .22s, box-shadow .22s, background-color .22s;
}
.booking-form textarea{min-height:7.5rem;resize:vertical;line-height:1.55}
.booking-form select{
  appearance:none;
  cursor:pointer;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7B74' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .85rem center;
  background-size:1rem;
}
.booking-form ::placeholder{color:var(--ink-3);opacity:.75}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
  outline:none;
  border-color:var(--pen);
  box-shadow:0 0 0 3px rgba(192,68,44,.13);
  background:var(--paper-2);
}
.booking-form :is(input,select,textarea)[aria-invalid="true"]{
  border-color:var(--pen);
  background:rgba(192,68,44,.045);
}
.booking-form .btn{margin-top:.35rem}

/* direct WhatsApp handoff, revealed once the enquiry validates */
.whatsapp-cta{
  background:var(--wa);
  color:#F2FBF8;
  box-shadow:0 14px 26px -16px rgba(11,107,96,.75);
  animation:ctaIn .45s var(--ease);
}
.whatsapp-cta:hover{background:var(--wa-2);--btn-shift:-2px;box-shadow:0 20px 32px -16px rgba(11,107,96,.65)}
.wa-icon{width:1.15rem;height:1.15rem;flex:none}
@keyframes ctaIn{from{opacity:0;transform:translateY(6px) scale(.98)}}

.form-message{
  min-height:1.2rem;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.form-message.is-error{color:var(--pen)}
.form-message.is-ok{color:var(--moss)}
.privacy-note{
  font-size:.76rem;
  line-height:1.55;
  color:var(--ink-3);
}

/* ---------- footer ----------------------------------------------------- */

footer{
  background:#0A1512;
  color:var(--chalk-2);
  font-size:.9rem;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(2.25rem,5vw,5rem);
  padding-block:clamp(3rem,5vw,4.5rem);
}
.footer-brand{color:var(--chalk);margin-bottom:1rem;font-size:1.06rem}
.footer-brand .brand-mark{background:rgba(233,240,234,.08);color:var(--chalk)}
.footer-top>div>p{max-width:34ch;line-height:1.6}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(8rem,1fr));
  gap:2.5rem;
}
.footer-cols div{display:grid;align-content:start;gap:.55rem}
.footer-cols b{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--chalk);
  margin-bottom:.35rem;
}
.footer-cols a{
  width:fit-content;
  color:var(--chalk-2);
  transition:color .2s, transform .25s var(--ease);
}
.footer-cols a:hover{color:var(--chalk);transform:translateX(3px)}

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  justify-content:space-between;
  padding-block:1.5rem;
  border-top:1px solid rgba(233,240,234,.1);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:rgba(169,189,180,.72);
}

/* ---------- scroll reveal --------------------------------------------- */

/* The hidden state lives here rather than being applied by JS, so revealed
   elements never paint visible and then flash out. Keep these selector lists in
   sync with `revealTargets` in script.js.

   Elements that carry their own transform (card tilts, hover lifts) are faded
   only — moving them here would clobber that transform. */

.js :is(.subject-card,.price-card,.testimonials article,.dashboard){opacity:0}
.js :is(.subject-card,.price-card,.testimonials article,.dashboard).in{opacity:1}

.js :is(
  .reveal,
  .section-intro,
  .approach-copy,
  .benefits > div,
  .banner,
  .faq details,
  .contact-copy,
  .booking-form,
  .disclaimer,
  .price-note
){
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js :is(
  .reveal,
  .section-intro,
  .approach-copy,
  .benefits > div,
  .banner,
  .faq details,
  .contact-copy,
  .booking-form,
  .disclaimer,
  .price-note
).in{opacity:1;transform:none}

/* ---------- responsive ------------------------------------------------ */

@media (max-width:64rem){
  .hero-grid,
  .approach-grid,
  .contact-grid,
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:34rem;margin-inline:auto;width:100%}
  .dashboard{transform:none}
  .banner{grid-template-columns:minmax(0,1fr);text-align:left}
  .banner .btn{justify-self:start}
  .footer-top{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:56rem){
  .menu-toggle{display:grid;place-items:center}

  .nav-links{
    position:fixed;
    inset:auto 0 0;
    top:var(--nav-top,4.6rem);
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    padding:1.5rem clamp(1.25rem,5vw,2rem) 2.5rem;
    background:var(--paper);
    border-top:1px solid var(--line-soft);
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-1rem);
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .nav-links{opacity:1;visibility:visible;transform:none}

  .nav-links>a:not(.nav-button){
    padding:.9rem .25rem;
    border-bottom:1px solid var(--line-soft);
    font-size:1.05rem;
    font-family:var(--serif);
    font-weight:500;
  }
  .nav-links>a:not(.nav-button)::after{display:none}
  .nav-button{margin:1.25rem 0 0;text-align:center;padding:.95rem 1.15rem}

  .menu-toggle[aria-expanded="true"] .bar-a{transform:translateY(4.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .bar-b{opacity:0}
  .menu-toggle[aria-expanded="true"] .bar-c{transform:translateY(-4.5px) rotate(-45deg)}
}

@media (max-width:40rem){
  :root{--pad:3.5rem}
  .hero{padding-top:2.5rem}
  .hero-proof{grid-template-columns:minmax(0,1fr);gap:1rem}
  .hero-proof div+div{padding-left:0;border-left:0;padding-top:1rem;border-top:1px solid var(--line-soft)}
  .hero-actions .btn{width:100%}
  .chip-top{top:-.75rem;right:-.35rem;padding:.55rem .75rem;font-size:.76rem}
  .chip-bottom{bottom:-1rem;left:-.35rem;padding:.55rem .75rem;font-size:.76rem}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .footer-cols{grid-template-columns:minmax(0,1fr);gap:2rem}
  .footer-bottom{flex-direction:column}
  .faq details p{padding-right:1rem}
  .cards.four>:nth-child(even){margin-top:0}
  .price-card.featured{margin-top:.6rem}
}

/* ---------- preferences ----------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js :is(.reveal,.section-intro,.approach-copy,.benefits > div,.banner,.faq details,.contact-copy,.booking-form,.disclaimer,.price-note,.subject-card,.price-card,.testimonials article,.dashboard){opacity:1}
  .js :is(.reveal,.section-intro,.approach-copy,.benefits > div,.banner,.faq details,.contact-copy,.booking-form,.disclaimer,.price-note){transform:none}
  .hero-copy h1 span::after,
  .lesson-progress span,
  .dashboard .bar-list em{transform:none}
}

@media print{
  .announcement,.header,.hero-orb,.floating-chip,.booking-form,footer{display:none}
  body{background:#fff;color:#000}
  body::after{display:none}

  /* Un-hide reveal targets: below-fold elements never receive `.in`, so without
     this the printed page drops whole sections. */
  .js :is(.reveal,.section-intro,.approach-copy,.benefits > div,.banner,.faq details,.contact-copy,.booking-form,.disclaimer,.price-note,.subject-card,.price-card,.testimonials article,.dashboard){opacity:1 !important;transform:none !important}

  /* Drop the chalkboard fills so printing stays legible and cheap. */
  .section.dark,.contact-section,.pricing-bg,.logo-strip{background:#fff;color:#000}
  .section.dark::before,.contact-section::before,.hero::before,
  .pricing-bg::before,.faq-section::before{display:none}
  .banner{background:#fff;color:#000;border:1px solid #999}
  .banner::before{display:none}
  .approach-copy>p,.contact-copy>p,.check-list span,.bar-list span,
  .score span,.dash-note,.email-line{color:#333}
  .dashboard{border-color:#999;background:#fff;transform:none}
  .section,.contact-section{padding-block:1.5rem}
  .faq details{break-inside:avoid}
  .subject-card,.price-card,.testimonials article{break-inside:avoid;box-shadow:none}
}