/* Skilled Education Global - design system (Phase 1, style-tile.html) */

:root{
  --ink:#12151c;
  --ink-soft:#1c212b;
  --paper:#f7f4ec;
  --paper-dim:#efeadd;
  --paper-line:#e2dcc9;
  --bordeaux:#7c2431;
  --bordeaux-bright:#a3384a;
  --gold:#a98750;
  --text-on-paper:#22242a;
  --text-muted:#5c5a52;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w:1280px;
}
[data-theme="dark"]{
  --paper:var(--ink);
  --paper-dim:var(--ink-soft);
  --paper-line:#2a3040;
  --text-on-paper:#eee9dc;
  --text-muted:#9a9686;
  --bordeaux:var(--bordeaux-bright);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:var(--ink);
    --paper-dim:var(--ink-soft);
    --paper-line:#2a3040;
    --text-on-paper:#eee9dc;
    --text-muted:#9a9686;
    --bordeaux:var(--bordeaux-bright);
  }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper); color:var(--text-on-paper); font-family:var(--sans);
  transition:background .4s ease, color .4s ease; -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--max-w); margin:0 auto; padding-left:6vw; padding-right:6vw; }
@media(min-width:1500px){ .wrap{ padding-left:0; padding-right:0; } }

section{ padding:88px 0; border-bottom:1px solid var(--paper-line); }
section.tight{ padding:56px 0; }

.eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bordeaux); font-weight:600; margin-bottom:18px; display:block;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; text-wrap:balance; }
h1{ font-size:clamp(40px,6vw,84px); line-height:1.03; letter-spacing:-.01em; }
h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.1; margin-bottom:20px; max-width:760px; }
h3{ font-size:clamp(22px,2.4vw,28px); font-weight:500; line-height:1.2; }
em{ font-style:italic; color:var(--bordeaux); }
p{ font-size:16px; line-height:1.7; color:var(--text-muted); max-width:640px; }
.lede{ font-size:19px; line-height:1.6; max-width:640px; }

.btn{
  font-family:var(--sans); font-size:14px; letter-spacing:.03em; font-weight:500;
  padding:15px 30px; border-radius:2px; cursor:pointer; text-decoration:none;
  display:inline-block; transition:.25s ease; border:1px solid transparent;
}
.btn-primary{ background:var(--bordeaux); color:var(--paper); border-color:var(--bordeaux); }
.btn-primary:hover{ background:transparent; color:var(--bordeaux); }
.btn-ghost{ background:transparent; color:var(--text-on-paper); border-color:var(--paper-line); }
.btn-ghost:hover{ border-color:var(--text-on-paper); }

.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--paper-line); }
.stat{ padding:32px 24px; border-right:1px solid var(--paper-line); }
.stat:last-child{ border-right:none; }
.stat .num{ font-family:var(--serif); font-size:38px; color:var(--bordeaux); }
.stat .lbl{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-top:6px; }

.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.pillar{ background:var(--paper); padding:32px 26px; }
.pillar .idx{ font-family:var(--serif); font-style:italic; color:var(--bordeaux); font-size:15px; }
.pillar h4{ font-family:var(--serif); font-weight:500; font-size:20px; margin-top:12px; }
.pillar p{ font-size:14px; line-height:1.6; margin-top:10px; }

.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:48px; margin-top:40px; }
.team-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
.team-card .name{ font-family:var(--serif); font-size:22px; margin-top:20px; }
.team-card .role{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--bordeaux); margin-top:4px; }
.team-card p{ margin-top:12px; font-size:14px; }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; transition:none!important; } }

.theme-toggle{
  position:fixed; top:20px; right:20px; z-index:50; display:flex; gap:6px;
  background:var(--paper-dim); border:1px solid var(--paper-line); border-radius:100px; padding:4px;
}
.theme-toggle button{
  font-family:var(--sans); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  background:transparent; border:none; color:var(--text-muted); cursor:pointer;
  padding:7px 14px; border-radius:100px; transition:.25s;
}
.theme-toggle button.active{ background:var(--bordeaux); color:var(--paper); }
.theme-toggle button:focus-visible{ outline:2px solid var(--bordeaux); outline-offset:2px; }

.lang-toggle{ display:flex; gap:2px; font-size:12px; }
.lang-toggle a{ padding:4px 8px; text-decoration:none; color:var(--text-muted); }
.lang-toggle a[aria-current="true"]{ color:var(--bordeaux); font-weight:600; }

table{ border-collapse:collapse; }
:focus-visible{ outline:2px solid var(--bordeaux); outline-offset:2px; }

@media(max-width:900px){
  .stats-band, .pillars, .team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
  .stats-band, .pillars, .team-grid{ grid-template-columns:1fr; }
  .stat, .pillar{ border-right:none; border-bottom:1px solid var(--paper-line); }
}