/* site-2027-tuition.css: 2027 look for the tuition family (body.sj subject pages, body.prg programme pages).
   Loads after site-2026-subject/programme.css and the kit (site-2027.css). Only adds depth; no content changes. */

/* ---- hero: the class finder stands on a navy stage as a tilted floating card with a gold top edge ---- */
.tx-stage{align-self:start;min-width:0}
.tx-obj{color:var(--hx-ink);border-top:3px solid var(--hx-gold);border-radius:4px;background:#fff;overflow:visible}
.tx-obj>.s26-hero-find{margin:0;border-radius:0}
.tx-obj>.s26-hero-find .s26-fx{box-shadow:none}
.sj-hero .tx-stage{margin-bottom:0}
.sj-hero .sj-hero__fig{margin-top:30px}
.prg-hero__grid>.tx-stage--prg{grid-area:find}
.sj-hero,.prg-hero{overflow-x:clip}
.sj-hero{background:#fff}

/* ---- pictures with depth: result screenshots, hero photo, classroom photos ---- */
.sj-vis--screen,.sj-wafigs,.prg-shot,.prg-hero__ph,.prg-pic,.sj-vis--photo,.sj-evid__fig{perspective:1400px}
.sj-vis--screen img,.sj-wafig img,.prg-shot img,.sj-vis--photo img,.sj-hero__fig img,.prg-hero__ph img,.prg-pic{
  border-radius:4px;box-shadow:0 26px 44px -26px rgba(13,31,60,.55),0 2px 0 rgba(255,255,255,.6) inset;
  transform:rotateX(2deg) rotateY(-4deg);transition:transform .5s var(--hx-ease)}
.sj-hero__fig--l img{transform:rotateX(2deg) rotateY(4deg)}
.sj-wafig:nth-child(2) img{transform:rotateX(2deg) rotateY(4deg)}
@media (hover:hover){
  .sj-vis--screen:hover img,.sj-wafig:hover img,.prg-shot:hover img,.sj-vis--photo:hover img,.sj-hero__fig:hover img,.prg-hero__ph:hover img,.prg-pic:hover{transform:none}
}
/* sections that hold tilted things must never cause sideways scrolling */
.sj-sec,.prg-sec{overflow-x:clip}

/* ---- cards: hairline border, 4px corners, depth under the pointer ---- */
.sj-card.hx-lift,.sj-person.hx-lift,.sj-plan.hx-lift,.sj-step.hx-lift,.sj-quote.hx-lift,.sj-res.hx-lift,
.prg-pw.hx-lift,.prg-tile.hx-lift,.prg-t.hx-lift,.prg-ipx__p.hx-lift,.prg-unit.hx-lift,.prg-tt__i.hx-lift,.prg-sr.hx-lift{
  border-radius:4px;box-shadow:0 1px 0 rgba(13,31,60,.04),0 14px 26px -22px rgba(13,31,60,.45)}
.sj-band-navy .hx-lift,.prg-band-navy .hx-lift{box-shadow:0 18px 30px -22px rgba(2,8,22,.7)}

/* ---- reviews band: sits in the page rhythm without a big gap ---- */
.hx-reviews{border-top:1px solid var(--hx-line)}
.prg-main .hx-reviews{margin:0}

/* ---- touch / small screens ---- */
@media (max-width:1023px){
  .sj-hero .tx-stage{order:4;margin-top:30px}
  .prg-hero__grid>.tx-stage--prg{margin-top:30px}
}
@media (max-width:680px){
  .tx-stage.hx-stage--pad{padding:14px}
  .tx-obj{box-shadow:0 20px 30px -20px rgba(2,8,22,.7)}
  .sj-vis--screen img,.sj-wafig img,.prg-shot img,.sj-vis--photo img,.sj-hero__fig img,.prg-hero__ph img,.prg-pic{transform:none}
}
@media (hover:none){
  .sj-vis--screen img,.sj-wafig img,.prg-shot img,.sj-vis--photo img,.sj-hero__fig img,.prg-hero__ph img,.prg-pic{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .sj-vis--screen img,.sj-wafig img,.prg-shot img,.sj-vis--photo img,.sj-hero__fig img,.prg-hero__ph img,.prg-pic{transition:none}
}
.tx-obj .sj-fd-other{margin:0;padding:14px 22px 16px;background:#fff}

/* ---- QA 12 Nov: crisp text on the tilted finder (a smaller tilt; it still straightens on hover and focus) ---- */
.hx-obj.tx-obj{transform:rotateX(calc(1.5deg + var(--hx-rx,0deg))) rotateY(calc(-3.5deg + var(--hx-ry,0deg)))}
@media (max-width:1023px){.hx-obj.tx-obj{transform:rotateX(calc(1deg + var(--hx-rx,0deg))) rotateY(calc(-2deg + var(--hx-ry,0deg)))}}
/* the founder card caption: the template styles every figcaption as italic serif; keep the home page's sans caption */
.hx-founder__cap{margin:0;font:normal 400 14px/1.4 var(--fu,"Instrument Sans",system-ui,sans-serif);color:var(--hx-ink)}
.hx-founder__cap strong{font-style:normal}
/* the Google reviews block and the reviews band read as one block, without a double gap and a rule between */
.sj-reviews:has(+ .hx-reviews){padding-bottom:12px}
.sj-reviews + .hx-reviews{border-top:0;padding-top:28px}
/* founder card on phones: the kit keeps "Founder and lead tutor" on one line and the narrow card cuts it; let it wrap */
@media (max-width:680px){.hx-founder__cap b{white-space:normal;line-height:1.3}}
/* finder header at 1024-1199: the narrow column split "Find your class" one word per line; keep the title whole and let the note drop below */
.tx-obj .s26-fx__h{flex-wrap:wrap;row-gap:4px}
.tx-obj .s26-fx__t{white-space:nowrap}
@media (min-width:1024px) and (max-width:1199px){.tx-stage.hx-stage--pad{padding:24px 22px}}
/* programme pages at 1024-1199: the five-way programme switch needs ~320px; give the finder column a little more room */
@media (min-width:1024px) and (max-width:1199px){.prg-hero__grid{grid-template-columns:minmax(0,1fr) 404px}}
/* hx:intl:start  (written by tools/site2027_intl.py: change it there, then run the script) */
/* ---- international schools block ---- */
.hx-intl{margin-top:clamp(36px,4.4vw,60px)}
.hm-bs .hx-intl{padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--line)}
.hx-intl__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:clamp(28px,4vw,56px);align-items:start}
.hx-intl__eb{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 12px/1.2 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.hx-intl__eb::before{content:"";flex:none;width:28px;height:2px;background:var(--gold)}
.hx-intl__h{margin:0;font:500 clamp(25px,2.5vw,34px)/1.14 var(--fd);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hx-intl__lede{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--ink2)}
.hx-intl__sub{margin:26px 0 0;font:600 17px/1.3 var(--fu);letter-spacing:0;color:var(--ink)}
.hx-intl__pts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.hx-intl__pts li{position:relative;margin:0;padding:0 0 0 22px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.hx-intl__pts li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--gold)}
.hx-intl__pts strong{font-weight:600;color:var(--ink)}
.hx-intl a:not([class]){color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hx-intl a:not([class]):hover{color:var(--goldt)}
.hx-intl__cta{margin:24px 0 0}
.hx-intl__stage{box-sizing:border-box;padding:clamp(16px,2.2vw,28px);border-radius:4px;background:#0d1f3c;background:radial-gradient(540px 440px at 58% 44%,#1b3a6b 0%,#0d1f3c 72%);perspective:1400px}
.hx-intl__tag{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin:0 0 14px;font:600 11.5px/1.3 var(--fu);letter-spacing:.13em;text-transform:uppercase;color:#c9d5ea}
.hx-intl__tag b{font-weight:600;color:var(--gold)}
.hx-intl__cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;transform:rotateX(3deg) rotateY(-5deg);transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hx-intl__stage:hover .hx-intl__cards{transform:none}
.hx-intl__cards li{margin:0;padding:12px 13px 13px;border-top:3px solid var(--gold);border-radius:4px;background:#fff;color:var(--ink);box-shadow:0 20px 30px -20px rgba(2,8,22,.85)}
.hx-intl__cards li::before{content:none}
.hx-intl__cards b{display:block;font:560 19px/1.1 var(--fd);letter-spacing:-.005em}
.hx-intl__cards span{display:block;margin-top:5px;font-size:12px;line-height:1.35;color:var(--ink2)}
.hx-intl__cards em{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-style:normal;font-size:12.5px;line-height:1.35}
.hx-intl__cards em i{display:block;margin-bottom:2px;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.hx-intl__nov{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:#c9d5ea}
.hx-intl__nov b{display:block;margin-bottom:3px;font:600 11.5px/1.3 var(--fu);letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.hx-intl__foot{margin-top:clamp(22px,2.6vw,32px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;align-items:start}
.hx-intl__also{margin:0;max-width:62em;font-size:15px;line-height:1.6;color:var(--ink2)}
.hx-intl__more{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.hx-intl__more li{margin:0;padding:0}
.hx-intl__more li::before{content:none}
.hx-intl__note{grid-column:1/-1;margin:0;font-size:13px;color:var(--ink2)}
.hx-intl__side{min-width:0}
.hx-intl__side .hx-intl__foot{grid-template-columns:minmax(0,1fr)}
@media (hover:none){.hx-intl__cards{transform:none}}
@media (prefers-reduced-motion:reduce){.hx-intl__cards{transition:none}}
@media (max-width:1023px){
  .hx-intl__grid{grid-template-columns:minmax(0,1fr)}
  .hx-intl__cards{transform:none}
  .hx-intl__foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  .hx-intl__lede{font-size:16px}
  .hx-intl__stage{margin-inline:calc(var(--s26-gut) * -1);border-radius:0;padding:22px var(--s26-gut) 24px}
  .hx-intl__cards{display:flex;gap:10px;margin-inline:calc(var(--s26-gut) * -1);padding:0 var(--s26-gut) 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s26-gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hx-intl__cards::-webkit-scrollbar{display:none}
  .hx-intl__cards li{flex:0 0 min(64%,236px);scroll-snap-align:start}
  .hx-intl__cards b{font-size:18px}
  .hx-intl__tag span::after{content:" · swipe";color:var(--gold)}
}
/* ---- subject pages: "Mr Ejaz Ahmad & team" comes first on phones and tablets (the desktop hero is unchanged) ---- */
.hx-who{display:none}
@media (max-width:1023px){
  .hx-who{order:-1;display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
  .hx-who img{flex:none;width:64px;height:64px;object-fit:cover;object-position:50% 22%;border-radius:3px}
  .hx-who__t{flex:1 1 auto;min-width:0}
  .hx-who__k{display:block;font:600 11px/1.2 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
  .hx-who__n{display:block;margin-top:3px;font:500 21px/1.15 var(--fd)}
  .hx-who__g{flex:none;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
  .hx-who__g strong{font:500 26px/1 var(--fd);color:var(--ink)}
  .hx-who__st{display:block}
}
@media (max-width:599px){
  .hx-who{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:4px}
  .hx-who img{grid-column:1;grid-row:1/3;width:64px;height:64px}
  .hx-who__t{grid-column:2;grid-row:1}
  .hx-who__n{font-size:20px}
  .hx-who__g{grid-column:2;grid-row:2;flex-wrap:wrap;gap:4px 8px;font-size:12.5px}
  .hx-who__g strong{font-size:17px}
}
/* hx:intl:end */
/* hx:fees:start  (written by tools/site2027_fees.py: change it there, then run the script) */
.sj-plan__per,.prg-per{display:block;margin:6px 0 0;font-size:15px;font-weight:600;color:var(--ink2)}
.sj-fees-incl{margin:26px 0 0;padding:16px 20px;border-left:3px solid var(--gold);background:var(--chalk);font-size:16.5px;line-height:1.55;color:var(--ink)}
.sj-fees-incl small{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.sj-fees-incl a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
/* hx:fees:end */