:root{
  /* Ink & Tile (Direction 3E): near-black ink shell, Iznik tile fields and warm
     paper grounds, deep turquoise for type on light, gold for hairlines and
     eyebrows on ink only */
  --navy:#0E1E22; --navy-d:#060F11; --navy-l:#1D3338;
  --blue:#17BFD4; --blue-d:#0A6E80; --ice:#C6EAF2; --ice-2:#C6EAF2;
  --paper:#FBFAF6; --ink:#1F2B30; --muted:#444E55;
  --line:rgba(14,30,34,.10);
  /* action tier: the turquoise CTA gradient, #0E8FA0 to #0A6E80 */
  --ac:#0A6E80; --ac-d:#075766; --ac-br:#0E8FA0; --ac-l:#E3C078;
  --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:#E3C078;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(14,30,34,.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(14,30,34,.3) 22%,rgba(14,30,34,.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-d);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,#FBFAF6 0%,#E3F4F7 40%,#C6EAF2 72%,#B5E2EC 100%)}

/* key-visual-istanbul.jpg is the right-hand panel of the supplied banner (anatomy render
   and the Bosphorus at dusk). The wrapper's width is the hero's height clamp
   times the artwork's aspect, so the panel always matches the image. */
.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,#E3F4F7 0%,#E3F4F7 34%,
    rgba(251,250,246,.55) 46%,rgba(251,250,246,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-d)}
.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:var(--paper);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(6,15,17,.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(6,15,17,.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:#EBD6A6}
.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}
  .hero-cta .btn{width:100%}
}

/* ---------- 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%)}
/* action tier - every Register button, in the nav, the hero and the sticky bar */
.btn-b{background:linear-gradient(135deg,var(--ac-br) 0%,var(--ac) 48%,var(--ac-d) 100%);color:#fff;
  box-shadow:0 8px 22px rgba(10,110,128,.36),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-b:hover{transform:translateY(-3px);
  background:linear-gradient(135deg,#17A9BC 0%,var(--ac-br) 48%,var(--ac) 100%);
  box-shadow:0 14px 32px rgba(10,110,128,.46),inset 0 1px 0 rgba(255,255,255,.4)}

/* secondary solid - actions that are not registration */
.btn-navy,.btn-p{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(14,30,34,.28)}
.btn-navy:hover,.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(14,30,34,.4)}

/* secondary outline - deliberately quiet, so the action tier stays the loudest */
.btn-o{background:var(--paper);color:var(--navy);
  box-shadow:0 0 0 2px rgba(14,30,34,.38) inset,
    0 1px 2px rgba(6,15,17,.06),
    0 5px 12px rgba(23,191,212,.18),
    0 12px 28px rgba(10,110,128,.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(6,15,17,.08),
    0 8px 18px rgba(23,191,212,.26),
    0 20px 42px rgba(10,110,128,.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)}

.btn-w{background:var(--paper);color:var(--navy);
  box-shadow:0 1px 3px rgba(6,15,17,.14),
    0 6px 16px rgba(10,110,128,.24),
    0 16px 34px rgba(6,15,17,.26)}
.btn-w:hover{transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(6,15,17,.18),
    0 10px 24px rgba(10,110,128,.34),
    0 24px 48px rgba(6,15,17,.32)}
.navreg{padding:.82rem 1.3rem .82rem 1.6rem;font-size:.76rem}

/* the hero's Register carries the most weight on the page: larger, an arrow in
   a badge, and a slow attention ring */
.hero-cta .btn-b{font-size:.86rem;padding:1.1rem 1.3rem 1.1rem 2.15rem;
  animation:cta 3.4s var(--e) 1s infinite}
.hero-cta .btn-b .a{display:inline-flex;align-items:center;justify-content:center;
  width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.26);
  font-size:1rem;line-height:1;margin-left:.35rem;
  transition:transform .35s var(--e),background .35s var(--e)}
.hero-cta .btn-b:hover .a{transform:translateX(4px);background:rgba(255,255,255,.45)}
@keyframes cta{
  0%,100%{box-shadow:0 8px 22px rgba(10,110,128,.36),0 0 0 0 rgba(10,110,128,.42)}
  55%{box-shadow:0 13px 30px rgba(10,110,128,.46),0 0 0 13px rgba(10,110,128,0)}}

/* the two Register buttons that stay with you (nav and sticky bar): an arrow
   badge and a sheen that crosses every few seconds. Hover stops the sheen so
   the hover lift and sweep take over; the reduced-motion block turns it off. */
.navreg::before,.stick .btn-b::before{animation:regsheen 5.2s ease-in-out 1.6s infinite}
.navreg:hover::before,.stick .btn-b:hover::before{animation:none}
.navreg .a,.stick .btn-b .a{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.24);
  font-size:.9rem;line-height:1;letter-spacing:0;margin-right:-.7rem;
  transition:transform .35s var(--e),background .35s var(--e)}
.navreg:hover .a,.stick .btn-b:hover .a{background:rgba(255,255,255,.44)}
@keyframes regsheen{0%{transform:translateX(-120%)}24%,100%{transform:translateX(120%)}}

