:root {
  --navy:#102f49; --navy2:#183d5b; --mint:#d8f2e7; --mint2:#ecf8f2;
  --sage:#78a58e; --gold:#bd9a52; --ink:#14232d; --line:#102f4920; --white:#fffdfa;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--mint); color:var(--ink); font:16px/1.75 Arial,"Noto Sans SC",sans-serif; }
header { height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 10vw; background:#ffffffd9; backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { position:relative; display:block; height:76px; padding:18px 0 0 74px; color:var(--navy); font:700 29px/1 Georgia,serif; letter-spacing:-1.2px; text-decoration:none; }
.brand::before { content:""; position:absolute; left:0; top:0; width:62px; height:76px; background:url("assets/brand/oxtree-education-logo.png") center top/106px no-repeat; }
.brand b { display:block; margin-top:6px; font:700 10px/1 Arial,sans-serif; letter-spacing:2px; }
nav { display:flex; align-items:center; gap:30px; }
nav a { color:#355064; text-decoration:none; font-size:14px; font-weight:700; letter-spacing:.25px; transition:.2s; }
nav a:hover,nav a.on { color:var(--navy); }
nav a.on { position:relative; }
nav a.on::after { content:""; position:absolute; inset:auto 0 -10px; height:2px; background:var(--gold); }
.home { min-height:calc(100vh - 96px); padding:62px 10vw; position:relative; overflow:hidden; background:radial-gradient(circle at 88% 78%,#a5d9c5 0,transparent 25%),linear-gradient(115deg,var(--mint2) 0 67%,#c6eadb 67%); }
.home::after { content:""; position:absolute; right:9vw; bottom:-105px; width:360px; height:360px; border:1px solid #78a58e70; border-radius:50%; }
.eyebrow { margin:0; color:var(--sage); font:700 10px/1.4 Arial,sans-serif; letter-spacing:2px; }
.hero-copy { position:relative; z-index:1; max-width:760px; margin-top:11vh; }
.tag { margin:0; color:var(--sage); font-weight:700; }
.hero-copy h1 { margin:18px 0; color:var(--navy); font:700 clamp(48px,6.2vw,86px)/1.02 Georgia,serif; letter-spacing:-.065em; }
.page h1,.contact-page h1 { margin:18px 0; color:var(--navy); font:700 clamp(42px,4.8vw,70px)/1.08 Georgia,serif; letter-spacing:-.055em; }
h1 em { color:var(--sage); font-style:italic; }
.hero-copy > p:last-of-type { max-width:510px; margin-top:22px; }
.button { display:inline-flex; gap:32px; margin-top:24px; padding:13px 0; color:var(--navy); border-bottom:2px solid var(--gold); font-size:13px; font-weight:700; text-decoration:none; }
.button i { font-style:normal; }
.intro,.page,.contact-page { max-width:1480px; margin:auto; padding:110px 10vw; }
.intro h2,.sage h2,.blue h2 { max-width:900px; margin:14px 0 22px; color:var(--navy); font:700 clamp(34px,4vw,59px)/1.16 Georgia,serif; letter-spacing:-.055em; }
.intro > p { max-width:700px; }
.three,.cards,.service-grid,.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
.three a,.cards article,.service-grid article { padding:30px; border:1px solid var(--line); border-radius:16px; background:#ffffffad; box-shadow:0 18px 36px #102f490c; color:var(--ink); line-height:1.75; text-decoration:none; transition:transform .25s,box-shadow .25s,background .25s; }
.three a:hover,.service-grid article:hover { transform:translateY(-5px); background:#fff; box-shadow:0 25px 45px #102f4920; }
.three b,.cards b,.service-grid b { display:block; color:var(--gold); font:700 27px Georgia,serif; }
.three strong { display:block; margin:12px 0 5px; color:var(--navy); font:700 21px Georgia,serif; }
.page h1 { margin-bottom:48px; }
.lead { max-width:680px; margin-top:-22px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1000px; }
.sage { margin:88px 0; padding:65px; border-radius:20px; background:linear-gradient(135deg,#bfdccc,#d9eee3); color:var(--navy); }
.sage h2 { margin-top:0; }
.statement { max-width:none; margin:0; border-radius:0; padding-left:10vw; }
.cards article { background:var(--navy); border-color:#ffffff1c; color:#eff8f4; }
.cards article b { color:#e2c678; }
.cards h2,.service-grid h2 { margin:15px 0 10px; font:700 21px/1.25 Georgia,serif; }
.blue { margin-top:85px; padding:65px; border-radius:20px; background:var(--navy); color:#eff8f4; }
.blue .eyebrow { color:#abd3c0; }
.blue h2 { color:#fff; }
.blue h2 em { color:#acd2bc; }
.service-grid { grid-template-columns:repeat(3,1fr); }
.service-grid article:nth-child(even) { background:var(--navy); color:#fff; }
.service-grid article:nth-child(even) b { color:#e2c678; }
.service-grid article { cursor:pointer; }
.workflow { margin-top:88px; }
.workflow h2 { color:var(--navy); font:700 clamp(34px,4vw,56px)/1.16 Georgia,serif; letter-spacing:-.055em; }
.contact-page { max-width:none; min-height:calc(100vh - 130px); padding-left:15vw; background:linear-gradient(120deg,#bde3d2,#e5f5ed); }
.contact-page h1 { color:var(--navy); }
.contact-page > p { max-width:560px; }
.contact-box { display:flex; flex-direction:column; gap:7px; width:max-content; margin-top:28px; padding:0 0 13px; color:var(--navy); border-bottom:1px solid var(--sage); text-decoration:none; }
.contact-box span { color:var(--sage); font:700 10px Arial,sans-serif; letter-spacing:1.5px; }
.contact-box b { font:700 25px Georgia,serif; }
footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:24px 6vw; background:var(--navy); color:#fff; font:700 10px Arial,sans-serif; letter-spacing:1px; }
footer::after { content:"UK I-Smartlife Company Ltd · Company No. 13378250 · 36 Upper Brook Street, London, England, W1K 7QJ"; margin-left:auto; max-width:650px; text-align:right; opacity:.75; font-weight:400; letter-spacing:.45px; }
.service-detail-copy { margin-top:15px; }
.service-detail-copy p { min-height:120px; }
.back { border:0; margin-top:5px; }
@media (max-width:760px) {
  header { height:auto; min-height:82px; padding:9px 7vw; align-items:flex-start; }
  .brand { transform:scale(.9); transform-origin:left center; margin-right:-12px; }
  nav { gap:9px; justify-content:end; flex-wrap:wrap; padding-top:4px; }
  nav a { font-size:11px; }
  nav a.on::after { bottom:-5px; }
  .home { min-height:680px; padding:45px 7vw; }
  .home::after { right:-100px; bottom:-80px; width:280px; height:280px; }
  .hero-copy { margin-top:90px; }
  .intro,.page,.contact-page { padding:75px 7vw; }
  .three,.cards,.service-grid,.stats,.two-col { grid-template-columns:1fr; gap:14px; }
  .sage,.blue { margin:50px 0; padding:36px; border-radius:16px; }
  .statement { margin:0; padding:50px 7vw; }
  .service-grid { margin-top:30px; }
  .contact-page { min-height:calc(100vh - 110px); padding-left:7vw; }
  footer::after { margin-left:0; text-align:left; }
}