/* One native HTML direction. All selectors stay inside A. */
#concept-stage:has(>.html-a){overflow:hidden;scrollbar-gutter:auto;background:#0b1522}
.html-a{--ha-bg:#0b1522;--ha-ink:#e7f0ff;--ha-muted:#aab8c8;--ha-mint:#9ff9d7;--ha-line:#b2d6ed26;background:var(--ha-bg);color:var(--ha-ink);font-family:Onest,Arial,sans-serif;border:0!important;border-radius:0!important;height:100%;container-type:inline-size;line-height:1.5}
.html-a .ha-scroll{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:#647887 #0b1522;position:relative}
.html-a .ha-scroll:focus-visible{outline:1px solid var(--ha-mint);outline-offset:-2px}
.html-a .ha-page{background:radial-gradient(ellipse at 90% 12%,#23394c65,transparent 38%),var(--ha-bg);min-height:100%}
.html-a a{color:inherit;text-decoration:none}
.html-a :is(a,button,input):focus-visible{outline:2px solid var(--ha-mint);outline-offset:5px}
.html-a h1,.html-a h2,.html-a h3{font-family:inherit;font-weight:450;letter-spacing:-.045em;margin:0}
.html-a p{font-family:inherit;font-size:13px;line-height:1.7;color:var(--ha-muted);margin:0}
.html-a .ha-kicker{font-size:8px;letter-spacing:.14em;line-height:1.8;font-weight:450}
.html-a .ha-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 4.5%;border-bottom:1px solid var(--ha-line)}
.html-a .ha-brand{display:flex;flex-direction:column;gap:5px;flex:none}
.html-a .ha-brand strong{font-size:14px;font-weight:650;letter-spacing:.12em;white-space:nowrap}
.html-a .ha-brand small{font-size:6px;letter-spacing:.24em;color:var(--ha-muted)}
.html-a .ha-header nav{display:flex;gap:18px;align-items:center}
.html-a .ha-header nav a{font-size:10px;color:var(--ha-muted);padding-block:8px;border-bottom:1px solid transparent;transition:color 250ms,border-color 250ms}
.html-a .ha-header nav a:hover{color:var(--ha-mint);border-color:var(--ha-mint)}
.html-a .ha-header-cta{display:flex;align-items:center;gap:14px;flex:none;background:var(--ha-mint);color:#10272a;border-radius:30px;padding:11px 17px;font-size:10px}
.html-a svg{display:block;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.html-a .ha-header-cta svg,.html-a .ha-button svg,.html-a .ha-text-link svg,.html-a .ha-service-card>span svg,.html-a .ha-footer svg{width:16px;height:16px;flex:none}
.html-a .ha-hero{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;padding:40px 4.5% 40px;gap:0;min-height:480px}
.html-a .ha-hero-copy{position:relative;z-index:1;min-width:0}
.html-a .ha-hero h1{font-size:clamp(35px,6.3cqw,72px);line-height:1.07;margin:18px 0 22px;text-wrap:balance}
.html-a .ha-hero-lead{font-size:clamp(14px,2cqw,22px);line-height:1.6;margin-bottom:27px;color:#c6d1e0}
.html-a .ha-button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:13px 20px;border:0;border-radius:30px;background:var(--ha-mint);color:#10272a;font:450 12px/1.4 Onest,Arial,sans-serif;transition:background 220ms}
.html-a .ha-button:hover,.html-a .ha-header-cta:hover{background:#c6ffe9}
.html-a .ha-hero-note{border-left:1px solid #9ff9d75c;padding-left:13px;margin-top:36px;font-size:10px;line-height:1.6}
.html-a .ha-architecture{min-width:0;margin:0;align-self:center}
.html-a .ha-architecture img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.html-a .ha-architecture figcaption{display:flex;justify-content:center;align-items:center;gap:12px;color:var(--ha-muted);font-size:7px;letter-spacing:.12em;margin-top:18px}
.html-a .ha-architecture figcaption i{width:3px;height:3px;background:var(--ha-mint);border-radius:50%}
.html-a .ha-section{padding:48px 4.5%;border-top:1px solid var(--ha-line);scroll-margin-top:24px}
.html-a h2{font-size:clamp(26px,3.7cqw,43px);line-height:1.2;margin:13px 0 22px}
.html-a h2 span{color:var(--ha-muted)}
.html-a .ha-section-head>p:last-child{max-width:38em}
.html-a .ha-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:30px 0 44px}
.html-a .ha-service-card{display:flex;flex-direction:column;min-width:0;padding:20px 16px;border:1px solid var(--ha-line);border-radius:12px;background:#142335;transition:background 250ms,border-color 250ms}
.html-a .ha-service-card:hover{background:#1b3041;border-color:#9ff9d75c}
.html-a .ha-service-icon{width:26px;height:26px;color:var(--ha-mint);margin-bottom:24px}
.html-a .ha-service-card h3{font-size:19px;margin:0 0 10px}
.html-a .ha-service-card p{font-size:11px;margin-bottom:25px}
.html-a .ha-service-card>span{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;margin-top:auto;color:var(--ha-mint)}
.html-a .ha-service-details{display:grid;gap:32px}
.html-a .ha-service-details article{border-top:1px solid var(--ha-line);padding-top:24px;scroll-margin-top:24px}
.html-a .ha-service-details h3{font-size:23px;margin:10px 0 15px}
.html-a ul{font-size:12px;line-height:1.9;color:var(--ha-muted);padding-left:18px;margin:17px 0}
.html-a .ha-text-link{display:inline-flex;align-items:center;gap:20px;font-size:11px;color:var(--ha-mint);padding:8px 0}
.html-a .ha-about{background:#10202e}
.html-a .ha-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.html-a .ha-process article{border-top:1px solid var(--ha-line);padding-top:18px;min-width:0}
.html-a .ha-process article>span{font-size:10px;color:var(--ha-mint)}
.html-a .ha-process h3{font-size:19px;margin:15px 0 12px}
.html-a .ha-process p{font-size:11px}
.html-a .ha-form{max-width:650px}
.html-a fieldset{padding:0;margin:28px 0;border:0}
.html-a legend,.html-a .ha-draft-label{font-size:12px;margin:0 0 12px;display:block}
.html-a .ha-goals{display:grid;gap:9px}
.html-a .ha-goals label{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--ha-line);border-radius:9px;font-size:12px;cursor:pointer;background:#10202e}
.html-a .ha-goals label:has(:checked){border-color:#9ff9d780;background:#183c3d}
.html-a input[type=radio]{accent-color:var(--ha-mint);margin:0;width:16px;height:16px;flex:none}
.html-a .ha-draft-label>span{color:var(--ha-muted);font-size:10px;margin-left:8px}
.html-a textarea{display:block;width:100%;resize:none;box-sizing:border-box;height:120px;min-height:120px;max-height:240px;overflow:auto;scrollbar-gutter:stable;border:1px solid var(--ha-line);border-radius:9px;padding:14px 16px;background:#10202e;color:var(--ha-ink);font:13px/1.65 Onest,Arial,sans-serif;margin-bottom:22px}
.html-a textarea::placeholder{color:#91a3b6}
.html-a .ha-demo-note{font-size:10px;margin-top:16px}
.html-a .ha-plan{padding:25px 24px;margin-top:28px;border:1px solid #9ff9d74a;border-radius:12px;background:#143232}
.html-a .ha-plan h3{font-size:23px;margin:10px 0 16px}
.html-a .ha-plan ol{padding-left:18px;margin:0;color:#c6dcd4;font-size:12px;line-height:2}
.html-a .ha-footer{display:flex;align-items:center;justify-content:space-between;padding:24px 4.5%;margin:0;border-top:1px solid var(--ha-line);color:var(--ha-muted);font-size:9px}
.html-a .ha-footer>a{display:flex;gap:16px;align-items:center;color:var(--ha-mint)}
/* Type grows with this document's own plane, including the full desktop view. */
.html-a p{font-size:clamp(13px,1.05cqw,16px)}
.html-a .ha-brand strong{font-size:clamp(14px,1.3cqw,20px)}
.html-a .ha-brand small{font-size:clamp(6px,.55cqw,8px)}
.html-a .ha-header nav a{font-size:clamp(10px,.95cqw,14px)}
.html-a .ha-header-cta{font-size:clamp(10px,.95cqw,14px);padding:clamp(11px,1cqw,15px) clamp(17px,1.5cqw,24px)}
.html-a .ha-button{font-size:clamp(12px,1cqw,15px)}
.html-a .ha-service-card h3{font-size:clamp(19px,1.75cqw,26px)}
.html-a .ha-service-card p{font-size:clamp(11px,.95cqw,14px)}
.html-a .ha-service-card>span,.html-a .ha-text-link{font-size:clamp(11px,.9cqw,13px)}
.html-a .ha-process p{font-size:clamp(11px,.95cqw,14px)}
.html-a ul,.html-a .ha-plan ol{font-size:clamp(12px,1cqw,15px)}
.html-a legend,.html-a .ha-draft-label,.html-a .ha-goals label{font-size:clamp(12px,1cqw,15px)}
.html-a textarea{font-size:clamp(13px,1cqw,16px)}
@media(prefers-reduced-motion:reduce){.html-a *{transition:none!important;scroll-behavior:auto!important}}
.reduced .html-a *{transition:none!important;scroll-behavior:auto!important}

/* Field focus belongs to its own boundary, for pointer and keyboard alike. */
.html-a textarea:focus{outline:0;outline-offset:0;border-color:var(--ha-mint);box-shadow:inset 0 0 0 1px var(--ha-mint)}

/* R1: the selected architectural composition, one side index and native building labels. */
.html-a .ha-page{position:relative}
.html-a .ha-header{border-bottom:0;padding-block:24px}
.html-a .ha-side-nav{position:absolute;left:4.5%;top:145px;z-index:4;display:grid;gap:22px;width:100px}
.html-a .ha-side-nav a{position:relative;padding:6px 0;font-size:clamp(12px,.95cqw,14px);line-height:1.4;color:var(--ha-muted);transition:color .2s}
.html-a .ha-side-nav a::before{content:"";position:absolute;width:14px;height:2px;left:-24px;top:50%;background:var(--ha-mint);opacity:0;transition:opacity .2s}
.html-a .ha-side-nav a[aria-current],.html-a .ha-side-nav a:hover{color:var(--ha-mint)}
.html-a .ha-side-nav a[aria-current]::before{opacity:1}
.html-a .ha-hero{display:block;position:relative;isolation:isolate;min-height:clamp(480px,46cqw,700px);padding:45px 4.5% 40px 18%}
.html-a .ha-hero-copy{width:52%;pointer-events:none}
.html-a .ha-hero-copy>*{pointer-events:auto}
.html-a .ha-hero h1{font-size:clamp(42px,5cqw,76px);line-height:1.06;letter-spacing:-.04em;text-wrap:initial;margin-top:15px}
.html-a .ha-hero-lead{font-size:clamp(16px,1.5cqw,23px)}
.html-a .ha-hero-note{margin-top:38px}
.html-a .ha-architecture{position:absolute;width:75%;right:1.5%;bottom:0;z-index:0;aspect-ratio:3/2;margin:0}
.html-a .ha-architecture img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
.html-a .ha-architecture .ha-building-labels{display:block;position:absolute;inset:0;margin:0;letter-spacing:0;text-align:left}
.html-a .ha-building{position:absolute;display:grid;gap:5px;min-width:118px;padding:8px 10px;background:#0b1522e8;border-radius:5px;color:var(--ha-ink);font-size:clamp(14px,1.05cqw,17px);line-height:1.2;box-shadow:0 8px 20px #0002;transition:background .2s}
.html-a .ha-building strong{font-weight:500}
.html-a .ha-building span{font-size:clamp(12px,.88cqw,13px);line-height:1.35;color:#bfcbd9}
.html-a .ha-building::after{content:"";position:absolute;left:20px;top:100%;width:1px;height:15px;background:var(--ha-mint)}
.html-a .ha-building:hover{background:#172c3b}
.html-a .ha-building-site{left:20%;top:62%}
.html-a .ha-building-search{left:49%;top:24%}
.html-a .ha-building-ads{left:76%;top:60%}
.html-a .ha-section{padding-left:18%}
.html-a .ha-footer{padding-left:18%}
@container(max-width:1150px){.html-a .ha-side-nav{width:88px;top:135px}.html-a .ha-side-nav a::before{left:-19px;width:11px}.html-a .ha-hero{padding-top:28px}.html-a .ha-hero-copy{width:52%}.html-a .ha-hero-note{margin-top:24px}.html-a .ha-building{min-width:108px;padding:7px 8px}.html-a .ha-header{padding-block:20px}}

/* R2: bound selectable hero text to its content, keeping native callouts reachable. */
.html-a .ha-hero-copy > :is(h1,p){width:fit-content;max-width:100%}

/* R4: contact preparation is a quiet header route; hero explores the system. */
.html-a .ha-header-cta{background:transparent;color:var(--ha-mint);border:1px solid #a6f5d85c}
.html-a .ha-header-cta:hover{background:#a6f5d815;border-color:#a6f5d8}