/*
  ONDO website — public pages (all pages share this file)
  Design rules: site/docs/design-hp.md / docs/11-hp-renewal-plan.md (D18, D20, D21, 10/21 night)
  Order: 1 tokens  2 base  3 parts (titles, buttons, link rows, photos)  4 header & menu  5 top page
         6 lower pages  7 contact & footer  8 motion  9 screen sizes
  Colors, fonts and sizes are tokens in :root. Change a token instead of a single place.
  Web fonts: Saira (Latin, below) and Murecho ExtraBold (Japanese headings, assets/css/fonts.css), self-hosted
*/

/* ---------- 1. tokens ---------- */
/* fonts:latin (Saira, written by site/tools/hp-fonts.mjs) */
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../fonts/saira/700i/latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonts/saira/400-700/latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* /fonts:latin */

:root {
  --ink: #0b1117;        /* ONDO black (logo) */
  --dark: #12181d;       /* dark sections, menu, footer */
  --dark-soft: #2b353d;  /* the about section: a charcoal from the same blue-gray family as --base (11/06) */
  --base: #33404a;       /* text */
  --gray: #66717b;       /* labels (4.5:1 on white and on --paper-2) */
  --line: #dde3e6;
  --paper: #ffffff;
  --paper-2: #f5f8f8;    /* light band */
  --hover: #edf3f3;      /* row hover */
  --mint: #1ab2a5;       /* ONDO mint (logo tagline) */
  --mint-text: #0f9a8d;  /* mint for large text (3:1 or more on white) */
  --mint-deep: #0d7a71;  /* mint for small text (4.5:1 or more) */
  --heat: #ff4d4d;       /* one spot per screen */
  --on-dark: #e8eef0;
  --on-dark-gray: #9ba7af;
  --on-dark-line: rgba(255, 255, 255, .16);

  /* fonts (10/21 night, "fonts that suit esports"): Latin = Saira (titles in Bold Italic, text and numbers upright),
     Japanese headings = Murecho ExtraBold (web font, read after the first view on a first visit), Japanese text = the device font */
  --font: "Saira", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
  --font-head: "Saira", "Murecho", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-en: "Saira", "Arial Narrow", sans-serif;

  --gutter: 20px;
  --header-h: 60px;
  --radius: 12px;
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { margin: 0; background: var(--paper); color: var(--base); font-family: var(--font); font-weight: 400; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: anywhere; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; font-size: inherit; line-height: 1.5; }
/* tidy line breaks: headings are balanced, paragraphs avoid a lonely last line */
h1, h2, h3, h4 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
/* English display type (decoration, usually aria-hidden) */
.c-title__en, .page-hero__en, .link-row__en, .service__en, .contact-aside__track, .notfound__code, .block__aside .en, .values .en, .svc__body .en { font-family: var(--font-en); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
h1, h2, h3, h4, p, dt, dd, li { word-break: auto-phrase; line-break: strict; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 3px; border-radius: 4px; }
.is-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--mint); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-right { width: 100%; margin-left: auto; padding-left: var(--gutter); }
.ml-line { display: block; }
.ml-gap { display: block; height: .9em; }

/* ---------- 3. parts ---------- */
/* section title: English (decoration, aria-hidden) above the Japanese title */
.c-title { display: flex; flex-direction: column; align-items: flex-start; }
.c-title__en { font-size: clamp(36px, 8vw, 54px); line-height: 1; color: var(--base); }
.c-title--md .c-title__en { font-size: clamp(40px, 8.6vw, 70px); }
.c-title--lg .c-title__en { font-size: clamp(42px, 9.4vw, 84px); }
.c-title__ja { margin-top: .6rem; font-size: .875rem; line-height: 1.3; color: var(--gray); }
.is-dark .c-title__en { color: #fff; }
.is-dark .c-title__ja { color: var(--on-dark-gray); }

.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--heat); }
.caption { margin-top: 12px; font-size: .6875rem; line-height: 1.6; color: var(--gray); }
.is-dark .caption { color: var(--on-dark-gray); }
.icon-arrow { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* text that rolls up on hover (the copy below is a text-shadow, so screen readers read it once) */
.roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.6; }
.roll > span { display: block; text-shadow: 0 1.6em currentColor; transition: translate .5s var(--ease-out-expo); }
a:hover .roll > span, button:hover .roll > span { translate: 0 -1.6em; }

