/* ===== $10k refinement layer (2026-10-22). Loaded after site.css; overrides by cascade.
   Critic: design-studio (Opus) "gap to a USD 10k build". Builder: main session. ===== */

/* ---- type: fewer sizes, even line breaks ---- */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
h1{letter-spacing:-.025em}
h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.02em}
h3{font-size:24px}
.lead{font-size:20px}
.brief .answer,.ph .answer{max-width:68ch;font-size:17px;line-height:1.75;color:var(--ink)}
.coord{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.hero .eyebrow .coord{margin-left:10px;padding-left:12px;border-left:1px solid var(--line);color:var(--muted)}

/* ---- rhythm: white chapters divided by hairlines, one dark chapter as the peak ---- */
section{padding:104px 0}
.tint,.sea{background:transparent}
main>section+section{border-top:1px solid var(--line)}
.hero+section{border-top:0}
.dark{background:var(--brand-navy);color:#C9D8E6;border-top:0!important}
.dark+section{border-top:0}
.dark h2,.dark h3,.dark .lt{color:#fff}
.dark p,.dark .feature p{color:#C9D8E6}
.dark .feature .where,.dark .proj-list .lw{color:#F09A5C}
.dark .feature .figure{color:#9FD2EE}
.dark .proj-list{border-top-color:rgba(255,255,255,.35)}
.dark .proj-list a{border-bottom-color:rgba(255,255,255,.14)}
.dark .proj-list a:hover .lt{color:#9FD2EE}
.dark .more{color:#9FD2EE}
.wrap.narrow{max-width:820px}

/* ---- hero: the client's photo owns a third of the first screen ---- */
.hero{padding:120px 0 0}
.hero h1{font-size:clamp(36px,5.2vw,64px)}
.letterbox{margin-top:40px;height:clamp(280px,40vw,560px)}
.lb-cap{margin-top:10px;font-size:14px;color:var(--muted)}

/* ---- inner page heads: words left, one real photo right ---- */
.ph{padding:128px 0 72px}
.ph-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end}
.ph .lead{margin-top:16px}
.ph h2.label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:28px 0 8px;font-weight:700}
.ph-photo{margin:0}
.ph-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px}

/* ---- cards: the photo carries the shape, no ghost boxes ---- */
.tile,.vessel,.proj,.fam{border:0;background:transparent;border-radius:0}
.tile img,.vessel img,.proj img,.fam img{border-radius:8px}
.tile .cap{padding:14px 2px 0}
.vessel .body,.proj .body,.fam .body{padding:16px 2px 0}
.vessel:hover{box-shadow:none;transform:none}
.specs{border-top:1px solid var(--line);padding-top:12px}
.proj .body{padding-bottom:8px}

/* ---- About: vision + pillars as a plain list ---- */
.quote{margin-bottom:28px}
.pillars-list{margin-top:8px;border-top:1px solid var(--brand-navy)}
.prow{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.prow dt{font-family:var(--font-head);font-weight:700;color:var(--brand-navy);font-size:18px}
.prow dd{margin:0;color:var(--muted)}

/* ---- place lists (restored: they lived in the removed sea-chart block) ---- */
.places{list-style:none;columns:2;column-gap:28px;margin-top:6px;font-size:16.5px;padding:0}
.places li{break-inside:avoid;padding:4px 0;border-bottom:1px solid var(--line)}
.places-btns li{border-bottom:0;padding:0}
/* ---- map list: home port first, the other 16 below ---- */
.homeport{margin:0 0 12px;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.homeport .place-btn{display:inline-block;width:auto;font:700 18px var(--font-head);letter-spacing:0;text-transform:none;color:var(--brand-navy);padding:4px 8px}

/* ---- navigation: bigger mark, quiet island, a real "you are here" ---- */
.island{border:0;box-shadow:0 1px 2px rgba(2,38,74,.08),0 4px 12px rgba(2,38,74,.08)}
.island .mark img{height:40px}
.island ul a{position:relative}
.island ul a[aria-current=page]{background:transparent;color:var(--brand-navy)}
.island ul a[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--brand-orange)}

/* ---- micro-interactions ---- */
.wa-pill:active,.btn:active,.g-btn:active{transform:scale(.97);transition-duration:.1s}

/* ---- motion: three moments only (tiles, the feature photo, the map) ---- */
.js .rv{opacity:1;transform:none;transition:none}
.js .tile.rv{opacity:0;transform:translateY(12px);transition:opacity .48s cubic-bezier(.2,0,0,1),transform .48s cubic-bezier(.2,0,0,1)}
.js .tile.rv.on{opacity:1;transform:none}
.js .tile.rv:nth-child(2){transition-delay:.04s}.js .tile.rv:nth-child(3){transition-delay:.08s}
.js .tile.rv:nth-child(4){transition-delay:.12s}.js .tile.rv:nth-child(5){transition-delay:.16s}.js .tile.rv:nth-child(6){transition-delay:.2s}
.js .feature.rv img{clip-path:inset(0 0 12% 0);transition:clip-path .6s cubic-bezier(.2,0,0,1)}
.js .feature.rv.on img{clip-path:inset(0)}

/* ---- client logos: full colour, even height, no dividers ---- */
.marquee.logos li{border-right:0;height:112px;width:220px}
.marquee.logos img{filter:none;opacity:1;max-height:56px;max-width:160px}

/* ---- footer: an ending, not a column dump ---- */
.sign{padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid rgba(255,255,255,.18);position:relative}
.big-line{font-family:var(--font-head);font-weight:700;font-size:clamp(30px,4vw,44px);color:#fff;letter-spacing:-.02em;line-height:1.1}
.sign .coord{margin-top:10px;color:#9FB8CF;font-size:15px}
.towline-art{display:block;width:min(600px,100%);height:40px;margin-top:18px}
.towline-art path{fill:none;stroke:#5FA8D8;stroke-width:1.6;stroke-dasharray:6 7;opacity:.8}
.js .towline-art path{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset .9s cubic-bezier(.2,0,0,1)}
.js .towline-art.on path{stroke-dashoffset:0}
.js .towline-art.done path{stroke-dasharray:6 7;stroke-dashoffset:0;transition:none}

/* ---- phone ---- */
@media (max-width:920px){
  .ph-grid{grid-template-columns:1fr;gap:28px}
  .ph-photo img{aspect-ratio:4/3}
  .drawer{display:block;position:fixed;top:76px;left:12px;right:12px;z-index:49;background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(2,38,74,.16);padding:10px;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s cubic-bezier(.2,0,0,1),transform .18s cubic-bezier(.2,0,0,1),visibility 0s linear .18s}
  .drawer[data-open]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .island .mark img{height:34px}
  .prow{grid-template-columns:1fr;gap:4px}
}
@media (max-width:600px){
  section{padding:72px 0}
  .hero{padding-top:104px}
  .hero .sub{font-size:17px;line-height:1.55}
  .hero .eyebrow{flex-wrap:wrap}
  .hero .eyebrow .coord{flex-basis:100%;margin:4px 0 0 44px;padding:0;border:0}
  .actions{flex-wrap:nowrap;align-items:center;gap:18px}
  .actions .btn.line{border:0;padding:0;min-height:44px;text-decoration:underline;text-underline-offset:4px}
  .letterbox{margin-top:28px}
  .ph{padding:104px 0 56px}
}
@media (prefers-reduced-motion:reduce){
  .js .tile.rv,.js .feature.rv img{opacity:1;transform:none;clip-path:none;transition:none}
  .js .towline-art path{stroke-dasharray:6 7;stroke-dashoffset:0;transition:none}
  .wa-float,.place-btn,.drawer,.wa-pill,.btn,.g-btn{transition:none!important}
}

/* ---- language switch: EN · BM · 中文 ---- */
.lang{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--brand-sea)}
.lang a{font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:6px 9px;border-radius:999px;line-height:1}
.lang a:hover{color:var(--brand-navy)}
.lang a[aria-current=true]{background:#fff;color:var(--brand-navy);box-shadow:0 1px 2px rgba(2,38,74,.12)}
.lang-drawer{display:none}
html[lang^=zh] body{font-family:"Source Sans 3","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
html[lang^=zh] h1,html[lang^=zh] h2,html[lang^=zh] h3{font-family:Manrope,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;letter-spacing:0}
html[lang^=zh] .kw{font-family:"Source Serif 4","Songti SC","SimSun","Noto Serif SC",serif}
@media (max-width:920px){
  .island>.lang{display:none}
  .lang-drawer{display:flex;align-self:flex-start;margin:4px 4px 8px;width:max-content}
  .drawer .lang-drawer a{border:0;padding:8px 14px;font-size:14px}
}
html[lang^=zh] .eyebrow{letter-spacing:.08em}
html[lang^=zh] .actions .btn,html[lang^=zh] .wa-pill{white-space:nowrap}
@media (max-width:600px){html[lang^=zh] .actions{flex-wrap:wrap;gap:12px 20px}}