:root{
  --ink:#0f3d43;
  --ink-2:#082d33;
  --tide:#1c6b78;
  --bone:#f6f4ee;
  --bone-2:#ecefeb;
  --mist:#dfe5e3;
  --mark:#d8a432;
  --text:#17383d;
  --text-muted:#5a7074;
  --on-dark:#e9efee;
  --on-dark-muted:#a9bcbf;
  --line-flag:#06c755;
  --font-display:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --font-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-label:"IBM Plex Mono","Noto Sans TC",monospace;
  --fs-hero:clamp(2.4rem,1.6rem + 3.2vw,4.4rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);
  --fs-lead:clamp(1.125rem,1.05rem + .3vw,1.3rem);
  --fs-body:clamp(1.0625rem,1rem + .2vw,1.125rem);
  --fs-label:.78rem;
  --lh-heading:1.25;
  --lh-body:1.85;
  --ls-heading:.02em;
  --ls-label:.14em;
  --fw-display:600;
  --fw-body:400;
  --fw-strong:500;
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:40px;--s-5:64px;
  --s-section:clamp(88px,10vw,136px);
  --shell:min(1200px,calc(100% - 48px));
  --col-gap:clamp(32px,5vw,72px);
  --r-img:6px;--r-ui:4px;--r-pill:999px;
  --hairline:1px solid var(--mist);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-instant:120ms;--dur-fast:200ms;--dur-base:320ms;
  --dur-reveal:600ms;--dur-focal:1600ms;--dur-loop:12s;
  --reveal-y:24px;--stagger:80ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--fw-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bone);
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{
  position:fixed;inset:0 0 auto;z-index:1000;color:#fff;
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),backdrop-filter var(--dur-fast) var(--ease-out);
}
.site-header.scrolled{
  background:rgba(246,244,238,.94);backdrop-filter:blur(12px);
  color:var(--ink);border-bottom-color:var(--mist);
}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.logo{position:relative;width:156px;height:40px;display:block}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity var(--dur-fast) var(--ease-out)}
.logo-white{opacity:1}.logo-color{opacity:0}
.site-header.scrolled .logo-white{opacity:0}
.site-header.scrolled .logo-color{opacity:1}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-size:.9rem;font-weight:var(--fw-strong);letter-spacing:.02em}
.nav-contact{
  padding:10px 16px;border-radius:var(--r-pill);
  background:var(--mark);color:#1a2c2e;font-weight:700;
}
.menu-toggle{
  display:none;position:relative;z-index:1100;border:0;background:transparent;
  width:44px;height:44px;padding:10px;color:currentColor;cursor:pointer;
}
.menu-toggle span{display:block;height:2px;background:currentColor;margin:7px 0;transform-origin:center;transition:transform var(--dur-base) var(--ease-drawer),opacity var(--dur-fast) var(--ease-out)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(9px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-9px) rotate(-45deg)}

/* Type */
.eyebrow{
  display:inline-block;margin-bottom:var(--s-2);
  font-family:var(--font-label);font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mark);
}
.eyebrow.light{color:var(--mark)}
.eyebrow.on-dark{color:var(--mark)}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
h1{font-size:var(--fs-hero);margin-bottom:var(--s-2)}
h2{font-size:var(--fs-h2);margin-bottom:var(--s-3)}
p{margin:0}
.lead{font-size:var(--fs-lead);line-height:1.7;margin-bottom:var(--s-2)}
.muted{color:var(--text-muted)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:var(--r-pill);
  font-weight:700;border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
}
.btn:active{transform:scale(.98);transition-duration:var(--dur-instant)}
.btn:focus-visible,.nav a:focus-visible,.menu-toggle:focus-visible,.text-link:focus-visible,.contact-links a:focus-visible,.line-float:focus-visible,.cert-tile:focus-visible{
  outline:2px solid var(--mark);outline-offset:3px;
}
.btn-mark{background:var(--mark);color:#1a2c2e}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.text-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--on-dark);border-bottom:1px solid rgba(233,239,238,.35);padding-bottom:4px;
}
.text-link.dark{color:var(--ink);border-bottom-color:var(--mist)}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;background:var(--ink-2);overflow:hidden}
.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-image{object-fit:cover}
.hero-shade{background:linear-gradient(180deg,rgba(8,45,51,.18) 0%,rgba(8,45,51,.55) 48%,rgba(8,45,51,.88) 100%)}
.hero-layout{position:relative;z-index:1;padding:140px 0 88px;max-width:min(960px,100%)}
.hero h1{
  white-space:nowrap;
  font-size:clamp(1.4rem,1.05rem + 2.6vw,3.75rem);
}
.hero-copy p{max-width:34em;color:var(--on-dark);margin-bottom:var(--s-4)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}