/* button: outline pill with an arrow, fills with dark on hover */
.btn { position: relative; display: inline-flex; align-items: center; gap: 1.6rem; min-height: 46px; padding: .7rem 1.4rem .7rem 1.7rem; border: 1px solid var(--base); border-radius: 30px; background: transparent; color: var(--base); font-size: .875rem; font-weight: 400; line-height: 1.4; white-space: nowrap; cursor: pointer; isolation: isolate; transition: color .5s var(--ease-out-expo), border-color .5s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--base); opacity: 0; scale: .9; transition: opacity .3s var(--ease-out-cubic), scale .3s var(--ease-out-cubic); }
.btn:hover { color: #fff; }
.btn:hover::before { opacity: 1; scale: 1; }
.btn__label { display: inline-block; overflow: hidden; vertical-align: top; }
.btn__label > span { display: block; text-shadow: 0 1.4em currentColor; transition: translate .5s var(--ease-out-expo); }
.btn:hover .btn__label > span { translate: 0 -1.4em; }
.btn .icon-arrow { flex: none; transition: translate .3s var(--ease-out-expo); }
.btn:hover .icon-arrow { translate: 3px 0; }
.btn--back { padding: .7rem 1.7rem .7rem 1.4rem; }
.btn--back:hover .icon-arrow { translate: -3px 0; }
.is-dark .btn, .site-footer .btn, .btn--light { border-color: #fff; color: #fff; }
.is-dark .btn::before, .btn--light::before { background: #fff; }
.is-dark .btn:hover, .btn--light:hover { color: var(--dark); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.text-link .icon-arrow { transition: translate .3s var(--ease-out-expo); }
.text-link:hover .icon-arrow { translate: 3px 0; }

/* link row: big English + small Japanese, thin lines, the background wipes in on hover */
.link-row { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: clamp(20px, 2.8vw, 40px) 48px clamp(20px, 2.8vw, 40px) 0; border-top: 1px solid var(--line); color: var(--base); isolation: isolate; }
.link-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hover); scale: 1 0; transform-origin: top; transition: scale .5s var(--ease-out-quart); }
.link-row:hover::before { scale: 1 1; transform-origin: bottom; }
.link-row__en { font-size: clamp(26px, 4.6vw, 46px); line-height: 1.05; }
.link-row__ja { font-size: .8125rem; line-height: 1.3; color: var(--gray); }
.link-row .icon-arrow { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--gray); transition: right .3s var(--ease-out-expo), color .3s; }
.link-row:hover { color: var(--mint-deep); }
.link-row:hover .icon-arrow { right: 0; color: var(--mint-deep); }

/* facts (date, venue) */
.facts { display: grid; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.facts dt { color: var(--gray); }

/* photos: rounded, a slow zoom on hover when inside a link */
.photo, .pickup__media, .service__photo picture, .about__image, .company-links__images { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.photo img, .pickup__media img, .service__photo img, noscript img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out-quart); }
a:hover > picture img, a:hover > .photo img { scale: 1.04; }
html:not(.js) img[data-lazy-src] { display: none; }
noscript img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4. header & menu ---------- */
/* a plain white bar (10/21 night "a usual header"): logo, menu links, language, contact button.
   Under 1024px the links move into the menu */
.site-header { position: sticky; top: 0; z-index: 100; width: 100%; height: var(--header-h); background: var(--paper); color: var(--ink); view-transition-name: site-header; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .4s; }
.site-header.is-scrolled::after { opacity: 1; }
.site-header__inner { display: flex; align-items: center; gap: 20px; height: 100%; padding-inline: var(--gutter) 6px; }
.site-header__logo { display: block; flex: none; width: 100px; }
.site-header__logo img { width: 100%; }
.site-nav { display: none; margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); font-family: var(--font-head); font-weight: 800; font-size: .9375rem; }
.site-nav a { position: relative; display: block; padding: 10px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--mint); scale: 0 1; transform-origin: left; transition: scale .3s var(--ease-out-cubic); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { scale: 1 1; }
.site-nav__store { display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-en); letter-spacing: .02em; }
.site-nav__store .icon-arrow { flex: none; }
/* ONLINE STORE: slightly stronger than the other links (mint text, outline, filled on hover) */
.site-nav .site-nav__store { padding: 7px 16px; border: 1.5px solid var(--mint); border-radius: 999px; color: var(--mint-deep); transition: background-color .3s, color .3s, border-color .3s; }
.site-nav .site-nav__store::after { display: none; }
.site-nav .site-nav__store:hover { background: var(--mint-deep); border-color: var(--mint-deep); color: #fff; }
.site-header__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* language: JP / EN (site.js; hidden without a script because the English text is put in by the script) */
.lang-switch { display: flex; align-items: center; font-family: var(--font-en); font-weight: 600; font-size: .8125rem; }
html:not(.js) .lang-switch { display: none; }
.lang-switch button { position: relative; min-width: 38px; min-height: 40px; padding: 0 6px; border: 0; background: none; color: var(--gray); cursor: pointer; }
.lang-switch button + button::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; translate: 0 -50%; background: var(--line); }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { color: var(--ink); text-decoration: underline 2px var(--mint); text-underline-offset: 6px; }
.site-header__cta { display: none; align-items: center; min-height: 44px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .875rem; transition: background-color .3s; }
.site-header__cta:hover, .site-header__cta[aria-current="page"] { background: var(--mint-deep); }
/* menu button: three clear bars and a label */
.menu-button { display: grid; justify-items: center; align-content: center; gap: 5px; flex: none; width: 56px; height: 56px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.menu-button__bars { position: relative; width: 24px; height: 14px; }
.menu-button__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: rotate .4s var(--ease-out-cubic), top .4s var(--ease-out-cubic), opacity .2s; }
.menu-button__bars span:nth-child(1) { top: 0; }
.menu-button__bars span:nth-child(2) { top: 6px; }
.menu-button__bars span:nth-child(3) { top: 12px; }
.menu-button__label { font-family: var(--font-head); font-size: .625rem; font-weight: 800; line-height: 1; }
.menu-button.is-close .menu-button__bars span:nth-child(1) { top: 6px; rotate: 45deg; }
.menu-button.is-close .menu-button__bars span:nth-child(2) { opacity: 0; }
.menu-button.is-close .menu-button__bars span:nth-child(3) { top: 6px; rotate: -45deg; }

/* menu (<dialog>, under 1024px): a white page with a plain list and large, readable labels */
.drawer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; background: var(--paper); color: var(--ink); opacity: 0; translate: 0 -10px; transition: opacity .3s var(--ease-out-cubic), translate .3s var(--ease-out-cubic), display .3s allow-discrete, overlay .3s allow-discrete; }
.drawer[open] { opacity: 1; translate: 0 0; }
@starting-style { .drawer[open] { opacity: 0; translate: 0 -10px; } }
.drawer::backdrop { background: transparent; }
html:has(.drawer[open]) { overflow: hidden; }
.drawer__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--gutter) 6px; background: var(--paper); border-bottom: 1px solid var(--line); }
.drawer__logo { display: block; width: 100px; }
.drawer__logo img { width: 100%; }
.drawer__body { display: grid; gap: 28px; width: 100%; max-width: 640px; padding: 8px var(--gutter) 56px; }
.drawer__nav > li { border-bottom: 1px solid var(--line); }
.drawer__nav > li > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; font-family: var(--font-head); font-weight: 800; font-size: 1.125rem; line-height: 1.4; }
.drawer__nav a:hover, .drawer__nav a[aria-current="page"] { color: var(--mint-deep); }
/* ONLINE STORE in the menu: same outlined mint pill as the header link */
.drawer__nav > li:has(> a[data-config-href="storeUrl"]) { border-bottom: 0; padding-block: 18px 6px; }
.drawer__nav > li > a[data-config-href="storeUrl"] { min-height: 54px; padding-inline: 22px; border: 1.5px solid var(--mint); border-radius: 999px; color: var(--mint-deep); transition: background-color .3s, color .3s, border-color .3s; }
.drawer__nav > li > a[data-config-href="storeUrl"]:hover { background: var(--mint-deep); border-color: var(--mint-deep); color: #fff; }
.icon-chevron { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--gray); }
.drawer__sub { display: grid; margin: -4px 0 16px 2px; padding-left: 16px; border-left: 2px solid var(--line); }
.drawer__sub a { display: block; padding: 8px 0; font-size: .9375rem; color: var(--base); }
.drawer__cta { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1rem; }
.drawer__cta:hover, .drawer__cta[aria-current="page"] { background: var(--mint-deep); }
.drawer__sns { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .875rem; color: var(--base); }
.drawer__sns a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.drawer__sns a:hover { color: var(--mint-deep); }

