/* ==========================================================================
   AdVelocity  /  site.css
   Global furniture: the environment layer, navigation, buttons, the signal
   line, media treatment, footer, assistant, and the floating controls.
   ========================================================================== */

/* ==================================================== 1. THE ENVIRONMENT
   One fixed layer behind everything, so scrolling feels like moving through
   a place instead of past stacked sections. Cycles at 90s and 140s. */
.env{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}
.env__grid{
  position:absolute;
  inset:-20%;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 76% 62% at 50% 42%,#000 8%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 76% 62% at 50% 42%,#000 8%,transparent 78%);
  animation:env-drift 90s linear -22s infinite;
}
@keyframes env-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-78px,-78px,0)}
}
.env__bloom{
  position:absolute;
  left:50%;top:-10%;
  width:min(1500px,140vw);
  aspect-ratio:1/1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(227,27,35,.085) 0%,rgba(227,27,35,.032) 34%,transparent 66%);
  animation:env-breathe 140s ease-in-out -40s infinite;
}
@keyframes env-breathe{
  0%,100%{opacity:.62;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.16)}
}
.env__grain{
  position:absolute;
  inset:0;
  opacity:.4;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
/* Only the structural blocks get lifted above the environment layer. An
   earlier blanket rule here also matched the fixed elements and reset their
   position, which dropped the navigation and every floating control back
   into the document flow and pushed the whole page down. Name them instead. */
main,.site-foot{position:relative;z-index:1}

/* ======================================================= 2. SCROLL PROGRESS */
.scroll-prog{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-hot));
  z-index:1200;
  pointer-events:none;
}

/* ============================================================ 3. NAVIGATION
   Transparent over the hero, dark and condensed after scroll. */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             height var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease);
}
.site-nav.is-solid{
  height:64px;
  background:rgba(8,8,10,.9);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav-in{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.75rem;flex:none;margin-right:auto}
.brand img{
  height:clamp(26px,2.5vw,32px);
  width:auto;
  transition:height var(--dur) var(--ease);
}
.site-nav.is-solid .brand img{height:26px}

.nav-links{display:flex;align-items:center;gap:.15rem}
.nav-link{
  position:relative;
  padding:.55rem .78rem;
  font-size:1rem;
  font-weight:500;
  color:var(--text-2);
  transition:color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.nav-link:hover,.nav-link:focus-visible{color:var(--text)}
.nav-link::after{
  content:"";
  position:absolute;
  left:.78rem;right:.78rem;bottom:.24rem;
  height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--dur-fast) var(--ease);
}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--text)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}

/* The dropdown for the services family. Opens on hover and on focus. */
.nav-drop{position:relative}
.nav-drop__panel{
  position:absolute;
  top:calc(100% + .5rem);
  left:0;
  min-width:268px;
  background:rgba(12,12,15,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);
  padding:.5rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
}
.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel{opacity:1;visibility:visible;transform:none}
.nav-drop__panel a{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  padding:.6rem .7rem;
  font-size:1rem;
  color:var(--text-2);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.nav-drop__panel a:hover,.nav-drop__panel a:focus-visible{color:var(--text);background:var(--panel-2)}
.nav-drop__panel .idx{font-size:.7rem}
.nav-drop__btn::after{display:none}
.nav-drop__btn span{
  display:inline-block;
  margin-left:.34rem;
  transition:transform var(--dur-fast) var(--ease);
}
.nav-drop:hover .nav-drop__btn span,
.nav-drop:focus-within .nav-drop__btn span{transform:rotate(180deg)}

.nav-cta{display:flex;align-items:center;gap:.6rem;flex:none}

/* Mobile navigation */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;
  justify-content:center;
  flex:none;
  border:1px solid var(--line-strong);
}
.nav-toggle span{
  display:block;
  width:19px;height:1.5px;
  background:var(--text);
  position:relative;
  transition:background .18s var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:19px;height:1.5px;
  background:var(--text);
  transition:transform var(--dur-fast) var(--ease),top var(--dur-fast) var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.nav-sheet{
  position:fixed;
  inset:0;
  z-index:1090;
  background:rgba(6,6,8,.985);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:calc(var(--nav-h) + 1.4rem) var(--gutter) 2.4rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
}
.nav-sheet.is-open{opacity:1;visibility:visible;transform:none}
.nav-sheet__group{margin-bottom:1.7rem}
.nav-sheet__group > .kicker{margin-bottom:.85rem}
.nav-sheet a{
  display:flex;
  align-items:baseline;
  gap:.85rem;
  padding:.62rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--display);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
  transition:color var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease);
}
.nav-sheet a:hover,.nav-sheet a:focus-visible{color:var(--red);padding-left:.5rem}
.nav-sheet .btn{margin-top:.6rem;width:100%}

