:root { --s:min(.09765625vw,1.40625px); --paper:#f7f8f3; --forest:#17382e; --ink:#0f1415; --muted:#6b7080; --serif:"Times New Roman",Times,"Liberation Serif",serif; --sans:Arial,Helvetica,sans-serif }
/* Reference canvas: 1024 × 1536. Desktop dimensions scale together through --s.
   Text and UI remain HTML/SVG; no screenshot is used as the page itself. */
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:calc(20 * var(--s)) }
body { margin:0; background:#eeefe9; color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
button,input,select { font:inherit }
button,a { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
a { color:inherit; text-decoration:none }
h1,h2,h3,p,blockquote,ul { margin:0 }
ul { padding:0; list-style:none }
h1,h2,h3 { font-weight:400 }
h1,h2 { font-family:var(--serif); letter-spacing:calc(-1.25 * var(--s)) }
em { font-weight:400 }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:calc(2 * var(--s)) solid #729c8b; outline-offset:calc(4 * var(--s)) }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden }
.page { position:relative; width:min(100%,1440px); margin-inline:auto; background:var(--paper) }
.spread { display:block; background:var(--paper) }
.left-column { width:calc(625 * var(--s)); min-width:0 }
.right-column { width:100%; min-width:0 }
section { position:relative; isolation:isolate }
.paper-surface { background:var(--paper) url('assets/paper-texture.webp') repeat; background-size:calc(88 * var(--s)) calc(52 * var(--s)) }
.dark { background-color:var(--forest); color:#f7f8f4 }
.eyebrow { font-size:calc(7.8 * var(--s)); line-height:calc(11 * var(--s)); letter-spacing:calc(1.5 * var(--s)); text-transform:uppercase; font-weight:400; color:#353d48 }
.dark .eyebrow { color:#fafbf5 }
.icon { width:calc(24 * var(--s)); height:calc(24 * var(--s)); flex:none }
.arrow { width:calc(16 * var(--s)); height:calc(16 * var(--s)); flex:none; transition:transform .2s ease }
.button { display:inline-flex; align-items:center; justify-content:center; gap:calc(10 * var(--s)); border:calc(1 * var(--s)) solid transparent; border-radius:calc(2 * var(--s)); background:linear-gradient(105deg,#174b3d,#123b32); color:#fff; font-size:calc(11 * var(--s)); line-height:calc(16 * var(--s)); min-height:calc(36 * var(--s)); padding:calc(8 * var(--s)) calc(20 * var(--s)); box-shadow:0 calc(5 * var(--s)) calc(13 * var(--s)) #15372e17; transition:filter .18s ease,box-shadow .18s ease }
.button:hover { filter:brightness(1.12); box-shadow:0 calc(6 * var(--s)) calc(18 * var(--s)) #102b3029 }
.button:hover .arrow,.text-link:hover .arrow { transform:translateX(calc(3 * var(--s))) }
.outline { border-color:#b0bbaa; background:#13382b9c; box-shadow:none }
.light { color:#102b27; background:var(--paper); border-color:var(--paper) }
.text-link { display:inline-flex; align-items:center; gap:calc(5 * var(--s)); background:none; border:0; padding:0; min-height:calc(20 * var(--s)); box-shadow:none; color:#143830; font-size:calc(8.2 * var(--s)); line-height:calc(12 * var(--s)); white-space:nowrap; letter-spacing:0 }
.text-link .arrow { width:calc(12 * var(--s)); height:calc(12 * var(--s)) }
.wordmark { font-family:var(--serif); font-weight:400; font-size:calc(21 * var(--s)); line-height:calc(28 * var(--s)); letter-spacing:calc(1.5 * var(--s)); color:#132c29; white-space:nowrap }
.header { position:absolute; z-index:10; top:0; left:0; width:61.03515625%; height:calc(51 * var(--s)) }
.header .wordmark { position:absolute; left:calc(30 * var(--s)); top:calc(10 * var(--s)) }
.nav-links { display:flex; align-items:center; gap:calc(21 * var(--s)); position:absolute; left:calc(164 * var(--s)); top:0; height:calc(50 * var(--s)); font-size:calc(8.8 * var(--s)); line-height:calc(12 * var(--s)); white-space:nowrap }
.nav-links a { color:#293041; transition:color .18s }
.nav-links a:hover { color:#39775f }
.nav-cta { position:absolute; top:calc(10 * var(--s)); right:calc(20 * var(--s)); width:calc(118 * var(--s)); min-height:calc(30 * var(--s)); padding:calc(7 * var(--s)) calc(10 * var(--s)); font-size:calc(8.9 * var(--s)); gap:calc(4 * var(--s)) }
.nav-cta .arrow { width:calc(13 * var(--s)); height:calc(13 * var(--s)) }
.menu-toggle { display:none }
.hero { height:calc(523 * var(--s)); overflow:hidden }
.hero-copy { position:absolute; left:calc(32 * var(--s)); top:calc(98 * var(--s)); z-index:3; width:calc(305 * var(--s)) }
.hero h1 { margin-top:calc(10 * var(--s)); font-size:calc(54 * var(--s)); line-height:calc(51 * var(--s)); letter-spacing:calc(-2.65 * var(--s)); white-space:nowrap }
.hero h1 em { color:#10382e; font-size:calc(58 * var(--s)); letter-spacing:calc(-2.6 * var(--s)) }
.intro { font-size:calc(11.8 * var(--s)); line-height:calc(18 * var(--s)); margin-top:calc(14 * var(--s)); color:var(--muted); letter-spacing:0 }
.hero-cta { width:calc(155 * var(--s)); height:calc(36 * var(--s)); margin-top:calc(16 * var(--s)); padding:calc(8 * var(--s)) calc(14 * var(--s)); justify-content:space-between }
.process { display:flex; align-items:center; gap:calc(12 * var(--s)); margin-top:calc(31 * var(--s)); font-size:calc(7.3 * var(--s)); line-height:calc(11 * var(--s)); letter-spacing:calc(1.2 * var(--s)); text-transform:uppercase; color:#676e78 }
.process i { font-style:normal; color:#737c7d }
.hero-signature { position:absolute; left:calc(32 * var(--s)); top:calc(400 * var(--s)); color:#788177; z-index:2 }
.hero-signature>span { display:block; width:calc(40 * var(--s)); height:calc(1 * var(--s)); background:#adb6aa }
.hero-signature p { margin:calc(39 * var(--s)) 0 calc(10 * var(--s)) calc(59 * var(--s)); font-family:var(--serif); font-size:calc(8.2 * var(--s)); line-height:calc(12.5 * var(--s)); letter-spacing:calc(1.45 * var(--s)); text-transform:uppercase }
.hero-signature>span:last-child { width:calc(28 * var(--s)); margin-left:calc(59 * var(--s)) }
.hero-leaves { position:absolute; left:0; bottom:0; width:calc(84 * var(--s)); height:calc(103 * var(--s)); object-fit:contain; z-index:2 }
.hero-art { position:absolute; inset:0; pointer-events:none; z-index:1 }
.notes { position:absolute; background:#e2dfd5 url('assets/handwritten-work.webp') repeat; background-size:calc(135 * var(--s)) calc(127 * var(--s)); box-shadow:0 calc(8 * var(--s)) calc(16 * var(--s)) #383e3914; opacity:.6 }
.notes-one { left:calc(335 * var(--s)); top:calc(87 * var(--s)); width:calc(252 * var(--s)); height:calc(274 * var(--s)); transform:rotate(9deg) }
.notes-two { left:calc(270 * var(--s)); top:calc(330 * var(--s)); width:calc(176 * var(--s)); height:calc(245 * var(--s)); transform:rotate(15deg) }
.notes-three { left:calc(395 * var(--s)); top:calc(225 * var(--s)); width:calc(208 * var(--s)); height:calc(328 * var(--s)); transform:rotate(14deg) }
.book { position:absolute; left:calc(473 * var(--s)); top:calc(71 * var(--s)); width:calc(148 * var(--s)); height:calc(164 * var(--s)); background:linear-gradient(110deg,#415147 0,#112c24 2%,#445444 4%,#18372c 6%,#253e31 70%,#1e332b); border:calc(1 * var(--s)) solid #122a20; box-shadow:calc(-6 * var(--s)) calc(2 * var(--s)) calc(1 * var(--s)) #6975655c,0 calc(12 * var(--s)) calc(21 * var(--s)) #16231a20; transform:rotate(12deg) }
.book div { margin:calc(33 * var(--s)) 0 0 calc(63 * var(--s)); font-family:var(--serif); font-size:calc(9 * var(--s)); line-height:calc(13 * var(--s)); letter-spacing:calc(2.1 * var(--s)); text-transform:uppercase; color:#aab198; opacity:.85 }
.floating-card { position:absolute; border-radius:calc(4 * var(--s)); background:linear-gradient(110deg,#fff,#f7f8f3); box-shadow:0 calc(10 * var(--s)) calc(22 * var(--s)) #24352c28,0 calc(1 * var(--s)) calc(3 * var(--s)) #354b2624 }
.diagnosis { left:calc(344 * var(--s)); top:calc(97 * var(--s)); width:calc(186 * var(--s)); height:calc(246 * var(--s)); padding:calc(13 * var(--s)) calc(16 * var(--s)) }
.card-eyebrow { font-size:calc(7.4 * var(--s)); line-height:calc(10 * var(--s)); letter-spacing:calc(.7 * var(--s)); color:#596070; text-transform:uppercase }
.diagnosis h2 { font-size:calc(15.4 * var(--s)); letter-spacing:calc(-.35 * var(--s)); line-height:calc(20 * var(--s)); padding:calc(3 * var(--s)) 0 calc(7 * var(--s)); border-bottom:calc(1 * var(--s)) solid #e7e9e3; white-space:nowrap }
.scores { display:grid; grid-template-columns:calc(50 * var(--s)) calc(52 * var(--s)) 1fr; align-items:center; margin-top:calc(10 * var(--s)); margin-bottom:calc(11 * var(--s)) }
.scores>div { display:flex; flex-direction:column; gap:0 }
.scores span { font-size:calc(8 * var(--s)); line-height:calc(11 * var(--s)); color:#616575 }
.scores strong { font-family:var(--serif); font-size:calc(39 * var(--s)); line-height:calc(38 * var(--s)); font-weight:400; color:#121928 }
.scores>div:last-child strong { color:#0b362c }
.score-arrow { width:calc(20 * var(--s)); height:calc(20 * var(--s)); margin-left:calc(2 * var(--s)); margin-top:calc(12 * var(--s)); color:#29554b }
.skill-row { display:grid; grid-template-columns:calc(49 * var(--s)) calc(70 * var(--s)) calc(22 * var(--s)); gap:calc(7 * var(--s)); align-items:center; min-height:calc(19.4 * var(--s)); font-size:calc(7.6 * var(--s)); line-height:calc(10 * var(--s)); color:#343b4d }
.bar { height:calc(6 * var(--s)); background:#e1e6df }
.bar>span { display:block; height:100%; width:var(--level); background:linear-gradient(90deg,#527d6e,#78978d) }
.skill-row>span:last-child { text-align:right }
.weekly { left:calc(281 * var(--s)); top:calc(331 * var(--s)); width:calc(158 * var(--s)); height:calc(164 * var(--s)); padding:calc(12 * var(--s)); transform:rotate(-4deg) }
.weekly h2 { font-family:var(--sans); font-size:calc(9.3 * var(--s)); line-height:calc(16 * var(--s)); letter-spacing:0; border-bottom:calc(1 * var(--s)) solid #e5e8e1; padding-bottom:calc(5 * var(--s)); white-space:nowrap }
.weekly ul { margin-top:calc(10 * var(--s)); display:grid; gap:calc(7 * var(--s)) }
.weekly li { display:flex; align-items:center; gap:calc(8 * var(--s)); font-size:calc(7.5 * var(--s)); line-height:calc(13 * var(--s)); white-space:nowrap; color:#667080 }
.tick { display:grid; place-items:center; width:calc(13 * var(--s)); height:calc(13 * var(--s)); background:#145043; border-radius:calc(2 * var(--s)); color:white; flex:none }
.tick .icon { width:calc(9 * var(--s)); height:calc(9 * var(--s)); stroke-width:1.8 }
.calendar { position:absolute; bottom:calc(12 * var(--s)); right:calc(12 * var(--s)); display:grid; place-items:center; width:calc(25 * var(--s)); height:calc(25 * var(--s)); background:#e9efea; border-radius:calc(4 * var(--s)); color:#476b60 }
.calendar .icon { width:calc(14 * var(--s)); height:calc(14 * var(--s)) }
.review { left:calc(457 * var(--s)); top:calc(321 * var(--s)); width:calc(153 * var(--s)); height:calc(176 * var(--s)); padding:calc(12 * var(--s)) calc(11 * var(--s)) }
.review h2 { font-family:var(--sans); font-size:calc(9.1 * var(--s)); line-height:calc(12 * var(--s)); letter-spacing:0 }
.reviewer { display:flex; align-items:center; gap:calc(8 * var(--s)); margin-top:calc(8 * var(--s)); height:calc(43 * var(--s)) }
.reviewer img { width:calc(43 * var(--s)); height:calc(43 * var(--s)); border-radius:50%; object-fit:cover }
.reviewer div { display:flex; flex-direction:column; min-width:0 }
.reviewer span { font-size:calc(6.7 * var(--s)); line-height:calc(10 * var(--s)); color:#737b87 }
.reviewer strong { font-weight:400; font-size:calc(8.2 * var(--s)); line-height:calc(12 * var(--s)); color:#222d35 }
.reviewer small { font-size:calc(6.15 * var(--s)); line-height:calc(10 * var(--s)); color:#6b7280; white-space:nowrap }
.review blockquote { font-family:var(--serif); font-size:calc(10.1 * var(--s)); line-height:calc(13.5 * var(--s)); margin-top:calc(8 * var(--s)); color:#414953 }
.approval { margin-top:calc(11 * var(--s)); display:flex; align-items:center; gap:calc(7 * var(--s)); padding:calc(5 * var(--s)) calc(9 * var(--s)); width:calc(104 * var(--s)); height:calc(26 * var(--s)); border-radius:calc(5 * var(--s)); background:#dfece5; color:#164237; font-size:calc(7.8 * var(--s)); line-height:calc(11 * var(--s)); letter-spacing:calc(1.6 * var(--s)); text-transform:uppercase }
.approval>span { width:calc(16 * var(--s)); height:calc(16 * var(--s)); border-radius:50%; background:#105243; display:grid; place-items:center; color:#fff; flex:none }
.approval .icon { width:calc(10 * var(--s)); height:calc(10 * var(--s)); stroke-width:1.8 }
.problem { height:calc(288 * var(--s)); background-image:url('assets/problem-background.webp'); background-size:100% 100%; overflow:hidden }
.problem>.eyebrow { position:absolute; left:calc(32 * var(--s)); top:calc(33 * var(--s)) }
.problem h2 { position:absolute; top:calc(52 * var(--s)); left:calc(32 * var(--s)); font-size:calc(40.5 * var(--s)); line-height:calc(38 * var(--s)); letter-spacing:calc(-1.25 * var(--s)) }
.problem-copy { position:absolute; left:calc(313 * var(--s)); top:calc(55 * var(--s)); font-size:calc(11.5 * var(--s)); line-height:calc(18 * var(--s)); color:#eef3ed }
.problem-grid { position:absolute; top:calc(189 * var(--s)); left:calc(31 * var(--s)); width:calc(546 * var(--s)); display:grid; grid-template-columns:repeat(4,1fr); gap:calc(16 * var(--s)) }
.problem-grid>div { border-top:calc(1 * var(--s)) solid #91a59a; padding-top:calc(13 * var(--s)) }
.problem-grid span { font-size:calc(8.1 * var(--s)); line-height:calc(11 * var(--s)) }
.problem-grid h3 { font-family:var(--sans); font-size:calc(13 * var(--s)); line-height:calc(18 * var(--s)); margin-top:calc(5 * var(--s)); letter-spacing:0 }
.approach { height:calc(414 * var(--s)) }
.approach>.eyebrow { position:absolute; left:calc(32 * var(--s)); top:calc(23 * var(--s)) }
.approach>.text-link { position:absolute; top:calc(24 * var(--s)); right:calc(25 * var(--s)) }
.approach>h2 { position:absolute; top:calc(40 * var(--s)); left:calc(32 * var(--s)); font-size:calc(40 * var(--s)); line-height:calc(37 * var(--s)); letter-spacing:calc(-1.55 * var(--s)) }
.approach-intro { position:absolute; top:calc(125 * var(--s)); left:calc(32 * var(--s)); font-size:calc(11.5 * var(--s)); line-height:calc(18 * var(--s)); color:var(--muted) }
.steps { position:absolute; top:calc(172 * var(--s)); left:calc(22 * var(--s)); display:grid; grid-template-columns:calc(134 * var(--s)) calc(142 * var(--s)) calc(142 * var(--s)) calc(142 * var(--s)); gap:calc(8 * var(--s)) }
.step { min-width:0; height:calc(223 * var(--s)); padding:calc(12 * var(--s)); background:#ffffff91; border-radius:calc(2 * var(--s)) }
.step-number { display:block; font-size:calc(8.2 * var(--s)); line-height:calc(11 * var(--s)); letter-spacing:calc(.4 * var(--s)) }
.step h3 { font-family:var(--serif); font-size:calc(14.3 * var(--s)); line-height:calc(17 * var(--s)); letter-spacing:calc(-.3 * var(--s)); margin:calc(4 * var(--s)) 0 calc(8 * var(--s)); white-space:nowrap }
.step-visual { width:100%; height:calc(106 * var(--s)); border-radius:calc(4 * var(--s)); overflow:hidden; background:#eff2ec }
.notes-visual img { width:100%; height:100%; object-fit:cover }
.step>p { margin-top:calc(8 * var(--s)); color:var(--muted); font-size:calc(9 * var(--s)); line-height:calc(14.3 * var(--s)) }
.plan-visual { background:#fcfdfa; border:calc(1 * var(--s)) solid #eff1eb; padding:calc(8 * var(--s)) calc(7 * var(--s)) }
.plan-visual ul { display:grid; gap:calc(6 * var(--s)) }
.plan-visual li { display:flex; align-items:center; gap:calc(6 * var(--s)); font-size:calc(7.4 * var(--s)); line-height:calc(15 * var(--s)); white-space:nowrap; color:#677084 }
.plan-visual li>span { display:grid; place-items:center; width:calc(16 * var(--s)); height:calc(16 * var(--s)); background:#edf2ee; border-radius:calc(2 * var(--s)); flex:none; color:#497060 }
.plan-visual .icon { width:calc(9 * var(--s)); height:calc(9 * var(--s)); border:calc(1 * var(--s)) solid #a4b8a9; border-radius:50% }
.review-visual { padding:calc(7 * var(--s)); background:#edf0e9 }
.mini-reviewer { display:flex; gap:calc(8 * var(--s)); align-items:center; height:calc(33 * var(--s)) }
.mini-reviewer img { width:calc(34 * var(--s)); height:calc(34 * var(--s)); object-fit:cover; border-radius:50% }
.mini-reviewer>span { display:block; width:calc(49 * var(--s)); height:calc(23 * var(--s)); background:linear-gradient(#dbe2da 0 calc(4 * var(--s)),transparent calc(4 * var(--s)) calc(9 * var(--s)),#dbe2da calc(9 * var(--s)) calc(13 * var(--s)),transparent calc(13 * var(--s)) calc(18 * var(--s)),#dbe2da calc(18 * var(--s)) calc(21 * var(--s))); clip-path:polygon(0 0,100% 0,100% 57%,50% 57%,50% 100%,0 100%) }
.mini-quote { position:relative; background:#fff; margin-top:calc(5 * var(--s)); border-radius:calc(3 * var(--s)); padding:calc(5 * var(--s)) calc(3 * var(--s)) calc(4 * var(--s)) calc(16 * var(--s)); color:#667080; font-size:calc(7.45 * var(--s)); line-height:calc(10.5 * var(--s)); letter-spacing:0 }
.mini-quote>span { position:absolute; top:calc(3 * var(--s)); left:calc(7 * var(--s)); font-size:calc(13 * var(--s)) }
.chart-visual { position:relative; background:linear-gradient(#f7f9f5,#eef2ea) }
.chart-visual strong { position:absolute; top:calc(7 * var(--s)); right:calc(7 * var(--s)); font-size:calc(12.5 * var(--s)); line-height:calc(17 * var(--s)); color:#103f35 }
.chart-visual svg { position:absolute; inset:auto calc(3 * var(--s)) calc(3 * var(--s)); width:calc(100% - calc(6 * var(--s))); height:calc(79 * var(--s)); overflow:visible }
.chart-grid { stroke:#e5eae2; stroke-width:.7; fill:none }
.chart-fill { fill:#e6ede5; opacity:.4 }
.chart-line { stroke:#245448; stroke-width:1.2; fill:none }
.chart-visual circle { fill:#155547; stroke:#f7faf4; stroke-width:.8 }
.teachers { height:calc(239 * var(--s)); background-image:url('assets/teachers-background.webp'); background-size:100% 100%; overflow:hidden }
.teacher-copy { position:absolute; left:calc(32 * var(--s)); top:calc(34 * var(--s)); z-index:1 }
.teacher-copy h2 { font-size:calc(29.7 * var(--s)); line-height:calc(31 * var(--s)); margin-top:calc(10 * var(--s)); letter-spacing:calc(-1 * var(--s)) }
.teacher-copy>p:not(.eyebrow) { margin-top:calc(10 * var(--s)); font-size:calc(10 * var(--s)); line-height:calc(16 * var(--s)); color:#f0f4ee }
.teacher-copy .button { margin-top:calc(11 * var(--s)); width:calc(144 * var(--s)); height:calc(32 * var(--s)); min-height:calc(32 * var(--s)); font-size:calc(9.4 * var(--s)); padding:calc(6 * var(--s)) calc(12 * var(--s)); gap:calc(8 * var(--s)) }
.teacher-quote { position:absolute; top:calc(122 * var(--s)); left:calc(488 * var(--s)); font-family:var(--serif); font-size:calc(11 * var(--s)); line-height:calc(15 * var(--s)); font-style:italic }
.teacher-quote cite { display:block; margin-top:calc(10 * var(--s)); font-family:var(--sans); font-size:calc(7.5 * var(--s)); line-height:calc(12 * var(--s)); font-style:normal }
.right-top,.right-bottom { display:none }
.results { height:calc(364 * var(--s)) }
.results>.eyebrow { position:absolute; top:calc(39 * var(--s)); left:calc(24 * var(--s)) }
.results>.text-link { position:absolute; top:calc(34 * var(--s)); right:calc(21 * var(--s)) }
.results>h2 { position:absolute; left:calc(24 * var(--s)); top:calc(60 * var(--s)); font-size:calc(34 * var(--s)); line-height:calc(33.5 * var(--s)); letter-spacing:calc(-1.55 * var(--s)); white-space:nowrap }
.results>h2 em { color:#153e35 }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(8 * var(--s)); position:absolute; top:calc(150 * var(--s)); left:calc(14 * var(--s)); right:calc(14 * var(--s)) }
.result-card { position:relative; height:calc(188 * var(--s)); padding:calc(11 * var(--s)); background:#ffffffa8; border-radius:calc(2 * var(--s)) }
.result-card h3 { font-family:var(--sans); font-size:calc(8.6 * var(--s)); line-height:calc(12 * var(--s)); white-space:nowrap; color:#3c4254 }
.result-score { display:flex; gap:calc(5 * var(--s)); align-items:center; font-family:var(--serif); font-size:calc(39 * var(--s)); line-height:calc(46 * var(--s)); margin-top:calc(5 * var(--s)); letter-spacing:calc(-1 * var(--s)); color:#113d34 }
.result-score span { font-size:calc(27 * var(--s)); line-height:calc(32 * var(--s)); letter-spacing:0 }
.result-card blockquote { margin-top:calc(12 * var(--s)); font-size:calc(9 * var(--s)); line-height:calc(14.3 * var(--s)); color:#666c7a }
.attribution { position:absolute; left:calc(11 * var(--s)); bottom:calc(15 * var(--s)); font-size:calc(6.7 * var(--s)); line-height:calc(9 * var(--s)); color:#687080; white-space:nowrap }
.campus { height:calc(411 * var(--s)); background-image:url('assets/campus-background.webp'); background-size:cover; background-position:center }
.campus-copy { position:absolute; left:calc(25 * var(--s)); top:calc(164 * var(--s)) }
.campus .eyebrow { font-size:calc(7.8 * var(--s)); line-height:calc(12 * var(--s)); letter-spacing:calc(1.55 * var(--s)) }
.campus h2 { font-size:calc(39 * var(--s)); line-height:calc(36.5 * var(--s)); letter-spacing:calc(-1.2 * var(--s)); margin-top:calc(10 * var(--s)) }
.campus-copy>p:not(.eyebrow) { font-size:calc(11.2 * var(--s)); line-height:calc(18 * var(--s)); margin-top:calc(12 * var(--s)) }
.campus .button { margin-top:calc(19 * var(--s)); width:calc(119 * var(--s)); height:calc(33 * var(--s)); min-height:calc(33 * var(--s)); font-size:calc(9.5 * var(--s)); padding:calc(6 * var(--s)) calc(11 * var(--s)); gap:calc(8 * var(--s)) }
.campus-signature { position:absolute; top:calc(308 * var(--s)); left:calc(324 * var(--s)); font-family:var(--serif); font-size:calc(6.8 * var(--s)); line-height:calc(13 * var(--s)); letter-spacing:calc(1.35 * var(--s)); text-transform:uppercase; color:#dae2c4 }
.campus-signature span { display:block; height:calc(1 * var(--s)); width:calc(43 * var(--s)); background:#d7dbaa; margin-top:calc(11 * var(--s)) }
.subjects { height:calc(368 * var(--s)) }
.subjects>.eyebrow { position:absolute; top:calc(28 * var(--s)); left:calc(25 * var(--s)) }
.subjects>.text-link { position:absolute; top:calc(23 * var(--s)); right:calc(21 * var(--s)) }
.subjects>h2 { position:absolute; top:calc(45 * var(--s)); left:calc(25 * var(--s)); font-size:calc(29 * var(--s)); line-height:calc(29 * var(--s)); letter-spacing:calc(-1.1 * var(--s)); white-space:nowrap }
.subject-grid { position:absolute; top:calc(120 * var(--s)); left:calc(22 * var(--s)); right:calc(17 * var(--s)); display:grid; grid-template-columns:repeat(4,1fr); gap:calc(8 * var(--s)) }
.subject { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(6 * var(--s)); height:calc(67 * var(--s)); min-width:0; padding:calc(7 * var(--s)) calc(2 * var(--s)); border:calc(1 * var(--s)) solid transparent; border-radius:calc(2 * var(--s)); background:#ffffffad; color:#133d37; transition:background .18s,border-color .18s }
.subject:hover { background:#e6ede5; border-color:#a1b9a9 }
.subject span { color:#232e40; font-size:calc(9.7 * var(--s)); line-height:calc(13 * var(--s)) }
.subject>.icon { width:calc(23 * var(--s)); height:calc(23 * var(--s)) }
.subject[data-subject="Mathematics"] .icon { --subject-icon:url('assets/subject-math.svg') }
.subject[data-subject="Biology"] .icon { --subject-icon:url('assets/subject-biology.svg') }
.subject[data-subject="Economics"] .icon { --subject-icon:url('assets/subject-economics.svg') }
.subject[data-subject="Mathematics"] .icon,.subject[data-subject="Biology"] .icon,.subject[data-subject="Economics"] .icon { background-color:currentColor; -webkit-mask:var(--subject-icon) center / contain no-repeat; mask:var(--subject-icon) center / contain no-repeat }
.subject[data-subject="Mathematics"] .icon use,.subject[data-subject="Biology"] .icon use,.subject[data-subject="Economics"] .icon use { display:none }
.cta { height:calc(249 * var(--s)); background-image:url('assets/cta-background.webp'); background-size:cover; background-position:center }
.cta>.eyebrow { position:absolute; left:calc(28 * var(--s)); top:calc(53 * var(--s)) }
.cta h2 { position:absolute; left:calc(28 * var(--s)); top:calc(71 * var(--s)); font-size:calc(39 * var(--s)); line-height:calc(45 * var(--s)); letter-spacing:calc(-1.3 * var(--s)); white-space:nowrap }
.cta-copy { position:absolute; left:calc(29 * var(--s)); top:calc(121 * var(--s)); font-size:calc(10.5 * var(--s)); line-height:calc(16 * var(--s)); white-space:nowrap }
.cta>.button { position:absolute; left:calc(30 * var(--s)); top:calc(153 * var(--s)); width:calc(165 * var(--s)); height:calc(40 * var(--s)); font-size:calc(10.5 * var(--s)); padding:calc(10 * var(--s)) calc(17 * var(--s)) }
.cta-signature { position:absolute; top:calc(168 * var(--s)); left:calc(321 * var(--s)); font-family:var(--serif); font-size:calc(6.6 * var(--s)); line-height:calc(13 * var(--s)); letter-spacing:calc(1.4 * var(--s)); text-transform:uppercase; color:#c6ceae }
.cta-signature span { display:block; height:calc(1 * var(--s)); width:calc(29 * var(--s)); margin-top:calc(10 * var(--s)); background:#b4bea2 }
.footer { position:relative; height:calc(72 * var(--s)) }
.footer>.wordmark { position:absolute; left:calc(31 * var(--s)); top:calc(17 * var(--s)); font-size:calc(23 * var(--s)); line-height:calc(29 * var(--s)); letter-spacing:calc(1.6 * var(--s)) }
.footer-tag { position:absolute; left:calc(164 * var(--s)); top:calc(30 * var(--s)); font-size:calc(6.5 * var(--s)); line-height:calc(9 * var(--s)); letter-spacing:calc(1.35 * var(--s)); text-transform:uppercase; color:#454c5c }
.footer-links { position:absolute; top:calc(23 * var(--s)); right:calc(123 * var(--s)); display:flex; gap:calc(15 * var(--s)) }
.footer-links button { border:0; padding:calc(3 * var(--s)) 0; background:none; color:#737986; font-size:calc(7.2 * var(--s)); line-height:calc(12 * var(--s)) }
.socials { position:absolute; top:calc(18 * var(--s)); right:calc(30 * var(--s)); display:flex; gap:calc(13 * var(--s)) }
.socials button { width:calc(15 * var(--s)); height:calc(19 * var(--s)); padding:0; background:none; border:0; color:#14222e; display:grid; place-items:center }
.socials .icon { width:calc(13 * var(--s)); height:calc(13 * var(--s)); stroke-width:1.7 }
.copyright { position:absolute; right:calc(32 * var(--s)); top:calc(48 * var(--s)); font-size:calc(7.3 * var(--s)); line-height:calc(11 * var(--s)); color:#737986 }
/* Interactive UI uses readable, unscaled sizes at every viewport. */
.skip-link { position:fixed; top:-80px; left:16px; z-index:100; background:#fff; color:#10392d; padding:12px 18px; font-size:16px }
.skip-link:focus { top:12px }
body.dialog-open { overflow:hidden }
dialog { width:min(580px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #ccd7ce; border-radius:8px; background:#f7f8f3; color:#172b24; box-shadow:0 30px 100px #071b2955; overscroll-behavior:contain }
dialog::backdrop { background:#071c18b3; backdrop-filter:blur(5px) }
.dialog-content { position:relative; padding:36px }
.dialog-content .eyebrow { font:10px/16px var(--sans); letter-spacing:2px; margin-bottom:12px }
.dialog-content h2 { margin:0 36px 16px 0; font:42px/.98 var(--serif); letter-spacing:-1.2px }
.dialog-description,.dialog-content #info-body p { font-size:14px; line-height:1.65; color:#576456; margin:0 0 18px }
.dialog-close { position:absolute; right:12px; top:12px; width:40px; height:40px; padding:8px; display:grid; place-items:center; background:transparent; border:0; border-radius:50%; color:#1e493a }
.dialog-close:hover { background:#e1e9df }
.dialog-close .icon { width:22px; height:22px; stroke-width:1.6 }
.preview-notice { padding:10px 12px; border-left:2px solid #8ba392; background:#e9eee6; font-size:12px; line-height:1.5; color:#3b5142; margin:16px 0 22px }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px 16px }
.field { display:flex; flex-direction:column; gap:6px; min-width:0 }
.field.full { grid-column:1 / -1 }
.field label { font-size:12px; line-height:18px; color:#354c3b }
.field input,.field select { width:100%; border:1px solid #b7c5b5; border-radius:3px; min-height:44px; padding:10px 12px; background:#fff; color:#183024; font-size:16px }
.dialog-content .button { min-height:44px; font-size:14px; line-height:20px; padding:10px 18px; gap:10px; border-radius:3px; margin-top:22px }
.dialog-content .arrow { width:18px; height:18px }
.dialog-content h3 { font:27px/1.2 var(--serif); margin-bottom:12px }
#assessment-summary>p { font-size:14px; line-height:1.6; color:#56634e; margin-bottom:14px; overflow-wrap:anywhere }
.plain-button { border:0; background:none; padding:12px; min-height:44px; color:#204f3a; font-size:14px }
.detail-subjects { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 }
.detail-subjects button { padding:12px; min-height:44px; background:#eef2eb; border:1px solid #d4dece; border-radius:3px; font-size:14px; color:#254431; text-align:left }
.info-note { background:#e8eee1; padding:14px; font-size:13px; line-height:1.6 }
.noscript-note { margin:0; padding:18px; background:#edf2e5; color:#254331; text-align:center; font:14px/1.5 var(--sans) }
[hidden] { display:none !important }
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .floating-card { transition:box-shadow .2s ease }
}
@media (max-width:900px) {
  :root { --s:1px }
  html { scroll-padding-top:18px }
  body { background:var(--paper); font-size:16px }
  .page { width:100% }
  .spread { display:block; background:var(--paper) }
  .left-column { width:auto }
  .header { position:relative; width:100%; height:76px; display:flex; align-items:center; padding:0 24px; gap:14px; background:var(--paper); z-index:10 }
  .header .wordmark { position:static; font-size:24px; line-height:30px; margin-right:auto }
  .nav-cta { position:static; width:auto; min-height:40px; font-size:11px; padding:10px 12px; gap:7px }
  .menu-toggle { display:grid; place-items:center; background:none; border:1px solid #c6d2c4; border-radius:3px; width:44px; height:44px; flex:none; padding:10px; color:#224a38 }
  .menu-toggle .icon { width:22px; height:22px }
  .nav-links { position:absolute; top:68px; left:18px; right:18px; height:auto; display:none; flex-direction:column; align-items:stretch; gap:0; padding:8px; background:#fbfcf6; border:1px solid #c7d3c4; box-shadow:0 15px 26px #1933201c; border-radius:4px; font-size:14px }
  .nav-links.is-open { display:flex }
  .nav-links a { padding:14px 16px; min-height:46px }
  .hero { height:auto; min-height:830px; padding:39px 24px 0 }
  .hero-copy { position:relative; left:auto; top:auto; width:100%; max-width:620px; margin-inline:auto }
  .hero-copy>.eyebrow { font-size:10px; line-height:16px; letter-spacing:1.8px }
  .hero h1 { font-size:clamp(44px,9.8vw,68px); line-height:.99; letter-spacing:-2.2px; margin-top:16px; white-space:normal }
  .hero h1 em { font-size:1.08em; letter-spacing:-2.5px }
  .intro { margin-top:20px; font-size:14px; line-height:23px; max-width:520px }
  .desktop-break { display:none }
  .hero-cta { width:178px; height:44px; margin-top:22px; font-size:13px; padding:12px 17px }
  .process { margin-top:25px; gap:12px; font-size:8px; line-height:13px; letter-spacing:1.2px; flex-wrap:wrap }
  .hero-signature { display:none }
  .hero-leaves { width:84px; height:103px; bottom:0; left:0 }
  .hero-art { position:relative; inset:auto; width:355px; height:411px; margin:18px auto 0; transform-origin:top center }
  .notes-one { left:70px; top:30px; width:246px; height:256px }
  .notes-two { left:37px; top:246px; width:190px; height:201px }
  .notes-three { left:142px; top:140px; width:196px; height:290px }
  .book { left:222px; top:16px; width:128px; height:167px }
  .book div { font-size:8px; line-height:13px; margin-left:37px }
  .diagnosis { left:77px; top:45px; width:202px; height:247px }
  .diagnosis h2 { font-size:16px }
  .skill-row { grid-template-columns:53px 80px 23px; font-size:8px; gap:7px }
  .scores { grid-template-columns:58px 52px 1fr }
  .weekly { left:11px; top:267px; width:172px; height:164px }
  .weekly h2 { font-size:10px }
  .weekly li { font-size:8px }
  .review { left:187px; top:255px; width:159px; height:177px }
  .reviewer small { font-size:6.6px }
  .problem { height:auto; padding:44px 24px 40px; background-size:cover; background-position:right center }
  .problem>.eyebrow,.problem h2,.problem-copy,.problem-grid { position:static }
  .problem>.eyebrow,.approach>.eyebrow,.teachers .eyebrow,.results>.eyebrow,.subjects>.eyebrow,.cta>.eyebrow { font-size:9px; line-height:14px; letter-spacing:1.8px }
  .problem h2 { font-size:44px; line-height:42px; margin-top:14px }
  .problem-copy { margin-top:24px; font-size:14px; line-height:23px; max-width:560px }
  .problem-grid { width:100%; margin-top:27px; grid-template-columns:1fr 1fr; gap:25px 20px }
  .problem-grid span { font-size:10px }
  .problem-grid h3 { font-size:15px; line-height:21px; margin-top:9px }
  .approach { height:auto; padding:44px 24px 34px }
  .approach>.eyebrow,.approach>h2,.approach-intro,.steps { position:static }
  .approach>.text-link { top:39px; right:24px; font-size:10px; min-height:28px }
  .approach>h2 { font-size:42px; line-height:40px; margin-top:14px }
  .approach-intro { font-size:14px; line-height:23px; margin-top:18px }
  .steps { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px }
  .step { height:auto; min-height:251px; padding:14px 12px 16px }
  .step-number { font-size:10px; line-height:14px }
  .step h3 { font-size:clamp(14px,3.9vw,20px); line-height:22px; margin-top:6px; margin-bottom:10px; white-space:normal; min-height:22px }
  .step-visual { height:117px }
  .step>p { font-size:11px; line-height:17px; margin-top:12px }
  .plan-visual { display:flex; align-items:center; justify-content:center; padding:8px 5px }
  .plan-visual li { font-size:clamp(6.8px,2vw,10px); gap:5px; line-height:17px }
  .review-visual { padding:8px }
  .mini-quote { font-size:8px; line-height:11px; padding-top:6px }
  .chart-visual strong { top:10px; right:10px; font-size:14px }
  .chart-visual svg { height:82px; inset:auto 4px 6px; width:calc(100% - 8px) }
  .teachers { height:auto; min-height:497px; padding:43px 24px 238px; background-position:72% bottom; background-size:auto 430px; background-repeat:no-repeat; background-color:#142f27 }
  .teachers::before { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(#152f28 0%,#152f28 28%,#152f2800 85%); pointer-events:none }
  .teacher-copy { position:relative; left:auto; top:auto; z-index:1 }
  .teacher-copy h2 { font-size:34px; line-height:34px; margin-top:15px }
  .teacher-copy>p:not(.eyebrow) { font-size:13px; line-height:22px; max-width:430px; margin-top:18px }
  .teacher-copy .button { width:170px; height:42px; font-size:12px; margin-top:20px }
  .teacher-quote { left:auto; right:24px; top:auto; bottom:27px; font-size:13px; line-height:17px; padding:10px; background:#10291d78 }
  .teacher-quote cite { font-size:9px; line-height:14px; margin-top:10px }
  .right-top,.right-bottom { display:none }
  .results { height:auto; padding:43px 24px 33px }
  .results>.eyebrow,.results>h2,.result-grid { position:static }
  .results>.text-link { top:37px; right:24px; font-size:10px; min-height:28px }
  .results>h2 { font-size:clamp(30px,7.1vw,42px); line-height:1.02; letter-spacing:-1.3px; white-space:normal; margin-top:16px }
  .result-grid { margin-top:26px; gap:10px; grid-template-columns:1fr }
  .result-card { height:auto; min-height:164px; padding:19px 17px; display:grid; grid-template-columns:90px 1fr; column-gap:14px }
  .result-card h3 { grid-column:1/-1; font-size:12px; line-height:18px; margin-bottom:8px }
  .result-score { font-size:42px; line-height:48px; margin-top:0; align-self:start }
  .result-card blockquote { font-size:12px; line-height:19px; margin-top:4px }
  .attribution { position:static; grid-column:1/-1; margin-top:14px; font-size:9px; line-height:14px }
  .campus { height:490px; background-size:cover; background-position:center center }
  .campus-copy { left:24px; top:auto; bottom:30px; right:24px }
  .campus .eyebrow { font-size:9px; line-height:14px }
  .campus h2 { font-size:41px; line-height:38px; margin-top:14px }
  .campus-copy>p:not(.eyebrow) { font-size:13px; line-height:22px; max-width:290px; margin-top:16px }
  .campus .button { width:151px; height:42px; font-size:12px; margin-top:22px }
  .campus-signature { display:none }
  .subjects { height:auto; padding:42px 24px 38px }
  .subjects>.eyebrow,.subjects>h2,.subject-grid { position:static }
  .subjects>.text-link { top:36px; right:24px; font-size:10px; min-height:28px }
  .subjects>h2 { white-space:normal; font-size:34px; line-height:33px; margin-top:15px; letter-spacing:-1.1px }
  .subject-grid { margin-top:24px; grid-template-columns:repeat(3,1fr); gap:9px }
  .subject { height:87px; gap:9px }
  .subject .icon { width:28px; height:28px }
  .subject span { font-size:11px; line-height:15px }
  .cta { height:auto; min-height:280px; padding:45px 24px 44px; background-size:cover; background-position:center }
  .cta>.eyebrow,.cta h2,.cta-copy,.cta>.button { position:static }
  .cta h2 { font-size:clamp(33px,8.7vw,46px); line-height:1.06; margin-top:14px; white-space:normal }
  .cta-copy { font-size:13px; line-height:22px; max-width:520px; margin-top:14px; white-space:normal }
  .cta>.button { width:178px; height:46px; font-size:13px; margin-top:24px }
  .cta-signature { display:none }
  .footer { height:auto; padding:31px 24px 26px; display:flex; flex-wrap:wrap; align-items:center; gap:18px 16px }
  .footer>.wordmark,.footer-tag,.footer-links,.socials,.copyright { position:static }
  .footer>.wordmark { font-size:25px; line-height:30px }
  .footer-tag { order:1; width:100%; font-size:7px; line-height:12px; letter-spacing:1.5px; margin-top:-9px }
  .socials { margin-left:auto; gap:8px }
  .socials button { width:30px; height:40px }
  .socials .icon { width:17px; height:17px }
  .footer-links { order:2; width:100%; gap:25px }
  .footer-links button { font-size:12px; line-height:18px; padding:9px 0; min-height:38px }
  .copyright { order:3; font-size:10px; line-height:16px }
}
@media (min-width:600px) and (max-width:900px) {
  .hero { padding-top:48px; min-height:870px }
  .hero-art { transform:scale(1.08); margin-top:26px }
  .steps { grid-template-columns:repeat(4,1fr) }
  .step { padding:14px 10px }
  .step h3 { font-size:17px; min-height:42px }
  .result-grid { grid-template-columns:repeat(3,1fr) }
  .result-card { display:flex; flex-direction:column; min-height:250px; padding:18px }
  .result-card h3 { font-size:10px }
  .result-card blockquote { margin-top:12px }
  .attribution { margin-top:auto; padding-top:18px; font-size:8px }
  .subject-grid { grid-template-columns:repeat(4,1fr) }
  .campus { background-position:center 40%; height:560px }
}
@media (max-width:420px) {
  .header .nav-cta { display:none }
  .header .wordmark { font-size:23px }
  .hero { padding-inline:22px }
  .hero-art { width:355px; left:50%; margin-left:-177.5px }
}
@media (max-width:370px) {
  .hero { min-height:810px }
  .hero-art { transform:scale(.86); height:365px; margin-top:15px }
  .hero h1 { font-size:43px; letter-spacing:-1.9px }
  .hero h1 em { font-size:47px }
  .intro { font-size:13px; line-height:22px }
  .process { gap:9px; font-size:7.3px; letter-spacing:.8px }
  .problem,.approach,.results,.subjects { padding-inline:20px }
  .step { padding-inline:8px }
  .step h3 { font-size:13.2px; letter-spacing:-.4px }
  .step>p { font-size:10px; line-height:16px }
  .plan-visual { padding-inline:3px }
  .plan-visual li { gap:3px; font-size:6.8px }
  .plan-visual li>span { width:13px; height:13px }
  .mini-quote { font-size:6.8px; line-height:10px; padding-left:10px }
  .mini-quote>span { left:3px }
  .teacher-copy h2 { font-size:30px; line-height:31px }
  .campus h2 { font-size:36px; line-height:35px }
  .subjects>h2 { font-size:30px; line-height:29px }
  .subject span { font-size:9.5px }
  .subject-grid { gap:6px }
  .footer { padding-inline:20px }
  .footer>.wordmark { font-size:22px }
  .socials { gap:3px }
  .socials button { width:25px }
}
@media (max-width:480px) {
  .dialog-content { padding:30px 22px 24px }
  .dialog-content h2 { font-size:35px }
  .form-grid { grid-template-columns:1fr; gap:14px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
}