/* ZeL CuraTours · Home · 2026-10-02
   One stylesheet for the homepage (EN + ZH). Replaces home-ponant.css + home-editorial.css
   for the homepage only; the Method draft still uses its own files.
   Locked Editorial Visual Direction: Paper = space · Warm Ink = information ·
   Photography = destination · ZeL Blue #4BA8D1 = what matters (Zelts' reference board, 2026-10-02; earlier #539EBB) · Gold = fine editorial rules only ·
   Deep Navy = depth (closing panel, footer). No pale-blue backgrounds; ZeL Blue is a clean solid.
   Scope: body.pn (Chinese page: body.pn.zh). Self-contained: does not load site.css. */

:root{
  /* palette from Zelts' reference board 2026-10-02: Paper #FAF9F6 · Warm Ink #3A3A3A · Deep Navy #0F2A44 · Deep Gold #C9A96B · ZeL Blue #4BA8D1 */
  --paper:#FAF9F6; --panel:#F4F2EE; --panel-2:#ECE9E3; /* lighter panels, after Zelts' template board 2026-10-02 (was #EFEBE4 / #E6E1D8) */
  --ink:#3A3A3A; --ink-2:#55524C; --muted:#64615A; --line:#D9D4CA;
  --zel:#4BA8D1; --gold:#C9A96B; --night:#0F2A44; --gold-line:rgba(201,169,107,.5);
  --serif:"Lora",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
  --w:1320px; --g:clamp(20px,4vw,56px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.pn{background:var(--paper);color:var(--ink);font:400 19px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
.pn img{display:block;max-width:100%}
.pn a{color:inherit;text-decoration:none}
.pn i{font-style:normal}
.pn figure{background:var(--panel-2)} /* warm tone while photographs load */
.pn .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--g)}
.pn .nw{white-space:nowrap}
.pn h1,.pn h2,.pn h3,.pn h4{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}

/* Small uppercase label (Warm Ink) */
.pn .eb{font:500 16px/1.45 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* chapter marker: a fine gold rule before the label (intro also gets one after) */
.pn .intro-in .eb::before,.pn .pban-in .eb::before,.pn .mblock-in .eb::before,.pn .talk .eb::before,
.pn .band-in .eb::before,.pn .arch .eb::before,.pn .trust-hd .eb::before{
  content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin:0 14px 3px 0}
.pn .intro-in .eb::after{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin:0 0 3px 14px}

/* Buttons: solid ZeL Blue with white type, Medium weight (Zelts 2026-10-02: Regular/Medium only, no Bold) */
.pn .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;background:var(--zel);color:#fff;font:500 16px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--zel);transition:background .25s,border-color .25s,color .25s}
.pn .btn.line{background:transparent;color:var(--ink);border-color:var(--ink);font-weight:500}

/* Text link: Warm Ink words, ZeL Blue rule and arrow */
.pn .more{display:inline-flex;align-items:center;gap:10px;font:500 16px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--zel);padding-bottom:4px}
.pn .more i{color:var(--zel);transition:transform .25s}
.pn .more:hover i{transform:translateX(4px)}

/* Reveal */
.pn .r{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.pn .r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pn .r{opacity:1;transform:none;transition:none}}

/* ---------- Header: one bar only (Zelts 2026-10-02); the utility strip is hidden, the language switch sits in the bar ---------- */
.pn .hdr{position:fixed;inset:0 0 auto 0;z-index:50;color:#fff;transition:background .35s,color .35s,box-shadow .35s}
.pn .util{display:none}
.pn .util .wrap{display:flex;justify-content:space-between;align-items:center;height:44px;font:400 15px/1 var(--sans);letter-spacing:.04em}
.pn .util-r{display:flex;gap:28px;align-items:center}
.pn .util a:hover{opacity:.75}
.pn .util .lang{font-weight:500;letter-spacing:.12em}
.pn .bar .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;height:84px}
.pn .nav-l{display:flex;justify-content:center;gap:34px;grid-column:2;grid-row:1}
.pn .nav-l a{font:500 16px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid transparent}
.pn .nav-l a:hover{border-bottom-color:currentColor}
.pn .mark{font:500 22px/1 var(--serif);letter-spacing:.01em;white-space:nowrap;grid-column:1;grid-row:1}
.pn .mark span{color:var(--zel)} /* wordmark: ZeL in ZeL Blue, same size as CuraTours */
.pn .nav-r{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;align-items:center;gap:18px}
.pn .hdr .btn{min-height:48px;padding:0 24px;background:transparent;border-color:rgba(255,255,255,.85);color:#fff}
.pn .menu-btn{display:none;width:48px;height:48px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;color:inherit}
.pn .menu-btn span{display:block;width:26px;height:2px;background:currentColor;margin:0 auto}
.pn .m-lang{display:inline;font:500 16px/1 var(--sans);letter-spacing:.12em}
/* solid state after scroll (site.js toggles .solid on #nav) */
.pn .hdr.solid{background:#fff;color:var(--night);box-shadow:0 1px 0 var(--line)}
.pn .hdr.solid .util{border-bottom-color:var(--line);background:var(--panel)}

/* Mobile menu (site.js handles open/close) */
.pn .mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(15,23,32,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.pn .mobile-menu.open{opacity:1;visibility:visible}
.pn .mm-inner{position:absolute;inset:0 0 0 auto;width:min(420px,100%);background:#fff;color:var(--ink);padding:96px 32px 40px;display:flex;flex-direction:column;overflow-y:auto}
.pn .mm-inner>a{font:400 26px/1.3 var(--serif);padding:16px 0;border-bottom:1px solid var(--line)}
.pn .mm-inner .btn{margin-top:28px;font-family:var(--sans);font-size:16px;font-weight:500;border-bottom:0 none var(--zel)}
.pn .mm-inner .mm-small{font:400 17px/1.5 var(--sans);border:0;padding:10px 0 0}
.pn .mm-close{position:absolute;top:22px;right:20px;width:48px;height:48px;font:300 34px/1 var(--sans);background:none;border:0;color:var(--ink);cursor:pointer}

/* ---------- Hero ---------- */
.pn .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;color:#fff;text-align:center;overflow:hidden;background:var(--night)}
.pn .hero-bg,.pn .hero-bg img,.pn .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn .hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% 48%,rgba(10,15,22,.42),rgba(10,15,22,0) 75%),linear-gradient(180deg,rgba(10,15,22,.55) 0%,rgba(10,15,22,.18) 30%,rgba(10,15,22,.22) 58%,rgba(10,15,22,.66) 100%)}
.pn .hero-in{position:relative;z-index:1;padding-top:128px;padding-bottom:190px}
.pn .hero h1{font-size:clamp(54px,7.4vw,112px);line-height:1.02;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.pn .hero-k{text-shadow:0 1px 18px rgba(0,0,0,.6);margin-top:24px;font:400 clamp(24px,2.2vw,32px)/1.4 var(--serif)}

/* Finder bar: three routes + CTA over the hero */
.pn .finder{position:absolute;z-index:2;left:0;right:0;bottom:48px}
.pn .finder .wrap{max-width:1320px}
.pn .fbox{background:rgba(15,42,68,.62);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);color:#fff;display:grid;grid-template-columns:repeat(3,1fr) auto;border:1px solid rgba(255,255,255,.28);text-align:left} /* deep navy glass: white labels read clearly over any photo (senior-friendly pass 2026-10-02) */
.pn .fcell{display:flex;flex-direction:column;justify-content:center;min-height:96px;padding:0 48px 0 24px;border-right:1px solid rgba(255,255,255,.24);position:relative;transition:background .2s}
.pn .fcell:hover{background:rgba(255,255,255,.12)}
.pn .fcell small{display:block;font:500 18px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.pn .fcell span{display:block;margin-top:6px;font-size:16px;line-height:1.4;color:rgba(255,255,255,.82)}
.pn .fcell span:empty{display:none} /* one-line description under each route (idea from V17, 2026-10-02) */
.pn .fcell i{position:absolute;right:22px;top:50%;transform:translateY(-50%);color:#fff;font-size:20px}
.pn .fcell:hover i{color:var(--zel)}
.pn .fbox .btn{min-height:100%;padding:0 30px;letter-spacing:.08em;border-width:0;border-style:none}

/* ---------- Sections ---------- */
.pn section{padding:clamp(80px,10vw,150px) 0}
.pn .sand{background:var(--paper)}

/* Statement panel: centred heading, short gold rule, text */
.pn .intro{padding:clamp(96px,10vw,160px) 0 clamp(64px,7vw,104px)} /* core sentence a little lower; next section comes up (Zelts 2026-10-02) */
.pn .intro-in{max-width:1080px;margin:0 auto;text-align:center;padding:clamp(16px,2.4vw,40px) clamp(24px,6vw,112px) 0}
.pn .intro h2{font-size:clamp(30px,3.2vw,46px);line-height:1.22;margin:18px auto 0;max-width:1120px}
.pn .zb{color:var(--zel);font-weight:500} /* Blue Highlight: the second line of each statement heading (intro, architects, proof, closing), Medium weight (Zelts 2026-10-02) */
.pn .intro h2::after{content:"";display:block;width:96px;height:1px;margin:clamp(24px,2.6vw,34px) auto 0;background:var(--gold)}
.pn .intro-in p:not(.eb){margin:24px auto 0;max-width:820px;font-size:clamp(22px,2vw,28px);line-height:1.7;color:var(--ink-2);text-wrap:balance} /* larger (Zelts 2026-10-02) */
.pn .intro-in .eb{max-width:820px}
.pn .rule{width:48px;height:1px;background:var(--gold);margin:clamp(40px,4.5vw,64px) auto}
.pn .how h3{text-align:center;font-size:clamp(26px,2.6vw,38px);line-height:1.25}
.pn .steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(56px,4.4vw,64px)} /* four steps in one row, ~60px under the heading */
.pn .steps li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px clamp(14px,1.8vw,28px);border-left:1px solid var(--gold-line)}
.pn .steps li:first-child{border-left:0}
/* step icons: one fine line family, ZeL Blue, 72px (Zelts 2026-10-02) */
.pn .steps li::before{content:"";display:block;width:84px;height:84px;margin-bottom:20px;background:var(--zel);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.pn .steps li:nth-child(1)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='36' cy='11' r='3.2'/%3E%3Cpath d='M3 36 L15 19 L21 27'/%3E%3Cpath d='M13 36 L26 13 L39 36'/%3E%3Cpath d='M22.3 19.6 L26 13 L29.7 19.6 L27.6 18.2 L26 20.4 L24.4 18.2 Z'/%3E%3Cpath d='M3 40 H45'/%3E%3Cpath d='M11 44 H37'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='36' cy='11' r='3.2'/%3E%3Cpath d='M3 36 L15 19 L21 27'/%3E%3Cpath d='M13 36 L26 13 L39 36'/%3E%3Cpath d='M22.3 19.6 L26 13 L29.7 19.6 L27.6 18.2 L26 20.4 L24.4 18.2 Z'/%3E%3Cpath d='M3 40 H45'/%3E%3Cpath d='M11 44 H37'/%3E%3C/svg%3E")} /* Place: layered peaks, snow line, sun, terrain */
.pn .steps li:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15 V7 H15'/%3E%3Cpath d='M33 7 H41 V15'/%3E%3Cpath d='M41 33 V41 H33'/%3E%3Cpath d='M15 41 H7 V33'/%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Ccircle cx='24' cy='24' r='3.4'/%3E%3Cpath d='M24 12 V14.5'/%3E%3Cpath d='M24 33.5 V36'/%3E%3Cpath d='M12 24 H14.5'/%3E%3Cpath d='M33.5 24 H36'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15 V7 H15'/%3E%3Cpath d='M33 7 H41 V15'/%3E%3Cpath d='M41 33 V41 H33'/%3E%3Cpath d='M15 41 H7 V33'/%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Ccircle cx='24' cy='24' r='3.4'/%3E%3Cpath d='M24 12 V14.5'/%3E%3Cpath d='M24 33.5 V36'/%3E%3Cpath d='M12 24 H14.5'/%3E%3Cpath d='M33.5 24 H36'/%3E%3C/svg%3E")} /* What Matters: focus frame and lens */
.pn .steps li:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='36' r='3'/%3E%3Ccircle cx='24' cy='13' r='3'/%3E%3Ccircle cx='39' cy='30' r='3'/%3E%3Ccircle cx='9' cy='36' r='0.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='24' cy='13' r='0.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='39' cy='30' r='0.9' fill='%23000' stroke='none'/%3E%3Cpath d='M10.9 33.4 C14.5 26.5 18 20.5 21.8 15.4' stroke-dasharray='2 2.6'/%3E%3Cpath d='M26.7 14.7 C31.5 17.6 35.4 21.8 37.6 27.1' stroke-dasharray='2 2.6'/%3E%3Cpath d='M4 42 H44'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='36' r='3'/%3E%3Ccircle cx='24' cy='13' r='3'/%3E%3Ccircle cx='39' cy='30' r='3'/%3E%3Ccircle cx='9' cy='36' r='0.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='24' cy='13' r='0.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='39' cy='30' r='0.9' fill='%23000' stroke='none'/%3E%3Cpath d='M10.9 33.4 C14.5 26.5 18 20.5 21.8 15.4' stroke-dasharray='2 2.6'/%3E%3Cpath d='M26.7 14.7 C31.5 17.6 35.4 21.8 37.6 27.1' stroke-dasharray='2 2.6'/%3E%3Cpath d='M4 42 H44'/%3E%3C/svg%3E")} /* Connect: three stops on a dotted route */
.pn .steps li:nth-child(4)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Ccircle cx='24' cy='24' r='14.2'/%3E%3Cpath d='M24 6 V9.8'/%3E%3Cpath d='M24 38.2 V42'/%3E%3Cpath d='M6 24 H9.8'/%3E%3Cpath d='M38.2 24 H42'/%3E%3Cpath d='M24 12.5 L27 24 L21 24 Z' fill='%23000' stroke='none'/%3E%3Cpath d='M21 24 L24 35.5 L27 24'/%3E%3Ccircle cx='24' cy='24' r='1.1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Ccircle cx='24' cy='24' r='14.2'/%3E%3Cpath d='M24 6 V9.8'/%3E%3Cpath d='M24 38.2 V42'/%3E%3Cpath d='M6 24 H9.8'/%3E%3Cpath d='M38.2 24 H42'/%3E%3Cpath d='M24 12.5 L27 24 L21 24 Z' fill='%23000' stroke='none'/%3E%3Cpath d='M21 24 L24 35.5 L27 24'/%3E%3Ccircle cx='24' cy='24' r='1.1'/%3E%3C/svg%3E")} /* Journey: compass with bearings */
.pn .steps b{display:block;font:400 40px/1 var(--serif);color:var(--zel)}
.pn .steps b::before{content:"";display:block;width:24px;height:1px;margin:0 auto 18px;background:var(--gold)} /* fine gold dash under the icon */
.pn .steps .sd{margin-top:14px;max-width:17em;font-size:17px;line-height:1.75;color:var(--ink-2);text-wrap:balance}
.pn.zh .steps .sd{max-width:none;line-height:1.85} /* breaks only at the commas (.nw) */
.pn .steps h4{margin-top:14px;font-size:clamp(20px,1.6vw,24px);line-height:1.3}
.pn .steps em{display:block;margin-top:8px;font:400 16px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Full-bleed band that opens the product section */
.pn .band{padding:0;position:relative;color:#fff}
.pn .band figure{height:clamp(420px,46vw,640px);overflow:hidden}
.pn .band figure img{width:100%;height:100%;object-fit:cover}
.pn .band figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,22,0) 35%,rgba(10,15,22,.68) 100%)}
.pn .band-in{position:absolute;left:0;right:0;bottom:clamp(40px,6vw,80px);margin:0 auto}
.pn .band-in .eb{color:rgba(255,255,255,.88)}
.pn .band-in h2{margin-top:12px;font-size:clamp(34px,4.2vw,60px);line-height:1.12;max-width:1100px;text-shadow:0 2px 24px rgba(0,0,0,.35)}

/* Offset panel: the photograph steps out of a soft warm panel.
   Used by the method block, the private/corporate banners and the closing conversation. */
.pn .shop{padding:clamp(88px,9vw,140px) 0 clamp(64px,7vw,104px)}
.pn .talk-g,.pn .mblock{
  position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(36px,5vw,88px);align-items:start;color:var(--ink);
  padding:clamp(40px,4vw,56px) clamp(32px,5vw,88px) clamp(72px,7vw,104px) 0}
.pn .talk-g::before,.pn .mblock::before{
  content:"";position:absolute;top:0;bottom:0;left:9%;right:0;background:var(--panel);z-index:0}
.pn .talk-g>*,.pn .mblock>*{position:relative;z-index:1}
.pn .talk-g figure,.pn .mblock figure{grid-column:1;grid-row:1;min-height:0;aspect-ratio:6/5;overflow:hidden}
.pn .talk-g figure{aspect-ratio:5/6}
.pn .mblock-in,.pn .talk-g>div{grid-column:2;grid-row:1;align-self:center;padding:clamp(8px,1vw,16px) 0 0}
.pn .pban img,.pn .mblock img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.pn .pban:hover img{transform:scale(1.03)}
.pn .mblock:hover img{transform:scale(1.04)}
.pn .mblock-in h3{margin-top:14px;font-size:clamp(28px,2.6vw,40px);line-height:1.22}

/* Method block */
.pn .mblock{margin-top:clamp(64px,7vw,104px)}
.pn .mblock-in h3{text-align:left}
.pn .mblock-in p:not(.eb){margin-top:16px;color:var(--ink-2)}

/* Panel button: ink outline, ZeL Blue arrow; fills ZeL Blue when its panel is hovered */
.pn .pban-btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;min-height:56px;padding:0 26px;border:1px solid var(--ink);color:var(--ink);font:500 16px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s}
.pn .pban-btn i{color:var(--zel)}
.pn .mblock .pban-btn{background:#fff}
.pn .pban .pban-btn{background:var(--zel);border-color:var(--zel);color:#fff} /* entry buttons solid ZeL Blue: clearer split (Zelts 2026-10-02) */
.pn .pban .pban-btn i{color:#fff}
.pn .pban:hover .pban-btn{background:var(--night);border-color:var(--night)}
.pn .mblock:hover .pban-btn{background:var(--zel);border-color:var(--zel);color:#fff}
.pn .pban:hover .pban-btn i,.pn .mblock:hover .pban-btn i{color:#fff}

/* Private / corporate rows */
/* Each row: the entry card + its three journeys side by side, four equal columns (idea from V17, 2026-10-02).
   Same photo ratio in all four, so photos, titles and links line up; the entry card is set apart by its warm panel. */
.pn .prow{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px);align-items:stretch}
.pn .prow+.prow{margin-top:clamp(64px,6vw,96px)}
.pn .pgrid{display:contents}
.pn .pban{display:flex;flex-direction:column;background:var(--panel);color:var(--ink)}
.pn .pban figure{aspect-ratio:1/1;overflow:hidden} /* 1.25 x wider than a journey card, same photo height (portrait cards, Zelts 2026-10-02) */
.pn .prow+.prow .pban{background:var(--night);color:#fff} /* corporate entry card on Deep Navy */
.pn .prow+.prow .pban-in h3{color:rgba(255,255,255,.86)}
.pn .prow+.prow .pban:hover .pban-btn{background:#fff;border-color:#fff;color:var(--night)}
.pn .prow+.prow .pban:hover .pban-btn i{color:var(--night)}

/* Ready-to-go product cards */
.pn .pc{display:flex;flex-direction:column}
.pn .pc figure{position:relative;aspect-ratio:4/5;overflow:hidden} /* portrait, taller (Zelts 2026-10-02) */
.pn .pc img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.pn a.pc:hover img{transform:scale(1.04)}
.pn .pc .eb{margin-top:20px;min-height:1.5em} /* room for three lines, so titles line up across the row */
.pn .pc h3{margin-top:8px;font-size:20px;line-height:1.15;letter-spacing:0}
/* 2026-10-13 · card titles: sentence-case titles untracked; the four product names set in capitals keep .02em */
.pn a.jcard:is([href*="collections/first-arctic"],[href*="collections/alpine-crossing"],[href*="collections/new-zealand-open-road"],[href*="collections/high-alps"]) h3{letter-spacing:.02em}
.pn .pc p:not(.eb){flex-grow:1;margin-top:10px;font-size:17px;line-height:1.7;color:var(--ink-2)}
.pn .pc-go{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.pn .pc .more{align-self:flex-start}
/* ---------- Journey card · full-image overlay (2026-10-13) ----------
   One card system with the Journeys / About photo cards (site.css .case): photograph full-bleed, restrained dark gradient,
   optional top-left tag (status or season), centred white Lora title, one Jost supporting line, transparent CTA with a fine white border.
   Used by Private (take, hap) and Corporate (next-s, real-s). Desktop on-screen sizes: tools/unify/base.css. */
.pn .jcard{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--night);color:#fff;text-decoration:none}
.pn .jcard figure{position:absolute;inset:0;margin:0}
.pn .jcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s ease}
.pn a.jcard:hover img{transform:scale(1.05)}
.pn .jcard figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,22,.10) 0%,rgba(8,12,22,.22) 38%,rgba(8,12,22,.60) 62%,rgba(8,12,22,.88) 100%)}
.pn .jcard-st{position:absolute;left:14px;top:14px;z-index:3;max-width:calc(100% - 28px);font:500 15px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(8,12,22,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.26);border-radius:2px;padding:6px 11px;white-space:normal}
.pn .jcard-st.done{color:#fff;border-color:rgba(201,169,107,.75);background:rgba(8,12,22,.5)}
.pn .jcard-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,2.6vw,30px);text-align:center}
.pn .jcard h3{margin:0;font:400 22px/1.18 var(--serif);letter-spacing:0;color:#fff;text-wrap:balance}
.pn .jcard-l{margin-top:8px;font:400 15px/1.5 var(--sans);color:rgba(255,255,255,.9);text-wrap:balance}
.pn .jcard h3,.pn .jcard-l{text-shadow:0 1px 16px rgba(8,12,22,.6),0 1px 2px rgba(8,12,22,.45)}
.pn .jcard-go{display:inline-block;margin-top:20px;padding:9px 22px;border:1px solid rgba(255,255,255,.55);border-radius:2px;font:500 16px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#fff;transition:background .45s,color .45s,border-color .45s}
.pn .jcard-go i{font-style:normal;display:inline-block;margin-left:7px;transition:transform .45s}
.pn a.jcard:hover .jcard-go{background:#fff;color:var(--ink);border-color:#fff}
.pn a.jcard:hover .jcard-go i{transform:translateX(4px)}
.pn.zh .jcard h3{line-height:1.32}
.pn.zh .jcard-st{letter-spacing:.12em}
.pn.zh .jcard-go{letter-spacing:.06em}

/* ---------- Proof ---------- */
.pn .proof{padding-top:clamp(64px,7vw,104px)}
/* Proof (Zelts' reference 2026-10-02): label + statement left, short note right; four items split by gold hairlines.
   Numbers and the two item icons in ZeL Blue; titles Warm Ink; a short gold dash under each lead line. */
.pn .trust{display:grid;grid-template-columns:.8fr .8fr 1.1fr 1.1fr;row-gap:clamp(48px,5vw,72px);align-items:start}
.pn .trust-hd{grid-column:1/3}
.pn .trust h2{margin-top:14px;font-size:clamp(32px,3.6vw,54px)}
.pn .trust-note{grid-column:3/5;align-self:center;justify-self:start;max-width:28em;padding-left:clamp(18px,2.2vw,36px);font-size:clamp(18px,1.4vw,20px);line-height:1.85;color:var(--ink);text-wrap:balance} /* left edge lines up with the third item (Zelts template 2026-10-02) */
.pn .st{padding:0 clamp(18px,2.2vw,36px);border-left:1px solid var(--gold-line)}
.pn .trust-note+.st{border-left:0;padding-left:0}
.pn .st:last-child{padding-right:0}
.pn.zh .trust h2{font-size:clamp(30px,3vw,44px)} /* keeps 更实实在在交付执行过。 on one line */
.pn .st b{display:block;font:400 clamp(56px,6vw,88px)/1 var(--serif);color:var(--zel)}
.pn .st b::after{content:"";display:block;width:24px;height:1px;background:var(--gold);margin-top:22px}
.pn .st.sm b{font-size:clamp(22px,1.75vw,25px);line-height:1.3;color:var(--ink)}
.pn .st.sm b::after{content:none}
.pn .st.sm b::before{content:"";display:block;width:24px;height:1px;background:var(--gold);margin:22px 0 18px} /* icon, gold dash, title: same rhythm as number, dash, title */
.pn .st.sm::before{content:"";display:block;width:clamp(64px,6.6vw,96px);height:clamp(56px,6vw,88px);background:var(--zel);-webkit-mask:left center/contain no-repeat;mask:left center/contain no-repeat}
.pn .st.ic-arch::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 37 L13 24 L19 31 L27 15 L36 30 L40 25 L45 37'/%3E%3Cpath d='M24.4 20.2 L27 15 L29.6 20.2 L27.9 19.1 L27 20.8 L26.1 19.1 Z'/%3E%3Cpath d='M3 41 H45'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 37 L13 24 L19 31 L27 15 L36 30 L40 25 L45 37'/%3E%3Cpath d='M24.4 20.2 L27 15 L29.6 20.2 L27.9 19.1 L27 20.8 L26.1 19.1 Z'/%3E%3Cpath d='M3 41 H45'/%3E%3C/svg%3E")}
.pn .st.ic-globe::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='17'/%3E%3Cellipse cx='24' cy='24' rx='7.5' ry='17'/%3E%3Cpath d='M7 24 H41'/%3E%3Cpath d='M9.6 15 Q24 19 38.4 15'/%3E%3Cpath d='M9.6 33 Q24 29 38.4 33'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='17'/%3E%3Cellipse cx='24' cy='24' rx='7.5' ry='17'/%3E%3Cpath d='M7 24 H41'/%3E%3Cpath d='M9.6 15 Q24 19 38.4 15'/%3E%3Cpath d='M9.6 33 Q24 29 38.4 33'/%3E%3C/svg%3E")}
.pn .st>span{display:block;margin-top:18px;font-size:clamp(20px,1.6vw,22px);line-height:1.5;color:var(--ink)}
.pn .st.sm>span{margin-top:12px;font-size:clamp(18px,1.35vw,19px);line-height:1.75;color:var(--ink)}
.pn .st em{display:block;margin-top:14px;font:400 16px/1.5 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Image-led entry to all work */
.pn .arch{display:grid;grid-template-columns:8fr 4fr;gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(56px,6vw,88px);padding-top:clamp(48px,5vw,72px);border-top:1px solid var(--line)}
.pn .arch-th{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pn .arch-th figure{overflow:hidden;background:none}
.pn .arch-th img{width:100%;aspect-ratio:4/9;object-fit:cover;transition:transform 1.2s ease}
.pn .arch:hover .arch-th img{transform:scale(1.04)}
.pn .arch-th figcaption{margin-top:10px;font-size:16px;line-height:1.4;color:var(--muted)}
.pn .arch-tx h3{margin-top:12px;font-size:clamp(22px,1.8vw,26px);line-height:1.4;text-wrap:balance}
.pn .arch-tx .btn{margin-top:26px}

/* ---------- Conversation: the closing moment on Deep Navy ---------- */
.pn .talk-g::before{background:var(--night)}
.pn .talk-g>div{color:rgba(255,255,255,.9)}
.pn .talk figure img{width:100%;height:100%;object-fit:cover}
.pn .talk{padding-bottom:clamp(64px,7vw,104px)}
.pn .talk h2{font-size:clamp(34px,3.6vw,52px);line-height:1.15;margin-top:14px;color:#fff}
.pn .talk p{margin-top:20px;color:rgba(255,255,255,.84)}
.pn .talk .eb{color:rgba(255,255,255,.78)}
/* section labels (JOURNEY BEFORE ITINERARY, 设计方法, 设计好的旅程, 私人旅程, 企业旅程, 旅程作品, 开始对话, Our Expertise): 17px, own colours, not blue (Zelts 2026-10-02) */
.pn .intro-in .eb,.pn .pban-in .eb,.pn .mblock-in .eb,.pn .talk .eb,.pn .band-in .eb,.pn .arch .eb,.pn .trust-hd .eb{font-size:15px}
/* Private / Corporate entry banners: the journey type is the headline, the sentence supports it (Zelts 2026-10-02: a clear split) */
/* Entry banners (Zelts 2026-10-02): the journey type large at the top, sentence + button at the bottom, level with the photo's bottom edge */
.pn .pban-in{flex-grow:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(20px,2vw,28px)}
.pn .pban-in .eb{margin-bottom:12px;font:400 clamp(30px,2.6vw,40px)/1.15 var(--serif);letter-spacing:.01em;text-transform:none;color:var(--zel);text-wrap:balance}
.pn.zh .pban-in .eb{letter-spacing:.06em}
.pn .pban-in .eb::before{content:none}
.pn .pban-in .pban-btn{margin-top:auto;min-height:52px;padding:0 22px} /* button sits on the bottom line, level with the journey links */
.pn .pban-in h3{margin-bottom:24px}
.pn .pban-in h3{text-wrap:balance;font-size:clamp(18px,1.4vw,20px);line-height:1.6;color:var(--ink-2)}
.pn.zh .pban-in h3{line-height:1.8}
.pn .talk-go{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.pn .talk-mail a{display:inline-block;padding:9px 0 4px;color:#fff;border-bottom:1px solid var(--zel)}
.pn .talk-mail a:hover{color:var(--zel)}
.pn .sig{font:400 20px/1.4 var(--serif)}
.pn .talk .sig{color:rgba(255,255,255,.84)}
.pn .talk .sig b{font-weight:500;color:#fff}

/* ---------- Footer (Deep Navy, labels in ZeL Blue) ---------- */
.pn footer{background:var(--night);color:rgba(255,255,255,.86);padding:clamp(64px,8vw,110px) 0 40px}
.pn .f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.16)}
.pn .f-brand b{display:block;font:500 26px/1.2 var(--serif);color:#fff}
.pn .f-brand b span{color:var(--zel)}
.pn .f-brand>span{display:block;margin-top:14px;font-size:15px}
.pn .f-col b{display:block;font:500 16px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--zel);margin-bottom:18px}
.pn .f-col a{display:block;font-size:15px;padding:5px 0}
.pn .f-col a:hover{color:var(--zel)}
.pn .f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;font-size:15px;color:rgba(255,255,255,.7)}

/* WhatsApp float */
.pn .wa{position:fixed;right:22px;bottom:22px;z-index:40;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.pn .wa svg{width:30px;height:30px;fill:#fff}

/* ---------- Button states (after the component rules, so hover always wins) ---------- */
.pn .btn:hover{background:var(--night);border-color:var(--night);color:#fff}
.pn .btn.line:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.pn .hdr .btn:hover,.pn .hdr.solid .btn{background:var(--zel);border-color:var(--zel);color:#fff}
.pn .hdr.solid .btn:hover{background:var(--night);border-color:var(--night);color:#fff}
.pn .talk .btn:hover{background:#fff;border-color:#fff;color:var(--night)}
.pn .talk .btn.line{color:#fff;border-color:rgba(255,255,255,.85)}
.pn .talk .btn.line:hover{background:#fff;color:var(--night);border-color:#fff}


/* ---------- Chinese ---------- */
.pn.zh{--serif:"Lora","Noto Serif SC","Songti SC",serif;--sans:"Jost","Noto Sans SC","PingFang SC",sans-serif;line-height:1.85}
.pn.zh h1,.pn.zh h2,.pn.zh h3,.pn.zh h4{letter-spacing:.02em}
.pn.zh .hero h1{letter-spacing:-.015em}
.pn.zh h2{line-height:1.35}
.pn.zh .intro h2,.pn.zh .talk h2{line-height:1.4}
.pn.zh .talk h2{font-size:clamp(28px,3vw,44px)} /* keeps 「下一段旅程想去哪里？」 on one line */
.pn.zh .how>h3,.pn.zh .pc h3,.pn.zh .arch-tx h3{line-height:1.45}
/* statement headings (two lines, second line in ZeL Blue): more air between the lines, EN + ZH (Zelts 2026-10-02) */
.pn .intro h2,.pn .how>h3,.pn .trust h2,.pn .talk h2,.pn.zh .intro h2,.pn.zh .how>h3,.pn.zh .trust h2,.pn.zh .talk h2{line-height:1.6;text-wrap:balance} /* balance: no lone word such as "day." on its own line */
.pn.zh .intro-in p{line-height:1.95}
.pn.zh .fcell small{font-size:19px}
.pn.zh .eb,.pn.zh .f-col b{letter-spacing:.1em}
.pn.zh .fcell small{letter-spacing:.08em}
.pn.zh .nav-l a{letter-spacing:.1em}
.pn.zh .pban-btn,.pn.zh .btn,.pn.zh .more{letter-spacing:.06em} /* light tracking on Chinese: easier to read */

/* ---------- Fixes (Zelts 2026-10-02): card meta wraps inside its column; works strip; closing panel ---------- */
.pn .pc .eb{font-size:15px;letter-spacing:.08em}
.pn .pc .eb .nw{white-space:normal} /* long place lists (Switzerland × Italy × Austria) wrap instead of running into the next card */
.pn .proof{padding-bottom:clamp(40px,4vw,64px)}
.pn .talk{padding-top:clamp(40px,4vw,64px)}
.pn .arch-th{gap:16px}
.pn .arch-th figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--gold-line);font:400 18px/1.4 var(--serif);color:var(--ink)}
.pn .talk-g{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.pn .talk-g figure{aspect-ratio:1/1}
.pn .talk h2,.pn.zh .talk h2{font-size:28px;line-height:1.35}
.pn .talk p{margin-top:18px;font-size:18px;line-height:1.7}
.pn .talk .talk-go{margin-top:28px;gap:12px}
.pn .talk .btn{min-height:52px;padding:0 20px;letter-spacing:.08em}
.pn .talk-g{padding-bottom:clamp(40px,4vw,56px)}
.pn .talk .talk-mail{font-size:15px}
.pn .talk .sig{margin-top:18px;font-size:15px}

/* ---------- Responsive ---------- */
@media(max-width:1240px){.pn .nav-l{gap:20px}.pn .nav-l a{letter-spacing:.1em}}
@media(max-width:1080px){
  .pn .nav-l{display:none}
  .pn .menu-btn{display:flex}
  .pn .bar .wrap{height:72px}
  .pn .fbox{grid-template-columns:1fr 1fr 1fr}
  .pn .fbox .btn{grid-column:1/-1;min-height:60px}
  .pn .steps{grid-template-columns:1fr 1fr;row-gap:48px}
  .pn .prow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px} /* tablet: entry card + 3 journeys as 2 x 2 */
  .pn .pban figure{aspect-ratio:4/5}
  .pn .steps li:nth-child(3){border-left:0}
}
@media(max-width:900px){
  .pn br.dk{display:none}
  .pn .arch{grid-template-columns:1fr}
  .pn .arch-th{grid-template-columns:repeat(2,1fr)}
  /* offset panels stack: photograph on top, panel starts part-way down it */
  .pn .talk-g,.pn .mblock{grid-template-columns:1fr;gap:0;padding:0 0 32px}
  .pn .talk-g::before,.pn .mblock::before{top:clamp(90px,28vw,150px);left:0;right:0}
  .pn .talk-g figure,.pn .mblock figure{grid-column:1;grid-row:1;width:88%;aspect-ratio:4/3}
  .pn .mblock-in,.pn .talk-g>div{grid-column:1;grid-row:2;padding:28px 22px 0}
  .pn .intro-in{padding:24px 22px 0}
}
@media(max-width:820px){
  body.pn{font-size:18px}
  .pn .hero{justify-content:flex-start}
  .pn .hero-in{padding-top:clamp(120px,22svh,190px);padding-bottom:260px}
  .pn .finder{bottom:100px}
  .pn .fbox{grid-template-columns:1fr}
  .pn .fcell{border-right:0;border-bottom:1px solid rgba(255,255,255,.24);min-height:76px;padding:12px 52px 12px 20px}
  .pn .fcell:last-of-type{border-bottom:0}
  .pn .fbox .btn{display:none}
  .pn .pc .eb{min-height:0}
  .pn .band figure{height:auto;min-height:0;aspect-ratio:4/5}
  .pn .f-top{grid-template-columns:1fr}
  .pn .trust{grid-template-columns:1fr 1fr;column-gap:24px}
  .pn .trust-hd,.pn .trust-note{grid-column:1/-1;justify-self:start}
  .pn .trust-note{margin-top:-24px;padding-left:0}
  .pn .st{border-left:0;padding:0}
}
@media(max-width:480px){
  .pn .nav-r .btn{display:none}
  .pn .steps{grid-template-columns:1fr;row-gap:40px}
  .pn .prow{grid-template-columns:1fr;row-gap:48px} /* phone: one after another */
  .pn .pc figure,.pn .pban figure{aspect-ratio:4/5}
  .pn .steps li{border-left:0}
  .pn .btn{width:100%;padding:0 16px;letter-spacing:.1em}
  .pn .talk-go{flex-direction:column}
  .pn .st.sm{grid-column:1/-1}
  .pn .intro-in .eb{font-size:15px;letter-spacing:.1em}
  .pn .intro-in .eb::before{width:14px;margin-right:8px}
  .pn .intro-in .eb::after{width:14px;margin-left:8px}
  .pn .intro-in p:not(.eb){font-size:20px}
}
@media(max-width:359px){.pn .mark{font-size:19px}}

/* ---------- Print: everything visible ---------- */
@media print{
  .pn .hdr,.pn .wa,.pn .mobile-menu,.pn .hero-bg video{display:none}
  .pn .r{opacity:1;transform:none}
  .pn .hero{min-height:0;color:var(--ink);background:none}
  .pn .hero-bg{position:relative;height:9cm}
  .pn .hero-bg::after{display:none}
  .pn .hero-in{padding:24px 0}
  .pn .hero h1,.pn .hero-k{color:var(--ink);text-shadow:none}
  .pn .finder{position:static}
  .pn .fbox{background:#fff;border:1px solid var(--line)}
  .pn .fcell small,.pn .fcell i{color:var(--ink)}
  .pn .band figure{height:8cm;min-height:0}
  .pn .band-in{position:static;color:var(--ink)}
  .pn .prow{grid-template-columns:repeat(4,1fr)}
  .pn section{padding:32px 0;break-inside:avoid}
  .pn .intro,.pn .talk{padding-bottom:32px}
  .pn footer{color:var(--ink)}
  .pn .talk-g::before,.pn .mblock::before{display:none}
  .pn .prow+.prow .pban{background:none;color:var(--ink)}
  .pn .prow+.prow .pban-in h3{color:var(--ink)}
  .pn .talk-g>div,.pn .talk h2,.pn .talk p,.pn .talk .eb,.pn .talk-mail a{color:#000}
}