:root{
  /* Moonlight Violet (palette 5A): deep indigo-violet ink holds headings, the nav,
     the countdown bar and the date card; one lavender accent carries borders, the
     arrow disc, active underlines and eyebrows; everything else is near-white, with
     the page grounds alternating paper and its shaded tone. Accent light is
     decorative only — icons, rules and dividers on ink, never text on white.
     Token names are kept from the original build. */
  --navy:#2B2148; --navy-d:#1E1735; --navy-l:#443566;
  --blue:#6B5BB5; --blue-d:#6B5BB5; --ice:#DDD7EF; --ice-2:#EEEAF8;
  --paper:#FAF8FE; --ink:#5B4E86; --muted:#6E62A0;
  --line:rgba(43,33,72,.14);
  /* accent tier: the one lavender for anything clickable and for rules, its deep
     tone for hover, accent light for labels and icons on ink */
  --ac:#6B5BB5; --ac-d:#544393; --ac-br:#6B5BB5; --ac-l:#9C8ED4;
  --f:"Onest",system-ui,-apple-system,sans-serif;
  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --e:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit} img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;color:var(--navy);line-height:1.08;letter-spacing:-.028em;font-weight:800}
p{margin:0 0 1.05rem}
[hidden]{display:none!important}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
@media(min-width:1700px){.wrap,.hero-in{max-width:1480px}}
@media(min-width:2100px){.wrap,.hero-in{max-width:1660px}body{font-size:18px}}
@media(max-width:520px){:root{--pad:1.1rem}.hero h1{font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .brand img{width:52px}.brand .bn b{font-size:1rem}.brand .bn span{font-size:.62rem;letter-spacing:.12em}}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* motion */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.pg{animation:up .5s var(--e) both}
.rv{transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.pre{opacity:0;transform:translateY(24px)}
.rv.pre.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}

/* ---------- utility strip ---------- */
.util{background:var(--navy);color:#fff;font-size:.82rem;overflow:hidden;
  max-height:80px;transition:max-height .35s var(--e),opacity .3s var(--e)}
.util-in{max-width:1720px;margin:0 auto;padding:.62rem var(--pad);display:flex;align-items:center;
  justify-content:space-between;gap:1.4rem}
.u-l{display:flex;align-items:center;gap:.8rem;font-weight:500;color:rgba(255,255,255,.9)}
.u-l b{font-weight:800;letter-spacing:.01em}
.u-l i{display:block;width:1px;height:14px;background:rgba(255,255,255,.4)}
.u-c{display:flex;align-items:center;gap:.95rem;margin:0 auto;font-size:.86rem;
  color:rgba(255,255,255,.72);white-space:nowrap}
.u-c em{font-style:normal;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.75rem;color:rgba(255,255,255,.62)}
.u-c span{display:flex;align-items:baseline;gap:.34rem;font-size:.74rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.u-c b{font-size:1.36rem;font-weight:800;color:#9C8ED4;font-variant-numeric:tabular-nums;letter-spacing:0}
.u-c i{display:block;align-self:center;width:1px;height:16px;background:rgba(255,255,255,.32)}
.u-c .lbl-long{display:inline}
.u-c .compact{display:none}
@media(max-width:1240px){
  .u-c{gap:.6rem;font-size:.8rem}
  .u-c b{font-size:1.2rem}
  .u-c em{display:none}
  .u-c .lbl-long{display:none}
}
@media(max-width:860px){
  .u-c span,.u-c i{display:none}
  .u-c .compact{display:flex;align-items:baseline;gap:.3rem}
}
@media(max-width:520px){.u-c{display:none}}
.u-r{display:flex;align-items:center;gap:1.6rem}
.u-r a{color:rgba(255,255,255,.9);text-decoration:none;font-weight:700;font-size:.92rem;
  letter-spacing:.09em;text-transform:uppercase;transition:color .25s var(--e)}
.u-r a:hover{color:#fff}
body.scrolled .util{max-height:0;opacity:0}
@media(max-width:820px){
  .util-in{justify-content:center;padding:.55rem var(--pad)}
  .u-l{font-size:.76rem;flex-wrap:wrap;justify-content:center;text-align:center}
  .u-r{display:none}
}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--e),padding .3s var(--e)}
.nav.stuck{box-shadow:0 8px 26px rgba(43,33,72,.10)}
.nav-in{max-width:1720px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem)}
.brand{display:flex;align-items:center;gap:clamp(.85rem,1.3vw,1.25rem);text-decoration:none;
  padding:.95rem 0;flex:none;transition:opacity .25s var(--e)}
.brand:hover{opacity:.88}
.brand img{width:clamp(62px,5vw,92px);transition:width .3s var(--e)}
.brand .bar{display:block;width:1px;align-self:stretch;margin:.35rem 0;
  background:linear-gradient(180deg,transparent,rgba(43,33,72,.3) 22%,rgba(43,33,72,.3) 78%,transparent)}
.brand .bn b{display:block;font-size:clamp(1.3rem,1.85vw,1.95rem);font-weight:800;color:var(--navy);
  letter-spacing:-.026em;line-height:1.08;transition:font-size .3s var(--e)}
.brand .bn .sec{display:block;font-size:clamp(.7rem,.86vw,.92rem);font-weight:800;letter-spacing:.14em;
  color:var(--blue);margin-top:.3rem;white-space:nowrap;transition:font-size .3s var(--e)}
.nav.stuck .brand{padding:.6rem 0}
.nav.stuck .brand img{width:clamp(46px,3.2vw,58px)}
.nav.stuck .brand .bn b{font-size:clamp(1rem,1.2vw,1.22rem)}
.nav.stuck .brand .bn .sec{font-size:clamp(.6rem,.68vw,.7rem)}
.nav.stuck @media(max-width:560px){
  .brand img{width:52px}
  .brand .bn b{font-size:1.02rem}
  .brand .bn .sec{font-size:.58rem;letter-spacing:.09em;white-space:normal}
  }
.nav ul{list-style:none;display:flex;align-items:center;gap:clamp(1.05rem,1.9vw,2.2rem);margin:0 0 0 auto;padding:0}
.nav ul a{display:block;text-decoration:none;color:var(--ink);white-space:nowrap;position:relative;
  padding:1.55rem 0;font-size:.88rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  transition:color .25s var(--e)}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
.nav ul a:hover{color:var(--navy)} .nav ul a:hover::after{transform:scaleX(1)}
.nav ul a.on{color:var(--navy)} .nav ul a.on::after{transform:scaleX(1)}
.navreg{flex:none;margin-left:clamp(.8rem,1.6vw,1.8rem)}
@media(max-width:1480px){
  .nav-in{flex-wrap:wrap;gap:1rem}
  .nav ul{order:3;flex:1 0 100%;margin:0;justify-content:space-between;
    gap:1rem;border-top:1px solid var(--line)}
  .nav ul a{padding:.95rem 0}
  .navreg{margin-left:auto}
}
@media(max-width:760px){
  .nav ul{justify-content:flex-start;gap:.9rem 1.1rem;flex-wrap:wrap}
  .nav ul a{padding:.65rem 0;font-size:.82rem;letter-spacing:.05em}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  /* fill the viewport below the utility bar and nav, so nothing from the
     next section shows on landing. --chrome is measured in app.js. */
  min-height:max(440px, calc(100vh - var(--chrome, 165px) + 3px));
  min-height:max(440px, calc(100svh - var(--chrome, 165px)));
  background:linear-gradient(150deg,#FAF8FE 0%,#F6F3FC 40%,#F1EDFA 72%,#EEEAF8 100%)}

/* key-visual-london.jpg is the right-hand part of ESSKA's ankle banner (the ankle
   render and Westminster at dusk); the pale left of the banner is left off. */
.art-wrap{position:absolute;right:0;top:0;bottom:0;z-index:1;
  width:clamp(470px,47vw,1250px);overflow:hidden;pointer-events:none;
  animation:fadeIn .9s var(--e) both;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%);
          mask-image:linear-gradient(to right,transparent 0,#000 11%)}
.hero .art{display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center 45%;
  scale:1.03;translate:var(--px,0) var(--py,0);
  transition:translate .5s var(--e);animation:drift 20s .6s ease-in-out infinite}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* scale sits on the transform, the pointer parallax on translate, so the two
   never overwrite one another */
@keyframes drift{0%{scale:1.03}50%{scale:1.12}100%{scale:1.03}}

/* a slow gleam across the artwork */
.art-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 36%,rgba(255,255,255,.28) 50%,transparent 64%);
  background-size:300% 100%;animation:sweep 10s 1.5s ease-in-out infinite}
@keyframes sweep{0%{background-position:210% 0}60%,100%{background-position:-110% 0}}

/* keeps the title side legible whatever the artwork is doing */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(96deg,#F7F4FD 0%,#F7F4FD 34%,
    rgba(247,244,253,.55) 46%,rgba(247,244,253,0) 58%)}

.hero-in{position:relative;z-index:5;max-width:1280px;margin:0 auto;width:100%;
  padding:clamp(1.9rem,3.1vw,3rem) var(--pad)}
.hero-txt{max-width:min(640px,46%)}
@media(min-width:1700px){.hero-in{max-width:1480px}}
@media(min-width:2100px){.hero-in{max-width:1660px}}

.kicker{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.05rem}
.kicker span{font-size:clamp(.86rem,1.25vw,1.02rem);font-weight:800;letter-spacing:.04em;
  color:var(--navy);white-space:nowrap}
.kicker span em{font-style:normal;color:var(--blue)}
.kicker i{flex:1;height:2px;max-width:110px;position:relative;
  background:linear-gradient(90deg,var(--navy),var(--ac-br))}
.kicker i::after{content:"";position:absolute;right:-6px;top:50%;width:13px;height:13px;
  border-radius:50%;border:2px solid var(--ac-br);background:#fff;transform:translateY(-50%)}

/* 2.5vw against a 640px column lands the 60-character title on two lines */
.hero h1{font-size:clamp(1.7rem,2.5vw,2.3rem);letter-spacing:-.032em;line-height:1.09;
  max-width:30ch;color:var(--navy);font-weight:800;text-wrap:balance}
.hero h1 .lt{font-weight:400}
/* full opacity on a real token, so contrast is predictable */
.hero .strap{font-size:clamp(.98rem,1.25vw,1.12rem);font-weight:400;color:var(--muted);
  margin:.85rem 0 0;max-width:38ch;letter-spacing:-.015em}

/* ---------- event bar: the dates and venue, at a size the room can read ---------- */
.ebar{position:relative;overflow:hidden;margin:clamp(1.25rem,2vw,1.7rem) 0 0;
  background:var(--navy);color:#fff;border-radius:12px;
  border-left:5px solid var(--ac-br);
  padding:clamp(.95rem,1.45vw,1.25rem) clamp(1.15rem,1.8vw,1.55rem);
  box-shadow:0 18px 44px rgba(30,23,53,.30);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.ebar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--ac-br) 0%,var(--ac-l) 40%,transparent 92%);
  background-size:220% 100%;animation:shimmer 7s 1s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.ebar:hover{transform:translateY(-3px);box-shadow:0 26px 56px rgba(30,23,53,.38)}
.ebar-row{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.15rem);flex-wrap:wrap}
.ebar-item{display:flex;align-items:center;gap:.55rem}
.ebar-item img{width:28px;height:28px;flex:none;filter:brightness(0) invert(1);opacity:.9}
.ebar-item b{color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.24rem,1.85vw,1.6rem);font-variant-numeric:tabular-nums}
/* the en dash in a date range reads as a separator, not a third numeral:
   lighter, a touch smaller, and given room to breathe on both sides */
.dash{font-style:normal;display:inline;font-weight:400;font-size:.72em;
  vertical-align:.08em;margin:0 .22em;opacity:.55}
.ebar-item .dash{font-size:.52em;font-weight:500;vertical-align:.16em;
  margin:0 .2em;opacity:1;color:rgba(255,255,255,.6)}
.ebar-sep{width:1px;align-self:stretch;min-height:1.7rem;
  background:rgba(255,255,255,.26);flex:none}
