/* v55 · AI workshops page in ASML's design language.
   Scoped to main.w55 so the rest of the v54 site is untouched.
   Two colours, not one: deep blue for type and figures, petrol for signals,
   and a single blue-to-petrol gradient panel (ASML uses a blue gradient the same way). */

.w55{
  --u:#0a3a8c;          /* deep blue (v54.3) */
  --u-deep:#072b6b;
  --p:#0891B2;          /* petrol (site focus-ring cyan, already in the v54 palette) */
  --p-lt:#22D3EE;       /* petrol on dark */
  --ink:#1E2440;
  --mute:#5A6288;
  --rule:#DCDDEE;
  --wash:#F3F4FA;
  --grad:linear-gradient(115deg,#0a3a8c 0%,#1f5fd1 48%,#0891B2 100%);
  --hdr:68px;
  --ease:cubic-bezier(.4,0,.2,1);
  background:#FFFFFF;color:var(--ink);font-family:var(--font-body,"DM Sans",system-ui,sans-serif);
  overflow-x:clip;
}
.w55 *{box-sizing:border-box}
.w55 h1,.w55 h2,.w55 h3{font-family:var(--font-display,"Outfit Variable","Outfit",sans-serif);margin:0;letter-spacing:-.025em}
.w55 p{margin:0}
.w55-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.w55-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* ASML's faint 12-column rules on white sections */
.w55-lined{position:relative}
.w55-lined::before{content:"";position:absolute;inset:0;max-width:1200px;margin:0 auto;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(10,58,140,.055) 0 1px,transparent 1px calc(100% / 12))}
[dir=rtl] .w55-lined::before{transform:scaleX(-1)}

/* signal bar + link pattern */
.w55-bar{display:block;width:32px;height:3px;background:var(--p);margin-top:8px;transition:width .4s var(--ease)}
.w55-lnk{display:inline-flex;flex-direction:column;align-self:flex-start;text-decoration:none;font-weight:600;font-size:16px;color:var(--u)}
.w55-lnk:hover .w55-bar,.w55-lnk:focus-visible .w55-bar{width:100%}
.w55-kicker{display:flex;flex-direction:column;font-family:var(--font-mono,"DM Mono",monospace);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--u)}
[dir=rtl] .w55-kicker{letter-spacing:0;font-family:inherit;font-size:15px;font-weight:600}
.w55-btn{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--u);color:#FFFFFF;font-weight:600;font-size:16px;text-decoration:none;border-radius:0;transition:background .25s var(--ease)}
.w55-btn:hover{background:var(--u-deep);color:#FFFFFF}
.w55-btn--light{background:#FFFFFF;color:var(--u)}
.w55-btn--light:hover{background:#E8E9F7;color:var(--u)}
.w55 a:focus-visible,.w55 summary:focus-visible,.w55 button:focus-visible{outline:3px solid var(--p-lt);outline-offset:3px}

/* 1 · hero: full-bleed photo from a real session */
.w55-hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;color:#FFFFFF;background:#0E1028}
.w55-hero picture,.w55-hero__img{position:absolute;inset:0;width:100%;height:100%}
.w55-hero__img{object-fit:cover;object-position:50% 40%}
.w55-hero__shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,8,32,.55) 0%,rgba(8,8,32,.10) 30%,rgba(8,8,32,.25) 55%,rgba(8,8,32,.88) 100%),
  linear-gradient(90deg,rgba(7,43,107,.55) 0%,rgba(7,43,107,0) 60%)}
[dir=rtl] .w55-hero__shade{background:
  linear-gradient(180deg,rgba(8,8,32,.55) 0%,rgba(8,8,32,.10) 30%,rgba(8,8,32,.25) 55%,rgba(8,8,32,.88) 100%),
  linear-gradient(270deg,rgba(7,43,107,.55) 0%,rgba(7,43,107,0) 60%)}