/* Facts band */
.facts{border-bottom:var(--hairline);background:var(--bone)}
.facts-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--col-gap);padding:var(--s-5) 0;align-items:end;
}
.facts-quote{
  font-family:var(--font-display);font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  font-weight:500;line-height:1.35;letter-spacing:var(--ls-heading);color:var(--ink);
}
.facts-table{display:grid;gap:0}
.facts-table div{
  display:grid;grid-template-columns:140px 1fr;gap:var(--s-2);
  padding:14px 0;border-top:var(--hairline);font-size:.95rem;
}
.facts-table div:first-child{border-top:0;padding-top:0}
.facts-table dt{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.facts-table dd{margin:0;font-weight:var(--fw-strong);color:var(--ink)}

/* Sections */
.section{padding:var(--s-section) 0}
.section.night{background:var(--ink-2);color:var(--on-dark)}
.section.night .lead,.section.night .muted{color:var(--on-dark-muted)}
.section.night .eyebrow{color:var(--mark)}
.column{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:var(--col-gap);align-items:center;
}
.column.reverse{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.column.reverse .copy{order:2}
.column.reverse .media{order:1}
@media (min-width:981px){
  .column.reverse .copy{order:0}
  .column.reverse .media{order:0}
}
.media{margin:0;border-radius:var(--r-img);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}
.media.portrait{aspect-ratio:4/5}
.media.square{aspect-ratio:1}
.media.wide{aspect-ratio:16/10}

.pull-quote{
  font-family:var(--font-display);font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem);
  font-weight:500;line-height:1.4;margin:0 0 var(--s-3);color:inherit;
}
.meta-lines{display:grid;gap:10px;margin:var(--s-3) 0 0;padding:0;list-style:none}
.meta-lines li{
  display:grid;grid-template-columns:72px 1fr;gap:var(--s-2);
  padding-top:10px;border-top:var(--hairline);font-size:.95rem;
}
.section.night .meta-lines li{border-top-color:rgba(223,229,227,.18)}
.meta-lines b{font-family:var(--font-label);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.section.night .meta-lines b{color:var(--on-dark-muted)}

/* Process steps */
.process{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:0}
.process li{
  display:grid;grid-template-columns:48px 1fr;gap:var(--s-2);
  padding:16px 0;border-top:1px solid rgba(223,229,227,.18);
}
.process li:first-child{border-top:0;padding-top:0}
.process .num{
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  color:var(--mark);padding-top:4px;
}
.process b{display:block;font-weight:var(--fw-strong);margin-bottom:4px}
.process span{display:block;color:var(--on-dark-muted);font-size:.95rem}

.tide-line{display:block;width:min(100%,320px);height:28px;margin:0 0 var(--s-2);overflow:visible}
.tide-wave{stroke:rgba(216,164,50,.45);stroke-width:2;fill:none;stroke-linecap:round}

/* Plate */
.plate{position:relative;min-height:min(72vh,640px);display:grid;place-items:end stretch;color:#fff;background:var(--ink-2)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,45,51,.72))}
.plate figcaption{
  position:relative;z-index:1;padding:28px var(--shell);width:100%;
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:rgba(233,239,238,.9);
}
.plate.compact{min-height:min(56vh,480px)}
.plate-overlay{
  position:relative;z-index:1;padding:var(--s-5) 0 36px;width:var(--shell);margin-inline:auto;
}
.plate-overlay p{max-width:28em;color:var(--on-dark);margin-top:var(--s-2)}
.plate-overlay a{color:var(--mark);border-bottom:1px solid rgba(216,164,50,.4)}

/* Scale */
.scale{background:var(--bone-2)}
.scale-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--col-gap);align-items:start;
}
.scale-map{margin:0;background:#e6f1ec;border-radius:var(--r-img);overflow:hidden;border:var(--hairline)}
.scale-map svg{display:block;width:100%;height:auto}
.scale-map figcaption{
  padding:12px 16px;font-size:.9rem;color:var(--text-muted);background:rgba(246,244,238,.9);
  letter-spacing:.02em;
}
.scale-map .pm-inlet{transform-box:fill-box;transform-origin:center}
.scale-stat-num{
  font-family:var(--font-display);font-size:clamp(4.5rem,3rem + 5vw,7rem);
  line-height:.9;color:var(--mark);font-variant-numeric:tabular-nums;margin:var(--s-2) 0 var(--s-1);
}
.scale-stat-num small{display:block;font-size:1.25rem;color:var(--ink);margin-top:10px;letter-spacing:var(--ls-heading)}
.data-table{margin-top:var(--s-4);display:grid;gap:0}
.data-table div{
  display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s-2);
  padding:12px 0;border-top:var(--hairline);font-size:.95rem;
}
.data-table dt{color:var(--text-muted)}
.data-table dd{margin:0;font-weight:var(--fw-strong);color:var(--ink)}
.scale-note{margin-top:var(--s-3);font-size:.92rem;color:var(--text-muted)}

/* Trust */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
.cert-tile{
  display:block;border:var(--hairline);border-radius:var(--r-img);overflow:hidden;background:#fff;
  transition:border-color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .cert-tile:hover{border-color:var(--tide)}
}
.cert-tile img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.cert-tile .meta{padding:14px 16px;display:grid;gap:4px}
.cert-tile b{font-size:.95rem;color:var(--ink)}
.cert-tile span{font-size:.85rem;color:var(--text-muted)}
.trust-links{margin-top:var(--s-4);display:grid;gap:10px}
.trust-links a{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;border-top:var(--hairline);font-weight:var(--fw-strong);
}
.trust-links a:last-child{border-bottom:var(--hairline)}
.trust-links small{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--text-muted);text-transform:uppercase}

