One component everywhere; heights are tuned per logo for optical balance.
===================================================================== */.ods-site .rl{display:flex;align-items:center;gap:14px;min-height:28px;margin-top:14px;}
.ods-site .rl .rl-i{display:block;width:auto;height:22px;max-width:118px;border-radius:0;object-fit:contain;filter:none;flex:none;}
.ods-site .rl .rl-i + .rl-i{padding-left:14px;border-left:1px solid var(--line2);box-sizing:content-box;}
.ods-site .rl .rl-i[src*="uni_bristol"]{height:26px;}
.ods-site .rl .rl-i[src*="uni_warwick"]{height:26px;}
.ods-site .rl .rl-i[src*="uni_kcl"]{height:26px;}
.ods-site .rl .rl-i[src*="uni_exeter"]{height:24px;}
.ods-site .rl .rl-i[src*="uni_manchester"]{height:24px;}
.ods-site .rl .rl-i[src*="morganstanley"]{height:26px;}
.ods-site .rl .rl-i[src*="goldman"]{height:26px;}
.ods-site .rl .rl-i[src*="nomura"]{height:16px;}
.ods-site .rl .rl-i[src*="barclays"]{height:15px;}
.ods-site .rl .rl-i[src*="bnp"]{height:22px;}
.ods-site .rl .rl-i[src*="deutsche"]{height:18px;}
.ods-site .rl .rl-i[src*="jpmorgan"]{height:18px;}
.ods-site .rl--top{margin:0 0 14px;}
.ods-site .tc .rl--top{margin-bottom:12px;}
@media (max-width:760px){.ods-site .rl{gap:12px;}
.ods-site .rl .rl-i + .rl-i{padding-left:12px;}}
/* Phone (31 Oct): logos read larger on small cards. Optical balance by aspect:
crests and square marks tallest, mid lockups 26, wide wordmarks 18 to 20 (never under 18). */.ods-site @media (max-width:760px){
.rl{min-height:30px;flex-wrap:nowrap;}
.rl .rl-i{height:22px;max-width:128px;}
.rl .rl-i[src*="uni_bristol"]{height:30px;}
.rl .rl-i[src*="uni_kcl"]{height:30px;}
.rl .rl-i[src*="uni_warwick"],.rl .rl-i[src*="morganstanley"],.rl .rl-i[src*="goldman"]{height:28px;}
.rl .rl-i[src*="uni_exeter"],.rl .rl-i[src*="uni_manchester"],.rl .rl-i[src*="bnp"]{height:26px;}
.rl .rl-i[src*="deutsche"],.rl .rl-i[src*="jpmorgan"]{height:20px;}
.rl .rl-i[src*="nomura"]{height:19px;}
.rl .rl-i[src*="barclays"]{height:18px;}
.mini .rl{min-height:0;}
}
/* =====================================================================
DESK-READY INSTRUMENT (.di): six strands on a ruled 1 to 5 scale, with
start (ring), mid-point (dot) and end (ember disc with the score).
.di-tot (totals, doubles as the key) · .di-ru (ruler)
ol.di-rows > li[style="--s:2;--m:4;--e:5"] > .di-n (name + plain words) + .di-tr (track)
.di-ex (what good looks like). Variants: .di--desc (1 and 5 written under
each row), .di-key (compact one-line totals). Without JS, in reduced motion
and in renders it is drawn finished; real visitors see the markers slide in
(start, then mid-point, then end) while the totals count 12, 19, 26.
===================================================================== */.ods-site .di{--dn:216px;--dg:28px;--pad:13px;}
.ods-site .di-tot{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:end;column-gap:16px;padding:18px 0 16px;}
.ods-site .di-tot > div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;row-gap:6px;}
.ods-site .di-tot small{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.ods-site .di-tot b{grid-column:1/-1;font-size:40px;font-weight:600;font-stretch:108%;letter-spacing:-.035em;line-height:.9;color:var(--ink3);font-variant-numeric:tabular-nums lining-nums;}
.ods-site .di-tot .m b{color:var(--ink2);}
.ods-site .di-tot .e b{font-size:72px;color:var(--ink);}
.ods-site .di-tot .e b sub{font-size:18px;font-weight:500;letter-spacing:0;color:var(--ink3);vertical-align:baseline;bottom:0;margin-left:2px;}
.ods-site .di-tot .ar{height:1px;background:var(--line2);margin-bottom:16px;position:relative;}
.ods-site .di-tot .ar::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--line2);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;}
/* marker glyphs (shared by totals, key and track) */.ods-site .di .g{display:inline-block;width:10px;height:10px;border-radius:50%;box-sizing:border-box;flex:none;}
.ods-site .di .g.s{border:2px solid var(--ink);background:#fff;}
.ods-site .di .g.m{background:var(--mid);}
.ods-site .di .g.e{background:var(--acc);width:12px;height:12px;}
/* compact key: Example · ring Start 12 · dot Mid-point 19 · disc End 26/30 */.ods-site .di-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:0 0 14px;font-size:14px;color:var(--ink2);}
.ods-site .di-key > span{display:inline-flex;align-items:center;gap:8px;}
.ods-site .di-key b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;font-size:16px;}
.ods-site .di-key .tag{color:var(--ink);}
/* ruler: numerals over the track column */.ods-site .di-ru{display:grid;grid-template-columns:var(--dn) 1fr;column-gap:var(--dg);align-items:end;border-top:1px solid var(--ink);padding-top:10px;}
.ods-site .di-ru > span:first-child{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.ods-site .di-ru .ax{position:relative;height:16px;margin:0 var(--pad);}
.ods-site .di-ru .ax span{position:absolute;bottom:0;transform:translateX(-50%);font-size:12.5px;font-weight:600;line-height:1;color:var(--ink3);font-variant-numeric:tabular-nums lining-nums;}
.ods-site .di-ru .ax span:last-child{color:var(--acc);}
/* rows */.ods-site .di-rows{list-style:none;margin:0;padding:0;}
.ods-site .di-rows > li{display:grid;grid-template-columns:var(--dn) 1fr;column-gap:var(--dg);align-items:center;padding:11px 0;border-bottom:1px solid var(--line);}
.ods-site .di-rows > li:last-child{border-bottom:0;}
.ods-site .di-n b{display:block;font-size:19px;font-weight:600;letter-spacing:-.016em;line-height:1.2;}
.ods-site .di-n b small{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-left:8px;vertical-align:2px;}
.ods-site .di-n > span{display:block;font-size:14px;color:var(--ink2);line-height:1.3;margin-top:2px;}
.ods-site .di-tr{position:relative;height:30px;margin:0 var(--pad);}
.ods-site .di-tr::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line2);}
.ods-site .di-tr::after{content:"";position:absolute;left:0;width:calc(100% + 1px);top:50%;height:9px;margin-top:-4px;background:linear-gradient(90deg,var(--line2) 1px,transparent 1px) 0 0/25% 100% repeat-x;}
.ods-site .di-tr i{position:absolute;top:50%;font-style:normal;}
.ods-site .di-tr .l1,.ods-site .di-tr .l2{height:2px;margin-top:-1px;z-index:1;}
.ods-site .di-tr .l1{left:calc((var(--s) - 1) / 4 * 100%);width:calc((var(--m) - var(--s)) / 4 * 100%);background:var(--mid);}
.ods-site .di-tr .l2{left:calc((var(--m) - 1) / 4 * 100%);width:calc((var(--e) - var(--m)) / 4 * 100%);background:var(--acc);}
.ods-site .di-tr .s,.ods-site .di-tr .m,.ods-site .di-tr .e{border-radius:50%;box-sizing:border-box;transform:translate(-50%,-50%);}
.ods-site .di-tr .s{left:calc((var(--s) - 1) / 4 * 100%);width:11px;height:11px;border:2px solid var(--ink);background:#fff;z-index:3;}
.ods-site .di-tr .m{left:calc((var(--m) - 1) / 4 * 100%);width:11px;height:11px;background:var(--mid);z-index:2;}
.ods-site .di-tr .e{left:calc((var(--e) - 1) / 4 * 100%);width:26px;height:26px;background:var(--acc);color:#fff;z-index:4;display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums lining-nums;box-shadow:0 0 0 3px #fff;}
/* .di--desc: the written 1 and 5 under each track */.ods-site .di--desc .di-rows > li{align-items:start;padding:13px 0 12px;}
.ods-site .di--desc .di-n{padding-top:4px;}
.ods-site .di--desc{--dn:176px;}
.ods-site .di-d{display:flex;justify-content:space-between;gap:18px;margin:4px 0 0;font-size:13.5px;line-height:1.35;color:var(--ink2);}
.ods-site .di-d p{max-width:46%;}
.ods-site .di-d p:last-child{text-align:right;color:var(--ink);font-weight:500;}
.ods-site .di-d em{font-style:normal;font-weight:600;font-size:11.5px;margin-right:6px;color:var(--ink3);font-variant-numeric:tabular-nums lining-nums;}
.ods-site .di-d p:last-child em{color:var(--acc);}
/* what good looks like: aligned to the same scale */.ods-site .di-ex{display:grid;grid-template-columns:var(--dn) 1fr;column-gap:var(--dg);align-items:start;margin-top:4px;padding-top:14px;border-top:1px solid var(--ink);}
.ods-site .di-ex .k small{display:block;font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.ods-site .di-ex .k b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:3px;}
.ods-site .di-ex .sc{margin:0 var(--pad);}
.ods-site .di-ex .bar{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:6px 0 0;}
.ods-site .di-ex .bar i{height:4px;background:var(--paper2);}
.ods-site .di-ex .bar i:first-child{background:var(--line2);}
.ods-site .di-ex .bar i:last-child{background:var(--acc);}
.ods-site .di-ex .ends{display:flex;justify-content:space-between;gap:20px;text-wrap:balance;margin-top:9px;font-size:14px;line-height:1.35;color:var(--ink2);}
.ods-site .di-ex .ends span:last-child{text-align:right;color:var(--ink);font-weight:600;}
.ods-site .di-ex .ends em{font-style:normal;font-weight:600;font-size:12px;margin-right:6px;color:var(--ink3);font-variant-numeric:tabular-nums lining-nums;}
.ods-site .di-ex .ends span:last-child em{color:var(--acc);}
/* home + framework page: the instrument as a signed document */.ods-site .di-doc{padding:22px 30px 18px;}
.ods-site .di-doc .ud-meta b{color:var(--ink);font-weight:600;}
/* motion (site.js adds .anim on and .in when the instrument is seen) */.ods-site .anim .di .di-tr .m,.ods-site .anim .di .di-tr .e{transition:left .9s var(--ease),opacity .35s var(--ease);}
.ods-site .anim .di .di-tr .l1,.ods-site .anim .di .di-tr .l2{transition:width .9s var(--ease);}
.ods-site .anim .di .di-tot > div,.ods-site .anim .di .di-key > span{transition:opacity .4s var(--ease);}
.ods-site .anim .di:not(.in) .di-tr .m{left:calc((var(--s) - 1) / 4 * 100%);opacity:0;}
.ods-site .anim .di:not(.in) .di-tr .l1{width:0;}
.ods-site .anim .di:not(.in) .di-tr .e,.ods-site .anim .di.in:not(.p2) .di-tr .e{left:calc((var(--m) - 1) / 4 * 100%);opacity:0;}
.ods-site .anim .di:not(.in) .di-tr .l2,.ods-site .anim .di.in:not(.p2) .di-tr .l2{width:0;}
.ods-site .anim .di:not(.in) .di-tot .m,.ods-site .anim .di:not(.p2) .di-tot .e,.ods-site .anim .di:not(.in) .di-key .m,.ods-site .anim .di:not(.p2) .di-key .e{opacity:.22;}
.ods-site .anim .di .di-rows > li:nth-child(2) i{transition-delay:.06s;}
.ods-site .anim .di .di-rows > li:nth-child(3) i{transition-delay:.12s;}
.ods-site .anim .di .di-rows > li:nth-child(4) i{transition-delay:.18s;}
.ods-site .anim .di .di-rows > li:nth-child(5) i{transition-delay:.24s;}
.ods-site .anim .di .di-rows > li:nth-child(6) i{transition-delay:.3s;}
/* home: text column + instrument */.ods-site .fwx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,760px);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". di" "hd di" "ft di" ". di";column-gap:72px;}
.ods-site .fwx > .di{grid-area:di;}
.ods-site .fwx-hd{grid-area:hd;}
.ods-site .fwx-ft{grid-area:ft;}
.ods-site .fwx .intro{font-size:19px;color:var(--ink2);margin-top:18px;max-width:420px;}
.ods-site .fwx .par{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding-top:16px;border-top:1px solid var(--line2);font-size:16px;color:var(--ink);font-weight:500;max-width:420px;line-height:1.4;}
.ods-site .fwx .par svg{flex:none;margin-top:1px;}
.ods-site .fwx .fwfoot{flex-direction:column;align-items:flex-start;gap:0;margin-top:12px;}
@media (max-width:1100px){.ods-site .fwx{grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:40px;}
.ods-site .di{--dn:160px;--dg:20px;}
.ods-site .di-tot .e b{font-size:60px;}}
@media (max-width:900px){.ods-site .fwx{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"hd" "di" "ft";row-gap:24px;}
.ods-site .fwx .intro,.ods-site .fwx .par{max-width:none;}
.ods-site .fwx .par{margin-top:0;}}
@media (max-width:760px){.ods-site .di{--pad:12px;}
.ods-site .di-doc{padding:16px 16px 14px;}
.ods-site .di-tot{column-gap:10px;padding:14px 0 12px;}
.ods-site .di-tot b{font-size:30px;}
.ods-site .di-tot .e b{font-size:48px;}
.ods-site .di-tot .e b sub{font-size:15px;}
.ods-site .di-tot small{font-size:10.5px;letter-spacing:.06em;}
.ods-site .di-tot .ar{margin-bottom:12px;}
.ods-site .di-ru,.ods-site .di-rows > li,.ods-site .di-ex{grid-template-columns:1fr;}
.ods-site .di-ru > span:first-child{display:none;}
.ods-site .di-rows > li{padding:10px 0 6px;}
.ods-site .di-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;}
.ods-site .di-n b{font-size:16.5px;}
.ods-site .di-n > span{font-size:13px;margin:0;}
.ods-site .di-tr{height:30px;margin-top:4px;}
.ods-site .di--desc .di-rows > li{padding:10px 0 10px;}
.ods-site .di--desc .di-n{padding-top:0;}
.ods-site .di-d{font-size:12.5px;gap:12px;}
.ods-site .di-key{gap:6px 12px;font-size:13px;}
.ods-site .di-ex .k{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.ods-site .di-ex .k b{font-size:15.5px;margin:0;}
.ods-site .di-ex .sc{margin:8px 0 0;}
.ods-site .di-ex .ends{font-size:13px;gap:14px;}
.ods-site .fwx .intro{font-size:16px;margin-top:10px;}
.ods-site .fwx .par{font-size:15px;margin-top:16px;padding-top:12px;}}
/* upd-doc score rows drawn as small instruments: start ring, mid-point dot, end disc */.ods-site .sb .bar{height:12px;background:linear-gradient(var(--line2),var(--line2)) 0 50%/100% 1px no-repeat;}
.ods-site .sb .bar span{top:5px;bottom:auto;height:2px;}
.ods-site .sb .bar span::after{content:"";position:absolute;right:0;top:50%;border-radius:50%;transform:translate(50%,-50%);box-sizing:border-box;}
.ods-site .sb .bar .s{background:#fff;}
.ods-site .sb .bar .s::after{width:9px;height:9px;border:2px solid var(--ink);background:#fff;}
.ods-site .sb .bar .m{background:var(--mid);}
.ods-site .sb .bar .m::after{width:9px;height:9px;background:var(--mid);}
.ods-site .sb .bar .e{background:var(--acc);}
.ods-site .sb .bar .e::after{width:12px;height:12px;background:var(--acc);box-shadow:0 0 0 2px #fff;}
.ods-site .legend span::before{width:9px;height:9px;border-radius:50%;box-sizing:border-box;background:#fff;border:2px solid var(--ink);vertical-align:-1px;}
.ods-site .legend span.m::before{background:var(--mid);border:0;}
.ods-site .legend span.e::before{background:var(--acc);border:0;}
/* result logos in context */.ods-site .pqby + .rl{margin-top:12px;}
.ods-site .mini .rl{margin:7px 0 2px;min-height:0;}
.ods-site .rvg .rl,.ods-site .revs .rl{margin-top:12px;}
.ods-site .res .rl--top{margin-bottom:10px;}
.ods-site .tb h3 + .rl{margin-top:14px;}
/* continuation sections (inline padding-top:0) read as part of the section above: no opener rule */.ods-site .sec[style*="padding-top:0"] > .wrap:first-child{border-top:0;padding-top:0;}
/* the footer turns white when the page ends on a paper section */.ods-site main:has(> section:last-child.sec--paper) ~ .foot{background:#fff;}
/* nested sub-sections (a continuation inside the section above, same background) */.ods-site .subsec{margin-top:var(--sec);}
.ods-site .subsec.rule-top{padding-top:calc(var(--sec) * .6);}
/* page heads on paper where the first section below is white */.ods-site .phd--paper{background:var(--paper);border-bottom:0;}
/* a season chart that opens a section already carries its own top rule */.ods-site .sec > .wrap:first-child:has(> .ssn:first-child){border-top:0;padding-top:0;}
/* =====================================================================
PHONE LENGTH (31 Oct): on the longest pages the section gap steps down
from 48 to 40px on phone. Openings (rule, label, headline) are kept and
the gap between sections stays clearly larger than gaps inside them.
===================================================================== */.ods-site @media (max-width:760px){
.page-home,.page-programme,.page-programmes,.page-framework,.page-about,.page-parents,.page-careers,.page-one{--sec:40px;}
/* breadcrumb on one line: the current page repeats the h1, so it stays for screen readers only */
:is(.page-programme,.page-programmes,.page-framework,.page-about,.page-parents,.page-careers,.page-one,.page-policy) .crumbs{flex-wrap:nowrap;white-space:nowrap;}
:is(.page-programme,.page-programmes,.page-framework,.page-about,.page-parents,.page-careers,.page-one,.page-policy) .crumbs > span[aria-hidden]:nth-last-child(2){display:none;}
:is(.page-programme,.page-programmes,.page-framework,.page-about,.page-parents,.page-careers,.page-one,.page-policy) .crumbs > [aria-current]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.page-programme .xgrid a,.page-programme .xgrid a:not(:first-child){padding:9px 0;}
.page-programme .mini + .clip-btn{margin-top:0;}
}
/* phone-only section tabs ([data-ptabs], behaviour in site.js): two blocks that compete
for the same screen share one slot on phone; desktop shows both */.ods-site .ptabs{display:none;}
@media (max-width:760px){.ods-site .js .ptabs{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 14px;}
.ods-site .ptabs button{position:relative;min-height:48px;padding:6px 10px;background:transparent;border:1px solid var(--line2);font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--ink2);cursor:pointer;}
.ods-site .ptabs button + button{margin-left:-1px;}
.ods-site .ptabs button[aria-selected="true"]{z-index:1;background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:inset 0 3px 0 var(--acc);}
.ods-site .sec--ink .ptabs button[aria-selected="true"]{background:var(--night2);}
.ods-site .js [data-pp].pp-off{display:none !important;}}
/* =====================================================================
THE ROAD, YEAR BY YEAR (home, 31 Oct): the route and the application
windows in one timeline. Built on .tl, so site.js fills the ember rule
with scroll and lights the year it reaches (.is-on / .is-cur).
.rule > span · .st-i (6 years; .ap = applications
open in its autumn: .rd-ap label, .rd-win autumn tab on the road,
.rd-hop arc landing on the next year; .now adds the Today tick) ·
.rd-go programme links (g1 spans Years 12 and 13) · then .rd-ft.
Each door opens a year before the stage it leads to: the arc shows it.
Phone: vertical, the autumn tab sits on the rail beside the dates.
===================================================================== */.ods-site .road{grid-template-columns:repeat(6,1fr);margin-top:clamp(64px,6vw,84px);}
.ods-site .road > .rule{top:0;}
.ods-site .road > .st-i{padding:24px 22px 0 0;grid-row:1;}
.ods-site .road .k{font-size:11.5px;line-height:1.3;}
.ods-site .road .rd-t{font-size:20px;font-weight:600;letter-spacing:-.018em;line-height:1.15;margin-top:6px;transition:color .3s;}
.ods-site .road .rd-d{font-size:14.5px;color:var(--ink2);line-height:1.45;margin-top:8px;}
.ods-site .rd-w{list-style:none;margin-top:10px;border-top:1px solid var(--line2);}
.ods-site .rd-w li{display:grid;grid-template-columns:1fr;padding:5px 0 6px;border-bottom:1px solid var(--line2);font-size:14px;line-height:1.35;color:var(--ink2);}
.ods-site .rd-w strong{display:block;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;font-size:14.5px;}
.ods-site .road .rd-today{margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--ink2);}
.ods-site .rd-today strong{display:block;color:var(--acc);font-weight:600;font-variant-numeric:tabular-nums lining-nums;}
/* autumn marker, label and the hop to the next year (desktop) */.ods-site .rd-ap{position:absolute;left:0;top:-50px;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:12px;color:var(--acc);white-space:nowrap;}
.ods-site .rd-win{position:absolute;left:14px;top:-3px;width:calc(33.3% - 14px);height:8px;background:var(--acc);border-radius:1px;}
.ods-site .rd-hop{position:absolute;top:-44px;left:94px;right:-7px;height:36px;border-top:1.5px dashed var(--acc);border-right:1.5px dashed var(--acc);border-radius:0 100% 0 0 / 0 100% 0 0;pointer-events:none;}
.ods-site .rd-hop::after{content:"";position:absolute;right:-5.5px;bottom:-2px;border:4.5px solid transparent;border-top:6px solid var(--acc);border-bottom:0;}
.ods-site .rd-now{position:absolute;left:calc(16.7% + 2px);top:-12px;width:2px;height:26px;background:var(--ink);}
.ods-site .road{padding-top:0;}
.ods-site .road > .st-i.ap:first-of-type{margin-top:0;}
/* programme links under the years; the University Programme spans Years 12 and 13 */.ods-site .rd-go{grid-row:2;position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:22px 22px 0 0;padding-top:12px;border-top:1px solid var(--line2);font-size:15px;font-weight:600;line-height:1.3;min-height:44px;transition:color .2s;}
.ods-site .rd-go::before,.ods-site .rd-go::after{content:"";position:absolute;top:-4px;width:1px;height:7px;background:var(--line2);}
.ods-site .rd-go::before{left:0;}
.ods-site .rd-go::after{right:0;}
.ods-site .rd-go .n{border-bottom:1.5px solid var(--ul);padding-bottom:1px;}
.ods-site .rd-go .px{margin-top:4px;font-size:14px;font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums lining-nums;}
.ods-site .rd-go:hover .n{color:var(--acc);}
.ods-site .rd-go.g1{grid-column:1 / 3;}
.ods-site .rd-go.g2{grid-column:3;}
.ods-site .rd-go.g3{grid-column:4;}
.ods-site .rd-go.g4{grid-column:5;}
.ods-site .rd-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;margin-top:clamp(26px,3vw,40px);padding-top:12px;border-top:1px solid var(--line2);}
.ods-site .rd-key{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;color:var(--ink3);}
.ods-site .rd-key span{display:inline-flex;align-items:center;gap:8px;}
.ods-site .rd-key i{display:inline-block;width:20px;height:6px;background:var(--acc);}
.ods-site .rd-key i.n{width:2px;height:14px;background:var(--ink);}
.ods-site .rd-src{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;font-size:13.5px;color:var(--ink3);}
.ods-site .rd-src .lnk{font-size:15px;color:var(--ink);}
/* without JS the destination is marked, as on .tl */.ods-site .road:not([data-pm]) > .st-i:last-of-type::before{background:var(--acc);}
.ods-site .road:not([data-pm]) > .st-i:last-of-type .k{color:var(--acc);}
/* scroll states: reached years in full ink, the current one lit */.ods-site .road[data-pm]:not([data-still]) > .st-i .rd-t{color:var(--ink2);font-weight:500;}
.ods-site .road[data-pm] > .st-i.is-on .rd-t{color:var(--ink);font-weight:600;}
.ods-site .road[data-pm] > .st-i.is-cur .rd-t{color:var(--ink);font-weight:700;}
@media (min-width:761px) and (max-width:1100px){.ods-site .road > .st-i{padding-right:14px;}
.ods-site .road .rd-t{font-size:18px;}
.ods-site .rd-go{margin-right:14px;font-size:14px;}
.ods-site .rd-hop{left:88px;}}
@media (max-width:760px){.ods-site .road{margin-top:20px;grid-template-columns:1fr;padding-left:30px;}
.ods-site .road > .st-i{grid-row:auto;padding:0 0 18px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;}
.ods-site .road > .st-i > *{grid-column:1 / -1;}
.ods-site .road > .st-i > .k{grid-column:1;grid-row:1;}
.ods-site .road > .st-i > .rd-ap{grid-column:2;grid-row:1;position:static;line-height:1.3;}
.ods-site .road > .st-i:nth-of-type(2){order:1;}
.ods-site .road > .st-i:nth-of-type(3){order:2;}
.ods-site .rd-go.g1{order:3;}
.ods-site .road > .st-i:nth-of-type(4){order:4;}
.ods-site .rd-go.g2{order:5;}
.ods-site .road > .st-i:nth-of-type(5){order:6;}
.ods-site .rd-go.g3{order:7;}
.ods-site .road > .st-i:nth-of-type(6){order:8;}
.ods-site .rd-go.g4{order:9;}
.ods-site .road > .st-i:nth-of-type(7){order:10;padding-bottom:0;}
.ods-site .road .rd-t{font-size:19px;margin-top:2px;}
.ods-site .road .rd-d{font-size:14.5px;margin-top:3px;}
.ods-site .rd-hop,.ods-site .rd-win,.ods-site .rd-now{display:none;}
.ods-site .rd-ap::before{content:"· ";color:var(--ink3);}
.ods-site .rd-w{position:relative;margin-top:4px;border-top:0;}
.ods-site .st-i.ap .rd-w::before{content:"";position:absolute;left:-27px;top:3px;bottom:3px;width:6px;background:var(--acc);border-radius:1px;}
.ods-site .rd-w li{grid-template-columns:92px 1fr;column-gap:10px;padding:2px 0;border-bottom:0;line-height:1.35;}
.ods-site .road .rd-today{margin-top:4px;font-size:14px;}
.ods-site .rd-today strong{display:inline;margin-right:4px;}
.ods-site .road > .rd-go.rd-go{grid-row:auto;grid-column:auto;margin:-12px 0 16px;padding:0;min-height:32px;border-top:0;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:8px;font-size:14.5px;}
.ods-site .rd-go::before{display:block;content:"";left:-4px;right:-4px;top:50%;width:auto;height:44px;transform:translateY(-50%);background:none;}
.ods-site .rd-go::after{display:none;}
.ods-site .rd-go .px{margin-top:0;font-size:14px;}
.ods-site .rd-go .px::before{content:"· ";}
.ods-site .rd-ft{display:block;margin-top:18px;padding-top:8px;}
.ods-site .rd-key{display:none;}
.ods-site .rd-src{column-gap:12px;}
.ods-site .rd-src .lnk{font-size:14.5px;}}
/* Advisor logos */.ods-site .team .rl{display:flex;margin-top:12px;gap:10px;min-height:20px;flex-wrap:wrap;row-gap:8px;}
.ods-site .team .rl .rl-i{height:18px;max-width:none;}
.ods-site .team .rl .rl-i + .rl-i{padding-left:10px;}
.ods-site .team .rl .rl-i[src*="bofa"]{height:13px;}
.ods-site .team .rl .rl-i[src*="deutsche"],.ods-site .team .rl .rl-i[src*="jpmorgan"]{height:13px;}
.ods-site .team .rl .rl-i[src*="cambridge"]{height:17px;}
.ods-site .team .fx{color:var(--ink);font-weight:600;font-size:13px;margin-top:6px;}
.ods-site .team .fd .rl{margin-top:14px;}
.ods-site .ad .rl{margin:8px 0 12px;}
.ods-site .ad .rl .rl-i[src*="cambridge"]{height:22px;}
/* The advisor firm marks added later (IMC Trading, Citi, PIMCO, Bloomberg, DRW,
LMR Partners), sized so each reads level with the J.P. Morgan and Deutsche
Bank marks in the same row. The homepage strip sets those at 16px, /advisors
at 18px, so the wide wordmarks sit a little shorter and the compact marks a
little taller; the height is the only thing that changes, so they stay in
colour with the same thin divider and no box behind them. */
.ods-site .team .rl .rl-i[src*="logo_imc"]{height:16px;}
.ods-site .team .rl .rl-i[src*="logo_citi"]{height:18px;}
.ods-site .team .rl .rl-i[src*="logo_pimco"]{height:13px;}
.ods-site .team .rl .rl-i[src*="logo_bloomberg"]{height:12px;}
.ods-site .team .rl .rl-i[src*="logo_drw"]{height:13px;}
.ods-site .team .rl .rl-i[src*="logo_lmr"]{height:17px;}
.ods-site .ad .rl .rl-i[src*="logo_imc"]{height:21px;}
.ods-site .ad .rl .rl-i[src*="logo_citi"]{height:23px;}
.ods-site .ad .rl .rl-i[src*="logo_pimco"]{height:17px;}
.ods-site .ad .rl .rl-i[src*="logo_bloomberg"]{height:15px;}
.ods-site .ad .rl .rl-i[src*="logo_drw"]{height:17px;}
.ods-site .ad .rl .rl-i[src*="logo_lmr"]{height:22px;}
/* Four of them came as artwork on a white sheet rather than as a cut-out, and
the page behind is cream, so they are multiplied into it: the white sheet
disappears and the mark keeps its own colours. The two that came as a navy
tile (IMC, LMR) keep it, because that tile is the mark. */
.ods-site .rl .rl-i[src*="logo_citi"],
.ods-site .rl .rl-i[src*="logo_pimco"],
.ods-site .rl .rl-i[src*="logo_bloomberg"],
.ods-site .rl .rl-i[src*="logo_drw"]{mix-blend-mode:multiply;}
.ods-site .fo .rl--top{margin:0 0 16px;}
.ods-site .fo .rl .rl-i{height:26px;}
.ods-site .fo .rl .rl-i[src*="bofa"]{height:20px;}
@media (max-width:760px){.ods-site .team .rl .rl-i{height:16px;}
.ods-site .team .rl .rl-i[src*="bofa"]{height:11px;}
.ods-site .team .rl .rl-i[src*="deutsche"],.ods-site .team .rl .rl-i[src*="jpmorgan"]{height:12px;}
.ods-site .team .rl .rl-i[src*="logo_imc"]{height:14px;}
.ods-site .team .rl .rl-i[src*="logo_citi"]{height:16px;}
.ods-site .team .rl .rl-i[src*="logo_pimco"]{height:12px;}
.ods-site .team .rl .rl-i[src*="logo_bloomberg"]{height:11px;}
.ods-site .team .rl .rl-i[src*="logo_drw"]{height:12px;}
.ods-site .team .rl .rl-i[src*="logo_lmr"]{height:15px;}
.ods-site .fo .rl .rl-i{height:22px;}
.ods-site .fo .rl .rl-i[src*="bofa"]{height:16px;}}
@media (min-width:761px){.ods-site .team > a:not(.fd){display:flex;flex-direction:column;}
.ods-site .team > a:not(.fd) .rl{margin-top:auto;padding-top:14px;}}
.ods-site .team .rl .rl-i[src*="deutsche"]{height:16px;}
.ods-site .team .fx{white-space:normal;}
/* Road on dark: the same claret as the 87%, labels in ivory for legibility */.ods-site #deadlines{--acc:#8C1D2C;}
.ods-site #deadlines .rd-ap,.ods-site #deadlines .rd-today strong,.ods-site #deadlines .road .k,.ods-site #deadlines .tl[data-pm] > .st-i.is-cur .k,.ods-site #deadlines .road > .st-i:last-of-type .k{color:var(--ink);}
.ods-site #deadlines .rd-ap{opacity:.9;}
/* ---------- shell ---------- */
html:has(.ods-site){scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h,80px) + 16px);overflow-x:clip;}
@media (max-width:760px){html:has(.ods-site){scroll-padding-top:16px;}}
body:has(.ods-site){overflow-x:clip;}
.ods-site button{display:revert;align-items:revert;justify-content:revert;line-height:inherit;}
.ods-site span.rounded-full{display:revert;line-height:inherit;}
.ods-site :focus-visible{box-shadow:none;}
/* ---------- booking widget: the parent block, the consent tick and the
appointment schedule that sits where the chips sit in the design ---------- */
.ods-site .bk-parent{margin-top:14px;padding:12px 14px 4px;border:1px solid var(--line2);background:var(--paper);}
.ods-site .bk-parent > p.fl{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink);}
/* The optional parent question on the university student form: two choices,
then the parent's name, email and the invitation tick. */
.ods-site .bk-payer{margin-top:16px;}
.ods-site .bk-payer-f{margin-top:4px;}
/* "Send this to my parent": cream, outlined, the same height as the ink
button beside it and never more prominent than it. */
.ods-site .btn--cream{background:var(--paper);color:var(--ink) !important;box-shadow:inset 0 0 0 1.5px var(--line2);}
.ods-site .btn--cream:hover{background:var(--paper2);color:var(--ink) !important;}
.ods-site .btn--cream:hover::after{transform:none;}
.ods-site .send-parent{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.ods-site .send-parent-alt{font-size:13.5px;color:var(--ink3);text-decoration:underline;text-underline-offset:3px;}
/* A parent booking for their child: the student's own details, in the same
framed panel the guardian details used. */
.ods-site .bk-student{margin-top:14px;padding:12px 14px 4px;border:1px solid var(--line2);background:var(--paper);}
.ods-site .bk-student > p.fl{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink);}
.ods-site .bk-consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink2);cursor:pointer;}
.ods-site .bk-consent input{width:16px;height:16px;flex:none;margin:2px 0 0;accent-color:var(--acc);}
.ods-site .bk-consent a{color:inherit;text-decoration:underline;}
.ods-site .bk-next{margin-left:auto;}
.ods-site .bk-embed{margin-top:2px;border:1px solid var(--line2);background:#fff;}
.ods-site .bk-embed iframe{display:block;width:100%;height:620px;border:0;}
@media (max-width:760px){.ods-site .bk-embed iframe{height:520px;}}
/* ---------- pages that keep their own content inside the new site ----------
onTime, onTrack, onTarget, the guides, the talk and assessment pages,
onTrack Match, the partner page and the rest keep every working part and
drop only their own header and footer here, so the shell's header and
footer are the only ones on the page. */
.ods-site .tt-nav,
.ods-site .tt-mob,
.ods-site .tt-tabbar,
.ods-site .odsp-topnav,
.ods-site .odsp-footer,
.ods-site .ot-foot,
.ods-site .mt-foot,
.ods-site .tt-foot,
.ods-site .ptn-bar,
.ods-site .ptn-foot,
.ods-site .odsp-shellfoot{
display:none !important;
}
/* ---------- the road, year by year: a bolder line, drawn with the scroll ----------
The track is a 3px hairline, the fill claret and glowing. The scroll script
scales the fill and moves the leading point with it; each year lights as the
fill arrives. The dashed hop is a path, drawn on from its left end. With
reduced motion (or before the script runs) the road is simply complete. */
.ods-site #deadlines .road > .rule{height:3px;background:rgba(237,232,223,.16);}
.ods-site #deadlines .road > .rule > span{background:#8C1D2C;box-shadow:0 0 10px rgba(140,29,44,.65),0 0 2px rgba(140,29,44,.9);}
.ods-site #deadlines .road > .st-i::before{top:-4.5px;transition:background .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s var(--ease);}
/* the leading point: an ivory dot with a claret ring, pulsing slowly */
.ods-site #deadlines .road > .rule > .rd-lead{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;pointer-events:none;will-change:transform;}
.ods-site #deadlines .road > .rule > .rd-lead::before{content:"";position:absolute;inset:0;border-radius:50%;background:#E8D9D2;border:2px solid #8C1D2C;box-sizing:border-box;box-shadow:0 0 12px rgba(140,29,44,.8);animation:rdPoint 2.4s ease-in-out infinite;}
@keyframes rdPoint{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}
.ods-site #deadlines .road[data-pm=off] > .rule > .rd-lead{display:none;}
/* a reached year: the dot fills claret, grows to 1.2 and takes the same glow */
.ods-site #deadlines .road[data-pm] > .st-i.is-on::before{background:#8C1D2C;border-color:#8C1D2C;box-shadow:0 0 10px rgba(140,29,44,.65),0 0 2px rgba(140,29,44,.9);}
.ods-site #deadlines .road[data-pm] > .st-i.is-cur::before{transform:scale(1.2);}
/* label and title come up from muted to full ivory as the fill arrives */
.ods-site #deadlines .road[data-pm]:not([data-still]) > .st-i:not(.is-on) > .k,
.ods-site #deadlines .road[data-pm]:not([data-still]) > .st-i:not(.is-on) > .rd-t{color:#A9A296;}
.ods-site #deadlines .road[data-pm] > .st-i.is-on > .k,
.ods-site #deadlines .road[data-pm] > .st-i.is-on > .rd-t{color:#F3EFE8;}
/* the autumn window draws out, and the hop is drawn on, when the year is reached */
.ods-site #deadlines .road[data-pm]:not([data-still]) > .st-i > .rd-win{transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);}
.ods-site #deadlines .road[data-pm] > .st-i.is-on > .rd-win{transform:scaleX(1);}
.ods-site #deadlines .road .rd-hop{border:0;overflow:visible;}
.ods-site #deadlines .road .rd-hop-line{fill:none;stroke:#8C1D2C;stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;}
.ods-site #deadlines .road .rd-hop-ah{fill:#8C1D2C;stroke:none;}
.ods-site #deadlines .road .rd-hop-clip{transform-box:fill-box;transform-origin:left center;transition:transform .6s var(--ease);}
.ods-site #deadlines .road[data-pm]:not([data-still]) > .st-i:not(.is-on) .rd-hop-clip{transform:scaleX(0);}
/* the second line under each year, in the muted colour */
.ods-site #deadlines .road .rd-why{margin-top:4px;color:var(--ink3);}
@media (max-width:760px){
.ods-site #deadlines .road > .rule{left:4.5px;width:3px;height:auto;}
.ods-site #deadlines .road > .rule > .rd-lead{top:0;left:50%;margin-left:-4.5px;}
.ods-site #deadlines .road > .st-i > .k{white-space:nowrap;}
.ods-site #deadlines .road > .st-i.pen > .k{grid-column:1 / -1;}
.ods-site #deadlines .road > .st-i.pen > .rd-ap{grid-column:1 / -1;grid-row:2;margin-top:2px;}
}
@media (prefers-reduced-motion:reduce){
.ods-site #deadlines .road > .rule > .rd-lead::before{animation:none;}
.ods-site #deadlines .road .rd-hop-clip{transition:none;}
}
/* ---------- how it works: three numbered steps, then the four phases ---------- */
.ods-site .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;list-style:none;margin:0;padding:0;}
.ods-site .steps3 > li{padding:14px 18px 0 0;}
.ods-site .steps3 .lbl{color:var(--acc);display:block;}
.ods-site .steps3 > li > b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:6px;line-height:1.25;}
.ods-site .steps3 > li > small{display:block;font-size:14px;color:var(--ink2);margin-top:4px;line-height:1.4;}
.ods-site .steps > .arc{margin-top:16px;}
.ods-site .arc li:last-child::before{background:var(--ink);width:1.5px;height:7px;}
@media (max-width:760px){
.ods-site .steps3{grid-template-columns:1fr;gap:0;}
.ods-site .steps3 > li{padding:10px 0;border-bottom:1px solid var(--line2);}
.ods-site .steps3 > li:last-child{border-bottom:0;padding-bottom:4px;}
.ods-site .steps3 .lbl{font-size:11.5px;}
.ods-site .steps3 > li > b{font-size:16.5px;margin-top:3px;}
.ods-site .steps > .arc{margin-top:10px;}
}
/* ---------- cookie consent sheet -------------------------------------
Fixed to the viewport and deliberately not inside .ods-site, so the
shell's hidden-until-styled rule never touches it. Its styles live here,
in the sheet already linked and preloaded in , so it is styled on
its very first frame - it used to carry its own