:root { --ink:#18383a; --deep:#0d292b; --ocean:#306d6f; --mist:#e8f1ed; --sand:#f7f4ed; --rust:#c85d3d; --line:#aebfba; --gold:#c39a53; --mono:"DM Mono",monospace; --serif:"Instrument Serif","Noto Serif SC",serif; --sans:"Noto Sans SC",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--sand); font-family:var(--sans); line-height:1.65; } a { color:inherit; text-decoration:none; } button { font:inherit; }.skip-link { position:fixed; top:-4rem; left:1rem; z-index:30; padding:.55rem .7rem; color:white; background:var(--deep); }.skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:20; min-height:5.3rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1rem clamp(1.25rem,5vw,5.2rem); border-bottom:1px solid rgba(24,56,58,.25); background:rgba(247,244,237,.97); }.brand { display:inline-flex; align-items:center; gap:.72rem; }.brand-seal { width:2.35rem; height:2.35rem; display:grid; place-items:center; color:var(--sand); border-radius:50%; background:var(--rust); font:.65rem var(--mono); letter-spacing:.03em; }.brand-name { font-size:.92rem; font-weight:700; letter-spacing:.04em; line-height:1.1; }.brand-name small { display:block; margin-top:.26rem; color:var(--ocean); font:.5rem var(--mono); letter-spacing:.06em; }.site-nav { display:flex; align-items:center; gap:clamp(1rem,2.8vw,2.8rem); font-size:.8rem; font-weight:600; }.site-nav a { padding:.35rem 0; border-bottom:1px solid transparent; }.site-nav a.active,.site-nav a:hover { border-color:var(--rust); }.menu-toggle { display:none; padding:.4rem 0; border:0; color:var(--ink); background:transparent; font-size:.72rem; font-weight:700; cursor:pointer; }.menu-symbol { margin-right:.35rem; font-size:1rem; }
.hero { position:relative; min-height:41rem; overflow:hidden; color:var(--sand); background:var(--deep); }.hero-header { position:absolute; z-index:3; top:1.5rem; left:clamp(1.25rem,5vw,5.2rem); right:clamp(1.25rem,5vw,5.2rem); display:flex; justify-content:space-between; color:#a8c5be; font:.58rem var(--mono); letter-spacing:.1em; }.hero-center { position:relative; z-index:2; max-width:43rem; padding:clamp(7rem,14vw,10rem) 1.5rem 5rem; margin:0 auto; text-align:center; }.hero-overline,.eyebrow { margin:0; color:#9bb7b0; font:.62rem var(--mono); letter-spacing:.12em; }.hero h1 { margin:1rem 0 1.4rem; font-family:var(--serif); font-size:clamp(4.3rem,8.4vw,8rem); font-weight:400; line-height:.85; letter-spacing:0; }.hero h1 em { color:#f0c87f; font-style:italic; }.hero-center > p:not(.hero-overline) { max-width:28rem; margin:0 auto; color:#c2d2ce; font-size:.91rem; }.circle-link { width:7rem; height:7rem; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; margin-top:2.4rem; border:1px solid #85a7a0; border-radius:50%; color:var(--sand); font-size:.72rem; transition:background .25s ease, color .25s ease, transform .25s ease; }.circle-link:hover { color:var(--deep); background:#f0c87f; border-color:#f0c87f; transform:translateY(-4px); }.circle-link b { font-size:1.1rem; font-weight:400; }.hero-map { position:absolute; inset:0; z-index:1; opacity:.65; }.meridian,.latitude { position:absolute; border:1px solid rgba(146,193,183,.32); }.meridian { top:-8%; bottom:-8%; border-radius:50%; }.m-one { left:26%; width:34%; }.m-two { left:38%; width:15%; }.m-three { right:21%; width:28%; }.latitude { left:-5%; right:-5%; height:26%; border-radius:50%; }.l-one { top:13%; }.l-two { top:38%; }.l-three { top:64%; }.route { position:absolute; height:1px; background:#f0c87f; transform-origin:left; }.route-one { left:12%; top:72%; width:41%; transform:rotate(-19deg); }.route-two { left:50%; top:53%; width:29%; transform:rotate(30deg); }.route-three { left:23%; top:41%; width:25%; transform:rotate(24deg); }.point { position:absolute; width:.58rem; height:.58rem; border-radius:50%; background:var(--rust); box-shadow:0 0 0 .34rem rgba(200,93,61,.24); }.point-one { left:12%; top:72%; }.point-two { left:51%; top:52%; }.point-three { right:21%; top:68%; }.map-caption { position:absolute; right:2rem; bottom:2rem; transform:rotate(-90deg); transform-origin:right; color:#9bb7b0; font:.55rem var(--mono); letter-spacing:.1em; }
.intro { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding:2.4rem clamp(1.25rem,5vw,5.2rem); border-bottom:1px solid var(--line); }.intro p { max-width:46rem; margin:0; font-family:var(--serif); font-size:clamp(1.7rem,3.2vw,3.25rem); line-height:1.1; }.intro span { flex:none; color:var(--ocean); font:.58rem var(--mono); letter-spacing:.1em; }
.content-section { display:grid; grid-template-columns:clamp(9rem,20vw,18rem) 1fr; padding:clamp(4.5rem,10vw,8.5rem) clamp(1.25rem,5vw,5.2rem); border-bottom:1px solid var(--line); }.side-label { color:var(--ocean); font:.58rem var(--mono); letter-spacing:.1em; }.side-label span { margin-left:.5rem; color:var(--rust); }.content-main { max-width:58rem; }.content-main h2,.company-copy h2 { margin:.7rem 0 1.55rem; font-family:var(--serif); font-size:clamp(2.75rem,5.5vw,5.6rem); font-weight:400; line-height:.94; letter-spacing:0; }.large-copy { max-width:43rem; margin:0; font-size:1.03rem; }.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:4.5rem; }.principles article { padding-top:1rem; border-top:1px solid var(--ink); }.principles span { color:var(--rust); font:.6rem var(--mono); }.principles h3 { margin:1.3rem 0 .4rem; font-size:1.06rem; }.principles p { margin:0; color:#516765; font-size:.8rem; }.steps { background:var(--mist); }.steps .eyebrow { color:var(--ocean); }.steps-list { padding:0; margin:3rem 0 0; list-style:none; border-top:1px solid var(--ink); }.steps-list li { display:grid; grid-template-columns:6rem 1fr; gap:1rem; padding:1.25rem 0; border-bottom:1px solid rgba(24,56,58,.45); }.steps-list li > span { color:var(--rust); font:.63rem var(--mono); }.steps-list h3 { margin:0 0 .2rem; font-size:1.05rem; }.steps-list p { max-width:30rem; margin:0; color:#516765; font-size:.84rem; }
.company { display:grid; grid-template-columns:minmax(0,1fr) minmax(24rem,1fr); background:#e0e9e5; }.company-photo { position:relative; min-height:42rem; padding:clamp(3rem,8vw,7rem); background:#c8d7d1; }.company-photo img { position:relative; z-index:2; display:block; width:100%; max-height:32rem; object-fit:cover; object-position:center; border:8px solid #f7f4ed; box-shadow:1rem 1rem 0 rgba(13,41,43,.85); transform:rotate(-2deg); }.photo-rail { position:absolute; z-index:1; inset:1.4rem; display:flex; align-items:flex-end; justify-content:space-between; border:1px solid rgba(24,56,58,.34); color:var(--ocean); font:.54rem var(--mono); letter-spacing:.08em; }.photo-rail span { writing-mode:vertical-rl; transform:rotate(180deg); }.company-copy { align-self:center; padding:clamp(3rem,8vw,7rem); }.company-copy .eyebrow { color:var(--ocean); }.company-copy > p:not(.eyebrow) { max-width:27rem; margin:0 0 2rem; color:#516765; font-size:.84rem; }.company-copy dl { margin:0; border-top:1px solid var(--ink); }.company-copy dl div { display:grid; grid-template-columns:8.4rem 1fr; gap:1rem; padding:.82rem 0; border-bottom:1px solid rgba(24,56,58,.35); }.company-copy dt { color:var(--ocean); font-size:.72rem; }.company-copy dd { margin:0; font-size:.8rem; font-weight:600; }.company-copy code { font:.72rem var(--mono); }.copy-button { margin-left:.5rem; padding:.12rem .38rem; color:var(--ocean); border:1px solid var(--ocean); background:transparent; font-size:.62rem; cursor:pointer; }.copy-button:hover { color:var(--sand); background:var(--ocean); }.license-link { display:inline-flex; gap:.7rem; margin-top:1.8rem; padding-bottom:.2rem; color:var(--rust); border-bottom:1px solid var(--rust); font-size:.77rem; font-weight:700; }
.site-footer { padding:2rem clamp(1.25rem,5vw,5.2rem); color:#d4e1dd; background:var(--deep); }.footer-top,.footer-bottom { display:flex; justify-content:space-between; gap:2rem; }.footer-top { align-items:center; padding-bottom:3.2rem; border-bottom:1px solid rgba(212,225,221,.35); }.footer-top .brand-name small { color:#9bb7b0; }.back-top { color:#f0c87f; font-size:.75rem; }.footer-bottom { align-items:end; padding-top:1.1rem; }.footer-bottom p { margin:0; font-size:.68rem; }.footer-bottom small { color:#9bb7b0; font:.52rem var(--mono); }
.toast { position:fixed; left:50%; bottom:1.4rem; z-index:30; padding:.65rem .9rem; color:var(--sand); background:var(--rust); font-size:.72rem; transform:translate(-50%,5rem); opacity:0; transition:transform .25s ease, opacity .25s ease; }.toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:800px) { .menu-toggle { display:block; }.site-nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:.4rem 1.25rem 1rem; border-bottom:1px solid rgba(24,56,58,.25); background:var(--sand); }.site-nav.open { display:flex; }.site-nav a { padding:.65rem 0; }.hero { min-height:37rem; }.content-section { grid-template-columns:1fr; gap:2.5rem; }.principles { max-width:39rem; }.company { grid-template-columns:1fr; }.company-photo { min-height:31rem; }.company-photo img { max-height:24rem; }.company-copy { padding-top:4rem; padding-bottom:4.5rem; }.company-copy dl div { grid-template-columns:8rem 1fr; } }
@media (max-width:540px) { .brand-name small { display:none; }.hero-header { top:1.1rem; }.hero-center { padding-top:8.2rem; }.hero h1 { font-size:4.3rem; }.hero-map { transform:scale(1.25); }.intro { align-items:flex-start; flex-direction:column; }.content-main h2,.company-copy h2 { font-size:3.1rem; }.large-copy { font-size:.94rem; }.principles { grid-template-columns:1fr; gap:1.5rem; margin-top:3rem; }.principles h3 { margin-top:.65rem; }.steps-list li { grid-template-columns:3.7rem 1fr; }.company-photo { min-height:25rem; padding:3.4rem 2.25rem; }.company-photo img { box-shadow:.65rem .65rem 0 rgba(13,41,43,.85); }.company-copy dl div { grid-template-columns:1fr; gap:.12rem; }.footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; gap:1rem; }.footer-top { padding-bottom:2rem; }.footer-bottom { padding-top:1rem; }.footer-bottom small { margin-top:1rem; } }