.ebar-foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem .9rem;flex-wrap:wrap;margin:.8rem 0 0;padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.22)}
.ebar-venue{margin:0;font-size:clamp(1.04rem,1.22vw,1.16rem);font-weight:600;color:#fff}
.ebar-venue span{font-weight:400;color:#CFC7E9}
.ebar-early{display:flex;align-items:center;gap:.5rem;margin:0;white-space:nowrap;
  font-size:clamp(.96rem,1.1vw,1.04rem);font-weight:700;color:var(--ac-l)}
.ebar-early i{width:7px;height:7px;border-radius:50%;background:var(--ac-l);flex:none;
  animation:pulse 2.4s var(--e) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;
  margin-top:clamp(2.6rem,3.6vw,3.2rem)}

/* ---------- hero load sequence ---------- */
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .kicker{animation:heroUp .55s var(--e) both}
.hero h1{animation:heroUp .55s .06s var(--e) both}
.hero .strap{animation:heroUp .55s .12s var(--e) both}
.hero .ebar{animation:heroUp .55s .18s var(--e) both}
.hero-cta{animation:heroUp .55s .24s var(--e) both}

/* ---------- hero stacked ---------- */
@media(max-width:1080px){
  .hero{flex-direction:column;min-height:0;overflow:visible}
  .hero::before{display:none}
  .art-wrap{position:relative;right:auto;top:auto;bottom:auto;order:2;
    width:100%;height:290px;-webkit-mask-image:none;mask-image:none}
  .art-wrap::after{display:none}
  .hero .art{object-position:center 42%;scale:1;animation:none}
  .hero-in{order:1;padding-bottom:clamp(1.4rem,2.6vw,1.9rem)}
  .hero-txt{max-width:none}
  .hero h1{max-width:28ch}
  .hero .strap{max-width:46ch}
  .ebar{max-width:560px}
}
@media(max-width:560px){
  .ebar-row{gap:.6rem}
  .ebar-sep{display:none}
  .ebar-item{width:100%}
  .ebar-foot{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;text-decoration:none;border:0;
  cursor:pointer;font-family:var(--f);font-weight:700;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border-radius:100px;position:relative;overflow:hidden;
  transition:transform .35s var(--e),box-shadow .35s var(--e),background .35s var(--e),color .35s var(--e)}
.btn .a{display:inline-block;transition:transform .35s var(--e)}
.btn:hover .a{transform:translateX(4px)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--e)}
.btn:hover::before{transform:translateX(120%)}
/* secondary solid - actions that are not registration */
.btn-navy,.btn-p{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(43,33,72,.28)}
.btn-navy:hover,.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(43,33,72,.4)}

/* secondary outline - deliberately quiet, so the action tier stays the loudest */
.btn-o{background:#fff;color:var(--navy);
  box-shadow:0 0 0 2px rgba(43,33,72,.38) inset,
    0 1px 2px rgba(30,23,53,.06),
    0 5px 12px rgba(107,91,181,.18),
    0 12px 28px rgba(107,91,181,.14)}
.btn-o:hover{background:var(--ice);color:var(--navy);transform:translateY(-2px);
  box-shadow:0 0 0 2px var(--navy) inset,
    0 2px 5px rgba(30,23,53,.08),
    0 8px 18px rgba(107,91,181,.26),
    0 20px 42px rgba(107,91,181,.22)}
/* the same outline over a photo */
.bleed .btn-o{background:rgba(255,255,255,.14);color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.85) inset}
.bleed .btn-o:hover{background:rgba(255,255,255,.26);color:#fff;
  box-shadow:0 0 0 2px #fff inset,0 10px 26px rgba(0,0,0,.26)}

/* ---------- lower homepage ---------- */
.band-num{background:var(--navy);color:#fff;padding:clamp(1.6rem,2.6vw,2.2rem) 0}
.band-num .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.band-num .n{text-align:center;padding:.2rem 1.2rem;border-right:1px solid rgba(255,255,255,.18)}
.band-num .n:last-child{border-right:0}
.band-num b{display:block;font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.band-num span{display:block;font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9C8ED4;margin-top:.5rem}
/* figures still awaiting confirmation from ESSKA */
.band-num em{display:block;font-style:normal;font-size:.76rem;font-weight:600;
  letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.5);margin-top:.28rem}
@media(max-width:820px){.band-num .grid{grid-template-columns:1fr 1fr;row-gap:2rem}
  .band-num .n:nth-child(2n){border-right:0}}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.feature.flip>div:first-child{order:2}
@media(max-width:960px){.feature,.feature.flip>div:first-child{grid-template-columns:1fr;order:0}}
.shot{position:relative;overflow:hidden;border-radius:6px;background:var(--ice,#EEEAF8)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.5s var(--e)}
.shot:hover img{transform:scale(1.045)}
.shot.wide img{aspect-ratio:16/10}
.shot .cap{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:.83rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.65rem 1.1rem;border-radius:0 6px 0 0}

.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
@media(max-width:900px){.topics{grid-template-columns:1fr}}
.topic{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.topic:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(43,33,72,.14)}
.topic .im{position:relative;overflow:hidden;background:#EEEAF8}
.topic .im img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform 1.4s var(--e)}
.topic:hover .im img{transform:scale(1.05)}
.topic .im .no{position:absolute;left:1rem;top:.9rem;background:var(--navy);color:#fff;font-size:.8rem;
  font-weight:800;letter-spacing:.12em;padding:.4rem .75rem;border-radius:100px}
/* reserve two lines for the title so the meta line and body copy sit on the
   same baseline across all three cards, however long a title runs */
/* the concrete shape of each strand, taken from the programme */
.topic .t-meta{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ac);margin:0 0 .6rem;line-height:1.45;
  /* two lines reserved as well, so the body copy starts level in all three */
  min-height:2.9em}
@media(max-width:900px){.topic .t-meta{min-height:0}}

.quote{max-width:820px;margin:0 auto;text-align:center}
.quote p{font-size:clamp(1.15rem,2.1vw,1.6rem);color:var(--navy);font-weight:400;line-height:1.45;letter-spacing:-.02em}
.quote .who{font-size:.86rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-top:1.4rem}

/* ---------- subject section ---------- */
.subject{background:linear-gradient(160deg,#FAF8FE,#EEEAF8)}
.implant{position:relative;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 24px 60px rgba(43,33,72,.12),0 0 0 1px rgba(43,33,72,.07)}
.implant img{width:100%;aspect-ratio:11/9;object-fit:contain;background:#fff;display:block;
  transition:transform 1.4s var(--e)}
.implant:hover img{transform:scale(1.03)}
.implant::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--blue)}

/* ---------- topic cards: artwork at rest, detail on hover ---------- */
/* one picture per strand: the implant (revision), bacteria clusters (infection)
   and a planning scan with its alignment axis (future directions) */
.tile{position:relative;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate;
  min-height:clamp(340px,30vw,430px);padding:clamp(1.3rem,2vw,1.7rem);background:var(--navy-d)}
.tile .art{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--e)}
.tile.t1{background:#EEEAF8}
/* the photo has white margins: zoom past them, and fade through the site blue
   rather than grey so the title band stays in the palette */
.tile.t1 .art{object-position:34% 32%;transform:scale(1.14)}
.topic:hover .tile.t1 .art{transform:scale(1.19)}
.tile.t1::after{background:linear-gradient(180deg,rgba(156,142,212,0) 52%,rgba(107,91,181,.42) 72%,
  rgba(43,33,72,.9) 90%,rgba(30,23,53,.96) 100%)}
.topic:hover .tile .art{transform:scale(1.05)}
/* a navy fade at the foot, so the white title reads on every picture */
.tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,23,53,0) 42%,rgba(30,23,53,.5) 72%,rgba(30,23,53,.86) 100%)}
.tile:focus-visible{outline:3px solid var(--ac);outline-offset:-3px}

.tile .word{position:relative;z-index:2;color:#fff;font-size:clamp(1.6rem,2.7vw,2.2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;text-shadow:0 2px 16px rgba(30,23,53,.35);
  transition:opacity .35s var(--e),transform .45s var(--e)}

/* the detail covers the card on a solid navy panel, lifting in on hover or keyboard focus */
.tile .bd{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(1.4rem,2.2vw,1.9rem);
  background:rgba(30,23,53,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(14px);
  transition:opacity .38s var(--e),transform .45s var(--e)}
.tile:hover .bd,.tile:focus-within .bd{opacity:1;transform:none}
.tile:hover .word,.tile:focus-within .word{opacity:0;transform:translateY(-10px)}

.tile .bd h3{font-size:1.35rem;line-height:1.2;color:#fff;margin:0 0 .6rem;letter-spacing:-.02em}
.tile .bd .t-meta{font-size:.8rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#9C8ED4;margin:0 0 .75rem;line-height:1.45;min-height:0}
.tile .bd p:not(.t-meta){font-size:1.02rem;color:#fff;margin:0;line-height:1.6}

/* no hover to give: picture on top with its title, the detail in white below */
@media (hover:none){
  .tile{min-height:0;display:block;padding:0;--pic:clamp(12rem,44vw,16rem)}
  .tile .art{position:relative;display:block;height:var(--pic)}
  .tile::after{bottom:auto;height:var(--pic)}
  .tile .word{position:absolute;left:clamp(1.3rem,2vw,1.7rem);top:calc(var(--pic) - 3.4rem)}
  .tile .bd{position:static;opacity:1;transform:none;background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:clamp(1.3rem,2vw,1.7rem)}
  .tile .bd h3{color:var(--navy)}
  .tile .bd .t-meta{color:var(--ac)}
  .tile .bd p:not(.t-meta){color:var(--muted)}
}

/* ---------- sections ---------- */
section{padding:clamp(3.6rem,7.5vw,7rem) 0}
.tint{background:var(--ice-2)}
.eyebrow{font-size:1rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--blue);margin:0 0 1rem}
h2{font-size:clamp(1.9rem,4vw,3.2rem)}
h2 .lt{font-weight:400}
.lead{font-size:1.12rem;color:var(--muted);max-width:58ch}
/* short lines that read better unbroken: lift the measure cap and let the
   container decide, so they only wrap when the screen is genuinely narrow */
.lead.one-line,.head .one-line,.bleed .one-line{max-width:none}
.head{max-width:820px;margin-bottom:3rem}
/* centred section heads (.center and .orn were used in the markup but never
   defined, so these sections were left-aligned with an unstyled rule) */
.center{text-align:center}
.head.center{max-width:820px;margin-left:auto;margin-right:auto}
.center .lead{margin-left:auto;margin-right:auto}
.orn{width:64px;height:3px;border:0;border-radius:2px;margin:1.5rem auto 0;
  background:linear-gradient(90deg,var(--ac-br),var(--blue))}

/* ---------- the chairs' letter ---------- */
.letter,.prose{max-width:68ch;margin:0 auto}
.letter p,.prose p{margin:0 0 1.15rem;color:var(--ink);line-height:1.75}
.letter .lead,.prose .lead{font-size:1.12rem;color:var(--navy);max-width:none;margin-bottom:1.35rem}

/* the chairs' welcome, set as a letter on headed paper rather than a text block
   beside a stock image: white card on the tinted ground, larger type */
.letterhead{position:relative;max-width:760px;margin:0 auto;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  padding:clamp(2rem,4vw,3.2rem) clamp(1.4rem,3.6vw,3.2rem) clamp(1.9rem,3.4vw,2.8rem);
  box-shadow:0 28px 64px rgba(43,33,72,.10)}
.letterhead::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--ac-br) 0%,var(--blue) 45%,transparent 92%)}
.lh-mark{width:58px;height:auto;margin:0 0 1.7rem}
.letterhead .salut{font-size:1.3rem;font-weight:800;color:var(--navy);margin:0 0 1.25rem;
  letter-spacing:-.015em}
.letterhead p{margin:0 0 1.35rem;color:var(--ink);font-size:1.15rem;line-height:1.78}
.letterhead .lead{font-size:1.36rem;line-height:1.58;color:var(--navy);font-weight:500;
  max-width:none;margin-bottom:1.6rem;letter-spacing:-.014em}
@media(max-width:620px){
  .letterhead p{font-size:1.05rem;line-height:1.72}
  .letterhead .lead{font-size:1.16rem}
}
.sign{margin-top:clamp(2.2rem,3.4vw,2.8rem);padding-top:1.8rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 1.6rem}
@media(max-width:680px){.sign{grid-template-columns:1fr;gap:1.4rem}}
.sign figure{margin:0}
.sign img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:center top;
  display:block;margin:0 0 .85rem;background:var(--ice);
  box-shadow:0 0 0 3px var(--paper),0 6px 18px rgba(43,33,72,.20)}
.sign b{display:block;color:var(--navy);font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.sign span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem;line-height:1.45}
.letter-cta{margin-top:2.2rem;text-align:center}

