/* ─── Self-hosted fonts (woff2) — served from our domain, cached 30d.
   font-display:swap keeps text visible during load (no invisible-text flash). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/inter-800.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/fraunces-500.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-600.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/fraunces-700.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/fraunces-500italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/fraunces-600italic.woff2") format("woff2")}

:root{
  --navy:#1A2B4A;
  --navy-2:#13213b;
  --teal:#2DB8A8;
  --teal-soft:#e6f6f3;
  --orange:#F39B2C;
  --bg:#f6f4ef;
  --paper:#ffffff;
  --ink:#1A2B4A;
  --ink-mute:rgba(26,43,74,.70);
  --line:#ece9e2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
html{width:100%}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  max-width:100vw;
  position:relative;
}

/* ─────────── Top utility bar ─────────── */
.topbar{
  background:var(--navy);
  color:#fff;
  text-align:center;
  padding:9px 16px;
  font-size:12px;
  letter-spacing:.4px;
}
.topbar .dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  background:var(--teal);margin-right:9px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(45,184,168,.7);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(45,184,168,.55)}
  70%{box-shadow:0 0 0 9px rgba(45,184,168,0)}
  100%{box-shadow:0 0 0 0 rgba(45,184,168,0)}
}

/* ─────────── Header ─────────── */
header.nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:18px 70px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{display:block;height:69px;width:auto}
@media (max-width:980px){.logo img{height:60px}}
.logo-text{font-weight:800;font-size:22px;letter-spacing:-.5px}
.logo-text .a{color:var(--navy)}
.logo-text .b{color:var(--teal)}
.lang{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:4px;font-size:12px;font-weight:600;color:var(--navy);
  display:inline-flex;align-items:center;gap:2px;
}
.lang span,.lang a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;padding:5px 10px;border-radius:999px;
  text-decoration:none;color:var(--ink-mute);
  transition:background .15s ease,color .15s ease;
}
.lang span[aria-current="page"]{background:var(--navy);color:#fff}
.lang a:hover{background:#f0ede5;color:var(--navy)}

/* ─────────── Main grid ─────────── */
main{
  max-width:1280px;margin:0 auto;
  padding:56px 70px 8px;
  display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:40px;
  align-items:stretch;
  position:relative;          /* containing block for the bottom-right photo */
}
/* Let grid columns shrink to their track — otherwise long headline words
   push the left column wider and overflow into the gap. */
main > section,main > aside{min-width:0;}
/* Chat column above the hero's cream wash so it can't tint the card's edge. */
main > aside{position:relative;z-index:2;}
@media (max-width:980px){
  main{
    grid-template-columns:minmax(0,1fr);
    /* Top 75px reveals the top-left background photo; bottom 150px opens a gap
       before the white .wide-info strip so the bottom-right photo shows. */
    padding:75px 22px 150px;gap:36px;
  }
  main > section,main > aside{min-width:0;max-width:100%}
  header.nav{padding:14px 22px}
}

/* Hero content sits on a page-coloured wash. The wash extends 40px past the
   content on every side, and that 40px band fades to transparent — so the
   corner photos tuck under the content and dissolve with no hard edge. */
.hero::before{
  content:"";
  position:absolute;
  inset:-50px;
  z-index:-1;
  pointer-events:none;
  background:var(--bg);
  -webkit-mask:
    linear-gradient(to right,  transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-composite:source-in;
  mask:
    linear-gradient(to right,  transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-composite:intersect;
}

/* ─────────── LEFT column ─────────── */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:540px;
  background:#fff;border:1px solid var(--line);
  padding:7px 14px 7px 10px;border-radius:999px;
  font-size:11px;font-weight:700;color:var(--navy);
  letter-spacing:1.4px;text-transform:uppercase;
}
.eyebrow .live{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(243,155,44,.6);animation:pulse-o 1.8s infinite;
}
@keyframes pulse-o{
  0%{box-shadow:0 0 0 0 rgba(243,155,44,.55)}
  70%{box-shadow:0 0 0 8px rgba(243,155,44,0)}
  100%{box-shadow:0 0 0 0 rgba(243,155,44,0)}
}

h1.title{
  font-family:"Fraunces",serif;font-weight:600;
  font-size:clamp(38px,4.8vw,60px);
  line-height:1.05;letter-spacing:-1px;
  margin:22px 0;color:var(--navy);
  max-width:540px;
  text-wrap:pretty;
  overflow-wrap:break-word;
  hyphens:auto;
}
@media (max-width:540px){
  h1.title{font-size:clamp(30px,9vw,42px);letter-spacing:-.6px}
}
h1 .accent{color:var(--teal);font-style:italic;font-weight:500;}
h1 .underline{display:inline-block}
h1.title .stanza{display:block}
h1.title .stanza + .stanza{margin-top:.5em}

p.lede{
  font-size:18px;line-height:1.55;color:var(--ink-mute);
  max-width:540px;margin:0 0 32px;
}
p.lede strong{color:var(--navy);font-weight:600}

/* progress chip */
.progress-wrap{
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:22px 24px;max-width:540px;
  margin-bottom:36px;
}
.progress-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;font-size:13px;
}
.progress-head .l{font-weight:600;color:var(--navy)}
.progress-head .r{color:var(--ink-mute);font-variant-numeric:tabular-nums}
.bar{
  height:8px;border-radius:999px;background:#eee9df;overflow:hidden;
  position:relative;
}
.bar i{
  display:block;height:100%;width:72%;border-radius:999px;
  background:linear-gradient(90deg,var(--teal) 0%,#1ea092 100%);
  position:relative;
}
.bar i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  animation:slide 2.4s linear infinite;
}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.progress-sub{
  margin-top:14px;font-size:12px;color:var(--ink-mute);
  display:flex;gap:18px;flex-wrap:wrap;
}
.progress-sub span b{color:var(--navy);font-weight:600}

/* what we do – chip grid */
.what-label{
  font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px;
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;max-width:540px}
.chip{
  background:#fff;border:1px solid var(--line);
  padding:10px 14px;border-radius:12px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:8px;color:var(--navy);
}
.chip .sw{width:9px;height:9px;border-radius:2px;display:inline-block}

/* Orange divider line */
.divider-wrap{
  max-width:540px;width:100%;
  display:flex;justify-content:center;
  margin:44px 0 8px;            /* fixed, consistent gap (no viewport stretch) */
  padding:0;
}
.divider-orange{
  width:96px;height:3px;border-radius:3px;
  background:var(--orange);
}

/* Reach-out invite */
.reach{max-width:540px;margin:4px 0 18px}
.reach-title{
  font-family:"Fraunces",serif;font-weight:600;
  font-size:22px;color:var(--navy);letter-spacing:-.3px;
  margin-bottom:6px;
}
.reach-sub{
  font-size:14.5px;line-height:1.55;color:var(--ink-mute);
}

/* socials */
.social-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.social-label{font-size:13px;color:var(--ink-mute);font-weight:500;margin-right:4px}
.social{
  width:46px;height:46px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;text-decoration:none;
  background:#fff;border:1px solid var(--line);color:var(--navy);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease;
}
.social:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(26,43,74,.35);border-color:#d0ccc1}
.social.ig:hover{color:#E1306C;border-color:#E1306C}
.social.fb:hover{color:#1877F2;border-color:#1877F2}
/* Inline "open chat" social button — mobile only (desktop has the side card).
   Uses a button reset so it matches the <a> socials exactly. */
.social.chat-open{display:none;padding:0;cursor:pointer;font:inherit}
.social.chat-open:hover{color:var(--teal);border-color:var(--teal)}
@media (max-width:980px){ .social.chat-open{display:flex} }

/* ─────────── RIGHT column — contact card / chat ─────────── */
.card{
  background:#fff;border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(26,43,74,.28);
  position:sticky;top:24px;
  /* Grow with content, but never exceed the viewport — so the panel stays
     pinned while scrolling instead of running off the bottom. */
  display:flex;flex-direction:column;
  max-height:calc(100vh - 48px);
}
.card-head{
  background:var(--navy);color:#fff;padding:22px 26px 20px;
  position:relative;overflow:hidden;
}
/* Diagonal hairlines, split into two interleaved sets that fade in opposite
   vertical directions: odd lines fade top→bottom, even lines bottom→top. */
.card-head::before,
.card-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.card-head::before{   /* odd lines — fade top → bottom */
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.20) 0 1px, transparent 1px 28px);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent);
          mask-image:linear-gradient(to bottom, #000, transparent);
}
.card-head::after{    /* even lines — fade bottom → top */
  background-image:repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.20) 14px 15px, transparent 15px 28px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000);
          mask-image:linear-gradient(to bottom, transparent, #000);
}
.card-head .kicker{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  opacity:.75;font-weight:700;margin-bottom:6px;
}
.card-head h2{
  font-family:"Fraunces",serif;font-weight:600;font-size:26px;
  margin:0;line-height:1.15;letter-spacing:-.3px;
}
.card-head h2 em{color:var(--teal);font-style:italic;font-weight:500;}

form{padding:24px 26px 26px;display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0}
.field{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.field[hidden]{display:none}
.field label{
  font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink-mute);
}
.field label[hidden]{display:none}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:14px;color:var(--navy);
  border:1px solid var(--line);background:#fcfaf5;
  border-radius:10px;padding:11px 13px;outline:none;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
  resize:none;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 4px rgba(45,184,168,.14);
}
.field textarea{min-height:100px;transition:min-height .2s ease}

