/* REV5 additions (copied to site/rev5.css by build/rebrand.py). Wordmark aspect = 987/253 (viewBox of broosh-wordmark-coral.svg). */

/* ── loader ─────────────────────────────────────────────────────────────── */
#broosh-loader{position:fixed;inset:0;z-index:10000;background:#F7F1E6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;perspective:600px;transition:opacity .6s ease,visibility .6s ease}
#broosh-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
#broosh-loader img{width:72px;height:auto;animation:broosh-spin 1.6s linear infinite;backface-visibility:visible}
#broosh-loader .pct{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.04em;color:#16130F;font-variant-numeric:tabular-nums;min-width:4ch;text-align:center}
@keyframes broosh-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){#broosh-loader img{animation:none}}
html.is-loading,html.is-loading body{overflow:hidden}

/* ── hero wordmark (colour = background-color, shape = mask) ───────────── */
#hero-wordmark{position:absolute;z-index:5;pointer-events:none;background-color:#FF5A36;aspect-ratio:987/253;
  -webkit-mask:url(/broosh-wordmark-coral.svg) 0 0/100% 100% no-repeat;mask:url(/broosh-wordmark-coral.svg) 0 0/100% 100% no-repeat}

/* desktop ≥1024: vertical, reads bottom→top, length = viewport height, flush right.
   Pre-rotation box: width = 100vh (length), height = 100vh·253/987; rotate(-90deg) about its top-left corner,
   which sits at (right edge − thickness, bottom edge) → visual box spans x∈[100%−T,100%], y∈[0,100vh]. */
@media (min-width:1024px){
  #hero-wordmark{width:100vh;left:calc(100% - 100vh * 253 / 987);top:100%;transform-origin:0 0;transform:rotate(-90deg)}
}
/* mobile + tablet <1024: horizontal, full width, bottom; headline sits above it */
@media (max-width:1023.98px){
  #hero-wordmark{left:0;bottom:0;width:100%}
  #hero-text{bottom:calc(100vw * 253 / 987 + 16px)!important}
  #hero-headline{font-size:26px!important}
  #project-content{padding-bottom:calc(100vw * 253 / 987)}
}

/* ── tap targets ≥44px without moving anything ─────────────────────────── */
#menu-btn,#menu-close,.agent-btn,#site-footer nav a{position:relative}
#menu-btn::before,#menu-close::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.agent-btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
#site-footer nav a::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}


/* ── menu: secondary links small, at the bottom ─────────────────────────── */
#menu-panel .menu-secondary{padding-top:20px;padding-bottom:12px;gap:10px}
#menu-panel .menu-secondary-link{font-size:12px}

/* ── REV6 ───────────────────────────────────────────────────────────────── */
/* Get in touch: round icon button */
.agent-btn.broosh-cta.header-link{padding:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
/* header: no dark pill on scroll; slides away inside a section, returns at the next section / on scroll up */
#header-pill .pill-glass{display:none!important}
#site-header{transition:translate .45s cubic-bezier(.2,.7,.2,1)}
#site-header.broosh-away{translate:0 -120%}
/* mobile/tablet: headline small, on the left beside the neck (neck ≈ 39% of hero height; free width = half screen − 2.7vh offset of the neck from centre) */
@media (max-width:1023.98px){
  #hero-text{top:39%!important;bottom:auto!important;left:16px!important;right:auto!important}
  #hero-headline{font-size:clamp(10px,calc((50vw - 2.7vh - 32px) / 10.5),17px)!important}
}

/* ── REV8: hero kicker ─────────────────────────────────────────────────── */
#hero-text{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;gap:14px!important}
#hero-aside{color:#FF5A36;font-size:32px;margin:0}
@media (max-width:1023.98px){
  #hero-headline{display:none}
  #hero-aside{color:rgba(22,19,15,.72);max-width:8.4em;font-size:clamp(10px,calc((50vw - 2.7vh - 32px) / 10.5),17px)}
}
/* desktop: while the vertical wordmark is on screen, pull the header in so the icon never sits on it */
@media (min-width:1024px){
  #header-pill{transition:max-width .4s ease}
  #site-header.broosh-at-hero #header-pill{max-width:calc(100vw - 2 * (100vh * 253 / 987 + 24px))!important}
}