/* ARTHAUS GROUP — site styles. Four divisions (revised Oct 30 2026).
   Palette, roughly 60 / 30 / 10: Warm Ivory grounds, Architectural Charcoal for type, buttons and dark panels,
   Natural Walnut for small details only. Divisions are told apart by charcoal or stone tiles and one thin
   identifier each (H limestone, A charcoal, U olive, S walnut), never by fills of colour.
   Type: Albert Sans throughout; headings light with the second half bold, as in the wordmark.
   Single light theme by choice: the brand is specified on paper. */
:root{
  color-scheme: light;
  --paper:#F3F0E8; --card:#F8F6F0; --white:#FFFFFF; --paper-glass:rgba(243,240,232,.92);
  --stone:#E4DFD5;
  --graphite:#3A3C39; --carbon:#292B29; --hairline:#DAD4C8; --mute:#69665E; --light:#F3F0E8;
  --walnut:#705640;
  /* Division identifiers: --c* on ivory or stone, --k* on charcoal (the same four, lifted to read on dark) */
  --c1:#B3A489; --c2:#343735; --c3:#526456; --c4:#795B46;
  --k1:#C9BDA9; --k2:#8E918C; --k3:#90A193; --k4:#A9876C;
  --cta:var(--carbon); --cta-ink:var(--light); --cta-soft:rgba(243,240,232,.76);
  --glint:#C9BDA9;
  --face:'Albert Sans','Helvetica Neue',Arial,sans-serif;
  --track:.02em;
  /* Type scale. All running text, intro paragraphs included, has one size and one line spacing.
     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, the home tagline */
  --fs-body:17px;                     /* all running text */
  --lh-body:1.7;
  --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 blocks) */
  --c:var(--carbon); --k:var(--k2); --tile:var(--carbon); --ti:var(--light); --ts:rgba(243,240,232,.72); --tb:var(--k1);
}
@media(min-width:760px){:root{--head:88px}}
/* Each division: its identifier, and its tile. H and S sit on charcoal, A and U on stone, as in the HAUS grid. */
body[data-div="1"],.d1{--c:var(--c1);--k:var(--k1);--tile:var(--carbon);--ti:var(--light);--ts:rgba(243,240,232,.72);--tb:var(--k1)}
body[data-div="2"],.d2{--c:var(--c2);--k:var(--k2);--tile:var(--stone);--ti:var(--carbon);--ts:#5B5951;--tb:var(--c2)}
body[data-div="3"],.d3{--c:var(--c3);--k:var(--k3);--tile:var(--stone);--ti:var(--carbon);--ts:#5B5951;--tb:var(--c3)}
body[data-div="4"],.d4{--c:var(--c4);--k:var(--k4);--tile:var(--carbon);--ti:var(--light);--ts:rgba(243,240,232,.72);--tb:var(--k4)}

*{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:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body[data-div]{background:var(--paper)}
::selection{background:#C9BDA9;color:#292B29}
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, never hyphenated: every line but the last of a paragraph runs flush to both edges by
   widening the spaces between words, and no word is ever split (Matin, Oct 30).
   Headings, labels, buttons, captions and one-line items stay ragged. */
p,li,dd,blockquote{text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
p{text-wrap:pretty}
/* site.js sets justified paragraphs a whole paragraph at a time (as book typesetting does) and writes each line out
   with its own spacing: .jl is one line, .ji its words. Until it runs, the browser's own justification shows. */
.jl{display:block;white-space:nowrap;text-align:left}
.ji{display:inline}
.foot-grid li,.menu li,.hx-list li,.flow4 li,.gal-item span,.lb-cap,.ledger li,.mw-n,.dv-cover .cap,.hs-copy .tagline{text-align:left}
/* Short captions in narrow columns (two or three words a line) stay ragged: justifying them would open holes
   wider than the words. The timeline's notes justify on phones, where they run the full width. */
.stat .l,.hs-idx p,.pc-line,.lots-key p,.cap,.screen-cap,.form-error,.fp-error{text-align:left}
@media(min-width:960px){.flow4 p{text-align:left}}
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(--walnut)}
.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}
/* Intro paragraphs are set exactly like running text: same size, same line spacing */
.lead{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--graphite);max-width:64ch}
.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 HAUS, from H's left edge to S'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{background:transparent;color:var(--carbon);border-color:var(--carbon)}
.btn.line:hover{background:var(--carbon);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 var(--walnut);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)}
.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:8px}
.menu-divs a{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:128px;padding:16px 16px 18px;background:var(--tile);color:var(--ti)}
.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-divs .n::after{content:"";display:block;width:40px;height:3px;margin-top:12px;background:var(--tb)}
.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: the opening statement on ivory, the photographs under it, then the four divisions ---------- */
.hs{position:relative}
.hs-copy{padding-block:clamp(40px,6.5vw,104px) clamp(28px,4vw,56px)}
.hs-copy .wrap{display:grid;grid-template-columns:minmax(0,1fr)}
.hs-copy h1{margin-top:0}
.hs-copy .tagline{margin-top:22px;font-size:var(--fs-h3);font-weight:300;line-height:1.4;color:var(--graphite);max-width:30ch}
.hs-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
@media(min-width:960px){
  .hs-copy .wrap{grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-rows:auto 1fr auto;column-gap:clamp(48px,6vw,96px)}
  .hs-copy h1{grid-column:1;grid-row:2/4;align-self:end}
  .hs-copy .tagline{grid-column:2;grid-row:2;align-self:end;margin-top:0}
  .hs-actions{grid-column:2;grid-row:3}
}
/* The banner carousel: slides are placed by site.js; the current one carries .on (and a slow settle from 107%) */
.hs-stage{position:relative;background:var(--stone);height:clamp(360px,66svh,880px);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none}
.hs-stage:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
@media(max-width:759px){.hs-stage{height:min(84vw,58svh)}}
@media(pointer:fine){.hs-stage{cursor:grab}}
.hs-stage.dragging{cursor:grabbing}
.hs-slide{position:absolute;inset:0;margin:0;visibility:hidden;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hs-slide.on{visibility:visible}
.hs-slide img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transform:scale(1.07);transition:transform 9s cubic-bezier(.25,.1,.25,1)}
.hs-slide.on img{transform:scale(1)}
/* Three dots, bottom centre: the middle one is the picture on screen; they slide with every change */
.hs-dots{position:absolute;left:50%;bottom:clamp(14px,2.2vw,22px);z-index:3;width:0;height:6px;pointer-events:none}
.hs-dots i{position:absolute;left:-3px;top:0;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.3);will-change:transform,opacity}
.hs-dots i:nth-child(1),.hs-dots i:nth-child(5){opacity:0}
.hs-dots i:nth-child(2){transform:translateX(-14px) scale(.82);opacity:.41}
.hs-dots i:nth-child(3){opacity:.92}
.hs-dots i:nth-child(4){transform:translateX(14px) scale(.82);opacity:.41}
.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:24px 16px 22px 0;min-width:0;color:var(--carbon)}
@media(min-width:900px){.hs-idx a{padding:28px 24px 26px 0}}
.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}

