/* ARTHAUS GROUP — site styles. Four divisions (Oct 29 2026).
   Layout: paper ground, left-aligned editorial columns, hairline rules. Colour lives in the four division
   colours: H Design (Oat), A Construction (Brass), U Development (Bottle), S Millwork (Walnut).
   Each division page takes its colour for the banner and a light tint of it for the page.
   Single light theme by choice: the brand is specified on paper. */
:root{
  color-scheme: light;
  --paper:#F5F1EA; --card:#FBF9F4; --white:#FFFFFF; --paper-glass:rgba(245,241,234,.92);
  --graphite:#3D403E; --carbon:#171A19; --hairline:#DED8CD; --mute:#69675F; --light:#F7F2E8;
  /* Division colours ("Workshop"), the text set on each, and each page's ground */
  --c1:#D9CBB1; --c2:#BF934C; --c3:#1F4A3F; --c4:#5E3F2D;
  --i1:#171A19; --i2:#171A19; --i3:#F7F2E8; --i4:#F7F2E8;
  --s1:#463C2B; --s2:#33240D; --s3:#D2E3DA; --s4:#E8D9CC;
  --g1:#EEE6D7; --g2:#F0E5D1; --g3:#E3E8E2; --g4:#ECE3DB;
  --gg1:rgba(238,230,215,.92); --gg2:rgba(240,229,209,.92); --gg3:rgba(227,232,226,.92); --gg4:rgba(236,227,219,.92);
  --cta:#183B32; --cta-ink:var(--paper); --cta-soft:rgba(245,241,234,.8);
  --glint:#C9A465;
  --face:'Albert Sans','Helvetica Neue',Arial,sans-serif;
  --track:.02em;
  /* Type scale: five sizes, each with one job. Logos, wordmarks and the large HAUS letters sit outside it. */
  --fs-display:clamp(40px,5.6vw,84px); /* page headlines */
  --fs-h2:clamp(30px,3.5vw,52px);      /* section headings, stat numbers */
  --fs-h3:clamp(20px,1.8vw,24px);      /* sub-headings, intro paragraphs */
  --fs-body:16px;                      /* all running text */
  --fs-label:13px;                     /* uppercase labels, buttons, nav, captions */
  --ease:cubic-bezier(.2,.7,.2,1);
  --max:1320px;
  --head:72px;
  /* Current division (set on <body data-div> and on division-coloured blocks) */
  --c:var(--carbon); --ci:var(--paper); --cs:var(--paper); --ground:var(--paper);
}
@media(min-width:760px){:root{--head:88px}}
body[data-div="1"],.d1{--c:var(--c1);--ci:var(--i1);--cs:var(--s1);--ground:var(--g1)}
body[data-div="2"],.d2{--c:var(--c2);--ci:var(--i2);--cs:var(--s2);--ground:var(--g2)}
body[data-div="3"],.d3{--c:var(--c3);--ci:var(--i3);--cs:var(--s3);--ground:var(--g3)}
body[data-div="4"],.d4{--c:var(--c4);--ci:var(--i4);--cs:var(--s4);--ground:var(--g4)}
body[data-div="1"]{--paper-glass:var(--gg1)} body[data-div="2"]{--paper-glass:var(--gg2)}
body[data-div="3"]{--paper-glass:var(--gg3)} body[data-div="4"]{--paper-glass:var(--gg4)}

*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--graphite);font-family:var(--face);font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body[data-div]{background:var(--ground);--mute:#57554E}
img{max-width:100%;display:block;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{color:var(--carbon);font-weight:300;text-wrap:balance}
h1 b,h2 b,h3 b{font-weight:700}
/* Justified running text (Matin, Oct 26). Headings, labels, buttons, captions and short lines stay ragged. */
p,li,dd,blockquote{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
.stat .l,.pc-line,.foot-grid li,.menu li,.hs-idx p,.hx-list li,.flow4 li,.flow4 p,.gal-item span,.lb-cap,.ledger li,.mw-points p,.lots-key p,.mw-n,.dv-cover .cap{text-align:left;-webkit-hyphens:manual;hyphens:manual}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--carbon);color:var(--paper);padding:10px 14px;font-size:var(--fs-label);font-weight:500}
.skip:focus{left:16px}

/* Layout */
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:760px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
@media(min-width:1200px){.wrap{padding-left:max(64px,env(safe-area-inset-left,0px));padding-right:max(64px,env(safe-area-inset-right,0px))}}
.section{padding-block:clamp(72px,10vw,144px)}
.section.tight{padding-block:clamp(56px,7vw,96px)}
.ruled{border-top:1px solid var(--hairline)}
body[data-div] .ruled{border-top-color:rgba(23,26,25,.12)}
.split{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:960px){.split{grid-template-columns:5fr 6fr;gap:80px}}
.split>*{min-width:0}

/* Type */
.label,.eyebrow{display:block;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;font-weight:500;line-height:1.4}
.eyebrow{color:var(--mute)}
.display{font-size:var(--fs-display);line-height:1;letter-spacing:-.01em}
.h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.006em}
.lead{font-size:var(--fs-h3);line-height:1.6;color:var(--graphite);max-width:56ch}
.prose p{max-width:64ch}
.prose p+p{margin-top:16px}
.prose b{font-weight:600;color:var(--carbon)}
.ph-note{color:var(--mute)}