/* ---------- 5. top page ---------- */
/* opening: html.has-intro is set by the short script in <head> (first visit in this tab, motion allowed). The tag line scales with the viewport and stays on one line (nowrap: the letter-spacing animation would otherwise wrap it to two lines and back); the curtain clips its wide start so phones never scroll sideways; padding-left offsets the trailing letter-spacing so the line looks centered */
.intro { display: none; }
.has-intro .intro { position: fixed; inset: 0; z-index: 300; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 26px; background: var(--ink); pointer-events: none; animation: intro-lift .9s cubic-bezier(.77, 0, .18, 1) 2s forwards; }
.intro__logo { width: min(68vw, 440px); height: auto; overflow: visible; }
.intro__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 1.2s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.intro__fill { opacity: 0; animation: intro-fill .7s var(--ease-out-cubic) 1.05s forwards; }
.intro__tag { margin: 0; padding-left: .3em; white-space: nowrap; font-family: var(--font-en); font-style: italic; font-weight: 600; font-size: clamp(.625rem, 3.2vw, .875rem); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .72); animation: intro-tag 1.6s var(--ease-out-quart) .4s both; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fill { to { opacity: 1; } }
@keyframes intro-tag { from { opacity: 0; letter-spacing: .7em; } }
@keyframes intro-lift { to { transform: translateY(-100%); visibility: hidden; } }
.has-intro .hero__catch { --delay: 2.75s; } /* after the curtain has gone (2s + .9s), so the letters are seen rising */
.has-intro .hero__catch .hero__line + .hero__line { --delay: 3.1s; }
.has-intro .hero__mark { transition-delay: 2.9s; }


/* hero: catch + ONDO data, the rotating logo, and the venue photo that slides under the catch */
.hero { position: relative; overflow-x: clip; } /* the 3D mark slides in from the right (translate 10%); keep it from widening the page on phones */
.hero__mark { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100vh; min-height: 560px; pointer-events: none; opacity: 0; translate: 10% 0; transition: opacity 1.5s var(--ease-out-cubic), translate 1.5s var(--ease-out-cubic); }
.hero__mark.is-ready { opacity: 1; translate: 0 0; }
.hero__wrapper { position: sticky; top: var(--header-h); z-index: 3; padding-top: 9vh; padding-bottom: clamp(28px, 8vw, 80px); pointer-events: none; } /* 11/06: the sticky catch box (full width, above the photo) no longer catches clicks meant for the contact button under it */
.hero { timeline-scope: --kv; }
.hero__catch { font-size: calc(clamp(2rem, 9vw, 5.1rem) * var(--fit, 1)); font-style: italic; line-height: 1.12; white-space: nowrap; color: var(--mint-text); }
.is-en .hero__catch { font-size: calc(clamp(2rem, 8.6vw, 5.6rem) * var(--fit, 1)); } /* the English title, a size larger (10/28) */
/* each letter carries its own piece of one running light (the former esports heading): site.js gives the title its width (--lw)
   and each letter its place (--x), so the pieces line up. 10/30: the light runs all the time (below), on the white top too:
   mint letters with a dark and a pale light; over the video, white letters with mint lights (.is-over, 11/06; were dark) */