/* ---------- venue: address, travel routes ---------- */
/* ---------- venue page: the hotel, its facts, and the rooms held for delegates ---------- */
.nowrap{white-space:nowrap}
.v-head{margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.v-head .lead{max-width:64ch;margin-top:1.1rem}
.v-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(1.6rem,3.5vw,3.2rem);align-items:stretch}
.v-photo{margin:0;border-radius:10px;overflow:hidden;background:var(--ice);min-height:340px;
  box-shadow:0 18px 44px rgba(43,33,72,.12)}
.v-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.v-photo:hover img{transform:scale(1.04)}
.v-card{display:flex;flex-direction:column;gap:1.5rem}
.v-card > p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.7}
.v-facts{display:grid;grid-template-columns:1fr 1fr;column-gap:1.6rem;margin:0;border-top:1px solid var(--line)}
.v-facts > div{padding:.95rem 0;border-bottom:1px solid var(--line)}
.v-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
/* values read like the description beside them: body weight and ink, not bold navy */
.v-facts dd{margin:0;color:var(--ink);font-weight:500;font-size:1rem;line-height:1.6}
.v-facts a{color:var(--ac-d);font-weight:500;text-decoration:underline;text-decoration-color:rgba(84,67,147,.25);text-underline-offset:3px}
.v-facts a:hover{text-decoration-color:currentColor}
.v-card .btn-row{margin-top:auto}
/* rooms sit right under the hotel: the text on the left, when booking opens on the right */
.v-stay{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);margin-top:clamp(2.4rem,5vw,3.6rem);
  border-radius:10px;overflow:hidden;background:var(--ice-2);border:1px solid var(--line)}
.v-stay-b{padding:clamp(1.5rem,3vw,2.3rem)}
.v-stay-b .eyebrow{margin:0 0 .45rem}
.v-stay-b h3{font-size:clamp(1.35rem,2vw,1.7rem);color:var(--navy);margin:0 0 .85rem;letter-spacing:-.02em}
.v-stay-b p:not(.eyebrow){margin:0 0 .65rem;color:var(--ink);max-width:70ch}
.v-stay-b p:last-child{margin-bottom:0;color:var(--muted)}
.v-stay-when{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,3vw,2.3rem);
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff}
.v-stay-when span{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-l)}
.v-stay-when b{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:.45rem 0 .65rem}
.v-stay-when small{font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.5}
@media(max-width:900px){
  .v-grid,.v-stay{grid-template-columns:1fr}
  .v-photo{min-height:0}.v-photo img{aspect-ratio:16/10;height:auto}
}
@media(max-width:520px){.v-facts{grid-template-columns:1fr}}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* an inline "read more" link, distinct from the button tiers */
.lnk{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);transition:gap .3s var(--e),color .3s var(--e)}
.lnk::after{content:"\2192";font-size:.95rem;line-height:1}
.lnk:hover{gap:.75rem;color:var(--ac-d)}

.routes{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.8rem}
.routes-top{margin-top:0}
/* each way in gets an icon tile and its one key fact */
.route-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.route-ic{flex:none;width:50px;height:50px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--navy-l),var(--navy-d));box-shadow:0 8px 18px rgba(43,33,72,.22);
  transition:transform .4s var(--e)}
.route:hover .route-ic{transform:rotate(-6deg) scale(1.06)}
.route-ic svg{width:25px;height:25px}
.route-tag{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ac);
  background:var(--ice);border-radius:100px;padding:.42rem .85rem;white-space:nowrap}
@media(max-width:820px){.routes{grid-template-columns:1fr}}
.route{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:1.7rem 1.6rem;
  transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e)}
.route:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(43,33,72,.13);
  border-color:transparent}
.route h3{font-size:1.08rem;color:var(--navy);margin-bottom:.6rem;letter-spacing:-.015em}
.route p{font-size:1rem;color:var(--muted);margin:0 0 1.2rem;line-height:1.65}
.route .lnk{margin-top:auto;align-self:flex-start}
.routes-note{margin:1.8rem 0 0;text-align:center;font-size:.88rem;color:var(--muted)}

/* stats */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:820px){.nums{grid-template-columns:1fr 1fr}}
.num{padding:2.2rem 1.6rem 2.2rem 0;border-right:1px solid var(--line)}
.num:last-child{border-right:0}
.num b{display:block;font-size:clamp(2.6rem,5.2vw,4rem);font-weight:800;color:var(--navy);letter-spacing:-.045em;line-height:1}
.num b i{font-style:normal;color:var(--blue)}
.num span{display:block;font-size:.9rem;color:var(--muted);margin-top:.55rem;max-width:20ch}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:920px){.split{grid-template-columns:1fr}}
.frame{position:relative;border-radius:4px;overflow:hidden;background:var(--ice)}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--e)}
.frame:hover img{transform:scale(1.05)}
.frame .badge{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:.83rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:.75rem 1.3rem}
.stack{display:grid;gap:1.2rem}

/* list */
.pts{margin-top:2rem;border-top:1px solid var(--line)}
.pt{display:grid;grid-template-columns:48px 1fr;gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--line);align-items:start}
.pt i{font-style:normal;font-weight:800;color:var(--blue);font-size:.95rem;letter-spacing:.08em;padding-top:.2rem}
.pt b{display:block;color:var(--navy);font-weight:700;font-size:1.06rem}
.pt span{color:var(--muted);font-size:.95rem}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:2rem 1.8rem;
  transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(43,33,72,.13);border-color:transparent}
.card .ic{width:46px;height:46px;border-radius:50%;background:var(--navy);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:.9rem;margin-bottom:1.2rem}
.card h3{font-size:1.2rem;margin-bottom:.6rem}
.card p{font-size:.94rem;color:var(--muted);margin:0}

/* programme */
.sched{border-top:2px solid var(--navy)}
.day-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;margin:0;
  padding:1.1rem 0;border-bottom:1px solid var(--line)}
.day-head b{color:var(--navy);font-size:1.15rem;font-weight:800;letter-spacing:-.015em}
.day-head span{font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.day-head span:last-child{color:var(--ac);font-variant-numeric:tabular-nums}

/* ---------- programme: control panel ---------- */
.prog-controls{margin:0 0 1.3rem;background:var(--ice-2);border:1px solid var(--line);
  border-radius:10px;padding:clamp(1.2rem,2vw,1.6rem)}
.pctl-top{display:block}
.pctl-search{min-width:0}
.plbl{display:block;font-size:.86rem;font-weight:700;color:var(--navy);margin-bottom:.5rem}
#progQ{width:100%;font:inherit;font-family:var(--f);font-size:1.05rem;color:var(--ink);
  background:#fff;border:1.5px solid rgba(43,33,72,.22);border-radius:8px;padding:.85rem 1rem;
  transition:border-color .25s var(--e),box-shadow .25s var(--e)}
#progQ::placeholder{color:var(--muted);opacity:.8}
#progQ:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(107,91,181,.18)}
/* day chips on the left, the download on the right of the same line */
.pctl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem 1.4rem;margin-top:1.1rem}
.pctl-row .pchips{margin-top:0}

.pctl-dl{flex:none}

/* day switcher: one day at a time */
.pchips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.pchip{font:inherit;font-family:var(--f);font-size:.82rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);background:#fff;cursor:pointer;
  border:1.5px solid rgba(43,33,72,.22);border-radius:100px;padding:.7rem 1.5rem;
  box-shadow:0 1px 2px rgba(30,23,53,.05),
    0 4px 10px rgba(107,91,181,.16),
    0 10px 22px rgba(107,91,181,.11);
  transition:all .25s var(--e)}
.pchip:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(30,23,53,.07),
    0 7px 16px rgba(107,91,181,.24),
    0 16px 32px rgba(107,91,181,.18)}
.pchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pchip:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.pempty{margin:2rem 0;font-size:1rem;color:var(--muted)}
.pempty button{font:inherit;font-family:var(--f);font-size:1rem;color:var(--ac);background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline;font-weight:700}

/* ---------- programme: day ---------- */
.pdays{margin-top:2.6rem}
/* .pday is a <section>, so the global section padding has to be cleared here */
.pday{padding:0;margin-bottom:3rem}
.pday:last-child{margin-bottom:0}
/* day header: a tear-off calendar badge, the day name, and one line of facts */
.pday-head{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;
  padding-bottom:1.2rem;border-bottom:2px solid var(--navy)}
.pcal{flex:none;display:flex;flex-direction:column;width:78px;text-align:center;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 6px 18px rgba(43,33,72,.14)}
.pcal-m{background:var(--navy);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;padding:.3rem 0}
.pcal-d{font-size:2rem;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em;
  padding:.45rem 0 .1rem}
.pcal-w{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.45rem}
.pday-id{display:flex;flex-direction:column;gap:.6rem;min-width:0;flex:1 1 240px}
.pday-label{font-size:1.6rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1}
.pday-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.3rem;font-size:1rem;color:var(--ink)}
.pday-meta > span{display:inline-flex;align-items:center;gap:.45rem}
.pday-meta svg{width:18px;height:18px;flex:none;color:var(--ac)}
.pday-meta b{font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums}
.pday-head .pcollapse{margin-left:auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pcollapse{font:inherit;font-family:var(--f);font-size:.78rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:#fff;cursor:pointer;
  border:1.5px solid rgba(43,33,72,.26);border-radius:100px;padding:.65rem 1.35rem;
  box-shadow:0 1px 2px rgba(30,23,53,.05),
    0 4px 10px rgba(107,91,181,.16),
    0 10px 22px rgba(107,91,181,.11);
  transition:all .25s var(--e)}
.pcollapse:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(30,23,53,.07),
    0 7px 16px rgba(107,91,181,.24),
    0 16px 32px rgba(107,91,181,.18)}
.pcollapse:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
@media(max-width:560px){
  .pcal{width:64px}.pcal-d{font-size:1.6rem}
  .pday-label{font-size:1.4rem}
}

/* ---------- programme: rows ---------- */
.prow{border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
/* the whole header is one button, so any part of the block opens it */
.prow-btn,.prow-static{display:flex;align-items:flex-start;gap:1.4rem;width:100%;
  text-align:left;padding:1.2rem .8rem 1.2rem .6rem;background:none;border:0;
  font:inherit;font-family:var(--f)}
.prow-btn{cursor:pointer;border-radius:8px;transition:background .22s var(--e)}
.prow-btn:hover{background:var(--ice-2)}
.prow-btn:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.ptime{flex:0 0 82px;width:82px}
.pstart{display:block;font-size:1.05rem;font-weight:800;color:var(--ac);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.pdur{display:block;font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:.2rem}
.pmain-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.ptitle{font-size:1.12rem;font-weight:800;color:var(--navy);letter-spacing:-.018em;line-height:1.3}
.psub{font-size:.86rem;color:var(--muted)}
/* the session note leads the block, a step larger than the old talk count */
.psub-note{font-size:.95rem;line-height:1.55;color:var(--muted);max-width:74ch}
.psub-note .pnote-l{font-size:.74rem;margin-right:.6rem}

/* the affordance: a chevron that turns when the block is open */
.pchev{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ice);
  position:relative;margin-top:.15rem;
  transition:transform .3s var(--e),background .22s var(--e)}
.pchev::before,.pchev::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;
  border-radius:2px;background:var(--navy)}
