/* /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 ---- */
.lc-form{position:relative;overflow:hidden;background:#fff;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}
.lc-embed{flex:none;width:749px;max-width:100%;height:600px}
/* the source keeps this strip a fixed 1158px wide at every viewport,
   centred and clipped by the band (flex centring clips symmetrically) */
.lc-contact{flex:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:1158px;height:117px}
.lc-contact p{margin:0;color:#000;white-space:pre;
  font:normal 400 16px/1.2 "Source Sans Pro Regular","Inter Variable",Inter,sans-serif}
/* the mail link inherits the body text look; the <em> keeps the source's
   synthetic italic slant on the address */
.lc-contact a{color:inherit;text-decoration:none;font:inherit}

/* ---- 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{height:auto;gap:36px}
  .lc-embed{width:100%;height:700px}
  .lc-contact{width:100%;max-width:100%;height:auto}
  .lc-contact p{white-space:normal;text-align:center}
}

/* ---- phone <810 ---- */
@media (max-width:809.98px){
  .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{height:auto;padding:44px 22px;gap:28px}
  .lc-h1{font-size:30px}
  /* taller iframe so the first question + email input clear the fold; the
     Lark form scrolls internally, so extra height only reveals more form */
  .lc-embed{width:100%;height:760px}
  /* the contact line was a fixed 1158px, white-space:pre strip that clipped
     at both edges on a phone — let it wrap and shrink to fit */
  .lc-contact{width:100%;max-width:100%;height:auto}
  .lc-contact p{white-space:normal;text-align:center;
    font-size:clamp(14px,4vw,16px);line-height:1.4}
}