@property --kvp { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --cb { syntax: '<color>'; inherits: true; initial-value: #0f9a8d; }
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #26313a; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #8fe0d5; }
/* the lights inside the hollow letters (clear around them) */
@property --h1 { syntax: '<color>'; inherits: true; initial-value: #26313a; }
@property --h2 { syntax: '<color>'; inherits: true; initial-value: #8fe0d5; }
.hero__catch { --cb: var(--mint-text); --c1: #26313a; --c2: #8fe0d5; transition: --cb .6s var(--ease-out-quart), --c1 .6s var(--ease-out-quart), --c2 .6s var(--ease-out-quart), --h1 .8s var(--ease-out-quart), --h2 .8s var(--ease-out-quart); --h1: var(--c1); --h2: var(--c2); }
/* no light at the very top of the page (site.js .is-top, 10/30 night): the lights take the letters' own colour (clear in the
   hollow letters) and come back once the page moves */
.hero__catch.is-top { --c1: var(--mint-text); --c2: var(--mint-text); --h1: transparent; --h2: transparent; }
/* 11/06: over the video the letters are white (were dark), line by line (site.js puts .is-over on each line once the video is behind it) */
.hero__line { transition: --cb .6s var(--ease-out-quart), --c1 .6s var(--ease-out-quart), --c2 .6s var(--ease-out-quart), --h1 .8s var(--ease-out-quart), --h2 .8s var(--ease-out-quart); }
.hero__line.is-over { --cb: #fff; --c1: #1ab2a5; --c2: #57c9bd; --h1: var(--c1); --h2: var(--c2); }
.hero__catch .char { transition: color .5s var(--ease-out-quart), -webkit-text-stroke-color .5s var(--ease-out-quart);
  background: linear-gradient(90deg, var(--cb) 0%, var(--cb) 8%, var(--c1) 20%, var(--cb) 32%, var(--cb) 54%, var(--c2) 66%, var(--cb) 78%, var(--cb) 100%); background-size: calc(var(--lw, 600px) * 1.6) 100%; background-repeat: repeat-x;
  background-position: calc((1.6 * var(--kvp) - .9) * var(--lw, 600px) - var(--x, 0px)) 0; -webkit-background-clip: text; background-clip: text; }
.hero__catch .char:not(.is-hollow) { color: transparent; }
/* hollow letters like the reference site (every other letter of the second line, site.js adds .is-hollow) */
/* 10/30: the running light also passes through the hollow letters: the same band, clear where the other letters have
   their base colour, so a hollow letter fills with light only while the light goes by */
.hero__catch .char.is-hollow { color: transparent; -webkit-text-stroke: max(1px, .02em) var(--mint-text);
  background-image: linear-gradient(90deg, transparent 0%, transparent 8%, var(--h1) 20%, transparent 32%, transparent 54%, var(--h2) 66%, transparent 78%, transparent 100%); }
.hero__line.is-over .char.is-hollow { -webkit-text-stroke-color: #fff; }
.hero__line { display: flex; overflow: hidden; padding-block: .08em; }
.hero__line + .hero__line { margin-top: clamp(.6rem, 2.4vw, 1.6rem); }
.hero__spec { margin-top: clamp(1rem, 3vw, 2rem); padding-left: .3em; font-size: .8125rem; line-height: 1.75; color: var(--mint-deep); white-space: nowrap; transition: color .5s var(--ease-out-quart); }
.hero__spec { background: linear-gradient(90deg, #fff 0%, #fff 8%, #1ab2a5 20%, #fff 32%, #fff 54%, #57c9bd 66%, #fff 78%, #fff 100%); background-size: 160% 100%; background-repeat: repeat-x; background-position: 50% 0; -webkit-background-clip: text; background-clip: text; }
/* over the video: the same running light as the title, white base (11/06). Row by row: a row on the white top paints its own
   mint colour over the light; a row over the video (.is-over, site.js) turns clear and shows it */
.hero__spec div { color: var(--mint-deep); transition: color .5s var(--ease-out-quart); }
.hero__spec div.is-over { color: transparent; }
.hero__spec div { display: flex; }
.hero__spec dt::after { content: ":"; margin-right: .6rem; }
.hero__kv { position: relative; z-index: 1; height: 100vh; height: 100svh; margin-top: 40px; overflow: hidden; background: var(--kv-bg); view-timeline: --kv block; }
/* the looping hero video (10/30: a small turning planet under a blue sky, made in Canva; landscape for wide
   screens, the planet cut out in portrait below 1024px). Its first frame is shown at once as a picture (the first view);
   site.js gives the video its file after the page has loaded, and the video, starting from the same frame, comes in over it.
   The frame colour is the sky's, for the moment before the picture */
.hero { --kv-bg: #8a93a3; }
.hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .4s linear; }
.hero__video.is-ready { opacity: 1; }
@media (max-width: 767px) { .hero__kv { height: 70vh; height: 70svh; } } /* phones: a shorter frame (10/28) */
.hero__cta { position: absolute; inset-inline: 0; bottom: clamp(32px, 5vw, 80px); z-index: 2; display: flex; justify-content: flex-end; pointer-events: none; } /* contact button on the photo: the right edge of the page column, like the other sections' buttons (10/28) */
.hero__cta .btn { pointer-events: auto; }

/* about: the section turns dark while it is on screen */
.about { position: relative; z-index: 4; background: var(--paper); color: var(--base); transition: background-color .6s var(--ease-out-cubic), color .6s var(--ease-out-cubic); }
.about.is-dark { background: var(--dark-soft); color: var(--on-dark); }
.about__wrapper { padding-block: clamp(70px, 10vw, 180px); }
.about__grid { display: grid; gap: 40px; }
.about__heading { font-size: clamp(24px, 4.6vw, 32px); line-height: 1.6; }
.about__en { margin-top: 1rem; font-size: .875rem; color: var(--gray); transition: color .6s; }
.is-en .about__en { display: none; } /* the heading is already English */
.about.is-dark .about__en { color: var(--on-dark-gray); }
.about__right { display: grid; gap: 1.6rem; }
.about__content { font-size: .9375rem; line-height: 1.9; }
.about__more { margin-top: 1.4rem; text-align: right; }
.about .btn { transition: color .5s var(--ease-out-expo), border-color .6s; }
.about.is-dark .btn { border-color: #fff; color: #fff; }
.about.is-dark .btn::before { background: #fff; }
.about.is-dark .btn:hover { color: var(--dark-soft); }
.about__images { display: grid; gap: 0; padding-top: clamp(60px, 10vw, 120px); }
.about__image { aspect-ratio: 16 / 10; border-radius: 0; background: #1b2329; }
.about__image img { width: 100%; height: 100%; object-fit: cover; }
.about .caption { padding-right: var(--gutter); transition: color .6s; }
.about.is-dark .caption { color: var(--on-dark-gray); }

/* esports: very large English words over a simple picture (D23: a white controller with mint buttons on light gray,
   like the reference's aluminium can); a mint light runs through the letters while the page scrolls */

/* pick up (events) */
.pickups { padding-block: clamp(70px, 10vw, 160px); background: var(--paper-2); }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.pickups__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pickup { display: grid; gap: 28px clamp(30px, 4.4vw, 72px); align-items: center; }
.pickup + .pickup { margin-top: clamp(50px, 6vw, 90px); padding-top: clamp(50px, 6vw, 90px); border-top: 1px solid var(--line); }
.pickup__media { display: block; aspect-ratio: 1.415; background: #e7eded; }
.pickup__body { display: grid; gap: 20px; justify-items: start; }
.pickup__body .facts { justify-self: stretch; }
.pickup__label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8125rem; color: var(--mint-deep); }
.pickup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* event status (follows the date: upcoming / now on / ended) */
.status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-family: var(--font-head); font-size: .6875rem; font-weight: 800; letter-spacing: .06em; line-height: 1; white-space: nowrap; }
.status--upcoming { background: var(--mint-deep); color: #fff; }
.status--ongoing { background: var(--heat); color: #fff; }
.status--ended { background: #fff; color: var(--gray); box-shadow: inset 0 0 0 1px var(--line); }
.btn--mint { border-color: var(--mint-deep); background: var(--mint-deep); color: #fff; }
.btn--mint::before { background: var(--ink); }
.btn--mint:hover { border-color: var(--ink); }
.pickup__title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; letter-spacing: -.005em; }
.pickup__text { font-size: .9375rem; line-height: 1.8; }

/* business (what we do) */
.business { padding-block: clamp(70px, 10vw, 160px); }
.business__head { display: grid; gap: 28px clamp(32px, 6vw, 112px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.business__intro { max-width: 400px; font-size: .9375rem; line-height: 1.9; }
.services { border-top: 1px solid var(--line); }
.service { position: relative; display: grid; gap: 18px 40px; padding-block: clamp(28px, 3.6vw, 48px); border-bottom: 1px solid var(--line); isolation: isolate; }
.service::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--paper-2); scale: 1 0; transform-origin: top; transition: scale .6s var(--ease-out-quart); }
.service:hover::before { scale: 1 1; transform-origin: bottom; }
.service__head { display: grid; gap: 10px; align-content: start; container-type: inline-size; }
/* the longest word (ACADEMY) stays on one line: the size follows the column width (cqi) as well as the screen */
.service__en { display: flex; align-items: flex-start; gap: .8rem; font-size: clamp(36px, calc(19cqi - 6px), clamp(40px, 6vw, 76px)); line-height: 1; color: var(--mint-text); white-space: nowrap; }
.service__num { padding-top: .35em; font-size: .875rem; letter-spacing: .04em; color: var(--gray); }
.service__title { font-size: 1.125rem; line-height: 1.6; color: var(--base); }
.service__body { display: grid; gap: 10px; align-content: start; }
.service__catch { font-size: 1.0625rem; line-height: 1.7; }
.service__text { font-size: .9375rem; line-height: 1.8; }
.service__photo { order: 1; margin: 0; }
.service__photo picture { display: block; aspect-ratio: 16 / 10; }
.service__photo--goods picture { aspect-ratio: 3 / 2; }
.service__note { margin-top: 8px; font-size: .6875rem; color: var(--gray); }
.service__more { margin-top: 10px; }
.service__body { order: 2; }
.business .caption { margin-top: 16px; }
.business__more { margin-top: clamp(32px, 4vw, 56px); text-align: right; }

/* news */
.news { padding-block: clamp(60px, 8vw, 130px); }
.news__grid { display: grid; gap: 32px clamp(40px, 6vw, 112px); }
.news__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.news-list li { border-top: 1px solid var(--line); }
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-list a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; align-items: baseline; padding: 1.5rem 0; isolation: isolate; }
.news-list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hover); scale: 1 0; transform-origin: top; transition: scale .5s var(--ease-out-quart); }
.news-list a:hover::before { scale: 1 1; transform-origin: bottom; }
.news-list time { font-size: .8125rem; color: var(--gray); }
.news-title { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.6; }
.news-pin { display: inline-block; margin-right: 10px; font-size: .6875rem; color: #fff; background: var(--base); border-radius: 4px; padding: 0 6px; line-height: 20px; vertical-align: 1px; }
.news-arrow { display: none; }
.news-empty { padding: 1.5rem 0; color: var(--gray); border-top: 1px solid var(--line); }

/* company links: the picture on the left follows the link under the pointer (top page and company.html) */
.company-links { padding-block: clamp(60px, 8vw, 130px); counter-reset: link; }
.company-links:not(.company-links--page) { background: var(--paper-2); }
.company-links__head { display: grid; gap: 24px; padding-bottom: clamp(40px, 4vw, 80px); }
.company-links__content { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.7; }
.company-links__grid { display: grid; gap: 50px; }
.company-links__images { display: none; aspect-ratio: 16 / 9; }
.company-links__images picture { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-out-cubic); }
.company-links__images [data-key="base"] { opacity: 1; }
.company-links__images img { width: 100%; height: 100%; object-fit: cover; }
.company-links:has([data-key="philosophy"]:is(:hover, :focus-visible)) .company-links__images [data-key="philosophy"],
.company-links:has([data-key="business"]:is(:hover, :focus-visible)) .company-links__images [data-key="business"],
.company-links:has([data-key="outline"]:is(:hover, :focus-visible)) .company-links__images [data-key="outline"],
.company-links:has([data-key="partners"]:is(:hover, :focus-visible)) .company-links__images [data-key="partners"] { opacity: 1; }
.company-links__list li { counter-increment: link; }
.company-links__list li:last-child .link-row { border-bottom: 1px solid var(--line); }
.company-links__list .link-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "thumb no" "thumb en" "thumb ja"; column-gap: 18px; align-content: center; }
.company-links__list .link-row::after { content: "#0" counter(link); grid-area: no; font-family: var(--font-en); font-style: italic; font-weight: 600; font-size: .875rem; color: var(--mint-deep); }
.link-row__thumb { grid-area: thumb; align-self: center; overflow: hidden; border-radius: 8px; aspect-ratio: 1; }
.link-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.company-links__list .link-row__en { grid-area: en; }
.company-links__list .link-row__ja { grid-area: ja; }

/* instagram */
.insta { padding-block: clamp(60px, 8vw, 130px); background: var(--paper-2); }
.insta__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(28px, 3.6vw, 52px); }
.insta__handle { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; color: var(--base); }
.insta__handle:hover { color: var(--mint-deep); }
.insta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.insta-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insta-grid a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--paper-2); }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out-quart); }
.insta-grid a::after { content: ""; position: absolute; inset: 0; background: rgba(11, 17, 23, .25); opacity: 0; transition: opacity .3s; }
.insta-grid a:hover img { scale: 1.05; }
.insta-grid a:hover::after { opacity: 1; }
.insta-grid .insta-icon { position: absolute; right: 10px; top: 10px; z-index: 1; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.insta__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 56px); }

/* ---------- 6. lower pages ---------- */
.page-hero { padding-top: clamp(64px, 10vw, 120px); }
.page-hero__en { font-size: clamp(46px, 7.8vw, 104px); line-height: 1; color: var(--base); }
.page-hero__title { margin-top: .3rem; font-size: .9375rem; line-height: 1.4; color: var(--gray); }
.page-photo { position: relative; margin: clamp(40px, 7vw, 100px) var(--gutter) 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--paper-2); view-timeline: --page-photo block; }
.page-photo picture, .page-photo .photo { position: absolute; inset: 0; border-radius: 0; }
.page-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-photo--event { aspect-ratio: 16 / 9 !important; background: var(--paper-2); } /* every event page: the same 16:9 frame */
.page-photo--event .photo, .page-photo--event picture { position: absolute; inset: 0; }
.page-photo--event .photo img { display: block; width: 100%; height: 100%; object-fit: contain; } /* other shapes: margins, never cut (key visuals carry text) */
.motion-on .page-photo.page-photo--event img { animation: none; scale: 1; } /* no zoom: the whole picture stays visible */
.page-photo .caption { position: absolute; right: 14px; bottom: 10px; margin: 0; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.page-intro { display: grid; gap: 24px; padding-block: clamp(60px, 8vw, 100px) 0; }
.page-intro__statement { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.6; color: var(--base); }
.page-intro .lead { font-size: .9375rem; line-height: 1.9; }
.page-intro--lower-only { padding-bottom: 0; }

.block { display: grid; gap: 28px; padding-top: clamp(80px, 9vw, 120px); }
.block__aside { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.block__aside { container-type: inline-size; }
.block__aside .en { display: flex; align-items: flex-start; gap: .6rem; font-size: clamp(24px, calc(17cqi - 4px), clamp(28px, 3.2vw, 46px)); line-height: 1.05; color: var(--mint-text); white-space: nowrap; }
.block__aside .en .en__num { padding-top: .3em; font-size: .8125rem; letter-spacing: .04em; color: var(--gray); }
.block__aside h2 { font-size: .875rem; line-height: 1.4; color: var(--gray); }
.block__main { display: grid; gap: 28px; align-content: start; min-width: 0; }
.block__statement { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.7; color: var(--base); }
.lead { font-size: .9375rem; line-height: 1.9; }
.section-band { margin-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); background: var(--paper-2); }

/* values (3 ON / 3 DO) */
.values { display: grid; gap: 40px clamp(32px, 4vw, 64px); }
.values__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--base); font-size: .9375rem; color: var(--base); }
.values__line { width: 18px; height: 2px; background: var(--mint); }
.values li { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.values .en { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; color: var(--mint-text); }
.values p { font-size: .9375rem; }

/* services on the company page */
.svc-list { display: grid; gap: clamp(48px, 6vw, 80px); }
.svc { display: grid; gap: 20px clamp(24px, 3.6vw, 56px); align-items: start; }
.svc .photo { aspect-ratio: 16 / 10; }
.svc__body { display: grid; gap: 10px; }
.svc__body .en { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.05; color: var(--mint-text); }
.svc__body h3 { font-size: 1.125rem; color: var(--base); }
.service__catch { font-size: 1.0625rem; line-height: 1.7; }

/* outline table */
.outline { border-top: 1px solid var(--line); }
.outline > div { display: grid; gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: .875rem; line-height: 1.9; }
.outline dt { color: var(--gray); }
.outline a { color: var(--mint-deep); border-bottom: 1px solid currentColor; }

.svc-photo { margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; background: var(--paper-2); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-photo:has(img[src*="business-goods"]) { aspect-ratio: 3 / 2; }
.access { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; font-size: .9375rem; line-height: 1.8; }
/* map (Google Maps embed, read when it comes near) */
.map { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--paper-2); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.company-links--page { padding-top: clamp(60px, 8vw, 100px); }

/* partners page */
.partner-group + .partner-group { margin-top: 56px; }
.partner-group__title { margin-bottom: 18px; font-size: .875rem; color: var(--gray); }
.partner-list { border-top: 1px solid var(--line); }
.partner-item { display: grid; gap: 20px 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.partner-item__logo { display: grid; place-items: center; max-width: 260px; aspect-ratio: 3 / 2; background: var(--paper-2); border-radius: var(--radius); padding: 18px; }
.partner-item__logo img { max-height: 64px; width: auto; max-width: 80%; }
.partner-item__logo span { font-size: 1.375rem; color: var(--base); }
.partner-item__body { display: grid; gap: 8px; justify-items: start; }
.partner-item__cat { font-size: .75rem; color: var(--mint-deep); }
.partner-item__name { font-size: 1.25rem; }

/* news list page */
/* news search (D23): filters the list as you type */
html:not(.js) .news-search { display: none; }
.news-search { position: relative; max-width: 480px; margin-bottom: 12px; }
.news-search__input { width: 100%; min-height: 52px; padding: 0 20px 0 52px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .3s, box-shadow .3s; }
.news-search__input::placeholder { color: var(--gray); }
.news-search__input:hover { border-color: #b9c3c8; }
.news-search__input:focus { outline: none; border-color: var(--mint-deep); box-shadow: 0 0 0 3px rgba(26, 178, 165, .25); }
.news-search__submit { position: absolute; left: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--gray); cursor: pointer; }
.news-search__submit:hover { color: var(--mint-deep); }
.news-search__count { min-height: 1.6em; margin-bottom: 16px; font-size: .875rem; color: var(--gray); }

/* events (D23): cards, 6 per page, with page links */
.events { padding-block: clamp(40px, 5vw, 64px) 0; }
.event-grid { display: grid; gap: clamp(40px, 4vw, 56px) clamp(20px, 2.4vw, 36px); }
.event-card { position: relative; display: grid; gap: 10px; align-content: start; }
.event-card__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; background: var(--paper-2); }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out-quart); }
.event-card__media .status { position: absolute; left: 14px; top: 14px; }
.event-card:hover .event-card__media img { scale: 1.04; }
.event-card__date { margin-top: 6px; font-size: .875rem; letter-spacing: .04em; color: var(--mint-deep); }
.event-card__title { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; }
.event-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.event-card__title a { transition: color .3s; }
.event-card:hover .event-card__title a { color: var(--mint-deep); }
.event-card__title a:focus-visible { outline: none; }
.event-card:has(a:focus-visible) { outline: 2px solid var(--mint-deep); outline-offset: 6px; border-radius: var(--radius); }
.event-card__venue { font-size: .875rem; color: var(--gray); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(48px, 5vw, 72px); }
.pager ol { display: flex; gap: 8px; }
.pager ol a, .pager ol span, .pager__step { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; transition: border-color .3s, background-color .3s, color .3s; }
.pager a:hover { border-color: var(--base); }
.pager [aria-current="page"] { border-color: var(--base); background: var(--base); color: #fff; }
.pager [aria-disabled="true"] { color: #a7b1b7; }
/* an event page */
.event-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.event-detail__body { padding-top: 0; }
.event-detail__links { display: flex; flex-wrap: wrap; gap: 14px 28px; }

/* article */
.article { max-width: 820px; padding-block: clamp(48px, 6vw, 88px) 0; }
.article__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.article__meta time { font-size: .875rem; color: var(--gray); }
.article__title { padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.55; }
.article__body { padding-top: 36px; font-size: 1rem; line-height: 2; }
.article__body > * + * { margin-top: 1.4em; }
.article__body a { color: var(--mint-deep); border-bottom: 1px solid currentColor; }
.article__body ul { list-style: disc; padding-left: 1.4em; }
.article__body ol { list-style: decimal; padding-left: 1.4em; }
.article__body img { border-radius: var(--radius); }
.article__body h2 { margin-top: 2em; font-size: 1.375rem; }
.article__body h3 { margin-top: 1.6em; font-size: 1.125rem; }
.article__back { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }

/* contact form */
.contact-grid { display: grid; gap: 40px clamp(40px, 6vw, 112px); padding-block: clamp(60px, 8vw, 100px) 0; }
.contact-info { display: grid; gap: 24px; align-content: start; font-size: .875rem; }
.contact-info dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.contact-info dd { margin-top: 4px; font-size: .9375rem; color: var(--base); }
.contact-info dd a { border-bottom: 1px solid currentColor; }
.note { font-size: .8125rem; line-height: 1.9; color: var(--gray); }
.form { display: grid; gap: 26px; }
.field { display: grid; gap: 10px; }
.field__label { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--base); }
.field__req { padding: 0 6px; border-radius: 4px; background: var(--base); color: #fff; font-size: .6875rem; line-height: 20px; }
.field__opt { padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--gray); font-size: .6875rem; line-height: 18px; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); font: inherit; font-size: 1rem; font-weight: 400; color: var(--base); transition: border-color .2s, background-color .2s; }
.field textarea { min-height: 200px; resize: vertical; line-height: 1.8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--mint-deep); background: var(--paper); box-shadow: 0 0 0 3px rgba(13, 122, 113, .16); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #c0392b; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: .875rem; }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--mint-deep); }
.check a { color: var(--mint-deep); border-bottom: 1px solid currentColor; }
.form__status { min-height: 1.6em; font-size: .875rem; }
.form__status.is-error { color: #b03a2e; }
.form__status.is-ok { color: var(--mint-deep); }
.form .btn { justify-self: start; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* report */
.report-facts { display: grid; border-top: 1px solid var(--line); }
.report-facts > div { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.report-facts dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.report-facts dd { font-size: 1rem; color: var(--base); }
.gallery { columns: 2; column-gap: 12px; }
.gallery .photo { break-inside: avoid; margin-bottom: 12px; }
.closing { padding-block: clamp(80px, 9vw, 120px) 0; text-align: center; }
.closing p { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.7; color: var(--base); }

/* privacy */
.policy { display: grid; gap: 36px; }
.policy section { display: grid; gap: 10px; }
.policy h2 { font-size: 1.0625rem; color: var(--base); }
.policy ul { list-style: disc; padding-left: 1.4em; }
.policy p, .policy li { font-size: .9375rem; line-height: 1.9; }
.policy__date { font-size: .8125rem; color: var(--gray); text-align: right; }

/* 404 */
.notfound { display: grid; align-content: center; justify-items: start; gap: 22px; min-height: 64svh; padding-block: 64px 32px; }
.notfound__code { font-size: clamp(104px, 19vw, 240px); line-height: .95; color: var(--base); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* breadcrumb (bottom of lower pages) */
.breadcrumb { margin-block: clamp(60px, 6vw, 96px) clamp(30px, 3vw, 60px); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .75rem; color: var(--gray); }
.breadcrumb li + li::before { content: "/"; padding-inline: .5rem; color: #a7b0b6; }
.breadcrumb a:hover { color: var(--base); }
.breadcrumb [aria-current] { color: var(--mint-deep); }

/* ---------- 7. contact & footer ---------- */
.contact-aside { padding-top: clamp(60px, 6vw, 96px); overflow-x: clip; }
.contact-aside__head { display: grid; gap: 28px; padding-bottom: clamp(24px, 4vw, 50px); }
.contact-aside__body { display: grid; gap: 14px; max-width: 420px; }
.contact-aside__title { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.6; color: var(--base); }
.contact-aside__title span { display: block; }
.contact-aside__text { font-size: .875rem; line-height: 2; }
.contact-aside__link { position: relative; display: block; height: clamp(200px, 50vw, 40vh); color: var(--base); }
.contact-aside__marquee { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; }
/* very light letters (decoration; drawn as a clipped background so contrast tools skip them) */
.contact-aside__track { display: flex; flex: none; gap: 3vw; padding-right: 3vw; font-size: clamp(96px, 26vw, 200px); line-height: 1.05; white-space: nowrap; color: transparent; background: linear-gradient(#edf2f2, #edf2f2); -webkit-background-clip: text; background-clip: text; transition: opacity .6s; }
.contact-aside__link:hover .contact-aside__track { opacity: .6; }
.contact-aside__circle { position: absolute; right: 5vw; top: 50%; z-index: 2; display: grid; place-items: center; width: 140px; aspect-ratio: 1; translate: 0 -50%; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); isolation: isolate; }
.contact-aside__circle::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--base); opacity: 0; scale: .9; transition: opacity 1s var(--ease-out-expo), scale 1s var(--ease-out-expo); }
.contact-aside__link:hover .contact-aside__circle::before, .contact-aside__link:focus-visible .contact-aside__circle::before { opacity: 1; scale: 1; }
.contact-aside__circle .icon-arrow { transition: color 1s var(--ease-out-expo); }
.contact-aside__link:hover .icon-arrow, .contact-aside__link:focus-visible .icon-arrow { color: #fff; }
.contact-aside__link:focus-visible { outline: none; }
.contact-aside__link:focus-visible .contact-aside__circle { outline: 2px solid var(--mint-deep); outline-offset: 4px; }
.contact-aside__foot { display: flex; justify-content: flex-start; padding-block: 8px clamp(40px, 5vw, 72px); }

.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: .75rem; color: var(--gray); cursor: pointer; }
.motion-toggle:hover { color: var(--base); border-color: var(--base); }

/* footer (10/21 night "a usual footer"): company and address on the left, three link groups, a copyright line */
.site-footer { padding-block: clamp(56px, 7vw, 96px) 24px; background: var(--dark); color: var(--on-dark); }
.site-footer__top { display: grid; gap: 48px; padding-bottom: clamp(40px, 5vw, 72px); }
.site-footer__brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.site-footer__logo { display: block; width: 118px; }
.site-footer__logo img { width: 100%; }
.site-footer__name { font-family: var(--font-head); font-weight: 800; font-size: .9375rem; color: #fff; }
.site-footer__desc { max-width: 28em; font-size: .875rem; line-height: 1.9; }
.site-footer__address { display: grid; gap: 8px; font-size: .8125rem; line-height: 1.8; }
.site-footer__address div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; }
.site-footer__address dt { color: var(--on-dark-gray); }
.site-footer__address a:hover { color: var(--mint); }
.site-footer__sns { display: flex; gap: 8px; margin-top: 6px; }
.site-footer__sns a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--on-dark-line); border-radius: 50%; transition: border-color .3s, color .3s; }
.site-footer__sns a:hover { border-color: var(--mint); color: var(--mint); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; align-content: start; }
.site-footer__h { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--on-dark-line); font-family: var(--font-head); font-weight: 800; font-size: .8125rem; color: #fff; }
.site-footer__nav ul { display: grid; gap: 12px; align-content: start; font-size: .875rem; }
.site-footer__nav a:hover, .site-footer__nav a[aria-current="page"] { color: var(--mint); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-top: 22px; border-top: 1px solid var(--on-dark-line); font-size: .75rem; color: var(--on-dark-gray); }
.site-footer .motion-toggle { border-color: var(--on-dark-line); color: var(--on-dark-gray); }
.site-footer .motion-toggle:hover { border-color: #fff; color: #fff; }

/* English: the page waits (at most 1.2s) until site.js has put the English text in, so Japanese does not flash */
.is-en:not(.is-translated) body { visibility: hidden; animation: i18n-show 0s 1.2s forwards; }
@keyframes i18n-show { to { visibility: visible; } }

/* below the first screen: rendering (and the lazy images inside) waits until the section comes near.
   contain-intrinsic-size keeps the scroll height stable; "auto" remembers the real size after the first render */
.defer { content-visibility: auto; contain-intrinsic-size: auto none auto 1000px; }

/* ---------- 8. motion (decoration only: everything is readable without it) ---------- */
/* page change: the page slides out to the left and the next one comes in from the right; the header stays */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: .7s cubic-bezier(.83, .12, .08, .95) both vt-out; }
::view-transition-new(root) { animation: .7s cubic-bezier(.83, .12, .08, .95) both vt-in; }
@keyframes vt-out { to { translate: -100vw 0; } }
@keyframes vt-in { from { translate: 100vw 0; } }
html[data-motion="off"]::view-transition-old(root), html[data-motion="off"]::view-transition-new(root), html[data-motion="off"]::view-transition-group(*) { animation: none; }

@keyframes loop { to { translate: -50% 0; } }

/* site.js adds .motion-on when motion is allowed (OS setting and the page's switch) */
.motion-on .contact-aside__track { animation: loop 18s linear infinite; }

/* fade up when the element comes into view (site.js adds .is-in) */
.motion-on [data-reveal] { transition: opacity 1s var(--ease-out-quart) var(--delay, 0s), translate 1s var(--ease-out-quart) var(--delay, 0s); }
.motion-on [data-reveal]:not(.is-in) { opacity: 0; translate: 0 8%; }
.motion-on .about__image[data-reveal]:not(.is-in) { translate: 0 12%; }

/* letters that rise one by one (site.js wraps each letter in .char) */
[data-split-chars] .char { display: inline-block; white-space: pre; }
.motion-on [data-split-chars] { overflow: hidden; }
.motion-on [data-split-chars] .char { transition: translate .5s var(--ease-in-out-quad) calc(var(--i) * .03s + var(--delay, 0s)); }
.motion-on [data-split-chars]:not(.is-in) .char { translate: 0 105%; }
.motion-on .c-title__en[data-split-chars] { display: block; padding: 0 .08em .06em 0; }
.hero__line[data-split-chars] .char { flex-shrink: 0; min-width: .2em; } /* letters never squeeze into each other: a long title is made smaller instead (--fit, site.js) */
.motion-on .hero__catch .hero__line + .hero__line { --delay: .35s; }
.has-intro.motion-on .hero__catch .hero__line + .hero__line { --delay: 3.1s; }
/* the title letters rise one after another like the reference site: a slower wave, a soft landing (10/28; 10/30 a little slower) */
.motion-on .hero__catch .char { transition: translate 1.05s var(--ease-out-quart) calc(var(--i) * .06s + var(--delay, 0s)), color .5s var(--ease-out-quart), -webkit-text-stroke-color .5s var(--ease-out-quart); }

/* scroll-driven, no script: the hero photo moves against the page (10/21 night: about twice as strong as before — the photo
   is as tall as its frame and moves -30% → +30%, so no edge ever shows), the light in the esports words runs twice as far */
/* the light in the title moves with the scroll, over the whole hero (white top and video alike): it stands still when the
   page does. One full turn of the gradient loops without a seam, so it turns one and a half times on the way down (10/30 night; half the first speed) */
@keyframes catch-light-p { from { --kvp: 0; } to { --kvp: 1; } }
@supports (animation-timeline: view()) {
  .hero { view-timeline: --hero block; }
  .motion-on .hero__catch { animation: catch-light-p linear 1.5 both; animation-timeline: --hero; animation-range: cover 0% cover 100%; }
}

@supports (animation-timeline: view()) {
  .motion-on .hero__spec { animation: catch-light linear both; animation-timeline: --kv; animation-range: cover 0% cover 100%; }
  @keyframes catch-light { from { background-position: 150% 0; } to { background-position: -50% 0; } }
  /* the hero picture and video move slower than the page (as the photo did before 10/30): more of it shows as the page
     goes down, and it slides away under the next section. Phones have a shorter frame, so a smaller move with a little zoom
     keeps the edges out of sight */
  .motion-on .hero__still, .motion-on .hero__video { scale: 1.04; animation: kv-parallax linear both; animation-timeline: --kv; animation-range: cover 0% cover 100%; }
  @keyframes kv-parallax { from { translate: 0 -30%; } to { translate: 0 30%; } }
  @media (max-width: 767px) {
    .motion-on .hero__still, .motion-on .hero__video { animation-name: kv-parallax-sp; scale: 1.1; }
    @keyframes kv-parallax-sp { from { translate: 0 -20%; } to { translate: 0 20%; } }
  }
  .motion-on .page-photo img { animation: photo-parallax linear both; animation-timeline: --page-photo; animation-range: cover 0% cover 100%; scale: 1.12; }
  @keyframes photo-parallax { from { translate: 0 -4%; } to { translate: 0 4%; } }
}

@media (forced-colors: active) {
  .btn, .photo, .field input, .field select, .field textarea { border: 1px solid CanvasText; }
  .contact-aside__track { color: CanvasText; background: none; }
}

/* ---------- 9. screen sizes (mobile first: 576 / 768 / 1024 / 1280 / 1600) ---------- */
@media (min-width: 576px) {
  :root { --gutter: 24px; --header-h: 64px; }
  .hero__spec { font-size: .875rem; }
  .insta-grid { gap: 10px; }
  .gallery { column-gap: 16px; }
  .gallery .photo { margin-bottom: 16px; }
}

@media (min-width: 768px) {
  :root { --gutter: 35px; --header-h: 72px; }
  .site-header__logo, .drawer__logo { width: 112px; }
  .hero__spec { font-size: .9375rem; }
  .hero__kv { margin-top: 0; }
  .about__images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-links__head, .business__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .business__intro { justify-self: end; width: 400px; max-width: 100%; }
  .company-links__content { justify-self: end; align-self: end; }
  .contact-aside__head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
  .contact-aside__circle { width: 160px; }
  .insta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .insta-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insta-grid a { border-radius: 8px; }
  .news-list a { grid-template-columns: 7.5em minmax(0, 1fr); padding: 2rem 0; }
  .news-title { grid-column: auto; }
  .outline > div { grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); }
  .values, .report-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-facts { column-gap: 32px; }
  .partner-item { grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); }
  .gallery { columns: 3; }
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer__body { margin-inline: auto; padding-top: 24px; }
  .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  :root { --header-h: 88px; }
  .site-header__inner { gap: 28px; padding-inline: var(--gutter); }
  .site-header__logo { width: 124px; }
  .site-nav { display: block; }
  .site-header__tools { gap: 14px; margin-left: 0; }
  .site-header__cta { display: inline-flex; }
  .menu-button { display: none; }
  .hero__wrapper { padding-top: 12vh; }
  .about { min-height: 100vh; }
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); }
  .about__left { padding-left: 40px; }
  .about__content { text-indent: 100px; }
  .pickup { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .service { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); align-items: start; }
  .service__photo, .service__body { order: 0; }
  .news__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .news__head { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .news-list a { padding: 2.3rem 0; }
  .business__intro { text-indent: 100px; }
  .company-links__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .company-links__images { display: block; position: sticky; top: calc(var(--header-h) + 40px); }
  .company-links__list .link-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "no" "en" "ja"; }
  .link-row__thumb { display: none; }
  .page-photo { aspect-ratio: 2 / 1; }
  .page-intro { grid-template-columns: minmax(0, 1fr); width: min(100%, 880px); margin-inline: auto; }
  .block { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(32px, 4vw, 64px); }
  .block__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
  .svc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .contact-aside__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .contact-aside__body { justify-self: end; }
  .site-footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); }
}

@media (min-width: 1280px) {
  :root { --gutter: 50px; }
  .wrap-right { width: min(100% + (100vw - 100%) / 2, 100%); }
}

@media (min-width: 1600px) {
  .wrap { width: 1600px; }
  .wrap-right { width: min(1600px + (100vw - 1600px) / 2, 100%); }
}

@media (min-width: 1800px) {
  .wrap { width: 1800px; }
  .wrap-right { width: min(1800px + (100vw - 1800px) / 2, 100%); }
}