/* 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(--walnut);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(--walnut)}
.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: the same charcoal panel and ivory button on every page */
.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 .eyebrow{color:var(--k1);margin-bottom:20px}
.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}

/* 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:none}
.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(--tile);color:var(--ti);padding-block:clamp(56px,8vw,112px) clamp(140px,17vw,260px)}
.dv-hero .wrap{position:relative;z-index:1}
.dv-hero .eyebrow{color:var(--ts)}
.dv-hero .eyebrow::before{content:"";display:block;width:48px;height:3px;background:var(--tb);margin-bottom:22px}
.dv-hero h1{color:var(--ti);margin-top:24px;max-width:18ch}
.dv-hero .lead{color:var(--ti);margin-top:26px;max-width:52ch;opacity:.9}
.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(--ti);opacity:.12;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(--walnut);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:#E2DDD3}
.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)}

/* Viewer: three slides on a dark ground that follow the finger; controls float above and hide on a tap */
.lb{position:fixed;inset:0;z-index:900;color:var(--light);-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:contain;opacity:0;transition:opacity .35s var(--ease);--lb-a:1}
.lb::before{content:"";position:absolute;inset:0;background:#121312;opacity:var(--lb-a)}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb-view{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.lb.dragging .lb-view{cursor:grabbing}
.lb-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 60px) 0 calc(env(safe-area-inset-bottom,0px) + 76px);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:50% 50%}
@media(min-width:760px){.lb-slide{padding-left:72px;padding-right:72px}}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;pointer-events:none;-webkit-user-drag:none;opacity:0;transition:opacity .22s ease;transform-origin:50% 50%}
.lb-slide img.ok{opacity:1}
.lb-top,.lb-bot{position:absolute;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;pointer-events:none;opacity:var(--lb-a);transition:opacity .3s var(--ease)}
.lb-top{top:0;padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(18,19,18,.6),rgba(18,19,18,0))}
.lb-bot{bottom:0;padding:14px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(0deg,rgba(18,19,18,.6),rgba(18,19,18,0))}
.lb-top button,.lb-arrows{pointer-events:auto}
.lb.bare .lb-top,.lb.bare .lb-bot{opacity:0}
.lb.bare .lb-top button,.lb.bare .lb-arrows{pointer-events:none}
.lb-n,.lb-cap{font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(243,240,232,.82)}
.lb-cap{min-width:0}
.lb button{font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--light);padding:10px 0}
.lb-arrows{display:flex;gap:10px;flex:0 0 auto}
.lb-arrows button{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(243,240,232,.5);padding:0;font-size:18px;transition:background .3s var(--ease),color .3s var(--ease)}
.lb-arrows button:hover{background:var(--light);color:var(--carbon)}
@media(pointer:coarse){.lb-arrows{display:none}}
.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:none}
.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:none}
@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: ARTHAUS rises up out of an invisible line between the logo's two rows, GROUP fades in
   below it, then 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(--paper);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}
