@font-face{font-family:Trirong;font-weight:500;font-display:swap;src:url(fonts/trirong-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Trirong;font-weight:500;font-display:swap;src:url(fonts/trirong-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Anuphan;font-weight:400;font-display:swap;src:url(fonts/anuphan-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Anuphan;font-weight:400;font-display:swap;src:url(fonts/anuphan-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Anuphan;font-weight:600;font-display:swap;src:url(fonts/anuphan-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Anuphan;font-weight:600;font-display:swap;src:url(fonts/anuphan-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{
  --pine:#0E3B43;      /* New Zealand side */
  --pine-land:#1B5560;
  --mangosteen:#4A1F3D;/* Asia side */
  --marigold:#F2A93B;  /* the route, and only the route and its actions */
  --mist:#E6F0EC;
  --white:#FFFFFF;
  --ink:#10292E;
  --ink-soft:#44595C;
  --line:#C4D5CF;
  --wrap:74rem;
  --gut:clamp(1.25rem,4vw,3rem);
  --display:Trirong,Georgia,serif;
  --body:Anuphan,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--white)}
:lang(th) body,body:lang(th){font-size:1.125rem;line-height:1.8}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:1.14;text-wrap:balance}
h1:lang(th),h2:lang(th){letter-spacing:0;line-height:1.4}
h1{font-size:clamp(2.35rem,4.6vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:1.125rem;font-weight:600;line-height:1.35}
a{color:inherit}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--white);padding:.5rem 1rem;z-index:9}
.skip:focus{top:1rem}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(3.5rem,8vw,6.5rem)}
.lede{max-width:34em;font-size:1.25rem;line-height:1.5}
.lede:lang(th){line-height:1.75}
.prose{max-width:36em}
.prose p+p{margin-top:1em}

/* header */
.top{position:absolute;inset:0 0 auto;z-index:3;color:var(--white)}
.top.on-light{position:static;color:var(--ink);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:2rem;min-height:5rem}
.mark{font-family:var(--display);font-weight:500;font-size:1.3rem;text-decoration:none;margin-right:auto;letter-spacing:-.01em;white-space:nowrap}
.nav ul{display:flex;gap:1.75rem}
.nav a,.lang a{text-decoration:none;font-size:.97rem}
.nav a:hover,.lang a:hover{text-decoration:underline;text-underline-offset:.3em}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--marigold);text-underline-offset:.4em}
.lang{display:flex;gap:.45rem;font-size:.97rem;white-space:nowrap}
.lang [aria-current]{font-weight:600}
.lang a:not([aria-current]){opacity:.82}
.menu{display:none}
.menu summary{cursor:pointer;list-style:none;padding:.4rem 0}
.menu summary::-webkit-details-marker{display:none}

/* hero: the map carries the page */
.hero{position:relative;background:var(--pine);color:var(--white);overflow:hidden}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;min-height:clamp(40rem,90vh,52rem);padding-block:7.5rem 3.5rem;align-items:center}
.hero-copy{position:relative;z-index:2;grid-column:1;max-width:33rem}
.tagline{font-family:var(--display);font-size:1.3rem;color:var(--marigold);margin-top:1.4rem}
.tagline:lang(th){line-height:1.6}
.hero .lede{margin-top:1rem;font-size:1.125rem;color:#DCE9E6;max-width:29em;line-height:1.6}
.hero .lede:lang(th){line-height:1.8}
.map{position:absolute;right:max(0rem,calc((100vw - 96rem) / 2));top:5.25rem;width:min(49vw,47rem);height:auto;overflow:visible}
.map-land{fill:var(--pine-land)}
.map-focus{fill:#3E8C8A}
.map-route{fill:none;stroke:var(--marigold);stroke-width:3;stroke-linecap:round}
.map-next{fill:none;stroke:var(--marigold);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.map-dot{fill:var(--marigold)}
.map-dot-next{fill:var(--pine);stroke:var(--marigold);stroke-width:2}
.map text{fill:var(--white);font-family:var(--body);font-size:21px;font-weight:600;paint-order:stroke;stroke:var(--pine);stroke-width:5px;stroke-linejoin:round}
.map text.next{font-weight:400;font-size:18px}
@media (prefers-reduced-motion:no-preference){
  .map-route{stroke-dasharray:1;stroke-dashoffset:1;animation:sail 2.2s .25s cubic-bezier(.45,.05,.3,1) forwards}
  .map-next,.map .later{opacity:0;animation:appear .6s 2.3s forwards}
  .map .bkk{opacity:0;animation:appear .4s 2.2s forwards}
}
@keyframes sail{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}

/* the two doors */
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{display:block;padding:clamp(1.75rem,3.5vw,2.75rem) var(--gut);text-decoration:none}
.door strong{display:block;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.25}
.door strong:lang(th){line-height:1.5}
.door span{display:block;margin-top:.3rem}
.door strong,.door span{max-width:calc(var(--wrap) / 2 - var(--gut))}
.door-maker{background:var(--mist);color:var(--ink);padding-left:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)))}
.door-buyer{background:var(--mangosteen);color:var(--white)}
.door strong{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:transparent;text-underline-offset:.2em;transition:text-decoration-color .15s}
.door:hover strong,.door:focus-visible strong{text-decoration-color:var(--marigold)}
.door:focus-visible{outline-offset:-6px}

