/* opening.css: the opening "Ascent" (first visit of a session) and the booking
   phone in #offer. Content is only ever hidden under html.intro (head script,
   with a 9.5 s CSS kill) or html.fx (opening.js, only once GSAP is present).
   JS off, a dead CDN and reduced motion get the static site; the phone then
   shows its final frame. */
:root{
  --mo-obsidian:#0A0A0F;
  --mo-bone:#EDE6D6;
  --mo-bone-dim:#B9B1A2;
  --mo-out:cubic-bezier(.23,1,.32,1);
  --mo-in-out:cubic-bezier(.77,0,.175,1);
  --crest-mask:url(/images/crest-master-160.webp);
  --badge-fx:.1289;--badge-fy:.0859;--badge-fw:.7383;--badge-fh:.8125;
}

/* ---------- the opening ---------- */
html:not(.intro) :is(.intro,.intro-skip){display:none}
html.intro .intro{display:block;position:fixed;inset:0;z-index:200;background:transparent;pointer-events:auto;touch-action:none;contain:strict;overflow:hidden}
html.intro-parting .intro{pointer-events:none}
html.intro .intro-half{position:absolute;left:0;right:0;height:calc(50% + 1px);background-color:var(--mo-obsidian);will-change:transform}
html.intro .intro-top{top:0;background-image:radial-gradient(70% 90% at 50% 100%,rgba(255,197,138,.055),rgba(255,197,138,.018) 45%,transparent 72%)}
html.intro .intro-bottom{bottom:0;background-image:radial-gradient(70% 90% at 50% 0%,rgba(255,197,138,.055),rgba(255,197,138,.018) 45%,transparent 72%)}
.intro-half::after{content:"";position:absolute;left:0;right:0;height:1px;opacity:0;transition:opacity .28s var(--mo-out);background:linear-gradient(90deg,transparent,rgba(201,162,75,.55) 30%,rgba(231,205,136,.8) 50%,rgba(201,162,75,.55) 70%,transparent)}
.intro-top::after{bottom:0}
.intro-bottom::after{top:0}
.intro.seam-on .intro-half::after{opacity:1}
.intro-seam{position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;opacity:0;clip-path:inset(0% 50% 0% 50%);background:linear-gradient(90deg,transparent,#C9A24B 18%,#FFF1C9 50%,#C9A24B 82%,transparent)}
.intro-seam-glow{position:absolute;left:0;right:0;top:calc(50% - 14px);height:28px;opacity:0;clip-path:inset(0% 50% 0% 50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,197,138,.5),transparent 70%)}

/* the stage: crest box (aspect 935 x 1027), its horizon line on the split */
.intro-stage{position:absolute;--ch:min(46svh,420px);--cw:calc(var(--ch) * .9104);width:var(--cw);height:var(--ch);left:calc(50% - var(--cw) / 2);top:calc(50% - var(--ch) * .5855);transform-origin:0 0}
@media (max-width:767px){.intro-stage{--ch:min(65.9vw,36svh)}}
@supports not (height:1svh){
  .intro-stage{--ch:min(46vh,420px)}
  @media (max-width:767px){.intro-stage{--ch:min(65.9vw,36vh)}}
}
.intro-svg,.intro-cast,.intro-cast-sm,.intro-spec,.intro-cast-edge{position:absolute;inset:0;width:100%;height:100%}
.intro-cast,.intro-cast-sm{display:block}
html.intro .intro-svg:not(.is-armed){visibility:hidden}
.intro-svg .csl{width:100%;height:100%;display:block;overflow:visible}
.intro-cast{clip-path:inset(100% 0% 0% 0%)}
.intro-cast-sm{opacity:0}
.intro-cast-edge{opacity:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
/* the crest alpha confines the molten line and the specular band to the crest; it
   is applied once the stage is armed, so its file never competes with the hero */
.intro-svg.is-armed ~ :is(.intro-cast-edge,.intro-spec){-webkit-mask:var(--crest-mask) center/contain no-repeat;mask:var(--crest-mask) center/contain no-repeat}
.intro-cast-edge i{position:absolute;left:0;right:0;top:-18px;height:20px;transform:translate3d(0px,0px,0px);background:linear-gradient(0deg,rgba(255,236,196,0) 0,rgba(255,238,200,.95) 1px,rgba(255,228,176,.9) 3px,rgba(255,190,110,.4) 5px,rgba(255,180,100,.12) 11px,rgba(255,180,100,0) 20px)}
.intro-spec{clip-path:inset(100% 0% 0% 0%);mix-blend-mode:screen;overflow:hidden;pointer-events:none}
.intro-spec i{position:absolute;inset:-10% 30%;background:linear-gradient(90deg,rgba(255,226,170,0) 0%,rgba(255,226,170,.08) 24%,rgba(255,232,186,.34) 41%,rgba(255,240,208,.72) 50%,rgba(255,232,186,.34) 59%,rgba(255,226,170,.08) 76%,rgba(255,226,170,0) 100%);transform:translate3d(-130%,0px,0px) skewX(-18deg)}
.intro-bloom{position:absolute;left:49.95%;top:15.38%;width:36%;aspect-ratio:1;margin:-18% 0 0 -18%;border-radius:50%;opacity:0;transform:scale(0.95);background:radial-gradient(closest-side,rgba(255,248,228,.95) 0%,rgba(255,226,170,.6) 7%,rgba(255,197,138,.24) 22%,rgba(255,197,138,.08) 50%,rgba(255,197,138,0) 100%)}

/* the construction drawing (images/crest-layers.svg, inlined) */
html.intro .intro .csl .csl-s{stroke:#D4AF37}
html.intro .intro .csl #lines .csl-s,html.intro .intro .csl #lines path{stroke-opacity:.6}
html.intro .intro .csl #frame path{stroke-opacity:.5}
.intro-svg #horizon{display:none}
html.intro .intro-svg .csl path{visibility:hidden}
html.intro .intro-svg .csl circle{opacity:0}

/* the wordmark */
.intro-word{position:absolute;left:0;right:0;top:calc(50% + min(46svh,420px) * .4145 + 3.2svh);text-align:center;font:600 clamp(13px,1.35vw,20px)/1.3 'Cormorant Garamond',Georgia,serif;letter-spacing:.42em;text-indent:.42em;color:#E4C77F;white-space:nowrap;overflow:hidden;overflow:clip;padding-block:.1em;pointer-events:none}
@media (max-width:767px){.intro-word{top:calc(50% + min(65.9vw,36svh) * .4145 + 24px)}}
@supports not (height:1svh){
  .intro-word{top:calc(50% + min(46vh,420px) * .4145 + 3.2vh)}
  @media (max-width:767px){.intro-word{top:calc(50% + min(65.9vw,36vh) * .4145 + 24px)}}
}
html.intro .intro-word:not(.is-armed){clip-path:inset(0% 0% 100% 0%)}
.intro-word .ch{display:inline-block}

/* Skip */
html.intro .intro-skip{display:inline-flex;position:fixed;left:0;right:0;margin-inline:auto;width:max-content;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));z-index:210;min-height:44px;align-items:center;padding:0 18px;border-radius:100px;border:1px solid rgba(201,162,75,.55);background:rgba(10,10,15,.6);color:#E7CD88;font:500 .72rem/1 'JetBrains Mono',monospace;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s ease,color .2s ease}
@media (hover:hover){html.intro .intro-skip:hover{border-color:rgba(231,205,136,.9);color:#FFF1C9}}
html.intro .intro-skip:focus-visible{outline:1px solid #E7CD88;outline-offset:3px}
html.intro-parting .intro-skip{pointer-events:none}

/* covered pre-states of the nav and the hero: the halves hide them, nothing is
   removed from layout or from paint (the hero only sits 14 px low). From 768 px
   the hero crest is the landing slot, so it waits at opacity 0 under the halo
   and fades in under the arriving crest. */
html.intro .nav :is(.brand-name,nav,.nav-toggle){opacity:0}
@media (min-width:1041px){html.intro .nav-links > li{transform:translate3d(0px,-10px,0px)}}
html.intro .nav .brand img{opacity:0}
@media (min-width:768px){
  html.intro .nav .brand img{transform:translate3d(0px,-10px,0px)}
  html.intro .hero-crest img{opacity:0}
}
html.intro .hero-bg-wrap{transform:scale(1.04)}
html.intro :is(.hero-eyebrow,.hero h1,.hero-sub,.hero-actions,.hero-meta){transform:translate3d(0px,14px,0px)}

/* failsafes: CSS animations beat inline styles, so these win over a stalled
   timeline at 9.5 s, and the head script ends the opening at 9.6 s (it clears
   those inline styles and drops html.intro); ?slow switches both off */
@keyframes mo-kill-hide{to{visibility:hidden;pointer-events:none}}
@keyframes mo-kill-show{to{opacity:1;transform:none;clip-path:none}}
html.intro .intro,html.intro .intro-skip{animation:mo-kill-hide 0s linear 9.5s forwards}
html.intro .nav :is(.brand-name,nav,.nav-toggle,.nav-links > li),
html.intro .nav .brand img,
html.intro .hero-bg-wrap,
html.intro :is(.hero-eyebrow,.hero h1,.hero-sub,.hero-actions,.hero-meta){animation:mo-kill-show 0s linear 9.5s forwards}
@media (min-width:768px){html.intro .hero-crest img{animation:mo-kill-show 0s linear 9.5s forwards}}
html.intro-slow :is(.intro,.intro-skip,.hero-bg-wrap,.hero-eyebrow,.hero h1,.hero-sub,.hero-actions,.hero-meta),
html.intro-slow .nav :is(.brand-name,nav,.nav-toggle,.nav-links > li,.brand img){animation:none}
@media (min-width:768px){html.intro-slow .hero-crest img{animation:none}}

/* not playing by 2.5 s, skipped before it played, or failed: the halves part by CSS */
html.intro-missed .intro{pointer-events:none}
html.intro-missed .intro-top{transform:translate3d(0,-101%,0);transition:transform .7s var(--mo-in-out)}
html.intro-missed .intro-bottom{transform:translate3d(0,101%,0);transition:transform .7s var(--mo-in-out)}
html.intro-missed :is(.intro-stage,.intro-word,.intro-seam,.intro-seam-glow,.intro-skip){opacity:0;transition:opacity .2s var(--mo-out)}
html.intro-missed .nav :is(.brand-name,nav,.nav-toggle,.nav-links > li),
html.intro-missed .nav .brand img,
html.intro-missed .hero-bg-wrap,
html.intro-missed :is(.hero-eyebrow,.hero h1,.hero-sub,.hero-actions,.hero-meta),
html.intro-missed .hero-crest img{opacity:1;transform:none;clip-path:none;transition:opacity .3s var(--mo-out),transform .5s var(--mo-out)}

/* ---------- the booking phone in #offer ----------
   From 901 px, where the tiers stand in three columns, the offer head takes
   the same three columns: the heading block spans the first two and the phone
   is centred over the third tier. 768 to 900 px (the tiers stack): the heading
   block left, the phone flush right. Below 768 px: the phone after the lead,
   before the tiers. The device is obsidian with a brass bezel in both themes;
   the static markup is its final frame. */
.offer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:44px;margin-bottom:64px}
.offer-head > .sec-head{margin-bottom:0}
.offer-phone{position:relative;isolation:isolate;justify-self:end}
@media (min-width:901px){
  .offer-head{grid-template-columns:repeat(3,1fr);column-gap:24px}
  .offer-head > .sec-head{grid-column:span 2;max-width:min(720px,calc(100% - 40px))}
  .offer-phone{justify-self:center}
}
.offer-phone::before{content:"";position:absolute;z-index:-1;inset:-6% -14%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,197,138,.10),rgba(255,197,138,.035) 55%,transparent);pointer-events:none}
html.fx .offer-phone{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.fx .offer-phone:not(.is-in){opacity:0;transform:translate3d(0px,26px,0px)}
.speed-phone{--brass:linear-gradient(180deg,#E3C98C 0%,#B8923F 46%,#8E6C2C 54%,#C9A24B 100%);position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:288px;height:560px;border:7px solid transparent;border-radius:43px;overflow:hidden;background:linear-gradient(#0D0D12,#0D0D12) padding-box,linear-gradient(135deg,#8E6C2C,#E3C98C 16%,#B8923F 36%,#6F5222 52%,#B8923F 70%,#F1DCA0 88%,#A8843A) border-box;box-shadow:inset 0 0 0 1px #000,0 0 0 1px rgba(0,0,0,.5),0 44px 70px -34px #000,0 16px 44px -24px rgba(255,197,138,.16);color:var(--mo-bone);font-family:'Space Grotesk',sans-serif;line-height:1.38;text-align:left;-webkit-font-smoothing:antialiased;content-visibility:auto}
.speed-phone::before{content:"";position:absolute;top:128px;left:calc(50% - 44px);width:88px;height:97px;background:var(--crest-mask) 50%/contain no-repeat;opacity:.1}
.speed-phone::after{content:"";position:absolute;z-index:3;inset:auto 12px 24px;height:38px;border-radius:19px;background:#16161C;box-shadow:inset 0 0 0 1px rgba(237,230,214,.09),0 -14px 18px -6px #0D0D12}
.phone-bar{flex:none;box-sizing:border-box;height:90px;padding:14px 0 0 26px;border-bottom:1px solid rgba(237,230,214,.06);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 11' fill='%23EDE6D6'%3E%3Crect y='7' width='2.6' height='3' rx='.6'/%3E%3Crect x='4' y='5' width='2.6' height='5' rx='.6'/%3E%3Crect x='8' y='3' width='2.6' height='7' rx='.6'/%3E%3Crect x='12' y='1' width='2.6' height='9' rx='.6' fill-opacity='.35'/%3E%3Crect x='19.5' y='1' width='16' height='9' rx='2.6' fill='none' stroke='%23EDE6D6' stroke-opacity='.45'/%3E%3Crect x='21.2' y='2.7' width='9.4' height='5.6' rx='1.3'/%3E%3Crect x='36.5' y='3.9' width='1.4' height='3.2' rx='.6' fill-opacity='.45'/%3E%3C/svg%3E") right 24px top 15px/37px 10px no-repeat,#101016}
.phone-time{font:500 .72rem/1 'JetBrains Mono',monospace;color:var(--mo-bone)}
.phone-bar::before{content:"";position:absolute;z-index:3;top:10px;left:calc(50% - 38px);width:76px;height:22px;border-radius:11px;background:radial-gradient(circle at 81% 50%,#26324A,#000 3.4px)}
.phone-bar::after{content:"";position:absolute;z-index:3;top:44px;left:calc(50% - 16px);width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 50% 39%,#8C8577 5px,transparent 5.5px),radial-gradient(11px 9px at 50% 92%,#8C8577 98%,transparent),#22222A;box-shadow:0 0 0 1px rgba(201,162,75,.6),0 0 0 4px #101016,0 0 0 5px rgba(201,162,75,.16)}
.phone-time::before{content:"";position:absolute;z-index:4;right:16px;bottom:28px;width:30px;height:30px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.5V6M6.5 11.5L12 6l5.5 5.5' fill='none' stroke='%231A1206' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/15px no-repeat,var(--brass)}
.phone-time::after{content:"";position:absolute;z-index:4;left:calc(50% - 48px);bottom:8px;width:96px;height:4px;border-radius:2px;background:rgba(237,230,214,.34)}
.chat{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:12px 12px 76px}
.chat-in,.chat-out{max-width:84%;margin:0;padding:9px 12px 7px;border-radius:17px;font-size:.84rem;line-height:1.38;overflow-wrap:break-word;text-wrap:pretty}
.chat-in{align-self:flex-start;border-bottom-left-radius:5px;background:#1D1D25;color:var(--mo-bone);transform-origin:0 100%}
.chat-out,.chat-typing{align-self:flex-end;border-bottom-right-radius:5px;color:#1A1206;font-weight:500;background:linear-gradient(#D8B665,#C9A24B 55%,#BF9743);box-shadow:inset 0 1px 0 rgba(255,241,201,.5);transform-origin:100% 100%}
.offer-phone .msg{display:block;font-kerning:none;font-variant-ligatures:none}
.offer-phone .msg .sp-w{display:inline-block;white-space:nowrap}
.chat time{display:block;margin-top:4px;text-align:right;font:500 .6rem/1 'JetBrains Mono',monospace;color:var(--mo-bone-dim)}
.chat-out time{color:rgba(26,18,6,.85)}
.chat-typing{display:none}
.offer-phone.is-run .chat-typing{position:absolute;top:0;right:12px;display:flex;align-items:center;gap:5px;height:32px;padding:0 13px;border-radius:16px 16px 5px;opacity:0}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:rgba(26,18,6,.7)}
.chat-card{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;padding:9px 9px 9px 14px;border-radius:14px;background:linear-gradient(#1F1F27,#18181F);box-shadow:inset 0 0 0 1px rgba(201,162,75,.42),0 12px 22px -14px #000;color:var(--mo-bone);font-size:.8rem;font-weight:500;line-height:1.25}
.chat-card-text{white-space:nowrap}
.offer-phone .tick{flex:none;box-sizing:border-box;width:28px;height:28px;padding:6px;border-radius:50%;background:linear-gradient(#EBD394,#C9A24B 52%,#A8843A);box-shadow:inset 0 1px 0 rgba(255,241,201,.6),0 2px 6px rgba(0,0,0,.5);fill:none;stroke:#1A1206;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* The faint crest sits in the empty space above the thread. The final frame
   is the thread at its highest, so the crest stays clear of the first bubble
   in every language: smaller and higher on the shorter phones, where the
   bubbles wrap to more lines. The halo stays inside the wrap's side padding. */
@media (max-width:1199px){.offer-phone::before{inset:-6% -8%}}
@media (max-width:1023px){
  .speed-phone{width:264px;height:520px}
  .speed-phone::before{top:111px;left:calc(50% - 36px);width:72px;height:79px}
}
@media (max-width:767px){
  .offer-head{grid-template-columns:minmax(0,1fr);row-gap:44px;margin-bottom:56px}
  .offer-phone{justify-self:center;width:100%;max-width:300px}
  .offer-phone::before{inset:-4% -6%}
  .speed-phone{width:100%;height:500px}
  .speed-phone::before{top:105px;left:calc(50% - 32px);width:64px;height:71px}
}
@media (max-width:359px){.chat-card{font-size:.74rem}}