*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.7;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--glass-deep);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.75rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---- N1b three-section bar ---- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;background:color-mix(in oklch,var(--paper) 72%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.topbar.is-scrolled{border-bottom-color:var(--rule);background:color-mix(in oklch,var(--paper) 94%,transparent)}
.topbar__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-md);min-height:4rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;white-space:nowrap;min-height:44px}
.brand svg{width:1.9rem;height:1.9rem;flex:none}
.mk-sun{fill:var(--sun)}
.mk-roof{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bar__links{display:none;justify-self:center;gap:.25rem}
.bar__links a{font-family:var(--font-display);font-size:var(--text-sm);text-decoration:none;padding:.5rem .85rem;border-radius:var(--radius-sm);min-height:44px;display:inline-flex;align-items:center;color:var(--ink-dim)}
.bar__links a:hover,.bar__links a[aria-current="page"]{background:var(--glass-soft);color:var(--ink)}
.bar__end{display:flex;align-items:center;gap:var(--space-xs);justify-self:end;grid-column:3}
.bar__btn{font-family:var(--font-display);font-size:var(--text-sm);font-weight:500;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:var(--radius-sm);padding:0 1rem;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.bar__btn::after{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur) var(--ease)}
.bar__btn[aria-expanded="true"]::after{transform:rotate(-135deg)}
.bar__btn:hover{background:var(--glass-soft)}
.bar__cta{display:none;font-family:var(--font-display);font-size:var(--text-sm);font-weight:500;text-decoration:none;background:var(--ink);color:var(--paper);border-radius:var(--radius-sm);padding:0 1.1rem;min-height:44px;align-items:center}
.bar__cta:hover{background:var(--ink-dim)}
.panel{margin:0 calc(var(--gutter) * -1);padding:var(--space-md) var(--gutter) var(--space-lg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper);box-shadow:0 24px 40px -24px var(--shadow);max-height:calc(100vh - 4.5rem);overflow-y:auto}
html.js .panel{display:none}
html.js .panel.is-open{display:block}
.panel__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md);max-width:var(--wrap);margin-inline:auto}
.panel h2{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-text);margin-bottom:var(--space-xs)}
.panel a{display:block;text-decoration:none;font-family:var(--font-display);font-size:var(--text-sm);padding:.45rem .5rem;border-radius:var(--radius-sm);line-height:1.3}
.panel a:hover,.panel a[aria-current="page"]{background:var(--glass-soft)}

main{padding-top:4rem}