/* Education */
.edu-media{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:end}
.edu-media figure{margin:0;border-radius:var(--r-img);overflow:hidden}
.edu-media img{width:100%;height:100%;object-fit:cover}
.edu-main{aspect-ratio:4/5}
.edu-side{aspect-ratio:4/4.4;transform:translateY(28px)}
.verbs{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:0}
.verbs li{padding:14px 0;border-top:var(--hairline)}
.verbs b{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:500;margin-bottom:4px}
.verbs span{color:var(--text-muted)}

/* Product + steps */
.product-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--col-gap);align-items:center;
}
.product-list{list-style:none;margin:var(--s-3) 0 0;padding:0}
.product-list li{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-2);
  padding:12px 0;border-top:var(--hairline);
}
.product-list span{color:var(--text-muted);font-size:.9rem}
.steps{list-style:none;margin:var(--s-4) 0 0;padding:0}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:var(--s-2);padding:12px 0;border-top:var(--hairline)}
.steps .num{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--mark);padding-top:3px}

/* Contact */
.contact{background:var(--ink-2);color:var(--on-dark);padding:var(--s-section) 0}
.contact-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:var(--col-gap);align-items:start}
.contact .lead{color:var(--on-dark-muted)}
.contact-links{display:grid;gap:8px;margin-top:var(--s-3)}
.contact-links a{
  padding:12px 14px;border:1px solid rgba(223,229,227,.2);border-radius:var(--r-ui);
  font-weight:var(--fw-strong);transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
.contact-links a[href*="line"]{border-color:rgba(6,199,85,.45)}
.contact-form{background:var(--bone);color:var(--text);padding:28px;border-radius:var(--r-img)}
.contact-form label{display:block;font-weight:700;font-size:.8rem;margin-bottom:14px}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;margin-top:7px;border:1px solid var(--mist);background:#fff;
  padding:12px 14px;border-radius:var(--r-ui);outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.contact-form input:focus-visible,.contact-form textarea:focus-visible,.contact-form select:focus-visible{
  border-color:var(--mark);box-shadow:0 0 0 3px rgba(216,164,50,.25);
}
.contact-form textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form small{display:block;color:var(--text-muted);margin-top:12px}
.contact-form small.is-success{color:var(--ink);font-weight:700}
.contact-form small.is-error{color:#8a3b2a;font-weight:700}
.btn.is-success{background:#1f6b4a;color:#fff}

/* Profile table + footer */
.profile{background:var(--bone);border-top:var(--hairline);padding:var(--s-5) 0}
.profile-table{display:grid;gap:0}
.profile-table div{
  display:grid;grid-template-columns:160px 1fr;gap:var(--s-2);
  padding:12px 0;border-top:var(--hairline);font-size:.95rem;
}
.profile-table div:first-child{border-top:0;padding-top:0}
.profile-table dt{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.profile-table dd{margin:0;color:var(--ink)}
footer{background:var(--bone-2);padding:28px 0;border-top:var(--hairline)}
.footer-inner{display:grid;grid-template-columns:160px 1fr auto;gap:var(--s-3);align-items:center}
.footer-inner img{width:150px}
.footer-inner p,.footer-inner small{color:var(--text-muted);margin:0}
.line-float{
  position:fixed;right:20px;bottom:20px;z-index:900;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--line-flag);color:#fff;font-weight:800;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  transition:transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .line-float:hover{transform:translateY(-2px)}
}

/* Motion */
html.motion-ok .hero-image{animation:heroZoom var(--dur-focal) var(--ease-out) both}
html.motion-ok .hero-copy{animation:rise var(--dur-reveal) var(--ease-out) 300ms both}
@keyframes heroZoom{from{transform:scale(1.04)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(var(--reveal-y))}to{opacity:1;transform:none}}
html.motion-ok [data-reveal]{opacity:0;transform:translateY(var(--reveal-y))}
html.motion-ok [data-reveal].is-revealed{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
}
html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-outline{stroke-dasharray:1;stroke-dashoffset:1}
html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-water{clip-path:inset(0 0 100% 0)}
html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-partitions{clip-path:inset(0 100% 0 0)}
html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-marker{opacity:0}
html.motion-ok .tide-wave.is-running{animation:tideDrift var(--dur-loop) linear infinite}
@keyframes tideDrift{from{transform:translateX(0)}to{transform:translateX(-60px)}}

@media (max-width:980px){
  .menu-toggle{display:block}
  .nav{
    position:fixed;inset:0;z-index:1050;background:var(--bone);color:var(--ink);
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    padding:80px 11vw;gap:18px;transform:translateX(100%);
    transition:transform var(--dur-base) var(--ease-drawer);
  }
  .nav.open{transform:none}
  .nav a{font-size:1.85rem;font-family:var(--font-display);font-weight:500}
  .nav-contact{font-size:1rem!important;font-family:var(--font-body)!important}
  .facts-grid,.column,.column.reverse,.scale-grid,.product-grid,.contact-grid,.trust-grid,.edu-media{grid-template-columns:1fr}
  .column.reverse .copy,.column.reverse .media{order:initial}
  .edu-side{transform:none}
  .facts-table div,.profile-table div{grid-template-columns:1fr}
  .plate{min-height:56vh}
}
@media (max-width:720px){
  .shell{width:min(calc(100% - 32px),1200px)}
  .header-inner{height:68px}
  .logo{width:132px;height:34px}
  .hero-layout{padding:120px 0 72px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .form-row{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-inner img{margin:auto}
  .line-float{right:14px;bottom:14px}
  .trust-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.motion-ok .hero-image,html.motion-ok .hero-copy{animation:none}
  html.motion-ok [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-outline,
  html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-water,
  html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-partitions,
  html.motion-ok .scale-map[data-pond-map]:not(.is-played) .pm-marker{
    stroke-dashoffset:0!important;clip-path:none!important;opacity:1!important
  }
  .tide-wave,.tide-wave.is-running{animation:none!important}
  .btn:hover,.btn:active,.line-float:hover{transform:none}
}