/* Wordmark: ARTHAUS in one light weight; GROUP on a second row under ART, from A's left edge to T's right edge.
   Geometry in em of the logo size, measured from Albert Sans (site.js re-measures on load and updates these). */
:root{--wm-x0:.005;--wm-art-w:1.86;--wm-w:4.5402;--wm-row:.99;--wm-cap:.196;--wm-hgt:1.186;--wm-g-fs:.28;--wm-g-wt:500}
.wm{position:relative;display:inline-block;vertical-align:middle;width:calc(var(--wm-w) * 1em);height:calc(var(--wm-hgt) * 1em);
  font-family:var(--face);line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--carbon)}
.wm-top{position:absolute;left:0;top:0;height:calc(var(--wm-row) * 1em)}
.wm .word{display:inline-flex;font-weight:300;letter-spacing:var(--track)}
.wm-row{position:absolute;left:0;top:calc(var(--wm-row) * 1em);width:calc(var(--wm-w) * 1em);height:calc(var(--wm-cap) * 1em);overflow:visible}
.wm-row text{font-family:var(--face);font-weight:var(--wm-g-wt,500);letter-spacing:0;fill:var(--carbon);text-rendering:geometricPrecision}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;padding:15px 24px;background:var(--carbon);color:var(--paper);border:1px solid var(--carbon);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);font-weight:500;line-height:1.2}
.btn:hover{background:transparent;color:var(--carbon)}
.btn.light{background:var(--light);color:var(--carbon);border-color:var(--light)}
.btn.light:hover{background:transparent;color:var(--light)}
.btn.line-light{background:transparent;color:var(--light);border-color:rgba(247,242,232,.6)}
.btn.line-light:hover{background:var(--light);color:var(--carbon);border-color:var(--light)}
.arrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--carbon);border-bottom:1px solid currentColor;padding-bottom:5px;font-weight:500}
.arrow span,.go span{display:inline-block;transition:transform .4s var(--ease)}
.arrow:hover span,a:hover .go span{transform:translateX(6px)}

/* Section label strip */
.strip{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;margin-bottom:clamp(36px,5vw,64px)}
.strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--carbon);transform-origin:left}
.strip .label{color:var(--carbon)}
.strip .label+.label{color:var(--mute);text-align:right}
body[data-div] .strip .label+.label{color:var(--graphite)}
.strip:has(+ .svc-list){margin-bottom:0}
.strip+.svc-list{border-top:0}

/* Scale bar: the four division colours */
.scalebar{display:grid;grid-template-columns:repeat(4,1fr);height:8px}
.scalebar span{transform-origin:left}
.scalebar span:nth-child(1){background:var(--c1)} .scalebar span:nth-child(2){background:var(--c2)}
.scalebar span:nth-child(3){background:var(--c3)} .scalebar span:nth-child(4){background:var(--c4)}

