/* AOI Lab — site styles
   White / black, one saturated violet. Type follows hinainc.com:
   Manrope for Latin, Noto Sans JP / SC for CJK. The home hero is the only
   dark, full-bleed moment; everything else stays quiet and white. */

:root {
  /* Neutral ramp (the lilac cast is gone); the only tinted value is --mist,
     the section ground. One saturated violet stays as the brand accent. */
  --ink: #1C1C1E;      /* headings — near-black, not pure black */
  --body: #3A3A3C;     /* body copy */
  --muted: #6E6E73;    /* secondary text */
  --paper: #FAFAFA;    /* page background (was pure white) */
  --mist: #F8F6FA;     /* section ground */
  --line: #E2E2E6;     /* hairlines */
  --violet: #bf00ff;
  --rail: 64px;
  --head: 76px;
  --pad: clamp(20px, 4.4vw, 64px);
  --max: 1440px;
  --font: "Manrope", "Noto Sans JP", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
.lang-zh { --font: "Manrope", "Noto Sans SC", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font-family: var(--font); font-size: 16px; line-height: 1.8;
  font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--violet); color: var(--paper); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
[hidden] { display: none !important; }   /* component display rules must not un-hide */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
main { padding-top: var(--head); }
.has-hero main { padding-top: 0; }
@media (min-width: 1024px) {
  body { padding-right: var(--rail); }
  /* Dark bands run under the (transparent) rail. */
  .bleed { margin-right: calc(-1 * var(--rail)); padding-right: var(--rail); }
}

/* ---------- Type ---------- */
.idx { display: flex; align-items: center; gap: 12px; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.idx::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
h1, h2, h3, h4, .banner, .h2, .a-title, .about-title, .wwd-title,
.cta-copy, .announce-title, .ev-schedule h4, .k-list h3 { color: var(--heading, var(--ink)); }
.dark, .site-footer, .announce-band, .hero { --heading: var(--paper); }
.banner { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(44px, 7vw, 116px); line-height: .96; letter-spacing: -.045em; }
.banner em, .em { font-style: normal; color: var(--violet); }
.h2 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(32px, 4vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
.lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.95; color: var(--muted); max-width: 40em; }
.lead + .lead { margin-top: 1em; }
.dark .lead { color: rgba(250, 250, 250, .7); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn::after { content: "→"; font-family: "Manrope", sans-serif; transition: transform .3s var(--ease); }
.btn:hover { background: var(--violet); color: var(--paper); }
.btn:hover::after { transform: translateX(4px); }
.btn.light { background: var(--paper); color: var(--ink); }
.btn.light:hover { background: var(--violet); color: var(--paper); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.ghost:hover { background: var(--paper); color: var(--ink); box-shadow: none; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; transition: color .25s, gap .25s var(--ease); }
.arrow-link::after { content: "→"; font-family: "Manrope", sans-serif; }
.arrow-link:hover { color: var(--violet); gap: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--head);
  background: rgba(250, 250, 250, .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); transition: background .35s, border-color .35s, color .35s;
}
@media (min-width: 1024px) { .site-header { right: var(--rail); } }
.hd { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.logo { position: relative; display: block; }
.logo img { height: 30px; width: auto; }
.logo .on-dark { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.has-hero .site-header:not(.is-solid) { background: transparent; border-bottom-color: transparent; color: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
.has-hero .site-header:not(.is-solid) .logo .on-dark { opacity: 1; }
.has-hero .site-header:not(.is-solid) .logo .on-light { opacity: 0; }
.has-hero .site-header:not(.is-solid) .gnav .btn { background: var(--paper); color: var(--ink); }
.gnav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.gnav a:not(.btn) { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 600; position: relative; padding: 4px 0; }
.gnav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.gnav a:not(.btn):hover::after, .gnav a[aria-current]::after { transform: scaleX(1); }
.gnav .btn { padding: 12px 20px; font-size: 14px; }
.menu-toggle { display: none; }

/* ---------- Side rail (language) — blends over light and dark ---------- */
.rail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: var(--rail);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0;
  color: var(--paper); mix-blend-mode: difference; border-left: 1px solid rgba(250, 250, 250, .22);
}
.rail-tag { writing-mode: vertical-rl; font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.rail-lang { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-lang a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: "Manrope", "Noto Sans SC", sans-serif; font-size: 12px; font-weight: 700; opacity: .6; transition: opacity .25s, background .25s, color .25s; }
.rail-lang a:hover { opacity: 1; }
.rail-lang a[aria-current] { opacity: 1; background: var(--paper); color: var(--ink); }
.rail-line { width: 1px; height: 36px; background: rgba(250, 250, 250, .3); margin: 6px 0; }
.rail-contact { writing-mode: vertical-rl; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }

@media (max-width: 1023px) {
  .rail { display: none; }
  .gnav {
    position: fixed; inset: var(--head) 0 0 0; z-index: 49; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 16px var(--pad) 40px; background: var(--paper); color: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .3s var(--ease), visibility .3s;
  }
  .gnav a:not(.btn) { font-size: 32px; font-weight: 800; padding: 10px 0; letter-spacing: -.02em; }
  .gnav a:not(.btn)::after { display: none; }
  .gnav .btn { margin-top: 24px; background: var(--ink) !important; color: var(--paper) !important; }
  .m-lang { display: flex; gap: 8px; margin-top: 28px; }
  .m-lang a { font-size: 14px !important; padding: 8px 14px !important; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  .m-lang a[aria-current] { background: var(--ink); color: var(--paper); box-shadow: none; }
  .nav-open .gnav { opacity: 1; visibility: visible; transform: none; }
  .nav-open .site-header { background: var(--paper) !important; color: var(--ink) !important; }
  .nav-open .logo .on-dark { opacity: 0 !important; }
  .nav-open .logo .on-light { opacity: 1 !important; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; }
  .has-hero .site-header:not(.is-solid) .menu-toggle { background: var(--paper); color: var(--ink); }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease), background .3s; }
  .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
  .menu-toggle span::before { top: -6px; }
  .menu-toggle span::after { top: 6px; }
  .nav-open .menu-toggle span { background: transparent; }
  .nav-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
}
@media (min-width: 1024px) { .m-lang { display: none; } }

/* ---------- Hero (home) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; max-height: 1200px; background: #101012; color: var(--paper); overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  /* Dark behind the type on the left, easing off so the photo reads on the right;
     a narrow dark edge on the far right keeps the blended language rail legible. */
  background: linear-gradient(270deg, rgba(12, 12, 13, .6) 0, rgba(12, 12, 13, .6) 64px, rgba(12, 12, 13, 0) 200px),
              linear-gradient(90deg, rgba(12, 12, 13, .86) 0%, rgba(12, 12, 13, .64) 30%, rgba(12, 12, 13, .18) 62%, rgba(12, 12, 13, 0) 100%),
              linear-gradient(0deg, rgba(12, 12, 13, .5) 0%, rgba(12, 12, 13, 0) 32%);
}
@media (max-width: 759px) {
  /* The line runs nearly edge to edge on phones, so shade the whole frame. */
  .hero-shade { background: linear-gradient(0deg, rgba(12, 12, 13, .78) 0%, rgba(12, 12, 13, .45) 55%, rgba(12, 12, 13, .3) 100%); }
}
.hero-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--head) + 24px); padding-bottom: clamp(24px, 4.5vh, 56px); pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-line { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(46px, 8.2vw, 144px); line-height: .98; letter-spacing: -.05em; }
.hero-line > span { display: block; }
.hero-word { position: relative; height: 1.08em; overflow: hidden; }
.hero-word .w { position: absolute; left: 0; top: 0; color: var(--violet); white-space: nowrap; transform: translateY(105%); transition: transform .9s var(--ease); }
.hero-word .w.is-on { transform: none; }
.hero-word .w.is-out { transform: translateY(-105%); }
.hero-desc { position: relative; margin-top: clamp(20px, 3vh, 32px); max-width: 36em; min-height: 3.8em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.9; color: rgba(250, 250, 250, .86); }
.hero-desc .d { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s var(--ease); }
.hero-desc .d.is-on { position: relative; opacity: 1; transform: none; transition-delay: .25s; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(28px, 5vh, 64px); }
.hero-steps { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hero-steps button { appearance: none; border: 0; background: none; padding: 0; color: rgba(250, 250, 250, .5); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: left; cursor: pointer; display: grid; gap: 10px; transition: color .3s; }
.hero-steps button:hover, .hero-steps .is-on { color: var(--paper); }
.hero-steps b { font-family: "Manrope", sans-serif; font-weight: 800; color: var(--violet); margin-right: 8px; }
.bar { display: block; height: 2px; background: rgba(250, 250, 250, .2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--paper); }
.is-on .bar i { animation: bar var(--dur, 6s) linear forwards; }
.hero.is-paused .is-on .bar i { animation: none; width: 100%; }
@keyframes bar { to { width: 100%; } }
@media (max-width: 759px) {
  .hero-foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-steps .lbl { display: none; }
  .hero-foot .btn { align-self: flex-start; }
}

/* ---------- Home sections ---------- */
/* Vertical rhythm — one 8pt-based scale for every band, so section heads sit
   at a consistent distance instead of floating in whitespace. */
.sec { padding: clamp(56px, 6vw, 96px) 0; }
.sec.tight { padding: clamp(40px, 4.5vw, 72px) 0; }
.sec-gray { background: var(--mist); }
.dark { background: var(--ink); color: var(--paper); }
.statement { font-size: clamp(26px, 3.2vw, 48px); line-height: 1.5; font-weight: 700; letter-spacing: -.01em; max-width: 25em; }
.lang-en .statement { letter-spacing: -.025em; line-height: 1.25; }
.statement mark { background: none; color: var(--violet); }
.row-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 4vw, 56px); }

.svc-list { border-top: 1px solid var(--ink); }
.svc-list a {
  display: grid; grid-template-columns: 48px 1fr 32px; gap: 8px 20px; align-items: center;
  padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); transition: background .3s;
}
@media (min-width: 900px) { .svc-list a { grid-template-columns: 64px 1.1fr 1.2fr 160px 32px; gap: 32px; } }
.svc-list .no { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 800; color: var(--violet); }
.svc-list h3 { font-family: "Manrope", sans-serif; font-size: clamp(24px, 2.6vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; transition: color .25s; }
.svc-list h3 small { display: block; margin-top: 8px; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.svc-list p { font-size: 14px; color: var(--muted); grid-column: 2 / 3; }
.svc-list .thumb { display: none; aspect-ratio: 3 / 2; overflow: hidden; }
.svc-list .thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform .8s var(--ease); }
.svc-list .go { font-family: "Manrope", sans-serif; font-size: 22px; justify-self: end; grid-row: 1; grid-column: 3; transition: transform .3s var(--ease), color .25s; }
@media (min-width: 900px) {
  .svc-list p { grid-column: auto; }
  .svc-list .thumb { display: block; }
  .svc-list .go { grid-column: auto; }
}
.svc-list a:hover h3, .svc-list a:hover .go { color: var(--violet); }
.svc-list a:hover .go { transform: translateX(6px); }
.svc-list a:hover .thumb img { transform: scale(1); }

.feature { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: 1.2fr 1fr; } }
.feature-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.feature:hover .feature-media img { transform: scale(1.03); }
.kicker { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.feature h3 { font-family: "Manrope", sans-serif; font-size: clamp(32px, 3.6vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -.04em; margin: 14px 0 18px; }
.feature p { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.stat b { display: block; font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -.04em; }
.stat b small { font-size: .42em; letter-spacing: -.01em; color: var(--muted); }
.stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }

.cta-band { padding: clamp(80px, 10vw, 144px) 0; }
.cta-band .inner { display: grid; gap: 32px; align-items: end; }
@media (min-width: 900px) { .cta-band .inner { grid-template-columns: 1fr auto; } }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-band .lead { margin-top: 20px; }

/* ---------- Sub pages ---------- */
.page-head { padding: clamp(40px, 4.5vw, 72px) 0 clamp(32px, 3.5vw, 56px); }
.page-head .grid { display: grid; gap: 28px; align-items: end; margin-top: 28px; }
@media (min-width: 900px) { .page-head .grid { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.crumbs a:hover { color: var(--violet); }
.crumbs [aria-hidden] { opacity: .5; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.sub-nav a { font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background .25s, color .25s; }
.sub-nav a:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.sec-title { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
@media (min-width: 900px) { .sec-title { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 64px; } }

/* Work — services */
.svc-detail { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .svc-detail { grid-template-columns: 1fr 1fr; }
  .svc-detail:nth-of-type(even) .svc-media { order: 2; }
}
.svc-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail h3 { font-family: "Manrope", sans-serif; font-size: clamp(30px, 3.2vw, 50px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; margin: 14px 0 6px; }
.svc-detail h3 em { font-style: normal; color: var(--violet); }
.svc-name { font-weight: 700; margin-bottom: 18px; }
.svc-detail > div > p { color: var(--muted); }
.dots { margin-top: 22px; display: grid; gap: 10px; }
.dots li { position: relative; padding-left: 22px; font-size: clamp(16px, 1.3vw, 17px); font-weight: 500; }
.dots li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }

/* Work — process */
.process { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .process { grid-template-columns: repeat(3, 1fr); } }
.process li { background: var(--paper); padding: clamp(24px, 2.6vw, 36px); }
.process b { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 800; color: var(--violet); }
.process h4 { margin: 10px 0 8px; font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.process h4 small { display: block; font-family: var(--font); font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.process p { font-size: 14px; color: var(--muted); }

/* Work — pricing */
.pricing { display: grid; gap: 20px; }
@media (min-width: 960px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 40px); border: 1px solid var(--line); background: var(--paper); }
.plan.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan-tag { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.plan h3 { margin-top: 12px; font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.plan-term { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.plan.dark .plan-term, .plan.dark .plan-list li { color: rgba(250, 250, 250, .78); }
.plan-price { margin: 28px 0 4px; font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(36px, 3.2vw, 48px); line-height: 1; letter-spacing: -.04em; }
.plan-price small { font-size: .42em; letter-spacing: 0; margin-left: 4px; }
.plan-note { font-size: 13px; color: var(--muted); min-height: 1.8em; }
.plan.dark .plan-note { color: rgba(250, 250, 250, .6); }
.plan-list { margin: 24px 0 32px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan.dark .plan-list { border-top-color: rgba(250, 250, 250, .2); }
.plan-list li { position: relative; padding-left: 26px; font-size: 15px; }
.plan-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--violet); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.dark .btn { background: var(--paper); color: var(--ink); }
.plan.dark .btn:hover { background: var(--violet); color: var(--paper); }

/* Work — individuals */
.method { border-top: 1px solid var(--ink); }
.method li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.method .step { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 800; color: var(--violet); padding-top: 6px; }
.method h4 { font-family: "Manrope", sans-serif; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.method p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.two { display: grid; gap: clamp(36px, 5vw, 80px); }
@media (min-width: 960px) { .two { grid-template-columns: 1fr 1fr; align-items: start; } }

/* About */
.about-title { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(46px, 7.6vw, 128px); line-height: .98; letter-spacing: -.05em; }
.about-title b { color: var(--violet); }
.quote { font-family: "Manrope", var(--font); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.4; font-weight: 700; letter-spacing: -.015em; }
.team { display: grid; gap: 20px; }
@media (min-width: 900px) { .team { grid-template-columns: repeat(3, 1fr); } }
.team li { padding: clamp(28px, 2.6vw, 40px); background: var(--paper); border: 1px solid var(--line); }
.team b { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--violet); text-transform: uppercase; }
.team h3 { margin: 12px 0 12px; font-family: "Manrope", sans-serif; font-size: clamp(26px, 2.4vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.team p { color: var(--muted); font-size: 15px; }
.why { display: grid; gap: 1px; background: rgba(250, 250, 250, .16); margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .why { grid-template-columns: 1fr 1fr; } }
.why li { background: var(--ink); padding: clamp(28px, 3vw, 48px) 0; }
@media (min-width: 900px) { .why li { padding: clamp(28px, 3vw, 48px); } .why li:first-child { padding-left: 0; } }
.why h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1.4; margin: 14px 0 12px; }
.why p { color: rgba(250, 250, 250, .7); }
.supporters { display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: center; }
.supporters img { height: 30px; width: auto; }

/* Knowledge */
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics li { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.topics li i { font-style: normal; color: var(--violet); }
.post { display: grid; gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .post { grid-template-columns: 1.1fr 1fr; } }
.post-media { aspect-ratio: 16 / 10; overflow: hidden; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post:hover .post-media img { transform: scale(1.03); }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 600; color: var(--muted); }
.post-meta .hash { color: var(--ink); }
.post h3 { margin: 14px 0 12px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; line-height: 1.4; transition: color .25s; }
.post:hover h3 { color: var(--violet); }
.post p { color: var(--muted); }
.note { margin-top: 40px; font-size: 14px; color: var(--muted); }

/* Article */
.a-head { padding: clamp(36px, 4.5vw, 68px) 0 clamp(28px, 3vw, 44px); }
.a-title { font-size: clamp(32px, 4.4vw, 68px); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; max-width: 18em; margin: 16px 0 24px; }
.lang-en .a-title { font-family: "Manrope", sans-serif; letter-spacing: -.035em; line-height: 1.08; }
.a-cover { aspect-ratio: 16 / 9; overflow: hidden; }
.a-cover img { width: 100%; height: 100%; object-fit: cover; }
.a-sec { display: grid; gap: 20px; padding: clamp(44px, 5vw, 76px) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .a-sec { grid-template-columns: 240px 1fr; gap: 56px; } .a-sec > .idx { position: sticky; top: calc(var(--head) + 24px); align-self: start; } }
.a-body { max-width: 820px; }
.a-body h2 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 800; line-height: 1.4; margin-bottom: 20px; }
.lang-en .a-body h2 { font-family: "Manrope", sans-serif; letter-spacing: -.025em; line-height: 1.2; }
.a-body > p { color: var(--body); font-size: 17px; line-height: 2; }
.a-body > p + p { margin-top: 1.1em; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 32px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.facts div { padding: 18px 16px 18px 0; }
.facts dt { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.facts dd { margin-top: 4px; font-weight: 800; font-size: 17px; }
.flow { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: 8px; }
.flow li { display: grid; gap: 20px; }
@media (min-width: 760px) { .flow li { grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; } }
.flow figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.flow img { width: 100%; height: 100%; object-fit: cover; }
.flow time { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 800; color: var(--violet); letter-spacing: .06em; }
.flow h3 { margin: 8px 0 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; line-height: 1.4; }
.flow p { color: var(--muted); font-size: 15px; }
.score { display: grid; gap: 28px; }
@media (min-width: 760px) { .score { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.score-big b { display: block; font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(88px, 11vw, 168px); line-height: .9; letter-spacing: -.06em; color: var(--violet); }
.score-big span { display: block; margin-top: 12px; font-weight: 700; }
.score-big small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.bars { display: grid; gap: 18px; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 14px; font-weight: 700; }
.bars .track { grid-column: 1 / -1; height: 6px; background: var(--mist); }
.bars .track i { display: block; height: 100%; background: var(--ink); }
.bars li:first-child .track i { background: var(--violet); }
.bars em { font-style: normal; font-family: "Manrope", sans-serif; font-weight: 800; }
.quotes { margin-top: clamp(40px, 5vw, 64px); columns: 2 300px; column-gap: 20px; }
.quotes blockquote { break-inside: avoid; margin: 0 0 20px; padding: 28px; background: var(--mist); }
.quotes blockquote p { font-size: 16px; line-height: 1.85; font-weight: 600; }
.quotes blockquote p::before { content: "“"; display: block; font-family: "Manrope", sans-serif; font-size: 40px; line-height: .6; color: var(--violet); margin-bottom: 8px; }
.quotes .tr { margin-top: 10px; font-size: 13px; line-height: 1.7; font-weight: 400; color: var(--muted); }
.quotes .tr::before { display: none; }
.quotes footer { margin-top: 14px; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Closing banner + footer ---------- */
.closing { padding: clamp(52px, 5.5vw, 80px) 0 clamp(44px, 4.5vw, 68px); }
.site-footer { background: var(--ink); color: var(--paper); padding-bottom: 32px; }
.ft-top { display: grid; gap: 40px; padding-top: 48px; border-top: 1px solid rgba(250, 250, 250, .16); }
@media (min-width: 900px) { .ft-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.ft-logo img { height: 28px; width: auto; }
.ft-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(250, 250, 250, .5); margin-bottom: 16px; }
.ft-col li { margin-bottom: 8px; }
.ft-col a { font-family: "Manrope", sans-serif; font-weight: 600; transition: color .25s; }
.ft-col a:hover { color: var(--violet); }
.ft-col img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.ft-bottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(250, 250, 250, .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: "Manrope", sans-serif; font-size: 12px; color: rgba(250, 250, 250, .56); letter-spacing: .04em; }
.ft-bottom b { color: var(--violet); }

/* ---------- Line breaking ----------
   Break Japanese headings at phrase boundaries (no "デザイ／ナー") and
   balance ragged lines; browsers without support fall back gracefully. */
h1, h2, h3, h4, .statement, .quote, .lead, .wwd-text { word-break: auto-phrase; }
h1, h2, h3, .quote { text-wrap: balance; }

/* Home — what we do */
.wwd-title { margin-top: 32px; font-size: clamp(32px, 4.4vw, 68px); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.wwd-title strong { font-weight: 900; }
.lang-en .wwd-title { font-family: "Manrope", sans-serif; letter-spacing: -.035em; line-height: 1.12; }
.wwd-text { margin-top: 32px; max-width: 38em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.95; }
.wwd-text strong { font-weight: 800; background: linear-gradient(transparent 64%, rgba(191, 0, 255, .22) 64%); }

/* About — one-line team title, calmer card type */
.one-line { font-size: clamp(28px, 3.6vw, 54px); }
@media (min-width: 900px) { .one-line { white-space: nowrap; } }
.team h3 { font-family: var(--font); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; letter-spacing: 0; }
.lang-en .team h3 { font-family: "Manrope", sans-serif; letter-spacing: -.02em; line-height: 1.2; }

/* Work — filters, type intro, case grid */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 20px 0; margin-bottom: clamp(36px, 4vw, 56px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .chips + .chips { padding-left: 28px; border-left: 1px solid var(--line); } }
.chips button {
  font: inherit; font-family: "Manrope", var(--font); font-size: 14px; font-weight: 700; line-height: 1;
  padding: 15px 22px; border: 0; border-radius: 999px; cursor: pointer;   /* >=44px tap target */
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s, box-shadow .25s;
}
.chips button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.type-intro { display: grid; gap: 24px; padding-bottom: clamp(36px, 4vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .type-intro { grid-template-columns: 1fr 1.2fr; gap: 64px; } }
.type-intro .svc-name { margin-top: 12px; }
.work-grid { display: grid; gap: 56px 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.work-card[hidden] { display: none; }
.work-card .post-media { aspect-ratio: 4 / 3; }
.work-card .post-meta { margin-top: 18px; }
.work-card h3 { margin: 12px 0 8px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; line-height: 1.45; transition: color .25s; }
.work-card:hover h3 { color: var(--violet); }
.work-card p { font-size: 14px; color: var(--muted); }
.work-card:hover .post-media img { transform: scale(1.03); }
.empty { padding: 40px 0; color: var(--muted); }

/* Section shorthands (`padding: X 0`) would otherwise reset the rail gutter. */
@media (min-width: 1024px) { .bleed.bleed { padding-right: var(--rail); } }

/* Home — the four focuses, as a filter above the work section */
#work .chips { gap: 10px; margin: 28px 0 clamp(40px, 4.5vw, 64px); }
#work .type-intro { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(40px, 4.5vw, 64px); }
#work .type-intro h3 { font-size: clamp(28px, 3vw, 44px); }

/* About — the concept, English and local wording at one size */
.concept { display: grid; gap: 22px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .concept { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); } }
.concept p { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.6; font-weight: 700; letter-spacing: -.015em; max-width: 26em; }
.lang-en .concept p, .concept-en { font-family: "Manrope", var(--font); letter-spacing: -.025em; line-height: 1.45; }
.concept-loc { color: var(--muted); }

/* Home — knowledge list: text only, no thumbnails */
.k-list { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--ink); }
.k-list li { border-bottom: 1px solid var(--line); }
.k-list a { display: block; padding: clamp(24px, 2.6vw, 34px) 0; transition: color .25s; }
.k-meta { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.k-list h3 { margin: 12px 0 10px; font-size: clamp(21px, 2vw, 29px); font-weight: 800; line-height: 1.4; transition: color .25s; }
.k-list a:hover h3 { color: var(--violet); }
.k-list p { color: var(--muted); max-width: 46em; }

/* About — why it matters, now on the light band with the team it follows from */
.why-head { display: grid; gap: 18px; max-width: 34em; margin-top: clamp(48px, 5.5vw, 80px); }
.why-head .lead { margin: 0; }
.why { display: grid; gap: 0; background: none; margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .why { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 88px); } }
.why li { background: none; padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .why li { padding: clamp(28px, 3vw, 40px) 0; } .why li:first-child { padding-left: 0; } }
.why .kicker { color: var(--violet); }
.why h3 { font-size: clamp(21px, 1.9vw, 28px); font-weight: 800; line-height: 1.45; margin: 14px 0 12px; }
.why p { color: var(--muted); font-size: 15px; }

/* Closing — one quiet brand line, then a single large tappable CTA */
.closing-line { font-family: "Manrope", sans-serif; font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: rgba(255, 255, 255, .6); margin-bottom: clamp(22px, 2.4vw, 32px); }
.closing-line em { font-style: normal; color: var(--violet); }
.cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 3.2vw, 46px); border-radius: 24px; background: var(--paper); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.cta-card:hover { background: var(--violet); color: var(--paper); --heading: var(--paper); transform: translateY(-2px); }
.cta-text { display: grid; gap: 10px; }
.cta-copy { font-family: "Manrope", var(--font); font-size: clamp(21px, 2.4vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.cta-sub { font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; opacity: .64; }
.cta-go {
  flex: none; display: grid; place-items: center; width: clamp(54px, 5vw, 68px); height: clamp(54px, 5vw, 68px);
  border-radius: 50%; background: var(--ink); color: var(--paper); font-family: "Manrope", sans-serif; font-size: 22px;
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.cta-card:hover .cta-go { background: var(--paper); color: var(--violet); transform: translateX(4px); }
@media (max-width: 759px) { .cta-card { flex-direction: column; align-items: flex-start; gap: 26px; } }

/* ---------- Home — next-workshop announcement ---------- */

/* ---------- Event page ---------- */
.ev-split { display: grid; gap: clamp(24px, 3vw, 56px); }
@media (min-width: 900px) { .ev-split { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.ev-outcomes, .ev-prep { display: grid; gap: 0; margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ink); }
.ev-outcomes li, .ev-prep li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: baseline; padding: clamp(18px, 2vw, 24px) 0; border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; }
.ev-outcomes .no, .ev-prep .no, .ev-schedule .no { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; color: var(--violet); }
.ev-prep b { display: block; font-size: clamp(16px, 1.4vw, 19px); }
.ev-prep p { margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--muted); }
.ev-schedule { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--ink); }
.ev-schedule li { display: grid; grid-template-columns: 40px 1fr; gap: 6px 14px; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .ev-schedule li { grid-template-columns: 44px 148px 1fr; gap: 24px; align-items: baseline; } }
/* Below 760px the row drops to two columns (40px 1fr) but the item still has
   three children, so the text block wrapped onto a second row and landed in
   the 40px number column — every title broke to one character per line. Give
   it the whole row. */
@media (max-width: 759px) { .ev-schedule li > div { grid-column: 1 / -1; margin-top: 2px; } }
.ev-schedule time { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.ev-schedule h4 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; line-height: 1.4; }
.ev-schedule p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.ev-guides { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 3vw, 44px); }
@media (min-width: 760px) { .ev-guides { grid-template-columns: 1fr 1fr; } }
.ev-guides article { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
.ev-guides .portrait { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--mist); }
.ev-guides .portrait img { width: 100%; height: 100%; object-fit: cover; }
.ev-guides h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; }
.ev-guides .accent { display: block; margin: 6px 0 8px; font-size: 13px; font-weight: 700; color: var(--violet); }
.ev-guides p { font-size: 14px; color: var(--muted); }
.ev-faq { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--ink); max-width: 56em; }
.ev-faq details { border-bottom: 1px solid var(--line); }
.ev-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2vw, 24px) 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; cursor: pointer; list-style: none; }
.ev-faq summary::-webkit-details-marker { display: none; }
.ev-faq summary::after { content: "+"; font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 700; color: var(--violet); flex: none; }
.ev-faq details[open] summary::after { content: "−"; }
.ev-faq details > p { padding-bottom: clamp(18px, 2vw, 24px); color: var(--muted); max-width: 46em; }

.ev-pay { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--ink); max-width: 720px; }
.ev-pay h3 { font-family: "Manrope", var(--font); font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.pay-pending { font-size: 15px; color: var(--muted); }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-word .w, .hero-desc .d { transition: none; }
  .is-on .bar i { animation: none; width: 100%; }
}

/* A light card sitting inside a dark band must reset --heading, or the
   band's light heading colour inherits into it and the title vanishes. */
.cta-card { --heading: var(--ink); }

/* Three guides now, so the row goes to three columns on wide screens
   (two left an orphan card on its own line). */
@media (min-width: 1000px) { .ev-guides { grid-template-columns: repeat(3, 1fr); } }


/* ===== Home: the announcement is now a long gradient bar button ============= */
/* The band no longer carries the dark ground — the button itself is the
   coloured object, so it reads as pressable rather than as a section. */
/* The date reads at the same size as the title, as asked. */

/* ===== Footer: text colour as it was, and it does not shift on hover ======== */
.site-footer { color: #fff; }
.site-footer .ft-col h4 { color: rgba(255, 255, 255, .5); }
.site-footer .ft-col a { color: #fff; transition: none; }
.site-footer .ft-col a:hover { color: #fff; }
.site-footer .ft-bottom { color: rgba(255, 255, 255, .56); }



/* ===== Event hero — full-screen gradient, centred headline ================
   Fills the first screen. Electric blue and indigo at the top, violet and
   magenta below, all heavily diffused so no stop reads as an edge. The
   headline sits at the optical centre; the event facts run along the foot. */
.ev-head {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex;
  padding: calc(var(--head) + clamp(18px, 3vh, 40px)) 0 clamp(56px, 7vh, 68px);
  color: var(--paper); --heading: var(--paper);
}
.ev-head::before {
  content: ""; position: absolute; inset: -14%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 52% at 16% 10%, rgba(98, 114, 226, .46) 0%, rgba(98, 114, 226, 0) 68%),
    radial-gradient(ellipse 68% 60% at 86% 16%, rgba(154, 94, 250, .96) 0%, rgba(154, 94, 250, 0) 74%),
    radial-gradient(ellipse 80% 68% at 76% 102%, rgba(162, 86, 198, .46) 0%, rgba(162, 86, 198, 0) 82%),
    radial-gradient(ellipse 62% 56% at 6% 102%, rgba(120, 104, 210, .38) 0%, rgba(120, 104, 210, 0) 78%),
    linear-gradient(152deg, #3A3480 0%, #443596 26%, #4E3B9E 52%, #56399C 76%, #5C3D96 100%);
  filter: blur(52px);
}
.ev-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px 300px;
  opacity: .5; mix-blend-mode: overlay;
}
.ev-hero { display: flex; flex-direction: column; width: 100%; }
.ev-hero-main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(12px, 1.8vh, 24px);
}
.ev-eyebrow {
  font-family: "Manrope", sans-serif; font-size: clamp(10px, .9vw, 12px); font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(250, 250, 250, .80);
}
.ev-title {
  font-family: "Manrope", sans-serif; font-weight: 800; color: var(--paper);
  font-size: clamp(40px, 7vw, 104px); line-height: .98; letter-spacing: -.045em;
}
.ev-title em { font-style: normal; color: var(--violet); }
.ev-tagline {
  margin: 0; max-width: 34em; font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(15px, 1.4vw, 20px); line-height: 1.65; color: rgba(250, 250, 250, .88);
}
.ev-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 26px; margin-top: clamp(4px, 1.2vh, 14px);
}
.ev-head .btn { background: var(--paper); color: var(--ink); }
.ev-head .btn:hover { background: var(--violet); color: var(--paper); }
.ev-head .arrow-link { color: rgba(250, 250, 250, .9); }
.ev-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: clamp(10px, 1.6vw, 26px); margin-top: clamp(24px, 4vh, 56px);
  padding-top: clamp(14px, 2.2vh, 24px); border-top: 1px solid rgba(250, 250, 250, .22);
}
.ev-info dt {
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(250, 250, 250, .64);
}
.ev-info dd { margin-top: 5px; font-size: clamp(13px, 1vw, 16px); font-weight: 700; color: var(--paper); }
@media (max-height: 680px) {
  .ev-title { font-size: clamp(34px, 5.4vw, 64px); }
  .ev-hero-main { gap: 10px; }
}

/* ===== Home — next-workshop bar =========================================
   One gradient pill, wholly clickable. The title carries the weight; the
   date steps back into the eyebrow. Arrow is a centred SVG, inset from the
   edge so the pill reads as a button rather than a full-width band. */
.announce-band { background: var(--paper); padding: clamp(14px, 1.8vw, 24px) 0; }
.announce {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 36px);
  padding: clamp(15px, 1.8vw, 23px) clamp(14px, 1.5vw, 20px) clamp(15px, 1.8vw, 23px) clamp(18px, 2.1vw, 28px);
  border-radius: 18px; color: var(--paper);
  background: linear-gradient(96deg, #63009F 0%, #9200C6 52%, #A835CE 100%);
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.announce:hover {
  background: linear-gradient(96deg, #4A0077 0%, #6B008F 52%, #7C2897 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(191, 0, 255, .26);
}
.announce-body { display: grid; gap: 5px; min-width: 0; }
.announce-eyebrow {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(250, 250, 250, .72);
}
.announce-title {
  font-family: "Manrope", var(--font); font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--paper);
}
.announce-meta { font-size: 13px; color: rgba(250, 250, 250, .78); }
.announce-go {
  flex: none; display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.announce-go svg { display: block; }
.announce:hover .announce-go { background: var(--paper); color: var(--violet); transform: translateX(5px); }
@media (max-width: 759px) {
  .announce { flex-direction: column; align-items: flex-start; gap: 16px; border-radius: 16px; }
}

/* The closing CTA keeps the palette it shipped with on aoilab.online: a pure
   white card on true near-black. Scoped by redefining the tokens on the band,
   so every rule inside resolves to the live values without being rewritten.
   This is the one place on the site that uses pure white. */
.closing {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --muted: #5e5e5e;
  background: #0a0a0a;
}

/* Workshop application details */
.application-details { display: grid; gap: 10px; margin: 28px 0; }
.application-details > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px; }
.application-details dt { font-weight: 700; color: var(--ink); }
.application-details dd { margin: 0; }

.detail-icon { display: block; margin-top: .25em; flex-shrink: 0; }

/* ===== Event — persistent action bar =====================================
   Date, venue and the apply button stay within reach at any scroll depth, so
   the page no longer needs a separate application section at its foot. It
   stays hidden while the hero — which carries the same call to action — is
   still on screen. Without JS it simply sits there, visible from the start. */
.ev-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(28, 28, 30, .93); color: var(--paper);
  border-top: 1px solid rgba(250, 250, 250, .14);
  padding-bottom: env(safe-area-inset-bottom);
}
@supports (backdrop-filter: blur(1px)) {
  .ev-bar { background: rgba(28, 28, 30, .82); backdrop-filter: blur(16px) saturate(140%); }
}
.js .ev-bar { transform: translateY(100%); visibility: hidden; transition: transform .4s var(--ease), visibility .4s; }
.js .ev-bar.is-on { transform: none; visibility: visible; }
@media (min-width: 1024px) { .ev-bar { right: var(--rail); } }
.ev-bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 12px var(--pad);
}
.ev-bar-facts { display: flex; flex-wrap: wrap; gap: 2px 24px; min-width: 0; }
.ev-bar-fact { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.ev-bar-fact .detail-icon { margin-top: 0; opacity: .72; }
.ev-bar .btn { flex: none; padding: 12px 24px; font-size: 14px; background: var(--paper); color: var(--ink); }
.ev-bar .btn:hover { background: var(--violet); color: var(--paper); }
/* The bar floats over the page, so the foot of the document needs room. */
.has-evbar { padding-bottom: 76px; }
@media (max-width: 559px) {
  .ev-bar-in { gap: 12px; padding: 10px var(--pad); }
  .ev-bar-facts { flex-direction: column; gap: 1px; }
  .ev-bar-fact { font-size: 12.5px; gap: 6px; }
  .ev-bar-fact .detail-icon { width: 16px; height: 16px; }
  .ev-bar .btn { padding: 11px 18px; font-size: 13px; }
  .has-evbar { padding-bottom: 88px; }
  /* The centred hero left a wide void between the buttons and the fact row. */
  .ev-info { margin-top: clamp(18px, 2.4vh, 32px); }
}