/* ---- split studio rows ---- */
.studio{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);align-items:center;padding-block:var(--space-2xl)}
.half{min-width:0}
.eyebrow{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent-text);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:2rem;height:3px;border-radius:3px;background:var(--glass-deep)}
.h-display{font-family:var(--font-display);font-weight:300;font-size:var(--text-3xl);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.h-sec{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.lede{font-size:var(--text-lg);line-height:1.6;color:var(--ink-dim);margin-top:var(--space-md);max-width:34rem}
.studio p.copy{margin-top:var(--space-md);max-width:34rem;color:var(--ink-dim)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.btn{font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.35rem;border-radius:var(--pill);border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:background-color var(--dur) var(--ease)}
.btn:hover{background:var(--glass)}
.btn--sun{background:var(--glass);border-color:var(--glass)}
.btn--sun:hover{background:var(--glass-deep);border-color:var(--glass-deep)}
.fig{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{font-family:var(--font-display);font-size:var(--text-xs);line-height:1.5;color:var(--ink-dim);padding:.7rem 1rem;border-top:1px solid var(--rule)}

.hero{position:relative;background:radial-gradient(ellipse 60% 70% at 8% 0%,var(--glass-soft),transparent 70%),linear-gradient(var(--sky),var(--paper) 85%);border-bottom:1px solid var(--rule)}
.band{border-top:1px solid var(--rule)}
.band--tint{background:var(--paper-2)}
.row-no{font-family:var(--font-display);font-weight:200;font-size:clamp(3rem,8vw,5.5rem);line-height:1;color:var(--glass-deep);letter-spacing:-.04em;margin-bottom:var(--space-xs)}
.more{display:inline-flex;margin-top:var(--space-md);font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);text-decoration-color:var(--glass-deep);text-decoration-thickness:2px;text-underline-offset:5px}
.more:hover{background:var(--glass-soft)}

.guidelist{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
.guidelist a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1rem;align-items:center;padding:1rem .25rem;border-bottom:1px solid var(--rule);text-decoration:none;min-height:44px}
.guidelist b{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;line-height:1.3}
.guidelist span{grid-column:1;font-size:var(--text-sm);color:var(--ink-dim);line-height:1.5}
.guidelist i{grid-column:2;grid-row:1 / span 2;font-style:normal;font-family:var(--font-display);color:var(--accent-text)}
.guidelist a:hover{background:var(--glass-soft)}
.sticky{position:static}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-md)}
.chips li{font-family:var(--font-display);font-size:var(--text-sm);padding:.35rem .9rem;border:1px solid var(--rule);border-radius:var(--pill);background:var(--paper)}

/* ---- article ---- */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;font-family:var(--font-display);font-size:var(--text-xs);color:var(--ink-dim);margin-bottom:var(--space-md)}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--glass-deep)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.art-head h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.dek{font-size:var(--text-lg);line-height:1.55;color:var(--ink-dim);margin-top:var(--space-md);max-width:36rem}
.meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:var(--space-md);font-family:var(--font-display);font-size:var(--text-xs);color:var(--ink-dim)}
.meta span+span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:.9rem;border-radius:50%;background:var(--glass-deep);vertical-align:middle}
.art-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding-block:var(--space-xl) var(--space-2xl)}
.rail{min-width:0}
.rail__box{border:1px solid var(--rule);border-radius:var(--radius);padding:var(--space-md);background:var(--paper-2)}
.rail h2{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-text);margin-bottom:var(--space-sm)}
.rail ol{counter-reset:c;display:grid;gap:.1rem}
.rail ol a{display:flex;gap:.7rem;text-decoration:none;font-family:var(--font-display);font-size:var(--text-sm);line-height:1.35;padding:.45rem .4rem;border-radius:var(--radius-sm);min-height:44px;align-items:flex-start}
.rail ol a::before{counter-increment:c;content:counter(c,decimal-leading-zero);color:var(--glass-deep);font-weight:600;flex:none;min-width:1.6rem}
.rail ol a:hover,.rail ol a.is-here{background:var(--glass-soft)}
.rail__note{margin-top:var(--space-md);font-family:var(--font-display);font-size:var(--text-xs);line-height:1.55;color:var(--ink-dim)}
.prose{min-width:0;max-width:41rem}
.prose>*+*{margin-top:1.15em}
.prose h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);line-height:1.2;letter-spacing:-.015em;margin-top:2.4em;padding-top:1rem;position:relative;text-wrap:balance}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:2.5rem;height:3px;border-radius:3px;background:var(--glass-deep)}
.prose h3{font-family:var(--font-display);font-weight:500;font-size:1.125rem;line-height:1.3;margin-top:1.8em}
.prose a{text-decoration-line:underline;text-decoration-color:var(--glass-deep);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose a:hover{background:var(--glass-soft)}
.prose ul,.prose ol{padding-left:1.3rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{padding-left:.3rem}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--glass-deep)}
.prose blockquote{border-left:3px solid var(--glass-deep);padding:.2rem 0 .2rem 1.2rem;color:var(--ink-dim)}
.prose abbr{text-decoration:underline dotted;text-underline-offset:3px}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius-sm);-webkit-overflow-scrolling:touch}
table.data{border-collapse:collapse;width:100%;min-width:30rem;font-size:var(--text-sm);line-height:1.5}
table.data caption{text-align:left;font-family:var(--font-display);font-weight:500;padding:.8rem 1rem;caption-side:top}
table.data th,table.data td{text-align:left;vertical-align:top;padding:.65rem 1rem;border-top:1px solid var(--rule)}
table.data th{font-family:var(--font-display);font-weight:600;background:var(--paper-2)}
.faq{margin-top:2.4em}
.faq .faq-item{border-top:1px solid var(--rule);padding-block:1rem}
.faq .faq-item:last-child{border-bottom:1px solid var(--rule)}
.faq h3{margin-top:0;font-size:1.0625rem}
.faq .faq-item p{margin-top:.5rem;color:var(--ink-dim)}
.sources{margin-top:2.4em;padding:var(--space-md);border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--rule);font-size:var(--text-sm);line-height:1.6}
.prose .sources h2{margin-top:0;font-size:1rem;padding-top:0}
.prose .sources h2::before{display:none}
.sources li{margin-top:.6em}
.nextup{border-top:1px solid var(--rule);background:var(--paper-2);padding-block:var(--space-2xl)}
.nextup h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);margin-bottom:var(--space-md)}
.nextup ul{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
.nextup a{display:block;height:100%;text-decoration:none;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);padding:var(--space-md);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.nextup a:hover{border-color:var(--glass-deep);transform:translateY(-2px)}
.nextup b{font-family:var(--font-display);font-weight:500;display:block;line-height:1.3}
.nextup span{display:block;margin-top:.4rem;font-size:var(--text-sm);color:var(--ink-dim);line-height:1.5}

/* ---- contact form ---- */
.form{display:grid;gap:var(--space-md);margin-top:var(--space-lg);padding:var(--space-md);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2)}
.form label{display:grid;gap:.35rem;font-family:var(--font-display);font-size:var(--text-sm);font-weight:500}
.form input,.form select,.form textarea{font:inherit;font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink-dim);border-radius:var(--radius-sm);padding:.7rem .8rem;min-height:48px;width:100%}
.form textarea{min-height:9rem;resize:vertical}
.form p{font-size:var(--text-sm);color:var(--ink-dim)}