/* Image frame with reveal */
.ph{position:relative;overflow:hidden;background:var(--hairline)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-in{position:absolute;inset:0}

/* ---------- Header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.site-head.scrolled{border-color:var(--hairline)}
body[data-div] .site-head.scrolled{border-color:rgba(23,26,25,.1)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--head)}
.head-row .wm{font-size:28px}
@media(min-width:760px){.head-row .wm{font-size:32px}}
.nav{display:none;align-items:center;gap:24px}
.nav a{position:relative;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);padding:6px 0;font-weight:500}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--u,var(--carbon));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--carbon)}
.nav a.n1{--u:var(--c1)} .nav a.n2{--u:var(--c2)} .nav a.n3{--u:var(--c3)} .nav a.n4{--u:var(--c4)}
body[data-div="1"] .nav a.n1{--u:#B5A27E}
.nav .sep{width:1px;height:14px;background:var(--hairline)}
.head-cta{display:none;padding:14px 22px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--carbon);padding:10px 0;font-weight:500}
.menu-btn i{display:block;width:22px;height:1px;background:var(--carbon);box-shadow:0 6px 0 var(--carbon)}
@media(min-width:1200px){.nav{display:flex}.head-cta{display:inline-flex}.menu-btn{display:none}}

.menu{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;gap:24px;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(16px,env(safe-area-inset-left,0px));transform:translateY(-102%);visibility:hidden;transition:transform .7s var(--ease),visibility 0s linear .7s}
.menu.open{transform:none;visibility:visible;transition:transform .7s var(--ease)}
.menu-top{display:flex;justify-content:space-between;align-items:center;min-height:60px}
.menu-top .wm{font-size:28px}
.menu-divs{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.menu-divs a{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:118px;padding:16px;background:var(--c);color:var(--ci)}
.menu-divs .L{font-size:44px;font-weight:300;line-height:.8}
.menu-divs .n{font-size:var(--fs-h3);font-weight:400;line-height:1.1}
.menu-links a{display:block;font-size:var(--fs-h2);font-weight:300;color:var(--carbon);padding:6px 0;border-bottom:1px solid var(--hairline)}
.menu .btn{align-self:flex-start}
.menu-open{overflow:hidden}

/* ---------- Home: hero with four division slides ---------- */
.hs{position:relative}
.hs-stage{position:relative;background:var(--carbon);height:clamp(440px,calc(100svh - var(--head) - 130px),900px);overflow:hidden}
@media(min-width:900px){.hs-stage{height:clamp(480px,calc(100svh - var(--head) - 176px),900px)}}
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hs-slide.on{opacity:1}
.hs-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 9s cubic-bezier(.25,.1,.25,1)}
.hs-slide.on img{transform:scale(1)}
.hs-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,16,15,0) 30%,rgba(14,16,15,.66) 100%),linear-gradient(90deg,rgba(14,16,15,.34) 0%,rgba(14,16,15,0) 62%)}
@media(max-width:759px){.hs-stage::after{background:linear-gradient(180deg,rgba(14,16,15,.05) 0%,rgba(14,16,15,.35) 30%,rgba(14,16,15,.78) 100%)}}
.hs-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(28px,4.5vw,64px)}
.hs-copy .eyebrow{color:rgba(247,242,232,.82)}
.hs-copy h1{color:var(--light);margin-top:18px}
.hs-copy .lead{color:rgba(247,242,232,.9);margin-top:20px;max-width:44ch;text-align:left;hyphens:manual}
.hs-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.hs-idx{background:var(--paper);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.hs-idx{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hs-idx a{display:flex;flex-direction:column;gap:8px;padding:18px 16px 22px 0;min-width:0;color:var(--carbon)}
@media(min-width:900px){.hs-idx a{padding:20px 24px 26px 0}}
.hs-idx .bar{position:relative;height:4px;background:var(--hairline);overflow:hidden;margin-bottom:10px}
.hs-idx .bar i{position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
.hs-idx a.on .bar i{animation:hsFill var(--dur,6.5s) linear forwards}
.hs-idx .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hs-idx .n{font-size:var(--fs-h3);font-weight:400;line-height:1.15}
.hs-idx .L{font-size:var(--fs-label);font-weight:500;color:var(--mute)}
.hs-idx p{font-size:var(--fs-body);line-height:1.5;color:var(--graphite);max-width:30ch;display:none}
@media(min-width:900px){.hs-idx p{display:block}}
.hs-idx .go{font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--carbon);margin-top:4px}
@keyframes hsFill{to{transform:scaleX(1)}}

/* Home: statement and stats */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--carbon);margin-top:clamp(48px,6vw,80px)}
@media(min-width:960px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{padding:26px 16px 26px 0;border-bottom:1px solid var(--hairline)}
.stat .n{font-size:var(--fs-h2);font-weight:300;line-height:1;color:var(--carbon);font-variant-numeric:tabular-nums}
.stat .l{margin-top:10px;font-size:var(--fs-body);max-width:24ch}

/* Home: the in-house advantage */
.benefits{display:grid;grid-template-columns:1fr;column-gap:clamp(32px,4vw,64px);margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--carbon)}
@media(min-width:900px){.benefits{grid-template-columns:repeat(3,minmax(0,1fr))}}
.benefits>div{display:flex;flex-direction:column;gap:10px;padding:26px 0 32px;border-bottom:1px solid var(--hairline);min-width:0}
@media(min-width:900px){.benefits>div{border-bottom:0}}
.benefits .num{font-size:var(--fs-label);font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums}
.benefits h3{font-size:var(--fs-h3);font-weight:400;line-height:1.2}
.benefits p{max-width:42ch}
.benefits+.stats{margin-top:clamp(24px,3vw,40px)}

/* Home: the HAUS index. The four letters stay pinned while the four divisions scroll past;
   each division lights its own letter and bar, as in the logo. */
