/* /lets-chat — hand-authored page styles (refactor Phase 1, 2026-07-05).
   Replaces the generated Framer markup 1:1; every size, colour and offset
   below is measured from the original render at 1440/1024/768/390.

   NOTE on the QA reference: the production page this replaces was blank —
   its generated root <div> carried the nav component class yg-w2UcW, so
   main.css's nav-hiding rule (display:none on .yg-w2UcW and on
   div:has(> .yg-w2UcW), which also caught #main) hid the whole page. The
   'pre-refactor' baseline captured that broken state. This rebuild was
   therefore verified against a corrected copy of the original
   (public/_orig/lets-chat-fixed — identical markup minus the stray root
   class), captured with the same harness discipline.

   Breakpoints match the site's: <810 phone, 810–1199.98 tablet, ≥1200
   desktop. The hero keeps class yg-4veble — enhance.js mounts the
   og-ambient backdrop on it and main.css owns that band's gradient. */

/* ---- fonts (verbatim from the original page's embedded CSS; files were
   already self-hosted) ---- */
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-style:normal;font-weight:712}
@font-face{font-family:"Cooper Hewitt Medium Italic";src:url("/assets/media/assets/CmwYO4gspavfqV41DaC9m6Kp9aY.woff2");font-style:normal;font-weight:708}
@font-face{font-family:"Source Sans Pro Bold";src:url("/assets/media/assets/mfJIi4ZsBj1zFYUodmv4QSL2jnU.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Source Sans Pro Regular";src:url("/assets/media/assets/alL3C3eWkOZCVYCmuhkboeZkZk.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/s/sourcesans3/v19/nwpDtKy2OAdR1K-IwhWudF-R3woAa8opPOrG97lwqF5JxCkSmg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- base ---- */
/* the generated pages ship a global border-box reset; the shared footer
   and injected pill nav are sized against it, so this page keeps it */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased}

/* ---- hero (ambient band: base gradient stack, grain and blobs all come
   from main.css/enhance.js through the yg-4veble hook class) ---- */
.lc-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;height:500px}
/* overflow:hidden mirrors the source stack, which clips the title's
   italic overhang at its own edge */
.lc-hero-stack{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;max-width:100%;overflow:hidden}
/* no max-width: below 331px the stack centres the wider title box so the
   overhang clips symmetrically, exactly like the source */
.lc-hero-title{margin:0;color:#fff;white-space:pre;
  font:normal 712 60px/1 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.lc-br-sm{display:none}

/* ---- form band: LET'S CHAT + Lark booking iframe + contact line ---- */
/* min-height, not height: the band kept the source's fixed 1000px, which
   left no room for the contact card below the 600px embed and clipped it
   against overflow:hidden. It still renders at 1000px whenever the content
   fits, so the measured desktop rhythm is unchanged. */
.lc-form{position:relative;overflow:hidden;background:#fff;min-height:1000px;
  padding:60px 120px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:40px}
.lc-h1{margin:0;max-width:100%;color:#000;white-space:pre-wrap;
  font:normal 712 50px/1 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
/* The Lark form is cross-origin: nothing on this page can read its content
   height, and Lark publishes no resize message to listen for. So the frame
   is sized to fit the whole 9-question form instead of the source's 600px,
   which turned the form into a second scrollbar nested inside the page.
   Overshooting is the safe direction — the form's background is white on a
   white band, so spare height reads as padding, while undershooting brings
   the inner scrollbar straight back.

   --lc-embed-h is the one number to tune if the studio adds or removes
   questions: raise it until the submit button sits clear of the bottom
   edge with no scrollbar, then trim until the trailing white space goes. */
.lc-embed{flex:none;width:749px;max-width:100%;height:var(--lc-embed-h,2800px)}
/* Lark bounces visitors who are not signed in through its login host, which
   cannot be framed cross-origin, so the embed renders blank for them. This
   link is the way through until the form is shared for anonymous access. */
.lc-embed-fallback{flex:none;margin:0;text-align:center;font-size:15px}
.lc-embed-fallback a{text-decoration:underline}
/* contact card. The source rendered this as a single 16px sentence on a
   fixed 1158px, white-space:pre strip — small, low-contrast against the
   600px form above it, and with a mailto target barely larger than the
   text itself. It is now a bordered card: an eyebrow line plus a
   gradient mail pill that reuses the nav CTA's brand ramp and hover
   behaviour, so the address reads as the action it is. */
.lc-contact{flex:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;width:100%;max-width:560px;
  padding:32px 36px;border-radius:20px;text-align:center;
  border:1px solid rgba(16,18,35,.1);
  background:linear-gradient(180deg,#fff,#faf8fb);
  box-shadow:0 1px 2px rgba(16,18,35,.04),0 12px 30px rgba(16,18,35,.06)}
.lc-contact-eyebrow{margin:0;color:#4a4d63;
  font:normal 400 18px/1.4 "Source Sans Pro Regular","Inter Variable",Inter,sans-serif}
/* the whole pill is the tap target (min 52px tall, well past the 24px
   WCAG 2.2 target-size floor); white on the #c8283f end of the ramp
   clears 5.4:1 */
.lc-contact-mail{display:inline-flex;align-items:center;justify-content:center;
  gap:12px;min-height:52px;padding:11px 28px;border-radius:999px;
  color:#fff;text-decoration:none;
  background:linear-gradient(100deg,var(--red),#55395f);
  background-size:170% 100%;background-position:0% 50%;
  box-shadow:0 2px 10px rgba(200,40,63,.28);
  font:normal 700 23px/1.2 "Source Sans Pro Bold","Inter Variable",Inter,sans-serif;
  transition:background-position .5s ease,box-shadow .3s ease,
             transform .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (pointer:fine){
  .lc-contact-mail:hover{background-position:100% 50%;transform:translateY(-2px);
    box-shadow:0 9px 24px rgba(200,40,63,.42),0 3px 9px rgba(85,57,95,.36)}
}
.lc-contact-mail:active{transform:translateY(0)}
.lc-contact-icon{flex:none;display:block;width:26px;height:26px}
.lc-contact-icon svg{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){
  .lc-contact-mail{transition:none}
  .lc-contact-mail:hover{transform:none}
}

/* ---- tablet 810-1199.98 ---- */
@media (min-width:810px) and (max-width:1199.98px){
  .lc-hero{height:406px}
  .lc-hero-title{font-size:48px}
  /* let the band size to its content so the taller iframe doesn't leave a
     void, and give the Lark form enough height to show the intro + first
     question + email field without cramping */
  .lc-form{min-height:0;height:auto;gap:36px}
  /* narrower frame wraps more labels onto two lines, so the same form runs
     taller than it does on desktop */
  .lc-embed{width:100%;--lc-embed-h:3100px}
}

/* ---- WeChat contact block (feature request #64). Placeholder QR + ID
   until the studio supplies the real assets — see the HTML comment in
   index.html. Its own band below the Lark form so the fixed-height form
   band is untouched. ---- */
.lc-wechat{background:#fff;padding:0 22px 80px;display:flex;flex-direction:column;
  scroll-margin-top:80px; /* #wechat anchor jumps must clear the fixed nav */
  align-items:center;text-align:center;gap:16px}
.lc-wechat-h{margin:0;color:#000;
  font:normal 712 34px/1 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.lc-wechat-p{margin:0;max-width:560px;color:#333;
  font:normal 400 16px/1.5 "Source Sans Pro Regular","Inter Variable",Inter,sans-serif}
.lc-wechat-card{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:24px;border:1px solid rgba(0,0,0,.12);border-radius:16px}
.lc-wechat-qr{display:block;width:240px;height:240px;max-width:100%}
.lc-wechat-id{margin:0;display:flex;flex-direction:column;gap:4px;color:#555;
  font:normal 400 13px/1.3 "Source Sans Pro Regular","Inter Variable",Inter,sans-serif;
  text-transform:uppercase;letter-spacing:.08em}
.lc-wechat-id-v{color:#000;font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:none}

/* ---- phone <810 ---- */
@media (max-width:809.98px){
  .lc-wechat-h{font-size:26px}
  .lc-hero-title{font-size:45px;line-height:1.4}
  .lc-br-sm{display:inline}
  /* trim the 120px of side padding (it squeezed the embed to ~200px at
     320) and let the band grow with its content instead of a fixed 1000px
     that centred everything into large voids */
  .lc-form{min-height:0;height:auto;padding:44px 22px;gap:28px}
  .lc-h1{font-size:30px}
  /* tallest of the three: at 320-390px every question label wraps */
  .lc-embed{width:100%;--lc-embed-h:3600px}
  /* card keeps its shape on a phone, just tighter and one step down in
     type so the address never overflows a 320px viewport */
  .lc-contact{padding:26px 20px;gap:14px;border-radius:18px}
  .lc-contact-eyebrow{font-size:16px}
  .lc-contact-mail{gap:10px;padding:11px 20px;
    font-size:clamp(17px,5vw,21px)}
  .lc-contact-icon{width:22px;height:22px}
}