/* ---------- 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:#E3C078;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,#C6EAF2)}
.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:var(--paper);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(14,30,34,.14)}
.topic .im{position:relative;overflow:hidden;background:#E3F4F7}
.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-d);margin-top:1.4rem}

/* ---------- subject section ---------- */
.subject{background:linear-gradient(160deg,#FBFAF6,#E3F4F7)}
.implant{position:relative;border-radius:8px;overflow:hidden;background:var(--paper);
  box-shadow:0 24px 60px rgba(14,30,34,.12),0 0 0 1px rgba(14,30,34,.07)}
.implant img{width:100%;aspect-ratio:11/9;object-fit:contain;background:var(--paper);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:#C6EAF2}
/* 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(227,192,120,0) 52%,rgba(23,191,212,.42) 72%,
  rgba(14,30,34,.9) 90%,rgba(6,15,17,.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(6,15,17,0) 42%,rgba(6,15,17,.5) 72%,rgba(6,15,17,.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(6,15,17,.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(6,15,17,.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:#E3C078;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:var(--paper);
    -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-d);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(14,30,34,.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(14,30,34,.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(14,30,34,.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(7,87,102,.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(14,30,34,.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:var(--paper);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(14,30,34,.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-d)}
.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-d);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:var(--paper);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(14,30,34,.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:var(--paper);border:1.5px solid rgba(14,30,34,.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(10,110,128,.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}

/* Download the programme: one colour wherever it appears. Deep teal-blue,
   distinct from navy and from the Register cobalt, and dark enough to carry
   white button text at 4.9:1. A soft ring pulses out from it every few
   seconds; the reduced-motion block switches that off. */
.btn-dl{color:#fff;
  background:linear-gradient(135deg,#1D3338 0%,#0E1E22 55%,#060F11 100%);
  box-shadow:0 8px 20px rgba(14,30,34,.34),inset 0 1px 0 rgba(255,255,255,.28);
  animation:dlpulse 3s var(--e) 1.2s infinite}
.btn-dl:hover{transform:translateY(-2px);animation-play-state:paused;
  background:linear-gradient(135deg,#2A4148 0%,#1D3338 55%,#0E1E22 100%);
  box-shadow:0 13px 28px rgba(14,30,34,.44),inset 0 1px 0 rgba(255,255,255,.4)}
@keyframes dlpulse{
  0%,100%{box-shadow:0 8px 20px rgba(14,30,34,.34),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 rgba(14,30,34,.45)}
  60%{box-shadow:0 10px 24px rgba(14,30,34,.4),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 14px rgba(14,30,34,0)}}
.pctl-dl{flex:none;padding:.95rem 1.6rem;font-size:.78rem}

/* 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:var(--paper);cursor:pointer;
  border:1.5px solid rgba(14,30,34,.22);border-radius:100px;padding:.7rem 1.5rem;
  box-shadow:0 1px 2px rgba(6,15,17,.05),
    0 4px 10px rgba(23,191,212,.16),
    0 10px 22px rgba(10,110,128,.11);
  transition:all .25s var(--e)}
.pchip:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(6,15,17,.07),
    0 7px 16px rgba(23,191,212,.24),
    0 16px 32px rgba(10,110,128,.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:var(--paper);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 6px 18px rgba(14,30,34,.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:var(--paper);cursor:pointer;
  border:1.5px solid rgba(14,30,34,.26);border-radius:100px;padding:.65rem 1.35rem;
  box-shadow:0 1px 2px rgba(6,15,17,.05),
    0 4px 10px rgba(23,191,212,.16),
    0 10px 22px rgba(10,110,128,.11);
  transition:all .25s var(--e)}
.pcollapse:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(6,15,17,.07),
    0 7px 16px rgba(23,191,212,.24),
    0 16px 32px rgba(10,110,128,.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:var(--paper)}
.prow.is-open .pchev{transform:rotate(180deg);background:var(--ac)}
.prow.is-open .pchev::before,.prow.is-open .pchev::after{background:var(--paper)}

/* 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:var(--paper);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:var(--paper);transition:all .4s var(--e)}
.fac:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(14,30,34,.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(6,15,17,.72),rgba(6,15,17,.55) 45%,rgba(6,15,17,.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: the 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:var(--paper);color:var(--navy);box-shadow:0 8px 22px rgba(6,15,17,.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(227,192,120,.3),0 8px 22px rgba(6,15,17,.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(6,15,17,.42) 0%,rgba(6,15,17,.18) 60%,rgba(6,15,17,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:#E3C078;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(6,15,17,.55),0 2px 18px rgba(6,15,17,.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-d);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%,#1D3338 0%,#0E1E22 45%,#060F11 100%)}
.ph .scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(100deg,rgba(6,15,17,.92) 0%,rgba(6,15,17,.72) 42%,rgba(6,15,17,.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:#E3C078;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-d);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:var(--paper);color:var(--ink);border-radius:4px;transition:all .25s var(--e)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-d);box-shadow:0 0 0 3px rgba(23,191,212,.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:#E3C078;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:#E3C078;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(6,15,17,.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(14,30,34,.14);
  box-shadow:0 -10px 34px rgba(14,30,34,.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:#E3C078;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;padding:.82rem 1.3rem .82rem 1.6rem;font-size:.76rem}  /* same size as the nav Register */
@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:var(--paper);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(14,30,34,.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:var(--paper)}
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(10,110,128,.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:var(--paper);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(6,15,17,.88) 0%,rgba(6,15,17,.62) 42%,rgba(6,15,17,.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:var(--paper);border:1px solid var(--line);box-shadow:0 20px 48px rgba(6,15,17,.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(6,15,17,.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(14,30,34,.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(14,30,34,.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(14,30,34,.22);background:var(--paper)}
.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(14,30,34,.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,#FBFAF6 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(23,191,212,.14),rgba(23,191,212,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:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:.9rem 1rem .9rem 1rem;box-shadow:0 10px 26px rgba(14,30,34,.08);
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.qc:hover{transform:translateY(-3px);border-color:rgba(14,30,34,.28);box-shadow:0 16px 34px rgba(14,30,34,.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(6,15,17,.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:var(--paper);color:var(--blue-d);box-shadow:0 4px 12px rgba(14,30,34,.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-d)}
.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:#B5E2EC;color:var(--navy-l)}
.fac-grid .fac:nth-child(3n+3) .av{background:#C6EAF2;color:#0A6E80}
.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(23,191,212,.25)}

/* pale sections: a faint dot texture and a soft light in one corner */
.tint{background:
  radial-gradient(55% 60% at 100% 0%,rgba(23,191,212,.10),rgba(23,191,212,0) 70%),
  radial-gradient(circle at 1px 1px,rgba(14,30,34,.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(23,191,212,.10),rgba(23,191,212,0) 70%),
  radial-gradient(40% 36% at 92% 72%,rgba(23,191,212,.09),rgba(23,191,212,0) 70%),
  var(--ice-2)}

/* footer: a soft top light and the same Istanbul skyline as the page headers */
footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#0A1619 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-istanbul.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}
  .hero-cta .btn{padding:.9rem 1.6rem}
  .hero-cta .btn-b{padding:.9rem 1.15rem .9rem 1.8rem}
}

/* 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(6,15,17,.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-d);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}
}

/* =====================================================================
   Istanbul (Ink & Tile, Direction 3E)
   ===================================================================== */
/* key visual: the banner's shoulder render and Istanbul at dusk, both kept in
   view as the panel narrows */
.hero .art{object-position:38% 45%}
/* the shoulder icon is a filled disc, so it keeps its own colours */
/* utility strip before dates are confirmed: month and city instead of a countdown */
.u-when em{display:inline!important;color:#E3C078;transform:none!important}
@media(max-width:520px){.u-c.u-when{display:none}}
/* page headers */
.ph-programme .bg{object-position:60% 40%}
.ph-venue .bg{object-position:50% 60%}
.ph-registration .bg{object-position:45% 55%}
.ph-industry .bg{object-position:70% 35%}
.bleed .bg{object-position:60% 55%}
/* the dusk photograph is warm; set it neutral under the ink scrim so turquoise
   only appears photographically in the city shot, as the moodboard asks */
.bleed .bg,.ph-registration .bg{filter:grayscale(1) contrast(1.05)}

/* placeholder panel for anything ESSKA has not supplied yet */
.tba{max-width:820px;padding:clamp(1.4rem,3vw,2.1rem);border:1.5px dashed rgba(14,30,34,.22);
  border-radius:8px;background:var(--paper)}
.tint .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}
.tba p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}
.tba-inline{margin:1.4rem 0 0}
.fee-head + .tba{margin-bottom:0}
abbr.tbc{text-decoration:none;cursor:help}

/* chairs not yet named: an initials circle in place of the photo */
.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:56px;height:56px;margin:0;flex:none}

/* topic cards: the moodboard's tile, ink and tile blocks with the topic name,
   until the programme supplies artwork */
.tile.t1,.tile.t3{background:linear-gradient(158deg,#DDF3F8 0%,#C6EAF2 60%,#B5E2EC 100%)}
.tile.t2{background:linear-gradient(158deg,#1D3338 0%,#0E1E22 55%,#060F11 100%)}
.tile.t1 .word,.tile.t3 .word{color:var(--navy);text-shadow:none}
.tile.t1::after,.tile.t3::after{background:linear-gradient(180deg,rgba(14,30,34,0) 55%,rgba(14,30,34,.06) 100%)}
.tile.t2::after{background:linear-gradient(180deg,rgba(6,15,17,0) 55%,rgba(6,15,17,.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 Istanbul title is short, so it sets larger than Rome's: bold lead phrase,
   light remainder on its own line, as in the moodboard */
.hero h1 .lt{display:block}
@media(min-width:1081px){
  .hero h1{font-size:clamp(2rem,3.4vw,3.3rem)}
  .hero-txt{max-width:min(680px,50%)}
}
/* three items instead of Rome's two (date, section, city): they share one row on
   desktop, so the figures set a step smaller */
@media(min-width:1081px){
  .ebar-row{flex-wrap:nowrap;gap:clamp(.55rem,1vw,.9rem)}
  .ebar-item{white-space:nowrap;gap:.45rem}
  .ebar-item b{font-size:clamp(1rem,1.3vw,1.22rem)}
  .ebar-item img{width:24px;height:24px}
}

/* contacts: a paper banner above the tile enquiry section, so the two fields
   don't sit edge to edge */
.pc{background:var(--paper)}

/* 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(18,41,77,.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 (as on Rome and Athens). The initials circle stands in until photos arrive. */
.lh-chairs .sign{gap:1.5rem}
.lh-chairs .sign figure{flex-direction:column;align-items:flex-start;gap:.6rem}
.lh-chairs .sign img,.lh-chairs .sign .sign-av{width:156px;height:156px}
.lh-chairs .sign .sign-av{font-size:1.6rem}
.lh-chairs .sign b{font-size:1.02rem}
@media(max-width:900px){
  .lh-chairs .sign img,.lh-chairs .sign .sign-av{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:#0A6E80;--pill-h:#075766;--pill-sh:10,110,128;--tl:#0A6E80;--tl-h:#075766;--tl-u:rgba(10,110,128,.35)}
.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 play circle, the PDF link and the hero alignment ---------- */
:root{--pill-c:#9FE3EC;--pill-c-rgb:159,227,236}
/* 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:#147C8B}
/* 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:#0F7D90}
/* 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:#054A56}
/* 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:#D6EFF3;--cta-fill-h:#C0E5EC;--cta-border:#0A6E80;--cta-rgb:10,110,128;--cta-ink:#07434E;--cta-ink-h:#032F37}

.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}}

/* ---------- 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 turquoise 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:#17BFD4;--ring-2:#0E8FA0;--ring-3:#075766}
.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}}

/* ---------- underlined links: the site colour on hover ----------
   At rest the label and its underline are dark ink; hovering (or tabbing to it)
   turns both, and the download arrow with them, teal. On photos and dark panels
   the light tone of the same colour is used instead of plain white. */
:root{--tl-hover:#0A6E80}
.tlink:hover,.tlink:focus-visible,
.hero-cta .tlink:hover,.hero-cta .tlink:focus-visible,
.tlink-dl:hover,.tlink-dl:focus-visible,
.tlink.pctl-dl:hover,.tlink.pctl-dl:focus-visible{color:var(--tl-hover)}
.bleed .tlink:hover,.bleed .tlink:focus-visible,
.reg-book .tlink:hover,.reg-book .tlink:focus-visible{color:var(--ac-l);opacity:1}

/* ---------- the date-box icons ----------
   ESSKA supplies these as a solid disc with the calendar and the pin punched out of
   it, so the drawn lines are holes and the shape's interior belongs to the disc.
   icon-date.png and icon-place.png are those two rebuilt without the disc: just the
   shape, filled in a light tint of the site colour with its lines a step deeper, so
   it stands out against the dark date box. They carry their own colour, so the
   white-out filter the older icons needed is switched off here. */
.ebar-item img{filter:none;opacity:1}
/* ---------- the chairs' letter: a larger ESSKA mark, set in from the edge ----------
   The mark at the head of the letter grows from 58px to 88px and moves right, in line
   with the chairs' photographs below it rather than hard against the card's edge. */
.lh-mark{width:88px;margin-left:clamp(.4rem,1.6vw,1.5rem)}
@media(max-width:620px){.lh-mark{width:70px;margin-left:.2rem}}

/* ---------- header: the ESSKA mark centred over WELCOME ----------
   Where the menu drops to its own row, the mark sits centred above the first link.
   The logo file has a little blank margin, so its drawn circle is centred rather
   than its box: the circle's centre is 48.8% across the image, and WELCOME is about
   80px wide (75px on narrow screens, where the menu type is smaller). */
@media(max-width:1480px){
  .brand{margin-left:calc(40px - .488 * clamp(72px,6vw,108px))}
  .nav.stuck .brand{margin-left:calc(40px - .488 * clamp(52px,3.7vw,66px))}
}
@media(max-width:760px){
  .brand,.nav.stuck .brand{margin-left:calc(37px - .488 * clamp(72px,6vw,108px))}
}
@media(max-width:520px){
  .brand,.nav.stuck .brand{margin-left:calc(37px - .488 * 60px)}
}

/* ---------- the chairs' letter: the opening paragraph in the site colour ---------- */
.letterhead .lead{color:#0A6E80}

/* ---------- footer skyline: the tops of the landmarks always show ----------
   The skyline sat in a short strip anchored to its base, so on wide and narrow
   screens alike the image was cropped from the top and the towers were cut flat.
   It is now anchored by its top in a slightly taller strip, so any cropping only
   trims the solid base, which runs off the bottom of the page anyway; and it takes
   the same pale grey silhouette as the Athens, Bologna and Dublin footers. */
footer::before{height:clamp(140px,19vw,280px);background-position:center top;
  filter:grayscale(1) brightness(1.5);opacity:.07}

/* ---------- header: a larger mark, and the wordmark set on its baseline ----------
   The mark grows again, the subtitle under "Focus Meeting 2027" steps up with it,
   and the two now sit on a common bottom line: the subtitle's capitals end where the
   drawn logo ends (the image has a little blank margin below "ESSKA", about 7% of its
   width, which the subtitle's own margin takes up). The centring over WELCOME above
   follows the new widths. */
.brand{align-items:flex-end}
.brand img{width:clamp(72px,6vw,108px)}
.brand .bn .sec{font-size:clamp(.8rem,1vw,1.06rem);margin-bottom:calc(.072 * clamp(72px,6vw,108px) - .2em)}
.nav.stuck .brand img{width:clamp(52px,3.7vw,66px)}
.nav.stuck .brand .bn .sec{font-size:clamp(.66rem,.76vw,.78rem);margin-bottom:calc(.072 * clamp(52px,3.7vw,66px) - .2em)}
@media(max-width:520px){
  .brand img,.nav.stuck .brand img{width:60px}
  .brand .bn .sec,.nav.stuck .brand .bn .sec{font-size:.64rem;margin-bottom:calc(.072 * 60px - .2em)}
}

/* ---------- the chairs' letter: plain greeting, and a closing strip ----------
   "Dear Colleagues," reads as the opening of a letter rather than a heading, so it
   drops the bold. The programme link leaves the text column and becomes the foot of
   the whole card: a pale band in the site colour, edged along the top with the same
   gradient rule that runs across the head of the card, the link on its left. */
.letterhead .salut{font-weight:400}
.letterhead .letter-cta{grid-column:1/-1;text-align:center;border-top:0;
  margin:clamp(2.2rem,4vw,3rem) calc(-1 * clamp(1.4rem,3.6vw,3.2rem)) calc(-1 * clamp(1.9rem,3.4vw,2.8rem));
  padding:clamp(1.4rem,2.6vw,1.9rem) clamp(1.4rem,3.6vw,3.2rem) clamp(1.5rem,2.8vw,2rem);
  background:
    linear-gradient(90deg,var(--ac-br) 0%,var(--blue) 45%,transparent 92%) top left/100% 3px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--ac-br) 13%,var(--paper)) 0%,color-mix(in srgb,var(--ac-br) 5%,var(--paper)) 100%)}

/* ---------- footer skyline: as present as the other cities' ----------
   Against this footer's darker ground the silhouette needed a stronger hand to
   read as clearly as the Athens, Bologna and Dublin skylines do. */
footer::before{opacity:.15}

/* =====================================================================
   Registration buttons from the new mock-ups (piloted on Rome)
   ===================================================================== */

/* 1. homepage Register now: a rectangle with softened corners instead of a pill;
   the halo and its gentle pulse follow the new shape */
.hero-cta .pill{border-radius:12px}

/* 2. the Register tab hanging from the top of the header: a shaded teal panel
   (lighter at the top left, deepening to the foot, with a fine highlight along the
   top edge) rather than a flat block, the early-rate date under a hairline */
.nav-in{position:relative}
.reg-tab{position:absolute;top:0;right:var(--pad);z-index:5;display:flex;flex-direction:column;gap:.7rem;
  min-width:clamp(210px,15vw,250px);padding:1.15rem 1.4rem 1.2rem;border-radius:0 0 16px 16px;
  text-decoration:none;color:#fff;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(169,222,232,.38) 0%,rgba(169,222,232,0) 55%),
    linear-gradient(165deg,#1296A8 0%,#0A6E80 48%,#064C59 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(3,40,48,.25),
    0 10px 24px rgba(10,110,128,.28),0 2px 6px rgba(15,18,23,.12);
  transition:box-shadow .3s var(--e),transform .3s var(--e),filter .3s var(--e)}
.reg-tab-top{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.3);
  font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.reg-tab-note{font-size:.84rem;font-weight:500;color:#D6EFF3;letter-spacing:.01em;line-height:1.2}
.reg-arrow{width:16px;height:12px;flex:none;transition:transform .3s var(--e)}
.reg-tab:hover,.reg-tab:focus-visible{filter:brightness(1.08);transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(3,40,48,.25),
    0 16px 32px rgba(10,110,128,.34),0 3px 8px rgba(15,18,23,.14)}
.reg-tab:hover .reg-arrow,.reg-tab:focus-visible .reg-arrow,
.stick-reg:hover .reg-arrow,.stick-reg:focus-visible .reg-arrow{transform:translateX(3px)}
.reg-tab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* the tab sits in the header's own height; when the header compacts on scroll it
   drops the note and tightens */
.nav.stuck .reg-tab{padding:.75rem 1.2rem .8rem;gap:0;min-width:0}
.nav.stuck .reg-tab-top{padding-bottom:0;border-bottom:0;font-size:13px}
.nav.stuck .reg-tab-note{display:none}
@media(max-width:1480px){.navreg.reg-tab{margin-left:0}}
@media(max-width:760px){
  .navreg.reg-tab{position:static;margin-left:auto;align-self:center;border-radius:10px;padding:.65rem 1rem;gap:0;min-width:0}
  .reg-tab-top{padding-bottom:0;border-bottom:0;font-size:12px;gap:.7rem}
  .reg-tab-note{display:none}
}

/* 3. the sticky bar: meeting and date on the left, the early rate and an outlined
   Register on the right. On the dark bar the outline is white; when the bar turns
   white over the dark sections it takes the site teal, still without a fill */
.stick{justify-content:space-between}
.stick .l{display:flex;align-items:center;gap:1.1rem;min-width:0}
.stick .l b{display:inline;font-size:1.08rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.stick-sep{display:block;width:1px;height:1.6rem;background:rgba(255,255,255,.28);flex:none}
.stick .l > span{display:block;margin:0;color:#E3C078;font-size:.98rem;font-weight:500;letter-spacing:0;
  text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stick-early{margin:0 0 0 auto;text-align:right;line-height:1.25;color:#fff}
.stick-early small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E3C078}
.stick-early > span{font-size:.95rem;font-weight:500}
.stick-reg{flex:none;display:inline-flex;align-items:center;gap:1rem;padding:.8rem 1.35rem;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.85);color:#fff;background:transparent;text-decoration:none;
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:background .2s var(--e),border-color .2s var(--e),color .2s var(--e)}
.stick-reg:hover,.stick-reg:focus-visible{background:rgba(255,255,255,.1);border-color:#fff}
.stick.onlight .stick-sep{background:rgba(14,30,34,.18)}
.stick.onlight .l > span{color:var(--muted)}
.stick.onlight .stick-early{color:var(--navy)}
.stick.onlight .stick-early small{color:#0A6E80}
.stick.onlight .stick-reg{border-color:#0A6E80;color:#0A6E80}
.stick.onlight .stick-reg:hover,.stick.onlight .stick-reg:focus-visible{background:rgba(10,110,128,.07)}
.stick-reg:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:900px){.stick .l > span,.stick-sep{display:none}}
@media(max-width:640px){.stick-early{display:none}.stick .l b{font-size:.95rem}}

/* =====================================================================
   Buttons as soft rectangles on every site, a stronger Send enquiry and a lighter
   Email about sponsorship
   ===================================================================== */
/* one shape for everything you press: rounded rectangles instead of pills (the small
   disc inside a Register button stays round) */
.pill,.hero-cta .pill,.btn{border-radius:12px}
.pill-sm,.pchip,.pcollapse,.tabs button{border-radius:10px}

/* the enquiry form's Send enquiry: the one action on the Contacts page, so it takes
   the same shaded fill as the Register tab in the header, with white lettering */
.form .pill,.form .pill:hover,.form .pill:focus-visible{color:#fff;border-color:transparent;
  background:radial-gradient(120% 110% at 0% 0%,rgba(169,222,232,.35) 0%,rgba(169,222,232,0) 55%),
    linear-gradient(165deg,#1296A8 0%,#0A6E80 48%,#064C59 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 24px rgba(10,110,128,.3),0 2px 6px rgba(0,0,0,.1)}
.form .pill:hover,.form .pill:focus-visible{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 32px rgba(10,110,128,.36),0 3px 8px rgba(0,0,0,.12)}
.form .pill .pill-i,.form .pill:hover .pill-i{background:#fff}
.form .pill .pill-i svg,.form .pill:hover .pill-i svg{fill:#0A6E80}

/* Email about sponsorship: quieter and more refined next to the contact details, a
   barely-tinted fill and a fine border, deepening only on hover */
.ind-spon .pill{background:color-mix(in srgb,var(--cta-fill) 32%,#fff);border-width:1.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);font-weight:700;letter-spacing:.12em;gap:14px;padding:6px 7px 6px 22px}
.ind-spon .pill .pill-i{width:30px;height:30px}
.ind-spon .pill .pill-i svg{width:9px;height:11px}
.ind-spon .pill:hover,.ind-spon .pill:focus-visible{background:var(--cta-fill);
  box-shadow:0 0 0 4px rgba(var(--cta-rgb),.1)}

/* ---------- Register tab and Send enquiry: richer shading ----------
   Four layers over the site colour instead of one gradient: a soft gloss across the
   top, a clear light source at the top left, the colour itself running light to deep,
   and a shaded corner at the bottom right, with a bright top edge and a shadow inside
   the foot, so the button reads as a lit, rounded surface rather than a flat panel. */
.reg-tab,.form .pill,.form .pill:hover,.form .pill:focus-visible{background:
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 50%),
    radial-gradient(95% 130% at 100% 100%,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 62%),
    radial-gradient(110% 95% at 0% 0%,rgba(169,222,232,.6) 0%,rgba(169,222,232,.18) 32%,rgba(169,222,232,0) 58%),
    linear-gradient(158deg,#1296A8 0%,#0A6E80 46%,#064C59 100%)}
.reg-tab{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -4px 10px rgba(0,0,0,.2),
    0 12px 28px rgba(10,110,128,.34),0 2px 6px rgba(0,0,0,.12)}
.reg-tab:hover,.reg-tab:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -4px 10px rgba(0,0,0,.2),
    0 18px 36px rgba(10,110,128,.4),0 3px 8px rgba(0,0,0,.14)}
.reg-tab-top{border-bottom-color:transparent;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.12)) left bottom/100% 1px no-repeat}
.nav.stuck .reg-tab-top{background:none}
.form .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -4px 10px rgba(0,0,0,.18),0 10px 24px rgba(10,110,128,.32),0 2px 6px rgba(0,0,0,.1)}

/* programme breaks: the title centred in the height of the row, level with the
   middle of the time and duration beside it, rather than hanging at the top */
.prow.break .prow-static{align-items:center}
.prow.break .ptitle{line-height:1.2}

/* ---------- the header matches the sticky bar (as piloted on Rome) ----------
   The hanging tab gives way to the same pair as the bar at the foot of the page: the
   early-rate date, then an outlined Register with an arrow, in the site colour on the
   white header. */
.nav-cta{display:flex;align-items:center;gap:1.4rem}
.nav-early{margin:0;text-align:right;line-height:1.25;color:var(--navy)}
.nav-early small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#0A6E80}
.nav-early > span{font-size:.98rem;font-weight:500}
.nav-reg{flex:none;display:inline-flex;align-items:center;gap:1.1rem;padding:.9rem 1.5rem;border-radius:10px;
  border:1.5px solid #0A6E80;color:#0A6E80;background:transparent;text-decoration:none;
  font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:background .2s var(--e)}
.nav-reg:hover,.nav-reg:focus-visible{background:rgba(10,110,128,.07)}
.nav-reg:hover .reg-arrow,.nav-reg:focus-visible .reg-arrow{transform:translateX(3px)}
.nav-reg:focus-visible{outline:2px solid #0A6E80;outline-offset:3px}
.nav.stuck .nav-reg{padding:.65rem 1.2rem;font-size:13px}
.nav.stuck .nav-early > span{font-size:.88rem}
@media(max-width:760px){
  .nav-early{display:none}
  .nav-reg{padding:.6rem 1rem;font-size:12px;gap:.7rem}
}
/* an earlier Register style padded .navreg and ran a sheen over it; the new wrapper
   needs neither, so its right edge lines up with the menu below */
.navreg.nav-cta{padding:0;background:none;box-shadow:none;border:0}
.navreg.nav-cta::before,.navreg.nav-cta::after{content:none;animation:none}

/* the contact address never breaks at its hyphen */
a[href^="mailto:focus-meetings@"]{white-space:nowrap}

/* ---------- Register in the "Join us" countdown band: quieter ----------
   On the photograph it sits beside the white "See what's on" link, so it takes the same
   white: a see-through glass fill, a fine white outline and a small translucent disc,
   with no halo, ring or pulse. It firms up a little on hover. */
.bleed .pill,.bleed .pill[data-go="registration"]{background:rgba(255,255,255,.08);color:#fff;
  border:1.5px solid rgba(255,255,255,.72);box-shadow:none;backdrop-filter:blur(6px);
  font-size:14px;font-weight:700;letter-spacing:.14em;gap:14px;padding:6px 7px 6px 22px}
.bleed .pill::before,.bleed .pill::after{content:none;animation:none}
.bleed .pill .pill-i,.bleed .pill[data-go="registration"] .pill-i,
.bleed .pill:hover .pill-i,.bleed .pill[data-go="registration"]:hover .pill-i{
  width:30px;height:30px;background:rgba(255,255,255,.18);box-shadow:none;animation:none;transform:none}
.bleed .pill .pill-i svg,.bleed .pill:hover .pill-i svg{width:9px;height:11px;fill:#fff;animation:none}
.bleed .pill:hover,.bleed .pill:focus-visible{background:rgba(255,255,255,.16);border-color:#fff;
  box-shadow:none;transform:none;color:#fff}
.bleed .pill:hover .pill-i svg{transform:translateX(1px)}

/* the countdown-band Register in the site's own colours: the outline, the label and the
   disc take a light-to-main gradient of the palette instead of plain white */
.bleed .pill,.bleed .pill[data-go="registration"]{--g:linear-gradient(120deg,#D2F5F9 0%,#9FE3EC 50%,#17BFD4 100%);
  position:relative;border:0;padding:7.5px 8.5px 7.5px 23.5px;background:rgba(23,191,212,.12)}
.bleed .pill::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  padding:1.5px;background:var(--g);animation:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bleed .pill > span:first-child{background:var(--g);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.bleed .pill .pill-i,.bleed .pill[data-go="registration"] .pill-i,
.bleed .pill:hover .pill-i,.bleed .pill[data-go="registration"]:hover .pill-i{background:var(--g)}
.bleed .pill .pill-i svg,.bleed .pill:hover .pill-i svg{fill:#060F11}
.bleed .pill:hover,.bleed .pill:focus-visible{background:rgba(23,191,212,.24)}

/* Contacts: the team and address come straight after the message, and the jump to the
   form is a quiet link with a down arrow, like Download the programme, not a button */
.pc-box .pc-box-office{margin-top:.2rem!important}
.pc-box .pc-jump{margin-top:.5rem;font-size:13px}
.pc-sub a[data-go]{color:var(--cta-border);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(var(--cta-rgb),.35)}
.pc-sub a[data-go]:hover{text-decoration-color:currentColor}

/* ---------- Contacts: one light gradient for the whole page ----------
   The banner and the enquiry form share a single wash from the paper colour to a
   light tint of the palette, with no glows or dot pattern. The sponsorship line is
   its own paragraph, and the rule in the enquiry box now sits above the form link. */
#contacts{background:linear-gradient(172deg,var(--paper) 0%,
  color-mix(in srgb,var(--ice) 30%,var(--paper)) 50%,color-mix(in srgb,var(--ice) 62%,var(--paper)) 100%)}
#contacts .pc,#contacts .tint{background:transparent}
#contacts .pc::before{content:none}
.pc-sub.pc-sub-2{margin-top:.85rem}
.pc-box .pc-box-office{border-top:0;padding-top:0;margin-top:.5rem!important}
.pc-jump-row{width:100%;margin-top:.7rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.pc-box .pc-jump-row .pc-jump{margin-top:0}

/* ---------- Contacts refinements ----------
   The team and address a step larger, the address in the site colour, a little more
   air above the form link, and Send enquiry keeps its shading but lighter: the site
   colour lifts towards a pale top-left instead of sinking into a dark corner. */
.pc-box .pc-box-office{font-size:1.02rem}
.pc-box .pc-box-office b{font-size:1.06rem}
.pc-box .pc-box-office a{color:var(--cta-border);text-decoration-color:rgba(var(--cta-rgb),.4)}
.pc-box .pc-box-office a:hover{text-decoration-color:currentColor}
.pc-jump-row{margin-top:1.2rem;padding-top:1.5rem}
.form .pill,.form .pill:hover,.form .pill:focus-visible{background:
    linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 55%),
    linear-gradient(158deg,color-mix(in srgb,var(--cta-border) 72%,#fff) 0%,var(--cta-border) 55%,
      color-mix(in srgb,var(--cta-border) 90%,#000) 100%)}
.form .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.08),
  0 8px 18px rgba(var(--cta-rgb),.22),0 1px 3px rgba(0,0,0,.06)}
.form .pill:hover,.form .pill:focus-visible{filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(0,0,0,.08),
  0 12px 24px rgba(var(--cta-rgb),.28),0 2px 4px rgba(0,0,0,.08)}
.form .pill .pill-i svg,.form .pill:hover .pill-i svg{fill:var(--cta-border)}

/* date ranges: the en dash stays small and sits close to the numbers on both sides,
   so "8–9 October" reads as one date rather than three separate pieces */
.dash{font-size:.7em;font-weight:500;margin:0 .06em;vertical-align:.1em;opacity:.7}
.ebar-item .dash{font-size:.6em;margin:0 .08em;vertical-align:.14em;opacity:1}
.u-c i.dash,.u-l i.dash{display:inline!important;width:auto;height:auto;background:none;align-self:auto}

/* ---------- see-through Register now, and Get directions in the site's dark tone ----------
   The hero Register now drops its tinted fill so the page shows through (outline, halo,
   disc and animations unchanged). Get directions on the venue card takes the standard
   button size, the same as Book a room, in the palette's darkest colour instead of the
   main accent, so it reads as the secondary action. */
.hero-cta .pill{background:transparent}
.v-card .btn-row .pill:not(.pill-book){background:transparent;border:2px solid var(--navy);color:var(--navy);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--navy) 10%,transparent);
  font-weight:700;letter-spacing:.1em;gap:18px;padding:7px 9px 7px 25px}
.v-card .btn-row .pill:not(.pill-book) .pill-i{width:34px;height:34px;background:var(--navy)}
.v-card .btn-row .pill:not(.pill-book) .pill-i svg{width:10px;height:12px;fill:#fff}
.v-card .btn-row .pill:not(.pill-book):hover,.v-card .btn-row .pill:not(.pill-book):focus-visible{
  background:color-mix(in srgb,var(--navy) 7%,transparent);border-color:var(--navy);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--navy) 12%,transparent)}

/* the line under Send enquiry explaining that it opens the visitor's email app */
.form-note{margin:.9rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.55;max-width:52ch}
.form-note a{color:var(--cta-border);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--cta-rgb),.4)}

/* ---------- Send enquiry: light, with the shading cut into the surface ----------
   The solid dark block gives way to a pale tint of the site colour: white at the top
   edge falling to a deeper tint at the foot, a fine inner shadow along the top and
   sides so the face sits slightly below its border, dark ink lettering and the disc in
   the site colour. It presses in a little further on hover and click. */
.form .pill,.form .pill:hover,.form .pill:focus-visible{color:var(--cta-ink);
  border:1.5px solid var(--cta-border);
  background:linear-gradient(180deg,#fff 0%,var(--cta-fill) 46%,
    color-mix(in srgb,var(--cta-fill) 76%,var(--cta-border)) 100%)}
.form .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
  inset 0 2px 4px rgba(var(--cta-rgb),.22),inset 0 -1px 0 rgba(255,255,255,.5),
  0 1px 2px rgba(var(--cta-rgb),.18),0 6px 14px rgba(var(--cta-rgb),.14)}
.form .pill:hover,.form .pill:focus-visible{filter:none;transform:none;
  background:linear-gradient(180deg,#fff 0%,var(--cta-fill-h) 46%,
    color-mix(in srgb,var(--cta-fill-h) 72%,var(--cta-border)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
  inset 0 3px 6px rgba(var(--cta-rgb),.26),0 1px 2px rgba(var(--cta-rgb),.2),
  0 8px 18px rgba(var(--cta-rgb),.18)}
.form .pill:active{transform:none;
  box-shadow:inset 0 2px 6px rgba(var(--cta-rgb),.32),0 1px 2px rgba(var(--cta-rgb),.16)}
.form .pill .pill-i,.form .pill:hover .pill-i{background:var(--cta-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.form .pill .pill-i svg,.form .pill:hover .pill-i svg{fill:#fff}

/* ---------- small phones (430px and under) ----------
   A responsiveness sweep at 320 to 390px found three places whose smallest possible
   width was wider than the screen, which pushed the whole page sideways: the header
   brand beside the Register button, the sponsorship card (the round photo and the long
   email address on one line), and the "Opens ..." button in the registration card.
   Everything here only tightens those. */
@media(max-width:430px){
  .brand img,.nav.stuck .brand img{width:46px}
  .brand .bn b,.nav.stuck .brand .bn b{font-size:.92rem}
  .brand .bn .sec,.nav.stuck .brand .bn .sec{font-size:.54rem;letter-spacing:.08em;margin-bottom:0}
  .brand{gap:.6rem}
  .nav-reg{padding:.5rem .7rem;font-size:11px;gap:.45rem}
  .kicker{flex-wrap:wrap;gap:.7rem}
  /* the sponsorship contact: photo above the name, and a long email may break */
  .ind-person,.ind-person.ind-person{flex-direction:column;align-items:flex-start;gap:.8rem;padding:1rem}
  .ind-av,img.ind-av{width:64px;height:64px}
  .ind-who a{overflow-wrap:anywhere;word-break:break-word}
  .ind-card,.reg-card{padding:1.15rem}
  /* buttons may set their label over two lines rather than force the page wider */
  .pill{font-size:12px;letter-spacing:.06em;padding-left:16px;gap:10px}
  .pill > span:first-child{white-space:normal;text-align:left}
  .pill-i{width:28px;height:28px}
  .hero-cta .pill{font-size:13px}
}
@media(max-width:430px){
  /* remaining narrow-screen pinch points found by the sweep at 320px */
  .prog-controls,.pctl-row{flex-wrap:wrap}
  .prog-controls input,.prog-controls .pfield{min-width:0}
  .fac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fac,.route,.routes > *{min-width:0}
  .fac b,.fac span{overflow-wrap:anywhere}
  .routes{grid-template-columns:1fr}
}
@media(max-width:430px){
  /* the programme's Download link and the faculty country labels were the last two
     things wider than a 320px screen */
  .pctl-row .tlink,.tlink.pctl-dl{font-size:11px;letter-spacing:.05em;gap:.45rem}
  .pctl-row .tlink > span,.tlink.pctl-dl > span{white-space:normal}
  .fac b,.fac .c,.fac span{overflow-wrap:anywhere;hyphens:auto}
}
@media(max-width:430px){
  /* the "Opens first" tag sat on top of the period name once the card narrowed */
  .fee-period{padding-top:1rem}
  .fp-tag{position:static;align-self:flex-start;order:-1;margin-bottom:.15rem}
}
/* =====================================================================
   PHONE LAYOUT PASS (ported from the Athens pilot) — everything below is inside phone-only media queries,
   so the desktop layout is untouched.
   ===================================================================== */

/* 1. Header: the logo and Register sit on one line, properly centred on each
   other, and the menu becomes an even three-by-two grid underneath instead of a
   ragged wrap. */
@media(max-width:760px){
  .nav-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem 1rem;padding-block:.5rem}
  .brand,.nav.stuck .brand{align-items:center;padding:.35rem 0}
  .nav-cta{justify-self:end}
  .nav ul{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;
    border-top:1px solid var(--line)}
  .nav ul li{display:flex;justify-content:center}
  .nav ul a{width:100%;text-align:center;padding:.72rem .25rem;font-size:.75rem;letter-spacing:.05em}
  .nav ul a::after{left:14%;right:14%;height:3px}
}

/* 2. The hero pair: Register now full width, the programme link centred under it. */
@media(max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch;gap:.9rem}
  .hero-cta .pill{width:100%;justify-content:space-between}
  .hero-cta .tlink,.hero-cta .tlink.tlink-dl{align-self:center;margin-left:0;justify-content:center}
}

/* 3. The chairs' letter reads in the right order: the message first, the chairs
   after it as a row of three, rather than three portraits before the first word. */
@media(max-width:900px){
  .letterhead{display:flex;flex-direction:column}
  .letterhead .lh-mark{order:1}
  .letterhead .lh-main{order:2}
  .letterhead .letter-cta{order:4;text-align:center;margin-top:1.6rem}
  .letterhead .lh-chairs{order:3;border-bottom:0;border-top:1px solid var(--line);
    padding:1.6rem 0 0;margin:1.8rem 0 0}
  .lh-chairs .lh-label{text-align:center}
  .lh-chairs .sign{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem .8rem;text-align:center}
  .lh-chairs .sign figure{flex-direction:column;align-items:center;text-align:center;gap:.55rem}
  .lh-chairs .sign img,.lh-chairs .sign .sign-av{width:84px;height:84px;margin:0 auto}
  .lh-chairs .sign b{font-size:.88rem;line-height:1.2}
  .lh-chairs .sign span{font-size:.74rem;line-height:1.3}
}
@media(max-width:430px){
  .lh-chairs .sign img,.lh-chairs .sign .sign-av{width:72px;height:72px}
  .lh-chairs .sign b{font-size:.8rem}
  .lh-chairs .sign span{font-size:.68rem}
}

/* 4. Fact rows (venue address, dates, meeting rooms): label above value, both
   ranged left, instead of a label and a right-aligned value pulling apart. */
@media(max-width:560px){
  .row{flex-direction:column;align-items:flex-start;gap:.15rem;padding:.8rem 0}
  .row span{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .row b{text-align:left}
}

/* 5. One rule for buttons on a phone: every filled button is full width with its
   disc at the right-hand end, and text links sit centred under them. */
@media(max-width:560px){
  .btn-row{flex-direction:column;align-items:stretch;gap:.8rem}
  .btn-row .pill,.v-card .btn-row .pill,.reg-card .pill,.ind-spon .pill,.form .pill,
  .pc-box .pill,.v-stay-when .stay-book,.band-go .pill{width:100%;justify-content:space-between}
  .btn-row .tlink,.reg-card .tlink,.band-go .tlink{align-self:center}
  .v-card .btn-row{display:flex}
}

/* 6. The early-rate countdown keeps its four boxes on one line, and the four
   figures under the hero become a single column of rows rather than a 2x2 block. */
@media(max-width:560px){
  .count{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;flex-wrap:nowrap;margin-top:2rem}
  .count div{min-width:0;padding:.7rem .2rem}
  .count b{font-size:1.45rem}
  .count span{font-size:.56rem;letter-spacing:.06em;margin-top:.35rem}
  .band-num .grid{grid-template-columns:1fr;row-gap:0}
  .band-num .n{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:0 1.1rem;
    text-align:left;padding:.9rem .2rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .band-num .n:last-child{border-bottom:0}
  .band-num .n-ic{grid-row:span 3;margin:0}
  .band-num b{font-size:1.6rem}
  .band-num span{margin-top:.1rem;font-size:.72rem}
  .band-num em{margin-top:.1rem}
}

/* =====================================================================
   PHONE MENU — the six links move behind a menu button and open as a panel.
   Desktop (above 760px) keeps the row of links: the button is hidden and the
   list is the ordinary nav again.
   ===================================================================== */
.nav-burger{display:none}
@media(max-width:760px){
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
    border:1.5px solid rgba(var(--navy-rgb,18,41,77),.2);border-radius:12px;background:#fff;cursor:pointer;
    transition:border-color .2s var(--e),background .2s var(--e)}
  .nav-burger:focus-visible{outline:2px solid var(--cta-border);outline-offset:3px}
  .nb-bars{display:grid;gap:5px}
  .nb-bars i{display:block;width:20px;height:2px;border-radius:2px;background:var(--navy);
    transition:transform .28s var(--e),opacity .2s var(--e)}
  .nav.is-open .nav-burger{border-color:var(--cta-border);background:color-mix(in srgb,var(--cta-fill) 45%,#fff)}
  .nav.is-open .nb-bars i:first-child{transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nb-bars i:nth-child(2){opacity:0}
  .nav.is-open .nb-bars i:last-child{transform:translateY(-7px) rotate(-45deg)}

  /* the header itself: logo left, then Register and the menu button */
  .nav-in{display:flex;flex-wrap:nowrap;align-items:center;gap:.7rem;padding-block:.6rem}
  .nav-cta{margin-left:auto}
  .nav-burger{order:3;flex:none}

  /* the panel */
  .nav ul#menu{position:absolute;left:0;right:0;top:100%;z-index:90;display:block;
    margin:0;padding:1.5rem 1.4rem 1.7rem;border-top:0;
    background:linear-gradient(168deg,color-mix(in srgb,var(--navy) 86%,#fff) 0%,var(--navy) 46%,var(--navy-d) 100%);
    box-shadow:0 26px 50px rgba(0,0,0,.34);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s var(--e),transform .28s var(--e),visibility .28s}
  body.menu-open .nav ul#menu{opacity:1;visibility:visible;transform:none}
  .nav ul#menu li{display:block}
  .nav ul#menu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:auto;padding:1.15rem .2rem;font-size:1.08rem;font-weight:600;letter-spacing:0;
    text-transform:none;text-align:left;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14)}
  .nav ul#menu a::after{content:"→";position:static;transform:none;width:auto;height:auto;
    background:none;color:rgba(255,255,255,.45);font-size:1rem;transition:transform .25s var(--e)}
  .nav ul#menu a:hover::after,.nav ul#menu a:focus-visible::after{transform:translateX(3px);color:var(--ac-l)}
  .nav ul#menu a.on{color:var(--ac-l);font-weight:800}
  .nav ul#menu a.on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ac-l)}

  /* the two actions at the foot of the panel, with room around them */
  .menu-foot{padding-top:1.6rem}
  .menu-foot .pill.pill-menu{display:flex;width:100%;justify-content:space-between;
    background:var(--cta-fill);border:2px solid var(--cta-border);color:var(--cta-ink);box-shadow:0 0 0 4px rgba(var(--cta-rgb),.18);
    padding:10px 10px 10px 22px;font-size:13px}
  .menu-foot .pill.pill-menu .pill-i{width:32px;height:32px;background:var(--cta-border)}
  .menu-early{margin:1rem 0 0;text-align:center;font-size:.86rem;color:rgba(255,255,255,.7)}
  .menu-early::before{content:"Early rate ";color:var(--ac-l);font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;font-size:.7rem}
  /* the panel hangs from the header, so the header needs to sit above the page */
  .nav{position:sticky;z-index:95}
  .nav-in{position:relative}
}
@media(min-width:761px){
  .menu-foot{display:none}
}
@media(max-width:620px){
  /* on a narrow phone the header carries the logo and the menu button only: Register
     is the first thing inside the panel, and the sticky bar keeps it in reach */
  .nav .nav-cta{display:none}
  .nav-burger{margin-left:auto}
}
@media(min-width:621px) and (max-width:760px){
  .nav-reg{padding:.55rem .8rem;font-size:11px;gap:.5rem}
}
@media(max-width:760px){
  /* the two actions are buttons, not list links: no inherited arrow, and Register
     keeps its dark ink label on the pale fill */
  .menu-foot a::after{content:none!important}
  .menu-foot .pill.pill-menu,.menu-foot .pill.pill-menu > span:first-child{color:var(--cta-ink)}
  .menu-foot a{border-bottom:0;padding:0}
}
@media(max-width:760px){
  /* the panel's link rules are stronger than the button's, so restate the button here */
}
@media(max-width:360px){
  /* the smallest phones: the brand and the kicker rule step down again */
  .brand img,.nav.stuck .brand img{width:38px}
  .brand .bn b,.nav.stuck .brand .bn b{font-size:.84rem}
  .brand .bn .sec,.nav.stuck .brand .bn .sec{font-size:.48rem;letter-spacing:.06em}
  .brand{gap:.45rem;margin-left:0!important}
  .kicker i{display:none}
  .kicker{gap:.5rem}
}
@media(max-width:560px){
  /* the two fee periods stack, so neither card is left short beside the other */
  .fee-periods,.fee-periods.two{grid-template-columns:1fr}
  .fee-period{padding:1rem 1.15rem}
}
/* =====================================================================
   PHONE: a shorter homepage — the figures and the topic cards become
   swipeable rows instead of tall stacks, and the panel's Register now is a
   proper filled button. Phone widths only; desktop is untouched.
   ===================================================================== */
@media(max-width:760px){
  /* 1. Register now in the menu panel: filled in the site colour with a white
     disc, so it reads as the main action rather than a pale slab */
  .menu-foot .pill.pill-menu{height:52px;padding:0 8px 0 22px;font-size:13.5px;font-weight:800;
    letter-spacing:.06em;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px rgba(0,0,0,.28);
    background:linear-gradient(180deg,color-mix(in srgb,var(--cta-border) 84%,#fff) 0%,var(--cta-border) 58%,
      color-mix(in srgb,var(--cta-border) 88%,#000) 100%)}
  .menu-foot .pill.pill-menu,.menu-foot .pill.pill-menu > span:first-child{color:#fff}
  .menu-foot .pill.pill-menu .pill-i{width:34px;height:34px;background:#fff}
  .menu-foot .pill.pill-menu .pill-i svg{fill:var(--cta-border)}

  /* 2. the figures: one card at a time, swipeable, with the next one peeking */
  .band-num .grid{display:flex;grid-template-columns:none;gap:.9rem;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:.2rem}
  .band-num .grid::-webkit-scrollbar{display:none}
  .band-num .n{flex:0 0 76%;scroll-snap-align:center;display:flex;flex-direction:column;
    align-items:flex-start;text-align:left;gap:.15rem;padding:1.15rem 1.25rem;border-right:0;
    border-bottom:0;border:1px solid rgba(255,255,255,.18);border-radius:12px;
    background:rgba(255,255,255,.05)}
  .band-num .n-ic{grid-row:auto;margin:0 0 .6rem}
  .band-num b{font-size:1.9rem}
  .band-num span{margin-top:.2rem}
  .band-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1rem}
  .band-dots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);
    transition:background .25s var(--e),transform .25s var(--e)}
  .band-dots i.on{background:var(--ac-l);transform:scale(1.25)}

  /* 3. the topic cards: the same swipeable row, so the section is one card tall */
  .topics{display:flex;grid-template-columns:none;gap:1rem;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding:.2rem var(--pad) .4rem}
  .topics::-webkit-scrollbar{display:none}
  .topic{flex:0 0 82%;scroll-snap-align:center}
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:.9rem 0 0;
    font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .swipe-hint i{display:block;width:26px;height:1px;background:currentColor;opacity:.4}
}
@media(min-width:761px){.band-dots,.swipe-hint{display:none}}
@media(max-width:760px){
  /* Programme page, phones only: the day-by-day figures become a swipeable row like the
     homepage band, and the two day buttons sit side by side instead of stacking */
  .summary{display:flex;grid-template-columns:none;gap:.9rem;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding:.2rem var(--pad) .4rem;margin-bottom:2rem}
  .summary::-webkit-scrollbar{display:none}
  .summary .sm{flex:0 0 76%;scroll-snap-align:center;min-width:0}
  .pchips{flex-wrap:nowrap;gap:.5rem}
  .pchips .pchip{flex:1 1 0;min-width:0;text-align:center;padding:.7rem .5rem;
    font-size:.72rem;letter-spacing:.04em}
}
@media(max-width:430px){
  .pchips .pchip{font-size:.66rem;letter-spacing:.02em;padding:.65rem .35rem}
}
@media(max-width:560px){
  /* the day buttons keep to one line: the date is already in the day heading below */
  .pchips .pchip{white-space:nowrap}
  .pchip-date{display:none}
}
@media(max-width:560px){
  /* the day buttons take the full width of the row, sharing it equally */
  .pctl-row .pchips{flex:1 1 100%;width:100%}
  .pchips .pchip{flex:1 1 50%}
}
@media(max-width:760px){
  /* Register now in the menu panel matches the homepage button: white face, the site
     colour for the outline, the lettering and the disc */
  .menu-foot .pill.pill-menu{background:#fff;border:2px solid var(--cta-border);
    box-shadow:0 0 0 4px rgba(var(--cta-rgb),.22)}
  .menu-foot .pill.pill-menu,.menu-foot .pill.pill-menu > span:first-child{color:var(--cta-ink)}
  .menu-foot .pill.pill-menu .pill-i{background:var(--cta-border)}
  .menu-foot .pill.pill-menu .pill-i svg{fill:#fff}
  .menu-foot .pill.pill-menu:hover,.menu-foot .pill.pill-menu:focus-visible{
    background:var(--cta-fill);box-shadow:0 0 0 7px rgba(var(--cta-rgb),.26)}
}
@media(max-width:760px){
  /* the panel's Register now is set in capitals, like the homepage button (the panel's
     link rules set the menu items in sentence case, so restate it here) */
  .nav ul#menu .menu-foot .pill.pill-menu,
  .nav ul#menu .menu-foot .pill.pill-menu > span:first-child{
    text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:13px}
}
@media(max-width:760px){
  /* a little more room between the outline and the R */
  .nav ul#menu .menu-foot .pill.pill-menu{padding:0 8px 0 46px}
}

/* the list of hotels near the venue */
.hotel-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.hotel-list li{padding-left:1.3rem;position:relative;line-height:1.5}
.hotel-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--ac-br)}
.hotel-list a{color:var(--cta-ink);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(var(--cta-rgb),.4);text-underline-offset:3px}
.hotel-list a:hover{text-decoration-color:currentColor}