.hx{display:grid;grid-template-columns:1fr}
@media(min-width:1000px){.hx{grid-template-columns:5fr 7fr;gap:clamp(48px,6vw,96px)}}
.hx>*{min-width:0}
.hx-pin{display:none}
@media(min-width:1000px){.hx-pin{display:block;position:sticky;top:calc(var(--head) + 8vh);align-self:start;container-type:inline-size;padding-bottom:4vh}}
.hx-word{display:flex;justify-content:space-between;font-weight:300;font-size:33cqw;line-height:.78;text-transform:uppercase;padding-bottom:.16em}
.hx-word span{position:relative;color:rgba(23,26,25,.12);transition:color .7s var(--ease)}
.hx-word span::after{content:"";position:absolute;left:.02em;right:.04em;top:calc(100% + .08em);height:.05em;background:var(--hairline);transform-origin:left;transition:background .7s var(--ease)}
.hx[data-a="1"] .hx-word span:nth-child(1),.hx[data-a="2"] .hx-word span:nth-child(2),.hx[data-a="3"] .hx-word span:nth-child(3),.hx[data-a="4"] .hx-word span:nth-child(4){color:var(--carbon)}
.hx[data-a="1"] .hx-word span:nth-child(1)::after{background:var(--c1)} .hx[data-a="2"] .hx-word span:nth-child(2)::after{background:var(--c2)}
.hx[data-a="3"] .hx-word span:nth-child(3)::after{background:var(--c3)} .hx[data-a="4"] .hx-word span:nth-child(4)::after{background:var(--c4)}
.hx-now{position:relative;height:1.6em;margin-top:28px;font-size:var(--fs-h3);overflow:hidden}
.hx-now span{position:absolute;left:0;top:0;display:flex;gap:16px;align-items:baseline;color:var(--carbon);opacity:0;transform:translateY(60%);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hx-now span i{font-style:normal;font-size:var(--fs-label);font-weight:500;color:var(--mute);letter-spacing:.04em}
.hx[data-a="1"] .hx-now span:nth-child(1),.hx[data-a="2"] .hx-now span:nth-child(2),.hx[data-a="3"] .hx-now span:nth-child(3),.hx[data-a="4"] .hx-now span:nth-child(4){opacity:1;transform:none}
.hx-pin .label{color:var(--mute);margin-bottom:22px}
.hx-p{display:grid;gap:28px;padding-block:clamp(40px,6vw,72px)}
.hx-p:first-child{padding-top:0}
.hx-p+.hx-p{border-top:1px solid var(--hairline)}
.hx-media{display:block;position:relative}
.hx-media .ph{aspect-ratio:4/3}
.hx-media .ph img{transition:transform 1.4s var(--ease)}
.hx-media:hover .ph img{transform:scale(1.035)}
.hx-media .cbar{display:block;height:6px;background:var(--c);margin-top:10px;width:34%;transform-origin:left}
.hx-body{display:flex;flex-direction:column;gap:16px}
.hx-body .label{display:flex;gap:14px;align-items:baseline;color:var(--carbon)}
.hx-body .label b{font-weight:700}
.hx-body .label i{font-style:normal;color:var(--mute)}
.hx-body h3{font-size:var(--fs-h2);line-height:1.06}
.hx-body>p{max-width:56ch}
.hx-list{display:flex;flex-wrap:wrap;gap:8px}
.hx-list li{font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);border:1px solid var(--hairline);padding:7px 11px}
.hx-body .arrow{align-self:flex-start;margin-top:6px}

/* Home: one project, start to finish */
.flow4{position:relative;display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(36px,5vw,56px)}
@media(min-width:960px){.flow4{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}}
.flow4::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--carbon);transform-origin:top}
@media(min-width:960px){.flow4::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px;transform-origin:left}}
.flow4 li{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 0 32px 32px;min-width:0}
@media(min-width:960px){.flow4 li{padding:36px 0 0}}
.flow4 .dot{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px var(--paper)}
.flow4 .keys .dot{background:var(--carbon)}
.flow4 h3{font-size:var(--fs-h3);font-weight:400;line-height:1.2}
.flow4 p{font-size:var(--fs-body);line-height:1.55;max-width:30ch}

/* Studio teaser and studio page */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.person-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.person-card .ph{aspect-ratio:4/5}
.person-card h3{font-size:var(--fs-h3);font-weight:400;line-height:1.2;margin-top:4px}
.person-card .role{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:500}
.person-card .pc-line{font-size:var(--fs-body)}
.people{display:grid;gap:clamp(64px,8vw,120px)}
.person{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:960px){.person{grid-template-columns:5fr 6fr;gap:80px;align-items:start}.person.flip>:first-child{order:2}}
.person>*{min-width:0}
.person .ph{aspect-ratio:4/5}
.person .role{display:block;margin:14px 0 26px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:500}
.person dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline)}
.person dt{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding-top:3px;font-weight:500}
.person dd{color:var(--carbon);text-align:left}
.team .mate{margin-top:clamp(32px,4vw,48px);padding-top:20px;border-top:1px solid var(--hairline);max-width:42ch}
.team .mate h3{font-size:var(--fs-h3);font-weight:400}
.team .mate .role{display:block;margin-top:12px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:500}
.team .mate p{margin-top:14px}

/* Call to action band (division pages take their own colour) */
.cta{background:var(--cta);color:var(--cta-ink)}
.cta .inner{display:grid;grid-template-columns:1fr;gap:32px;padding-block:clamp(80px,10vw,140px)}
@media(min-width:960px){.cta .inner{grid-template-columns:1.4fr 1fr;align-items:end;gap:80px}}
.cta h2{color:var(--cta-ink)}
.cta p{color:var(--cta-soft);max-width:46ch}
.cta .alt{display:block;margin-top:22px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--cta-soft);font-weight:500}
.cta .alt a{color:var(--cta-ink);border-bottom:1px solid currentColor;padding-bottom:2px}
.cta.div{background:var(--c);--cta-ink:var(--ci);--cta-soft:var(--cs)}
.cta.div .btn{background:var(--ci);color:var(--c);border-color:var(--ci)}
.cta.div .btn:hover{background:transparent;color:var(--ci)}

