/* =========================================================
   HAUS OF TECHNIQUES — studio layer on top of the hausofjj
   "drafted" sheet theme (site.css + drafted.css).
   Uses the shared tokens: --ink --paper --red --rule --gap --head-bg
========================================================= */
:root{
  --hot-soft:color-mix(in srgb,var(--ink) 6%,transparent);
  --hot-soft-2:color-mix(in srgb,var(--ink) 11%,transparent);
  --hot-muted:color-mix(in srgb,var(--ink) 58%,transparent);
  --hot-display:"Helvetica Neue Condensed","HelveticaNeue-CondensedBold","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --hot-motion:320ms cubic-bezier(.2,.75,.25,1);
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:calc(var(--frame) + 12px);top:calc(var(--frame) + 12px);z-index:400;background:var(--paper);border:var(--rule);padding:8px 12px;font-size:11px}
body{text-transform:uppercase}
input,select,textarea{text-transform:none}

/* logo is an svg wordmark: keep it crisp at the strip height */

#header .header-nav a.hot svg{width:18px!important;height:18px!important;fill:none}

/* ---------- sections + section strip ---------- */
.hot-section{padding:0 var(--gap);margin:0 0 88px}
.hot-sec{display:flex;align-items:stretch;border:var(--rule);margin:0 0 28px}
.hot-sec .ts-no{flex:0 0 110px}
.hot-sec .hot-sec-kind{flex:1 1 auto}
.hot-sec .hot-sec-kind .ts-v{font-size:19px;letter-spacing:.05em}
.hot-sec .hot-sec-scale{flex:0 0 110px}
.hot-sec .ts-no .ts-v{color:var(--red)}
.hot-intro .hot-lede{margin-bottom:36px}

.hot-lede{font-size:clamp(13px,1.15vw,16px);line-height:1.6;letter-spacing:.03em;max-width:68ch;margin:0 0 28px}
.hot-lede--ink{color:var(--ink)}
.hot-kicker{font-size:9.5px;letter-spacing:.14em;color:var(--hot-muted);margin:0 0 14px}
.hot-h1{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(34px,4.6vw,68px);line-height:.94;letter-spacing:-.015em;margin:0 0 22px}

/* ---------- buttons ---------- */
.hot-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hot-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-width:210px;padding:14px 16px;
  border:var(--rule);background:var(--paper);color:var(--ink);font:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;cursor:pointer;
  transition:background-color 180ms ease,color 180ms ease}
.hot-btn i{font-style:normal;font-weight:400;font-size:14px;transition:transform var(--hot-motion)}
@media (hover:hover) and (pointer:fine){
  .hot-btn:hover,.hot-hero-foot .hot-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
  .hot-btn:hover i{transform:translate(2px,-2px);color:#fff}
}

/* ---------- home hero: the section drawing is the sheet ---------- */
/* Drawing: white sky top-left (headline sits there), black ground band
   along the bottom (lede + buttons sit there, reversed out in white). */
.hot-hero{position:relative;margin:0 var(--gap) 88px;border:var(--rule);overflow:hidden;background:#fff;
  aspect-ratio:16/9;min-height:560px;max-height:calc(100vh - var(--frame) * 2 - 56px - var(--gap) * 2)}
.hot-hero-img{position:absolute;inset:0;display:block}
.hot-hero-img img{width:100%;height:100%;object-fit:cover;object-position:62% 100%;filter:contrast(1.04)}
.hot-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 48% 62% at 0 0,rgba(255,255,255,.92) 0,rgba(255,255,255,.7) 55%,rgba(255,255,255,0) 100%)}
.hot-hero-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,3vw,44px);container-type:inline-size;pointer-events:none}
.hot-hero-copy a{pointer-events:auto}
.hot-hero h1{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;color:#000;
  font-size:clamp(36px,4.5cqi,96px);line-height:.88;letter-spacing:-.025em;margin:0;max-width:9ch}
