:root{ --bg:#E9EAE6; --surface:#F5F5F2; --ink:#1E2321; --muted:#5F6662; --line:#C9CCC6; --accent:#2C6A60; --accent-ink:#FFFFFF; --block:#DADCD6; --wa:#1F7A4D; --display:"Unbounded","Zen Maru Gothic",system-ui,sans-serif; --body:"Figtree","Zen Kaku Gothic New",system-ui,sans-serif; --r-panel:44px; } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --bg:#141817; --surface:#1D2220; --ink:#E7E8E3; --muted:#9BA39E; --line:#323A37; --accent:#7DC0B3; --accent-ink:#0F1A17; --block:#262C2A; --wa:#4CC387; color-scheme:dark}} :root[data-theme="dark"]{ --bg:#141817; --surface:#1D2220; --ink:#E7E8E3; --muted:#9BA39E; --line:#323A37; --accent:#7DC0B3; --accent-ink:#0F1A17; --block:#262C2A; --wa:#4CC387; color-scheme:dark} *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75} body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.25;text-wrap:balance;margin:0} h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.01em} h3{font-size:1.02rem;font-weight:500} p{margin:0} .eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600} .lead{color:var(--muted);max-width:60ch} header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .hbar{display:flex;align-items:center;gap:20px;padding-block:12px} .mark{display:flex;flex-direction:column;line-height:1;text-decoration:none} .mark b{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.02em} .mark b span{font-weight:300} .mark small{font-size:.62rem;letter-spacing:.42em;color:var(--muted);margin-top:4px} nav.main{display:flex;gap:18px;margin-left:auto;font-size:.88rem} nav.main a{text-decoration:none;color:var(--muted)} nav.main a:hover{color:var(--ink)} .langs{display:flex;gap:2px;font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:2px} .langs a{text-decoration:none;padding:3px 9px;border-radius:999px;color:var(--muted);font-weight:600} .langs a[aria-current]{background:var(--ink);color:var(--bg)} @media (max-width:860px){nav.main{display:none}.langs{margin-left:auto}} .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;text-decoration:none;font-size:.95rem;border:1px solid transparent;cursor:pointer;font-family:inherit} .btn.wa{background:var(--wa);color:#fff} .btn.ghost{border-color:var(--ink);color:var(--ink);background:transparent} .btn svg{width:18px;height:18px;flex:none} .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;padding-block:56px 40px} .hero h1{font-size:clamp(2rem,5.2vw,3.5rem);letter-spacing:-.02em;margin-top:14px} .hero .lead{margin-top:20px;font-size:1.05rem} .hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .status{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line)} .status i{width:8px;height:8px;border-radius:50%;background:var(--accent)} .facts{display:flex;gap:28px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line)} .facts div{display:flex;flex-direction:column} .facts b{font-family:var(--display);font-weight:500;font-size:1.35rem} .facts span{font-size:.8rem;color:var(--muted)} @media (max-width:800px){.hero{grid-template-columns:1fr;gap:32px;padding-block:32px 24px}} .ph{position:relative;background-color:var(--block); background-image:radial-gradient(circle at 50% 50%,var(--bg) 0 34%,transparent 35%); background-size:34px 34px;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;max-width:100%} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ph figcaption{position:relative;margin:14px;font-size:.75rem;font-weight:600;background:var(--surface);color:var(--muted);padding:4px 10px;border-radius:999px} .arch{aspect-ratio:4/5;border-radius:999px 999px 18px 18px} .round{aspect-ratio:1;border-radius:50%;align-items:center;justify-content:center} .round figcaption{margin:0} section{padding-block:64px} .sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:32px} .panel{background:var(--surface);border-radius:var(--r-panel);padding-block:56px} .panel .wrap{max-width:1000px} .features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px} .feat{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start} .feat .dot{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);position:relative} .feat .dot::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--accent);opacity:.18} .feat p{color:var(--muted);font-size:.95rem;margin-top:4px} .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px} .gallery .ph{aspect-ratio:3/4;border-radius:120px 120px 14px 14px} @media (max-width:760px){.features{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} .units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .unit{border:1px solid var(--line);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--bg)} .unit .code{font-family:var(--display);font-size:1.6rem;font-weight:500} .unit .type{font-size:.85rem;color:var(--muted)} .unit dl{margin:0;padding-top:12px;border-top:1px dashed var(--line)} .unit dt{font-size:.75rem;color:var(--muted)} .unit dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums} .unit dd.tbd{font-weight:500;color:var(--muted);font-size:.9rem} .unit a{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:none} .unit a:hover{text-decoration:underline} .note{font-size:.8rem;color:var(--muted);margin-top:18px} @media (max-width:900px){.units{grid-template-columns:repeat(2,minmax(0,1fr))}} .spec{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:0} .spec div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .spec dt{color:var(--muted);font-size:.92rem} .spec dd{margin:0;font-weight:600;text-align:right;font-size:.95rem} @media (max-width:700px){.spec{grid-template-columns:1fr}} .loc{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center} .loc address{font-style:normal;font-weight:600;margin-top:14px;max-width:44ch} .loc .round{width:220px} @media (max-width:700px){.loc{grid-template-columns:1fr}.loc .round{width:160px}} .flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s} .flow li{counter-increment:s;display:flex;flex-direction:column;gap:6px} .flow li::before{content:counter(s);font-family:var(--display);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);font-size:.95rem;margin-bottom:8px} .flow p{color:var(--muted);font-size:.92rem} @media (max-width:860px){.flow{grid-template-columns:1fr 1fr}} @media (max-width:480px){.flow{grid-template-columns:1fr}} .contact{background:var(--ink);color:var(--bg);border-radius:var(--r-panel);padding-block:56px} .contact .lead{color:color-mix(in srgb,var(--bg) 75%,var(--ink))} .contact .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px} .num{font-family:var(--display);font-size:clamp(1.3rem,4vw,1.9rem);font-variant-numeric:tabular-nums;user-select:all} .copy{background:transparent;color:var(--bg);border:1px solid color-mix(in srgb,var(--bg) 50%,var(--ink));padding:8px 14px;border-radius:999px;font:inherit;font-size:.85rem;cursor:pointer} .social{display:flex;gap:18px;margin-top:22px;font-weight:600} .social a{text-decoration:none;border-bottom:1px solid currentColor} footer{padding-block:36px 48px;font-size:.8rem;color:var(--muted)} footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px} .mark img.logo{height:68px;width:auto;display:block} .mark .logo-white{display:none} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mark .logo-ink{display:none} :root:not([data-theme="light"]) .mark .logo-white{display:block}} :root[data-theme="dark"] .mark .logo-ink{display:none} :root[data-theme="dark"] .mark .logo-white{display:block} @media (max-width:600px){.mark img.logo{height:54px}}