/* The Learning Agency — shared styles for the client page (/) and student page (/students).
   Layout: CU Denver's institutional rhythm (black utility bar, black bands, white content, gold rules)
   with one progressive move: a wide-set display face; the client side leads in black, the student side in gold. */
:root{
  --ink:#111111;--paper:#ffffff;--wash:#f3f3f1;--line:#d9d7d0;--muted:#565a5c;
  --gold:#cfb87c;--gold-ink:#7a5f14;
  --band:#000000;--band-ink:#ffffff;--band-muted:#b9b6ad;--band-line:#3a3a37;
  --note:#b3261e;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --max:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ink:#f2f0ea;--paper:#121212;--wash:#1b1b1a;--line:#33322f;--muted:#a9a7a0;
  --gold:#cfb87c;--gold-ink:#d8c48e;--band:#000000;--band-ink:#ffffff;--band-muted:#b9b6ad;--band-line:#3a3a37;--note:#ff8a80;color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#f2f0ea;--paper:#121212;--wash:#1b1b1a;--line:#33322f;--muted:#a9a7a0;
  --gold:#cfb87c;--gold-ink:#d8c48e;--band:#000000;--band-ink:#ffffff;--band-muted:#b9b6ad;--band-line:#3a3a37;--note:#ff8a80;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--band)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0}
p{margin:0}
ul,ol{padding:0;margin:0}
.eyebrow{font:600 .78rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.band .eyebrow{color:var(--gold)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* preview annotations: delete every .pv before going live */
.pv{display:inline-flex;gap:.4em;align-items:center;font:500 .72rem/1.3 var(--f-mono);color:var(--note);border:1px dashed currentColor;padding:.25em .55em;border-radius:3px;letter-spacing:.02em}

/* utility bar */
.util{background:var(--band);color:var(--band-muted);font-size:.85rem}
.util .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;padding-block:.55rem}
.util a{text-decoration:none}.util a:hover{color:var(--band-ink)}
.util nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.lockup{color:var(--band-ink);font:700 .8rem/1.2 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.lockup span{color:var(--gold)}

/* header with the clients / students switch */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;padding-block:.8rem;transition:padding .25s}
.mark{display:flex;align-items:baseline;gap:.5rem;text-decoration:none}
.mark b{font:800 1.35rem/1 var(--f-display);font-stretch:118%;letter-spacing:-.01em}
.mark i{width:.55rem;height:.55rem;background:var(--gold);display:inline-block}
.switch{display:inline-flex;border:2px solid var(--ink);font:700 .85rem/1 var(--f-body)}
.switch a{text-decoration:none;padding:.55rem .9rem;white-space:nowrap}
.switch a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.switch a:not([aria-current]):hover{background:var(--gold);color:#111}
.hd-right{display:flex;align-items:center;gap:1.4rem}
.mainnav{display:flex;gap:1.3rem;align-items:center;font-weight:600;font-size:.95rem}
.mainnav a{text-decoration:none}.mainnav a:not(.btn):hover{color:var(--gold-ink)}
@media (max-width:1080px){.mainnav a:not(.btn){display:none}}
@media (max-width:560px){.mainnav{display:none}}

.btn{display:inline-flex;align-items:center;gap:.5rem;font:700 .95rem/1 var(--f-body);text-decoration:none;padding:.85rem 1.2rem;border:2px solid var(--gold);background:var(--gold);color:#111;transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--ink)}
.band .btn:hover{color:var(--band-ink)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--gold);border-color:var(--gold);color:#111}
.btn.dark{background:#111;border-color:#111;color:#fff}
.btn.dark:hover{background:transparent;color:#111}
.btn.sm{padding:.6rem .9rem;font-size:.88rem}
.btn .arr{font-family:var(--f-mono)}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;align-items:center}

/* hero (shared) */
.band{background:var(--band);color:var(--band-ink)}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:3rem;padding-block:4rem 4.5rem}
@media (min-width:960px){.hero .wrap{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:end;padding-block:5.5rem}}
.hero h1{font-weight:850;font-stretch:112%;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;letter-spacing:-.02em;margin-top:1.1rem}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{color:var(--band-muted);font-size:1.15rem;max-width:36rem;margin-top:1.4rem}

/* student hero: gold band, fixed colors in both themes */
.hero.gold{background:var(--gold);color:#111}
.hero.gold .eyebrow{color:#111}
.hero.gold h1 em{color:#111;background:linear-gradient(transparent 70%,#fff 70% 90%,transparent 90%)}
.hero.gold .lede{color:#2b2617}
.hero.gold .btn.ghost{color:#111}
.hero.gold .btn.ghost:hover{background:#111;border-color:#111;color:#fff}
.hero.gold .pv{color:#7d1a14}

/* client hours ticket */
.ticket{border:1px solid var(--band-line);background:#0b0b0b;color:#fff;position:relative;min-width:0}
.ticket .bot{position:relative}
.ticket .bot::before,.ticket .bot::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--band);border:1px solid var(--band-line)}
.ticket .bot::before{left:-10px}.ticket .bot::after{right:-10px}
.ticket .top{padding:1.4rem 1.5rem 1.2rem;border-bottom:1px dashed var(--band-line)}
.ticket .price{display:flex;align-items:baseline;gap:.4rem;margin-top:.6rem}
.ticket .price b{font:800 3.4rem/1 var(--f-display);font-stretch:105%;color:var(--gold)}
.ticket .price span{color:var(--band-muted)}
.ticket .top p{color:var(--band-muted);margin-top:.6rem;font-size:.98rem}
.meter-l{display:flex;justify-content:space-between;font-size:.8rem;color:var(--band-muted);margin-top:1rem}
.meter{height:10px;background:#262624;margin:.5rem 0;position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;width:15%;background:var(--gold);transition:width .25s cubic-bezier(.2,.7,.2,1)}
.meter i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,#0b0b0b 22px 24px)}
.ticket .ex{font-size:.75rem;color:#8d8a82}
.ticket .bot{padding:1.1rem 1.5rem 1.3rem;display:grid;gap:.5rem}
.ticket .k{font:600 .72rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted)}
.ticket .rows{display:grid;gap:.1rem;font-size:.95rem}
.ticket .rows div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #222;padding:.45rem 0 .1rem}
.ticket .rows span:last-child{color:var(--gold);font-weight:600;white-space:nowrap}

/* course card (student hero) */
.course{border:1px solid #111;background:#0b0b0b;color:#fff;min-width:0;align-self:start}
.course .hd{padding:1.1rem 1.4rem;border-bottom:1px solid var(--band-line);display:flex;justify-content:space-between;gap:.5rem 1rem;align-items:baseline;flex-wrap:wrap}
.course .hd b{font:800 1.6rem/1 var(--f-display);font-stretch:110%;color:var(--gold)}
.course .req{font:600 .72rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:#111;padding:.35rem .5rem}
.course dl{margin:0;padding:.4rem 1.4rem 1rem}
.course dl div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.65rem 0;border-bottom:1px solid #222}
.course dl div:last-child{border-bottom:0}
.course dt{color:var(--band-muted);font-size:.9rem}
.course dd{margin:0}
.course .pv{color:#ff8a80}
@media (max-width:480px){.course dl div{grid-template-columns:1fr;gap:.2rem}}

/* sections */
.tla section{padding-block:5rem}
.tla section.alt{background:var(--wash)}
.sec-head{display:grid;gap:.9rem;max-width:46rem;margin-bottom:2.75rem}
.sec-head h2,.band h2{font-weight:800;font-stretch:108%;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.04;letter-spacing:-.015em}
.sec-head p{color:var(--muted);font-size:1.1rem}
.band .sec-head p{color:var(--band-muted)}
.band.pad .wrap{padding-block:5rem}

/* services: build + host */
.split{display:grid;gap:3rem}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem}}
.col{min-width:0}
.col-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.25rem 1rem;border-bottom:3px solid var(--ink);padding-bottom:.6rem}
.col-h h3{font-size:1.5rem;font-weight:800;font-stretch:110%}
.col-h span{font-size:.9rem;color:var(--muted)}
.svc article{padding:1.15rem 0;border-bottom:1px solid var(--line);display:grid;gap:.3rem}
.svc h4{font:750 1.12rem/1.3 var(--f-display);font-stretch:104%}
.svc p{color:var(--muted)}
.tools{font:500 .78rem/1.4 var(--f-mono);color:var(--gold-ink)}

/* platforms */
.plat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:2rem 2.5rem;border-top:3px solid var(--ink);padding-top:1.5rem}
.plat div{min-width:0;display:grid;gap:.7rem;align-content:start}
.plat h3{font:500 .78rem/1 var(--f-mono);color:var(--gold-ink);letter-spacing:.02em}
.plat ul{display:flex;flex-wrap:wrap;gap:.45rem}
.plat li{list-style:none;font:700 .95rem/1 var(--f-display);font-stretch:100%;border:1px solid var(--line);padding:.5rem .65rem;background:var(--paper)}
.motto{margin-top:2.5rem;font:850 clamp(1.4rem,3vw,2rem)/1.15 var(--f-display);font-stretch:110%;letter-spacing:-.01em;max-width:40rem}
.motto span{color:var(--gold-ink)}

/* three-up cards */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.5rem}
.aud{border:1px solid var(--line);background:var(--paper);padding:1.5rem;display:grid;gap:.7rem;align-content:start;min-width:0}
.aud .tag{font:500 .78rem/1 var(--f-mono);color:var(--gold-ink)}
.aud h3{font-size:1.3rem;font-weight:800;font-stretch:106%}
.aud .rate{font:800 1.9rem/1 var(--f-display);font-stretch:104%}
.aud .rate small{font:400 .95rem var(--f-body);color:var(--muted);margin-left:.3rem}
.aud p{color:var(--muted)}
.aud a{font-weight:700;text-decoration-color:var(--gold);text-underline-offset:.2em;text-decoration-thickness:2px}

/* ruled columns (student "what you get", "ways in") */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));border-top:3px solid var(--ink)}
.band .cols{border-top-color:var(--gold)}
.cols article{padding:1.5rem 1.5rem 1.6rem 0;display:grid;gap:.5rem;align-content:start;min-width:0;border-bottom:1px solid var(--line)}
.band .cols article{border-bottom-color:var(--band-line)}
@media (min-width:900px){.cols article{padding-right:2rem}}
.cols .tag{font:500 .78rem/1 var(--f-mono);color:var(--gold-ink)}
.band .cols .tag{color:var(--gold)}
.cols h3{font-size:1.25rem;font-weight:800;font-stretch:106%}
.cols p{color:var(--muted)}
.band .cols p{color:var(--band-muted)}
.quote{font:700 1.25rem/1.3 var(--f-display);font-stretch:104%;padding-left:1rem;border-left:3px solid var(--gold);max-width:32rem;margin-top:2.5rem}

/* work */
.case{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);background:var(--paper);min-width:0}
.case .art{aspect-ratio:16/10;max-width:100%;background:linear-gradient(135deg,transparent 0 48%,var(--line) 48% 52%,transparent 52%),repeating-linear-gradient(0deg,var(--wash) 0 18px,transparent 18px 19px),var(--wash);display:flex;align-items:flex-end;padding:1rem}
.case .art span{font:500 .75rem/1 var(--f-mono);background:var(--paper);padding:.35rem .5rem;border:1px solid var(--line)}
.case .body{padding:1.3rem 1.4rem 1.5rem;display:grid;gap:.5rem;align-content:start}
.case h3{font-size:1.2rem;font-weight:750}
.case p{color:var(--muted);font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
.tags span{font-size:.78rem;font-weight:600;border:1px solid var(--line);padding:.15rem .5rem;color:var(--muted)}

/* clients */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
.clients li{list-style:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:96px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font:700 .95rem/1.25 var(--f-display);font-stretch:96%;color:var(--muted);transition:color .2s}
.clients li:hover{color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:2rem;counter-reset:s}
.steps li{list-style:none;display:grid;gap:.55rem;align-content:start;border-top:3px solid var(--gold);padding-top:1rem;min-width:0}
.steps li::before{counter-increment:s;content:"Step " counter(s);font:500 .78rem/1 var(--f-mono);color:var(--gold-ink)}
.steps h3{font-size:1.15rem;font-weight:750}
.steps p{color:var(--muted)}
.fund{margin-top:2.75rem;max-width:50rem;padding:1.1rem 1.25rem;background:var(--wash);border-left:4px solid var(--gold)}
.fund p{color:var(--muted)}.fund b{color:var(--ink)}

/* alumni loop */
.alumni .wrap{display:grid;gap:2.5rem}
@media (min-width:900px){.alumni .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:5rem;align-items:center}}
.alumni h2{font-weight:850;font-stretch:112%;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.02em;margin-top:.9rem}
.alumni h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--gold) 62% 92%,transparent 92%)}
.alumni .lede{color:var(--muted);font-size:1.1rem;margin-top:1.2rem;max-width:32rem}
.loop{border-top:3px solid var(--ink)}
.loop li{list-style:none;display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.loop b{font:500 .8rem/1.5 var(--f-mono);color:var(--gold-ink)}
.loop span{color:var(--muted)}
@media (max-width:480px){.loop li{grid-template-columns:1fr;gap:.2rem}}

/* faq */
.faq{border-top:3px solid var(--ink);max-width:52rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font:700 1.08rem/1.35 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--gold-ink);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 0 1.3rem;max-width:44rem}

/* crossover strip */
.cross{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cross .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding-block:1.6rem}
.cross p{font:700 1.15rem/1.3 var(--f-display)}
.cross p span{color:var(--muted);font:400 1rem var(--f-body);display:block;margin-top:.2rem}

/* contact */
.contact .wrap{display:grid;gap:3rem;padding-block:5rem}
@media (min-width:900px){.contact .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:5rem;align-items:start}}
.contact h2{font-weight:850;font-stretch:112%;font-size:clamp(2.2rem,5vw,3.8rem);line-height:.98;letter-spacing:-.02em;margin-top:.9rem}
.contact .lede{color:var(--band-muted);font-size:1.1rem;margin-top:1.2rem;max-width:32rem}
.card{display:grid;gap:1.4rem;min-width:0}
.card .row{display:grid;gap:.35rem;padding-bottom:1.3rem;border-bottom:1px solid #2a2a28}
.card .row:last-child{border-bottom:0}
.card .k{font:600 .75rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.card .v{font-size:1.15rem;overflow-wrap:anywhere}
.card .v small{display:block;color:var(--band-muted);font-size:.95rem}
.copy{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.copy button{font:600 .82rem/1 var(--f-body);background:transparent;color:var(--band-ink);border:1px solid #4a4a46;padding:.45rem .7rem;cursor:pointer}
.copy button:hover{border-color:var(--gold)}

footer{background:var(--band);color:var(--band-muted);border-top:1px solid #222;font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-block:1.6rem}
footer nav{display:flex;gap:1.25rem;flex-wrap:wrap}
footer a{text-decoration:none}footer a:hover{color:var(--band-ink)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Interaction layer (Ghost theme) ===== */

/* header condenses on scroll; gold reading-progress hairline */
header.site.scrolled{box-shadow:0 6px 24px -18px rgba(0,0,0,.5)}
header.site.scrolled .wrap{padding-block:.5rem}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.mainnav a{position:relative}
.mainnav a.on:not(.btn){color:var(--gold-ink)}
.mainnav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.mainnav a.on:not(.btn)::after,.mainnav a:not(.btn):hover::after{transform:scaleX(1)}

/* hero: faint gold survey grid + headline accent that draws in */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(207,184,124,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(207,184,124,.09) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 10%,transparent 70%)}
.hero.gold::before{background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px)}
.hero h1 em.draw{background:linear-gradient(90deg,var(--gold) 0 50%,#fff 50% 100%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:sweep 1.4s .4s cubic-bezier(.6,0,.2,1) forwards}
@keyframes sweep{to{background-position:0 0}}

/* hours estimator */
.est{margin-top:1rem}
.est .meter-l{cursor:pointer}
.est .meter-l b{color:var(--gold);font-weight:500}
.est input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:.4rem 0 0;background:transparent;cursor:pointer}
.est input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--gold) var(--p,15%),#3a3a37 var(--p,15%))}
.est input[type=range]::-moz-range-track{height:4px;background:#3a3a37}
.est input[type=range]::-moz-range-progress{height:4px;background:var(--gold)}
.est input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;background:var(--gold);border:3px solid #0b0b0b;outline:1px solid var(--gold);transition:transform .15s}
.est input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:0;background:var(--gold);border:3px solid #0b0b0b;outline:1px solid var(--gold)}
.est input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.est input[type=range]:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* scroll reveal (only when JS is running) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .rv.in,.io-off .rv{opacity:1;transform:none}

/* steps: gold rule fills in as each step arrives */
.steps li{border-top-color:var(--line);position:relative}
.steps li::after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 150ms)}
.steps li.in::after,.io-off .steps li::after,html:not(.js) .steps li::after{transform:scaleX(1)}

/* cards lift on hover */
.aud,.case{transition:transform .25s,box-shadow .25s,border-color .25s}
.aud:hover,.case:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 30px -22px rgba(0,0,0,.45)}
.svc article{transition:padding .25s}
.svc article:hover{padding-left:.6rem;border-bottom-color:var(--gold)}

@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.hero h1 em.draw{background-position:0 0}}

/* logos from Ghost admin */
/* full lockup 75px tall; on scroll, swap to the one-line compact logo (or shrink the full one) */
.mark.has-logo{display:grid;align-items:center;justify-items:start}
.mark.has-logo img{grid-area:1/1;display:block;width:auto;max-width:100%;transition:height .3s cubic-bezier(.2,.7,.2,1),opacity .25s}
.mark.has-logo .logo-full{height:75px}
.mark.has-logo .logo-compact{height:34px;opacity:0;visibility:hidden}
header.site.scrolled .mark.has-logo .logo-full{height:48px}
header.site.scrolled .mark.has-compact .logo-full{height:34px;opacity:0;visibility:hidden}
header.site.scrolled .mark.has-compact .logo-compact{opacity:1;visibility:visible}
@media (max-width:560px){
  .mark.has-logo .logo-full{height:56px}
  header.site.scrolled .mark.has-logo .logo-full{height:40px}
  .mark.has-logo .logo-compact,header.site.scrolled .mark.has-compact .logo-full{height:28px}
}
.lockup.has-logo{display:inline-flex;align-items:center;gap:.8rem}
.lockup.has-logo img{display:block;height:22px;width:auto}
.lockup.has-logo > span{color:var(--band-ink);border-left:1px solid var(--band-line);padding-left:.8rem}
.foot-id{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem}
.foot-id img{display:block;height:26px;width:auto}
.hide-pv .pv{display:none!important}

/* ===== Editor-driven sections (content from Ghost pages) ===== */
.sec-body{color:var(--muted);font-size:1.0625rem}
.sec-body > *{max-width:46rem}
.sec-body > * + *{margin-top:1rem}
.sec-body h2,.sec-body h3,.sec-body h4{color:var(--ink);font-family:var(--f-display)}
.sec-body h2{font-size:1.5rem;font-weight:800;font-stretch:110%;margin-top:2.75rem;padding-bottom:.6rem;border-bottom:3px solid var(--ink);max-width:none}
.sec-body h3{font-size:1.15rem;font-weight:750;font-stretch:104%;margin-top:1.6rem}
.sec-body > :first-child{margin-top:0}
.sec-body h2 + *,.sec-body h3 + *{margin-top:.4rem}
.sec-body strong{color:var(--ink)}
.sec-body a{color:var(--ink);font-weight:600;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.2em}
.sec-body ul{padding-left:1.2rem}.sec-body li + li{margin-top:.4rem}
.sec-body hr{border:0;height:3px;width:3rem;background:var(--gold);margin:2.25rem 0}
.sec-body blockquote{margin:2.5rem 0 0;font:700 1.25rem/1.3 var(--f-display);font-stretch:104%;color:var(--ink);padding-left:1rem;border-left:3px solid var(--gold)}
.sec-body figure{margin:2rem 0 0;max-width:none}.sec-body img{display:block;max-width:100%;height:auto}
.sec-body figcaption{font-size:.85rem;margin-top:.5rem}
/* numbered list = step cards */
.sec-body ol{list-style:none;padding:0;max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:2rem;counter-reset:s;margin-top:1.75rem}
.sec-body ol li{margin:0;border-top:3px solid var(--gold);padding-top:1rem;counter-increment:s}
.sec-body ol li::before{content:"Step " counter(s);display:block;font:500 .78rem/1 var(--f-mono);color:var(--gold-ink);margin-bottom:.6rem}
.sec-body ol li strong:first-child{display:block;font:750 1.15rem/1.3 var(--f-display);margin-bottom:.35rem}
/* Ghost cards */
.sec-body .kg-callout-card{background:var(--wash)!important;border-left:4px solid var(--gold);border-radius:0;padding:1.1rem 1.25rem;color:var(--muted)}
.sec-body .kg-callout-emoji{display:none}
.sec-body .kg-button-card{max-width:none}
.sec-body .kg-btn{display:inline-flex;align-items:center;font:700 .95rem/1 var(--f-body);text-decoration:none;padding:.85rem 1.2rem;border:2px solid var(--gold);background:var(--gold)!important;color:#111!important;border-radius:0}
.sec-body .kg-btn:hover{background:transparent!important;color:var(--ink)!important}
.sec-body .kg-toggle-card{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:1.15rem 0!important;border-bottom:1px solid var(--line);max-width:52rem}
.sec-body .kg-toggle-card + .kg-toggle-card{margin-top:0}
.sec-body .kg-toggle-card:first-of-type{border-top:3px solid var(--ink)}
.sec-body .kg-toggle-heading-text{font:700 1.08rem/1.35 var(--f-display)!important;color:var(--ink)}
.sec-body .kg-toggle-card-icon{color:var(--gold-ink)}
.sec-body .kg-toggle-content{color:var(--muted)}
/* bullet list = cards (partners, what you get, ways in, alumni) */
.ed-who .sec-body ul,.ed-get .sec-body ul,.ed-ways .sec-body ul,.ed-alumni .sec-body ul{list-style:none;padding:0;max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.5rem;margin-top:0}
.ed-who .sec-body li,.ed-get .sec-body li,.ed-ways .sec-body li,.ed-alumni .sec-body li{margin:0;border:1px solid var(--line);background:var(--paper);padding:1.5rem;transition:transform .25s,border-color .25s}
.ed-who .sec-body li:hover,.ed-get .sec-body li:hover{transform:translateY(-3px);border-color:var(--gold)}
.ed-who .sec-body li strong:first-child,.ed-get .sec-body li strong:first-child,.ed-ways .sec-body li strong:first-child,.ed-alumni .sec-body li strong:first-child{display:block;font:800 1.25rem/1.25 var(--f-display);font-stretch:106%;margin-bottom:.5rem}
/* platforms: heading + chips */
.ed-platforms .sec-body h3{font:500 .78rem/1 var(--f-mono);color:var(--gold-ink);letter-spacing:.02em;margin-top:1.75rem}
.ed-platforms .sec-body ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem;max-width:none}
.ed-platforms .sec-body li{margin:0;font:700 .95rem/1 var(--f-display);color:var(--ink);border:1px solid var(--line);padding:.5rem .65rem;background:var(--paper)}
/* clients: bullet names or a gallery of logos */
.ed-clients .sec-body ul{list-style:none;padding:0;max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
.ed-clients .sec-body li{margin:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:96px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font:700 .95rem/1.25 var(--f-display);color:var(--muted)}
.ed-clients .kg-gallery-card{max-width:none}
.ed-clients .kg-gallery-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
.ed-clients .kg-gallery-row{display:contents}
.ed-clients .kg-gallery-image{flex:none!important;margin:0!important;border-right:1px solid var(--line);border-bottom:1px solid var(--line);height:110px;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.ed-clients .kg-gallery-image img{width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .25s,opacity .25s}
.ed-clients .kg-gallery-image:hover img{filter:none;opacity:1}
/* dark band variant (students "ways in") */
.band .sec-body{color:var(--band-muted)}
.band .sec-body h2,.band .sec-body h3,.band .sec-body strong,.band .sec-body blockquote,.band .sec-body a{color:var(--band-ink)}
.band.ed-ways .sec-body li{background:transparent;border-color:var(--band-line)}
/* work cards from #work posts */
a.case{text-decoration:none;color:inherit}
.case .art.has-img{padding:0;background:var(--wash)}
.case .art img{width:100%;height:100%;object-fit:cover;display:block}
a.case:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.2em}
/* services: each "##" heading starts a column (Design & produce | Host) */
@media (min-width:900px){
  .ed-services .sec-body{columns:2;column-gap:4rem}
  .ed-services .sec-body > *{max-width:none}
  .ed-services .sec-body h2{margin-top:0;-webkit-column-break-before:column;break-before:column}
  .ed-services .sec-body h2:first-child{-webkit-column-break-before:auto;break-before:auto}
  .ed-services .sec-body h3{break-after:avoid}
  .ed-services .sec-body p{break-inside:avoid}
}