/* ---- Ft1 horizon footer ---- */
.horizon{position:relative;overflow:hidden;border-top:1px solid var(--rule);background:linear-gradient(var(--paper),var(--glass-soft) 55%,var(--sky))}
.horizon__arc{position:absolute;inset:0 0 auto 0;width:100%;height:100%;pointer-events:none}
.horizon__arc path{fill:none;stroke:var(--glass-deep);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.horizon .wrap{position:relative;padding-block:var(--space-2xl) var(--space-xl)}
.mast{font-family:var(--font-display);font-weight:200;font-size:var(--text-mast);line-height:1;letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}
.mast span{color:var(--glass-deep)}
.horizon__tag{font-family:var(--font-display);font-size:var(--text-lg);margin-top:var(--space-sm);color:var(--ink-dim)}
.horizon__links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin-top:var(--space-lg)}
.horizon__links a{font-family:var(--font-display);font-size:var(--text-sm);font-weight:500;text-decoration-color:var(--glass-deep);text-decoration-thickness:2px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
.horizon__fine{margin-top:var(--space-md);max-width:52rem;font-size:var(--text-sm);line-height:1.65;color:var(--ink-dim)}

/* ---- hand-built SVG vocabulary ---- */
.g-txt{font-family:var(--font-display);font-size:16px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--sky);stroke-width:4px;stroke-linejoin:round}
.g-dim{fill:var(--ink-dim);font-weight:400;font-size:14px}
.g-head{font-size:20px;font-weight:600}
.g-sky{fill:var(--sky)}
.g-hair,.g-lead{stroke:var(--ink-dim);stroke-width:1.2;fill:none}
.g-sun{fill:var(--sun)}
.g-halo{fill:var(--sun);opacity:.28}
.g-ray{stroke:var(--sun-deep);stroke-width:2.4;stroke-linecap:round;fill:none}
.g-ray--low{stroke-dasharray:6 6}
.g-fillray{fill:var(--sun-deep)}
.g-room{fill:var(--paper);stroke:var(--rule);stroke-width:1.5}
.g-beam{fill:var(--sun);opacity:.38}
.g-roof{fill:var(--ink);opacity:.88}
.g-glazing{stroke:var(--sky-deep);stroke-width:5;stroke-linecap:butt}
.g-glazing-edge{stroke:var(--ink);stroke-width:9;stroke-linecap:butt}
.g-paneedge{fill:var(--ink)}
.g-panefill{fill:var(--sky-deep)}
.g-frame{fill:var(--ink)}
.g-pane{fill:var(--sky-deep);stroke:var(--ink);stroke-width:1.5}
.g-gap{fill:var(--paper)}
.g-coat{stroke:var(--sun-deep);stroke-width:3.5}
.g-glassp{fill:var(--sky-deep);opacity:.8;stroke:var(--ink);stroke-width:2}
.g-glasspane{fill:var(--sky-deep);stroke:var(--ink);stroke-width:2}
.g-roofline{stroke:var(--ink);stroke-width:7;fill:none;stroke-linejoin:round;stroke-linecap:round}
.g-soft{stroke:var(--sun-deep);stroke-width:2;fill:none;opacity:.6}
.g-floor{stroke:var(--ink);stroke-width:3}
.g-patch{stroke:var(--sun);stroke-width:9;stroke-linecap:round}
.g-furn{fill:var(--sky-deep)}
.g-shingle{fill:var(--ink-dim);stroke:var(--paper);stroke-width:1}
.g-rafter,.g-deck{fill:var(--timber);stroke:var(--timber-deep);stroke-width:1}
.g-under{stroke:var(--ink);stroke-width:2}
.g-curb{fill:var(--timber);stroke:var(--ink);stroke-width:1.5}
.g-flash{stroke:var(--ink-dim);stroke-width:4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.g-water{stroke:var(--water);stroke-width:2.6;fill:none;stroke-linecap:round}
.g-fillwater,.g-drop{fill:var(--water)}
.g-motor{fill:var(--ink-dim)}
.g-wire{stroke:var(--ink-dim);stroke-width:2.4;fill:none}
.g-dome{fill:var(--sky-deep);stroke:var(--ink);stroke-width:3}
.g-collar{fill:var(--ink)}
.g-tube{fill:var(--sun-soft)}
.g-tubeline{stroke:var(--sun-deep);stroke-width:2}
.g-diff{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.g-vsrule{stroke:var(--rule);stroke-width:2;stroke-dasharray:3 7}
.g-card{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.g-slot{fill:none;stroke:var(--ink-dim);stroke-width:1.5;stroke-dasharray:4 4}
.g-compass{fill:var(--paper-2);stroke:var(--ink-dim);stroke-width:1.5}
.g-sunpath{fill:none;stroke:var(--sun-deep);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.g-courseline{stroke:var(--ink-dim);stroke-width:1;opacity:.45}
.g-deck-plane{fill:var(--paper);stroke:var(--ink-dim);stroke-width:1.5}
.g-flash-head,.g-flash-tab{fill:var(--ink-dim)}
.g-cold{fill:var(--sky-deep);opacity:.5}
.g-vapour{fill:none;stroke:var(--ink-dim);stroke-width:2.4;stroke-dasharray:3 7;stroke-linecap:round}
.g-attic{fill:var(--paper-2)}
.g-batt{fill:none;stroke:var(--sun-deep);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.g-shaftwall{stroke:var(--ink);stroke-width:3}
.g-rafterline{stroke:var(--timber-deep);stroke-width:5}
.g-cutline{stroke:var(--timber-deep);stroke-width:3;stroke-dasharray:4 5;opacity:.8}
.g-trim{fill:var(--ink-dim)}
.g-header{fill:var(--ink)}
.g-open{fill:var(--sun-soft);stroke:var(--ink-dim);stroke-width:1.5;stroke-dasharray:4 4}
.g-box{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.g-tick{fill:none;stroke:var(--sun-deep);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.g-clip{fill:var(--ink)}

/* ---- breakpoints ---- */
@media (min-width:52rem){
  .bar__links{display:flex}
  .bar__cta{display:inline-flex}
  .panel__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,5.5rem)}
  .studio--flip .half--fig{order:-1}
  .studio--wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sticky{position:sticky;top:6.5rem;align-self:start}
  .nextup ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .art-body{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .art-body--flip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .art-body--flip .rail{order:2}
  .rail{position:sticky;top:6.5rem}
}
@media (max-width:30rem){
  .brand{font-size:1rem}
  .btn{width:100%;justify-content:center}
}
@media (max-width:24rem){.bar{gap:var(--space-xs)}.brand{font-size:.9375rem;gap:.4rem}.brand svg{width:1.5rem;height:1.5rem}.bar__btn{padding:0 .7rem}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}