.hot-hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;color:#fff}
.hot-hero-foot .hot-lede{margin:0;max-width:52ch;color:#fff}
.hot-hero-foot .hot-btns{margin:0}
.hot-hero-foot .hot-btn{background:transparent;color:#fff;border-color:#fff}
.hot-hero-fig{position:absolute;right:0;top:0;z-index:2;padding:7px 12px;background:var(--paper);border-left:var(--rule);border-bottom:var(--rule);
  font-size:9px;letter-spacing:.14em}
html.blueprint .hot-hero{background:#1c4f9c}
html.blueprint .hot-hero-img img{filter:invert(1) grayscale(1);mix-blend-mode:screen}
html.blueprint .hot-hero::before{background:radial-gradient(ellipse 48% 62% at 0 0,rgba(28,79,156,.9) 0,rgba(28,79,156,.6) 55%,transparent 100%)}
html.blueprint .hot-hero h1{color:#fff}

/* ---------- home statement ---------- */
.hot-statement{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 48px}
.hot-statement .hot-kicker{grid-column:1}
.hot-statement h2{grid-column:2;grid-row:1 / 3;font-size:clamp(24px,3vw,44px);font-weight:400;line-height:1.1;letter-spacing:.005em;margin:0 0 24px;max-width:24ch}
.hot-statement p:last-child{grid-column:2;font-size:13px;line-height:1.7;letter-spacing:.03em;max-width:62ch;margin:0}

/* featured cards: two across */
.hot-feature.grid{columns:3!important;padding:0!important}
@media (max-width:1100px){.hot-feature.grid{columns:2!important}}
.hot-section .grid{padding-left:0!important;padding-right:0!important}
/* studio thumbnails: black & white, colour on hover (as the live site) */
.card .card-img img{filter:grayscale(1)}
.card:hover .card-img img{filter:none}

/* ---------- CTA ---------- */
.hot-cta-body{border:var(--rule);padding:clamp(24px,4vw,64px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.hot-cta-body{container-type:inline-size}
.hot-cta-body h2{max-width:100%;overflow-wrap:anywhere;font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(30px,7.4cqi,96px);line-height:.9;letter-spacing:-.02em;margin:0}
.hot-cta-body .hot-btns{margin:0}

/* ---------- shared: icons, numbers, pills ---------- */
.hot-icon{display:inline-flex;flex:0 0 auto;width:56px;height:56px;color:var(--ink);transition:color 200ms ease}
.hot-icon svg{display:block;width:100%;height:100%;overflow:visible}
.hot-icon svg *{transform-box:fill-box;transform-origin:center;transition:transform var(--hot-motion)}
.hot-num{font-size:11px;letter-spacing:.08em;color:var(--hot-muted);line-height:1}
.hot-num--big{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:64px;line-height:.8;color:var(--red);letter-spacing:-.02em}
.hot-label{font-size:9.5px;letter-spacing:.14em;color:var(--hot-muted);margin:0 0 10px}
.hot-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hot-tags li{padding:7px 10px;border:var(--rule);background:var(--paper);font-size:10.5px;letter-spacing:.06em;line-height:1.2;transition:background-color 180ms}
.hot-tags li:hover{background:var(--hot-soft-2)}
h3{font-weight:400}

/* ---------- services boxes (What we do) ---------- */
.hot-wwd{--pad:clamp(18px,1.8vw,28px);container-type:inline-size;container-name:wwd}
.hot-wwd-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:var(--rule);border-left:var(--rule)}
.hot-wwd-card,.hot-hww-card{grid-column:span 2;display:flex;flex-direction:column;min-width:0;min-height:300px;padding:var(--pad);
  border-right:var(--rule);border-bottom:var(--rule);background:transparent;transition:background-color 200ms ease;outline-offset:-4px}
.hot-wwd-card.is-wide{grid-column:span 3}
.hot-wwd.has-drawer .hot-wwd-card{cursor:pointer}
.hot-wwd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:40px}
.hot-wwd-body{margin-top:auto}
.hot-wwd-body h3,.hot-av h3{font-size:14px;letter-spacing:.06em;line-height:1.25;margin:0 0 10px}
.hot-wwd-body p,.hot-av p{font-size:12px;line-height:1.6;letter-spacing:.03em;margin:0;max-width:52ch}
.hot-wwd-more{display:flex;align-items:center;gap:8px;margin:0;padding-top:22px;font-size:10px;letter-spacing:.12em}
.hot-plus{position:relative;width:18px;height:18px;border:var(--rule);border-radius:50%;transition:transform 250ms ease,background-color 200ms,border-color 200ms,color 200ms}
.hot-plus::before,.hot-plus::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.hot-plus::after{width:1px;height:8px}
.hot-wwd-card.is-open .hot-plus{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:var(--paper)}
.hot-wwd-card.is-open{background:var(--hot-soft)}
.hot-wwd-card.is-open .hot-icon{color:var(--red)}
.hot-wwd-list{display:none}

.hot-wwd-detail{grid-column:1 / -1;display:grid;grid-template-rows:0fr;border-right:var(--rule);background:var(--hot-soft);
  transition:grid-template-rows 450ms cubic-bezier(.65,0,.35,1),border-color 0s 450ms;border-bottom:0 solid var(--ink)}
.hot-wwd-detail.is-open{grid-template-rows:1fr;border-bottom:var(--rule);transition:grid-template-rows 450ms cubic-bezier(.65,0,.35,1)}
.hot-wwd-detail>.hot-wwd-detail-inner{overflow:hidden;min-height:0;display:grid;grid-template-columns:1fr 2fr;gap:0 40px;padding:0 var(--pad)}
.hot-wwd-detail.is-open>.hot-wwd-detail-inner{padding:var(--pad)}
.hot-wwd-detail-inner{transition:padding 450ms cubic-bezier(.65,0,.35,1)}
.hot-wwd-detail-title{font-size:14px;letter-spacing:.06em;margin:0}

@media (hover:hover) and (pointer:fine){
  .hot-wwd-card:hover,.hot-hww-card:hover,.hot-av-addon:hover{background:var(--hot-soft)}
  .hot-wwd-card:hover .hot-icon,.hot-hww-card:hover .hot-icon,.hot-av-addon:hover .hot-icon{color:var(--red)}
  a.hot-wwd-card:hover h3{color:var(--red)}
  /* icon motions */
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-lift{transform:translateY(-4px)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-tl{transform:translate(2px,2px)}:is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-tr{transform:translate(-2px,2px)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-bl{transform:translate(2px,-2px)}:is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-br{transform:translate(-2px,-2px)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-dock{transform:translate(2.5px,2.5px)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-dock2{transform:translate(-3px,-3px)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-plane{transform:translateX(2px)}
  .i-ray{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--hot-motion)!important}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-ray{stroke-dashoffset:0}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-lens{animation:hot-scan 700ms cubic-bezier(.2,.75,.25,1) both}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-turn{animation:hot-turn 520ms cubic-bezier(.2,.75,.25,1) both}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-pulse{animation:hot-pulse 360ms cubic-bezier(.2,.75,.25,1) both}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-d1{animation-delay:90ms}:is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-d2{animation-delay:180ms}
  .i-stack{transform-origin:center bottom!important}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-stack{transform:scaleY(1.5)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-inR{transform:translateX(1.5px)}:is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-inL{transform:translateX(-1.5px)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-draw{animation:hot-draw 420ms cubic-bezier(.2,.75,.25,1) both}
}
.i-draw{stroke-dasharray:1}
@keyframes hot-scan{0%{transform:translate(0,0) scale(1)}45%{transform:translate(-12px,-4px) scale(1.12)}82%{transform:translate(-12px,8px) scale(1.12)}100%{transform:translate(-12px,2px) scale(1.12)}}
@keyframes hot-turn{0%{transform:scaleX(1) skewY(0)}46%{transform:scaleX(.08) skewY(-3deg)}54%{transform:scaleX(-.08) skewY(3deg)}100%{transform:scaleX(-1) skewY(0)}}
@keyframes hot-pulse{0%{transform:scale(1)}58%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes hot-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

@container wwd (max-width:899px){
  .hot-wwd-cards{grid-template-columns:1fr 1fr}
  .hot-wwd-card,.hot-wwd-card.is-wide{grid-column:span 1}
  .hot-wwd-card.is-last{grid-column:1 / -1}
  .hot-wwd-detail>.hot-wwd-detail-inner{grid-template-columns:1fr;gap:16px}
}
@container wwd (max-width:559px){
  .hot-wwd-cards{grid-template-columns:1fr}
  .hot-wwd-card.is-last{grid-column:auto}
  .hot-wwd-card{min-height:0}
  .hot-wwd-top{margin-bottom:24px}
}

/* ---------- stage timeline ---------- */
.hot-hw{--bar:14px;--rowgap:104px;--fill:1.5s;container-type:inline-size;container-name:hw}
.hot-hw-label,.hot-hw-stage-head{display:flex;align-items:flex-end;gap:14px}
.hot-hw-num{flex:0 0 auto;font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:68px;line-height:.72;letter-spacing:-.02em;color:var(--red);margin-bottom:-1px}
.hot-hw-label-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.hot-hw-h{font-size:14px;letter-spacing:.06em;line-height:1}
.hot-hw-entry{display:block;color:var(--hot-muted);font-size:10px;letter-spacing:.08em;line-height:1.2}
.hot-hw-timeline{position:relative;height:calc(var(--rowgap) * 2 + 150px);margin-bottom:64px}
.hot-hw-row{position:absolute;left:0;right:0;height:calc(var(--bar) + 62px)}
.hot-hw-row:nth-child(1){top:0}.hot-hw-row:nth-child(2){top:var(--rowgap)}.hot-hw-row:nth-child(3){top:calc(var(--rowgap) * 2)}
.hot-hw-label{position:absolute;left:var(--s);bottom:calc(var(--bar) + 12px);max-width:calc(100% - var(--s))}
.hot-hw-bar{position:absolute;left:0;right:0;bottom:0;height:var(--bar);background:var(--hot-soft-2)}
.hot-hw-fill{position:absolute;top:0;bottom:0;left:var(--s);width:calc(var(--e) - var(--s));background:var(--ink)}
.hot-hw-fill::after{content:"";position:absolute;right:0;top:0;width:8px;height:100%;background:var(--red)}
.hot-hw.is-armed .hot-hw-fill{width:0}
.hot-hw.is-armed.is-in .hot-hw-fill{width:calc(var(--e) - var(--s));transition:width var(--fill) cubic-bezier(.65,0,.35,1) var(--d,0s)}
.hot-hw-axis{position:absolute;left:0;right:0;top:calc(var(--rowgap) * 2 + 106px);height:1px;background:var(--ink)}
.hot-hw-axis::after{content:"";position:absolute;right:0;top:-5px;width:9px;height:9px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.hot-hw-tick{position:absolute;left:var(--s);top:-6px;width:1px;height:13px;background:var(--ink)}
.hot-hw-axis-label{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;margin:0}
.hot-hw-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
.hot-hw-stage{display:flex;flex-direction:column;gap:18px;min-width:0}
.hot-hw-stage-head,.hot-hw-mini{display:none}
.hot-hw-caption{color:var(--hot-muted);font-size:9.5px;letter-spacing:.14em;margin:0}
.hot-hw-text{font-size:12px;line-height:1.6;letter-spacing:.03em;min-height:4.8em;margin:0}
.hot-hw-list{list-style:none;margin:0;padding:0;border-top:var(--rule)}
.hot-hw-list li{padding:11px 0;border-bottom:1px solid var(--hot-soft-2);font-size:11px;letter-spacing:.05em}
.hot-hw-list li:last-child{border-bottom:var(--rule)}
@container hw (max-width:899px){
  .hot-hw{--bar:10px;--rowgap:58px}
  .hot-hw-timeline{height:calc(var(--rowgap) * 2 + 94px);margin-bottom:44px}
  .hot-hw-row{height:calc(var(--bar) + 38px)}
  .hot-hw-label{bottom:calc(var(--bar) + 8px)}
  .hot-hw-label .hot-hw-num{font-size:30px;line-height:.8;margin-bottom:0}
  .hot-hw-label .hot-hw-label-text{display:none}
  .hot-hw-fill::after{width:6px}
  .hot-hw-axis{top:calc(var(--rowgap) * 2 + 64px)}
  .hot-hw-stages{grid-template-columns:minmax(0,1fr);row-gap:52px}
  .hot-hw-stage{gap:16px}
  .hot-hw-stage-head{display:flex;gap:12px}
  .hot-hw-stage-head .hot-hw-num{font-size:64px}
  .hot-hw-caption{display:none}
  .hot-hw-text{min-height:0}
  .hot-hw-mini{display:block;position:relative;height:8px;background:var(--hot-soft-2)}
  .hot-hw-mini span{position:absolute;top:0;bottom:0;left:var(--s);width:calc(var(--e) - var(--s));background:var(--ink)}
  .hot-hw-mini span::after{content:"";position:absolute;right:0;top:0;width:6px;height:100%;background:var(--red)}
}

/* ---------- available at any time ---------- */
.hot-av{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule);border-left:var(--rule);container-type:inline-size}
.hot-av-addon{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:clamp(18px,1.8vw,28px);border-right:var(--rule);border-bottom:var(--rule);transition:background-color 200ms}
.hot-av-addon>div{display:flex;flex-direction:column}
.hot-av-addon .hot-tags{margin-top:auto;padding-top:18px}

/* ---------- how we work / what happens next ---------- */
.hot-hww{--pad:clamp(18px,1.8vw,28px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--rule);border-left:var(--rule)}
.hot-hww .hot-hww-card{grid-column:auto;min-height:260px}

/* ---------- about ---------- */
.hot-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.hot-split--founder{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.hot-split-text p{font-size:clamp(14px,1.3vw,19px);line-height:1.5;letter-spacing:.02em;margin:0 0 1em;max-width:48ch}
.hot-split--founder .hot-split-text p{font-size:13px;line-height:1.7;max-width:62ch}
.hot-fig{margin:0}
.hot-fig figcaption{font-size:9.5px;letter-spacing:.14em;margin-top:28px;color:var(--hot-muted)}
.hot-fig .about-key{margin-top:18px}
.hot-fig img{filter:grayscale(1);transition:filter 500ms ease}
.hot-fig:hover img{filter:none}

/* ---------- contact ---------- */
.hot-contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.hot-contact .about-key a:hover{color:var(--red)}
.hot-form{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule);border-left:var(--rule)}
.hf-cell{display:flex;flex-direction:column;padding:0 14px 12px;border-right:var(--rule);border-bottom:var(--rule);min-width:0}
.hf-cell .ts-k{display:block;margin:0 -14px 10px;padding:6px 14px;background:var(--head-bg);opacity:1}
.hf-cell:focus-within .ts-k{background:var(--ink);color:var(--paper)}
.hf-wide{grid-column:1 / -1}
.hot-form input,.hot-form select,.hot-form textarea{width:100%;font:inherit;font-size:14px;letter-spacing:.02em;color:var(--ink);
  background:transparent;border:0;border-radius:0;padding:4px 0;outline:0;-webkit-appearance:none;appearance:none}
.hot-form select{background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 6px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) right 0 center/6px 6px no-repeat;padding-right:20px}
.hot-form textarea{resize:vertical;min-height:140px;line-height:1.5}
.hf-submit{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:14px}
.hf-note{margin:0;font-size:10px;letter-spacing:.1em;color:var(--hot-muted)}
.hf-submit > .hot-btn{box-sizing:border-box;flex:0 0 auto;width:max-content;min-width:max-content;white-space:nowrap}
.hf-submit > .hf-note{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
@media(max-width:767px){.hf-submit{flex-wrap:wrap}.hf-submit > .hot-btn{flex:0 0 100%;width:100%;min-width:0}.hf-submit > .hf-note{flex-basis:100%}}
.hot-form.is-sent .hf-note{color:var(--red)}
html.blueprint .hot-strip,html.blueprint svg.service-art{--ink:#fff;--red:#fff;--paper:#1c4f9c;--shade:#3764a4}

/* ---------- disclaimer under the title block ---------- */
.hot-disclaimer{padding:18px 0 calc(var(--frame) + 10px);margin:calc(-1 * var(--frame)) 0 0}
.hot-disclaimer p{margin:0;max-width:110ch;font-size:9px;line-height:1.6;letter-spacing:.1em;color:var(--hot-muted)}
body.hot-home .hot-disclaimer{display:none}
#footer-sections{padding-bottom:var(--frame)!important}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hot-statement{grid-template-columns:1fr}
  .hot-statement h2,.hot-statement p:last-child{grid-column:1;grid-row:auto}
  .hot-split,.hot-split--founder,.hot-contact{grid-template-columns:1fr;gap:32px}
  .hot-hww{grid-template-columns:1fr}
  .hot-hww .hot-hww-card{min-height:0}
  .hot-av{grid-template-columns:1fr}
}
@media (max-width:767px){
  .hot-section{margin-bottom:64px}
  .hot-sec .ts-no{flex:0 0 72px}
  .hot-sec .hot-sec-scale{display:none}
  .hot-sec .hot-sec-kind .ts-v{font-size:15px}
  .hot-feature.grid{columns:1!important}
  .hot-form{grid-template-columns:1fr}
  .hot-btn{min-width:0;flex:1 1 100%}
  .hot-hero,.hot-section{min-width:0}
  .hot-av-addon{grid-template-columns:1fr;gap:12px}
  .hot-icon{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .hot-icon *,.hot-wwd-detail,.hot-wwd-detail-inner,.hot-hw-fill{animation:none!important;transition:none!important}
}

/* ---------- blueprint mode touches ---------- */
html.blueprint .hot-fig img{mix-blend-mode:screen}
html.blueprint .hot-form select{color-scheme:dark}

/* ---------- home: services as a plain row of five ---------- */
.hot-wwd--row{container-type:inline-size;container-name:wwdrow}
.hot-wwd--row .hot-wwd-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
.hot-wwd--row .hot-wwd-card,.hot-wwd--row .hot-wwd-card.is-wide,.hot-wwd--row .hot-wwd-card.is-last{grid-column:auto;min-height:260px;cursor:default}
.hot-wwd--row .hot-wwd-card:hover{background:transparent}
.hot-wwd--row .hot-wwd-top{margin-bottom:28px}
@container wwdrow (max-width:1099px){.hot-wwd--row .hot-wwd-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container wwdrow (max-width:719px){.hot-wwd--row .hot-wwd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container wwdrow (max-width:459px){.hot-wwd--row .hot-wwd-cards{grid-template-columns:1fr}.hot-wwd--row .hot-wwd-card{min-height:0}}

/* ---------- section strip: NOTES row (page intro lives in the block) ---------- */
.hot-sec{flex-wrap:wrap}
.hot-sec .hot-sec-note{flex:1 1 100%;border-left:0!important;border-top:var(--rule)}
.hot-sec .hot-sec-note .ts-v{font-size:13px;line-height:1.6;letter-spacing:.04em;max-width:90ch;padding-bottom:4px}
.hot-intro .hot-sec{margin-bottom:28px}

/* ---------- header: email + instagram icons ---------- */
#header .header-nav a.hot{padding:0 16px!important}
#header .header-nav a.hot svg{width:18px!important;height:18px!important}
#header .header-nav a.hot+a.hot{border-left:var(--rule)}
.mn-icons a+a{border-left:var(--rule)}
.mn-icons svg{fill:none!important}

/* ---------- footer: icon links ---------- */
.hot-icon-links{flex-direction:row!important;align-items:center;gap:0!important}
.hot-icon-links a{display:grid;place-items:center;width:34px;height:34px;border:var(--rule);margin-right:-1px;color:var(--ink);transition:background-color 180ms,color 180ms,border-color 180ms}
.hot-icon-links a svg{width:17px;height:17px}
.hot-icon-links a:hover{background:var(--red);border-color:var(--red);color:#fff;position:relative;z-index:1;opacity:1!important}
.jj-glyph{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1;text-transform:none}
.jj-glyph sup{font-size:.55em;vertical-align:top;position:relative;top:-.1em;margin-left:.04em}

/* ---------- title block: compact logo + general notes box ---------- */

.tb-notes{grid-column:1 / -1!important;grid-row:auto!important;border-left:0!important;border-top:var(--rule);min-height:0!important}
.tb-notes .tb-val{font-size:9.5px;line-height:1.6;letter-spacing:.08em;max-width:140ch;opacity:.8}

/* ---------- contact form: phone, checkboxes, validation ---------- */
.hf-req{float:right;font-size:7.5px;letter-spacing:.14em;opacity:.7}
fieldset.hf-cell{margin:0;min-inline-size:0}
fieldset.hf-cell legend.ts-k{float:left;width:calc(100% + 28px);box-sizing:border-box}
.hf-help{clear:both;margin:0 0 10px;font-size:9.5px;letter-spacing:.1em;color:var(--hot-muted)}
.hf-checks{clear:both;display:flex;flex-wrap:wrap;gap:6px}
.hf-check{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:var(--rule);font-size:10.5px;letter-spacing:.06em;cursor:pointer;transition:background-color 160ms,color 160ms,border-color 160ms}
.hf-check input{position:absolute;opacity:0;width:1px;height:1px}
.hf-box{width:11px;height:11px;border:var(--rule);flex:0 0 auto;position:relative}
.hf-check:hover{background:var(--hot-soft)}
.hf-check:has(input:checked){background:var(--ink);color:var(--paper)}
.hf-check:has(input:checked) .hf-box{background:var(--red);border-color:var(--red)}
.hf-check:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
.hf-phone{display:flex;align-items:stretch;gap:0}
.hf-dial{position:relative;flex:0 0 auto;display:flex;align-items:center;margin:0 12px 0 0;padding:0 12px 0 0;border-right:var(--rule)}
.hf-dial-face{display:flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.hf-dial-iso{font-weight:700;font-size:9.5px;letter-spacing:.12em;padding:3px 5px;border:var(--rule);line-height:1;transition:background-color 160ms ease,color 160ms ease}
.hf-chev{width:7px;height:7px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px;transition:transform 200ms ease}
.hf-dial select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;padding:0;margin:0}
.hf-dial:hover .hf-dial-iso,.hf-dial.is-focus .hf-dial-iso{background:var(--ink);color:var(--paper)}
.hf-dial.is-focus .hf-chev{transform:translateY(1px) rotate(225deg)}
.hf-phone input{flex:1 1 auto;min-width:0}
.hf-cell.is-bad .ts-k,.hf-cell.is-bad legend{background:var(--red)!important;color:#fff!important}

/* hero on phones: drawing on top, headline over its sky, copy continues on the black ground */
@media (max-width:767px){
  .hot-hero{aspect-ratio:auto;min-height:0;max-height:none;background:#000}
  .hot-hero-img{position:relative;aspect-ratio:16/10}
  .hot-hero-img img{object-position:70% 100%}
  .hot-hero::before{display:none}
  .hot-hero-copy{position:static;padding:0;display:block}
  .hot-hero h1{color:#fff;background:#000;padding:22px 16px 18px;font-size:clamp(28px,8.6vw,52px);max-width:none;overflow-wrap:normal}
  .hot-hero-foot{padding:4px 16px 20px;background:#000}
  .hot-hero-fig{display:none}
}

/* ---------- title block: logo block + location block ---------- */
.tb-brand{grid-row:1!important;justify-content:flex-start!important}
.tb-brand .tb-logo{flex:1;display:flex;align-items:center}
.tb-logo img{height:auto!important;width:100%;max-width:190px;max-height:78px;object-fit:contain;object-position:left center}
.tb-loc{grid-column:1;grid-row:2;border-left:0!important;border-top:var(--rule);min-height:0!important}
@media (max-width:1100px){
  .tb-loc{grid-column:1 / -1;grid-row:auto}
}

/* ---------- header logo: bigger mark, same 56px strip ---------- */
#header .header-title-logo{padding:0 14px!important}
#header .header-title-logo img{height:28px!important;width:auto;max-width:none}
@media (max-width:767px){
  #header .header-title-logo{padding:0 12px!important;min-width:0;flex:1 1 auto}
  #header .header-title-logo img{height:auto!important;width:100%;max-width:300px;max-height:22px;object-fit:contain;object-position:left center}
}

/* ---------- form: clean label-band transitions, no doubled fieldset borders ---------- */
fieldset.hf-cell{border:0;border-right:var(--rule);border-bottom:var(--rule);padding:0 14px 12px;margin:0}
.hf-cell .ts-k,.hf-cell legend.ts-k{transition:background-color 160ms ease,color 160ms ease!important;border-bottom:var(--rule);box-shadow:none;outline:0}
.hf-cell:focus-within .ts-k{border-bottom-color:var(--ink)}
.hot-form input:focus,.hot-form textarea:focus,.hot-form select:focus{outline:0;box-shadow:none}

/* ---------- about: larger, slightly heavier body text ---------- */
.hot-split-text p{font-size:clamp(16px,1.5vw,22px);font-weight:500;line-height:1.45}
.hot-split--founder .hot-split-text p{font-size:clamp(14px,1.1vw,16px);font-weight:500;line-height:1.65}

/* ---------- animated icons: +30% ---------- */
.hot-icon{width:73px;height:73px}
@media (max-width:767px){.hot-icon{width:57px;height:57px}}

/* ---------- home hero: drawing knocked back to a ghosted, inverted pattern ---------- */
.hot-hero{background:#0c0c0c}
.hot-hero-img img{filter:grayscale(1) contrast(1.2);opacity:.17;mix-blend-mode:screen;transition:opacity 900ms ease}
.hot-hero:hover .hot-hero-img img{opacity:.26}
.hot-hero::before{background:
  linear-gradient(90deg,rgba(12,12,12,.75) 0,rgba(12,12,12,.25) 45%,rgba(12,12,12,0) 70%)}
.hot-hero h1{color:#fff}
.hot-hero-fig{background:#0c0c0c;color:#fff;border-color:rgba(255,255,255,.5)}
html.blueprint .hot-hero{background:#1c4f9c}
html.blueprint .hot-hero-img img{filter:invert(1) grayscale(1) contrast(1.2)}
html.blueprint .hot-hero::before{background:linear-gradient(90deg,rgba(28,79,156,.75) 0,rgba(28,79,156,0) 70%)}
html.blueprint .hot-hero-fig{background:#1c4f9c}
@media (max-width:767px){
  .hot-hero-img{background:#0c0c0c}
  .hot-hero::before{display:block;bottom:auto;aspect-ratio:16/10;background:linear-gradient(0deg,#0c0c0c 0,rgba(12,12,12,0) 40%)}
  .hot-hero h1{background:transparent}
  .hot-hero-foot{background:transparent}
}
@media (prefers-reduced-motion:reduce){.hot-hero-img img{transition:none}}

/* hero: inset block that always spans the sheet width; the box sets its own
   height (16:9 of the width, capped to the window) and the image crops to fill it */
.hot-hero{width:auto;margin:0 var(--gap) 88px!important;border:var(--rule)!important;aspect-ratio:auto!important;
  height:clamp(520px,calc((100vw - var(--frame) * 2 - var(--gap) * 2) * .5625),calc(100vh - var(--frame) * 2 - 56px - var(--gap) * 2));
  min-height:0;max-height:none}
/* the colour reveal layer shares the exact crop of the hero drawing */
.hot-hero-img img,.hot-hero-reveal{object-fit:cover;object-position:60% calc(58% + 30px)}
@media (max-width:767px){.hot-hero{height:auto}}

/* ---------- mobile sheet: always rectangular ---------- */
:root,html.has-safe{--sheet-rad:0px!important}
#sheet-frame::before,#sheet-frame::after,
html.has-safe #sheet-frame::before,html.has-safe #sheet-frame::after,
html.has-safe #header .header-inner,html.has-safe #footer-sections .footer-inner,
html.has-safe body::after{border-radius:0!important}

/* longer hero headline: three set lines, sized to fit */
.hot-hero h1{max-width:none;font-size:clamp(34px,4.1cqi,88px)}
@media (max-width:767px){.hot-hero h1{font-size:clamp(26px,7.6vw,46px)}}

/* home services row: same light grey hover as the other boxes */
@media (hover:hover) and (pointer:fine){
  .hot-wwd--row .hot-wwd-card:hover{background:var(--hot-soft)}
}

/* checkboxes: only the box turns red (with a white tick); the chip stays as is */
.hf-check{user-select:none;-webkit-user-select:none}
.hf-check:has(input:checked){background:transparent;color:var(--ink)}
.hf-check:has(input:checked):hover{background:var(--hot-soft)}
.hf-box{transition:background-color 140ms ease,border-color 140ms ease}
.hf-check:has(input:checked) .hf-box{background:var(--red);border-color:var(--red)}
.hf-check:has(input:checked) .hf-box::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6.5px;
  border:solid #fff;border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}

/* ---------- blueprint mode: red becomes a pale blueprint white-blue, never an inverted colour ---------- */
html.blueprint{--red:#bcd8ff;--bp-ink:#1c4f9c}
/* logos: flatten to white instead of colour-inverting (red dot would turn cyan) */
html.blueprint .header-title-logo img,html.blueprint .tb-logo img{filter:brightness(0) invert(1)!important}
/* anything that sat white-on-red now sits blueprint-blue on the pale accent */
html.blueprint .hot-btn:hover,html.blueprint .hot-hero-foot .hot-btn:hover{background:var(--red);border-color:var(--red);color:var(--bp-ink)}
html.blueprint .hot-btn:hover i{color:var(--bp-ink)}
html.blueprint .hot-icon-links a:hover{background:var(--red);border-color:var(--red);color:var(--bp-ink)}
html.blueprint .hf-check:has(input:checked) .hf-box::after{border-color:var(--bp-ink)}
html.blueprint .hf-cell.is-bad .ts-k,html.blueprint .hf-cell.is-bad legend{background:var(--red)!important;color:var(--bp-ink)!important}
html.blueprint .hot-wwd-card.is-open .hot-plus{color:var(--bp-ink)}

/* ---------- line-weight audit ----------
   Hierarchy (all measured at 1 CSS px, snapped to whole device pixels):
     1. structure  – 1px ink: sheet, strips, boxes, title block, image frames
     2. secondary  – 1px 11% ink: list dividers inside schedules
   Image frames: a 3px paper mat between picture and frame line, so dark
   picture edges don't merge with the line and read as a heavier stroke. */
.card-img img,.g-item img,.hatch-shadow img,.hot-fig img{padding:3px!important;background:var(--paper)!important;box-sizing:border-box!important}
.hot-wwd-list,.hot-hw-list li{border-color:var(--hot-soft-2)}
.hot-hw-list{border-top:var(--rule)}
.hot-hw-list li:last-child{border-bottom:var(--rule)}

/* ---------- phone title block: paired cells, fewer rows ----------
   logo | location      drawing title (full)
   status | sheet       contact | mode
   sheet size | ©       general notes (full) */
@media (max-width:767px){
  #footer-sections .footer-inner{grid-template-columns:1fr 1fr!important}
  #footer-sections .tb-cell{grid-row:auto!important;border-left:0!important;border-top:var(--rule)!important;min-height:0!important}
  #footer-sections .tb-brand{grid-column:1!important;order:1;border-top:0!important}
  #footer-sections .tb-loc{grid-column:2!important;order:2;border-left:var(--rule)!important;border-top:0!important;justify-content:space-between}
  #footer-sections .tb-title{grid-column:1 / -1!important;order:3}
  #footer-sections .tb-status{grid-column:1!important;order:4}
  #footer-sections .tb-sheet{grid-column:2!important;order:5;border-left:var(--rule)!important}
  #footer-sections .tb-contact{grid-column:1!important;order:6}
  #footer-sections .tb-mode{grid-column:2!important;order:7;border-left:var(--rule)!important}
  #footer-sections .tb-size{grid-column:1!important;order:8}
  #footer-sections .tb-copy{grid-column:2!important;order:9;border-left:var(--rule)!important;padding-top:12px!important}
  #footer-sections .tb-notes{grid-column:1 / -1!important;order:10}
  #footer-sections .tb-scale,#footer-sections .tb-date{display:none!important}
  .tb-logo img{max-width:140px;max-height:60px}
  .tb-mode .bp-switch{transform:scale(.9);transform-origin:left center}
  .tb-mode .sw-lab{font-size:8px!important}
}

/* general notes: keep paragraph breaks */
.tb-notes .tb-val{white-space:pre-line}

/* ---------- hatched drop shadow (same as the profile photo) on tile grids ----------
   Services: what-we-do boxes + available-at-any-time boxes. Home: what-we-do row. */
.hot-wwd-cards,.hot-av{--hs:18px;position:relative;isolation:isolate;margin-right:var(--hs);margin-bottom:var(--hs)}
.hot-wwd-cards::before,.hot-av::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:var(--hs) calc(-1 * var(--hs)) calc(-1 * var(--hs)) var(--hs);
  background:var(--hatch-shadow)}
/* tiles need solid paper so the hatch only shows as the offset shadow */
.hot-wwd-card,.hot-av-addon,.hot-wwd-detail{background-color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .hot-wwd-card:hover,.hot-av-addon:hover,.hot-wwd--row .hot-wwd-card:hover{background:linear-gradient(var(--hot-soft),var(--hot-soft)),var(--paper)}
}
.hot-wwd-card.is-open{background:linear-gradient(var(--hot-soft),var(--hot-soft)),var(--paper)}
.hot-wwd-detail{background:linear-gradient(var(--hot-soft),var(--hot-soft)),var(--paper)}
.hot-wwd + .hot-btns,.hot-av + .hot-btns{margin-top:40px}
@media (max-width:767px){.hot-wwd-cards,.hot-av{--hs:10px}}

/* hatched shadow on the contact page "What happens next" steps */
.hot-hww:has(.hot-num--big){--hs:18px;position:relative;isolation:isolate;margin-right:var(--hs);margin-bottom:var(--hs)}
.hot-hww:has(.hot-num--big)::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:var(--hs) calc(-1 * var(--hs)) calc(-1 * var(--hs)) var(--hs);
  background:var(--hatch-shadow)}
.hot-hww:has(.hot-num--big) .hot-hww-card{background-color:var(--paper)}
@media (hover:hover) and (pointer:fine){.hot-hww:has(.hot-num--big) .hot-hww-card:hover{background:linear-gradient(var(--hot-soft),var(--hot-soft)),var(--paper)}}
@media (max-width:767px){.hot-hww:has(.hot-num--big){--hs:10px}}

/* ---------- shorter header: 48px strip (was 56), logo 23px (was 28) ---------- */
#header .header-inner{min-height:48px!important}
#header .header-title-logo img{height:23px!important}
#page{padding-top:calc(var(--frame) + var(--sh-t) + 48px + var(--gap))!important}
.hot-hero{height:clamp(520px,calc((100vw - var(--frame) * 2 - var(--gap) * 2) * .5625),calc(100vh - var(--frame) * 2 - 48px - var(--gap) * 2))}
@media (max-width:767px){
  #header .header-inner{min-height:44px!important}
  #header .header-title-logo img{max-height:19px!important}
  #page{padding-top:calc(var(--frame) + var(--sh-t) + 44px + var(--gap))!important}
  .hot-hero{height:auto}
}
@media (max-width:767px){#header .mobile-nav{height:calc(100dvh - var(--frame) * 2 - var(--sh-t) - var(--sh-b) - 44px)!important}}

/* phone menu: pinned between the header and the sheet frame, with its own bottom rule
   (fixed top + bottom, so browser toolbars can't push the line off-screen) */
@media (max-width:767px){
  #header .mobile-nav{position:fixed!important;height:auto!important;
    top:calc(var(--frame) + var(--sh-t) + 44px)!important;bottom:calc(var(--frame) + var(--sh-b))!important;
    left:calc(var(--frame) + var(--sh-l))!important;right:calc(var(--frame) + var(--sh-r))!important;
    border-bottom:0!important;box-sizing:border-box}
}

/* ---------- home CTA: red sheet, white buttons; hover = black button, text in the box red ---------- */
.hot-cta-body{background:var(--red);border-color:var(--ink)}
.hot-cta-body h2{color:#fff}
.hot-cta-body .hot-btn{background:#fff;color:#000;border-color:#fff}
.hot-cta-body .hot-btn i{color:inherit}
@media (hover:hover) and (pointer:fine){
  .hot-cta-body .hot-btn:hover{background:#000;border-color:#000;color:var(--red)}
  .hot-cta-body .hot-btn:hover i{color:var(--red)}
}
.hot-cta-body .hot-btn:focus-visible{outline:2px solid #000;outline-offset:2px}
html.blueprint .hot-cta-body h2{color:var(--bp-ink)}
html.blueprint .hot-cta-body .hot-btn{color:var(--bp-ink)}
@media (hover:hover) and (pointer:fine){
  html.blueprint .hot-cta-body .hot-btn:hover{background:var(--bp-ink);border-color:var(--bp-ink);color:var(--red)}
  html.blueprint .hot-cta-body .hot-btn:hover i{color:var(--red)}
}
/* CTA buttons: keep the 1px black frame while white */
.hot-cta-body .hot-btn{border-color:#000}
html.blueprint .hot-cta-body .hot-btn{border-color:var(--bp-ink)}

/* form labels: only go black while typing in a text field — not when ticking
   checkboxes or choosing a country code (that caused a flash) */
.hf-cell:focus-within .ts-k,.hf-cell:focus-within legend.ts-k{background:var(--head-bg);color:var(--ink)}
.hf-cell:has(input:is([type=text],[type=email],[type=tel],:not([type])):focus) .ts-k,
.hf-cell:has(textarea:focus) .ts-k{background:var(--ink);color:var(--paper)}
.hf-cell.is-bad .ts-k,.hf-cell.is-bad legend{background:var(--red)!important;color:#fff!important}
html.blueprint .hf-cell.is-bad .ts-k,html.blueprint .hf-cell.is-bad legend{color:var(--bp-ink)!important}

/* =========================================================
   ROUND 2 — featured row, project galleries, founder key, red accents
========================================================= */
/* 2. home featured: three equal 4:3 frames in a clean row */
.hot-feature.grid{display:grid!important;columns:auto!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hot-feature .card{margin:0!important}
.hot-feature .card-img{aspect-ratio:4/3!important;height:auto}
.hot-feature .card-img img{width:100%;height:100%!important;object-fit:cover!important}
@media (max-width:1100px){.hot-feature.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.hot-feature.grid{grid-template-columns:1fr}}

/* 5. project gallery: lead image, then grouped sheets */
.g-wrap{padding:0 var(--gap)}
.g-lead{margin:0 0 56px}
.g-lead .g-item{display:block;width:100%;aspect-ratio:16/9;background:none}
.g-lead .g-item img{width:100%;height:100%!important;object-fit:cover!important}
.g-lead figcaption{font-size:9.5px;letter-spacing:.14em;color:var(--hot-muted);margin-top:10px}
.g-group{margin:0 0 48px}
.g-wrap .gallery{padding:0!important;max-width:none}
.g-head{display:flex;align-items:stretch;border:var(--rule);margin:0 0 20px;font-weight:400;font-size:12px;letter-spacing:.08em}
.g-head span{display:flex;align-items:center;padding:10px 16px}
.g-no{flex:0 0 110px;color:var(--red);border-right:var(--rule)}
.g-lab{flex:1}
.g-count{border-left:var(--rule);font-size:10px;letter-spacing:.12em;color:var(--hot-muted)}
@media (max-width:767px){.g-no{flex-basis:56px}.g-lead{margin-bottom:36px}}
/* bigger prev / next */
#itemPagination{padding:40px var(--gap) 64px!important;font-size:13px!important;letter-spacing:.06em}
#itemPagination .prev,#itemPagination .next{gap:18px!important;font-size:14px!important}
.scut{width:66px!important;height:57px!important;flex:0 0 66px!important}
.scut svg{width:66px!important;height:57px!important}
.scut-no{height:57px!important;width:50px!important;font-size:11px!important}
.scut--next .scut-no{left:2.5px!important}.scut--prev .scut-no{left:14px!important}
@media (max-width:767px){#itemPagination .prev,#itemPagination .next{font-size:11px!important;gap:10px!important}
  .scut{width:52px!important;height:45px!important;flex-basis:52px!important}.scut svg{width:52px!important;height:45px!important}
  .scut-no{height:45px!important;width:40px!important;font-size:9px!important}.scut--prev .scut-no{left:11px!important}}

/* 6. founder key sits under the text */
.hot-founder-key{margin:28px 0 0;max-width:62ch}

/* 7. a little more red */
/* active nav: red rule along the bottom of the black cell */
#header .header-nav a.is-current{box-shadow:inset 0 -3px 0 var(--red)}
/* project numbers go red on card hover (tag frame stays black) */
.card:hover .rtag,.card:hover .rtag-sub{border-color:var(--ink)!important;color:var(--ink)!important}
.card:hover .rtag-no{border-color:var(--ink)!important;background:var(--red)!important;color:#fff!important}
html.blueprint .card:hover .rtag-no{color:var(--bp-ink)!important}
.rtag-no{transition:background-color 180ms ease,color 180ms ease}
/* timeline: red tick where each stage bar starts */
.hot-hw-fill::before{content:"";position:absolute;left:0;top:-5px;bottom:-5px;width:2px;background:var(--red)}

/* =========================================================
   PROJECT SHEET INDEX (replaces the section-cut prev/next)
========================================================= */
#itemPagination.sx{display:block!important;margin:24px var(--gap) 72px!important;padding:0!important;border:var(--rule);font-size:12px!important}
.sx-head{display:flex;justify-content:space-between;background:var(--head-bg);border-bottom:var(--rule)}
.sx-k{font-size:8.5px;letter-spacing:.14em;padding:6px 16px}
.sx-count{color:var(--hot-muted)}
.sx-row{--sx-h:30px;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);overflow:hidden}
.sx-cell{position:relative;display:flex;align-items:flex-start;justify-content:center;padding:14px 0 calc(var(--sx-h) + 2px);
  border-left:var(--rule);font-size:12px;letter-spacing:.06em;color:var(--ink);transition:background-color 160ms ease,color 160ms ease}
.sx-cell:first-of-type{border-left:0}
.sx-cell.is-on{background:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.sx-cell:not(.is-on):hover{background:var(--hot-soft)}}
.sx-cell:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.sx-no{position:relative;z-index:2;font-variant-numeric:tabular-nums}
/* the hill: red shape rising from the bottom edge, drawn by hot.js */
.sx-hill{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--sx-h);z-index:1;pointer-events:none;overflow:visible}
.sx-hill path{fill:var(--red)}
.sx-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:var(--rule);font-size:12px;letter-spacing:.06em}
.sx-bar a{padding:12px 16px;transition:color 160ms ease}
.sx-bar a:hover{color:var(--red);opacity:1}
.sx-next{text-align:right}
.sx-hover{font-size:9.5px;letter-spacing:.14em;color:var(--hot-muted);min-height:1em;text-align:center}
@media (max-width:767px){
  .sx-row{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sx-row::-webkit-scrollbar{display:none}
  .sx-bar{grid-template-columns:1fr 1fr}.sx-hover{display:none}
  .sx-bar a{font-size:10px;padding:12px}
}
html.blueprint .sx-cell.is-on{color:#1c4f9c}
#itemPagination.sx .sx-bar a{display:flex;align-items:center;gap:0!important}
#itemPagination.sx .sx-next{justify-content:flex-end}
#itemPagination.sx .sx-prev{justify-content:flex-start}
#itemPagination.sx .sx-cell{display:flex}

/* sheet index: no hill — clean cells, current one black with the red rule (like the nav) */
.sx-row{--sx-h:0px}
.sx-hill{display:none}
#itemPagination.sx .sx-cell{padding:14px 0;align-items:center}
.sx-cell.is-on{box-shadow:inset 0 -3px 0 var(--red)}

/* hatched drop shadow on the homepage hero (same as the tiles + profile photo) */
.hot-hero{overflow:visible;margin-right:calc(var(--gap) + 18px)!important;margin-bottom:calc(88px + 18px)!important}
.hot-hero-img{overflow:hidden}
.hot-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:18px -19px -19px 18px;
  background:var(--hatch-shadow)}
@media (max-width:767px){
  .hot-hero{margin-right:calc(var(--gap) + 10px)!important;margin-bottom:calc(64px + 10px)!important}
  .hot-hero::after{inset:10px -11px -11px 10px}
}
body.hot-home #page{position:relative;z-index:0}

/* modular icon: connector runs corner-to-corner and shortens as the square docks,
   so it always leaves from the square's bottom-right corner */
.i-link{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dasharray var(--hot-motion),stroke-dashoffset var(--hot-motion)!important}
@media (hover:hover) and (pointer:fine){
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-link{stroke-dasharray:.65 1;stroke-dashoffset:-.35}
}

/* hatched shadow on the About "How we work" tiles too (all .hot-hww grids) */
.hot-hww{--hs:18px;position:relative;isolation:isolate;margin-right:var(--hs);margin-bottom:var(--hs)}
.hot-hww::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:var(--hs) calc(-1 * var(--hs)) calc(-1 * var(--hs)) var(--hs);
  background:var(--hatch-shadow)}
.hot-hww .hot-hww-card{background-color:var(--paper)}
@media (hover:hover) and (pointer:fine){.hot-hww .hot-hww-card:hover{background:linear-gradient(var(--hot-soft),var(--hot-soft)),var(--paper)}}
@media (max-width:767px){.hot-hww{--hs:10px}}

/* ================= graphics refinements (Sep 2026) ================= */
/* one hatch for every offset shadow; pale blue in blueprint */
:root{--hatch-shadow:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 7px)}
html.blueprint{--hatch-shadow:repeating-linear-gradient(45deg,var(--red) 0 1px,transparent 1px 7px)}
/* icon lines render at exactly 1px, matching the rules (viewBox 64) */
.hot-icon svg *{stroke-width:calc(64 / 73)}
@media (max-width:767px){.hot-icon svg *{stroke-width:calc(64 / 57)}}
/* drawn arrow instead of the ↗ glyph */
.hot-btn i{font-size:0!important;display:inline-block;width:10px;height:10px;flex:0 0 10px;background:currentColor;
  -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}
/* footer icon buttons use the header cell size */
.hot-icon-links a{width:48px;height:48px}
.hot-icon-links a svg{width:19px;height:19px}
@media (max-width:767px){.hot-icon-links a{width:44px;height:44px}}
/* hero: grid overlay removed */
.hot-hero::before{background:
  linear-gradient(90deg,rgba(12,12,12,.75) 0,rgba(12,12,12,.25) 45%,rgba(12,12,12,0) 70%)}
html.blueprint .hot-hero::before{background:linear-gradient(90deg,rgba(28,79,156,.75) 0,rgba(28,79,156,0) 70%)}
/* timeline bars drawn as 1px outlines */
.hot-hw-bar{background:none;box-shadow:inset 0 0 0 1px var(--ink)}
.hot-hw-mini{background:none!important;box-shadow:inset 0 0 0 1px var(--ink)}
/* gallery heading number column = section strip on mobile */
@media (max-width:767px){.g-no{flex-basis:72px}}
/* blueprint: logos white with a pale-blue dot */
html.blueprint .header-title-logo img{filter:none!important;content:url("logo-hot-bp.svg")}
html.blueprint .tb-logo img{filter:none!important;content:url("logo-compact-bp.svg")}

/* ================= breathing room (Sep 2026) ================= */
:root{--pad:clamp(24px,2.4vw,40px)}
.hot-section{margin-bottom:clamp(96px,10vw,152px)}
.hot-sec,.hot-intro .hot-sec{margin-bottom:44px}
.hot-intro .hot-lede{margin-bottom:52px}
.hot-lede{line-height:1.75;max-width:60ch}
.hot-wwd-card,.hot-hww-card{min-height:340px}
.hot-wwd-body h3,.hot-av h3{margin-bottom:16px}
.hot-wwd-body p,.hot-av p,.hot-hww-card p{line-height:1.7}
.hot-av-addon{padding:clamp(24px,2.6vw,40px);gap:28px}
.hot-tags{gap:8px}
.hot-hw-timeline{margin-bottom:88px}
.hot-hw-list li{padding:14px 0}
.g-lead{margin-bottom:72px}.g-group{margin-bottom:72px}
.g-head{margin-bottom:28px}
@media (max-width:767px){
  .hot-section{margin-bottom:80px}
  .hot-sec,.hot-intro .hot-sec{margin-bottom:28px}
  .hot-wwd-card,.hot-hww-card{min-height:0}
}
.hot-wwd{--pad:clamp(24px,2.4vw,40px)}
.hot-hw-stages{column-gap:56px}.hot-hw-stage{gap:24px}
/* about intro as a quotation, centred in its column */
.hot-quote{align-self:center;padding:0 clamp(0px,3vw,56px)}
.hot-quote p:first-child::before{content:"“";margin-left:-.5em;width:.5em;display:inline-block;color:var(--red)}
.hot-quote p:last-child::after{content:"”";color:var(--red)}
.hot-quote p:first-child::before,.hot-quote p:last-child::after{font-style:italic}
.hot-statement h2{font-style:italic}.hot-statement h2::before{content:"“"}.hot-statement h2::after{content:"”"}

/* ---------- hero: "section cut" colour reveal ---------- */
/* JS eases --cut open (0 -> 220px) on enter and closed on leave */
.hot-hero{--rx:50%;--cut:0px}
.hot-hero-reveal,.hot-hero-cut{pointer-events:none}
.hot-hero-cut{opacity:var(--cut-o,0);overflow:hidden}
.hot-hero-reveal{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  clip-path:inset(0 calc(100% - var(--cr,0px)) 0 var(--cl,0px))}
.hot-hero-cut{position:absolute;top:0;bottom:0;z-index:1;left:var(--cl,0px);width:calc(var(--cr,0px) - var(--cl,0px));
  background:
    repeating-linear-gradient(180deg,#d42a1f 0 22px,transparent 22px 30px,#d42a1f 30px 34px,transparent 34px 42px) left/2px 100% no-repeat,
    repeating-linear-gradient(180deg,#d42a1f 0 22px,transparent 22px 30px,#d42a1f 30px 34px,transparent 34px 42px) right/2px 100% no-repeat}
.hot-hero-cut::before,.hot-hero-cut::after{content:"A";position:absolute;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  background:#d42a1f;color:#fff;font:700 12px/26px var(--hot-display,Helvetica,Arial,sans-serif);text-align:center}
.hot-hero-cut::before{top:14px}.hot-hero-cut::after{bottom:14px}
@media (max-width:767px),(hover:none){.hot-hero-reveal,.hot-hero-cut{display:none}}

/* ---------- breathing room: more generous spacing site-wide (desktop/tablet) ---------- */
@media (min-width:768px){
  :root{--gap:clamp(32px,3.6vw,64px);--pad:clamp(30px,3vw,52px)}
  .hot-wwd,.hot-hww{--pad:clamp(30px,3vw,52px)}
  #page{padding-top:clamp(12px,1.6vw,28px)}
  .hot-hero{margin-bottom:calc(clamp(120px,12vw,184px) + 18px)!important}
  .hot-section{margin-bottom:clamp(128px,13vw,200px)}
  .hot-sec,.hot-intro .hot-sec{margin-bottom:clamp(48px,4.5vw,72px)}
  .hot-btns{margin-top:clamp(36px,3.2vw,52px)}
  .hot-wwd + .hot-btns,.hot-av + .hot-btns{margin-top:clamp(44px,4vw,64px)}
  .hot-statement{gap:32px clamp(56px,6vw,120px)}
  .hot-feature.grid{gap:clamp(28px,2.8vw,48px)}
  .hot-hw-timeline{margin-bottom:clamp(96px,9vw,140px)}
  .hot-cta-body{padding:clamp(40px,5vw,88px)}
  #footer-sections{margin-top:clamp(40px,5vw,96px)!important}
}
@media (max-width:767px){
  .hot-section{margin-bottom:96px}
  .hot-sec,.hot-intro .hot-sec{margin-bottom:36px}
}

/* ---------- home buttons: CAD dimension string on hover ---------- */
.hot-btn.has-dim{position:relative;--dc:var(--red)}
.hot-cta-body .hot-btn.has-dim{--dc:#000}
.hot-btn.has-dim i{transform:rotate(45deg);transition:transform 450ms cubic-bezier(.2,.8,.2,1)}
.hot-dim{position:absolute;left:0;right:0;top:100%;height:48px;pointer-events:none;color:var(--dc)}
.hot-dim .ex{position:absolute;top:6px;width:1px;height:40px;background:currentColor;transform:scaleY(0);transform-origin:top;transition:transform .3s .3s cubic-bezier(.2,.8,.2,1)}
.hot-dim .ex.a{left:-1px}.hot-dim .ex.z{right:-1px}
.hot-dim .ln{position:absolute;left:-12px;right:-12px;top:34px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .45s .1s cubic-bezier(.2,.8,.2,1)}
.hot-dim .tk{position:absolute;top:28px;width:2.5px;height:13px;margin-left:-1.25px;background:currentColor;transform:rotate(45deg) scaleY(0);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.hot-dim .tk.a{left:-.5px}.hot-dim .tk.z{left:calc(100% + .5px)}
.hot-dim .lb{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:500 11px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;white-space:nowrap;opacity:0;transition:opacity .15s}
@media (hover:hover) and (pointer:fine){
  /* Do not let the invisible, future dimension area trigger the button.
     Once the real button is entered, the dimension string becomes part of
     its hover footprint so the pointer can cross into it without flicker. */
  .hot-btn.has-dim:hover .hot-dim{pointer-events:auto}
  .hot-btn.has-dim:hover .hot-dim::before{content:"";position:absolute;inset:0 -12px}
  .hot-btn.has-dim:hover,.hot-hero-foot .hot-btn.has-dim:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
  .hot-hero-foot .hot-btn.has-dim:hover{background:transparent;color:#fff;border-color:#fff}
  .hot-cta-body .hot-btn.has-dim:hover{background:#fff;color:#000;border-color:#fff}
  .hot-btn.has-dim:hover i{transform:rotate(0);color:inherit}
  .hot-cta-body .hot-btn.has-dim:hover i{color:inherit}
  .hot-btn.has-dim:hover .hot-dim .ex{transform:none;transition-delay:0s}
  .hot-btn.has-dim:hover .hot-dim .ln{transform:none;transition-delay:.12s}
  .hot-btn.has-dim:hover .hot-dim .tk{transform:rotate(45deg) scaleY(1);transition-delay:.45s}
  .hot-btn.has-dim:hover .hot-dim .lb{opacity:1;transition-delay:.2s}
}
html.blueprint .hot-btn.has-dim{--dc:#fff}
@media (max-width:767px),(hover:none){.hot-dim{display:none}}
/* hero buttons sit on the hero's bottom edge: draw their dimension above instead */
.hot-hero-foot .hot-dim{top:auto;bottom:100%;transform:scaleY(-1)}
.hot-hero-foot .hot-dim .lb{transform:translateX(-50%) scaleY(-1)}

/* ---------- icon refinements ---------- */
@media (hover:hover) and (pointer:fine){
  /* research lens: glide out and glide back (transition instead of one-way keyframes) */
  .hot-icon svg .i-lens{transition:transform 650ms cubic-bezier(.3,.7,.2,1)!important}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-lens{animation:none;transform:translate(-12px,2px) scale(1.12)}
  /* modular support: grids sit apart, click together at the dot on hover */
  .hot-icon svg .i-dock2{transform:translate(5px,5px);transition:transform 420ms cubic-bezier(.34,1.56,.64,1)!important}
  .hot-icon svg .i-pulse{transform:scale(.55);transition:transform 300ms cubic-bezier(.34,1.56,.64,1)!important}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-dock2{transform:translate(0,0)}
  :is(.hot-wwd-card,.hot-hww-card,.hot-av-addon):hover .i-pulse{animation:none;transform:scale(1);transition-delay:260ms!important}
}

/* ---------- typographic hierarchy ---------- */
/* Tier 2: titles in the display face */
.hot-wwd-body h3,.hot-av h3,.hot-hww-card h3,.hot-hw-stage-head h3,.hot-hw-h{
  font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(20px,1.7vw,24px);line-height:1.05;letter-spacing:0;margin-bottom:14px}
/* Tier 3: body copy in sentence case, softer ink */
.hot-wwd-body p,.hot-av p,.hot-hww-card p,.hot-statement p,.hot-hw-text,.proj-desc p,.hot-lede,.hot-wwd-list li,.hot-hw-list li{
  text-transform:none;letter-spacing:0;font-size:14px;line-height:1.6;color:#3a3a3a}
.hot-statement p{font-size:15px}
.hot-lede{font-size:17px}
.hot-hero-foot .hot-lede{color:rgba(255,255,255,.85)}
.hot-hw-list li{font-size:13px}
/* Tier 4: labels stay uppercase, small and grey */
.hot-num,.hot-wwd-more,.hot-hw-caption,.hot-kicker,.hf-help{color:rgba(0,0,0,.5)}
.hot-tags li{color:#3a3a3a}
/* blueprint theme: keep light ink */
html.blueprint :is(.hot-wwd-body p,.hot-av p,.hot-hww-card p,.hot-statement p,.hot-hw-text,.proj-desc p,.hot-lede,.hot-wwd-list li,.hot-hw-list li,.hot-tags li){color:rgba(255,255,255,.85)}
html.blueprint :is(.hot-num,.hot-wwd-more,.hot-hw-caption,.hot-kicker,.hf-help){color:rgba(255,255,255,.6)}
.hot-wwd--row .hot-wwd-body h3{font-size:clamp(17px,1.35vw,20px);overflow-wrap:anywhere;hyphens:auto}

/* ---------- section header bars: stronger hierarchy ---------- */
.hot-sec .ts-k{color:rgba(0,0,0,.5);opacity:1}
.hot-sec .hot-sec-kind .ts-v,.hot-sec .ts-no .ts-v{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(20px,1.8vw,26px);letter-spacing:0;line-height:1}
.hot-sec .hot-sec-scale .ts-v{color:rgba(0,0,0,.5)}
.hot-sec .hot-sec-note .ts-v{text-transform:none;letter-spacing:0;font-size:14px;line-height:1.55;color:#3a3a3a}
html.blueprint .hot-sec .ts-k,html.blueprint .hot-sec .hot-sec-scale .ts-v{color:rgba(255,255,255,.6)}
html.blueprint .hot-sec .hot-sec-note .ts-v{color:rgba(255,255,255,.85)}

/* ---------- "How to work with us": timeline board (tap/hover a stage) ---------- */
.hw-b{border:var(--rule);--pad-b:28px}
.hw-b .hwb-rows{padding:var(--pad-b) var(--pad-b) 6px}
.hw-b .hwb-row{position:relative;display:block;width:100%;background:none;border:0;padding:0 0 22px;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.hw-b .hwb-head{display:flex;align-items:flex-end;gap:12px;margin-left:var(--s);padding-bottom:8px;opacity:.4;transition:opacity .3s}
.hw-b .hwb-row.on .hwb-head,.hw-b .hwb-row:hover .hwb-head,.hw-b .hwb-row:focus-visible .hwb-head{opacity:1}
.hw-b .hwb-num{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:48px;line-height:.75;letter-spacing:-.02em;color:var(--red)}
.hw-b .hwb-h{display:block;font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:20px;line-height:1.05;margin-bottom:4px}
.hw-b .hwb-entry{display:block;font-size:10px;letter-spacing:.12em;color:var(--hot-muted)}
.hw-b .hwb-track{position:relative;display:block;height:10px;background:var(--hot-soft-2)}
.hw-b .hwb-fill{position:absolute;top:0;bottom:0;left:var(--s);width:calc(var(--e) - var(--s));background:var(--hot-muted);opacity:.45;transition:background .3s,opacity .3s}
.hw-b .hwb-row.on .hwb-fill{background:var(--ink);opacity:1}
.hw-b .hwb-row.on .hwb-fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:8px;background:var(--red)}
.hw-b .hwb-axis{margin:6px var(--pad-b) 0;height:1px;background:var(--ink);position:relative}
.hw-b .hwb-axis::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.hw-b .hwb-axl{display:flex;justify-content:space-between;margin:10px var(--pad-b) 22px;font-size:10px;letter-spacing:.14em;color:var(--hot-muted)}
.hw-b .hwb-axl em{font-style:normal;color:var(--red)}
.hw-b .hwb-panel{position:relative;border-top:var(--rule);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.hw-b .hwb-caret{position:absolute;top:-2px;height:3px;background:var(--red);left:calc(var(--pad-b) + (100% - 2 * var(--pad-b)) * var(--ps,0));width:calc((100% - 2 * var(--pad-b)) * var(--pw,.42));transition:left .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1)}
.hw-b .hwb-l{padding:var(--pad-b);border-right:var(--rule);display:flex;flex-direction:column;gap:14px}
.hw-b .hwb-l .hwb-h{font-size:clamp(22px,2vw,28px)}
.hw-b .hwb-k{font-size:10px;letter-spacing:.14em;color:var(--hot-muted);margin:0}
.hw-b .hwb-l p.d{margin:0;text-transform:none;letter-spacing:0;font-size:14px;line-height:1.6;color:#3a3a3a}
.hw-b .hwb-r{padding:var(--pad-b)}
.hw-b .hwb-r ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:var(--rule)}
.hw-b .hwb-r li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--hot-soft-2);text-transform:none;letter-spacing:0;font-size:13px;color:#3a3a3a}
.hw-b .hwb-r li span{font-size:10px;letter-spacing:.1em;color:var(--hot-muted);padding-top:2px}
.hw-b .hwb-l,.hw-b .hwb-r{transition:opacity .2s}
.hw-b.swap .hwb-l,.hw-b.swap .hwb-r{opacity:0}
html.blueprint .hw-b .hwb-l p.d,html.blueprint .hw-b .hwb-r li{color:rgba(255,255,255,.85)}
@media (max-width:1000px){.hw-b .hwb-panel{grid-template-columns:1fr}.hw-b .hwb-l{border-right:0;border-bottom:var(--rule)}}
@media (max-width:767px){.hw-b{--pad-b:16px}.hw-b .hwb-head{margin-left:0}.hw-b .hwb-num{font-size:36px}.hw-b .hwb-h{font-size:17px}.hw-b .hwb-r ul{grid-template-columns:1fr}}
.hw-b .hwb-row{text-transform:uppercase}
/* how-we-work board: same hatched drop shadow as the card groups */
.hw-b{--hs:18px;position:relative;isolation:isolate;margin-right:var(--hs);margin-bottom:var(--hs);background:var(--paper)}
.hw-b::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:var(--hs) calc(-1 * var(--hs)) calc(-1 * var(--hs)) var(--hs);background:var(--hatch-shadow)}
.hw-b::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);pointer-events:none}
@media (max-width:767px){.hw-b{--hs:10px}}

/* ---------- hero, layout A: text on the sheet, drawing framed below ---------- */
.hot-hero-top{margin:0 var(--gap) clamp(28px,3vw,52px);padding-top:clamp(8px,1.5vw,28px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 56px;align-items:end}
.hot-hero-top h1{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(48px,6.4vw,118px);line-height:.88;letter-spacing:-.025em;color:var(--ink);margin:0}
.hot-hero-side{display:flex;flex-direction:column;gap:28px;padding-bottom:4px}
.hot-hero-top .hot-lede{margin:0;max-width:46ch}
.hot-hero-top .hot-btns{margin:0}
.hot-hero{--hero-image-position:60% calc(58% + 30px);background:#fff!important;height:auto!important;aspect-ratio:16/9!important;min-height:0!important;max-height:none!important;touch-action:pan-y}
.hot-hero::before{display:none!important}
/* Register both hero files to the same box and crop. Keeping every sizing
   value in this shared rule prevents the reveal layer drifting from the base. */
.hot-hero-img,.hot-hero-reveal{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.hot-hero-img img,.hot-hero-reveal{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--hero-image-position)}
.hot-hero-img img{filter:none!important;opacity:1!important;mix-blend-mode:normal!important}
.hot-hero-grip{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#d42a1f;color:#fff;font:700 15px/40px Arial,sans-serif;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.25)}
@media (hover:none){.hot-hero-grip{display:block}}
@media (max-width:767px),(hover:none){.hot-hero-reveal,.hot-hero-cut{display:block!important}}
@media (max-width:767px){
  .hot-hero-top{grid-template-columns:minmax(0,1fr);gap:22px}
  .hot-hero-top h1{font-size:11vw}
  .hot-hero{aspect-ratio:4/3!important}
  .hot-hero-img{aspect-ratio:auto!important}
}
html.blueprint .hot-hero{background:#fff!important}

/* buttons: border always stays; extension lines grow straight out of the box corners */
.hot-btn.has-dim:hover{border-style:solid!important;border-width:1px!important}
.hot-dim .ex{top:0;height:46px}
/* contact form: same hatched drop shadow as the card groups */
.hot-form{--hs:18px;position:relative;isolation:isolate;margin-right:var(--hs);margin-bottom:var(--hs)}
.hot-form::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:var(--hs) calc(-1 * var(--hs)) calc(-1 * var(--hs)) var(--hs);background:var(--hatch-shadow)}
.hot-form::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);pointer-events:none}
@media (max-width:767px){.hot-form{--hs:10px}}
.hot-hero-top h1{font-size:clamp(44px,5.4vw,100px)}
.hot-hero-img{background:#fff!important}
@media (max-width:767px){.hot-hero-top h1{font-size:10vw}}

/* ---------- projects index: filter bar ---------- */
.pf{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.72fr) minmax(210px,.72fr);border:var(--rule);margin:0 0 clamp(28px,3vw,44px)}
.pf-g{display:flex;flex-direction:column;border-right:var(--rule);min-width:0}
.pf-g:last-child{border-right:0;margin-left:0}
.pf-k{display:block;padding:6px 14px;background:var(--head-bg,#f0f0f0);border-bottom:var(--rule);font-size:8.5px;letter-spacing:.14em;color:rgba(0,0,0,.55)}
.pf-o{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px}
.pf-b{font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.pf-b span{opacity:.5;margin-left:6px}
.pf-b:hover{background:var(--hot-soft,#f3f3f3)}
.pf-b[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.pf-b[aria-pressed="true"] span{opacity:.7}
.pf-n{padding:12px 14px;font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:22px;line-height:1.2;white-space:nowrap}
.pf-n em{font-style:normal;color:var(--red)}
.pf-reset{display:block;margin:0 14px 12px;padding:0;border:0;background:none;font:inherit;font-size:9.5px;letter-spacing:.14em;color:var(--red);cursor:pointer;text-align:left;visibility:hidden}
.pf.on .pf-reset{visibility:visible}
.card.pf-hide{display:none!important}
.card.pf-in{animation:pfIn .35s ease both}
@keyframes pfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pf-empty{display:none;padding:40px 0;font-size:12px;letter-spacing:.1em;color:rgba(0,0,0,.55)}
html.blueprint .pf-b{background:transparent}html.blueprint .pf-b[aria-pressed="true"]{background:var(--ink);color:#1c4f9c}
@media (min-width:768px) and (max-width:1100px){.pf{grid-template-columns:1fr 1fr}.pf-g{border-bottom:var(--rule)}.pf-g:nth-child(2n){border-right:0}.pf-g:nth-last-child(-n+2){border-bottom:0}}
@media (max-width:767px){.pf{grid-template-columns:1fr}.pf-g{border-right:0;border-bottom:var(--rule)}.pf-g:last-child{border-bottom:0;margin-left:0;flex-direction:row;align-items:center;justify-content:space-between}.pf-g:last-child .pf-k{display:none}.pf-reset{margin:0 14px}}
.pf{margin-left:var(--gap);margin-right:var(--gap);margin-top:calc(-1 * clamp(40px,5vw,96px))}@media (max-width:767px){.pf{margin-top:0}}
/* dimension buttons: reserve room for the dimension string while it's drawn, then give it back */
.hot-btn.has-dim{margin-bottom:0;transition:background-color 180ms ease,color 180ms ease,margin-bottom 320ms cubic-bezier(.2,.8,.2,1) 280ms}
@media (hover:hover) and (pointer:fine){.hot-btn.has-dim:hover{margin-bottom:56px;transition:background-color 180ms ease,color 180ms ease,margin-bottom 320ms cubic-bezier(.2,.8,.2,1) 0s}}
.hot-btns:has(.has-dim){align-items:flex-start}
/* red CTA block: keep the black border on hover (was switching to white = looked like it vanished) */
@media (hover:hover) and (pointer:fine){.hot-cta-body .hot-btn.has-dim:hover{border-color:#000!important}}

/* ---------- polish pass ---------- */
/* home 5-up service row: titles wrap on words, never mid-word */
.hot-wwd--row .hot-wwd-body h3{font-size:clamp(15px,1.25vw,19px);overflow-wrap:normal;word-break:normal;hyphens:manual}
/* big step numbers stay red (label-grey rule was catching them) */
.hot-num.hot-num--big{color:var(--red)}
/* projects index: filter bar sits one standard header-gap below the title bar */
.hot-section.hot-intro:has(+ .pf){margin-bottom:0}
.pf{margin-top:clamp(40px,4vw,64px)!important}
/* project pages: title block + gallery group heads get the same header hierarchy */
.proj-title .ts-name .ts-v,.proj-title .ts-no .ts-v{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(20px,1.8vw,26px);letter-spacing:0;line-height:1}
.proj-title .ts-no .ts-v{color:var(--red)}
.proj-title .ts-k{color:rgba(0,0,0,.5);opacity:1}
.g-head .g-lab{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(18px,1.5vw,22px);letter-spacing:0}
.g-head .g-count{color:rgba(0,0,0,.5)}
html.blueprint :is(.proj-title .ts-k,.g-head .g-count){color:rgba(255,255,255,.6)}

/* ---------- footer: tighter title block ---------- */
@media (min-width:768px){
  #footer-sections{margin-top:clamp(32px,4vw,72px)!important}
  #footer-sections .tb-cell{min-height:0!important;padding-bottom:10px!important;gap:8px!important}
  .tb-logo img{content:url("logo-hot.svg");max-width:180px!important;max-height:22px!important}
  html.blueprint .tb-logo img{content:url("logo-hot-bp.svg")}
  .tb-title .tb-val{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:20px;letter-spacing:0}
  .tb-sheetno{font-size:28px!important}
  .tb-contact .hot-icon-links a,.tb-contact .footer-links a{width:38px!important;height:38px!important}
  .tb-notes .tb-val{column-count:2;column-gap:48px;max-width:none!important;font-size:9px!important;line-height:1.55!important}
  .tb-notes .tb-val p,.tb-notes .tb-val{break-inside:auto}
}

/* ---------- next sheet + sheet index ---------- */
.hot-next{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:0 20px;margin:0 var(--gap) clamp(32px,4vw,64px);padding:18px 20px;border:var(--rule);color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.hot-next .hn-k{font-size:9px;letter-spacing:.14em;color:rgba(0,0,0,.5)}
.hot-next .hn-no{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(20px,1.8vw,26px);color:var(--red)}
.hot-next .hn-t{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(20px,1.8vw,26px)}
.hot-next i{font-style:normal;font-size:20px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.hot-next:hover{background:var(--ink);color:var(--paper)}.hot-next:hover .hn-k{color:rgba(255,255,255,.6)}.hot-next:hover i{transform:translateX(6px)}}
.hot-next + #footer-sections{margin-top:0!important}
.tb-index{display:none}
@media (max-width:767px){
  .hot-next{grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:14px 16px;row-gap:6px}
  .hot-next .hn-k{grid-column:1/-1}.hot-next .hn-no{display:none}.hot-next i{grid-column:2;grid-row:2}
  .tb-index{display:block;grid-column:1/-1!important;order:0!important;border-bottom:var(--rule)}
  .tb-index .tb-label{display:block;padding:6px 12px;background:var(--head-bg,#f0f0f0);border-bottom:var(--rule);font-size:8.5px;letter-spacing:.14em;opacity:1;color:rgba(0,0,0,.55)}
  .tb-ix{display:grid;grid-template-columns:1fr 1fr}
  .tb-ix a{display:flex;flex-direction:column;gap:4px;padding:14px 12px;min-height:64px;border-right:var(--rule);border-bottom:var(--rule);color:var(--ink);text-decoration:none;font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:20px;line-height:1}
  .tb-ix a:nth-child(2n){border-right:0}.tb-ix a:nth-last-child(-n+2){border-bottom:0}
  .tb-ix a span{font-family:inherit;font-size:10px;font-weight:400;letter-spacing:.12em;color:var(--red);font-stretch:normal}
  .tb-ix a[aria-current="page"]{background:var(--ink);color:var(--paper)}
}
html.blueprint .hot-next .hn-k{color:rgba(255,255,255,.6)}html.blueprint .tb-ix a[aria-current="page"]{color:#1c4f9c}
.tb-index .tb-label{margin:0!important}
.tb-notes .tb-val{column-count:auto!important;max-width:none!important}
@media (max-width:767px){.tb-logo img{content:url("logo-hot.svg");max-width:170px!important;max-height:20px!important}html.blueprint .tb-logo img{content:url("logo-hot-bp.svg")}}

/* quick nav: phones only — desktop/tablet keep the fixed header */
.hot-next{display:none}
@media (max-width:767px){.hot-next{display:grid}}

/* key-phrase highlight: red marker, draws in once when scrolled into view */
mark.hl{color:inherit;padding:0 .08em;margin:0 -.04em;background:linear-gradient(transparent 55%,rgba(212,42,31,.26) 55%) no-repeat 0 0/0% 100%;transition:background-size .9s cubic-bezier(.6,0,.2,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.hl.in{background-size:100% 100%}
html.blueprint mark.hl{background-image:linear-gradient(transparent 58%,rgba(255,230,0,.58) 58%)}
@media (prefers-reduced-motion:reduce){mark.hl{background-size:100% 100%;transition:none}}

/* ---------- footer rule audit: every shared edge is drawn once ---------- */
#footer-sections .footer-inner{border:0!important;border-top:var(--rule)!important}
#footer-sections .tb-cell{border:0!important}
#footer-sections .tb-title,
#footer-sections .tb-status,
#footer-sections .tb-scale,
#footer-sections .tb-date,
#footer-sections .tb-contact,
#footer-sections .tb-mode,
#footer-sections .tb-sheet{border-left:var(--rule)!important}
#footer-sections .tb-loc{border-top:var(--rule)!important}
#footer-sections .tb-copy,
#footer-sections .tb-size{border-top:var(--rule)!important;border-left:var(--rule)!important}
#footer-sections .tb-notes{border-top:var(--rule)!important;border-left:0!important}

/* One outer box plus one-sided dividers avoids doubled icon seams. */
#footer-sections .hot-icon-links{border:var(--rule)}
#footer-sections .hot-icon-links a{border:0!important;border-left:var(--rule)!important;margin:0!important}
#footer-sections .hot-icon-links a:first-child{border-left:0!important}

@media (min-width:768px) and (max-width:1100px){
  #footer-sections .tb-loc{grid-column:1!important;grid-row:2!important}
  #footer-sections .tb-contact{grid-column:2!important;grid-row:2!important;border-top:var(--rule)!important}
  #footer-sections .tb-mode{grid-column:3!important;grid-row:2!important;border-top:var(--rule)!important}
  #footer-sections .tb-sheet{grid-column:4!important;grid-row:2!important;border-top:var(--rule)!important}
  #footer-sections .tb-copy{grid-column:1 / 4!important;grid-row:3!important;border-left:0!important}
  #footer-sections .tb-size{grid-column:4!important;grid-row:3!important}
}

@media (max-width:767px){
  #footer-sections .tb-cell{border-left:0!important;border-top:var(--rule)!important}
  #footer-sections .tb-brand,
  #footer-sections .tb-loc{border-top:0!important}
  #footer-sections .tb-loc,
  #footer-sections .tb-sheet,
  #footer-sections .tb-mode,
  #footer-sections .tb-copy{border-left:var(--rule)!important}
  #footer-sections .tb-notes{border-left:0!important}
}

/* ---------- blueprint visibility audit ---------- */
html.blueprint{
  color-scheme:dark;
  --bp-muted:rgba(255,255,255,.76);
  --hot-muted:rgba(255,255,255,.76);
  --hot-soft:rgba(255,255,255,.08);
  --hot-soft-2:rgba(255,255,255,.2)
}
html.blueprint :is(.hot-num,.hot-wwd-more,.hot-hw-caption,.hot-kicker,.hf-help,.hot-sec .ts-k,.hot-sec .hot-sec-scale .ts-v,.pf-k,.pf-empty,.proj-title .ts-k,.g-head .g-count,.hot-next .hn-k,.tb-index .tb-label){color:var(--bp-muted)!important;opacity:1}
html.blueprint :is(.hot-wwd-body p,.hot-av p,.hot-hww-card p,.hot-statement p,.hot-hw-text,.proj-desc p,.hot-lede,.hot-wwd-list li,.hot-hw-list li,.hot-tags li,.hot-sec .hot-sec-note .ts-v,.hwb-l p.d,.hwb-r li){color:rgba(255,255,255,.9)!important}
html.blueprint :is(input,select,textarea,button){color:var(--ink)}
html.blueprint :is(input,textarea)::placeholder{color:var(--bp-muted);opacity:1}
html.blueprint :is(a,button,input,select,textarea):focus-visible{outline-color:var(--ink)!important}
html.blueprint .hot-cta-body .hot-btn{background:var(--paper);border-color:var(--ink);color:var(--ink)}
html.blueprint .pf-b{background:transparent;border-color:var(--ink);color:var(--ink)}
/* enough free space below the button: draw the dimension without pushing the page */
@media (hover:hover) and (pointer:fine){.hot-btn.has-dim.dim-fits:hover{margin-bottom:0!important}}

/* ---------- hero: B&W render feathers 100px beyond the cut + grid/level annotation ---------- */
.hot-hero{--feather:calc(150px * var(--fk,0))}
.hot-hero-bw{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:var(--hero-image-position);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--cl,0px) - var(--feather)),#000 var(--cl,0px),#000 var(--cr,0px),transparent calc(var(--cr,0px) + var(--feather)));
          mask-image:linear-gradient(90deg,transparent calc(var(--cl,0px) - var(--feather)),#000 var(--cl,0px),#000 var(--cr,0px),transparent calc(var(--cr,0px) + var(--feather)));
  opacity:var(--cut-o,0)}
.hot-hero-ann{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;transform:translateY(30px)}
.hot-hero-ann .t{font:500 11px "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;fill:#000}
.hot-hero-ann .t.r{fill:var(--red)}
.hot-hero-reveal{z-index:2}.hot-hero-cut{z-index:3}.hot-hero-fig{z-index:4}
@media (max-width:767px){.hot-hero-ann .t{font-size:22px}}
html.blueprint .hot-hero-ann g{stroke:#fff}html.blueprint .hot-hero-ann .t{fill:#fff}html.blueprint .hot-hero-ann .t.r{fill:var(--red)}
.hot-hero-ann .t{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
html.blueprint .hot-hero-ann .t{stroke:#1c4f9c}

/* BUTTONS — border always stays visible on hover; arrow rests → and turns to ↗ */
.hot-btn i{transform:rotate(45deg);transition:transform 260ms cubic-bezier(.3,.7,.2,1)}
@media (hover:hover) and (pointer:fine){
  .hot-btn:hover,html.blueprint .hot-btn:hover{border-color:var(--ink)}
  .hot-hero-foot .hot-btn:hover,html.blueprint .hot-hero-foot .hot-btn:hover{border-color:#fff}
  .hot-btn:hover i{transform:rotate(0)}
}
.hot-btn:focus-visible i{transform:rotate(0)}
@media (prefers-reduced-motion:reduce){.hot-btn i{transition:none}}

/* ---------- header: shared seam between logo and nav (no doubled line) ---------- */
@media (min-width:768px){#header .header-nav{margin-left:-1px}}
/* tablet: compact nav so every button fits */
@media (min-width:768px) and (max-width:1080px){
  #header .header-title-logo{padding:0 12px!important;flex:0 1 auto;min-width:0}
  #header .header-title-logo img{height:auto!important;max-height:18px!important;width:auto;max-width:100%}
  #header .header-nav a:not(.hot){padding:0 12px!important;font-size:11px}
  #header .header-nav a:not(.hot)::before{display:none}
  #header .header-nav a.hot{padding:0 12px!important}
}
/* mobile: Instagram stays in the bar, next to the menu toggle */
@media (max-width:767px){
  #header .header-nav{display:flex!important;align-items:stretch;margin-left:auto;gap:0}
  #header .header-nav a:not(.hot){display:none!important}
  #header .header-nav a.hot{display:flex!important;align-items:center;padding:0 14px!important;border-left:var(--rule)!important;border-right:var(--rule)}
  #header .header-nav a.hot svg{width:18px!important;height:18px!important}
  #header .mobile-nav .mn-icons{display:none!important}
}
/* footer icon group: hug the icons so the J² box stays square */
#footer-sections .hot-icon-links{width:max-content!important;align-self:flex-start!important;flex:0 0 auto!important}
#footer-sections .hot-icon-links a{flex:0 0 auto!important;aspect-ratio:1}
@media (min-width:768px) and (max-width:1080px){#header .header-title-logo{flex:0 0 auto!important}}
@media (min-width:768px) and (max-width:1080px){#header .header-title-logo img{height:18px!important;max-height:none!important;width:auto!important;max-width:none!important}}

/* (retired 2026-10-11: the tap-to-play dimension string on mobile buttons) */

/* ---------- home "Selected work": lead project full width, two below ---------- */
@media (min-width:768px){
  .hot-feature.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hot-feature .card:first-child{grid-column:1 / -1}
  .hot-feature .card:first-child .card-img{aspect-ratio:21/9!important}
  .hot-feature .card:not(:first-child) .card-img{aspect-ratio:16/9!important}
}

/* ---------- odd number of service tiles: the last one fills its row instead of sitting alone ---------- */
@container wwd (max-width:899px){
  .hot-wwd-cards>.hot-wwd-card:nth-last-child(1 of .hot-wwd-card):nth-child(odd of .hot-wwd-card){grid-column:1 / -1}
}
@container wwdrow (max-width:1099px){
  .hot-wwd--row .hot-wwd-cards>.hot-wwd-card:nth-last-child(1 of .hot-wwd-card):nth-child(3n+2 of .hot-wwd-card){grid-column:span 2}
  .hot-wwd--row .hot-wwd-cards>.hot-wwd-card:nth-last-child(1 of .hot-wwd-card):nth-child(3n+1 of .hot-wwd-card){grid-column:1 / -1}
}
@container wwdrow (max-width:719px){
  .hot-wwd--row .hot-wwd-cards>.hot-wwd-card:nth-last-child(1 of .hot-wwd-card):nth-child(3n+2 of .hot-wwd-card){grid-column:auto}
  .hot-wwd--row .hot-wwd-cards>.hot-wwd-card:nth-last-child(1 of .hot-wwd-card):nth-child(odd of .hot-wwd-card){grid-column:1 / -1}
}

/* no rubber-band bounce past the top or bottom of the sheet (macOS / iOS trackpad overscroll) */
html,body{overscroll-behavior-y:none}

/* header: WhatsApp + Instagram share one rule between them on phones */
@media (max-width:767px){#header .header-nav a.hot+a.hot{border-left:0!important}}
#header .header-nav a.hot[data-wa] svg{width:20px!important;height:20px!important}

/* mobile menu: icon in its own ruled cell at the right of each item, like the header icon cells */
#header .mobile-nav > a[data-ref]{display:flex!important;align-items:center;justify-content:space-between}
#header .mobile-nav .mn-ic{align-self:stretch;display:grid;place-items:center;width:var(--mn-ic-w,49px);margin:-18px -16px -18px 16px;box-sizing:border-box;border-left:var(--rule);flex:0 0 auto}
#header .mobile-nav .mn-ic svg{width:22px;height:22px;fill:none!important;overflow:visible}
#header .mobile-nav .mn-ic svg *{vector-effect:non-scaling-stroke;stroke-width:1px}

/* looping video laid over a still image (same 3px paper inset as the photos) */
.card-img,.g-lead .g-item{position:relative}
.hot-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:3px;box-sizing:border-box;background:var(--paper);pointer-events:none;opacity:0;transition:opacity 500ms ease}
.hot-vid.is-playing{opacity:1}
html.blueprint .hot-vid{filter:grayscale(1) contrast(1.1);mix-blend-mode:screen}
html.blueprint .card:hover .hot-vid,html.blueprint .g-item:hover .hot-vid{filter:none;mix-blend-mode:normal}


/* ---------- hero: Option 03 redline-in-the-cut grid + levels ---------- */
/* annotation sits ABOVE the colour reveal so grids/levels carry through the cut */
.hot-hero-ann.hx{z-index:3}
.hot-hero-cut{z-index:4}.hot-hero-fig{z-index:5}
.hot-hero-ann.hx text{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.hot-hero-ann.hx .hx-base line{stroke:var(--dr-pencil,#8b8e92)}
.hot-hero-ann.hx .hx-red line{stroke:#d42a1f;stroke-width:1.5px}
.hot-hero-ann.hx .hx-gb circle{fill:#fff;stroke:#121316;transition:fill .2s,stroke .2s}
.hot-hero-ann.hx .hx-gb text{font-size:15px;fill:#121316;stroke:none;transition:fill .2s}
.hot-hero-ann.hx .hx-gb.on circle{fill:#d42a1f;stroke:#d42a1f}
.hot-hero-ann.hx .hx-gb.on text{fill:#fff}
.hot-hero-ann.hx .hx-lab text{font-size:13px;fill:var(--dr-label,#66696e)}
.hot-hero-ann.hx .hx-tags{opacity:0;transition:opacity .2s}
.hot-hero-ann.hx.is-cut .hx-tags{opacity:1}
.hot-hero-ann.hx .hx-tag path{fill:#d42a1f;stroke:none}
.hot-hero-ann.hx .hx-tag rect{fill:#fff;stroke:#d42a1f}
.hot-hero-ann.hx .hx-tag text{font-size:14px;letter-spacing:.04em;fill:#d42a1f;stroke:none}
@media (max-width:767px){
  .hot-hero-ann.hx .hx-gb text{font-size:24px}.hot-hero-ann.hx .hx-gb circle{r:28px}
  .hot-hero-ann.hx .hx-lab{display:none}
  .hot-hero-ann.hx .hx-tag{transform-box:fill-box;transform-origin:0 100%;transform:scale(1.9)}
}
/* Blueprint mode: the hero drawing stays on white, so the paper colours above apply in both modes */

/* ---------- hero: bay reveal (assets/hero-bays.js) ---------- */
.hot-hero.hb{aspect-ratio:auto!important;height:auto!important}
.hb-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff;outline:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hb-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--dr-cyan,#1c4f9c)}
.hb-stage.over-bay{cursor:pointer}
.hb-col{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;object-fit:cover;object-position:var(--hero-image-position);pointer-events:none;clip-path:inset(0 100% 0 0)}
.hb-out{opacity:0}
.hb-ann{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:translateY(30px);z-index:3;overflow:visible}
.hb-ann text{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.hb-ann line,.hb-ann circle,.hb-ann rect,.hb-ann path{vector-effect:non-scaling-stroke}
.hb-ann .hb-base line{stroke:var(--dr-pencil,#8b8e92)}
.hb-ann .hb-gb circle{fill:#fff;stroke:#121316}
.hb-ann .hb-gb text{font-size:15px;fill:#121316;stroke:none}
.hb-ann .hb-lab text{font-size:13px;fill:var(--dr-label,#66696e)}
.hb-ann .hb-callout,.hb-ann .hb-dim{opacity:0;transition:opacity .2s}
.hb-ann .hb-callout.on,.hb-ann .hb-dim.on{opacity:1}
.hb-ann .hb-callout rect{fill:none;stroke:#d42a1f;stroke-width:1.5px;stroke-dasharray:10 6}
.hb-ann .hb-callout path{fill:none;stroke:#d42a1f;stroke-width:2.5px}
.hb-ann .hb-dim line{stroke:#121316}
.hb-ann .hb-dim text{font-size:14px;fill:#121316;letter-spacing:.06em}
.hb .hot-hero-fig{z-index:6}
.hb-hint{color:#ff8a80;margin-left:14px}
.hb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* title: detail bubble + name, under the drawing */
.hb-tag{position:absolute;z-index:5;display:flex;align-items:stretch;background:#fff;border:1px solid #121316;color:#121316;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.hb-tag.on{opacity:1;transform:none;pointer-events:auto}
.hb-db{display:grid;grid-template-rows:1fr 1fr;place-items:center;width:46px;height:46px;flex:0 0 46px;margin:6px;align-self:center;border:1px solid #121316;border-radius:50%;position:relative;font-size:10px;letter-spacing:.06em}
.hb-db::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#121316}
.hb-db b{font-family:var(--hot-display);font-stretch:condensed;font-weight:700;font-size:17px;letter-spacing:0;line-height:1;color:#d42a1f;align-self:end;padding-bottom:2px}
.hb-db span{align-self:start;padding-top:3px}
.hb-tx{display:flex;flex-direction:column;justify-content:center;padding:6px 12px 6px 4px;gap:3px;min-width:0}
.hb-nm{font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid #121316;padding-bottom:3px}
.hb-sub{font-size:9px;letter-spacing:.14em;color:#66696e;text-transform:uppercase}
.hb-go{display:flex;align-items:center;gap:8px;padding:0 14px;border-left:1px solid #121316;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:inherit!important;text-decoration:none!important}
.hb-go i{font-style:normal;color:#d42a1f;font-size:13px}
.hb-go:hover{background:#d42a1f;color:#fff!important}.hb-go:hover i{color:#fff}

/* key plan */
.hb-key{position:absolute;left:14px;top:14px;z-index:5;background:#fff;border:1px solid #121316;color:#121316;padding:7px 8px 8px;display:grid;gap:6px}
.hb-kt{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#66696e;display:flex;justify-content:space-between;gap:12px}
.hb-kg{display:grid;grid-template-columns:1fr 1.68fr 1fr 1.08fr .9fr;border-top:1px solid #121316;border-left:1px solid #121316}
.hb-kg button{appearance:none;border:0;border-right:1px solid #121316;border-bottom:1px solid #121316;border-radius:0;background:#fff;height:20px;min-width:22px;font:inherit;font-size:9px;letter-spacing:.06em;cursor:pointer;color:#121316;padding:0 4px;transition:background .15s,color .15s}
.hb-kg button:hover{background:var(--dr-trace,#e2eaf5)}
.hb-k0{border-right:1px solid #121316;border-bottom:1px solid #121316;background:repeating-linear-gradient(45deg,rgba(18,19,22,.25) 0 1px,transparent 1px 5px)}
.hb-kg button.on{background:#d42a1f;color:#fff}
.hb-kg button:focus-visible{outline:2px solid var(--dr-cyan,#1c4f9c);outline-offset:-2px}

/* keep the key plan in paper colours in Blueprint mode too */
.hot-hero .hb-kg button{color:#121316!important;background:#fff!important}
.hot-hero .hb-kg button:hover{background:var(--dr-trace,#e2eaf5)!important}
.hot-hero .hb-kg button.on{background:#d42a1f!important;color:#fff!important}

/* phones: 4:3 drawing, title + key in a caption bar under it */
.hb-cap{display:none}
@media (max-width:767px){
  .hb-stage{aspect-ratio:4/3}
  .hb-ann .hb-lab{display:none}
  .hb-ann .hb-gb text{font-size:26px}.hb-ann .hb-gb circle{r:30px}
  .hb .hot-hero-fig{display:block!important;font-size:9px;padding:7px 10px}
  .hb .hot-hero-fig .hb-fig-t{display:none}
  .hb-hint{margin-left:0}
  .hb-cap{display:flex;justify-content:space-between;align-items:stretch;gap:10px;border-top:1px solid #121316;background:#fff;padding:8px;min-height:74px}
  .hb-cap .hb-tag{position:static;transform:none;opacity:.25;pointer-events:none;border:0;flex:1;min-width:0}
  .hb-cap .hb-tag.on{opacity:1;pointer-events:auto}
  .hb-cap .hb-db{width:40px;height:40px;flex-basis:40px}
  .hb-cap .hb-nm{font-size:11px;white-space:normal}
  .hb-cap .hb-sub{white-space:normal}
  .hb-cap .hb-go{padding:0 10px}.hb-cap .hb-go span{display:none}
  .hb-cap .hb-key{position:static;align-self:center}
}
@media (prefers-reduced-motion:reduce){.hb-tag,.hb-ann .hb-callout,.hb-ann .hb-dim{transition:none}}

/* ---------- hero: small room tag inside the lit room (name only) ---------- */
.hot-hero .hb-tag{position:absolute;z-index:5;display:block;background:#fff;border:1px solid #121316;padding:4px 9px 3px;opacity:0;transform:translate(-50%,3px);transition:opacity .2s,transform .2s;pointer-events:none!important;white-space:nowrap}
.hot-hero .hb-tag.on{opacity:1;transform:translate(-50%,0)}
.hot-hero .hb-tag .hb-nm{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:0;padding:0;color:#121316}
@media (max-width:767px){
  .hot-hero .hb-tag{padding:2px 6px 1px}
  .hot-hero .hb-tag .hb-nm{font-size:8px;letter-spacing:.14em}
  .hb-cap{justify-content:flex-end;min-height:0}
}
@media (prefers-reduced-motion:reduce){.hot-hero .hb-tag{transition:none}}

/* ---------- hero: grid-edge highlight + solid corner tag ---------- */
.hb-ann .hb-callout rect{stroke:#d42a1f!important;stroke-width:2px!important;stroke-dasharray:none!important}
.hb-ann .hb-callout path{display:none}
.hot-hero .hb-tag{transform:none!important;background:#d42a1f;border:0;padding:0;display:flex;align-items:stretch;opacity:0;transition:opacity .2s}
.hot-hero .hb-tag.on{opacity:1}
.hot-hero .hb-tag .hb-no{font-family:var(--hot-display);font-stretch:condensed;font-weight:700;font-size:14px;line-height:1;color:#fff;padding:5px 7px 4px;border-right:1px solid rgba(255,255,255,.55)}
.hot-hero .hb-tag .hb-nm{color:#fff!important;font-size:10px;letter-spacing:.16em;padding:6px 9px 4px;line-height:1.1}
@media (max-width:767px){
  .hot-hero .hb-tag .hb-no{font-size:11px;padding:3px 5px 2px}
  .hot-hero .hb-tag .hb-nm{font-size:8px;padding:4px 6px 2px}
}

/* ---------- iPhone fixes (9 Oct) ----------
   1. Nothing may widen the page sideways: clip anything that pokes past the right edge.
   2. Form fields at 16px so iPhone Safari doesn't zoom in when you tap one
      (the zoom is what made the contact page drift sideways). */
html{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@media (max-width:767px){
  input,select,textarea{font-size:16px!important}
}

/* Keep SHEET's label band aligned with adjacent footer cells at every width. */
#footer-sections .tb-sheet{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important}
#footer-sections .tb-sheet > .tb-label{flex:0 0 auto!important}
#footer-sections .tb-sheet > .tb-val:empty{display:none}


/* Services: compact icons belong to the expanded deliverables heading. */
.hot-wwd.has-drawer .hot-wwd-top > .hot-icon{display:none}
.hot-wwd-detail-inner > div:first-child{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-content:start}
.hot-wwd-detail-inner .hot-detail-icon{grid-column:1;grid-row:1 / 3;width:48px;height:48px;margin:0}
.hot-wwd-detail-inner .hot-label,.hot-wwd-detail-title{grid-column:2}
.hot-wwd-detail-inner .hot-detail-icon svg{width:100%;height:100%;display:block}


.hot-wwd-detail[hidden]{display:none!important}
/* Icon stroke scale: detail .5px, outline 1px, emphasis 1.5px. */
.hot-icon svg :is(path,line,polyline,polygon,rect,circle,ellipse),.hot-icon svg g{stroke-width:1;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:1}
.hot-icon-links svg :is(path,line,polyline,polygon,rect,circle,ellipse),.header-nav svg :is(path,line,polyline,polygon,rect,circle,ellipse){stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:1}

/* Deliverables heading: number, title and the original animated icon stack together. */
.hot-wwd-detail-inner > div:first-child{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hot-wwd-detail-inner .hot-label{grid-column:auto;grid-row:auto;order:1}
.hot-wwd-detail-title{grid-column:auto;grid-row:auto;order:2}
.hot-wwd-detail-inner .hot-detail-icon{grid-column:auto;grid-row:auto;order:3;align-self:flex-start;width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);margin:24px 0 0}
.hot-wwd-detail-inner .hot-detail-icon svg :is(path,line,polyline,polygon,rect,circle,ellipse),.hot-wwd-detail-inner .hot-detail-icon svg g{stroke-width:1px!important;vector-effect:non-scaling-stroke}
.hot-wwd-detail .hot-detail-icon .i-ray{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:0;transform:scaleX(0);transform-origin:left center!important;transition:transform var(--hot-motion),opacity 0s!important}
@media(hover:hover) and (pointer:fine){
 .hot-wwd-detail:hover .hot-detail-icon{color:var(--red)}
 .hot-wwd-detail:hover .i-lift{transform:translateY(-4px)}
 .hot-wwd-detail:hover .i-tl{transform:translate(2px,2px)}
 .hot-wwd-detail:hover .i-tr{transform:translate(-2px,2px)}
 .hot-wwd-detail:hover .i-bl{transform:translate(2px,-2px)}
 .hot-wwd-detail:hover .i-br{transform:translate(-2px,-2px)}
 .hot-wwd-detail:hover .i-dock{transform:translate(2.5px,2.5px)}
 .hot-wwd-detail:hover .i-dock2{transform:translate(-3px,-3px)}
 .hot-wwd-detail:hover .i-plane{transform:translateX(2px)}
 .hot-wwd-detail:hover .i-ray{stroke-dashoffset:0;opacity:1;transform:scaleX(1)}
 .hot-wwd-detail:hover .i-lens{animation:hot-scan 700ms cubic-bezier(.2,.75,.25,1) both}
 .hot-wwd-detail:hover .i-turn{animation:hot-turn 520ms cubic-bezier(.2,.75,.25,1) both}
 .hot-wwd-detail:hover .i-pulse{animation:hot-pulse 360ms cubic-bezier(.2,.75,.25,1) both}
 .hot-wwd-detail:hover .i-d1{animation-delay:90ms}
 .hot-wwd-detail:hover .i-d2{animation-delay:180ms}
 .hot-wwd-detail:hover .i-stack{transform:scaleY(1.5)}
 .hot-wwd-detail:hover .i-inR{transform:translateX(1.5px)}
 .hot-wwd-detail:hover .i-inL{transform:translateX(-1.5px)}
 .hot-wwd-detail:hover .i-draw{animation:hot-draw 420ms cubic-bezier(.2,.75,.25,1) both}
}
@media(prefers-reduced-motion:reduce){.hot-wwd-detail .hot-detail-icon *{animation:none!important;transition:none!important}}