.pchev::before{transform:translate(-70%,-50%) rotate(45deg)}
.pchev::after{transform:translate(-30%,-50%) rotate(-45deg)}
.prow-btn:hover .pchev{background:#fff}
.prow.is-open .pchev{transform:rotate(180deg);background:var(--ac)}
.prow.is-open .pchev::before,.prow.is-open .pchev::after{background:#fff}

/* breaks stay quiet and are not interactive */
.prow.break{background:var(--ice-2)}
.prow.break .prow-static{padding-top:.85rem;padding-bottom:.85rem}
.prow.break .pstart{color:var(--muted);font-weight:700;font-size:.98rem}
.prow.break .ptitle{font-size:1rem;font-weight:600;color:var(--muted)}
.prow.break .pdur{opacity:.8}

/* talks line up under the title, clear of the time column */
.ptalks-wrap{padding:0 .8rem 1.3rem calc(82px + 1.4rem + .6rem)}
.ptalks{list-style:none;margin:0;padding:0 0 0 1.2rem;border-left:2px solid var(--ac-br);
  counter-reset:talk}
/* title left, speaker in its own right-hand column, so names line up */
.ptalk{display:grid;grid-template-columns:22px minmax(0,1fr) 240px;gap:.4rem .85rem;
  padding:.62rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.ptalk:last-child{border-bottom:0}
/* each talk is numbered within its session, so the count stays right if talks change */
.ptalk::before{counter-increment:talk;content:counter(talk);
  font-size:.78rem;font-weight:800;color:var(--ac-br);font-variant-numeric:tabular-nums;
  text-align:right;letter-spacing:.02em}
.ptx{font-size:1rem;color:var(--ink);line-height:1.45}
.psp{font-size:.92rem;font-weight:700;color:var(--navy);line-height:1.45}
@media(max-width:820px){
  .ptalk{grid-template-columns:22px 1fr;gap:.15rem .85rem}
  .psp{grid-column:2;font-size:.86rem}
  .psp:empty{display:none}
}
.pnote{margin:1rem 0 0 1.1rem;padding-top:.85rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted);line-height:1.6}
/* the note is metadata, so it carries a small label rather than reading as stray text */
.pnote-l{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ac);margin-right:.65rem}
.prog-note{margin:1.2rem 0 0;font-size:.84rem;color:var(--muted)}
mark{background:var(--ice);color:inherit;padding:0 .1em;border-radius:2px}

@media(max-width:700px){
  .prow-btn,.prow-static{flex-wrap:wrap;gap:.5rem 1rem;padding-left:.4rem}
  .ptime{flex:0 0 100%;width:auto;display:flex;align-items:baseline;gap:.7rem}
  .pdur{margin-top:0}
  .pmain-head{flex:1 1 auto}
  .ptalks-wrap{padding-left:1rem}
  .pctl-dl{width:100%;justify-content:center}
  .pcollapse{margin-left:0}
}
@media print{
  .prog-controls,.pcollapse,.pempty,.pchev{display:none!important}
  .pday[hidden]{display:block!important}
  .ptalks-wrap[hidden]{display:block!important}
  .ptalk[hidden]{display:list-item!important}
  .pday,.prow{break-inside:avoid}
}

/* programme summary tiles */
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:0 0 3rem}
@media(max-width:900px){.summary{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.summary{grid-template-columns:1fr}}
.sm{background:var(--ice-2);border-left:4px solid var(--ac-br);border-radius:0 6px 6px 0;
  padding:1.2rem 1.3rem}
.sm b{display:block;color:var(--navy);font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.sm span{display:block;color:var(--navy);font-weight:700;font-size:.92rem;margin-top:.5rem}
.sm em{display:block;font-style:normal;color:var(--muted);font-size:.82rem;margin-top:.2rem;
  line-height:1.4}
.prog-note{margin:1.2rem 0 0;font-size:.84rem;color:var(--muted)}

.fac-h{font-size:.98rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ac);margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.fac-h+.fac-grid{margin-bottom:2.8rem}
.slot b{display:block;color:var(--navy);font-size:1.05rem;font-weight:700}
.slot em{font-style:normal;font-size:.92rem;color:var(--muted)}
.slot .w{font-size:.88rem;color:var(--muted)}
.slot.key{background:linear-gradient(90deg,var(--ice),transparent 70%)}
.tabs{display:flex;gap:.6rem;margin-bottom:2.2rem;flex-wrap:wrap}
.tabs button{font:inherit;font-family:var(--f);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.8rem 1.8rem;border-radius:100px;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:all .25s var(--e)}
.tabs button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* faculty */
.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:900px){.fac-grid{grid-template-columns:repeat(2,1fr)}}
.fac{text-align:center;padding:1.5rem .9rem;border:1px solid var(--line);border-radius:6px;background:#fff;transition:all .4s var(--e)}
.fac:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(43,33,72,.12);border-color:transparent}
.fac .av{width:62px;height:62px;margin:0 auto .8rem;border-radius:50%;background:var(--ice);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.fac b{display:block;color:var(--navy);font-size:.96rem;font-weight:700}
.fac span{display:block;font-size:.82rem;color:var(--muted);margin-top:.25rem;line-height:1.4}
.fac .c{font-size:.83rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}

/* full bleed CTA */
.bleed{position:relative;overflow:hidden;color:#fff;text-align:center;--x:0;padding:clamp(4rem,9vw,7.5rem) 0}
.bleed img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:0}
.bleed .scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(30,23,53,.72),rgba(30,23,53,.55) 45%,rgba(30,23,53,.85))}
.bleed .wrap{position:relative;z-index:3}
/* a picture-only banner: no copy to protect, so it keeps a set height and a
   lighter tint that lets the photo come through */
/* travel opener: a photo carries the section title and the public transport
   route from the airport, drawn as a line of stops */
.travel-hero{padding:clamp(3.8rem,7vw,6rem) 0 clamp(3.2rem,6vw,4.8rem)}
.journey{list-style:none;margin:clamp(2rem,4vw,2.8rem) auto 0;padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1rem,2.6vw,2.2rem);
  max-width:1120px;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto;
  align-items:start;column-gap:.5rem;text-align:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:16px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.jn-stop{display:flex;flex-direction:column;align-items:center;width:clamp(112px,11.5vw,150px)}
.jn-ic{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--navy);box-shadow:0 8px 22px rgba(30,23,53,.3)}
.jn-ic svg{width:26px;height:26px}
.jn-end .jn-ic{background:linear-gradient(135deg,var(--ac-br),var(--ac-d));color:#fff;
  box-shadow:0 0 0 6px rgba(156,142,212,.3),0 8px 22px rgba(30,23,53,.3)}