/* what we do */
.head-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.5rem 3rem;align-items:baseline;margin-bottom:3rem}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 3rem}
.trio p{margin-top:.5rem;color:var(--ink-soft)}

/* how it works: the route again, as a line through four real stops */
.how{background:var(--mist)}
.how h2{margin-bottom:3.25rem}
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:stop;position:relative}
.route li{counter-increment:stop;position:relative;padding-top:4.1rem}
.route li::before{content:counter(stop);position:absolute;top:0;left:0;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;background:var(--pine);color:var(--white);font-family:var(--display);z-index:1}
.route li::after{content:"";position:absolute;top:1.375rem;left:0;right:-2rem;border-top:3px solid var(--marigold)}
.route li:last-child::after{right:0}
.route p{margin-top:.4rem;color:var(--ink-soft)}

/* why */
.why{background:var(--mangosteen);color:var(--white)}
.why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem 3rem}
.why dl{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem 3rem}
.why dt{font-weight:600;font-size:1.125rem}
.why dd{margin-top:.35rem;color:#E8DCE4}

/* inner pages */
.lead-in{color:var(--white);padding-block:clamp(3.25rem,7vw,5.5rem)}
.lead-in .lede{margin-top:1.25rem}
.lead-pine{background:var(--pine)}
.lead-mangosteen{background:var(--mangosteen)}
.lead-mist{background:var(--mist);color:var(--ink)}
h1.fits{max-width:18em}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem 3rem}
.two+.two{margin-top:clamp(3rem,6vw,4.5rem)}
.ticks li{padding-block:.85rem;border-top:1px solid var(--line)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.pay{background:var(--mist)}
.look h2{margin-bottom:2.5rem}

/* founding partners: one big, true number beside the form */
.found{background:var(--pine);color:var(--white)}
.found-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem clamp(3rem,7vw,6rem);align-items:start}
.found-num{font-family:var(--display);font-size:clamp(7rem,15vw,11.5rem);line-height:1;color:var(--marigold);margin-top:1.75rem}
.found-num:lang(th){line-height:1.1}
.found-cap{font-weight:600;font-size:1.125rem}
.found p.note{margin-top:1.25rem;color:#DCE9E6;max-width:26em}

/* forms */
.form{background:var(--white);color:var(--ink);padding:clamp(1.5rem,3vw,2.5rem);display:grid;gap:1.1rem}
.form.flush{padding:0}
.form h2{font-size:1.6rem;margin-bottom:.25rem}
.field label{display:block;font-weight:600;font-size:.97rem;margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%;font:inherit;color:inherit;padding:.65rem .75rem;background:var(--white);border:1px solid #7E9593;border-radius:3px}
.field textarea{min-height:8rem;resize:vertical}
.field :focus{outline:3px solid var(--marigold);outline-offset:0;border-color:var(--pine)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#A32A1E;box-shadow:inset 0 0 0 1px #A32A1E}
.trap{position:absolute;left:-200vw}
.btn{justify-self:start;font:inherit;font-weight:600;padding:.8rem 1.6rem;border:0;border-radius:3px;background:var(--marigold);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#FFBC55}
.btn:disabled{opacity:.7;cursor:wait}
.status{min-height:1.6em;font-weight:600}
.status.err{color:#A32A1E}
.status.ok{color:#1B6B56}

/* notes */
.notes li{border-top:1px solid var(--line);padding-block:1.5rem}
.notes li:last-child{border-bottom:1px solid var(--line)}
.notes a{font-family:var(--display);font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.3;text-decoration-color:var(--line);text-underline-offset:.2em}
.notes a:hover{text-decoration-color:var(--marigold)}
.notes span{display:block;margin-top:.35rem;color:var(--ink-soft);font-size:.97rem}
.back{display:inline-block;margin-top:1.5rem}

/* about */
.people{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.person{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1.5rem;align-items:start}
.photo{aspect-ratio:4/5;background:var(--white);color:var(--ink-soft);display:grid;place-items:center;font-size:.97rem}
.person h3{font-family:var(--display);font-weight:500;font-size:1.4rem}
.person p{margin-top:.4rem;color:var(--ink-soft)}
.person a{display:inline-block;margin-top:.5rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:3rem clamp(3rem,7vw,6rem)}
.contact-grid dt{font-weight:600}
.contact-grid dd{margin-bottom:1.5rem}

/* footer */
.foot{background:var(--ink);color:#D5E2DF;padding-block:3.5rem 2.5rem;font-size:.97rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);gap:2rem 3rem}
.foot .mark{display:block;color:var(--white);margin-bottom:.5rem}
.foot .tag{font-family:var(--display);color:var(--marigold);margin-top:.75rem}
.foot li{margin-bottom:.35rem}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:62rem){
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu ul{position:absolute;right:0;top:calc(100% + .5rem);background:var(--white);color:var(--ink);min-width:16rem;padding:.75rem 1.25rem;box-shadow:0 8px 24px rgba(14,59,67,.25);z-index:5}
  .menu li{padding-block:.45rem}
  .menu a{text-decoration:none}
  .top-in{gap:1.25rem}
  .hero-in{grid-template-columns:1fr;min-height:0;padding-block:7rem 0}
  .map{position:relative;top:auto;right:auto;width:calc(100% + var(--gut) * 2);margin:1rem calc(var(--gut) * -1) 0;display:block;overflow:hidden}
  .map text{font-size:34px;stroke-width:7px}
  .map text.next{font-size:29px}
  .doors,.trio,.head-row,.why-grid,.two,.found-grid,.people,.contact-grid{grid-template-columns:1fr}
  .door-maker{padding-left:var(--gut)}
  .route{grid-template-columns:1fr;gap:0}
  .route li{padding:0 0 2rem 4rem;min-height:5rem}
  .route li::after{top:0;bottom:0;left:1.25rem;right:auto;border-top:0;border-left:3px solid var(--marigold)}
  .route li:last-child{padding-bottom:0}
  .route li:last-child::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>:first-child{grid-column:1/-1}
}
@media (max-width:30rem){
  .why dl{grid-template-columns:1fr}
  .person{grid-template-columns:6.5rem minmax(0,1fr)}
  .mark{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.side-note{margin-top:1rem;max-width:24em;color:var(--ink-soft)}
.ph{display:inline-block}