@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--bg:#FCFCFA;--chrome:#F5F1EC;--surface:#FFFFFF;--ink:#302A25;--muted:#565047;--line:#DFDAD3;--sage:#6C7C5D;--clay:#805844;--soft:#F3F0EA;--brown:#463126}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15.5px/1.76 "Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--clay);outline-offset:5px}
.shell{width:min(1080px,calc(100% - 48px));margin:auto}
header{border-bottom:1px solid #E7E0D8;background:var(--chrome)}
.nav{min-height:118px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}
.brand-logo{display:block;width:204px;height:auto;max-width:100%;object-fit:contain;mix-blend-mode:normal}
.links,.footer-links{display:flex;align-items:center;gap:27px}
.links{font-size:13px;font-weight:600;color:#55463B}
.links a,.footer-links a{transition:color .15s}
.links a:hover,.footer-links a:hover{color:#805844}
.eyebrow{font-size:10.5px;line-height:1.5;font-weight:700;letter-spacing:.16em;color:#665142;text-transform:uppercase}
.intro{padding:76px 0 88px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.intro h1,h1{font-size:clamp(48px,5.8vw,76px);line-height:1.15;letter-spacing:-.055em;font-weight:600;margin:20px 0 24px}
.intro h1 span{color:#715846}
.lead{max-width:525px;color:var(--muted);font-size:16px;line-height:1.92;margin:0 0 29px;letter-spacing:-.01em}
.cta{display:inline-flex;gap:27px;align-items:center;justify-content:center;padding:13px 22px;background:var(--brown);color:#FFF9F0;font-size:13px;font-weight:600;border-radius:22px 7px 21px 8px;transition:background .15s,transform .15s}
.cta:hover{background:#6D4836;transform:translateY(-1px)}
.arrow{font-size:18px;line-height:1}
.structural-sketch{margin:0;overflow:hidden;border:1px solid #D9D4CB;background:#F4F1EB;border-radius:77px 13px 65px 13px;box-shadow:0 10px 30px rgba(74,47,29,.05)}
.structural-sketch img{display:block;width:100%;height:auto;aspect-ratio:780/640;object-fit:contain}
.structural-sketch figcaption{font:500 10px/1.6 ui-monospace,monospace;color:#665142;letter-spacing:.12em;padding:7px 15px 13px}
.section{padding:74px 0 87px;border-top:1px solid var(--line)}
.sectionhead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:31px}
h2{font-size:clamp(32px,3.7vw,46px);font-weight:600;letter-spacing:-.055em;line-height:1.22;margin:11px 0 0}
.aside{max-width:345px;color:var(--muted);font-size:14px;line-height:1.8}
.appgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.appcard{padding:27px 30px 27px;background:var(--surface);border:1px solid var(--line);min-width:0;min-height:215px;display:flex;flex-direction:column;transition:background .16s,border-color .16s,transform .16s}
.appcard:nth-child(1){border-radius:28px 8px 31px 9px}
.appcard:nth-child(2){border-radius:8px 33px 8px 29px}
.appcard:nth-child(3){border-radius:35px 10px 25px 7px}
.appcard:nth-child(4){border-radius:9px 28px 12px 33px}
.appcard:hover{background:#FFFFFF;border-color:#B7A99B;transform:translateY(-2px)}
.app-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.app-no,.panel-label{font-size:10.5px;font-weight:600;line-height:1.5;letter-spacing:.085em;color:#70523D}
.app-symbol{font-size:25px;color:#70523D;line-height:1.3}
.appcard h3{font-size:25px;line-height:1.25;letter-spacing:-.045em;font-weight:600;margin:16px 0 7px}
.appcard p{color:var(--muted);font-size:13.5px;line-height:1.75;margin:0 0 18px}
.open{margin-top:auto;color:#70523D;font-size:12px;font-weight:600}
.ist-contact{display:flex;justify-content:space-between;align-items:center;gap:32px}
.ist-contact p{color:var(--muted);margin:13px 0 0;line-height:1.85}
.contact-action{display:inline-flex;align-items:center;gap:20px;max-width:100%;padding:14px 19px;white-space:normal;font-size:13px;font-weight:600;background:#F1ECE5;border:1px solid #D1C5B9;border-radius:24px 7px 25px 8px}
.contact-action:hover{background:#E8E0D6}
.foot{border-top:1px solid #E7E0D8;background:var(--chrome);padding:25px 0;font-size:12px;color:var(--muted)}
.foot .shell{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-links{gap:24px;font-size:12px}
.footer-contact{margin-left:12px;color:var(--muted)}.footer-contact a{color:inherit}.footer-contact a:hover{color:var(--clay)}
.subpage{padding:32px 0 78px;min-height:67vh}
.crumb{font-size:12px;color:var(--muted);display:flex;gap:13px;flex-wrap:wrap}
.crumb a:hover,.mutedlink:hover{color:var(--brown)}
.app-main{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;padding:85px 0 58px}
.app-main h1{font-size:clamp(48px,6.4vw,79px);overflow-wrap:anywhere}
.mutedlink{font-size:13px;color:var(--muted)}
.appaction{margin:29px 0}
.panel{padding:34px;background:var(--soft);min-height:273px;display:flex;flex-direction:column;border-radius:34px 8px 29px 10px}
.panel strong{font-size:23px;line-height:1.4;letter-spacing:-.045em;font-weight:600;margin-top:18px}
.panel p{font-size:13.5px;color:var(--muted);line-height:1.85}
.status{margin-top:auto;border-top:1px solid #D9D2C7;padding-top:16px;font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#B69B77;margin-right:9px}
.dot.ready{background:#748B65}
.site-note{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:21px;line-height:1.85}
[hidden]{display:none!important}
@media(max-width:760px){
 .shell{width:calc(100% - 34px)}
 .nav{min-height:83px;gap:12px}
 .brand-logo{width:145px}
 .links{gap:13px;font-size:12px}
 .intro{grid-template-columns:1fr;gap:32px;padding:57px 0 63px}
 .intro h1{font-size:clamp(42px,10vw,60px);line-height:1.16;margin:16px 0 20px}
 .lead{font-size:14.5px;line-height:1.85}
 .eyebrow{font-size:9.5px;letter-spacing:.12em}
 .structural-sketch{max-width:520px;border-radius:49px 10px 42px 9px}
 .structural-sketch figcaption{font-size:9px;letter-spacing:.08em}
 .section{padding:53px 0 63px}
 .sectionhead{display:block;margin-bottom:23px}
 .aside{font-size:13px;margin:14px 0 0}
 .appgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .appcard{min-height:194px;padding:17px 14px 16px}
 .appcard:nth-child(n){border-radius:23px 8px 21px 9px}
 .app-no{font-size:9.5px;letter-spacing:.035em}
 .app-symbol{font-size:19px}
 .appcard h3{font-size:clamp(16px,4.65vw,21px);letter-spacing:-.04em;overflow-wrap:anywhere;margin:13px 0 7px}
 .appcard p{font-size:12.5px;line-height:1.55;margin:0 0 13px}
 .open{font-size:11.5px}
 .ist-contact{display:block}
 .ist-contact p{font-size:13px}
 .contact-action{margin-top:23px}
 .app-main{grid-template-columns:1fr;gap:22px;padding:63px 0 35px}
 .app-main h1{font-size:clamp(44px,10vw,64px)}
 .panel{min-height:240px;padding:25px}
 .foot .shell{flex-wrap:wrap}.footer-contact{display:inline-block;margin-left:8px}
}
@media(max-width:360px){.brand-logo{width:136px}.links{gap:10px;font-size:11.5px}.appcard{padding:15px 11px 14px}.appcard h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Logo follows each page's content grid, not the viewport edge. */
.nav.shell{width:min(1080px,calc(100% - 48px));max-width:1080px;margin-inline:auto;padding-inline:0}
@media(max-width:760px){.nav.shell{width:calc(100% - 34px);padding-inline:0}}

/* Compact shared chrome on application subpages. */
body:has(main.subpage) .nav,body:has(main.studio-main) .nav{min-height:74px}
body:has(main.subpage) .brand-logo,body:has(main.studio-main) .brand-logo{width:164px}
body:has(main.subpage) .foot,body:has(main.studio-main) .foot{padding:12px 0;font-size:11px}
body:has(main.subpage) .footer-links,body:has(main.studio-main) .footer-links{gap:17px;font-size:11px}
@media(max-width:760px){
 body:has(main.subpage) .nav,body:has(main.studio-main) .nav{min-height:64px}
 body:has(main.subpage) .brand-logo,body:has(main.studio-main) .brand-logo{width:130px}
 body:has(main.subpage) .foot .shell,body:has(main.studio-main) .foot .shell{gap:10px}
 body:has(main.subpage) .footer-links,body:has(main.studio-main) .footer-links{gap:13px;font-size:10.5px}
}