:root{
  --pearl:#f7faf9;--ink:#123d3b;--ink2:#1f6762;--muted:#647773;--line:#dfe9e7;
  --orange:#ff704f;--sun:#ffd35c;--aqua:#54d4cb
}
.topbar .vn-clock{margin-left:auto}.back{margin-left:0}

.about-hero{
  padding:70px 0 58px;
  background:
    radial-gradient(circle at 82% 16%,rgba(84,212,203,.20),transparent 26rem),
    radial-gradient(circle at 20% 90%,rgba(255,211,92,.16),transparent 20rem),
    linear-gradient(180deg,#eef8f6,#fff)
}
.about-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:34px;align-items:end
}
.about-hero h1{
  max-width:880px;margin:0;color:var(--ink);font-size:clamp(58px,8vw,108px);
  line-height:.85;letter-spacing:-.065em
}
.about-hero p:last-child{
  max-width:760px;margin:24px 0 0;color:var(--muted);font-size:18px;line-height:1.65
}
.about-mark{
  min-height:260px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);border-radius:28px;background:#fff;
  box-shadow:0 20px 60px rgba(18,61,59,.08)
}
.about-mark img{width:100px;height:100px;object-fit:contain;object-position:left center}
.about-mark strong{margin-top:18px;color:var(--ink);font-size:24px;letter-spacing:-.03em}
.about-mark span{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}

.about-purpose,.about-made,.about-open{padding-top:58px;padding-bottom:58px}
.about-section-head{max-width:900px;margin-bottom:22px}
.about-section-head h2,.about-made h2,.about-open h2{
  margin:0;color:var(--ink);font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.05em
}
.about-story-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px
}
.about-story-grid article{
  min-height:280px;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fff
}
.about-story-grid span{
  display:block;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.14em
}
.about-story-grid h3{
  margin:42px 0 10px;color:var(--ink);font-size:26px;line-height:1.05;letter-spacing:-.035em
}
.about-story-grid p{
  margin:0;color:var(--muted);font-size:15px;line-height:1.65
}

.about-system{padding:58px 0;background:var(--pearl)}
.about-flow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px
}
.about-flow article{
  min-height:300px;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fff
}
.about-flow-icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:15px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:900
}
.about-flow article>span{
  display:block;margin-top:38px;color:var(--ink2);font-size:11px;font-weight:900;letter-spacing:.13em
}
.about-flow strong{
  display:block;margin-top:7px;color:var(--ink);font-size:23px;line-height:1.1
}
.about-flow p{
  margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.6
}

.about-made{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:28px;align-items:start
}
.about-made-copy>p:not(.kicker){
  max-width:760px;margin:18px 0 0;color:var(--muted);font-size:16px;line-height:1.72
}
.about-principles{
  display:grid;gap:8px
}
.about-principles>div{
  padding:18px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px 12px;
  border:1px solid var(--line);border-radius:18px;background:#fff
}
.about-principles span{
  grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:#eef6f3;color:var(--ink);font-size:10px;font-weight:900
}
.about-principles strong{color:var(--ink);font-size:16px}
.about-principles small{color:var(--muted);font-size:13px;line-height:1.45}

.source-section{padding:58px 0;background:#eef6f4}
.source-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px
}
.source-grid>div{
  min-height:245px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff
}
.source-grid span{
  display:block;color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.12em
}
.source-grid strong{
  display:block;margin-top:28px;color:var(--ink);font-size:20px;line-height:1.15
}
.source-grid p{
  margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.62
}

.about-open{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:28px;align-items:start
}
.about-open>p{
  margin:0;padding:22px;border-left:4px solid var(--orange);background:#fff8f4;
  color:#6b514b;font-size:15px;line-height:1.7
}

footer{margin:0;padding:38px 0 90px;background:var(--ink);color:#fff}
/* The approved transparent logo has deep-green artwork. Give it a light
   surface in the dark footer instead of recoloring or redrawing the mark. */
footer .about-footer-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px 18px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  line-height:0;
  text-decoration:none;
}
footer .about-footer-brand img{
  display:block;
  width:116px;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  margin:0;
  border:0;
  padding:0;
}
footer p{max-width:520px;font-size:17px;line-height:1.5}
footer nav{display:flex;flex-wrap:wrap;gap:18px;margin:24px 0;font-size:14px;font-weight:750}
footer small{color:rgba(255,255,255,.64);font-size:13px}

@media(max-width:900px){
  .about-hero-grid,.about-made,.about-open{grid-template-columns:1fr}
  .about-story-grid,.about-flow,.source-grid{grid-template-columns:1fr 1fr}
  .about-mark{min-height:210px}
}
@media(max-width:760px){
  .about-hero{padding:44px 0 34px}
  .about-hero h1{font-size:54px}
  .about-hero p:last-child{font-size:16px}
  .about-mark{min-height:180px;padding:20px;border-radius:22px}
  .about-story-grid,.about-flow,.source-grid{grid-template-columns:1fr}
  .about-purpose,.about-system,.about-made,.about-open,.source-section{padding-top:38px;padding-bottom:38px}
  .about-story-grid article,.about-flow article{min-height:auto}
  .about-story-grid h3{margin-top:28px}
  .about-section-head h2,.about-made h2,.about-open h2{font-size:34px}
}

.about-island-gallery{
  padding-top:26px;padding-bottom:18px;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:10px
}
.about-island-gallery figure{
  position:relative;margin:0;overflow:hidden;border-radius:24px;background:#E8F1EF
}
.about-island-gallery img{display:block;width:100%;height:100%;object-fit:cover}
.about-island-main{min-height:520px}
.about-island-side{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.about-island-side figure{min-height:255px}
.about-island-gallery figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;
  padding:10px 12px;display:flex;justify-content:space-between;gap:12px;align-items:flex-end;
  border:1px solid rgba(255,255,255,.16);border-radius:13px;
  background:rgba(8,42,40,.68);backdrop-filter:blur(10px);
  color:#fff;font-size:12px;line-height:1.4
}
.about-island-gallery figcaption span{flex:1}
.about-island-gallery figcaption a{flex:none;color:#fff;font-weight:800;white-space:nowrap}
@media(max-width:900px){
  .about-island-gallery{grid-template-columns:1fr}
  .about-island-main{min-height:420px}
  .about-island-side{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .about-island-side figure{min-height:250px}
}
@media(max-width:760px){
  .about-island-gallery{padding-top:14px;padding-bottom:10px;gap:8px}
  .about-island-main{min-height:330px}
  .about-island-side{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .about-island-side figure{flex:0 0 86%;min-height:250px;scroll-snap-align:center}
  .about-island-gallery figcaption{font-size:11px}
}