/* The real brand moves into its final place; the page keeps its layout. */
.opening-brand-slot { position:relative; grid-row:1; justify-self:center; flex:0 0 auto; }
@media (min-width:761px) {
  body .opening {
    --opening-brand-height:clamp(64px,13svh,100px);
    --opening-reserve:calc(218px + var(--opening-brand-height) - 38px);
  }
  body .opening :is(.opening-brand,.opening-brand-slot) {
    width:calc(var(--opening-brand-height) * 640 / 426);
    height:var(--opening-brand-height);
  }
}
@media (min-width:1001px) and (max-width:1259px) {
  body .opening { --opening-reserve:calc(236px + var(--opening-brand-height) - 38px); }
}
@media (min-width:761px) and (max-width:1000px) {
  body .opening { --opening-reserve:calc(266px + var(--opening-brand-height) - 38px); }
}
/* Keep the logo's slot at its real aspect ratio, including the small phone size. */
@media (max-width:760px) {
  body .opening .opening-brand { width:calc(45px * 640 / 426); }
  body .opening .opening-brand-slot { width:calc(45px * 640 / 426); height:45px; }
}
@media (max-width:760px) and (max-height:690px) {
  body .opening .opening-brand { width:calc(30px * 640 / 426); }
  body .opening .opening-brand-slot { width:calc(30px * 640 / 426); height:30px; }
}
@media (max-width:760px) and (max-height:590px) {
  body .opening .opening-brand { width:calc(24px * 640 / 426); }
  body .opening .opening-brand-slot { width:calc(24px * 640 / 426); height:24px; }
}
@media (max-height:520px) and (orientation:landscape) {
  body .opening { --opening-reserve:174px; }
  body .opening .opening-brand { width:43px; height:28px; }
  body .opening .opening-brand-slot { width:43px; height:28px; }
}