.jn-t{display:flex;flex-direction:column;gap:.2rem}
.jn-stop .jn-t{margin-top:.75rem}
.jn-t b{color:#fff;font-size:.98rem;font-weight:700;line-height:1.3}
.jn-t small{color:var(--ac-l);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.jn-leg{position:relative;padding-top:44px}
.jn-leg::before{content:"";position:absolute;left:.2rem;right:.2rem;top:26px;border-top:2px dashed rgba(255,255,255,.55)}
.jn-leg::after{content:"";position:absolute;right:.1rem;top:22px;width:8px;height:8px;
  border-top:2px solid rgba(255,255,255,.75);border-right:2px solid rgba(255,255,255,.75);transform:rotate(45deg)}
.jn-leg .jn-t b{font-size:.92rem}
.jn-leg .jn-t small{color:rgba(255,255,255,.78);letter-spacing:.02em;text-transform:none;font-weight:500;font-size:.84rem}
@media(max-width:900px){
  .journey{grid-template-columns:1fr;max-width:460px;text-align:left;row-gap:0}
  .jn-stop{flex-direction:row;width:auto;gap:1rem}
  .jn-stop .jn-t{margin-top:0}
  .jn-leg{padding:.9rem 0 .9rem 3.3rem;margin-left:26px;border-left:2px dashed rgba(255,255,255,.55)}
  .jn-leg::before,.jn-leg::after{display:none}
}
/* a soft pool of shade behind the centred copy, so the photo stays bright at
   the edges but the text sits on something calm */
.bleed .scrim::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 58% at 50% 52%,rgba(30,23,53,.42) 0%,rgba(30,23,53,.18) 60%,rgba(30,23,53,0) 100%)}
.bleed h2{color:#fff;max-width:18ch;margin:0 auto}
/* .bleed p sets margin for the body copy and was also zeroing the eyebrow's
   bottom margin, so the eyebrow sat flush against the heading */
.bleed .eyebrow{color:#9C8ED4;margin:0 auto 1rem}
.bleed p{color:#fff;max-width:50ch;margin:1.3rem auto 0;font-size:1.12rem;font-weight:500;line-height:1.65;
  text-shadow:0 1px 2px rgba(30,23,53,.55),0 2px 18px rgba(30,23,53,.45)}
.bleed p{margin-left:auto;margin-right:auto}
.bleed .note-date{font-size:1.05rem;color:rgba(255,255,255,.94);margin:0 auto;letter-spacing:.005em}
.count{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin:2.6rem 0 .8rem}
.count div{min-width:98px;padding:1.1rem .6rem;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(255,255,255,.08)}
.count b{display:block;font-size:clamp(1.9rem,4.6vw,2.8rem);font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.count span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:.55rem}
.bleed .go{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* table */
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-size:.87rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:800;padding:0 0 .9rem;border-bottom:2px solid var(--navy)}
th:last-child,td:last-child{text-align:right;font-variant-numeric:tabular-nums}
td{padding:1.05rem 0;border-bottom:1px solid var(--line)}
tbody tr{transition:background .25s var(--e)} tbody tr:hover{background:var(--ice-2)}
td b{color:var(--navy);font-weight:700}
td small{display:block;color:var(--muted);font-size:.83rem;margin-top:.15rem}
.note{background:var(--ice);border-left:3px solid var(--blue);padding:1.3rem 1.5rem;margin-top:2rem;font-size:.93rem;color:var(--navy);border-radius:0 4px 4px 0}
.note b{display:block;font-weight:800;margin-bottom:.25rem}
.two{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:920px){.two{grid-template-columns:1fr}}
.box{background:var(--navy);color:rgba(255,255,255,.82);padding:2.1rem 1.9rem;border-radius:4px;text-align:center}
.box h3{color:#fff;margin-bottom:.7rem}
.box p{font-size:.92rem}
.box .btn{width:100%;justify-content:center;padding-inline:1rem}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1.5rem;flex-wrap:wrap;
  padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:1.15rem;line-height:1.45}
.row:last-of-type{border-bottom:0}
/* label in body ink rather than the pale muted grey, so both halves read easily */
.row span{color:var(--ink);font-weight:500}
.row b{color:var(--navy);font-weight:700;text-align:right}

/* page header for inner pages */
.ph{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  min-height:clamp(280px,32vw,420px);padding:clamp(4rem,8vw,6rem) 0 clamp(2.2rem,4vw,3.4rem);
  background:var(--navy)}
.ph .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transform:scale(1.04);animation:phpan 40s ease-in-out infinite alternate}
@keyframes phpan{from{transform:scale(1.04)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.ph .bg{animation:none}}
.ph .scrim.plain{background:
  radial-gradient(90% 130% at 12% 0%,#3A2C61 0%,#2B2148 45%,#1E1735 100%)}
.ph .scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(100deg,rgba(30,23,53,.92) 0%,rgba(30,23,53,.72) 42%,rgba(30,23,53,.34) 100%)}
.ph .sky{position:absolute;left:0;right:0;bottom:0;z-index:3;width:100%;
  height:clamp(90px,14vh,180px);object-fit:cover;object-position:center bottom;opacity:.3;
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent);mask-image:linear-gradient(to top,#000 35%,transparent)}
.ph .wrap{position:relative;z-index:5;width:100%}
.ph h1{color:#fff;font-size:clamp(2.1rem,5vw,4rem)}
.ph h1 .lt{color:rgba(255,255,255,.62)}
.ph p{color:rgba(255,255,255,.86);margin-top:1rem;font-size:clamp(.95rem,1.25vw,1.08rem);max-width:none}
@media(min-width:900px){.ph p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.crumb{font-size:1.04rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9C8ED4;margin-bottom:.9rem}
.ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--blue);z-index:6}
.ph-meta{position:relative;z-index:5;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.22)}
.ph-meta span{font-size:.92rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.84);display:flex;align-items:center}
.ph-meta span b{color:#fff;font-weight:800;font-size:1.12rem;letter-spacing:.02em}

/* form */
.form{max-width:640px}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.87rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:.45rem}
.field input,.field textarea,.field select{width:100%;font:inherit;font-family:var(--f);font-size:.95rem;padding:.85rem .95rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:4px;transition:all .25s var(--e)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(107,91,181,.18);outline:none}
.field textarea{min-height:130px;resize:vertical}

/* footer */
footer{background:var(--navy-d);color:rgba(255,255,255,.66);font-size:.9rem;padding:clamp(3rem,6vw,4.6rem) 0 2rem}
.f-grid{display:grid;grid-template-columns:1.7fr 1.1fr 1fr 1.1fr;gap:2.4rem}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
footer h4{color:#9C8ED4;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin:0 0 1.1rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.6rem}
footer a{text-decoration:none;cursor:pointer;transition:color .22s var(--e)}
footer a:hover{color:#fff;text-decoration:underline}
.f-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.f-brand img{width:46px}
.f-brand b{color:#fff;font-size:.95rem;font-weight:800;display:block;line-height:1.1}
.f-brand span{color:#9C8ED4;font-size:.75rem;font-weight:700;letter-spacing:.19em;display:block;margin-top:.2rem}
.f-base{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.42)}

/* sticky register */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(30,23,53,.97);
  display:flex;align-items:center;gap:1.2rem;padding:.75rem max(var(--pad),calc((100% - 1720px)/2 + var(--pad)));  /* line the Register button up with the nav above */
  transform:translateY(130%);
  transition:transform .45s var(--e),background .4s var(--e),box-shadow .4s var(--e);
  border-top:1px solid rgba(255,255,255,.12)}
.stick.onlight{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-top:1px solid rgba(43,33,72,.14);
  box-shadow:0 -10px 34px rgba(43,33,72,.14)}
.stick.onlight .l{color:var(--navy)}
.stick.onlight .l b{color:var(--navy)}
.stick.onlight .l span{color:var(--muted)}
.stick.show{transform:none}
.stick .l{color:#fff;font-size:.9rem;line-height:1.3}
.stick .l b{display:block;font-weight:700}
.stick .l > span{display:block;color:#9C8ED4;font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}
.stick .btn{margin-left:auto;flex:none}
@media(max-width:900px){.stick .l b{font-size:.84rem}}
@media(max-width:640px){.stick .l > b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.stick .l > span{display:none}}

/* "TBC" stands in wherever a figure is not confirmed yet; the title gives the full words */
abbr.tbc{text-decoration:none;cursor:help;letter-spacing:.02em}
td abbr.tbc{font-weight:700;color:var(--muted)}

/* ---------- registration: fee periods, fee table, next steps ---------- */
.fee-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.8rem}
.fee-flag{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);
  background:var(--ice);border-radius:100px;padding:.5rem 1rem}
.fee-periods{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fee-period{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.3rem;
  background:#fff;border:1px solid var(--line);border-radius:10px;transition:all .3s var(--e)}
.fee-period b{font-size:1.2rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.fee-period > span:not(.fp-tag){font-size:.98rem;color:var(--muted)}
.fp-tag{position:absolute;right:1rem;top:1rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border-radius:100px;padding:.3rem .65rem;background:rgba(255,255,255,.18);color:#fff}
.fee-period.is-now,.fee-period.is-next{background:linear-gradient(145deg,var(--navy) 0%,var(--navy-d) 100%);border-color:var(--navy);
  box-shadow:0 14px 32px rgba(43,33,72,.22)}
.fee-period.is-now b,.fee-period.is-next b{color:#fff}
.fee-period.is-now > span:not(.fp-tag),.fee-period.is-next > span:not(.fp-tag){color:rgba(255,255,255,.85)}
.fee-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
table.fees{width:100%;border-collapse:collapse;font-size:1.02rem}
table.fees th,table.fees td{padding:1.05rem 1.3rem;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
table.fees thead th{background:var(--ice-2);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);border-bottom:2px solid var(--navy)}
table.fees th:first-child{text-align:left}
table.fees tbody th{font-weight:700;color:var(--navy);letter-spacing:0;text-transform:none;font-size:1.02rem}
table.fees td{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.08rem;width:15%}
table.fees tbody tr:last-child th,table.fees tbody tr:last-child td{border-bottom:0}
table.fees tbody tr:hover{background:var(--ice-2)}
table.fees .is-now,table.fees .is-next{background:rgba(107,91,181,.07);color:var(--ac-d)}
table.fees thead .is-now,table.fees thead .is-next{background:var(--navy);color:#fff;border-bottom-color:var(--navy)}
.fee-foot{margin:1rem 0 0;font-size:.95rem;color:var(--muted)}
.reg-next{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:clamp(2.4rem,5vw,3.4rem)}
.reg-card{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;padding:clamp(1.5rem,3vw,2.2rem);border-radius:10px}
.reg-card .eyebrow{margin:0}
.reg-card h3{font-size:clamp(1.3rem,2vw,1.6rem);margin:0;letter-spacing:-.02em}
.reg-card p:not(.eyebrow){margin:0 0 .6rem;line-height:1.65}
.reg-card .btn{margin-top:auto}
.reg-book{background:linear-gradient(145deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff}
.reg-book .eyebrow{color:var(--ac-l)}
.reg-book h3{color:#fff}
.reg-book p:not(.eyebrow){color:rgba(255,255,255,.86)}
.reg-stay{background:var(--ice-2);border:1px solid var(--line)}
.reg-stay h3{color:var(--navy)}
.reg-stay p:not(.eyebrow){color:var(--muted)}
.btn.is-soon{cursor:default;opacity:.92;box-shadow:none}
.btn.is-soon:hover{transform:none}
.btn.is-soon::before{display:none}
@media(max-width:820px){
  .fee-periods,.reg-next{grid-template-columns:1fr}
  .fee-table{border:0;background:none;overflow:visible}
  table.fees thead{display:none}
  table.fees tbody{display:grid;gap:.9rem}
  table.fees tbody tr{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  table.fees tbody th{grid-column:1/-1;text-align:left;background:var(--ice-2);border-bottom:1px solid var(--line)!important}
  table.fees td{width:auto;text-align:left;border-bottom:0;padding:.8rem 1rem}
  table.fees td::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
  table.fees td.is-now::before,table.fees td.is-next::before{color:var(--ac)}
}

/* ---------- industry: sponsorship contact and compliance status ----------
   Mostly white, slate and navy: the one blue on the page is the email button,
   so it is the obvious next step. */
.ph-ind .bg{object-position:30% 38%}
/* a neutral dark wash rather than the navy one, so the warm stone and sky of
   the artwork come through */
.ph-ind .scrim{background:linear-gradient(100deg,rgba(30,23,53,.88) 0%,rgba(30,23,53,.62) 42%,rgba(30,23,53,.12) 100%)}
.ind-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.4rem,3vw,2rem);align-items:stretch}
.ind-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
  padding:clamp(1.7rem,3.4vw,2.6rem);border-radius:14px}
.ind-card .eyebrow{margin:0;color:var(--muted)}
.ind-card h2,.ind-card h3{margin:0;letter-spacing:-.025em;color:var(--navy)}
.ind-card p:not(.eyebrow){margin:0;line-height:1.7;font-size:1.05rem;color:var(--ink)}
.ind-spon{background:#fff;border:1px solid var(--line);box-shadow:0 20px 48px rgba(30,23,53,.09)}
.ind-spon h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.ind-person{display:flex;align-items:center;gap:1rem;width:100%;margin:.4rem 0 .6rem;padding:1rem 1.15rem;
  background:var(--ice-2);border:1px solid var(--line);border-radius:12px}
.ind-av{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.04em}
img.ind-av{object-fit:cover;background:var(--ice);box-shadow:0 0 0 3px #fff,0 4px 12px rgba(30,23,53,.18)}
.ind-who{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ind-who b{font-size:1.15rem;color:var(--navy)}
.ind-who span{font-size:.92rem;color:var(--muted)}
.ind-who a{font-size:.98rem;font-weight:700;color:var(--navy);text-decoration:underline;
  text-decoration-color:rgba(43,33,72,.3);text-underline-offset:3px;overflow-wrap:anywhere}
.ind-who a:hover{text-decoration-color:var(--navy)}
.ind-spon .btn{margin-top:.3rem}
.ind-comp{background:var(--ice-2);border:1px solid var(--line)}
.ind-comp h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.ind-comp p:not(.eyebrow){color:var(--muted)}
/* status tracker: done, in progress, still to come */
.ind-steps{list-style:none;margin:.6rem 0 0;padding:0;width:100%;display:flex;flex-direction:column}
.ind-steps li{position:relative;display:flex;gap:1rem;padding:0 0 1.35rem}
.ind-steps li:last-child{padding-bottom:0}
.ind-steps li::before{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:rgba(43,33,72,.14)}
.ind-steps li:last-child::before{display:none}
.ind-steps li.done::before{background:var(--navy)}
.ind-steps i{flex:none;position:relative;z-index:1;width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(43,33,72,.22);background:#fff}
.ind-steps li.done i{background:var(--navy);border-color:var(--navy)}
.ind-steps li.done i::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.ind-steps li.now i{border-color:var(--navy);box-shadow:0 0 0 5px rgba(43,33,72,.08)}
.ind-steps li.now i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--navy)}
.ind-st{display:flex;flex-direction:column;gap:.1rem}
.ind-st b{color:var(--navy);font-size:1.02rem}
.ind-steps li:not(.done):not(.now) .ind-st b{color:var(--muted)}
.ind-st span{font-size:.9rem;color:var(--muted)}
@media(max-width:900px){.ind-grid{grid-template-columns:1fr}}

/* ---------- contacts: a light banner that carries the contacts themselves ---------- */
.pc{position:relative;overflow:hidden;background:linear-gradient(160deg,#FAF8FE 0%,var(--ice-2) 55%,var(--ice) 100%);
  padding:clamp(3.4rem,6vw,4.8rem) 0 clamp(2.2rem,3.6vw,3rem);border-bottom:4px solid var(--blue)}
.pc::before{content:"";position:absolute;right:-8%;top:-30%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(107,91,181,.14),rgba(107,91,181,0) 65%);pointer-events:none}
.pc-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.pc .crumb{color:var(--blue-d)}
.pc h1{font-size:clamp(2.1rem,5vw,4rem);color:var(--navy);margin:0}
.pc h1 .lt{font-weight:400}
.pc-sub{color:var(--muted);font-size:1.08rem;line-height:1.6;margin:1rem 0 0;max-width:46ch}
.pc-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pc-meta b{color:var(--navy);font-size:1rem;letter-spacing:.02em}
.qcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.qc{display:flex;align-items:center;gap:1rem;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.9rem 1rem .9rem 1rem;box-shadow:0 10px 26px rgba(43,33,72,.08);
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.qc:hover{transform:translateY(-3px);border-color:rgba(43,33,72,.28);box-shadow:0 16px 34px rgba(43,33,72,.14)}
.qc:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.qc-av{flex:none;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.94rem;letter-spacing:.04em}
img.qc-av{object-fit:cover;background:var(--ice);box-shadow:0 0 0 3px #fff,0 4px 12px rgba(30,23,53,.16)}
.qc-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.qc-t b{color:var(--navy);font-size:1.05rem}
.qc-t small{color:var(--muted);font-size:.88rem}
.qc-t em{font-style:normal;color:var(--navy);font-size:.88rem;font-weight:600;margin-top:.15rem;overflow-wrap:anywhere;opacity:.85}
.qc-m{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ice);color:var(--ac);
  transition:background .3s var(--e),color .3s var(--e)}
.qc:hover .qc-m{background:var(--ac);color:#fff}
.qc-m svg{width:19px;height:19px}
@media(max-width:900px){.pc-in{grid-template-columns:1fr}}

/* =====================================================================
   Final touches: light icons, soft shades, gentle movement. Each block is
   independent, so any one can be removed without touching the rest.
   ===================================================================== */

/* icons: homepage stats band */
.band-num .n-ic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto .7rem;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--ac-l)}
.band-num .n-ic svg{width:22px;height:22px}

/* icons: programme summary tiles (top right, quiet) */
.sm{position:relative}
.sm-ic{position:absolute;right:1rem;top:1rem;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:#fff;color:var(--blue-d);box-shadow:0 4px 12px rgba(43,33,72,.08)}
.sm-ic svg{width:20px;height:20px}

/* icons: venue facts */
.v-facts dt{display:flex;align-items:center;gap:.45rem}
.vf-ic{display:inline-grid;color:var(--blue)}
.vf-ic svg{width:16px;height:16px}

/* faculty: three soft shades cycle across the grid, so the wall of cards
   has some rhythm; the initials ring up on hover */
.fac-grid .fac:nth-child(3n+2) .av{background:#EEEAF8;color:var(--navy-l)}
.fac-grid .fac:nth-child(3n+3) .av{background:#DDD7EF;color:#544393}
.fac .av{transition:box-shadow .4s var(--e),transform .4s var(--e)}
.fac:hover .av{transform:scale(1.06);box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(107,91,181,.25)}

/* pale sections: a faint dot texture and a soft light in one corner */
.tint{background:
  radial-gradient(55% 60% at 100% 0%,rgba(107,91,181,.10),rgba(107,91,181,0) 70%),
  radial-gradient(circle at 1px 1px,rgba(43,33,72,.07) 1px,transparent 1.3px) 0 0/24px 24px,
  var(--ice-2)}

/* the chairs' letter sits in two pools of light */
.sec-letter{background:
  radial-gradient(38% 30% at 10% 22%,rgba(107,91,181,.10),rgba(107,91,181,0) 70%),
  radial-gradient(40% 36% at 92% 72%,rgba(107,91,181,.09),rgba(107,91,181,0) 70%),
  var(--ice-2)}

/* footer: a soft top light and the London skyline, as on the page headers */
footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#332654 0%,var(--navy-d) 45%)}
footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(110px,14vw,190px);
  background:url("../img/skyline-london.png") center bottom/cover no-repeat;opacity:.07;pointer-events:none}
footer > *{position:relative}

/* movement: the short blue rules draw in when their heading appears */
.rv.pre hr.orn{transform:scaleX(0)}
.rv.in hr.orn{transform:scaleX(1);transition:transform .9s .25s var(--e)}

/* movement: the route legs in the travel banner flow gently towards the hotel */
@media(min-width:901px){
  .jn-leg::before{border-top:0;height:2px;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 7px,transparent 7px 13px);
    animation:jnflow 1.8s linear infinite}
}
@keyframes jnflow{to{background-position:13px 0}}

/* homepage venue heading stays on one line where there is room */
@media(min-width:961px){.h-fit{white-space:nowrap;font-size:clamp(1.9rem,3vw,2.8rem)}}

/* Short screens (a 13-inch laptop, say): the opening section still has to fit
   between the bars, so the spacing tightens while the title keeps its size. */
@media (min-width:1081px) and (max-height:900px){
  .hero-in{padding-block:clamp(1.1rem,2.4vh,1.9rem)}
  .kicker{margin-bottom:.7rem}
  .hero .strap{margin-top:.5rem}
  .hero .strap .strap-2{margin-top:.3rem}
  .ebar{margin-top:clamp(.8rem,1.6vh,1.2rem)}
  .hero-cta{margin-top:clamp(2.2rem,4.8vh,3rem)}
}
@media (min-width:1081px) and (max-height:740px){
  .hero-in{padding-block:clamp(.7rem,1.7vh,1.3rem)}
  .hero .strap{font-size:clamp(1.02rem,1.5vw,1.2rem)}
  .ebar{padding:.75rem 1.1rem}
  .ebar-foot{margin-top:.55rem;padding-top:.55rem}
  .ebar-item b{font-size:clamp(1.1rem,1.5vw,1.3rem)}
  .ebar-item img{width:24px;height:24px}
}

/* the countdown label sits on the same line as the figures and their units */
.u-c em{transform:translateY(4px)}
@media(max-width:1240px){.u-c em{transform:none}}

/* ---------- venue: the conference area, text beside the two room photos ---------- */
.v-conf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2.4vw,1.6rem);
  align-items:stretch;margin-top:clamp(2.2rem,4.5vw,3.2rem)}
.v-conf-t{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.3rem,2.6vw,1.8rem);background:var(--ice-2);
  border:1px solid var(--line);border-radius:10px}
.v-conf-t .eyebrow{margin:0}
.v-conf-t h3{margin:0;color:var(--navy);font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em}
.v-conf-t p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}
.v-conf figure{margin:0;position:relative;border-radius:10px;overflow:hidden;min-height:220px;background:var(--ice)}
.v-conf figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.v-conf figure:hover img{transform:scale(1.04)}
.v-conf figcaption{position:absolute;left:.8rem;bottom:.8rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(30,23,53,.62);padding:.3rem .65rem;border-radius:4px}
@media(max-width:900px){.v-conf{grid-template-columns:1fr 1fr}.v-conf-t{grid-column:1/-1}}

/* the utility link sits over the Register button, not past it */
.u-r{padding-right:clamp(.5rem,1.1vw,1.25rem)}

/* ---------- the chairs' letter: signatories alongside the text ---------- */
.letterhead{max-width:1060px;display:grid;grid-template-columns:minmax(0,248px) minmax(0,1fr);
  gap:clamp(1.5rem,3.2vw,3rem);align-items:start}
.letterhead .lh-mark{grid-column:1/-1}
.lh-chairs{position:sticky;top:110px;display:flex;flex-direction:column;gap:1.15rem;
  padding-right:clamp(1rem,2vw,1.6rem);border-right:1px solid var(--line)}
.lh-label{margin:0;font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-d)}
.lh-chairs .sign{display:flex;flex-direction:column;gap:1.1rem;margin:0;padding:0;border-top:0;text-align:left}
.lh-chairs .sign figure{display:flex;align-items:center;gap:.85rem;text-align:left}
.lh-chairs .sign img{width:56px;height:56px;margin:0;flex:none}
.lh-chairs .sign b{font-size:.98rem;line-height:1.25}
.lh-chairs .sign span{font-size:.84rem;margin-top:.15rem}
.lh-quote{position:relative;margin:.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:1.02rem;line-height:1.5;color:var(--navy);font-weight:500}
.lh-quote::before{content:"\201C";display:block;font-size:2.4rem;line-height:.6;color:var(--blue);margin-bottom:.3rem}
.lh-main > p:last-of-type{margin-bottom:0}
.letterhead .letter-cta{margin-top:2rem;text-align:left}
@media(max-width:900px){
  .letterhead{grid-template-columns:1fr}
  .lh-chairs{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 1.5rem;margin-bottom:.4rem}
  .lh-chairs .sign{flex-direction:row;flex-wrap:wrap;gap:1rem 1.8rem}
  .lh-quote{display:none}
}

/* contacts: one general enquiries box in place of named contacts */
.pc-box{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(30,23,53,.10)}
.pc-box .eyebrow{margin:0}
.pc-box h3{margin:0;color:var(--navy);font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.02em}
.pc-box p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}
.pc-box .btn{margin-top:.4rem}
.pc-box .pc-box-office{margin-top:.6rem!important;padding-top:.9rem;border-top:1px solid var(--line);width:100%;font-size:.92rem}
.pc-box .pc-box-office b{display:block;color:var(--navy);font-weight:700}
.pc-box .pc-box-office a{color:inherit;text-decoration:underline;text-underline-offset:3px}
#enquiry-form{scroll-margin-top:140px}

/* chairs' letter: larger photos (156px, 126px on narrow screens), each set above its name so long role titles keep room */
.lh-chairs .sign{gap:1.5rem}
.lh-chairs .sign figure{flex-direction:column;align-items:flex-start;gap:.6rem}
.lh-chairs .sign img{width:156px;height:156px}
.lh-chairs .sign b{font-size:1.02rem}
@media(max-width:900px){
  .lh-chairs .sign img{width:126px;height:126px}
}

/* =====================================================================
   Buttons: the same two on all five sites. A solid pill with a round
   badge for actions, and an underlined text link for everything else.
   Only the colours below change from site to site.
   ===================================================================== */
:root{--pill:#6B5BB5;--pill-h:#544393;--pill-sh:107,91,181;--tl:#6B5BB5;--tl-h:#544393;--tl-u:rgba(107,91,181,.32)}
.pill{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:1rem;
  height:52px;padding:0 7px 0 28px;border:0;border-radius:999px;background:var(--pill);color:#fff;
  text-decoration:none;cursor:pointer;font-family:var(--f);font-size:15px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 10px 24px rgba(var(--pill-sh),.28);
  transition:transform .35s var(--e),box-shadow .35s var(--e),background .25s var(--e)}
.pill-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.2);transition:background .25s var(--e)}
.pill-i svg{display:block;width:11px;height:13px;margin-left:2px;fill:#fff;
  animation:tri 2.6s var(--e) 1.2s infinite;transition:transform .35s var(--e)}
/* movement: the triangle pulses gently at rest; on hover the pill lifts, a soft
   sheen crosses it and the triangle nudges forward. The reduced-motion block
   near the top of this file switches the movement off. */
@keyframes tri{0%,62%,100%{transform:none;opacity:1}76%{transform:translateX(2px) scale(1.18);opacity:.85}}
.pill::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--e)}
.pill:hover{background:var(--pill-h);transform:translateY(-2px);box-shadow:0 14px 30px rgba(var(--pill-sh),.36)}
.pill:hover::after{transform:translateX(120%)}
.pill:hover .pill-i{background:rgba(255,255,255,.3)}
.pill:hover .pill-i svg{animation:none;transform:translateX(2px)}
.pill:active{transform:none;box-shadow:0 6px 14px rgba(var(--pill-sh),.28)}
.pill:focus-visible{outline:2px solid var(--pill);outline-offset:3px}
/* not open yet (the Register card, on a dark panel): quiet, but still readable */
.pill.is-disabled,.pill.is-disabled:hover{cursor:default;transform:none;background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pill.is-disabled .pill-i{background:rgba(255,255,255,.12)}
.pill.is-disabled .pill-i svg{animation:none;transform:none;opacity:.7}
.pill.is-disabled::after{display:none}
/* the sticky-bar Register, and the nav one a step up from that */
.pill-sm{height:44px;padding:0 5px 0 20px;gap:.75rem;font-size:13px}
.pill-sm .pill-i{width:34px;height:34px}
.pill-sm .pill-i svg{width:9px;height:11px;margin-left:1px}
@media(min-width:761px){
  .navreg.pill-sm{height:48px;padding:0 6px 0 24px;font-size:14px}
  .navreg.pill-sm .pill-i{width:36px;height:36px}
  .navreg.pill-sm .pill-i svg{width:10px;height:12px}
}

.tlink{display:inline-flex;align-items:center;padding:.3rem 0 .55rem;color:var(--tl);text-decoration:none;
  font-family:var(--f);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
  background:linear-gradient(var(--tl-h),var(--tl-h)) left bottom/0 3px no-repeat,
    linear-gradient(var(--tl-u),var(--tl-u)) left bottom/100% 3px no-repeat;
  transition:color .25s var(--e),background-size .45s var(--e)}
/* on hover the underline fills from the left in the full colour */
.tlink:hover{color:var(--tl-h);background-size:100% 3px,100% 3px}
.tlink:focus-visible{outline:2px solid var(--tl);outline-offset:4px;border-radius:2px}
/* over photos and dark panels */
.bleed .tlink,.reg-book .tlink{--tl:#fff;--tl-h:#fff;--tl-u:rgba(255,255,255,.45)}

/* where the two sit */
.hero-cta{gap:1rem 2rem;align-items:center}
.bleed .go{align-items:center;gap:1rem 2rem}
.btn-row{align-items:center;gap:1rem 2rem}
.stick .pill{margin-left:auto;flex:none}
.reg-card .pill,.reg-card .tlink{margin-top:auto}
.ind-spon .pill{margin-top:.3rem}
.pc-box .pill{margin-top:.4rem}
.tlink.pctl-dl{flex:none;padding:.3rem 0 .55rem;font-size:15px}
@media(max-width:700px){.tlink.pctl-dl{width:auto}}
@media(max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .pill > span:first-child{flex:1;text-align:center}
  .hero-cta .tlink{align-self:center}
}

/* ---------- more room above the hero buttons, and more life in them ---------- */
/* every pill: on hover the badge turns solid white and the triangle takes the
   pill colour; pressing squeezes it slightly */
.pill-i{transition:background .3s var(--e),transform .35s var(--e),box-shadow .35s var(--e)}
.pill-i svg path{transition:fill .3s var(--e)}
.pill:hover .pill-i{background:#fff;transform:scale(1.08)}
.pill:hover .pill-i svg{fill:var(--pill-h)}
.pill:active{transform:scale(.98)}
.pill.is-disabled:hover .pill-i{background:rgba(255,255,255,.12);transform:none}
.pill.is-disabled:hover .pill-i svg{fill:#fff}

/* Register now in the hero, the main action on the page: a sheen crosses it every
   few seconds, and a soft ring breathes out of the badge in time with the triangle.
   Hover takes over from both; the reduced-motion block switches them off. */
.hero-cta .pill{height:56px;padding:0 8px 0 32px;font-size:16px;gap:1.15rem;
  box-shadow:0 12px 28px rgba(var(--pill-sh),.32)}
.hero-cta .pill .pill-i{width:40px;height:40px;animation:ring 2.6s var(--e) 1.2s infinite}
.hero-cta .pill .pill-i svg{width:12px;height:14px}
.hero-cta .pill::after{animation:sweep-pill 5.5s ease-in-out 2s infinite}
@keyframes sweep-pill{0%,70%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
@keyframes ring{0%,55%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}90%,100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.hero-cta .pill:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(var(--pill-sh),.42)}
.hero-cta .pill:hover .pill-i{animation:none}
.hero-cta .pill:hover::after{animation:none;transform:translateX(120%)}
.hero-cta .pill:active{transform:translateY(-1px) scale(.98)}

/* the text link beside it: lifts a touch as its underline fills */
.tlink{transition:color .25s var(--e),background-size .45s var(--e),transform .35s var(--e)}
.tlink:hover{transform:translateY(-1px)}

/* hero buttons arrive after the box: a short rise, the link a beat later */
.hero-cta{animation:none}
.hero-cta > *{animation:heroUp .6s var(--e) backwards}  /* backwards, so the hover lift is not held at rest */
.hero-cta > .pill{animation-delay:.3s}
.hero-cta > .tlink{animation-delay:.42s}

/* the title column matches the other sites (50%), so the hero pair fits under the
   date box with the link on its right edge */
@media(min-width:1081px){.hero-txt{max-width:min(680px,50%)}}

/* ---------- the play circle, the PDF link and the hero alignment ---------- */
:root{--pill-c:#9C8ED4;--pill-c-rgb:156,142,212}
/* the circle takes a light tint of the site colour, so it stands out against the
   darker pill; the triangle sits in the pill's deep tone */
.pill-i{background:var(--pill-c)}
.pill-i svg{fill:var(--pill-h)}
.pill:hover .pill-i{background:#fff}
/* the pill no longer clips, so the pulse ring can travel past its edge; the sheen
   moves its gradient instead of itself and stays inside the rounded shape */
.pill{overflow:visible}
.pill::after{border-radius:inherit;transform:none;transition:background-position .7s var(--e);
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.24) 50%,transparent 60%) 130% 0/250% 100% no-repeat}
.pill:hover::after{transform:none;background-position:-30% 0}
/* every Register pill: the circle breathes and sends out a soft ring, with the
   triangle nudging forward on each beat; hover holds it still and turns it white */
@keyframes badge-pulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--pill-c-rgb),.6)}
  35%{transform:scale(1.1)}
  70%{transform:scale(1);box-shadow:0 0 0 11px rgba(var(--pill-c-rgb),0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--pill-c-rgb),0)}}
.pill[data-go="registration"] .pill-i,.hero-cta .pill .pill-i{animation:badge-pulse 2.2s var(--e) 1s infinite}
.pill[data-go="registration"] .pill-i svg{animation:tri 2.2s var(--e) 1s infinite}
.pill[data-go="registration"]:hover .pill-i,.hero-cta .pill:hover .pill-i{animation:none;transform:scale(1.08)}
.pill[data-go="registration"]:hover .pill-i svg{animation:none}
/* the hero sheen now crosses by moving its gradient */
@keyframes sweep-pill{0%,70%{background-position:130% 0}90%,100%{background-position:-30% 0}}
.hero-cta .pill:hover::after{animation:none;background-position:-30% 0}
.pill.is-disabled .pill-i{background:rgba(255,255,255,.12)}
.pill.is-disabled .pill-i svg{fill:#fff}

/* Download the programme: a down arrow leads the label and dips on hover */
.tlink-dl{gap:.6rem}
.tlink-dl .dl-ic{width:14px;height:17px;flex:none;display:block}
.tlink-dl .dl-ic path:first-child{transition:transform .35s var(--e)}
.tlink-dl:hover .dl-ic path:first-child{transform:translateY(2px)}

/* hero: Register on the left edge of the date box, the link on its right edge */
.hero-cta{justify-content:space-between;width:100%}
.hero-cta .tlink{margin-left:auto}
@media(max-width:1080px){.hero-cta{max-width:560px}}
@media(max-width:560px){.hero-cta .tlink{align-self:flex-end}}

/* ---------- hero link: one line with Register, a lighter shade ---------- */
/* the hero link and every Download link take a lighter tone of the site colour
   (still 4.5:1 on the page ground); hover goes back to the deep tone */
.hero-cta .tlink,.tlink-dl{--tl:#6B5BB5}
/* Register and its link stay on one line, centred on each other, from tablet width
   up: both scale down a little on narrower screens instead of wrapping */
@media(min-width:561px){
  .hero-cta{flex-wrap:nowrap;align-items:center}
  .hero-cta .pill{flex:none;font-size:clamp(13px,1.15vw,16px);padding-left:clamp(22px,2.2vw,32px);gap:clamp(.7rem,1vw,1.15rem)}
  .hero-cta .tlink{flex:none;margin-left:auto;font-size:clamp(12px,1.05vw,15px)}
}
@media(min-width:1081px) and (max-width:1299px){
  .hero-cta .pill{letter-spacing:.1em}
  .hero-cta .tlink{letter-spacing:.09em}
}
@media(min-width:561px) and (max-width:1080px){
  .hero-cta .pill{font-size:15px;padding-left:28px}
  .hero-cta .tlink{font-size:14px;letter-spacing:.1em}
}

/* ---------- Register: shading inside, the pulse around the whole pill ---------- */
:root{--pill-l:#7E6FC6}
/* depth: a light-to-deep gradient, a thin gloss along the top edge and a soft
   shade along the bottom; the circle stays light with the darker triangle */
.pill{background:linear-gradient(135deg,var(--pill-l) 0%,var(--pill) 52%,var(--pill-h) 100%);
  box-shadow:0 10px 24px rgba(var(--pill-sh),.28),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 8px rgba(0,0,0,.14)}
.pill:hover{background:linear-gradient(135deg,var(--pill) 0%,var(--pill-h) 100%);
  box-shadow:0 14px 30px rgba(var(--pill-sh),.36),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.16)}
.pill:active{box-shadow:0 6px 14px rgba(var(--pill-sh),.28),inset 0 2px 6px rgba(0,0,0,.18)}
.hero-cta .pill{box-shadow:0 12px 28px rgba(var(--pill-sh),.32),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 9px rgba(0,0,0,.15)}
.hero-cta .pill:hover{box-shadow:0 18px 38px rgba(var(--pill-sh),.42),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 9px rgba(0,0,0,.16)}
/* the circle keeps its beat (a gentle swell, the triangle nudging forward) but no
   longer sends out a ring of its own */
@keyframes badge-pulse{0%,70%,100%{transform:scale(1)}35%{transform:scale(1.1)}}
/* the ring now travels out from the edge of the whole Register pill, on the same beat */
.pill::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none}
.pill[data-go="registration"]::before{--ring:var(--pill-sh);animation:pill-ring 2.2s var(--e) 1s infinite}
.bleed .pill[data-go="registration"]::before,.stick:not(.onlight) .pill[data-go="registration"]::before{--ring:var(--pill-c-rgb)}
@keyframes pill-ring{
  0%{box-shadow:0 0 0 0 rgba(var(--ring),.5)}
  70%{box-shadow:0 0 0 14px rgba(var(--ring),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--ring),0)}}
.pill[data-go="registration"]:hover::before{animation:none}
@media(min-width:1081px) and (max-width:1199px){.hero-cta .tlink{letter-spacing:.06em;gap:.45rem}}

/* ---------- Register: one even shading, the same on every site ---------- */
/* a soft light from the top and a little shade at the bottom, laid over the
   diagonal light-to-deep gradient, so the pill reads as rounded, not flat */
.pill{background:
  linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.12) 100%),
  linear-gradient(135deg,var(--pill-l) 0%,var(--pill) 55%,var(--pill-h) 100%)}
.pill:hover{background:
  linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.14) 100%),
  linear-gradient(135deg,var(--pill) 0%,var(--pill-h) 100%)}
