/* Haus of Techniques — drafting-table effects (pairs with effects.js) */
#hotfx-over{position:absolute;left:0;top:0;width:100%;height:0;z-index:40;pointer-events:none;overflow:hidden}
#hotfx-tools{position:absolute;left:0;top:0;width:100%;height:0;z-index:49;pointer-events:none;overflow:hidden}
#hotfx-tools svg{pointer-events:none}

/* highlights: an organic band (set by effects.js) that wipes in under the words, one per line */
html.has-hotfx mark.hl.hfx-hl{background-image:var(--hfx-hl)!important;background-repeat:no-repeat!important;background-position:0 0!important;background-size:0% 100%!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.55,.05,.35,1)!important}
html.has-hotfx mark.hl.hfx-hl.hfx-drawn{background-size:100% 100%!important}
html.blueprint mark.hl.hfx-hl{color:#121316;background-image:var(--hfx-hl-bp)!important}
@media (prefers-reduced-motion:reduce){html.has-hotfx mark.hl.hfx-hl{transition:none!important}}

/* pencil */
.hfx-tool{pointer-events:auto;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hfx-tool:focus-visible .hfx-hit{stroke:#d42a1f;stroke-width:.8}
.hfx-hit{pointer-events:all}
.hfx-print{font:400 6.5px "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:1.6px;fill:#c9cdd1}
.hfx-lead{fill:#2b2b2b}

/* spent leads come to rest on the bottom edge of the browser window */
#hotfx-floor{position:fixed;inset:0;z-index:48;pointer-events:none;overflow:hidden}
.hfx-fallen{position:absolute;left:0;top:0;background:#2b2b2b;border-radius:1px;box-shadow:0 1px 1.5px rgba(0,0,0,.25);transform-origin:0 50%}

/* =========================================================
   BUTTONS — plain at rest; on hover registration marks close in on the corners
   (18px marks, 10px off the button) and the arrow turns ↗; click snaps the marks in red
========================================================= */
.hot-btn{position:relative}
.hot-btn::before{content:"";position:absolute;inset:-20px;pointer-events:none;opacity:0;--m:var(--ink);--L:18px;
  background:linear-gradient(var(--m),var(--m)) 0 0/var(--L) 1px,linear-gradient(var(--m),var(--m)) 0 0/1px var(--L),
    linear-gradient(var(--m),var(--m)) 100% 0/var(--L) 1px,linear-gradient(var(--m),var(--m)) 100% 0/1px var(--L),
    linear-gradient(var(--m),var(--m)) 0 100%/var(--L) 1px,linear-gradient(var(--m),var(--m)) 0 100%/1px var(--L),
    linear-gradient(var(--m),var(--m)) 100% 100%/var(--L) 1px,linear-gradient(var(--m),var(--m)) 100% 100%/1px var(--L);
  background-repeat:no-repeat;transition:inset 300ms cubic-bezier(.2,.8,.2,1),opacity 220ms}
.hot-cta-body .hot-btn::before,.hot-hero-foot .hot-btn::before{--m:#fff}
/* the old red fill and the dimension string are retired */
.hot-dim{display:none!important}
@media (hover:hover) and (pointer:fine){
  .hot-btn:hover,.hot-btn.has-dim:hover,html.blueprint .hot-btn:hover{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--ink)!important}
  .hot-cta-body .hot-btn:hover,.hot-cta-body .hot-btn.has-dim:hover,html.blueprint .hot-cta-body .hot-btn:hover{background:#fff!important;color:#121316!important;border-color:#fff!important}
  .hot-hero-foot .hot-btn:hover{background:transparent!important;color:#fff!important;border-color:#fff!important}
  .hot-btn:hover i,.hot-btn.has-dim:hover i{color:inherit!important;transform:rotate(0)!important}
  .hot-btn:hover::before{inset:-10px;opacity:1}
}
.hot-btn:focus-visible::before{inset:-10px;opacity:1}
.hot-btn:active::before{inset:-8px;opacity:1;--m:var(--red);transition-duration:80ms}
.hot-cta-body .hot-btn:active::before{--m:#121316}
html.blueprint .hot-btn:active::before{--m:#fff}
@media (prefers-reduced-motion:reduce){.hot-btn::before{transition:opacity 150ms}}

/* room for the registration marks between neighbouring buttons */
.hot-btns{gap:28px!important}
.hot-btns .hot-btn{margin:0}

/* =========================================================
   CTA BANNER — APPROVAL STAMP: no fill, a double-ruled Redline border like a drawing
   approval stamp, red heading with a small "issued" line above it, buttons stacked on the right
========================================================= */
html .hot-cta-body{background:transparent!important;border:6px double var(--stamp)!important;align-items:center!important;gap:40px!important}
html:not(.blueprint) .hot-cta-body h2{color:var(--dr-red)!important}
.hot-cta-body h2::before{content:"ISSUED FOR ENQUIRY \00B7  REV 04";display:block;margin:0 0 18px;font:700 10px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.2em;color:inherit}
.hot-cta-body .hot-btns{flex-direction:column!important;align-items:stretch!important;gap:32px!important;flex:0 0 auto}
html.blueprint .hot-cta-body{border-color:#fff!important}
html.blueprint .hot-cta-body h2{color:#fff!important}
@media (max-width:767px){.hot-cta-body .hot-btns{width:100%}}
.hot-cta-body h2{flex:1 1 520px;min-width:0}
/* the retired dimension string no longer needs room under a hovered button */
.hot-btn.has-dim:hover{margin-bottom:0!important}
/* the small "issued" line hangs above the heading, so the bold text itself sits on the box's centre line */
.hot-cta-body h2{position:relative}
.hot-cta-body h2::before{position:absolute;left:0;bottom:100%;margin:0 0 18px!important;white-space:nowrap}
@media (max-width:767px){.hot-cta-body h2::before{position:static;white-space:normal}}

/* =========================================================
   CTA STAMP BUTTONS ("stamp cells"): each button is a small ruled stamp, item no. | label | arrow.
   Line hierarchy: banner = double rule of 2px lines; button = double rule of 1px lines;
   cell dividers = single 1px. On hover the number and arrow cells ink in.
========================================================= */
html:not(.blueprint) .hot-cta-body{--stamp:var(--dr-red);--stamp-ink:var(--dr-film)}
html.blueprint .hot-cta-body{--stamp:#fff;--stamp-ink:#1c4f9c}
html .hot-cta-body .hot-btns{counter-reset:ctab}
html .hot-cta-body .hot-btn,
html .hot-cta-body .hot-btn:hover,
html .hot-cta-body .hot-btn.has-dim,
html .hot-cta-body .hot-btn.has-dim:hover,
html .hot-cta-body .hot-btn.has-dim.dim-on{counter-increment:ctab;display:flex!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:0!important;min-width:270px;margin:0!important;
  background:transparent!important;color:var(--stamp)!important;border:3px double var(--stamp)!important;border-radius:0!important}
html .hot-cta-body .hot-btn::before{content:counter(ctab,decimal-leading-zero)!important;position:static!important;inset:auto!important;opacity:1!important;background:none!important;
  display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--stamp);font:400 10px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;transition:background-color 180ms,color 180ms!important}
html .hot-cta-body .hot-btn > span:not(.hot-dim){flex:1 1 auto;display:flex;align-items:center;padding:14px 14px}
html .hot-cta-body .hot-btn{position:relative!important;padding-right:44px!important}
/* arrow cell: a ruled box on the right; the drawn arrow sits centred in it (→ at rest, ↗ on hover) */
html .hot-cta-body .hot-btn::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;border-left:1px solid var(--stamp);transition:background-color 180ms}
html .hot-cta-body .hot-btn i{position:absolute!important;right:17px;top:50%;margin-top:-5px;z-index:1;color:var(--stamp)!important}
html .hot-cta-body .hot-btn .hot-dim{display:none!important}
@media (hover:hover) and (pointer:fine){
  html .hot-cta-body .hot-btn:hover::before,
  html .hot-cta-body .hot-btn:hover::after{background:var(--stamp)!important;color:var(--stamp-ink)!important}
  html .hot-cta-body .hot-btn:hover i{color:var(--stamp-ink)!important}
}
html .hot-cta-body .hot-btn:focus-visible::before,html .hot-cta-body .hot-btn:focus-visible::after,
html .hot-cta-body .hot-btn:active::before,html .hot-cta-body .hot-btn:active::after{background:var(--stamp)!important;color:var(--stamp-ink)!important}
html .hot-cta-body .hot-btn:focus-visible i,html .hot-cta-body .hot-btn:active i{color:var(--stamp-ink)!important}
html .hot-cta-body .hot-btn:focus-visible{outline:1px solid var(--stamp);outline-offset:4px}
@media (max-width:767px){html .hot-cta-body .hot-btn{min-width:0}}

/* =========================================================
   SECTION LINK BESIDE THE TITLE STRIP (home: Selected Work, What We Do)
   The strip ends short and a separate boxed link sits 24px beside it: label cell | arrow cell.
   On hover the arrow cell fills and the arrow turns from → to ↗.
========================================================= */
.hot-sec-row{display:flex;align-items:stretch;gap:24px;margin-bottom:44px}
.hot-sec-row .hot-sec{flex:1 1 auto;min-width:0;margin-bottom:0!important}
.hot-sec-go{display:flex;align-items:stretch;flex:0 0 auto;border:var(--rule);color:var(--ink);text-decoration:none;background:var(--paper)}
.hsg-l{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 24px;font:600 12px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;white-space:nowrap}
.hsg-k{font-size:9px;font-weight:400;letter-spacing:.14em;color:var(--hot-muted)}
.hsg-a{position:relative;width:56px;border-left:var(--rule);transition:background-color 180ms}
.hsg-a::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:currentColor;transform:rotate(45deg);transition:transform 260ms cubic-bezier(.3,.7,.2,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover) and (pointer:fine){
  .hot-sec-go:hover .hsg-a{background:var(--ink);color:var(--paper)}
  .hot-sec-go:hover .hsg-a::after{transform:rotate(0)}
  .hot-sec-go:hover .hsg-k{color:var(--red)}
}
.hot-sec-go:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.hot-sec-go:focus-visible .hsg-a,.hot-sec-go:active .hsg-a{background:var(--ink);color:var(--paper)}
@media (max-width:767px){
  .hot-sec-row{flex-wrap:wrap;gap:12px;margin-bottom:28px}
  .hot-sec-row .hot-sec{flex:1 1 100%}
  .hot-sec-go{margin-left:auto;min-height:48px}
  .hsg-a{width:48px}
}
@media (min-width:768px) and (max-width:1100px){.hsg-l{padding:0 16px}}
/* same spacing below the row as below a plain title strip */
@media (min-width:768px){.hot-sec-row{margin-bottom:clamp(48px,4.5vw,72px)}}
@media (max-width:767px){.hot-sec-row{margin-bottom:36px}}

/* project pages: the title strip keeps its own frame margins, the row takes them instead */
.hot-sec-row.proj-go{margin:14px var(--gap) 32px}
.status-bar + .hot-sec-row.proj-go{margin-top:20px}
.hot-sec-row.proj-go .proj-title{margin:0!important;flex:1 1 auto;min-width:0}
.hot-sec-row.proj-enq{margin:clamp(40px,5vw,72px) var(--gap) 32px}
@media (max-width:767px){.hot-sec-row.proj-go,.hot-sec-row.proj-enq{margin-bottom:28px}}

/* =========================================================
   HOME HERO: the colour reveal and its red outline follow each room's real interior,
   traced from the black section, instead of the grid rectangle (see SHAPES in hero-bays.js)
========================================================= */
.hb-ann .hb-callout rect{display:none!important}
.hb-ann .hb-callout path.hb-shape{display:inline!important;fill:none;stroke:#d42a1f;stroke-width:2px;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
/* drawing, colour render and annotations share one crop on every screen shape, so the masks register exactly */
.hot-hero.hb{--hero-image-position:50% calc(50% + 30px)}

/* =========================================================
   HOME HERO: room gallery — a drawing sheet of the room's renderings
========================================================= */
html.hbg-lock,html.hbg-lock body{overflow:hidden}
.hbg{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,48px);background:rgba(18,19,22,.78);opacity:0;transition:opacity 200ms ease}
.hbg.on{opacity:1}
.hbg[hidden]{display:none}
.hbg-sheet{width:min(1280px,100%);max-height:100%;display:flex;flex-direction:column;background:#f6f6f3;border:1px solid #121316;color:#121316;transform:translateY(10px);transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
.hbg.on .hbg-sheet{transform:none}
.hbg-head{display:flex;align-items:stretch;border-bottom:1px solid #121316;flex:0 0 auto}
.hbg-cell{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px 16px;border-right:1px solid #121316;min-width:0}
.hbg-k{font-size:9px;letter-spacing:.14em;color:#66696e;font-style:normal}
.hbg-k i{font-style:normal}
.hbg-cell b{font-weight:600;font-size:13px;letter-spacing:.12em;white-space:nowrap}
.hbg-no b{font-family:var(--hot-display);font-stretch:condensed;font-weight:700;font-size:24px;letter-spacing:0;line-height:1;color:#d42a1f}
.hbg-ti{flex:1 1 auto}
.hbg-ti b{font-family:var(--hot-display);font-stretch:condensed;font-weight:700;font-size:24px;letter-spacing:.02em;line-height:1;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.hbg-ct b{font-variant-numeric:tabular-nums}
.hbg-proj{color:#121316!important;text-decoration:none!important;transition:background-color 180ms,color 180ms}
.hbg-proj b i{font-style:normal;color:#d42a1f}
.hbg-proj:hover{background:#121316;color:#f6f6f3!important}
.hbg-proj:hover .hbg-k{color:#d42a1f}
.hbg-x{appearance:none;border:0;background:none;width:64px;flex:0 0 64px;cursor:pointer;position:relative;color:#121316}
.hbg-x span::before,.hbg-x span::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.hbg-x span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.hbg-x:hover{background:#d42a1f;color:#fff}
.hbg-stage{position:relative;flex:1 1 auto;min-height:0;aspect-ratio:16/9;max-height:calc(100vh - 230px);background:#ebebe7;overflow:hidden}
.hbg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 260ms ease}
.hbg-img.in{opacity:1}
.hbg-nav{appearance:none;position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border:1px solid #121316;background:#f6f6f3;cursor:pointer;color:#121316;transition:background-color 180ms,color 180ms}
.hbg-prev{left:16px}.hbg-next{right:16px}
.hbg-nav span{position:absolute;inset:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M6 12h12M13 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M6 12h12M13 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat}
.hbg-prev span{transform:scaleX(-1)}
.hbg-nav:hover{background:#121316;color:#f6f6f3}
.hbg-thumbs{display:flex;gap:0;border-top:1px solid #121316;overflow-x:auto;flex:0 0 auto}
.hbg-thumbs button{appearance:none;flex:0 0 auto;width:132px;aspect-ratio:16/9;padding:4px;border:0;border-right:1px solid #121316;background:#f6f6f3;cursor:pointer;position:relative}
.hbg-thumbs img{display:block;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity 160ms}
.hbg-thumbs button:hover img,.hbg-thumbs button.on img{opacity:1}
.hbg-thumbs button.on{box-shadow:inset 0 -3px 0 #d42a1f}
.hbg-sheet.one .hbg-nav,.hbg-sheet.one .hbg-thumbs{display:none}
.hbg :focus-visible{outline:2px solid #1c4f9c;outline-offset:-2px}
@media (max-width:767px){
  .hbg{padding:0}
  .hbg-sheet{height:100%;border:0}
  .hbg-ct,.hbg-proj .hbg-k{display:none}
  .hbg-cell{padding:8px 12px}
  .hbg-no b,.hbg-ti b{font-size:19px}
  .hbg-proj b{font-size:11px}
  .hbg-x{width:52px;flex-basis:52px}
  .hbg-stage{aspect-ratio:auto;max-height:none}
  .hbg-nav{width:44px;height:44px;margin-top:-22px}
  .hbg-prev{left:8px}.hbg-next{right:8px}
  .hbg-thumbs button{width:96px}
}
@media (prefers-reduced-motion:reduce){.hbg,.hbg-sheet,.hbg-img{transition:none}}
/* desktop: size the sheet from the screen height so the 16:9 rendering fills it edge to edge (no side bars) */
@media (min-width:768px){
  .hbg-sheet{width:min(1280px,100%,calc((100dvh - 2 * clamp(12px,3vw,48px) - 172px) * 16 / 9))}
  .hbg-stage{aspect-ratio:16/9;max-height:none;flex:0 0 auto}
}
/* the looping videos sit over the still image, so they carry the image's own 1px frame too */
.hot-vid{border:var(--rule)}

/* =========================================================
   SITE AUDIT REFINEMENTS (Oct 2026)
========================================================= */

/* 1 · phones: sheet numbers (S-01, P-00…) stay on one line; the title cell takes the rest */
@media (max-width:767px){
  .hot-sec .ts-no,.proj-title .ts-no{flex:0 0 auto!important;min-width:72px}
  .hot-sec .ts-no .ts-v,.proj-title .ts-no .ts-v{white-space:nowrap}
  .hot-sec .hot-sec-kind{flex:1 1 0!important;min-width:0}
  /* footer: location wraps instead of being cut off */
  #footer-sections .tb-loc .tb-val,#footer-sections .tb-loc{white-space:normal!important;overflow:visible!important;min-width:0}
  #footer-sections .tb-loc .tb-val{overflow-wrap:anywhere}
}
/* 1 · tiles: titles line up from the top, under the number */
.hot-wwd-body,.hot-hww-card .hot-wwd-body{margin-top:0!important}

/* 2 · one button style site-wide: label cell + ruled arrow cell (the CTA stamp keeps its own) */
.hot-btn{position:relative;display:inline-flex!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;
  padding:0 56px 0 0!important;min-width:230px;border:var(--rule)!important;background:var(--paper)!important;color:var(--ink)!important;text-decoration:none}
.hot-btn > span:not(.hot-dim){flex:1 1 auto;display:flex;align-items:center;padding:16px 22px;font-weight:600;letter-spacing:.14em}
.hot-btn::before{display:none!important}
.hot-btn::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;border-left:var(--rule);transition:background-color 180ms}
.hot-btn i{position:absolute!important;right:22px;top:50%;margin-top:-5px;z-index:1}
.hot-btn .hot-dim{display:none!important}
@media (hover:hover) and (pointer:fine){
  .hot-btn:hover::after{background:var(--ink)}
  .hot-btn:hover i{color:var(--paper)!important}
}
.hot-btn:focus-visible::after,.hot-btn:active::after{background:var(--ink)}
.hot-btn:focus-visible i,.hot-btn:active i{color:var(--paper)!important}
.hot-btns{gap:16px!important}
/* the form's Send button inks in red: it is the one commit action */
@media (hover:hover) and (pointer:fine){button.hot-btn[type=submit]:hover::after{background:var(--red)}}
button.hot-btn[type=submit]{cursor:pointer;font:inherit}
/* CTA stamp buttons keep their stamp cells */
html .hot-cta-body .hot-btn::before{display:flex!important}
html .hot-cta-body .hot-btn{min-width:270px}
@media (max-width:767px){.hot-btn{min-width:0;width:100%}.hot-btns{width:100%}}

/* 3 · red is the one accent: project info labels go label grey */
.proj-meta dt{color:var(--dr-label,#66696e)!important;opacity:1!important}
html.blueprint .proj-meta dt{color:rgba(255,255,255,.6)!important}
/* 3 · About: the map card text keeps no highlight (two per page max) */
html.has-hotfx .smap-info mark.hl,html .smap-info mark.hl{background:none!important;background-image:none!important;color:inherit!important;padding:0}
/* 3 · one treatment for step / tile numbers: small red figures, as in the section strips */
.hot-num,.hot-num.hot-num--big,html:not(.blueprint) .hot-num{font-family:inherit!important;font-weight:600!important;font-size:11px!important;line-height:1!important;letter-spacing:.08em!important;color:var(--red)!important}

/* 4 · long text reads in sentence case; caps stay for headings and labels */
.proj-desc p,.hot-quote p,.hot-split-text.hot-quote p{text-transform:none!important}
/* 4 · Home 01: statement reads like the hero — label + quote on the left, supporting text on the right */
.hot-statement{grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;align-items:end}
.hot-statement .hot-kicker{grid-column:1!important;grid-row:1!important}
.hot-statement h2{grid-column:1!important;grid-row:2!important;margin:0!important;max-width:22ch}
.hot-statement p:last-child{grid-column:2!important;grid-row:2!important;align-self:end}
@media (max-width:767px){.hot-statement{grid-template-columns:1fr!important}.hot-statement p:last-child{grid-column:1!important;grid-row:3!important}}

/* 5 · section link beside a strip with notes: match the strip's top row, not its full height */
@media (min-width:768px){.hot-sec-row.has-note{align-items:flex-start}.hot-sec-row.has-note .hot-sec-go{height:var(--hsg-h,auto)}}
/* 5 · project gallery heads use the standard strip: grey label row over each cell */
.g-head span{flex-direction:column;align-items:stretch!important;justify-content:flex-start;gap:8px;padding:0 16px 12px!important}
.g-head span::before{display:block;margin:0 -16px;padding:6px 16px;background:var(--head-bg);border-bottom:var(--rule);font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;color:rgba(0,0,0,.55)}
.g-head .g-no::before{content:"NO."}.g-head .g-lab::before{content:"SET"}.g-head .g-count::before{content:"SHEETS"}
.g-head .g-no{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(18px,1.5vw,22px)}
html.blueprint .g-head span::before{color:rgba(255,255,255,.6)}
/* 1 · phones: the footer title block fits the screen (two equal columns; nothing runs off the right edge) */
@media (max-width:767px){
  #footer-sections .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #footer-sections .footer-inner > *{min-width:0}
  #footer-sections .tb-mode .bp-switch{gap:8px;flex-wrap:wrap}
  #footer-sections .tb-contact .hot-icon-links a{width:40px!important;height:40px!important}
}
/* arrow turns paper-coloured inside the inked arrow cell (beats older .has-dim hover rules) */
@media (hover:hover) and (pointer:fine){html body .hot-btn.hot-btn:hover i{color:var(--paper)!important}}
html body .hot-btn.hot-btn:focus-visible i,html body .hot-btn.hot-btn:active i{color:var(--paper)!important}
html body .hot-cta-body .hot-btn.hot-btn:not(:hover) i{color:var(--stamp)!important}

/* =========================================================
   ABOUT on tablets (768–900px, iPad portrait) — Oct 2026
   The three blocks stayed side by side down to 900px, then dropped to one
   narrow column with a wide empty band on the right. They now keep a
   two- or three-column layout on tablets.
========================================================= */
@media (min-width:768px) and (max-width:900px){
  /* A-01: statement beside the trailer photo */
  .hot-intro .hot-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
  .hot-intro .hot-quote{padding:0}
  .hot-intro .hot-split-text p{font-size:16px;max-width:none}
  /* A-02: three cards in a row */
  .hot-hww{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hot-hww .hot-hww-card{min-height:250px;padding:22px}
  .hot-hww .hot-wwd-top{margin-bottom:28px}
  .hot-hww .hot-wwd-body h3{font-size:18px}
  .hot-hww .hot-wwd-body p{font-size:13px}
  /* A-03: photo on the left, text, key and buttons on the right */
  .hot-split--founder{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
  .hot-split--founder .hot-split-text p{max-width:none}
  .hot-founder-key{max-width:none}
  .hot-split--founder .hot-btns{gap:12px!important}
  .hot-split--founder .hot-btn{min-width:0;flex:1 1 200px}
}
/* founder biography in normal case, like the other body text */
.hot-split--founder .hot-split-text p{text-transform:none!important;letter-spacing:0!important}

/* =========================================================
   EASIER READING (Oct 2026) — shared by Haus of JJ and Haus of Techniques
   Less "encyclopedia": picture first, a short intro, details on request,
   and no text smaller than 10px. Pairs with the "easier reading" script.
========================================================= */

/* 1. Type sizes: reading text never below 16px, labels never below 10px */
.proj-desc p,
.about .about-text p:not(.about-lead),
.hiw .hot-wwd-body p,
.hot-hww .hot-wwd-body p,
.hot-wwd-body p,
.hot-statement p:not(.hot-kicker),
.hot-hw-text,.hot-wwd-list li,.hot-hw-list li,.hot-av p,
.st-learn{
  font-size:clamp(16px,1.12vw,17px)!important;line-height:1.65!important;letter-spacing:0!important}
.hot-sec .hot-sec-note .ts-v{font-size:15px!important;line-height:1.55!important}
.ts-k,.tb-label,.pf-k,.sx-k,.g-filter-k,.ak-h,.hsg-k,.k9,.g-count,.sb-stages,.sb-head,
.kp figcaption,.smap-cap,.cv th,.about-key dt,.hf-help,.hot-kicker,.hot-label{font-size:10px!important}
.proj-meta dt,.proj-meta dd,.cv td,#footer-sections .tb-val,.about-key dd,.rtag-name{font-size:12px!important}
.cv-exp td:last-child{font-size:11.5px!important}
.rtag-sub{font-size:10px!important}
figcaption,.fig,.g-lead figcaption,.hot-fig figcaption{font-size:10.5px!important}
.proj-meta dt,.proj-meta dd{line-height:1.5}

/* 2. Project pages: the lead picture opens the page, under the title strip */
#page>.g-lead{margin:0 var(--gap) clamp(32px,3.5vw,52px)!important}
#page>.g-lead .g-item{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:none;cursor:zoom-in}
#page>.g-lead .g-item img{width:100%;height:100%!important;object-fit:cover!important}
#page>.g-lead figcaption{margin-top:10px}

/* 3. The first paragraph reads as an introduction */
.proj-desc p:first-child{
  font-size:clamp(19px,1.55vw,23px)!important;line-height:1.45!important;font-weight:500;
  color:var(--ink)!important;max-width:34em;margin-bottom:1.1em!important}

/* 4. "Read more": the rest of the text waits until it's asked for */
.rd-x[hidden]{display:none!important}
.rd-more{display:inline-flex;align-items:stretch;margin:8px 0 0;padding:0;border:var(--rule);background:var(--paper);color:var(--ink);
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;column-span:all}
.rd-more>span{display:flex;align-items:center;padding:12px 18px}
.rd-more>i{position:relative;width:44px;border-left:var(--rule);transition:background-color 180ms}
.rd-more>i::before,.rd-more>i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;margin-left:-5.5px;background:currentColor;transition:transform 260ms cubic-bezier(.3,.7,.2,1)}
.rd-more>i::after{transform:rotate(90deg)}
.rd-more[aria-expanded="true"]>i::after{transform:rotate(0)}
@media (hover:hover) and (pointer:fine){.rd-more:hover>i{background:var(--ink);color:var(--paper)}}
.rd-more:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.rd-more small{font-size:10px;font-weight:400;letter-spacing:.12em;opacity:.6;margin-left:10px}
@media (prefers-reduced-motion:reduce){.rd-more>i::before,.rd-more>i::after{transition:none}}

/* the fact table's own toggle sits as its last row */
.proj-meta .rd-tog{display:block!important;border-top:var(--rule);padding:0!important}
.proj-meta .rd-tog .rd-more{display:flex;width:100%;margin:0;border:0;justify-content:space-between}
.proj-meta .rd-tog .rd-more>span{padding:11px 14px}
/* facts already shown in the title strip / status bar */
.proj-meta .rd-dup{display:none!important}
/* the lead picture never fills more than about two-thirds of the screen, so the intro shows too */
#page>.g-lead .g-item{max-height:68vh}

/* phones and tablets: the intro text comes before the fact table */
@media (max-width:900px){.proj-info>.proj-desc{order:-1}.proj-info{row-gap:28px}}

/* =========================================================
   MAPS: side by side on every device, always fully inside the window
   (Asia | Pacific | Americas). The stacked phone/tablet version is retired.
   Label sizes are set by hot-carry.js so they stay readable at any size.
========================================================= */
.smap-fig .m-desk,.fs-mapwrap .m-desk{display:block!important}
.smap-fig .m-mob,.fs-mapwrap .m-mob{display:none!important}
.m-desk svg.stmap,.lg-map svg.stmap{display:block;width:100%;height:auto;
  max-height:calc(100vh - var(--frame) * 2 - 48px - 130px);max-height:calc(100svh - var(--frame) * 2 - 48px - 130px)}
@media (max-width:767px){.m-desk svg.stmap,.lg-map svg.stmap{max-height:calc(100svh - var(--frame) * 2 - 44px - 110px)}}
.m-desk .stmap .pin .pl{font-size:var(--mlab,12px)!important}
.m-desk .stmap .pin .pn{font-size:var(--mnum,9px)!important;font-weight:600}
.m-desk .stmap .det .pin .pl{font-size:calc(var(--mlab,12px) * .8)!important}
.m-desk .stmap .det-t,.m-desk .stmap .brk text{font-size:var(--msm,9px)!important}
.m-desk .stmap.m-tiny .det-t,.m-desk .stmap.m-tiny .brk text{display:none}
.smap-fig,.fs-mapwrap>.m-desk{min-width:0}

/* mobile menu open: tuck the pencil and its fallen leads away so they do not show through the menu */
#hotfx-tools,#hotfx-floor{transition:opacity 200ms ease,visibility 0s linear 0s}
.menu-open #hotfx-tools,.menu-open #hotfx-floor{opacity:0;visibility:hidden;transition:opacity 150ms ease,visibility 0s linear 150ms}

/* =========================================================
   BLUEPRINT CONSISTENCY (2026-10-11) — blueprint mode keeps to blue + white;
   the yellow highlighter is the one colour that stays
========================================================= */
/* highlighted words: blueprint blue on the yellow band, instead of black */
html.blueprint mark.hl,html.blueprint mark.hl.hfx-hl,html.blueprint.has-hotfx mark.hl.hfx-hl{color:#1c4f9c!important}
/* mechanical pencil: a white line drawing on blue, no metal, no shadow */
html.blueprint .hfx-tool g[filter]{filter:none}
html.blueprint .hfx-tool rect:not(.hfx-hit):not(.hfx-lead):not(.hfx-ring),html.blueprint .hfx-tool path{fill:#1c4f9c!important;stroke:#fff!important;stroke-width:.6px!important}
html.blueprint .hfx-tool line{stroke:rgba(255,255,255,.5)!important}
html.blueprint .hfx-tool .hfx-ring{fill:#fff!important}
html.blueprint .hfx-print{fill:#fff}
html.blueprint .hfx-lead{fill:#fff}
html.blueprint .hfx-fallen{background:#fff;box-shadow:none}
/* home hero section drawing: white linework on blue instead of a white sheet */
html.blueprint .hb-stage{background:#1c4f9c!important}
html.blueprint .hb-stage .hot-hero-img img{filter:invert(1) grayscale(1)!important;mix-blend-mode:screen!important;opacity:1!important}
html.blueprint .hb-col{filter:grayscale(1) contrast(1.1)!important;mix-blend-mode:screen!important}
html.blueprint .hb-ann text{stroke:#1c4f9c}
html.blueprint .hb-ann .hb-base line{stroke:rgba(255,255,255,.45)}
html.blueprint .hb-ann .hb-gb circle{fill:#1c4f9c;stroke:#fff}
html.blueprint .hb-ann .hb-gb text,html.blueprint .hb-ann .hb-dim text{fill:#fff}
html.blueprint .hb-ann .hb-lab text{fill:rgba(255,255,255,.75)}
html.blueprint .hb-ann .hb-callout rect,html.blueprint .hb-ann .hb-callout path,html.blueprint .hb-ann .hb-callout path.hb-shape{stroke:#fff!important}
html.blueprint .hb-ann .hb-dim line{stroke:#fff}
html.blueprint .hb-hint{color:rgba(255,255,255,.75)}
html.blueprint .hb-tag,html.blueprint .hb-key{background:#1c4f9c;border-color:#fff;color:#fff}
html.blueprint .hb-db,html.blueprint .hb-go{border-color:#fff}
html.blueprint .hb-db::after{background:#fff}
html.blueprint .hb-db b,html.blueprint .hb-go i{color:#fff}
html.blueprint .hb-nm{border-bottom-color:#fff}
html.blueprint .hb-sub,html.blueprint .hb-kt{color:rgba(255,255,255,.7)}
html.blueprint .hb-go:hover{background:#fff;color:#1c4f9c!important}html.blueprint .hb-go:hover i{color:#1c4f9c}
html.blueprint .hb-kg,html.blueprint .hb-k0{border-color:#fff}
html.blueprint .hb-k0{background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 1px,transparent 1px 5px)}
html.blueprint .hot-hero .hb-kg button{background:transparent!important;color:#fff!important;border-color:#fff}
html.blueprint .hot-hero .hb-kg button:hover{background:rgba(255,255,255,.18)!important}
html.blueprint .hot-hero .hb-kg button.on{background:#fff!important;color:#1c4f9c!important}

/* Textured marker strokes: keep white text readable until the stroke arrives. */
html.blueprint mark.hl{color:#fff!important;background-color:transparent!important}
html.blueprint.has-hotfx mark.hl.hfx-hl{
  color:#fff!important;background-color:transparent!important;
  background-image:var(--hfx-hl-bp)!important;
  transition:background-size 1.1s cubic-bezier(.55,.05,.35,1),color .15s 1.1s!important;
}
html.blueprint.has-hotfx mark.hl.hfx-hl.hfx-drawn{color:#1c4f9c!important}
@media(prefers-reduced-motion:reduce){html.blueprint.has-hotfx mark.hl.hfx-hl{transition:none!important}}
/* Static inverse blueprint: blue section on white, with no room reveal. */
html.blueprint .hb-stage .hot-hero-img{background:#1c4f9c!important}
html.blueprint .hb-stage .hot-hero-img img{
  content:url("lr-composite-1-3840.webp");filter:grayscale(1)!important;
  mix-blend-mode:screen!important;opacity:1!important;
}
html.blueprint .hb-tag,html.blueprint .hb-key,
html.blueprint .hb-hint,html.blueprint .hb-callout{display:none!important}
html.blueprint .hb-stage{cursor:default!important}
html.blueprint .hb-ann .hb-base line{stroke:#1c4f9c}
html.blueprint .hb-ann .hb-gb circle{fill:#fff;stroke:#1c4f9c}
html.blueprint .hb-ann .hb-gb text,html.blueprint .hb-ann .hb-lab text{fill:#1c4f9c;stroke:#fff}
html.blueprint .hb-fig-t{color:#1c4f9c}

/* Blueprint room hover: reveal the original colour render inside the room mask. */
html.blueprint .hb-col{filter:none!important;mix-blend-mode:normal!important}