/* Footer */
.site-foot{padding-block:clamp(40px,5vw,56px) calc(32px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.foot-grid .wm{font-size:30px}
.foot-grid .tag-line{margin-top:22px;max-width:34ch;text-align:left;hyphens:manual}
.foot-grid h4{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:12px}
.foot-grid li{line-height:2.1}
.foot-grid li a{display:inline-flex;align-items:center;gap:10px}
.foot-grid li i{width:10px;height:10px;background:var(--c);flex:0 0 10px}
.foot-grid a:hover{color:var(--carbon)}
.foot-base{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--hairline);font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:500}
body[data-div] .foot-base{border-top-color:rgba(23,26,25,.12);color:var(--graphite)}
.foot-base button{font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border-bottom:1px solid var(--hairline)}
.foot-base button:hover,.foot-base a:hover{color:var(--carbon)}
.site-foot .scalebar{margin-top:20px}

/* Page header (studio, contact) */
.page-head{padding-block:clamp(56px,8vw,112px) clamp(40px,5vw,72px)}
.page-head .lead{margin-top:28px}

/* ---------- Division pages ---------- */
.dv-hero{position:relative;overflow:hidden;background:var(--c);color:var(--ci);padding-block:clamp(56px,8vw,112px) clamp(140px,17vw,260px)}
.dv-hero .wrap{position:relative;z-index:1}
.dv-hero .eyebrow{color:var(--cs)}
.dv-hero h1{color:var(--ci);margin-top:24px;max-width:14ch}
.dv-hero .lead{color:var(--ci);margin-top:26px;max-width:46ch;opacity:.92}
.dv-big{position:absolute;right:max(16px,4vw);bottom:calc(clamp(96px,13vw,200px) + 28px + .12em);font-size:clamp(150px,25vw,400px);font-weight:300;line-height:.74;color:var(--ci);opacity:.13;pointer-events:none;user-select:none}
.dv-big::after{content:"";position:absolute;left:.02em;right:.04em;top:calc(100% + .07em);height:.045em;background:currentColor}
@media(max-width:759px){.dv-big{display:none}.dv-cover .cap span+span{display:none}}
.dv-cover{margin-top:calc(-1 * clamp(96px,13vw,200px));position:relative;z-index:2}
.dv-cover .ph{aspect-ratio:21/9}
@media(max-width:700px){.dv-cover .ph{aspect-ratio:4/3}}
.dv-cover .cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);font-weight:500}

.svc-list{display:grid;grid-template-columns:1fr;border-top:1px solid var(--carbon)}
@media(min-width:760px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}}
.svc{position:relative;display:grid;grid-template-columns:44px 1fr;align-content:start;gap:4px 16px;padding:26px 0 30px;min-width:0}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(23,26,25,.14);transform-origin:left}
.svc .num{font-size:var(--fs-label);font-weight:500;color:var(--graphite);padding-top:5px;font-variant-numeric:tabular-nums}
.svc h3{font-size:var(--fs-h3);font-weight:400;line-height:1.25}
.svc p{grid-column:2;max-width:48ch;margin-top:6px}

/* Design: the model on screen */
.screen{background:#1B1E22;padding:clamp(8px,1vw,14px);box-shadow:0 30px 60px -30px rgba(23,26,25,.45)}
.screen .ph{aspect-ratio:2560/697;background:#22262B}
.screen-cap{margin-top:14px;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);font-weight:500}
.feature{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px)}
.feature .copy{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:960px){.feature .copy{grid-template-columns:5fr 6fr;gap:80px;align-items:end}}
.feature .copy>*{min-width:0}

/* Construction: the itemised ledger */
.ledger{border-top:1px solid var(--carbon);counter-reset:lg}
.ledger li{display:grid;grid-template-columns:44px minmax(0,auto) 1fr auto;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid rgba(23,26,25,.14);color:var(--carbon)}
.ledger .num{font-size:var(--fs-label);font-weight:500;color:var(--graphite);font-variant-numeric:tabular-nums}
.ledger .t{font-size:var(--fs-body)}
.ledger .lead-dots{height:1px;align-self:center;background-image:linear-gradient(90deg,rgba(23,26,25,.35) 1px,transparent 1px);background-size:6px 1px;transform-origin:left}
.ledger .st{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--carbon)}
.ledger .st i{display:block;width:16px;height:4px;background:var(--c2)}
.ledger-note{margin-top:18px;color:var(--graphite);max-width:60ch}