/* the automatic sheen could be caught halfway, leaving a pale band across the
   pill; it now crosses only on hover. The pulse ring and the circle's beat stay. */
.hero-cta .pill::after{animation:none}

/* ---------- Register: a visible edge, stronger shading, pulse on the hero only ---------- */
:root{--pill-edge:#544393}
/* a firm border in the deepest tone, a bright hairline just inside the top, and a
   clearer light-to-deep gradient, so the pill reads as a raised button */
.pill{border:1.5px solid var(--pill-edge);
  background:
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 42%,rgba(0,0,0,0) 58%,rgba(0,0,0,.24) 100%),
    linear-gradient(135deg,var(--pill-l) 0%,var(--pill) 48%,var(--pill-edge) 100%);
  box-shadow:0 10px 24px rgba(var(--pill-sh),.32),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.14)}
.pill:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 42%,rgba(0,0,0,0) 58%,rgba(0,0,0,.26) 100%),
    linear-gradient(135deg,var(--pill) 0%,var(--pill-h) 55%,var(--pill-edge) 100%);
  box-shadow:0 14px 30px rgba(var(--pill-sh),.4),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.16)}
.pill:active{box-shadow:0 6px 14px rgba(var(--pill-sh),.3),inset 0 2px 6px rgba(0,0,0,.22)}
.hero-cta .pill{box-shadow:0 12px 28px rgba(var(--pill-sh),.36),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.15)}
.hero-cta .pill:hover{box-shadow:0 18px 38px rgba(var(--pill-sh),.46),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.16)}
.pill.is-disabled,.pill.is-disabled:hover{border-color:rgba(255,255,255,.22)}