@media (max-width:1180px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-cta .btn--ghost{display:none}
}
@media (max-width:560px){
  .nav-cta .btn{display:none}
}

/* =============================================================== 4. BUTTONS */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--text);
  --btn-bd:var(--line-strong);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:.95rem 1.45rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-family:var(--body);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.005em;
  text-transform:none;
  line-height:1.1;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             transform .34s var(--ease-out);
  text-shadow:none;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .44s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:#fff;border-color:var(--red)}

.btn--primary{--btn-bg:var(--red);--btn-fg:#fff;--btn-bd:var(--red)}
.btn--primary::before{background:var(--red-hot)}
.btn--primary:hover,.btn--primary:focus-visible{color:#fff;border-color:var(--red-hot)}

.btn--ghost{--btn-fg:var(--text-2)}
.btn--small{padding:.68rem 1.05rem;font-size:.9375rem}
.btn--block{width:100%}

/* The arrow that slides on hover. */
.btn__arrow{
  display:inline-block;
  transition:transform .36s var(--ease-out);
}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(4px)}

/* Magnetic pull, desktop pointers only. Driven from JS as a CSS variable. */
@media (hover:hover) and (pointer:fine){
  .btn[data-magnetic]{
    transform:translate3d(var(--mx,0),var(--my,0),0);
  }
}

/* Text link with a drawing underline. */
.tlink{
  position:relative;
  color:var(--text);
  font-weight:500;
  padding-bottom:2px;
}
.tlink::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:100% 50%;
  transition:transform .42s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

/* ========================================================== 5. THE SIGNAL
   The site's signature element. A red trace that draws itself as you scroll,
   with a packet riding along it. */
.signal{
  position:absolute;
  pointer-events:none;
  overflow:visible;
}
.signal path{
  fill:none;
  stroke:var(--red);
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-dasharray:var(--len,1200);
  stroke-dashoffset:var(--len,1200);
  filter:drop-shadow(0 0 5px var(--red-glow));
}
.signal.is-drawn path{stroke-dashoffset:calc(var(--len,1200) * (1 - var(--draw,0)))}
.signal .packet{
  fill:#fff;
  filter:drop-shadow(0 0 6px var(--red));
  opacity:var(--packet-op,0);
}

/* A plain vertical connector between sections. */
.spine{
  position:absolute;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
  pointer-events:none;
}
.spine::after{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:3px;height:64px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--red),transparent);
  animation:spine-run 5.5s var(--ease) -1.4s infinite;
}
@keyframes spine-run{
  0%{top:-64px;opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{top:100%;opacity:0}
}

/* ================================================== 6. THE SERVICE TICKER
   Track duplicated until it comfortably exceeds the widest screen, so the
   loop never shows a gap. */
.ticker{
  position:relative;
  border-block:1px solid var(--line);
  background:var(--ink);
  padding-block:clamp(.9rem,1.7vw,1.35rem);
  overflow:hidden;
  --tick-speed:44s;
}
.ticker::before,.ticker::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:clamp(48px,10vw,190px);
  z-index:2;
  pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.marquee{display:flex;width:max-content}
.marquee__track{
  display:flex;
  align-items:center;
  flex:none;
  animation:marquee var(--tick-speed) linear infinite;
}
.ticker:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-100%,0,0)}
}
.marquee__item{
  display:inline-flex;
  align-items:center;
  gap:clamp(1.4rem,3vw,3rem);
  padding-inline:clamp(1.4rem,3vw,3rem);
  font-family:var(--display);
  font-weight:600;
  font-style:normal;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  letter-spacing:-.008em;
  text-transform:none;
  color:var(--text);
  white-space:nowrap;
}
.marquee__item::after{
  content:"";
  width:7px;height:7px;
  flex:none;
  background:var(--red);
  transform:rotate(45deg);
}
.marquee__item:nth-child(even){color:var(--text-3)}

/* ========================================================= 7. MEDIA FRAMES */
.frame{
  position:relative;
  overflow:hidden;
  background:var(--panel);
  isolation:isolate;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease-out),filter 1.1s var(--ease-out);
  filter:saturate(.72) contrast(1.12) brightness(.82);
}
.frame:hover img,a:hover .frame img{transform:scale(1.07);filter:saturate(.92) contrast(1.1) brightness(.92)}