/* The welcome view and compact cards share one canvas and one actual logo. */
.opening-welcome-copy { display:none; }
/* The cover has no pointer hit-testing. Any interaction skips the optional intro. */
:root { --intro-background:#fff; }
:root[data-theme="dark"] { --intro-background:#000; }
html[data-logo-boot="pending"] body::after {
  content:'';position:fixed;inset:0;z-index:100;background:var(--intro-background);pointer-events:none;
}
.logo-intro-veil { position:fixed;inset:0;z-index:100;background:var(--intro-background);pointer-events:none; }
html:is([data-logo-intro="arriving"],[data-logo-intro="waiting"],[data-logo-intro="docking"],[data-logo-intro="revealing"]) .opening-scroll { z-index:101; }
html[data-logo-scroll] .site-header { transition:opacity .55s ease-out; }
html:is([data-logo-intro="arriving"],[data-logo-intro="waiting"],[data-logo-intro="docking"],[data-logo-intro="revealing"]) .site-header { z-index:102; }
html:is([data-logo-intro="arriving"],[data-logo-intro="waiting"],[data-logo-intro="docking"]) .site-header { opacity:0;transition:none; }
html:is([data-logo-intro="arriving"],[data-logo-intro="waiting"],[data-logo-intro="docking"]) .opening-welcome-copy { opacity:0!important;visibility:hidden; }
html[data-logo-intro="revealing"] .opening-welcome-copy { animation:welcome-content-arrive .55s ease-out both; }
@keyframes welcome-content-arrive { from{opacity:0;transform:translateY(8px)}to{opacity:var(--welcome-opacity);transform:none} }
body.home-page { overflow-anchor:none; }
html[data-logo-scroll] .opening-scroll { position:relative; height:200svh; }
html[data-logo-scroll] body .opening-scroll > .opening {
  position:sticky; top:0; height:100svh; min-height:100svh;
  overflow:clip;
  --welcome-logo-width:min(68vw, calc(50svh * 640 / 426), 720px);
  --welcome-opacity:1; --compact-opacity:0; --cards-opacity:0; --cards-shift:48svh;
  isolation:isolate;
}
html[data-logo-scroll] .opening-brand {
  z-index:2; transform:var(--logo-scroll-transform,none); transform-origin:center;
  will-change:auto;
}
/* A Retina-sized render surface only scales down into the compact placeholder.
   Its grid slot remains fixed, so the six cards retain their accepted layout. */
html[data-logo-raster] body .opening .opening-brand {
  position:absolute; left:50%; top:50%;
  width:var(--welcome-logo-width); height:calc(var(--welcome-logo-width) * 426 / 640);
  margin-left:calc(var(--welcome-logo-width) * -.5);
  margin-top:calc(var(--welcome-logo-width) * -426 / 1280);
  transform:var(--logo-scroll-transform,scale(1)) scale(var(--logo-raster-scale,1));
  pointer-events:none;
}
html[data-logo-scroll="moving"] .opening-brand,
html:is([data-logo-intro="arriving"],[data-logo-intro="docking"]) .opening-brand { will-change:transform,opacity; }
html[data-logo-intro="arriving"] .opening-brand { opacity:0; }
html[data-logo-scroll] .opening-brand img { animation:none; }
html[data-logo-scroll] .opening-brand::before {
  inset:-18%; background:radial-gradient(ellipse,var(--canvas-light),transparent 72%);
}
/* The glow is painted once. Only its opacity changes; no animated blur/filter. */
html[data-logo-scroll] .opening-brand::after {
  content:'';position:absolute;inset:5%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse,#e8c48a35,transparent 70%);border-radius:50%;
  opacity:0;transition:opacity .75s ease-out;
}
html:is([data-logo-intro="arriving"],[data-logo-intro="waiting"]) .opening-brand::after { opacity:1; }
html[data-logo-scroll] body .opening > :is(h1,.opening-location) { opacity:var(--compact-opacity); }
html[data-logo-scroll] body .opening > :is(.services-grid,.opening-actions) {
  opacity:var(--cards-opacity); transform:translateY(var(--cards-shift));
}
html[data-logo-scroll] .opening-welcome-copy {
  display:flex; position:absolute; z-index:3; left:0; right:0;
  top:calc(38svh + var(--welcome-logo-width) * 426 / 1280 + 20px);
  flex-direction:column; align-items:center; gap:18px; text-align:center;
  opacity:var(--welcome-opacity); padding:0 16px;
}
body .opening .welcome-region { font:300 clamp(22px,2.2vw,30px)/1.25 var(--sans); color:var(--ink); }
.welcome-contact { display:flex; flex-direction:column; gap:3px; align-items:center; }
body .opening .welcome-name { font:italic 300 21px/1.25 var(--script); color:var(--muted); }
body .opening .welcome-phone { font:300 clamp(24px,2.4vw,32px)/1.3 var(--sans); color:var(--ink); }
body .opening .welcome-discover { display:flex; align-items:center; gap:9px; min-height:44px; font:italic 300 17px/1.3 var(--sans); color:var(--muted); }
.welcome-discover svg { width:17px; height:17px; }
@media(max-width:760px) {
  html[data-logo-scroll] body .opening-scroll > .opening { --welcome-logo-width:min(88vw, calc(50svh * 640 / 426),720px); align-content:start; }
  html[data-logo-scroll] .opening-welcome-copy { gap:14px; }
}
@media(max-height:520px) and (orientation:landscape) {
  html[data-logo-scroll] .opening-welcome-copy { top:calc(38svh + var(--welcome-logo-width) * 426 / 1280 + 8px); gap:5px; }
  body .opening .welcome-region { font-size:19px; line-height:1.15; }
  body .opening .welcome-region br { display:none; }
  body .opening .welcome-name { font-size:16px; }
  body .opening .welcome-phone { font-size:22px; }
  body .opening .welcome-discover { font-size:15px; min-height:36px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-logo-scroll] .opening-brand { will-change:auto; }
  html[data-logo-scroll] .opening-brand::after { transition:none; }
}

@media(max-width:760px) and (max-height:590px) and (orientation:portrait) {
  html[data-logo-scroll] .opening-welcome-copy { top:calc(38svh + var(--welcome-logo-width) * 426 / 1280 + 12px); gap:10px; }
  body .opening .welcome-region { font-size:20px; }
  body .opening .welcome-name { font-size:18px; }
  body .opening .welcome-phone { font-size:23px; }
}