.w55-hero__in{position:relative;width:100%;padding-top:120px;padding-bottom:72px}
.w55-crumbs ol{list-style:none;margin:0 0 40px;padding:0;display:flex;gap:10px;font-size:14px;color:rgba(255,255,255,.8)}
.w55-crumbs li+li::before{content:"/";margin-inline-end:10px;opacity:.6}
.w55-crumbs a{color:inherit;text-decoration:none}.w55-crumbs a:hover{color:#FFFFFF;text-decoration:underline}
.w55-hero h1{grid-column:1 / span 9;font-size:clamp(48px,7.2vw,104px);line-height:.95;font-weight:700}
.w55-hero__lede{grid-column:1 / span 6;margin-top:28px !important;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:rgba(255,255,255,.92)}
.w55-hero__act{grid-column:1 / -1;margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.w55-hero .w55-lnk{color:#FFFFFF}
.w55-hero .w55-bar{background:var(--p-lt)}
.w55-hero__cap{position:absolute;inset-inline-end:40px;bottom:24px;font-size:13px;color:rgba(255,255,255,.7)}

/* 2 · facts row */
.w55-facts{padding:56px 0 64px;border-bottom:1px solid var(--rule)}
.w55-facts dl{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.w55-facts dl>div{border-top:3px solid var(--u);padding-top:16px}
.w55-facts dl>div:nth-child(even){border-top-color:var(--p)}
.w55-facts dt{font-family:var(--font-mono,"DM Mono",monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
[dir=rtl] .w55-facts dt{font-family:inherit;letter-spacing:0;font-size:14px}
.w55-facts dd{margin:8px 0 0;font-size:17px;line-height:1.4;font-weight:600;color:var(--ink)}
.w55-facts__note{margin-top:32px !important;font-size:15px;color:var(--mute)}

/* 3 · statement */
.w55-intro{padding:136px 0}
.w55-intro .w55-kicker{grid-column:1 / span 3}
.w55-intro h2{grid-column:4 / span 8;font-size:clamp(36px,4.4vw,64px);line-height:1.02;font-weight:700;color:var(--u)}
.w55-intro p{grid-column:4 / span 6;margin-top:36px !important;font-size:19px;line-height:1.6;color:var(--ink)}

/* 4 · story section (v55.4): the session photo is portrait, so it gets its own column beside the text; no full-bleed crop */
.w55-story{position:relative;background:#0E1028}
.w55-story__pin{position:relative;min-height:calc(100vh - var(--hdr));overflow:hidden}
.w55-story__frame{position:absolute;top:0;bottom:0;inset-inline-end:0;width:42%;margin:0}
.w55-story__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.w55-story__shade{display:none}
.w55-story__txt{position:relative;min-height:calc(100vh - var(--hdr));display:flex;align-items:center;padding:96px 0;color:#FFFFFF}
.w55-story__txt>.w55-wrap{width:100%}
.w55-story__txt .w55-kicker{grid-column:1 / span 6;color:var(--p-lt)}
.w55-story__txt h2{grid-column:1 / span 6;font-size:clamp(36px,4.2vw,64px);line-height:1;font-weight:700}
.w55-story__txt p{grid-column:1 / span 6;margin-top:28px !important;font-size:19px;line-height:1.6;color:rgba(255,255,255,.9)}
.w55-story__cap{position:absolute;inset-inline-end:40px;top:24px;font-size:13px;color:rgba(255,255,255,.75)}
@supports (animation-timeline: view()){

  @keyframes w55open{to{clip-path:inset(0 0 0 0)}}
  @keyframes w55shade{to{opacity:1}}
  @keyframes w55rise{to{opacity:1;transform:none}}
  .w55-rv{animation:w55up linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  @keyframes w55up{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
}

/* 5 · two tracks */
.w55-tracks{padding:136px 0 120px}
.w55-head{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;row-gap:28px;margin-bottom:64px}
.w55-head .w55-kicker{grid-column:1 / span 3}
.w55-head h2{grid-column:4 / span 8;font-size:clamp(34px,3.8vw,56px);line-height:1.04;font-weight:700;color:var(--u)}
.w55-head p{grid-column:4 / span 6;font-size:18px;line-height:1.6;color:var(--ink)}
.w55-tracks__list{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.w55-track{position:relative;background:var(--wash);padding:48px 48px 56px;border-top:4px solid var(--u);display:flex;flex-direction:column;gap:18px}
.w55-track:nth-child(2){border-top-color:var(--p)}
.w55-track__n{font-family:var(--font-display,"Outfit",sans-serif);font-size:72px;line-height:1;font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--u)}
.w55-track:nth-child(2) .w55-track__n{-webkit-text-stroke-color:var(--p)}
.w55-track h3{font-size:30px;line-height:1.1;font-weight:700;color:var(--u)}
.w55-track__who{font-weight:600;font-size:17px}
.w55-track__what{font-size:17px;line-height:1.6}
.w55-track__proof{margin-top:auto !important;padding-top:20px !important;border-top:1px solid var(--rule);font-size:15px;color:var(--mute)}

/* 6 · results */
.w55-results{padding:120px 0 72px}
.w55-stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.w55-stat{border-top:1px solid var(--rule);padding-top:28px;display:flex;flex-direction:column;gap:14px}
.w55-stat__task{font-size:16px;color:var(--mute)}
.w55-stat__fig{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-family:var(--font-display,"Outfit",sans-serif);font-weight:700;letter-spacing:-.03em}
.w55-stat__from{font-size:28px;color:var(--mute);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--p)}
.w55-stat__arrow{font-size:28px;color:var(--p)}
[dir=rtl] .w55-stat__arrow{transform:scaleX(-1)}
.w55-stat__to{font-size:clamp(48px,5vw,72px);line-height:1;color:var(--u)}
.w55-results__note{grid-column:4 / span 6;margin-top:28px !important;font-size:14px;color:var(--mute)}

/* 7 · voices on the one gradient panel */
.w55-voices{padding:0 0 136px}
.w55-panel{background:var(--grad);color:#FFFFFF;padding:88px 0 80px;position:relative;overflow:hidden}
.w55-panel::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px calc(100% / 12));pointer-events:none}
.w55-quotes{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:64px;position:relative;z-index:1}
.w55-quote{margin:0;display:flex;flex-direction:column;gap:28px}
.w55-quote p{font-size:clamp(19px,1.6vw,23px);line-height:1.5;font-weight:400}
.w55-quote footer{display:flex;flex-direction:column;font-size:15px;color:rgba(255,255,255,.85)}
.w55-quote footer strong{font-size:17px;color:#FFFFFF}
.w55-quote .w55-bar{background:var(--p-lt);margin:0 0 14px}
.w55-panel__act{grid-column:1 / -1;margin-top:56px;position:relative;z-index:1}
.w55-panel .w55-lnk{color:#FFFFFF}.w55-panel .w55-lnk .w55-bar{background:#FFFFFF}

/* 8 · outcomes */
.w55-out{padding:136px 0}
.w55-out__list{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px;margin:0;padding:0;list-style:none;counter-reset:o}
.w55-out__list li{counter-increment:o;display:flex;flex-direction:column;gap:10px}
.w55-out__list li::before{content:"0" counter(o);font-family:var(--font-mono,"DM Mono",monospace);font-size:13px;color:var(--p);border-bottom:3px solid var(--p);width:32px;padding-bottom:10px;margin-bottom:6px}
.w55-out__list li:nth-child(odd)::before{color:var(--u);border-color:var(--u)}
.w55-out__list h3{font-size:22px;font-weight:700;color:var(--u)}
.w55-out__list p{font-size:16px;line-height:1.55}
.w55-out__more{grid-column:4 / span 8;margin-top:56px;padding-top:32px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:16px;font-size:16px;line-height:1.6}

/* 9 · people carousel (ASML "global presence") */
.w55-people{padding:120px 0 136px;background:var(--wash);overflow:hidden}
.w55-people__grid{align-items:center;row-gap:40px}
.w55-people__head{grid-column:1 / span 4;display:flex;flex-direction:column;gap:28px}
.w55-people__head h2{font-size:clamp(32px,3.2vw,46px);line-height:1.06;font-weight:700;color:var(--u)}
.w55-people__head p{font-size:17px;line-height:1.6}
.w55-people__nav{display:flex;align-items:center;gap:12px;margin-top:8px}
.w55-arrow{width:52px;height:52px;border:1px solid var(--u);background:transparent;color:var(--u);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s}
.w55-arrow:hover{background:var(--u);color:#FFFFFF}
.w55-arrow[disabled]{opacity:.3;cursor:default;background:transparent;color:var(--u)}
[dir=rtl] .w55-arrow svg{transform:scaleX(-1)}
.w55-count{font-family:var(--font-mono,"DM Mono",monospace);font-size:14px;color:var(--mute);margin-inline-start:8px}
.w55-people__area{grid-column:5 / -1;position:relative;margin-inline-end:calc(-40px - max(0px,(100vw - 1280px) / 2))}
.w55-track-x{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.w55-track-x::-webkit-scrollbar{display:none}
.w55-track-x.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.w55-track-x.is-drag a{pointer-events:none}
.w55-pc{flex:0 0 340px;height:540px;position:relative;overflow:hidden;scroll-snap-align:start;background:#0E1028}
.w55-pc>a,.w55-pc>div{display:block;height:100%;color:#FFFFFF;text-decoration:none;position:relative}
.w55-pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);-webkit-user-drag:none;user-select:none}
.w55-pc:hover img{transform:scale(1.04)}
.w55-pc__mono{position:absolute;inset:0;background:var(--grad);display:flex;align-items:flex-start;justify-content:flex-start;padding:32px}
.w55-pc:nth-child(even) .w55-pc__mono{background:linear-gradient(160deg,#0891B2 0%,#1f5fd1 60%,#0a3a8c 100%)}
.w55-pc__mono span{font-family:var(--font-display,"Outfit",sans-serif);font-size:120px;line-height:.9;font-weight:700;color:rgba(255,255,255,.16);letter-spacing:-.04em}
.w55-pc__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(8,8,32,.88) 100%);transition:background-color .3s;pointer-events:none}
.w55-pc:hover .w55-pc__shade,.w55-pc:focus-within .w55-pc__shade{background-color:rgba(7,43,107,.45)}
.w55-pc__txt{position:absolute;left:0;right:0;bottom:0;padding:0 28px 48px;display:flex;flex-direction:column}
.w55-pc__role{font-size:13px;font-family:var(--font-mono,"DM Mono",monospace);letter-spacing:.04em;color:var(--p-lt);margin-bottom:6px}
[dir=rtl] .w55-pc__role{font-family:inherit;letter-spacing:0;font-size:14px}
.w55-pc__name{font-family:var(--font-display,"Outfit",sans-serif);font-size:28px;line-height:1.05;font-weight:700}
.w55-pc__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.w55-pc__in{overflow:hidden;opacity:0;transition:opacity .35s var(--ease)}
.w55-pc__in p{padding-top:14px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92)}
.w55-pc:hover .w55-pc__more,.w55-pc:focus-within .w55-pc__more{grid-template-rows:1fr}
.w55-pc:hover .w55-pc__in,.w55-pc:focus-within .w55-pc__in{opacity:1}
.w55-pc__bar{position:absolute;inset-inline-start:28px;bottom:28px;margin:0;background:var(--p-lt)}
.w55-pc:hover .w55-pc__bar{width:64px}
@media (hover:none){.w55-pc__more{grid-template-rows:1fr}.w55-pc__in{opacity:1}}

/* 10 · questions */
.w55-faq{padding:136px 0}
.w55-faq__list{grid-column:4 / span 8;border-top:1px solid var(--u)}
.w55-faq details{border-bottom:1px solid var(--rule)}
.w55-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;font-family:var(--font-display,"Outfit",sans-serif);font-size:24px;font-weight:600;color:var(--u)}
.w55-faq summary::-webkit-details-marker{display:none}
.w55-faq summary::after{content:"";flex:0 0 18px;height:18px;background:
  linear-gradient(var(--p),var(--p)) center/18px 2px no-repeat,linear-gradient(var(--p),var(--p)) center/2px 18px no-repeat;transition:transform .3s var(--ease)}
.w55-faq details[open] summary::after{transform:rotate(45deg)}
.w55-faq details p{padding:0 0 32px;max-width:680px;font-size:17px;line-height:1.6}

/* 11 · closing band */
.w55-cta{background:var(--u);color:#FFFFFF;padding:120px 0 112px;position:relative;overflow:hidden}
.w55-cta::before{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--grad)}
.w55-cta h2{grid-column:1 / span 8;font-size:clamp(38px,4.6vw,68px);line-height:1;font-weight:700}
.w55-cta p{grid-column:1 / span 6;margin-top:28px !important;font-size:19px;line-height:1.6;color:rgba(255,255,255,.88)}
.w55-cta__act{grid-column:1 / -1;margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.w55-cta .w55-lnk{color:#FFFFFF}.w55-cta .w55-bar{background:var(--p-lt)}
.w55-cta__note{grid-column:1 / -1;margin-top:28px !important;font-size:14px;color:rgba(255,255,255,.7) !important}

/* reduced motion: no pinning, no scroll animation */
@media (prefers-reduced-motion:reduce){
    .w55-story__frame,.w55-story__shade,.w55-story__txt,.w55-story__cap,.w55-rv{animation:none !important;clip-path:none !important;opacity:1 !important;transform:none !important}
  .w55-track-x{scroll-behavior:auto}.w55-bar,.w55-pc img,.w55-pc__more,.w55-pc__in{transition:none}
}

/* tablet */
@media (max-width:1024px){
  .w55-facts dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .w55-out__list{grid-template-columns:1fr 1fr}.w55-out__more{grid-column:1 / -1}
  .w55-people__head{grid-column:1 / -1}.w55-people__area{grid-column:1 / -1}
}
/* phone */
@media (max-width:760px){
  .w55-wrap{padding:0 16px}
  .w55-g{grid-template-columns:minmax(0,1fr);column-gap:0}
  .w55-g>*,.w55-head>*{grid-column:1 / -1 !important}
  .w55-head{display:flex;flex-direction:column;margin-bottom:40px}
  .w55-lined::before{display:none}
  .w55-hero{min-height:82vh}.w55-hero__in{padding-top:96px;padding-bottom:56px}
  .w55-hero__cap{position:static;padding:0 16px 16px;margin-top:-8px !important}
  .w55-facts dl{grid-template-columns:1fr 1fr}
  .w55-intro,.w55-tracks,.w55-out,.w55-faq{padding:88px 0}
  .w55-intro .w55-kicker,.w55-story__txt .w55-kicker{margin-bottom:24px}
  .w55-story__pin{min-height:0}.w55-story__frame{position:relative;width:100%;height:62vh}.w55-story__txt{min-height:0;padding:40px 0 56px}.w55-story__txt .w55-kicker,.w55-story__txt h2,.w55-story__txt p{grid-column:1 / -1}.w55-story__txt p{font-size:17px}.w55-story__cap{inset-inline-end:16px;top:16px}
  .w55-tracks__list,.w55-quotes,.w55-stats,.w55-out__list{grid-template-columns:1fr}
  .w55-track{padding:36px 24px 40px}
  .w55-panel{padding:64px 0}
  .w55-people{padding:88px 0}.w55-people__area{margin-inline-end:-16px}
  .w55-pc{flex-basis:78vw;height:440px}
  .w55-faq summary{font-size:20px}
  .w55-cta{padding:88px 0}
}

/* v54 sets heading colours globally; restate them on the dark surfaces of this page */
main.w55 .w55-hero h1,main.w55 .w55-story__txt h2,main.w55 .w55-cta h2{color:#FFFFFF}
main.w55 .w55-intro h2,main.w55 .w55-head h2,main.w55 .w55-track h3,main.w55 .w55-out__list h3,main.w55 .w55-people__head h2{color:var(--u)}
@media (max-width:760px){main.w55 .w55-hero h1{font-size:44px;line-height:1}[dir=rtl] main.w55 .w55-hero h1{font-size:40px;line-height:1.08}}