/* the pulse (ring, circle beat, triangle nudge) belongs to the homepage Register
   only; the nav, sticky-bar and banner Register keep just the hover shine */
.pill[data-go="registration"]::before{animation:none}
.pill[data-go="registration"] .pill-i,.pill[data-go="registration"] .pill-i svg{animation:none}
.hero-cta .pill::before{--ring:var(--pill-sh);animation:pill-ring 2.2s var(--e) 1s infinite}
.hero-cta .pill .pill-i{animation:badge-pulse 2.2s var(--e) 1s infinite}
.hero-cta .pill .pill-i svg{animation:tri 2.2s var(--e) 1s infinite}
.hero-cta .pill:hover::before,.hero-cta .pill:hover .pill-i,.hero-cta .pill:hover .pill-i svg{animation:none}

/* =====================================================================
   Buttons, final design (register-cta-4a), the same on all five sites.
   Register: a pale fill, a 2px border and a soft halo in the site colour,
   dark label, and a solid disc with a white triangle. Programme link: dark
   caps with a solid underline and a download glyph. Only the colours below
   change from site to site; this block overrides the earlier button styles.
   ===================================================================== */
:root{--cta-fill:#E5E0F4;--cta-fill-h:#DAD3EF;--cta-border:#6B5BB5;--cta-rgb:107,91,181;--cta-ink:#2B2148;--cta-ink-h:#1E1735}

.pill,.hero-cta .pill{height:auto;display:inline-flex;align-items:center;gap:18px;padding:7px 9px 7px 25px;
  background:var(--cta-fill);border:2px solid var(--cta-border);color:var(--cta-ink);
  box-shadow:0 0 0 4px rgba(var(--cta-rgb),.12);
  font-size:15px;font-weight:700;letter-spacing:.1em;transform:none;
  transition:background .18s,box-shadow .18s}
.pill:hover,.pill:focus-visible,.hero-cta .pill:hover,.hero-cta .pill:focus-visible{background:var(--cta-fill-h);
  box-shadow:0 0 0 7px rgba(var(--cta-rgb),.16);outline:none;transform:none}
.pill:active,.hero-cta .pill:active{transform:none;box-shadow:0 0 0 5px rgba(var(--cta-rgb),.18)}
.pill::after{display:none}
.pill-i,.hero-cta .pill .pill-i,.pill:hover .pill-i,.pill[data-go="registration"]:hover .pill-i,.hero-cta .pill:hover .pill-i{
  width:34px;height:34px;background:var(--cta-border);box-shadow:none;transform:none}
.pill-i svg,.pill:hover .pill-i svg,.hero-cta .pill .pill-i svg{width:10px;height:12px;margin-left:2px;fill:#fff;transform:none}

/* the homepage Register keeps its gentle pulse: the halo breathes out on a slow
   beat and stops on hover. The nav, sticky-bar and banner Register don't pulse. */
.hero-cta .pill .pill-i,.hero-cta .pill .pill-i svg{animation:none}
.hero-cta .pill::before{--ring:var(--cta-rgb);animation:pill-ring 2.4s var(--e) 1s infinite}
.hero-cta .pill:hover::before,.hero-cta .pill:focus-visible::before{animation:none}

/* the smaller Register in the sticky bar, and the nav one a step up */
.pill-sm{padding:5px 6px 5px 18px;gap:12px;font-size:13px}
.pill-sm .pill-i{width:30px;height:30px}
.pill-sm .pill-i svg{width:9px;height:11px;margin-left:1px}
@media(min-width:761px){
  .navreg.pill-sm{height:auto;padding:6px 7px 6px 22px;gap:14px;font-size:14px}
  .navreg.pill-sm .pill-i{width:32px;height:32px}
  .navreg.pill-sm .pill-i svg{width:9px;height:11px}
}

/* not open yet, on the dark Register card */
.pill.is-disabled,.pill.is-disabled:hover{cursor:default;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);
  color:rgba(255,255,255,.88);box-shadow:none}
.pill.is-disabled .pill-i{background:rgba(255,255,255,.2)}
.pill.is-disabled::before{animation:none}

/* the text link */
.tlink,.hero-cta .tlink,.tlink-dl,.tlink.pctl-dl{--tl:var(--cta-ink);color:var(--cta-ink);gap:10px;padding:0 0 6px;
  font-size:14px;font-weight:700;letter-spacing:.16em;background:none;border-bottom:3px solid currentColor;
  transform:none;transition:color .18s,border-color .18s}
.tlink:hover,.tlink:focus-visible,.hero-cta .tlink:hover{color:var(--cta-ink-h);transform:none}
.tlink:focus-visible{outline:2px solid var(--cta-border);outline-offset:4px}
.tlink .dl-ic,.tlink-dl .dl-ic{width:14px;height:16px}
.tlink-dl:hover .dl-ic path:first-child{transform:none}
.bleed .tlink,.reg-book .tlink{color:#fff}
.bleed .tlink:hover,.reg-book .tlink:hover{color:#fff;opacity:.85}

/* hero: the pair stays on one line under the date box, Register on its left
   edge and the link on its right; both scale down a little on narrower screens */
@media(min-width:561px){
  .hero-cta .pill{font-size:clamp(13px,1.05vw,15px);padding-left:clamp(18px,1.75vw,25px);gap:clamp(12px,1.25vw,18px)}
  .hero-cta .tlink{font-size:clamp(12px,.97vw,14px);letter-spacing:.16em}
}
@media(min-width:561px) and (max-width:1080px){
  .hero-cta .pill{font-size:15px;padding-left:25px;gap:18px}
  .hero-cta .tlink{font-size:13px;letter-spacing:.12em}
}
@media(min-width:1081px) and (max-width:1199px){.hero-cta .tlink{letter-spacing:.07em;gap:7px}}
@media(min-width:1200px) and (max-width:1299px){.hero-cta .tlink{letter-spacing:.12em}}
@media(max-width:560px){.hero-cta .pill > span:first-child{flex:1;text-align:center}}

/* the sticky-bar Register matches the nav Register at the top right */
@media(min-width:761px){
  .stick .pill-sm{height:auto;padding:6px 7px 6px 22px;gap:14px;font-size:14px}
  .stick .pill-sm .pill-i{width:32px;height:32px}
  .stick .pill-sm .pill-i svg{width:9px;height:11px}
}

/* photo spots 50% larger: faculty circles (62px to 93px) and the Corporate
   Relations Manager's photo on the Industry page (56px to 84px) */
.fac .av{width:93px;height:93px;font-size:1.65rem;margin-bottom:1rem}
.ind-av,img.ind-av{width:84px;height:84px}
.ind-person{gap:1.25rem}

/* Industry: the Corporate Relations Manager card, a step larger all round */
.ind-person{gap:1.6rem;padding:1.5rem 1.75rem;border-radius:16px;margin:.8rem 0 1rem}
.ind-av,img.ind-av{width:112px;height:112px}
img.ind-av{box-shadow:0 0 0 4px #fff,0 6px 16px rgba(0,0,0,.16)}
.ind-who{gap:.3rem}
.ind-who b{font-size:1.5rem;letter-spacing:-.015em}
.ind-who span{font-size:1.1rem}
.ind-who a{font-size:1.18rem;text-underline-offset:4px}
@media(max-width:560px){
  .ind-person{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.25rem}
  .ind-av,img.ind-av{width:96px;height:96px}
  .ind-who b{font-size:1.3rem}
}

/* footer text about 15% larger than the original (links, headings, brand, address,
   base line), with the spacing and the logo scaled to match */
footer{font-size:1.04rem}
footer h4{font-size:.97rem;margin-bottom:1.25rem}
footer li{margin-bottom:.68rem}
.f-grid{gap:2.4rem 2.8rem}
.f-brand{gap:.9rem;margin-bottom:1.25rem}
.f-brand img{width:54px}
.f-brand b{font-size:1.1rem}
.f-brand span{font-size:.86rem;letter-spacing:.17em;margin-top:.25rem}
.f-base{font-size:.9rem;margin-top:2.8rem}
@media(min-width:901px) and (max-width:1200px){.f-grid{grid-template-columns:1.5fr 1.1fr 1fr 1.2fr;gap:2rem}}

/* =====================================================================
   London (Moonlight Violet moodboard, palette 5A)
   ===================================================================== */
/* key visual: keep the ankle and the Elizabeth Tower in view as the panel narrows */
.hero .art{object-position:58% 50%}
@media(max-width:1080px){.hero .art{object-position:60% 40%}}
/* utility strip: month and city stand in if MEETING_START is ever unset */
.u-when em{display:inline!important;color:var(--ac-l);transform:none!important}
@media(max-width:520px){.u-c.u-when{display:none}}

/* hero title from the banner: a bold lead phrase with a light connector, then the
   subject in deep moonlight */
.hero h1 .lt{font-weight:400}
.hero .sub{font-size:clamp(1.15rem,1.75vw,1.6rem);font-weight:400;line-height:1.2;letter-spacing:-.02em;
  color:var(--blue-d);margin:.75rem 0 0;animation:heroUp .55s .1s var(--e) both}
@media(min-width:1081px){
  .hero h1{font-size:clamp(2rem,3.2vw,3.1rem)}
  .hero-txt{max-width:min(680px,50%)}
}

/* page headers */
.ph-programme .bg{object-position:50% 40%}
.ph-venue .bg{object-position:70% 55%}
.bleed .bg{object-position:50% 60%}
/* the ankle render sits on the moonlit ground, so it goes on the Industry header,
   whose scrim clears to the right */
.ph-industry .bg{object-position:80% 50%}
.ph-industry .scrim{background:linear-gradient(100deg,rgba(30,23,53,.94) 0%,rgba(30,23,53,.8) 38%,rgba(30,23,53,0) 70%)}
@media(max-width:760px){.ph-industry .scrim{background:linear-gradient(100deg,rgba(30,23,53,.94) 0%,rgba(30,23,53,.72) 100%)}}

/* Venue banner: the Westminster photo is the Programme header, so Venue takes the
   skyline sinking into the ink gradient at its base, the way the moodboard sets
   location photography */
.ph-venue{background:
  radial-gradient(60% 110% at 78% 100%,rgba(107,91,181,.42) 0%,rgba(107,91,181,0) 72%),
  linear-gradient(150deg,#2B2148 0%,#1E1735 60%,#332654 100%)}
.ban-sky{position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;height:auto;max-width:none;
  opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 42%,transparent 96%);
          mask-image:linear-gradient(to top,#000 42%,transparent 96%)}
.ph-venue .scrim{background:linear-gradient(100deg,rgba(30,23,53,.9) 0%,rgba(30,23,53,.55) 45%,rgba(30,23,53,.1) 100%)}

/* Registration banner: Westminster Bridge and the river, mapped into the palette as
   a violet duotone (banner-registration.jpg). It is a tighter, lower crop than the
   Programme header takes of the same photograph, and the colour treatment sets it
   apart again. The ink gradient stays underneath while the picture loads. */
.ph-registration{background:
  radial-gradient(52% 115% at 82% 62%,rgba(107,91,181,.5) 0%,rgba(107,91,181,0) 70%),
  linear-gradient(120deg,#1E1735 0%,#2B2148 58%,#3A2C61 100%)}
.ph-registration .bg{object-position:50% 62%}
.ph-registration .scrim{background:
  linear-gradient(100deg,rgba(30,23,53,.94) 0%,rgba(30,23,53,.72) 42%,rgba(35,26,77,.3) 100%),
  radial-gradient(60% 120% at 85% 70%,rgba(107,91,181,.35) 0%,rgba(107,91,181,0) 70%)}
@media(max-width:760px){.ban-sky{opacity:.34}}

/* placeholder panel for anything ESSKA has not supplied yet: a moonlight rule on the
   opposite ground, never a silver fill */
.tba{max-width:820px;padding:clamp(1.4rem,3vw,2.1rem);border-left:3px solid var(--ac-br);
  border-radius:0 8px 8px 0;background:var(--ice-2)}
.tint .tba,.sec-letter .tba{background:var(--paper)}
.tba .eyebrow{margin:0 0 .5rem;font-size:.8rem}
.tba h3{margin:0 0 .6rem;font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.02em;color:var(--navy)}
.tba p:not(.eyebrow){margin:0;color:var(--ink);line-height:1.65}
.tba-inline{margin:1.4rem 0 0}
.fee-head + .tba{margin-bottom:0}

/* chairs not yet named: a circle in place of the photo, at the photo size */
.sign figure .sign-av{display:grid;place-items:center;width:84px;height:84px;margin:0 auto .9rem;border-radius:50%;
  background:var(--ice);color:var(--navy);font-size:1.25rem;font-weight:800;letter-spacing:.04em;line-height:1}
.lh-chairs .sign .sign-av{width:156px;height:156px;margin:0;flex:none;font-size:1.6rem}
@media(max-width:900px){.lh-chairs .sign .sign-av{width:126px;height:126px}}

/* topic cards: moonlit and navy blocks with the topic name until the programme
   supplies artwork */
.tile.t1,.tile.t3{background:linear-gradient(158deg,#F2EFFB 0%,#EEEAF8 60%,#DDD7EF 100%)}
.tile.t2{background:linear-gradient(158deg,#443566 0%,#2B2148 55%,#1E1735 100%)}
.tile.t1 .word,.tile.t3 .word{color:var(--navy);text-shadow:none}
.tile.t1::after,.tile.t3::after{background:linear-gradient(180deg,rgba(107,91,181,0) 55%,rgba(107,91,181,.1) 100%)}
.tile.t2::after{background:linear-gradient(180deg,rgba(30,23,53,0) 55%,rgba(107,91,181,.28) 100%)}
@media (hover:none){
  .tile{--pic:clamp(9rem,34vw,12rem)}
  .tile::before{content:"";display:block;height:var(--pic)}
  .tile .word{top:calc(var(--pic) - 3.2rem)}
}

/* the skyline is supplied in moonlight blue with lamplit windows: the city supplies
   the colour, so no filter */
.ph .sky{opacity:.34}
footer::before{opacity:.1}

/* contacts: a paper banner above the moonlit enquiry section */
.pc{background:var(--paper)}


/* ---------- Download links: underline under the words only ----------
   The rule used to run under the arrow as well. It now sits on the label, and the
   arrow is set so its tip lands exactly on that line. The glyph is one chubby,
   round-capped arrow (no tray) that dips gently on a slow beat, and again on hover.
   The reduced-motion block near the top of this file switches the movement off. */
.tlink-dl,.tlink.tlink-dl,.hero-cta .tlink.tlink-dl,.tlink.pctl-dl.tlink-dl{
  align-items:flex-end;gap:10px;border-bottom:0;padding-bottom:0}
.tlink-dl > span{display:block;padding-bottom:6px;border-bottom:3px solid currentColor}
.tlink .dl-ic,.tlink-dl .dl-ic{width:19px;height:19px;flex:none;display:block;
  /* 3px clears the underline stroke, so the arrow stops on top of the line */
  margin-bottom:1px;overflow:visible;
  transition:transform .28s var(--e);animation:dl-dip 4.2s var(--e) 1.6s infinite}
@keyframes dl-dip{0%,74%,100%{transform:translateY(0)}86%{transform:translateY(2.5px)}}
.tlink-dl:hover .dl-ic,.tlink-dl:focus-visible .dl-ic{animation:none;transform:translateY(2.5px)}
.tlink-dl .dl-ic path{transition:none;transform:none}

/* ---------- the chairs' photos: a shaded ring in the site colour ----------
   The ring is the element's border, filled with a moonlight violet gradient (light at the top
   left, deepest at the foot); the first background layer keeps the inside of the
   circle clear, so the photo is clipped to it as before. */
:root{--ring-1:#9C8ED4;--ring-2:#6B5BB5;--ring-3:#544393}
.sign img,.sign figure .sign-av{
  border:3px solid transparent;border-radius:50%;
  background-image:linear-gradient(var(--paper),var(--paper)),
    linear-gradient(145deg,var(--ring-1) 0%,var(--ring-2) 52%,var(--ring-3) 100%);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 6px 18px rgba(0,0,0,.16)}
.sign figure .sign-av{background-image:linear-gradient(var(--ice),var(--ice)),
    linear-gradient(145deg,var(--ring-1) 0%,var(--ring-2) 52%,var(--ring-3) 100%)}
/* the letter's larger circles carry a proportionally thicker ring */
.lh-chairs .sign img,.lh-chairs .sign .sign-av{border-width:5px}
@media(max-width:900px){.lh-chairs .sign img,.lh-chairs .sign .sign-av{border-width:4px}}