:root { --yellow:#f4d63e; --blue:#173bfa; --red:#f34336; --ink:#11120f; --paper:#f7f5eb; --white:#fff; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:SUIT,"Apple SD Gothic Neo",sans-serif; line-height:1.55; }
.site-header { position:fixed; z-index:60; top:0; left:0; right:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; min-height:68px; background:var(--yellow); border-bottom:4px solid var(--ink); color:var(--ink); }
.brand { display:flex; align-items:center; gap:12px; height:68px; padding:0 24px; border-right:4px solid var(--ink); font-weight:900; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--ink); color:var(--yellow); font:600 12px/1 "IBM Plex Mono"; border-radius:50%; }
.site-nav { display:flex; justify-content:center; gap:clamp(14px,2.3vw,36px); }
.site-nav a { font-size:13px; font-weight:800; text-decoration:none; text-transform:uppercase; }
.site-nav a:hover { color:var(--blue); }
.lang-switch { align-self:stretch; }
.lang-switch button { width:44px; border:0; border-left:2px solid var(--ink); background:transparent; color:var(--ink); font:600 11px/1 "IBM Plex Mono"; }
.lang-switch button[aria-pressed="true"] { background:var(--ink); color:var(--yellow); }
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; color:#fff; border-bottom:12px solid var(--yellow); }
.hero-media img { object-position:center center; filter:saturate(1.08) contrast(1.08); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.87),rgba(0,0,0,.36) 58%,rgba(0,0,0,.2)),linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%); }
.hero-copy { position:relative; z-index:4; width:min(900px,calc(100% - 48px)); margin:90px 6vw 70px; }
.concept-label { display:inline-block; margin:0 0 30px; padding:8px 12px; background:var(--red); color:#fff; transform:rotate(-2deg); font:600 12px/1 "IBM Plex Mono"; box-shadow:4px 4px 0 var(--ink); }
.eyebrow { margin:0 0 14px; color:var(--blue); font:600 12px/1.4 "IBM Plex Mono"; text-transform:uppercase; }
.hero .eyebrow { color:var(--yellow); text-shadow:2px 2px 0 #000; }
.hero h1 { max-width:900px; margin:0; font-family:"Black Han Sans",sans-serif; font-size:clamp(56px,10.2vw,150px); font-weight:400; line-height:.88; letter-spacing:0; word-break:keep-all; -webkit-text-stroke:1px #000; text-shadow:4px 5px 0 #000,0 18px 45px rgba(0,0,0,.7); }
.hero-lead { max-width:650px; margin:24px 0; font-size:clamp(16px,1.4vw,21px); font-weight:700; line-height:1.65; text-shadow:2px 2px 0 #000,0 0 16px #000; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); font-weight:900; text-decoration:none; box-shadow:5px 5px 0 var(--ink); cursor:pointer; }
.button.primary { background:var(--yellow); }
.button.secondary { background:var(--white); }
.hero-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:30px; }
.hero-chips span { padding:7px 10px; border:2px solid #fff; background:rgba(0,0,0,.52); font:600 11px/1 "IBM Plex Mono"; box-shadow:2px 2px 0 #000; }
.hero-ornament::before { content:"ROUND\A 03:00"; white-space:pre; position:absolute; z-index:2; right:5vw; top:17vh; width:170px; padding:18px; border:5px solid var(--ink); background:var(--yellow); color:var(--ink); font:600 28px/.95 "IBM Plex Mono"; text-align:right; box-shadow:9px 9px 0 var(--blue); transform:rotate(2deg); }
.hero-foot { position:absolute; z-index:5; left:0; right:0; bottom:0; height:48px; display:flex; justify-content:space-between; align-items:center; padding:0 24px; background:var(--ink); color:var(--yellow); font:600 11px/1 "IBM Plex Mono"; }
.slider-dot { background:#fff; border:2px solid #fff; }
.slider-dot.is-active { width:28px; border-radius:0; background:var(--red); }
.section { padding:clamp(78px,9vw,135px) max(22px,6vw); border-bottom:4px solid var(--ink); }
.section-head { display:grid; grid-template-columns:190px 1fr; gap:24px; max-width:1240px; margin:0 auto 64px; }
.section-head .eyebrow { grid-row:1/span 2; padding:10px; border:3px solid currentColor; align-self:start; text-align:center; }
.section h2 { margin:0; max-width:980px; font-family:"Black Han Sans",sans-serif; font-size:clamp(40px,6.2vw,86px); font-weight:400; line-height:1.05; letter-spacing:0; word-break:keep-all; }
.section-lead { max-width:720px; margin:18px 0 0; font-size:18px; font-weight:600; }
.greeting { display:grid; grid-template-columns:.8fr 1.2fr; max-width:1240px; margin:auto; border:4px solid var(--ink); box-shadow:12px 12px 0 var(--blue); background:var(--white); }
.greeting-photo { min-height:550px; border-right:4px solid var(--ink); }
.greeting-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:contrast(1.05); }
.greeting-copy { align-self:center; padding:clamp(30px,6vw,88px); }
.greeting-copy .eyebrow { display:inline-block; padding:7px 10px; background:var(--red); color:#fff; }
.greeting-copy blockquote { margin:25px 0; font-size:clamp(24px,3.3vw,44px); font-weight:900; line-height:1.35; word-break:keep-all; }
.greeting-copy strong,.greeting-copy span { display:block; }
.greeting-copy span { color:var(--blue); font:600 12px/1.5 "IBM Plex Mono"; }
.strength-grid { display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; margin:90px auto; }
.strength-grid article { padding:30px; border:4px solid var(--ink); background:var(--yellow); }
.strength-grid article:nth-child(2) { background:var(--blue); color:#fff; transform:translateY(22px) rotate(-1deg); }
.strength-grid article:nth-child(3) { background:var(--red); color:#fff; }
.strength-grid b { font:600 13px/1 "IBM Plex Mono"; }
.strength-grid h3 { margin:70px 0 10px; font-size:25px; line-height:1.2; }
.master-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1240px; margin:auto; }
.master-grid article { border:4px solid var(--ink); background:#fff; box-shadow:7px 7px 0 var(--ink); }
.master-grid img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; filter:saturate(.8) contrast(1.08); }
.master-grid div { padding:18px; border-top:4px solid var(--ink); }
.master-grid h3,.master-grid p { margin:0; }
.master-grid h3 { font-size:26px; }
.master-grid p { font:600 12px/1.5 "IBM Plex Mono"; color:var(--blue); }
.programs { background:var(--blue); color:#fff; }
.programs .eyebrow { color:var(--yellow); }
.program-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; max-width:1240px; margin:auto; }
.program-grid article { position:relative; grid-column:span 6; min-height:430px; overflow:hidden; border:4px solid var(--ink); background:var(--ink); box-shadow:8px 8px 0 var(--yellow); }
.program-grid .program-feature { grid-column:1 / span 7; grid-row:1; min-height:620px; }
.program-grid .program-oneday { grid-column:8 / span 5; grid-row:1; min-height:620px; }
.program-grid img { width:100%; height:100%; object-fit:cover; }
.program-grid article div { position:absolute; inset:auto 0 0; padding:74px 24px 22px; background:linear-gradient(transparent,rgba(0,0,0,.94)); }
.program-grid span { display:inline-block; padding:5px 8px; background:var(--yellow); color:var(--ink); font:600 12px/1 "IBM Plex Mono"; }
.program-grid h3 { margin:9px 0 3px; font-size:30px; }
.program-grid p { margin:0; }
.schedule { background:var(--yellow); }
.schedule-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1240px; margin:auto; }
.schedule-list { border:4px solid var(--ink); background:#fff; }
.schedule-list > div { display:grid; grid-template-columns:1fr auto; padding:22px; border-bottom:3px solid var(--ink); }
.schedule-list > div:last-child { border-bottom:0; }
.schedule-list p { grid-column:1/-1; margin:7px 0 0; }
.schedule-list span { font:600 12px/1.5 "IBM Plex Mono"; color:var(--red); }
.location-card { border:4px solid var(--ink); background:#fff; }
.placeholder-map { display:flex; flex-direction:column; justify-content:space-between; padding:24px; background:var(--blue); color:var(--yellow); }
.placeholder-map strong { font:400 clamp(42px,6vw,78px)/.85 "Black Han Sans"; text-shadow:4px 4px 0 var(--ink); }
.placeholder-map span { font:600 11px/1 "IBM Plex Mono"; }
.location-copy { padding:24px; border-top:4px solid var(--ink); }
.location-copy p { margin:3px 0 15px; }
.gallery { background:var(--paper); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1240px; margin:auto; }
.gallery-grid article { border:4px solid var(--ink); background:#fff; box-shadow:7px 7px 0 var(--ink); }
.gallery-grid article:nth-child(2) { transform:translateY(28px); }
.gallery-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-bottom:4px solid var(--ink); }
.gallery-grid div { padding:20px; }
.gallery-grid h3,.gallery-grid p { margin:0 0 7px; }
.inquiry { display:grid; grid-template-columns:1fr 1fr; gap:6vw; background:var(--red); color:#fff; }
.inquiry .eyebrow { color:var(--yellow); }
.inquiry h2 { margin:0; }
.contact-channels { display:grid; margin-top:36px; border-top:3px solid #fff; }
.contact-channels a { display:flex; justify-content:space-between; padding:14px 0; border-bottom:3px solid #fff; font-weight:800; text-decoration:none; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:28px; border:4px solid var(--ink); background:var(--yellow); color:var(--ink); box-shadow:12px 12px 0 var(--blue); }
.contact-form label { display:grid; gap:6px; font-size:13px; font-weight:800; }
.contact-form label:nth-child(4),.contact-form .button,.contact-form small,.form-status { grid-column:1/-1; }
.contact-form input,.contact-form select,.contact-form textarea { padding:12px; border:3px solid var(--ink); border-radius:0; background:#fff; }
.links { background:#fff; }
.link-list { max-width:1240px; margin:auto; border:4px solid var(--ink); }
.link-list a { display:flex; justify-content:space-between; padding:20px; border-bottom:3px solid var(--ink); font-size:clamp(19px,2vw,28px); font-weight:900; text-decoration:none; }
.link-list a:last-child { border-bottom:0; }
.link-list a:hover { background:var(--yellow); }
footer { display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:end; padding:54px 6vw; background:var(--ink); color:#fff; }
footer p { margin:0; }
footer .brand { padding:0; border:0; }
@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto auto; }
  .site-header .brand { border-right:0; }
  .site-header .brand > span:last-child { display:none; }
  .menu-toggle { display:grid; place-items:center; width:44px; height:44px; border:0; border-left:2px solid var(--ink); background:transparent; font-size:22px; }
  .site-nav { position:absolute; top:68px; left:0; right:0; display:none; padding:20px; background:var(--yellow); border-bottom:4px solid var(--ink); }
  .site-nav.is-open { display:grid; }
  .hero-copy { margin-left:24px; }
  .hero-ornament::before { right:24px; top:14vh; transform:scale(.78) rotate(2deg); transform-origin:top right; }
  .section-head { grid-template-columns:1fr; }
  .section-head .eyebrow { grid-row:auto; justify-self:start; }
  .greeting,.schedule-layout,.inquiry { grid-template-columns:1fr; }
  .greeting-photo { border-right:0; border-bottom:4px solid var(--ink); }
  .strength-grid,.master-grid,.gallery-grid { grid-template-columns:1fr; }
  .strength-grid article:nth-child(2),.gallery-grid article:nth-child(2) { transform:none; }
  footer { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .brand { padding:0 12px; }
  .lang-switch button { width:36px; }
  .hero-copy { width:calc(100% - 32px); margin:105px 16px 76px; }
  .hero h1 { font-size:clamp(54px,18vw,78px); }
  .hero-lead { font-size:15px; }
  .hero-ornament::before { display:none; }
  .hero-chips span:nth-child(n+3) { display:none; }
  .section { padding:76px 18px; }
  .section-head { margin-bottom:42px; }
  .program-grid { display:block; }
  .program-grid article,.program-grid .program-feature,.program-grid .program-oneday { grid-column:auto; grid-row:auto; min-height:410px; margin-bottom:18px; }
  .contact-form { grid-template-columns:1fr; padding:20px; }
  .contact-form label { grid-column:1; }
}