/* Development: the lot diagram */
.lots{background:var(--card);border:1px solid rgba(23,26,25,.12);padding:clamp(16px,2.6vw,36px)}
.lots svg{display:block;width:100%;height:auto;overflow:visible}
.lots .ln{fill:none;stroke:var(--carbon);stroke-width:1.2}
.lots .street{fill:#D9DDD7}
.lots .street-t{font:500 11px var(--face);letter-spacing:.14em;fill:var(--graphite)}
.lots .ctx{stroke:#9A9A92}
.lots .tint{fill:var(--c3);opacity:.12}
.lots .fp{fill:var(--c3);transform-box:fill-box;transform-origin:center bottom;transform:scaleY(.55);transition:transform 1s var(--ease)}
.lots .cut{stroke:var(--c3);stroke-width:1.5;stroke-dasharray:5 5;fill:none}
.lots .merge{fill:none;stroke:var(--c3);stroke-width:3}
.lots .units{stroke:var(--light);stroke-width:1.5;fill:none}
.lots .st{opacity:0;transition:opacity .8s var(--ease)}
.lots .wall{transition:opacity .8s var(--ease)}
.lots[data-s="0"] .st0,.lots[data-s="1"] .st1,.lots[data-s="2"] .st2{opacity:1}
.lots[data-s="0"] .st0 .fp,.lots[data-s="1"] .st1 .fp,.lots[data-s="2"] .st2 .fp{transform:none}
.lots[data-s="2"] .wall{opacity:0}
.lots-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:2px}
.lots-key button{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;background:var(--card);border-top:3px solid transparent;transition:border-color .5s var(--ease),background .5s var(--ease);min-width:0}
.lots-key .label{color:var(--carbon)}
.lots-key p{font-size:var(--fs-body);line-height:1.5;color:var(--graphite);display:none}
@media(min-width:760px){.lots-key p{display:block}}
.lots[data-s="0"]+.lots-key button:nth-child(1),.lots[data-s="1"]+.lots-key button:nth-child(2),.lots[data-s="2"]+.lots-key button:nth-child(3){border-top-color:var(--c3)}

/* Millwork: twenty years */
.mw{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
@media(min-width:960px){.mw{grid-template-columns:5fr 6fr;gap:80px;align-items:start}}
.mw>*{min-width:0}
.mw-n{font-size:clamp(96px,14vw,200px);font-weight:300;line-height:.85;color:var(--carbon);letter-spacing:-.02em}
.mw-n small{display:block;font-size:var(--fs-h3);font-weight:400;letter-spacing:0;line-height:1.3;margin-top:18px;max-width:20ch}
.mw-points{display:grid;border-top:1px solid var(--carbon)}
.mw-points div{display:grid;grid-template-columns:1fr;gap:6px;padding:22px 0;border-bottom:1px solid rgba(23,26,25,.14)}
@media(min-width:700px){.mw-points div{grid-template-columns:220px 1fr;gap:28px}}
.mw-points h3{font-size:var(--fs-h3);font-weight:400;line-height:1.25}

/* ---------- Galleries: side-scrolling, drag or swipe, arrows, progress; images protected ---------- */
.gal{--gh:clamp(300px,62vh,640px)}
@media(max-width:759px){.gal{--gh:min(68vw,52vh)}}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.gal-head h2{font-size:var(--fs-h2);line-height:1.06}
.gal-ctrl{display:flex;align-items:center;gap:18px}
.gal-count{font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;color:var(--graphite);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.gal-ctrl button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--carbon);color:var(--carbon);font-size:18px;line-height:1;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s}
.gal-ctrl button:hover{background:var(--carbon);color:var(--paper)}
.gal-ctrl button:disabled{opacity:.3;pointer-events:none}
.gal-track{display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));scroll-padding-left:max(16px,env(safe-area-inset-left,0px))}
.gal-track::-webkit-scrollbar{display:none}
@media(min-width:760px){.gal-track{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:40px;scroll-padding-left:40px}}
@media(min-width:1200px){.gal-track{padding-left:max(64px,calc((100vw - var(--max)) / 2 + 64px));padding-right:64px;scroll-padding-left:max(64px,calc((100vw - var(--max)) / 2 + 64px))}}
@media(pointer:coarse){.gal-track{scroll-snap-type:x proximity}.gal-item{scroll-snap-align:start}}
.gal-track.drag{cursor:grabbing;scroll-snap-type:none}
.gal-track.drag .gal-item{pointer-events:none}
.gal-item{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;width:min(calc(var(--gh) * var(--ar)),86vw);color:var(--graphite);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gal-item .fr{position:relative;height:var(--gh);overflow:hidden;background:rgba(23,26,25,.08)}
.gal-item img{width:100%;height:100%;object-fit:cover;pointer-events:none;transform:translateX(var(--px,0%)) scale(1.1);will-change:transform}
.gal-item span{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;font-weight:500;line-height:1.35;min-height:1.35em}
.gal-item span i{font-style:normal;color:var(--carbon);white-space:nowrap}
.gal-item span i::before{content:"";display:inline-block;width:8px;height:8px;background:var(--c);margin-right:8px;vertical-align:1px}
.gal-item:hover .fr::after{opacity:1}
.gal-item .fr::after{content:"View";position:absolute;right:12px;bottom:12px;padding:8px 12px;background:var(--light);color:var(--carbon);font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .4s var(--ease)}
.gal-foot{margin-top:clamp(18px,2.4vw,28px)}
.gal-bar{position:relative;height:2px;background:rgba(23,26,25,.12)}
.gal-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--carbon);transform-origin:left;transform:scaleX(.05);transition:transform .2s linear}
.gal+.gal{margin-top:clamp(64px,8vw,112px)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:900;background:rgba(14,16,15,.96);display:grid;grid-template-rows:auto 1fr auto;color:var(--light);-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .4s var(--ease)}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb-top,.lb-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 14px) max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
.lb-bot{padding:14px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 18px) max(16px,env(safe-area-inset-left,0px))}
.lb-n,.lb-cap{font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(247,242,232,.8)}
.lb button{font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--light);padding:10px 0}
.lb-fig{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 max(16px,env(safe-area-inset-left,0px))}
.lb-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;pointer-events:none}
.lb-arrows{display:flex;gap:10px}
.lb-arrows button{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(247,242,232,.5);padding:0;font-size:18px}
.lb-arrows button:hover{background:var(--light);color:var(--carbon)}
.lb-open{overflow:hidden}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:56px}
@media(min-width:1080px){.contact-grid{grid-template-columns:1.55fr 1fr;gap:88px}}
.contact-grid>*{min-width:0}
.fields{display:grid;grid-template-columns:1fr;gap:26px 28px}
@media(min-width:700px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);font-weight:500}
.field label em{font-style:normal;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:var(--fs-body);color:var(--carbon);background:transparent;border:0;border-bottom:1px solid var(--graphite);border-radius:0;padding:10px 0 12px;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--carbon) 50%),linear-gradient(-45deg,transparent 50%,var(--carbon) 50%);background-position:calc(100% - 10px) 50%,calc(100% - 5px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--carbon);padding-bottom:11px}
.form-foot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:36px}
.form-foot small{font-size:var(--fs-body);color:var(--mute);max-width:36ch}
.form-error{margin-top:16px;color:var(--carbon)}
.hp{position:absolute;left:-9999px}
.sent{padding:40px 0;border-top:1px solid var(--carbon)}
.sent h2{margin-bottom:16px}
.aside-block+.aside-block{margin-top:44px}
.aside-block h3{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--carbon);font-weight:500;padding-bottom:12px;border-bottom:1px solid var(--carbon);margin-bottom:6px}
.next-steps li{display:grid;grid-template-columns:36px 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.next-steps li span{font-size:var(--fs-label);color:var(--mute);padding-top:3px;font-weight:500}
.next-steps b{color:var(--carbon);font-weight:600}
.direct div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.direct dt{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding-top:4px;font-weight:500}
.direct dd{color:var(--carbon);overflow-wrap:anywhere;text-align:left}
.direct dd a,.form-error a{border-bottom:1px solid var(--hairline)}
.direct dd a:hover{border-color:var(--carbon)}

/* Contact: optional file */
.field.file{gap:12px}
.flabel{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);font-weight:500}
.flabel em{font-style:normal;color:var(--mute)}
.file-pick{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;padding:14px 0 16px;border-bottom:1px solid var(--graphite)}
.file-pick input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.fp-btn{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--carbon);color:var(--carbon);font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.fp-btn:hover{background:var(--carbon);color:var(--paper)}
.file-pick input:focus-visible+.fp-btn{outline:2px solid var(--carbon);outline-offset:3px}
.fp-name{color:var(--mute);min-width:0;overflow-wrap:anywhere}
.fp-name.has{color:var(--carbon)}
.fp-clear{font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:var(--mute);border-bottom:1px solid var(--hairline);padding-bottom:2px}
.fp-clear:hover{color:var(--carbon)}
.fp-error{color:#8A2B1F}
.direct .note{display:block;color:var(--mute);margin-top:4px}

/* Studio: qualifications and practice */
.cv{margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline)}
.cv-k{display:block;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:500}
.cv-q{margin-bottom:22px}
.cv-q p{margin-top:6px;color:var(--carbon);text-align:left;hyphens:manual}
.cv-list{margin-top:8px;border-top:1px solid var(--hairline)}
.cv-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--hairline);text-align:left;hyphens:manual}
@media(min-width:700px){.cv-list li{grid-template-columns:minmax(0,1fr) 90px 130px}}
.cv-list .co{color:var(--carbon)}
.cv-list .rl{color:var(--graphite);grid-row:2}
@media(min-width:700px){.cv-list .rl{grid-row:auto}}
.cv-list .yr{color:var(--graphite);font-variant-numeric:tabular-nums;text-align:right;grid-row:1;grid-column:2}
@media(min-width:700px){.cv-list .yr{grid-column:3}}

