*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans CJK TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-70px;left:16px;z-index:99;background:white;padding:12px}
.skip:focus{top:14px}
.beauty{--paper:#f6f0eb;--ink:#2a232b;--accent:#a7526a;--edge:#dbccc7;--dark:#3a2936;--light:#f6e6de}
.education{--paper:#ecedf4;--ink:#1c2855;--accent:#e26344;--edge:#b8c1d6;--dark:#19285e;--light:#fff1c3}
.sports{--paper:#e8eee5;--ink:#182823;--accent:#f15f39;--edge:#a8bbae;--dark:#1b332e;--light:#d9ef8d}
::selection{background:var(--accent);color:white}
.ribbon{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px clamp(22px,4vw,70px);background:var(--dark);color:white;font-size:11px;letter-spacing:.04em}
.ribbon a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.site-header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:16px clamp(22px,4vw,70px);border-bottom:1px solid var(--edge)}
.brand{font-weight:900;font-size:23px;letter-spacing:-.06em;white-space:nowrap}
.site-header nav{display:flex;gap:clamp(15px,2.7vw,42px);font-size:12px;font-weight:700}
.site-header nav a:hover{color:var(--accent)}
.langs{display:flex;gap:4px}
.langs button{min-width:34px;min-height:32px;border:1px solid var(--edge);background:transparent;color:var(--ink);font-size:11px;font-weight:700}
.langs button[aria-pressed="true"]{background:var(--ink);color:white;border-color:var(--ink)}
.hero{display:grid;grid-template-columns:minmax(0,54%) minmax(0,46%);min-height:650px;overflow:hidden}
.hero-copy{padding:clamp(60px,8vw,135px) clamp(24px,6vw,96px) 38px clamp(22px,4vw,70px);display:flex;flex-direction:column;align-items:flex-start}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.hero .eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow-line{display:block;width:35px;height:2px;background:var(--accent)}
h1,h2,h3,p{overflow-wrap:anywhere}
h1{font-size:clamp(58px,6.6vw,112px);line-height:1.09;letter-spacing:-.075em;margin:43px 0 30px;font-weight:750}
h1 em{font-style:normal;color:var(--accent)}
.hero-copy>p{font-size:clamp(16px,1.3vw,20px);line-height:1.85;max-width:590px;color:color-mix(in srgb,var(--ink),white 20%);margin:0}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:43px}
.primary,.secondary{min-height:52px;padding:14px 21px;font-weight:700;font-size:13px;border:1px solid var(--ink)}
.primary{background:var(--ink);color:white;display:inline-flex;align-items:center}
.secondary{background:transparent;color:var(--ink)}
.primary:hover,.secondary:hover{transform:translateY(-3px)}
.hero-foot{width:100%;margin-top:auto;padding-top:80px;display:flex;justify-content:space-between;gap:20px;font-size:10px;font-weight:800;letter-spacing:.16em}
.hero-art{min-height:650px;position:relative;overflow:hidden;isolation:isolate}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff31 1px,transparent 1px),linear-gradient(90deg,#ffffff31 1px,transparent 1px);background-size:90px 90px;opacity:.6}
.art-top,.art-bottom{position:absolute;z-index:7;font-size:11px;letter-spacing:.18em;font-weight:800}
.art-top{left:7%;top:7%}
.art-bottom{right:7%;bottom:7%;writing-mode:vertical-rl}
.art-ring,.art-object,.art-number{position:absolute}
.art-number{z-index:4;left:8%;bottom:0;font:900 clamp(240px,34vw,580px)/.72 Arial,sans-serif;letter-spacing:-.14em;opacity:.18}
.beauty .hero-art{background:#d8b8b9;color:#552f3d}
.beauty .ring-one{border:1px solid #f7ede2;width:78%;aspect-ratio:1;border-radius:50%;top:-24%;right:-20%}
.beauty .ring-two{border:1px solid #f7ede2;width:55%;aspect-ratio:1;border-radius:50%;bottom:-25%;left:-16%}
.beauty .object-one{width:27%;height:49%;min-width:170px;top:26%;left:38%;border-radius:28px 28px 55px 55px;background:linear-gradient(105deg,#fff8ee,#dbc5b7 60%,#fff5e9);box-shadow:24px 28px 38px #5e314052;transform:rotate(-10deg)}
.beauty .object-one::before{content:"";position:absolute;width:42%;height:17%;left:29%;top:-13%;background:#a15766;border-radius:8px 8px 2px 2px}
.beauty .object-one::after{content:"VELA\A DAILY RITUAL";white-space:pre;position:absolute;top:44%;left:0;right:0;text-align:center;font:700 18px/1.7 Georgia,serif;letter-spacing:.1em;color:#623944}
.beauty .object-two{width:35%;aspect-ratio:1;border-radius:50%;left:-9%;bottom:-15%;background:radial-gradient(circle at 31% 30%,#fff4eb,#a8737f);box-shadow:22px 14px 60px #582f3840}
.education .hero-art{background:#1c2d70;color:#f5e7b8}
.education .art-grid{background-size:58px 58px;opacity:.25}
.education .ring-one{width:78%;aspect-ratio:1;border:1px solid #fff7b4a8;border-radius:50%;top:7%;right:-20%}
.education .ring-two{width:49%;aspect-ratio:1;border:1px solid #fff7b4a8;border-radius:50%;bottom:-10%;left:-13%}
.education .object-one{width:55%;height:55%;top:25%;left:22%;transform:rotate(-10deg);background:#fff0bc;box-shadow:26px 30px 0 #ed6143,38px 46px 55px #040e374d}
.education .object-one::before{content:"NORTHLIGHT\A FIELD NOTES / 01";white-space:pre;position:absolute;left:12%;top:13%;font:900 26px/1.1 Arial,sans-serif;letter-spacing:-.05em;color:#223070}
.education .object-one::after{content:"ASK BETTER QUESTIONS";position:absolute;bottom:9%;left:12%;font:800 12px Arial,sans-serif;letter-spacing:.12em;color:#223070}
.education .object-two{width:17%;aspect-ratio:1;background:#ec6347;border-radius:50%;top:13%;right:6%;box-shadow:0 0 0 15px #f4d6a42e}
.sports .hero-art{background:#c8d6c0;color:#163a30}
.sports .art-grid{background-size:70px 70px}
.sports .ring-one{width:90%;height:60%;border:22px solid #faf9e9;transform:rotate(-25deg);border-radius:50%;top:21%;left:9%;box-shadow:0 0 0 1px #1c3931}
.sports .ring-two{width:58%;height:40%;border:15px solid #f06b46;transform:rotate(-25deg);border-radius:50%;top:30%;left:25%}
.sports .object-one{height:88%;width:18%;top:7%;left:48%;background:linear-gradient(90deg,#193e32,#5d8c6d 45%,#193e32);transform:rotate(26deg);clip-path:polygon(28% 0,66% 0,100% 100%,0 100%);opacity:.9}
.sports .object-two{width:22%;aspect-ratio:1;border-radius:50%;background:#f4e98e;top:11%;left:13%;box-shadow:15px 20px 0 #53756877}
.photo-art{color:#fff!important}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.beauty .hero-photo{object-position:55% center}
.sports .hero-photo{object-position:48% center}
.photo-art::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#172b242b 0%,transparent 35%,transparent 62%,#172b2466 100%)}
.photo-art .art-grid,.photo-art .art-ring,.photo-art .art-object,.photo-art .art-number{display:none}
.photo-art .art-top,.photo-art .art-bottom{z-index:3;text-shadow:0 1px 8px #132322a8}
.art-disclosure{position:absolute;z-index:3;bottom:6%;left:7%;max-width:75%;font-size:11px;line-height:1.5;letter-spacing:.02em;font-weight:700;text-shadow:0 1px 8px #132322a8}
.section{padding:clamp(90px,11vw,165px) clamp(22px,4vw,70px)}
.section-heading{max-width:960px}
.section-heading h2{font-size:clamp(45px,6vw,94px);letter-spacing:-.065em;line-height:1.13;margin:25px 0}
.section-heading p{font-size:16px;line-height:1.85;max-width:700px;color:color-mix(in srgb,var(--ink),white 26%)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:62px 0 22px}
.filters button{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:10px 17px;font-size:12px;font-weight:700}
.filters button.active{background:var(--ink);color:white}
.programme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--edge)}
.programme-card{min-height:340px;padding:27px;display:flex;flex-direction:column;border-right:1px solid var(--edge)}
.programme-card:last-child{border-right:0}
.programme-card[hidden]{display:none}
.card-number{font-size:11px;font-weight:800;letter-spacing:.15em}
.card-mark{font-size:72px;color:var(--accent);margin:28px 0 auto}
.programme-card h3{font-size:clamp(23px,2.1vw,32px);letter-spacing:-.03em;margin:0 0 10px}
.programme-card p{font-size:14px;line-height:1.8;max-width:340px;margin:0 0 22px}
.text-button{background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 5px;align-self:flex-start;font-size:12px;font-weight:800}
.process{background:var(--dark);color:white}
.process .section-heading{max-width:none}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #ffffff70;margin-top:60px}
.step{padding:27px 35px 15px 0;min-height:235px;border-right:1px solid #ffffff70}
.step:not(:first-child){padding-left:35px}
.step:last-child{border-right:0}
.step span{font-size:11px;font-weight:800;color:var(--light)}
.step h3{font-size:25px;margin:38px 0 8px}
.step p{font-size:13px;line-height:1.8;color:#ffffffb0}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.design-rationale{display:grid;grid-template-columns:1fr 1fr;gap:6vw;background:var(--light);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.design-rationale p{align-self:end;max-width:650px;font-size:clamp(16px,1.5vw,21px);line-height:1.85;margin:0}
.faq-list{border-top:1px solid var(--edge)}
.faq details{border-bottom:1px solid var(--edge);padding:22px 0}
.faq summary{font-size:17px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:15px}
.faq summary::after{content:"+";font-size:24px;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{font-size:14px;line-height:1.9;margin:14px 0 0;color:color-mix(in srgb,var(--ink),white 20%)}
.end{background:var(--light);padding:clamp(85px,9vw,140px) clamp(22px,4vw,70px);text-align:center}
.end h2{font-size:clamp(48px,6vw,95px);line-height:1.12;letter-spacing:-.06em;margin:30px auto;max-width:1050px}
.end p{font-size:16px;line-height:1.8;max-width:600px;margin:0 auto 30px}
.end .primary{border:0}
.end .consult-link{display:block;width:max-content;max-width:100%;margin:20px auto 8px;border-bottom:1px solid currentColor;padding:7px 2px;font-size:15px;font-weight:700}
.end .consult-note{display:block;max-width:620px;margin:auto;font-size:12px;line-height:1.6;opacity:.75}
footer{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;background:var(--ink);color:white;padding:35px clamp(22px,4vw,70px);font-size:11px}
footer strong{font-size:20px;letter-spacing:-.06em}
footer a{text-decoration:underline;text-underline-offset:4px}
dialog{border:1px solid var(--ink);max-width:min(90vw,540px);padding:24px 28px 28px;color:var(--ink);background:var(--paper);box-shadow:18px 18px 0 #0003}
dialog::backdrop{background:#101b1dc9}
.dialog-top{display:flex;justify-content:space-between;gap:20px;font-size:20px}
.dialog-top button{border:0;background:transparent;font-size:30px;line-height:1}
dialog p{line-height:1.8;font-size:15px}
#closeDialogButton{border:1px solid var(--ink);background:var(--ink);color:white;padding:11px 24px;font-size:13px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:930px){
  .site-header{flex-wrap:wrap}
  .site-header nav{order:3;width:100%}
  .hero{grid-template-columns:1fr}
  .hero-copy{min-height:590px}
  .hero-art{min-height:550px}
  .faq,.design-rationale{grid-template-columns:1fr}
}
@media(max-width:650px){
  .ribbon{font-size:9px;padding:10px 18px}
  .site-header{padding:18px}
  .brand{font-size:20px}
  .site-header nav{font-size:11px;gap:17px}
  .hero-copy{padding:65px 22px 28px;min-height:535px}
  h1{font-size:clamp(51px,12.5vw,75px);margin:29px 0 20px}
  .hero-copy>p{font-size:15px}
  .hero-actions{margin-top:30px}
  .hero-foot{padding-top:60px}
  .hero-art{min-height:425px}
  .beauty .object-one{min-width:130px}
  .education .object-one::before{font-size:19px}
  .section{padding:85px 22px}
  .section-heading h2{font-size:clamp(44px,11vw,68px)}
  .filters{margin-top:43px}
  .programme-grid{grid-template-columns:1fr}
  .programme-card{min-height:265px;border-right:0;border-bottom:1px solid var(--edge)}
  .programme-card:last-child{border-bottom:0}
  .card-mark{font-size:50px;margin:15px 0 auto}
  .steps{grid-template-columns:1fr}
  .step,.step:not(:first-child){min-height:175px;padding:24px 0;border-right:0;border-bottom:1px solid #ffffff70}
  .step:last-child{border-bottom:0}
  .step h3{margin:15px 0 8px}
  footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}