/* GROUP simply fades in, in place (Oct 30) */
#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-wm .word{animation:spUp 1.9s cubic-bezier(.16,.84,.24,1) .35s forwards}
#splash.sp-ready .sp-wm .wm-row text{animation:spFade 1.1s ease 1.25s forwards}
#splash.sp-ready .sp-wm .sp-glint .word{animation:spGlint 1.7s cubic-bezier(.45,0,.2,1) 2.2s 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 spUp{to{transform:none}}
@keyframes spGlint{to{background-position:0% 0}}
@keyframes spFade{to{opacity:1}}
@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 img{transition:none!important;transform:none!important}
  .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}
}

/* ---------- Rounded corners and cards (Oct 30) ----------
   No sharp boxes: photographs, panels and cards take --r, buttons, tags and fields take --r-s. Groups of content sit
   on quiet cards (a shade lighter than the page, with a hairline edge) so each area reads on its own. The division
   banners and the call to action are inset panels that line up with the page's content edges. */
:root{--r:9px;--r-s:6px;--edge:rgba(41,43,41,.11);--gut:max(16px,env(safe-area-inset-left,0px));--pad:clamp(22px,4vw,64px);
  --inset:calc(max(0px,(100% - var(--max)) / 2) + var(--gut))}
@media(min-width:760px){:root{--gut:max(40px,env(safe-area-inset-left,0px))}}
@media(min-width:1200px){:root{--gut:max(64px,env(safe-area-inset-left,0px))}}

/* small things */
.btn,.skip,.fp-btn,.hx-list li,.gal-ctrl button,.lb-arrows button,.lots-key button,.gal-item .fr::after{border-radius:var(--r-s)}
.hx-media .cbar,.ledger .st i{border-radius:4.5px}
.gal-item span i::before,.foot-grid li i{border-radius:3px}
.site-foot .scalebar{border-radius:6px;overflow:hidden}

/* photographs and frames (the translateZ keeps Safari clipping moving images to the rounded corners) */
.ph,.gal-item .fr,.screen,.lots,.menu-divs a{border-radius:var(--r)}
.ph,.gal-item .fr{isolation:isolate;transform:translateZ(0)}
.screen .ph{border-radius:var(--r-s)}
.lb-slide img{border-radius:var(--r-s)}