.submit{
  margin-top:6px;flex-shrink:0;
  background:var(--navy);color:#fff;border:0;
  padding:14px 16px;border-radius:12px;
  font-weight:700;font-size:14.5px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 26px -12px rgba(26,43,74,.55);
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease;
}
.submit:hover{transform:translateY(-1px);box-shadow:0 16px 32px -14px rgba(26,43,74,.65);background:#0f1d36}
.submit:disabled{transform:none;cursor:not-allowed}

.alt{margin-top:6px;flex-shrink:0;text-align:center;font-size:12px;color:var(--ink-mute)}
.alt[hidden]{display:none}

/* ─────────── Chat thread ─────────── */
.chat-thread{
  background:#fcfaf5;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  /* Scrolls internally past this height. */
  max-height:300px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
}
.chat-thread[hidden]{display:none}
.chat-status{
  font-size:11px;color:var(--ink-mute);
  text-align:center;
  padding:6px 8px;
  background:#fff;border:1px dashed var(--line);
  border-radius:8px;
  align-self:center;
}
.bubble{display:flex;flex-direction:column;max-width:88%}
.bubble-body{
  font-size:14px;line-height:1.45;color:var(--navy);
  padding:9px 12px;border-radius:12px;
  word-wrap:break-word;white-space:pre-wrap;
}
.bubble-meta{
  font-size:10.5px;letter-spacing:.3px;color:var(--ink-mute);
  margin-top:3px;padding:0 4px;
}
.bubble-client{align-self:flex-end;align-items:flex-end}
.bubble-client .bubble-body{
  background:var(--navy);color:#fff;border-bottom-right-radius:4px;
}
/* Translation of the client's own message into the page language (FR/EN). */
.bubble-self-tr{
  margin-top:6px;padding-top:5px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:11.5px;font-style:italic;color:rgba(255,255,255,.7);
}
.bubble-client .bubble-meta{text-align:right}
.bubble-operator{align-self:flex-start;align-items:flex-start}
.bubble-operator .bubble-body{
  background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;
}

/* Idle warning bubble — text + countdown + "I'm here" button */
.bubble.is-idle-warn .bubble-body{
  font-style:normal;display:flex;flex-direction:column;gap:8px;align-items:stretch;
}
.idle-count{
  font-size:12px;color:var(--orange);font-weight:700;
  font-variant-numeric:tabular-nums;text-align:center;
}
.idle-btn{
  background:var(--navy);color:#fff;border:0;border-radius:10px;
  padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background .15s ease;
}
.idle-btn:hover{background:#0f1d36}
.bubble-system{align-self:center;max-width:94%}
.bubble-system .bubble-body{
  background:var(--teal-soft);color:var(--navy);
  font-size:13px;font-style:italic;
  border-bottom-left-radius:12px;border-bottom-right-radius:12px;
}
.bubble-system .bubble-meta{display:none}

/* Conversation-ended notice — a clear terminal separator. */
.bubble.is-ended{
  align-self:stretch;max-width:100%;align-items:center;
  border-top:1px solid var(--line);
  margin-top:12px;padding-top:16px;
}
.bubble.is-ended .bubble-body{
  background:#efece6;color:var(--ink-mute);
  border:1px solid var(--line);border-radius:12px;
  font-style:normal;font-size:12.5px;line-height:1.45;text-align:center;
  white-space:pre-line;            /* render the \n between sentences */
  max-width:92%;
}
.bubble.is-ended .bubble-body::before{content:"🔒  "}
.bubble.is-ended .bubble-meta{display:none}

/* ─────────── Queue banner ─────────── */
.queue-banner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:10px;
  background:rgba(243,155,44,.12);
  border:1px solid rgba(243,155,44,.35);
  color:var(--navy);font-size:13px;
  margin-bottom:8px;
}
.queue-banner[hidden]{display:none}
.queue-banner .qb-icon{font-size:16px}
.queue-banner .qb-text b{font-size:15px;color:var(--orange)}

/* ─────────── Leave-contact form ─────────── */
.leave-contact-form{
  padding:24px 26px 26px;display:flex;flex-direction:column;gap:14px;
}
.leave-contact-form[hidden]{display:none}
.leave-contact-form .lc-intro{
  font-size:14px;line-height:1.55;color:var(--ink-mute);
  background:rgba(45,184,168,.08);border-left:3px solid var(--teal);
  padding:10px 12px;border-radius:8px;
}
.leave-contact-form .lc-error{
  color:#c44;font-size:13px;padding:6px 10px;background:rgba(196,68,68,.08);border-radius:8px;
}
.leave-contact-form .submit{margin-top:6px}

/* ─────────── FAB unread badge ─────────── */
.chat-fab{position:relative}
.fab-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:22px;height:22px;border-radius:11px;
  background:var(--teal-soft);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  padding:0 6px;box-sizing:border-box;
  box-shadow:0 4px 10px -2px rgba(26,43,74,.35);
  animation:pulse-badge 1.6s ease-in-out infinite;
}
@keyframes pulse-badge{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* System-info bubbles get a slightly different look */
.bubble.is-system-info .bubble-body{
  background:#fff;border:1px dashed var(--teal);
  color:var(--navy);font-style:italic;
}

/* Waiting bubble with live countdown */
.bubble.is-waiting .bubble-body{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.countdown-row{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--navy);
  background:rgba(45,184,168,.16);
  padding:5px 10px;border-radius:8px;
  font-variant-numeric:tabular-nums;
  font-style:normal;
}
.countdown-icon{font-size:14px;line-height:1}
.countdown-label{opacity:.8;font-weight:500}
.countdown{font-weight:700;letter-spacing:.2px}

/* ─────────── Footer ─────────── */
footer{
  background:var(--navy);color:#fff;padding:36px 70px 28px;
  margin-top:0;
}
.foot-inner{
  max-width:1280px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;font-size:12px;
}
.foot-inner .l{opacity:.7}
.foot-inner .r{display:flex;gap:18px;opacity:.85}
.foot-inner .r a{color:#fff;text-decoration:none}
.foot-inner .r a:hover{color:var(--teal)}

/* Email pill above the form */
.email-pill{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:14px 16px 14px 14px;
  margin-bottom:14px;text-decoration:none;color:var(--navy);
  box-shadow:0 18px 40px -30px rgba(26,43,74,.35);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.email-pill:hover{
  transform:translateY(-2px);border-color:var(--teal);
  box-shadow:0 22px 50px -28px rgba(26,43,74,.45);
}
.email-pill .ico{
  flex-shrink:0;width:44px;height:44px;border-radius:12px;
  background:var(--teal-soft);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.email-pill .txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.email-pill .txt .k{
  font-size:10.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:3px;
}
.email-pill .txt .v{
  font-size:17px;font-weight:700;letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.email-pill .arrow{
  margin-left:auto;opacity:.4;flex-shrink:0;
  transition:transform .15s ease,opacity .15s ease,color .15s ease;
}
.email-pill:hover .arrow{transform:translateX(3px);opacity:1;color:var(--teal)}

/* Full-width info strip */
.wide-info{
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:56px 70px;
  /* Sit above the hero's cream wash so it can't bleed onto the white strip
     when the layout is short (e.g. 15" screens). */
  position:relative;z-index:2;
}
.wide-inner{
  max-width:1280px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.lede-wide{
  font-size:20px;line-height:1.55;color:var(--ink-mute);
  max-width:none;margin:0 0 10px;
}
.lede-wide:last-of-type{margin-bottom:36px}
.lede-wide strong{color:var(--navy);font-weight:600}
.what-label-wide{margin-bottom:18px}
.chips-wide{justify-content:center;max-width:none;margin-bottom:0}
@media (max-width:980px){
  .wide-info{padding:40px 22px}
  .lede-wide{font-size:17px}
}

/* Background blob */
.bg-deco{
  position:absolute;
  right:-160px;top:-40px;
  width:520px;height:520px;
  background:radial-gradient(circle at center,rgba(45,184,168,.18) 0%,transparent 60%);
  pointer-events:none;z-index:0;
  filter:blur(8px);
}
@media (max-width:980px){.bg-deco{display:none}}

/* Corner background images — natural aspect ratios, anchored to the corners.
   Both photos fade into a light background that blends with the page. */
.bg-corner{
  position:fixed;
  z-index:-1;
  pointer-events:none;
  background-repeat:no-repeat;
}
.bg-corner-left{
  top:0;left:0;
  height:100vh;
  aspect-ratio:3712/4608;        /* portrait */
  background-image:url("/images/background-left.webp");
  background-position:left top;
  background-size:contain;
}
/* Bottom-right photo — pure CSS. A zero-height sticky anchor lives at the very
   bottom of .hero-zone (which ends exactly where the white strip begins). The
   anchor sticks to the viewport bottom while scrolling, and once the white
   strip reaches it, it's clamped to the zone's bottom — so the photo rides UP
   on the strip and is always visible. The picture is an absolute child, so it
   adds no layout height. */
.hero-zone{position:relative}
.cr-anchor{
  position:sticky;
  bottom:0;
  height:0;
  z-index:-1;
  pointer-events:none;
}
.cr-pic{
  position:absolute;
  right:0;bottom:0;
  height:65vh;
  aspect-ratio:3174/2100;        /* landscape */
  background:url("/images/background-right.webp") right bottom/contain no-repeat;
}
/* On mobile the viewport is narrow, so sizing by height clips the photo's
   sides. Size it by the full screen width instead — height follows the
   aspect-ratio — so the whole landscape image fits across the bottom. */
@media (max-width:980px){
  .cr-pic{
    width:120vw;height:auto;
    aspect-ratio:3174/2100;
    background-size:contain;
  }
}

@media (prefers-reduced-motion: reduce){
  .topbar .dot,.eyebrow .live,.bar i::after{animation:none}
}

/* ─────────── Mobile chat FAB + modal overlay ─────────── */
.chat-fab,
.chat-backdrop{display:none}
.chat-close{display:none}

@media (max-width:980px){
  .chat-fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0));
    width:60px;height:60px;border-radius:50%;
    background:var(--orange);color:#fff;border:0;
    box-shadow:0 14px 30px -10px rgba(243,155,44,.55);
    cursor:pointer;z-index:100;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  }
  .chat-fab:hover,.chat-fab:active{transform:translateY(-2px);background:#e08a1e;box-shadow:0 18px 36px -10px rgba(243,155,44,.65)}
  .chat-fab svg{display:block}

  /* Hide the inline contact card on mobile — opens via FAB. */
  main > aside{display:none}

  /* Scroll lock: position:fixed on body (preserves visual scroll position
     while preventing iOS rubber-band scroll). JS sets `top: -<scrollY>px`. */
  body.has-chat-open{
    position:fixed;left:0;right:0;width:100%;
    overflow:hidden;touch-action:none;
  }

  body.has-chat-open .chat-backdrop{
    display:block;position:fixed;inset:0;
    background:rgba(13,29,66,.55);backdrop-filter:blur(2px);
    z-index:90;animation:fade-in .18s ease both;
  }
  @keyframes fade-in{from{opacity:0}to{opacity:1}}

  body.has-chat-open main > aside{
    display:flex;align-items:flex-end;justify-content:center;
    position:fixed;inset:0;z-index:95;
    padding:0;pointer-events:none;
  }
  body.has-chat-open .card{
    position:static;width:100%;max-height:92vh;display:block;
    pointer-events:auto;
    border-radius:18px 18px 0 0;
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.45);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    animation:slide-up .22s ease both;
  }
  /* On mobile the whole card scrolls — avoid a nested scroll in the thread. */
  body.has-chat-open .chat-thread{max-height:none;overflow:visible}
  @keyframes slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

  /* Close button is rendered inside `.card-head` (top right corner). */
  body.has-chat-open .chat-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:12px;right:12px;
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;border:0;
    cursor:pointer;z-index:5;
  }
  body.has-chat-open .chat-close:hover,
  body.has-chat-open .chat-close:active{background:rgba(255,255,255,.3)}

  body.has-chat-open .chat-fab{display:none}

  /* Inside the modal card, the textarea uses the full available height. */
  body.has-chat-open .field textarea{min-height:120px}
}