/* The consistent brand grade over every photograph. */
.frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,8,.34) 0%,rgba(5,5,8,.05) 42%,rgba(5,5,8,.72) 100%),
    radial-gradient(ellipse 90% 70% at 50% 44%,rgba(227,27,35,.11),transparent 68%);
  mix-blend-mode:multiply;
  opacity:.92;
}
.frame--flat::after{background:linear-gradient(180deg,rgba(5,5,8,.2),rgba(5,5,8,.58))}
.frame__cap{
  position:absolute;
  left:0;bottom:0;
  z-index:2;
  padding:1rem 1.15rem;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  text-shadow:0 1px 3px rgba(5,5,10,.9);
}

/* A photo slot with no photograph yet still reads as a designed panel. */
.frame--pending{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 2px,transparent 2px 9px),
    radial-gradient(ellipse 80% 70% at 30% 20%,rgba(227,27,35,.12),transparent 62%),
    linear-gradient(150deg,var(--panel-2),var(--ink));
}
.frame--pending::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 44px;
}

.parallax{will-change:transform}

/* Aspect helpers */
.ar-16-9{aspect-ratio:16/9}
.ar-4-3{aspect-ratio:4/3}
.ar-3-4{aspect-ratio:3/4}
.ar-1-1{aspect-ratio:1/1}
.ar-21-9{aspect-ratio:21/9}

/* ============================================================== 8. PANELS */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  padding:clamp(1.5rem,2.6vw,2.4rem);
  position:relative;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease-out);
}
.panel:hover{border-color:var(--line-strong)}
.panel--quiet{background:transparent}

/* A corner tick, the technical detail that repeats across the site. */
.ticked::before,.ticked::after{
  content:"";
  position:absolute;
  width:9px;height:9px;
  border:1px solid var(--red);
  opacity:.62;
}
.ticked::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ticked::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ========================================================== 9. THE FOOTER */
.site-foot{
  border-top:1px solid var(--line);
  background:var(--ink);
  padding-block:clamp(3.2rem,6vw,5.4rem) 2rem;
  position:relative;
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));
  gap:clamp(1.8rem,3.4vw,3rem);
  padding-bottom:clamp(2.4rem,4vw,3.6rem);
  border-bottom:1px solid var(--line);
}
@media (max-width:940px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-top{grid-template-columns:minmax(0,1fr)}}
.foot-brand img{height:30px;width:auto;margin-bottom:1.15rem}
.foot-col h2{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:1.05rem;
}
.foot-col li{margin-bottom:.55rem}
.foot-col a{
  font-size:1rem;
  color:var(--text-2);
  transition:color var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease);
  display:inline-block;
}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--red);padding-left:5px}
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.6rem;
  align-items:center;
  justify-content:space-between;
  padding-top:1.7rem;
}
.foot-bottom p,.foot-bottom a{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
}
.foot-bottom a:hover,.foot-bottom a:focus-visible{color:var(--text-2)}
.foot-legal{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ================================================= 10. FLOATING CONTROLS */
.sticky-cta{
  position:fixed;
  right:clamp(1rem,2.4vw,2rem);
  bottom:clamp(1rem,2.4vw,2rem);
  z-index:1080;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.96);
  transition:opacity .42s var(--ease),transform .42s var(--ease-out),visibility .42s;
}
.sticky-cta.is-on{opacity:1;visibility:visible;transform:none}
/* The guide button owns the bottom right corner, so on wider screens the
   booking bar sits to the left of it instead of underneath it. */
