/* Firebrick site motion & responsive layer. Content is visible by default; hiding is gated on html.js with a 1200ms failsafe (html.anim-done). */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.js .rv-left{transform:translateX(-28px)}
html.js .rv-right{transform:translateX(28px)}
html.js .rv.in,html.anim-done .rv{opacity:1;transform:none}
html.js .rule-in{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1) .1s}
html.js .rule-in.in,html.anim-done .rule-in{transform:scaleX(1)}
html.js .hero-line-inner{display:block;transform:translateY(112%);animation:fbRise .62s cubic-bezier(.22,.61,.36,1) forwards}
html.js .hero-fade{opacity:0;transform:translateY(14px);animation:fbFadeUp .5s cubic-bezier(.22,.61,.36,1) forwards}
html.anim-done .hero-line-inner,html.anim-done .hero-fade{transform:none;opacity:1;animation:none}
@keyframes fbRise{to{transform:translateY(0)}}
@keyframes fbFadeUp{to{opacity:1;transform:translateY(0)}}
.svc-card{height:100%;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius);overflow:hidden;transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s cubic-bezier(.22,.61,.36,1),background .3s cubic-bezier(.22,.61,.36,1)}
.svc-card:hover{transform:translateY(-3px);border-color:var(--brass);background:var(--surface-raised)}
.svc-img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.svc-card:hover .svc-img{transform:scale(1.04)}
.nav-mobile-btn{display:none;background:transparent;border:1px solid var(--border-hairline);border-radius:var(--radius);color:var(--limewash);min-width:44px;min-height:44px;align-items:center;justify-content:center;cursor:pointer}
.nav-mobile-panel{display:none}
@media (max-width:900px){
 .nav-desktop{display:none !important}
 .nav-mobile-btn{display:inline-flex}
 .nav-mobile-panel{display:flex}
 .g2,.g4{grid-template-columns:1fr !important}
 .hide-mobile{display:none !important}
 /* phone header: wordmark + hamburger only — Book a visit lives in the menu panel */
 header > div > div > button:not(.nav-mobile-btn){display:none !important}
 header > div{padding-left:20px !important;padding-right:20px !important}
}
@media (min-width:901px) and (max-width:1100px){.g4{grid-template-columns:1fr 1fr !important}}
/* masked hero lines must not clip descenders (g, y) — pad the mask, pull it back with margin */
.hero-line{padding-bottom:.14em !important;margin-bottom:-.14em}
/* brand lockup sizing (classes so mobile can retune without fighting inline styles) */
.brand-lockup{gap:9px !important}
.brand-crest{height:42px;width:auto;display:block}
.brand-word{font-size:24px}
.brand-sub{font-size:9px}
@media (max-width:900px){
 .brand-crest{height:34px}
 .brand-word{font-size:19px}
 .brand-sub{display:none}
 header .brand-lockup{gap:7px !important}
 /* hamburger hard right: collapse the empty centre column */
 header > div{grid-template-columns:1fr auto !important;padding:12px 18px !important}
 header > div > div:last-child{justify-self:end !important;margin-left:auto}
 /* phone type scale — the viewport fix made everything render at true size, so dial back */
 #root h1,#root h2{font-size:clamp(29px,7.6vw,40px) !important;line-height:1.12 !important}
 #root h3{font-size:20px !important}
 #root p{font-size:15.5px !important}
 #root .fb-eyebrow{font-size:11px !important}
}
/* the fireplace lives in the right third of the 16:9 frame — keep it in the phone crop */
@media (max-width:900px){
 .hero-media{object-position:90% 50% !important}
}
/* firelight breathing — pure CSS, keeps the hearth alive even when video autoplay is blocked */
.fb-flicker{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(42% 34% at 78% 72%,rgba(230,138,62,.4),rgba(230,138,62,.12) 55%,transparent 75%);
 animation:fbFlick 2.8s ease-in-out infinite}
@keyframes fbFlick{0%,100%{opacity:.32}18%{opacity:.58}37%{opacity:.4}55%{opacity:.66}76%{opacity:.38}}
@media (prefers-reduced-motion: reduce){
 .fb-flicker{animation:none;opacity:.4}
}
@media (prefers-reduced-motion: reduce){
 html.js .rv,html.js .rule-in,html.js .hero-line-inner,html.js .hero-fade{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
 .svc-card,.svc-img{transition:none !important}
 .svc-card:hover{transform:none}
 .svc-card:hover .svc-img{transform:none}
}