/* home banner: inset into the page with each sliding photograph a rounded card */
.hs{padding-bottom:clamp(40px,5vw,72px)}
.hs-stage{border-radius:var(--r);isolation:isolate;transform:translateZ(0)}
.hs-slide{border-radius:var(--r);overflow:hidden}
.hs-idx{gap:10px;margin-top:10px;background:none}
.hs-idx a{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:18px 18px 20px;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
@media(min-width:900px){.hs-idx a{padding:22px 22px 24px}}
.hs-idx a:hover{border-color:rgba(41,43,41,.3);background:#FBFAF6}

/* cards */
.benefits{border-top:0;gap:12px}
.benefits>div{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:24px 24px 28px}
.stats{border-top:0;gap:12px}
.benefits+.stats{margin-top:12px}
.stat{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:22px 20px 24px}
.svc-list{border-top:0;gap:12px}
.svc{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:22px 22px 24px 18px}
.svc::after{display:none}
.strip:has(+ .svc-list){margin-bottom:clamp(20px,2.5vw,32px)}
.mw-points{border-top:0;gap:12px}
.mw-points div{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:20px 22px}
.ledger{border-top:0;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:4px clamp(14px,2vw,24px)}
.ledger li:last-child{border-bottom:0}
.cv{border-top:0;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:18px 20px 4px}
.cv-list li:last-child{border-bottom:0}
.team .mate{border-top:0;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:20px 22px 22px}
.contact-grid form,.contact-grid .sent{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:clamp(20px,3vw,36px)}
.aside-block{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:clamp(18px,2.4vw,28px)}
.direct div:last-child{border-bottom:0}

/* boxed form fields */
.field input,.field select,.field textarea{border:1px solid rgba(41,43,41,.24);border-radius:var(--r-s);padding:12px 14px;background:#FCFBF8}
.field input:focus,.field select:focus,.field textarea:focus{border:1px solid var(--carbon);box-shadow:0 0 0 1px var(--carbon);padding:12px 14px}
.field select{padding-right:36px;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%}
.file-pick{border:1px dashed rgba(41,43,41,.3);border-radius:var(--r-s);padding:12px 14px;background:#FCFBF8}

/* division banner: an inset panel; the cover photograph lines up with its text and breaks out of its bottom edge */
.dv-hero{margin:clamp(8px,1.2vw,16px) var(--inset) 0;border-radius:var(--r)}
.dv-hero>.wrap{max-width:none;padding-left:var(--pad);padding-right:var(--pad)}
.wrap.dv-cover{padding-left:calc(var(--gut) + var(--pad));padding-right:calc(var(--gut) + var(--pad))}

/* call to action: an inset charcoal panel */
.cta{margin:0 var(--inset);border-radius:var(--r)}
.cta>.wrap.inner{max-width:none;padding:clamp(48px,7vw,104px) var(--pad)}
.hx-word span::after,.dv-big::after{border-radius:.0375em}
/* On phones the service cards give their text the full width: the number sits above the title */
@media(max-width:759px){
  .svc{grid-template-columns:1fr;gap:6px;padding:18px 18px 20px}
  .svc .num{padding-top:0}
  .svc p{grid-column:1;margin-top:2px}
  .benefits>div,.mw-points div,.team .mate{padding-left:18px;padding-right:18px}
  .stat{padding:18px 16px 20px}
}

/* ---------- Nov 1: no HAUS letter pairings; the four divisions as cards; GROUP in dark grey ---------- */
/* GROUP in the logo (header, menu and intro) is a dark grey, a step lighter than ARTHAUS */
.wm-row text{fill:var(--wm-group,#62645F)}
/* phone menu: division tiles without letters, the name sitting at the foot of the tile */
.menu-divs a{justify-content:flex-end;min-height:104px}
/* home: the four divisions, one card each (photo, what it is, services, link) */
.dv-cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:clamp(36px,4.5vw,64px)}
@media(min-width:800px){.dv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dvc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;color:var(--carbon);isolation:isolate;transition:border-color .3s var(--ease)}
.dvc:hover{border-color:rgba(41,43,41,.3)}
.dvc .ph{border-radius:0}
.dvc .ph img{transition:transform 1.2s var(--ease)}
.dvc:hover .ph img{transform:scale(1.03)}
.dvc-b{display:flex;flex-direction:column;gap:14px;padding:22px 24px 24px;flex:1}
.dvc h3{font-size:var(--fs-h3);font-weight:400;line-height:1.2}
.dvc h3::before{content:"";display:block;width:32px;height:3px;border-radius:2px;background:var(--c);margin-bottom:16px}
.dvc p{max-width:52ch}
.dvc .go{margin-top:auto;padding-top:6px;font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--carbon)}
.dvc:hover .go span{transform:translateX(6px)}
@media(max-width:759px){.dvc-b{padding:18px 18px 20px}}
/* Studio: smaller portraits beside the shorter partner write-ups (Nov 1) */
.partners{gap:clamp(48px,6vw,88px)}
.partners .person .ph{max-width:300px}
@media(min-width:960px){
  .partners .person{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:64px;align-items:center}
  .partners .person.flip{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .partners .person .prose p{max-width:58ch}
}
.partners .person .role{margin:12px 0 20px}