@media (min-width:721px){
  .sticky-cta{right:calc(clamp(1rem,2.4vw,2rem) + 54px + .7rem)}
}
.sticky-cta .btn{
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(227,27,35,.28);
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
/* On phones the assistant owns the bottom right corner, so the booking bar
   spans the bottom edge instead of stacking on top of it. */
@media (max-width:720px){
  .sticky-cta{
    left:0;right:0;bottom:0;
    padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background:rgba(8,8,10,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .sticky-cta .btn{width:calc(100% - 62px);box-shadow:none}
}

.to-top{
  position:fixed;
  left:clamp(1rem,2.4vw,2rem);
  bottom:clamp(1rem,2.4vw,2rem);
  z-index:1080;
  width:46px;height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-strong);
  background:rgba(10,10,12,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--text-2);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .42s var(--ease),transform .42s var(--ease-out),
             visibility .42s,color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover,.to-top:focus-visible{color:var(--red);border-color:var(--red)}
@media (max-width:720px){.to-top{display:none}}

/* ================================================ 12. THE PAGE TRANSITION
   A short red wipe. Skipped for modified clicks, new tabs, downloads,
   external links and reduced motion. */
.page-veil{
  position:fixed;
  inset:0;
  z-index:1400;
  background:var(--ink);
  pointer-events:none;
  opacity:0;
  transition:opacity .2s var(--ease);
}
body.is-leaving .page-veil{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.page-veil{display:none}}

/* ========================================================= 13. ASSISTANT */
/* The container is only ever the size of the launch button. The panel is
   taken out of flow, or its hidden height would push the button up into the
   middle of the screen. */
.assistant{
  position:fixed;
  z-index:1300;
  right:clamp(1rem,2.4vw,2rem);
  bottom:clamp(1rem,2.4vw,2rem);
  width:54px;
  height:54px;
}
.assistant.is-open{width:0;height:0}
.assistant__open{
  width:54px;height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  border:1px solid var(--line-strong);
  color:var(--text);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease);
  position:relative;
}
.assistant__open:hover,.assistant__open:focus-visible{border-color:var(--red);transform:translateY(-2px)}
.assistant__open::after{
  content:"";
  position:absolute;
  top:9px;right:9px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 0 var(--red-glow);
  animation:pulse-dot 3.6s var(--ease) -1s infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(227,27,35,.5)}
  50%{box-shadow:0 0 0 7px rgba(227,27,35,0)}
}
.assistant.is-open .assistant__open{display:none}

.assistant__panel{
  position:absolute;
  right:0;
  bottom:0;
  width:min(374px,calc(100vw - 2rem));
  height:min(548px,calc(100vh - 6rem));
  display:flex;
  flex-direction:column;
  background:rgba(12,12,15,.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-strong);
  box-shadow:0 24px 70px rgba(0,0,0,.62);
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.97);
  transform-origin:100% 100%;
  transition:opacity .32s var(--ease),transform .32s var(--ease-out),visibility .32s;
}
.assistant.is-open .assistant__panel{opacity:1;visibility:visible;transform:none}
.assistant__head{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.95rem 1rem;
  border-bottom:1px solid var(--line);
  flex:none;
}
.assistant__head img{height:19px;width:auto}
.assistant__head .idx{margin-left:auto}
.assistant__close{
  width:32px;height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  border:1px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.assistant__close:hover,.assistant__close:focus-visible{color:var(--text);border-color:var(--line-strong)}
.assistant__log{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.72rem;
  scrollbar-width:thin;
}
.msg{
  max-width:88%;
  padding:.72rem .9rem;
  font-size:var(--t-xs);
  line-height:1.55;
  border:1px solid var(--line);
  animation:msg-in .38s var(--ease-out) both;
}
@keyframes msg-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.msg--bot{background:var(--panel-2);color:var(--text-2);align-self:flex-start}
.msg--bot strong{color:var(--text);font-weight:600}
.msg--me{background:var(--red);border-color:var(--red);color:#fff;align-self:flex-end}
.msg a{color:var(--red-hot);text-decoration:underline;text-underline-offset:3px}
.msg--me a{color:#fff}
.assistant__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  padding:.7rem 1rem;
  border-top:1px solid var(--line);
  flex:none;
  max-height:142px;
  overflow-y:auto;
}
.chip-btn{
  padding:.46rem .72rem;
  border:1px solid var(--line-strong);
  font-family:var(--body);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--text-2);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.chip-btn:hover,.chip-btn:focus-visible{color:#fff;background:var(--red);border-color:var(--red)}
.assistant__foot{
  padding:.6rem 1rem .8rem;
  border-top:1px solid var(--line);
  flex:none;
}
.assistant__note{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
  line-height:1.5;
}
@media (max-width:720px){
  /* Sits low until the booking bar appears, then steps up out of its way. */
  .assistant{bottom:calc(.8rem + env(safe-area-inset-bottom));right:.7rem}
  body.cta-on .assistant{bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .assistant__open{width:48px;height:48px}
  .assistant{width:48px;height:48px}
  .assistant__panel{height:min(500px,calc(100vh - 8rem))}
}

/* ================================================== 14. SHORT SCREEN GUARD
   Scroll-driven overlays that have no room simply stand down. */
@media (max-height:560px){
  .scroll-cue,.rail-mark,.to-top{display:none}
}