/* ---------- Splash (first page of a visit only) ----------
   The logo itself, animated: a line as wide as ARTHAUS draws in at the top of the logo's second row, the name rises
   out of it, the line fades away, GROUP fades in under ART and a glint crosses the name.
   The last frame is exactly the header logo. */
#splash{display:none}
.splash-on body{overflow:hidden}
.splash-on #splash{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--white);transition:opacity .9s ease;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));cursor:default}
#splash::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#splash .sp-stage{position:relative;display:flex;align-items:center;justify-content:center;transition:opacity .75s ease,transform 1s var(--ease)}
#splash .sp-wm{font-size:clamp(40px,6.6vw,88px)}
#splash .sp-wm .wm-top{width:calc(var(--wm-w) * 1em);clip-path:inset(-.5em -.5em 0 -.5em)}
#splash .sp-wm .word{transform:translateY(112%)}
/* The glint: a copy of the name laid exactly over it, painted only inside the letters, with a brass band swept across */
#splash .sp-glint{position:absolute;left:0;top:0;pointer-events:none}
#splash .sp-wm .sp-glint .word{transform:none;color:transparent;background:linear-gradient(100deg,transparent 0%,transparent 42%,var(--glint) 50%,transparent 58%,transparent 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
#splash .sp-line{position:absolute;left:calc(var(--wm-x0) * 1em);top:calc(var(--wm-row) * 1em);width:calc((var(--wm-w) - var(--wm-x0)) * 1em);height:1px;background:var(--carbon);transform:scaleX(0);transform-origin:50% 50%}
#splash .sp-wm .wm-row text{opacity:0}
#splash .sp-skip{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 22px);font-weight:500;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding:6px 0;border-bottom:1px solid var(--hairline);opacity:0}
#splash.sp-ready .sp-line{animation:spGrow 1.2s cubic-bezier(.65,0,.35,1) .2s forwards,spOut .6s ease 2s forwards}
#splash.sp-ready .sp-wm .word{animation:spUp 1.9s cubic-bezier(.16,.84,.24,1) .8s forwards}
#splash.sp-ready .sp-wm .sp-glint .word{animation:spGlint 1.7s cubic-bezier(.45,0,.2,1) 2.8s forwards}
#splash.sp-ready .sp-wm .wm-row text{animation:spFade .9s ease 2.3s forwards}
#splash.sp-ready .sp-skip{animation:spFade 1s ease 1.2s forwards}
#splash.out .sp-stage{opacity:0!important;transform:translateY(-8px)}
#splash.out .sp-skip{opacity:0!important;animation:none}
#splash.gone{opacity:0}
@keyframes spGrow{to{transform:scaleX(1)}}
@keyframes spUp{to{transform:none}}
@keyframes spGlint{to{background-position:0% 0}}
@keyframes spFade{to{opacity:1}}
@keyframes spOut{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion: reduce){#splash *,#splash *::before,#splash *::after{animation-duration:.01s!important;animation-delay:0s!important}}

/* ---------- Scroll motion (only when .motion is on <html>) ---------- */
.motion .rv{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.motion .rv-in{display:block;opacity:0;transform:translateY(106%);transition:transform 1.15s var(--ease),opacity 1s var(--ease)}
.motion .rv.in .rv-in{opacity:1;transform:none}

.motion .strip::after{transform:scaleX(0);transition:transform 1.3s var(--ease)}
.motion .strip.in::after{transform:none}
.motion .strip .label{opacity:0;transition:opacity 1s var(--ease) .25s}
.motion .strip.in .label{opacity:1}

.motion .scalebar span{transform:scaleX(0);transition:transform 1s var(--ease)}
.motion .scalebar span:nth-child(2){transition-delay:.12s}
.motion .scalebar span:nth-child(3){transition-delay:.24s}
.motion .scalebar span:nth-child(4){transition-delay:.36s}
.motion .scalebar.in span{transform:none}

.motion main .ph .ph-in{clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path 1.4s var(--ease),transform 2s var(--ease)}
.motion main .ph.in .ph-in{clip-path:inset(0 0 0 0);transform:none}
.motion .hx-media .cbar{transform:scaleX(0);transition:transform 1.2s var(--ease) .5s}
.motion .hx-media .ph.in+.cbar{transform:none}

.motion [data-r],.motion [data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.motion [data-r].in,.motion [data-stagger]>.in{opacity:1;transform:none}

.motion .flow4::before{transform:scaleX(0);transition:transform 2.2s var(--ease)}
@media(max-width:959px){.motion .flow4::before{transform:scaleY(0)}}
.motion .flow4.in::before{transform:none}
.motion .flow4 li{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 300ms + 200ms)}
.motion .flow4.in li{opacity:1;transform:none}

.motion .gal-track .gal-item{opacity:0;transform:translateX(56px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.motion .gal-track.in .gal-item{opacity:1;transform:none}

/* Lists that reveal one item after another as they come into view ([data-seq]: services, the cost ledger) */
.motion [data-seq]>*{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.motion [data-seq]>.in{opacity:1;transform:none}
.motion [data-seq]>.svc::after{transform:scaleX(0);transition:transform 1.2s var(--ease);transition-delay:calc(var(--d,0ms) + 200ms)}
.motion [data-seq]>.svc.in::after{transform:none}
.motion .ledger li .lead-dots{transform:scaleX(0);transition:transform 1s var(--ease);transition-delay:calc(var(--d,0ms) + 250ms)}
.motion .ledger li.in .lead-dots{transform:none}
.motion .ledger li .st i{transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);transition-delay:calc(var(--d,0ms) + 700ms)}
.motion .ledger li.in .st i{transform:none}

.motion .hs-copy>.wrap>*{opacity:0;transform:translateY(22px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.motion .hs-copy>.wrap>:nth-child(2){transition-delay:.15s} .motion .hs-copy>.wrap>:nth-child(3){transition-delay:.3s} .motion .hs-copy>.wrap>:nth-child(4){transition-delay:.45s}
.motion.motion-live .hs-copy>.wrap>*{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hs-slide,.hs-slide img{transition:none!important;transform:none!important}
  .hs-idx a.on .bar i{animation:none;transform:none}
  .gal-item img{transform:scale(1.02)!important}
  .motion .rv-in,.motion [data-r],.motion [data-stagger]>*,.motion main .ph .ph-in,.motion .scalebar span,.motion .strip::after,.motion .flow4::before,.motion .flow4 li,.motion .gal-track .gal-item,.motion [data-seq]>*,.motion [data-seq]>.svc::after,.motion .ledger li .lead-dots,.motion .ledger li .st i,.motion .hs-copy>.wrap>*,.motion .hx-media .cbar{transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
}