@font-face {
    font-family: 'Mabrick Signature';
    src: url('../assets/fonts/Mabrick-Signature.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  :root{
    --cream:#ece8e4;
    --paper:#f5f3ef;
    --stripe:#dfdbd8;
    --ink:#1c1c1c;
    --coral:#ff5a4f;
    --grey:#8c847c;
    --line: rgba(28,28,28,0.14);
    --line-onDark: rgba(236,232,228,0.16);
    --maxw: 1200px;
    --canvas: 1440px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html{
    background-color:#1C1C1C;
  }
  body{
    background-color:#1C1C1C;
  }
  body{
    margin:0;
    color:var(--ink);
    font-family:'Instrument Sans', sans-serif;
    font-size:18px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* ---------- PAGE CANVAS: hard-caps the whole layout at 1440px so
     viewport-relative/full-bleed elements (decor circles, script labels,
     100vw banners) stop drifting apart from the .wrap content on wide
     screens. Everything outside this canvas shows the #1C1C1C page background. ---------- */
  .page-canvas{
    position:relative;
    max-width:var(--canvas);
    margin:0 auto;
    overflow-x:hidden;
    background-color:var(--paper);
    background-image:url('../assets/bg.webp');
    background-repeat:repeat-y;
    background-size:100% auto;
  }
  h1,h2,h3{
    font-family:'Manrope', sans-serif;
    font-weight:800;
    line-height:1.12;
    margin:0;
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 0px; position:relative; z-index:2;}
  .script{font-family:'Mabrick Signature', cursive; font-weight:400;}
  .eyebrow{
    font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--grey); font-weight:600;
  }
  .eyebrow.on-dark{color:rgba(236,232,228,0.55);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; background:var(--coral); color:var(--ink);
    font-weight:700; font-size:14px; letter-spacing:0.03em; text-transform:uppercase;
    border-radius:2px; border:none; transition:transform .15s ease, background .15s ease;
  }
  .btn:hover{background:#ff7166; transform:translateY(-1px);}
  .btn:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}
  .btn.ghost{background: rgba(255, 90, 79, 0.1);
    border: 1.5px solid var(--coral);
    color: var(--paper);
    font-size: 22.75px;
    border-radius: 0 !important;
    width: 236px;
    padding: 0;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;}
  .btn.ghost:hover{background:var(--coral); color:var(--ink);}
  section{position:relative;}

  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-group .reveal:nth-child(1){transition-delay:0s;}
  .reveal-group .reveal:nth-child(2){transition-delay:.08s;}
  .reveal-group .reveal:nth-child(3){transition-delay:.16s;}
  .reveal-group .reveal:nth-child(4){transition-delay:.24s;}
  .reveal-group .reveal:nth-child(5){transition-delay:.32s;}
  .reveal-group .reveal:nth-child(6){transition-delay:.4s;}

  /* ---------- HEADER ---------- */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    max-width:var(--canvas); margin:0 auto;
    background:rgba(28,28,28,0.5); backdrop-filter:blur(4px);
    border-bottom:1px solid rgba(184,174,168,0.5);
  }
  .header-inner{
    max-width:var(--maxw); margin:0 auto; padding:0 0px; height:64px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo img{height:22px; width:auto; display:block;}
  nav.main-menu{display:flex; gap:30px;margin-right: 20px;}
  nav.main-menu a{font-size:13.5px; font-weight:600; opacity:1; text-transform:uppercase; letter-spacing:0.04em; color:var(--cream);}
  nav.main-menu a:hover{opacity:1; color:#fff;}
  .header-cta a{
    border: 1px solid var(--coral);
    background: rgba(255, 90, 79, 0.12);
    color: #fff;
    /* padding: 8px 16px; */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 122px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-cta a:hover{background:var(--coral); color:var(--ink);}
  .menu-toggle{display:none;}
  @media (max-width:850px){
    nav.main-menu{
      position:fixed; top:64px; left:0; right:0; background:var(--ink); color:var(--cream);
      flex-direction:column; gap:0; padding:8px 24px 20px;
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
    }
    nav.main-menu.open{opacity:1; pointer-events:auto; transform:translateY(0);}
    nav.main-menu a{padding:14px 0; border-bottom:1px solid var(--line-onDark); opacity:1; display:block;}
    .menu-toggle{display:flex; flex-direction:column; gap:5px; padding:8px; background:none; border:none;}
    .menu-toggle span{width:22px; height:2px; background:var(--cream);}
    .header-cta{display:none;}
  }

  /* Tablets: dropdown menu panel, not edge-to-edge like on phones */
  @media (min-width:601px) and (max-width:850px){
    nav.main-menu{
      left:auto; right:0;
      width:min(360px,50vw);
      border-left:1px solid var(--line-onDark);
    }
  }

  /* ---------- HERO ---------- */
  #hero{padding:120px 0 0; overflow:visible; position:relative; z-index:2;}
  .hero-smoke{position:absolute; top:0; left:0; width:100%; opacity:0.9; mix-blend-mode:multiply; pointer-events:none; z-index:0;}
  .hero-inner{position:relative;}
  .hero-logomark{max-width:100%; margin:0 auto 8px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; align-items:start; gap:24px; margin-top:30px; padding-bottom:40px;}
  .hero-copy h1{font-size:clamp(30px,4vw,48px); font-weight:600; max-width:22ch; margin-top:0px;line-height: 125%;}
  .hero-copy h1 .accent{color:var(--coral);}
  .hero-list{list-style:none; margin:50px 0 0; padding:0; font-size:20px;}
  .hero-list li{position:relative; padding-left:22px; margin-bottom:0px;}
  .hero-list li::before{content:''; position:absolute; left:0; top:0.5em; width:8px; height:10px; background:var(--coral);}
  .mascot-frame{position:relative; display:flex; justify-content:center; min-height:420px; margin-bottom:-140px;}
  .hero-script-stack{position: absolute;
    z-index: 3;
    bottom: 30px;
    left: -200px;
    }
  .hero-script.line1{color:var(--ink);margin-left: -174px;}
  .hero-script.line2 .lead{color:var(--ink);}
  .hero-script.line2 .accent{color:var(--coral);}
  /* Combined mascot+caption image, used on mobile/tablet only (see max-width:850px block below). Hidden by default so desktop is unaffected. */
  .mascot-img-mobile{display:none;}

  /* ---------- NUMBERS ---------- */
  #numbers{
    position:relative;
    padding:110px 0 130px;
    margin:20px 0;
  }

  #numbers::before{
    content:'';
    position:absolute;
    inset:-40px 0;
    background-image:url('../assets/numbers-bg-band.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
    z-index:2;
  }
  #numbers .wrap{position:relative; z-index:3;padding:0}
  .numbers-row{display:flex; justify-content:space-between; padding-top:28px; gap:24px; flex-wrap:wrap;}
  .num-item .n{font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(52px,8vw,149px); line-height:1; color:var(--coral);}
  .num-item .label{margin-top:8px; font-size:20px; line-height:125%; text-transform:uppercase; color:#fff; font-weight:600;}
  .num-item .coral-note{margin-top:0px; font-size:20px; color:var(--coral); font-weight:600;letter-spacing: 0.6px;}

  /* ---------- WHAT WE DO ---------- */
  #services{padding:0px 0 0px; }
  #services h2{font-size:clamp(44px,8vw,100px); text-transform:uppercase; margin-bottom:56px;}
  .cards4{display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-end;
}
  .card4{position:relative; padding-top:6px;}
  .card4.decorated::before{
    content: '';
    position: absolute;
    z-index: 0;
    left: 38%;
    top: 55%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -50%) rotate(279deg);
    background-image: url(../assets/performance-decor-circle.webp);
    background-size: cover;
    opacity: 1;
    mix-blend-mode: multiply;
    z-index: 33;
  }
  .card4 .icon-wrap{position:relative; z-index:1; display:flex; align-items:center; margin-bottom:16px;}
  .card4 .icon-wrap img{width:65px; height:65px;}
  .icon-wrap-support img {
    width: 95px!important;
    height: 95px!important;
  }
  .card4 h3{position:relative; z-index:1; font-size:20px; text-transform:uppercase; margin-bottom:10px;}
  .card4 p{position:relative; z-index:1; font-size:16px; color:#3d3a37;}

  /* ---------- THE DIFFERENCE (dark) ---------- */
  #difference{
    position:relative;
    color:var(--paper);
    padding:130px 0 150px;
  }
  #difference::before{
    content:'';
    position:absolute;
    inset:-40px 0;
    background-image:url('../assets/way-smoke.webp');
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
    z-index:0;
  }
  #difference .wrap{position:relative; z-index:1;}
  .difference-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px;}
  #difference h2{color:var(--paper); font-size:clamp(44px,8vw,100px); text-transform:uppercase;}
  #difference .lead{
    margin:0; font-size:20px; font-weight:600; text-transform:uppercase;
    color:rgba(236,232,228,0.85); text-align:right;
  }
  .gripe-list{display:grid; grid-template-columns:1fr 1fr; column-gap:56px;}
  .gripe{display:flex; gap:14px; padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--line-onDark); font-size:22px; color:rgba(236,232,228,0.9);}
  .gripe:nth-child(6), .gripe:nth-child(7){border-bottom:none; margin-bottom:0; padding-bottom:0;}
  .gripe .x{color:var(--coral); font-weight:700; flex-shrink:0;}
  .difference-statement{margin-top:45px; font-size:clamp(30px,4.6vw,55px); font-weight:800; text-transform:uppercase;line-height: 126%;}
  .difference-statement .accent{color:var(--coral);}

  /* ---------- HOW WE START ---------- */
  #how-we-start{padding:0;}
  .hws-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px;}
  .hws-head .script{color:var(--coral); font-size:clamp(26px,55px,55px);margin-left: -90px}
  #how-we-start h2{font-size:clamp(40px,100px,100px); text-transform:uppercase; text-align:right; line-height:1.1;}
  .steps-grid{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
  .step-icon{
    width:150px; height:64px; margin-bottom:18px;
    color:var(--ink);
    display:block;
  }
  /* inline svg instead of mask-image: masks are blocked when the page is opened from file:// */
  .step-icon svg{display:block; width:100%; height:100%;}
  .step h3{font-size:20px; color:var(--coral); text-transform:uppercase; margin-bottom:18px;}
  .step p{font-size: 22px;
    color: #3d3a37;
    line-height: 125%;}
  .section-stroke{display:block; margin:10px 0 10px auto; width:auto; max-width:50%; height:auto;position: absolute;right: 0;}

  /* ---------- REAL CONVERSATIONS ---------- */
  #our-chats{padding:0; margin-top: 165px;}
  .chats-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:20px;}
  .chats-head .script{color:var(--coral); font-size:clamp(26px,55px,55px);margin-right: -100px;}
  #our-chats h2{font-size:clamp(38px,6.8vw,72px); text-transform:uppercase; text-align:left; line-height:1.1;}
  #our-chats .lead{font-size:18px; font-weight:400; text-transform:none; color:var(--ink); max-width:60ch; margin-bottom:48px;}
  .steps-closing{
    font-size:20px; font-weight:700; text-transform:uppercase; max-width:100%; margin-bottom:10px;
  }
  .steps-closing .accent{color:var(--coral); text-transform:uppercase;}
  .chat-cards{display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-start;line-height: 125%}
  .chat-card{position:relative;}
  .chat-card-img{width:100%; box-shadow:0 6px 20px rgba(28,28,28,0.08);}
  .chat-caption{font-size: 18px;
    color: var(--coral);
    font-weight: 500;
    margin-top: 18px;
    margin-bottom: 0;
    text-align: center;}
  .folder-banner{
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin-top:44px; text-align:center;
    background-color:var(--coral); background-image:url('../assets/folder-banner-bg.png');
    background-size:cover; background-position:center; background-repeat:no-repeat;
    color:var(--ink);
    font-family:'Manrope',sans-serif; font-weight:800; text-transform:uppercase; font-size:24px; padding:22px 24px;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw;
  }
  .folder-banner-arrow{width:20px; height:20px; display:inline-block;}
  .folder-banner:hover{background-color:#ff7166;}

  /* ---------- HOW WE PRICE (dark) ---------- */
  #pricing{
    position:relative;
    color:var(--paper);
    padding:130px 0 130px;
  }
  .price-block {
    width:100%;
    max-width: 800px;
    height:auto;
  }
  #pricing::before{
    content:'';
    position:absolute;
    inset:-40px 0;
    background-image:url('../assets/pricing-bg-band.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
    z-index:0;
  }
  #pricing .wrap{position:relative; z-index:1;}
  .pricing-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px;}
  #pricing h2{color:var(--paper); font-size:clamp(38px,6.8vw,72px); text-transform:uppercase; text-align:left;}
  #pricing .kicker{font-size:20px; font-weight:600; text-transform:uppercase; text-align:right; margin:0;}
  #pricing .kicker .accent{color:var(--coral);}
  .pill-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:44px;}
  .pill{padding:12px 22px; border-radius:8px; background:var(--coral); font-weight:700; font-size:15px; text-transform:uppercase; color:var(--ink);}
  .plus{color:var(--coral); font-weight:800; font-size:20px;}
  .pricing-copy{font-size:19px; color:var(--paper);}
  .pricing-copy p + p{margin-top:16px;}
  .pricing-copy .accent{color:var(--coral); font-weight:600;}
  #pricing .btn.ghost{margin-top:32px;}

  /* ---------- FINAL CTA ---------- */
  #contact{padding:20px 0 0; text-align:center; position:relative; overflow:hidden;}
  .cta-smoke{position:absolute; bottom:0; left:0; width:100%; opacity:0.85; mix-blend-mode:multiply; pointer-events:none;}
  #contact h2{font-size:73px; text-transform:uppercase; line-height:125%;}
  #contact h2 .accent{color:var(--coral); display:block; font-size:131px; margin-top:10px;}
  .cta-content{
    display:grid; grid-template-columns:0.85fr 1.15fr; align-items:start; gap:40px;
    margin-top:20px; text-align:left;
  }
  .cta-form{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr 1fr; gap:20px 40px;
    padding-top: 35px;
  }
  .cta-mascot{position:relative; z-index:1; width:100%; max-width:none; margin:0;}
  .cta-form label{display:block; font-size:20px; font-weight:700; text-transform:uppercase; margin-bottom:10px; font-family:'Manrope',sans-serif;}
  .cta-form input{
    width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
    padding:6px 0; font-size:19px; font-family:'Instrument Sans',sans-serif; color:var(--ink);
  }
  .cta-form input::placeholder{color:var(--grey);}
  .cta-form input:focus{outline:none; border-bottom-color:var(--coral);}
  .cta-form .form-actions{grid-column:1 / -1; display:flex; margin-top:12px;}
  .btn-book{
    flex:1;
    width:100%;
    border:none;
    padding:0;
    margin:0;
    appearance:none;
    -webkit-appearance:none;
    background-color:transparent;
    background-image: url('../assets/button-form.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 70px;
    cursor:pointer;
    display:block;
  }
  .btn-book:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}
  .cta-fine{grid-column:1 / -1; font-size:12px; color:var(--ink); margin-top:0px; line-height:1.6;}

  /* ---------- FOOTER ---------- */
  footer{display:none; background:var(--ink); color:rgba(236,232,228,0.6); padding:40px 24px; text-align:center; font-size:13px;}

  ::selection{background:var(--coral); color:var(--ink);}

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  }

  /* ---------- MOBILE + TABLET LAYOUT (everything below the stable desktop tier — desktop rules untouched) ---------- */
  @media (max-width:850px){
    body{font-size:16px; line-height:1.45;}
    .wrap{width:100%; padding-left:18px; padding-right:18px;}

    .site-header{backdrop-filter:blur(8px);}
    .header-inner{height:56px; padding:0 18px;}
    .logo img{height:17px;}
    nav.main-menu{top:56px; max-height:calc(100dvh - 56px); overflow-y:auto; padding:8px 18px 18px;}
    nav.main-menu a{padding:13px 0; font-size:14px;}
    .menu-toggle{margin-right:-8px;}

    #hero{padding-top:78px; overflow:hidden;}
    .hero-logomark{width:100%; margin-bottom:14px;}
    .hero-grid{grid-template-columns:1fr; gap:0; margin-top:0; padding-bottom:0;}
    .hero-copy h1{font-size:clamp(27px,8.2vw,38px); line-height:1.12; margin-top:0; max-width:none;}
    .hero-list{font-size:clamp(16px,3.6vw,18px); margin-top:20px;}
    .hero-list li{padding-left:18px; margin-bottom:7px;}
    .hero-list li::before{width:5.4px; height:7.35px}
    /* Mobile/tablet: mascot + captions ship as one combined image (assets/hero-mascot-mobile.png)
       instead of the separate script-stack + mascot used on desktop. */
    .mascot-frame{
      position:relative;
      z-index:4;
      display:flex;
      justify-content:center;
      min-height:0;
      margin:18px 0 0;
    }
    .hero-script-stack{display:none;}
    .mascot-img-desktop{display:none;}
    .mascot-img-mobile{
      display:block;
      position:static;
      width:min(94vw,480px);
      max-width:100%;
      margin:0 auto;
    }

    #numbers{padding:min(11vw,72px) 0 min(11vw,80px); margin:12px 0;}
    #numbers::before{inset:-90px 0; background-size:cover;}
    .numbers-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,2.5vw,18px); padding-top:0; text-align:center;}
    .num-item{min-width:0;}
    .num-item .n{font-size:clamp(34px,10.5vw,58px);}
    .num-item .label{font-size:clamp(10px,2.6vw,14px); line-height:1.25; overflow-wrap:anywhere;}
    .num-item .coral-note{font-size:clamp(10px,2.6vw,14px); line-height:1.25;}

    #services{padding:min(11vw,68px) 0 min(12vw,82px); overflow:hidden; border-top:none;}
    #services h2{font-size:clamp(36px,10.5vw,56px); line-height:1; margin-bottom:32px;}
    .cards4{flex-direction:column; align-items:stretch; gap:34px;}
    .card4{padding-top:0;}
    .card4.decorated::before{left:25%; top:54%; width:70vw; height:70vw;}
    .card4 .icon-wrap{margin-bottom:12px;}
    .card4 .icon-wrap img{width:48px; height:48px;}
    .icon-wrap-support img{width:64px!important; height:64px!important;}
    .card4 h3{font-size:18px;}
    .card4 p{font-size:15px;}

    #difference{padding:min(11vw,74px) 0 min(12vw,82px);}
    #difference::before{inset:-20px 0; background-size:cover;}
    .difference-head{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:32px;}
    #difference h2{font-size:clamp(36px,10.5vw,54px); line-height:1;}
    #difference .lead{font-size:clamp(15px,3.6vw,18px); line-height:1.3; text-align:left;}
    .gripe-list{grid-template-columns:1fr; column-gap:0;}
    .gripe{gap:11px; padding-bottom:16px; margin-bottom:16px; font-size:clamp(15px,3.8vw,18px); line-height:1.4;}
    .gripe:nth-child(6){border-bottom:1px solid var(--line-onDark); margin-bottom:16px; padding-bottom:16px;}
    .difference-statement{margin-top:36px; font-size:clamp(24px,7.6vw,34px); line-height:1.14;}

    #how-we-start{padding:min(11vw,64px) 0 0;}
    .hws-head{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:36px;}
    .hws-head .script{font-size:clamp(24px,7vw,30px); margin-left:0;}
    #how-we-start h2{font-size:clamp(36px,10.5vw,52px); text-align:left; line-height:1;}
    .steps-grid{grid-template-columns:1fr; gap:32px;}
    .step-icon{width:min(40vw,150px); height:auto; aspect-ratio:150/64; margin-bottom:14px;}
    .step h3{font-size:17px; margin-bottom:8px;}
    .step p{font-size:15px; line-height:1.45;}
    .section-stroke{position:static; width:calc(100% - 36px); max-width:none; margin:20px auto;}

    #our-chats{padding:0 0 0; margin-top:0;}
    .chats-head{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:18px;}
    .chats-head .script{font-size:clamp(24px,7vw,29px); margin-right:0;}
    #our-chats h2{font-size:clamp(34px,10vw,48px); line-height:1;}
    .steps-closing{font-size:clamp(15px,3.8vw,18px); line-height:1.35; margin-bottom:12px;}
    #our-chats .lead{font-size:clamp(15px,3.6vw,17px); line-height:1.45; margin-bottom:32px;}
    .chat-cards{grid-template-columns:1fr; gap:28px;}
    .chat-caption{text-align:left; margin-top:10px;}
    .folder-banner{font-size:clamp(14px,3.8vw,17px); line-height:1.3; padding:18px 20px; margin-top:36px;}
    .folder-banner-arrow{width:16px; height:16px;}

    #pricing{padding:min(11vw,74px) 0 min(11vw,80px);}
    #pricing::before{inset:-20px 0; background-size:cover;}
    .pricing-head{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:32px;}
    #pricing h2{font-size:clamp(34px,10vw,48px); line-height:1;}
    #pricing .kicker{font-size:clamp(15px,3.6vw,17px); line-height:1.3; text-align:left;}
    .pill-row{gap:9px; margin-bottom:32px;}
    .pill{padding:10px 14px; font-size:clamp(11px,3vw,13px);}
    .plus{font-size:16px;}
    .pricing-copy{font-size:clamp(15px,3.6vw,17px); line-height:1.45; max-width:none;}
    #pricing .btn.ghost{width:100%; justify-content:center; margin-top:26px;}

    #contact{padding-top:min(10vw,56px);}
    #contact h2{font-size:clamp(24px,7.2vw,32px); line-height:1.08;}
    #contact h2 .accent{font-size:clamp(34px,10vw,48px); line-height:1; margin-top:8px;}
    .cta-content{
      display:flex;
      flex-direction:column;
      gap:18px;
      margin-top:26px;
    }
    .cta-form{order:1; width:100%; gap:17px; grid-template-columns:1fr 1fr; padding-top:20px;}
    .cta-mascot{
      order:2;
      align-self:center;
      width:min(85vw,340px);
      max-width:none;
      margin:-8px auto -1px;
    }
    .cta-form label{font-size:clamp(13px,3.2vw,16px); margin-bottom:6px;}
    .cta-form input{font-size:16px; padding:8px 0;}
    .cta-form .form-actions{margin-top:8px;}
    .btn-book{height:min(16vw,60px);}
    .cta-fine{font-size:12px; margin:8px 0 28px;}

    footer{padding:28px 18px; font-size:12px;}
  }

  @media (max-width:480px){
    .header-inner{height:56px;}
    .logo img{height:16px;}
    .cta-form{grid-template-columns:1fr;}
  }

  /* ---------- STABLE DESKTOP LAYOUT ---------- */
  @media (min-width:851px){
    :root{--desktop-gutter:clamp(24px,3vw,48px);}

    .wrap{
      width:100%;
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
    }

    .header-inner{
      display:grid;
      grid-template-columns:150px minmax(0,1fr) auto;
      gap:24px;
      width:100%;
      max-width:1200px;
      
    }
    nav.main-menu{min-width:0; justify-content:right; gap:clamp(16px,2vw,30px);}
    nav.main-menu a{white-space:nowrap; font-size:clamp(12px,1vw,14px);}
    .header-cta{white-space:nowrap;}

    #hero{min-height:680px;}
    .hero-inner{width:100%;}
    .hero-logomark{width:100%;}
    .hero-grid{
      grid-template-columns:minmax(300px,1.05fr) minmax(380px,.95fr);
      gap:clamp(24px,4vw,60px);
      align-items:start;
    }
    .hero-copy,.mascot-frame{min-width:0;}
    .hero-copy h1{font-size:clamp(34px,3.2vw,48px);}
    .hero-list{font-size:clamp(17px,1.5vw,20px);}
    
    .mascot-frame img.reveal{transform:translateX(-50%) translateY(26px);}
    .mascot-frame img.reveal.is-visible{transform:translateX(-50%) translateY(0);}
    .hero-script{font-size:clamp(27px,55px,55px);margin-left: 70px;}

    .numbers-row{
      display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: clamp(24px, 5vw, 70px);
    }
    .num-item{min-width:0;}

    #services h2{font-size:clamp(60px,6.5vw,100px);}
    .cards4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.6vw,32px);}
    .card4{min-width:0;}
    .card4 p{overflow-wrap:break-word;}
    /*.card4.decorated::before{width:clamp(280px,28vw,400px); height:clamp(280px,28vw,400px);}*/

    #difference h2{font-size:clamp(62px,6.5vw,100px);}
    .difference-head{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;}
    .difference-head>*{min-width:0;}
    .gripe-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(28px,4vw,56px);}
    .gripe{min-width:0; font-size:clamp(18px,1.5vw,22px);}
    .difference-statement{font-size:clamp(36px,3.8vw,55px);}

    .hws-head{display:grid; grid-template-columns:minmax(0,1fr) auto;}
    #how-we-start h2{font-size:clamp(54px,5.5vw,80px);}
    .steps-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px clamp(24px,3vw,40px);}
    .step{min-width:0;width: 360px;}
    .step-icon{max-width:100%;}

    .chats-head{display:grid; grid-template-columns:minmax(0,1fr) auto;}
    #our-chats h2{font-size:clamp(50px,5vw,72px);}
    .chat-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
    .chat-card,.chat-card-img{min-width:0; width:100%;}

    .pricing-head{display:grid; grid-template-columns:minmax(0,1fr) auto;}
    #pricing h2{font-size:clamp(50px,100px,100px);}
    .pill-row{flex-wrap:wrap;}
    .pill{white-space:nowrap;}

    .cta-content{
      grid-template-columns:minmax(320px,.85fr) minmax(420px,1.15fr);
      gap:clamp(30px,4vw,50px);
    }
    .cta-mascot{width:100%; height:auto; max-width:520px; justify-self:center;}
    .cta-form{min-width:0; grid-template-columns:repeat(2,minmax(0,1fr));}
    .cta-form>div,.cta-form input{min-width:0;}
  }

  @media (min-width:851px) and (max-width:1100px){
    .header-inner{grid-template-columns:125px minmax(0,1fr) auto; gap:14px;}
    nav.main-menu{gap:14px;}
    nav.main-menu a{font-size:11px;}
    .header-cta a{padding:8px 11px; font-size:11px;}
    .hero-grid{grid-template-columns:minmax(280px,.9fr) minmax(340px,1.1fr);}
    .cards4{gap:20px;}
    .card4 h3{font-size:16px;}
    .card4 p{font-size:15px;}
    .cta-content{grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);}
  }

  /* ---------- FIX: script labels use fixed negative margins meant to bleed
     outside the container on wide desktop (>1400px). Between 821-1400px the
     container isn't wide enough yet, so the labels overflow/overlap. ---------- */
  @media (min-width:851px) and (max-width:1400px){
    .hws-head .script{margin-left:0; font-size:clamp(26px,4vw,40px);}
    .chats-head .script{margin-right:0; font-size:clamp(26px,4vw,40px);}
  }

  @media (min-width:800px) and (max-width:1200px){
    .wrap{width:95%; max-width:95%;}
  }
  /* Desktop */
.cards4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 2.6vw, 40px);
}

.card4 {
  min-width: 0;
}

.card4 .icon-wrap {
  display: flex;
  align-items: flex-end;
  height: 95px;
  margin-bottom: 16px;
}

.card4 p {
  margin: 0;
  line-height: 1.4;
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1100px) {
  .cards4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }

  .card4 p br {
    display: none;
  }

  .card4 .icon-wrap {
    height: 75px;
  }

  .card4 .icon-wrap img {
    width: 60px;
    height: 60px;
  }

  .icon-wrap-support img {
    width: 75px !important;
    height: 75px !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .cards4 {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .card4 {
    width: 100%;
  }

  .card4 p br {
    display: none;
  }

  .card4 .icon-wrap {
    height: auto;
    margin-bottom: 12px;
  }

  .card4 .icon-wrap img {
    width: 52px;
    height: 52px;
  }

  .icon-wrap-support img {
    width: 64px !important;
    height: 64px !important;
  }

  .card4 h3 {
    font-size: 18px;
  }

  .card4 p {
    max-width: 420px;
    font-size: 16px;
    line-height: 1.45;
  }
}
.folder-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit; /* або конкретний колір, який у вас зараз */
  transition: color 0.3s ease;
  height: 128px;
}

.folder-banner:hover,
.folder-banner:focus-visible {
  color: #ffffff;
}

.folder-banner-arrow {
  transition: filter 0.3s ease;
}

.folder-banner:hover .folder-banner-arrow,
.folder-banner:focus-visible .folder-banner-arrow {
  filter: brightness(0) invert(1); /* робить іконку білою при наведенні */
}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}
.form-status{grid-column:1 / -1; font-size:14px; font-weight:600; margin:8px 0 0; min-height:1.2em;}
.form-status.is-success{color:#2f8f4e;}
.form-status.is-error{color:var(--coral);}
/* ---------- FORM SUCCESS POPUP ---------- */
.mh-popup-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(28,28,28,0.72);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.mh-popup-overlay.is-open{opacity:1; pointer-events:auto;}
/* the popup is a ready-made image from Figma: desktop images/popup-desc.png (POP UP 2941:7647, 580×320 @2x),
   phones images/popup-mob.png (POP UP 2941:9774, 350×340 @2x) */
.mh-popup{
  position:relative;
  width:min(580px, 100%, calc((100vh - 40px) * 580 / 320));
  transform:translateY(16px);
  transition:transform .25s ease;
}
.mh-popup-overlay.is-open .mh-popup{transform:translateY(0);}
.mh-popup-img{display:block; width:100%; height:auto;}
/* invisible 44px hit area over the cross drawn in the image (desktop: cross centre 550,30 of 580×320) */
.mh-popup-close{
  position:absolute; left:91.1%; top:2.5%;
  width:7.6%; aspect-ratio:1;
  padding:0; border:none; background:transparent;
  cursor:pointer;
}
@media (max-width:600px){
  .mh-popup{width:min(350px, 100%, calc((100vh - 40px) * 350 / 340));}
  /* phone popup: cross centre 327.5,23.7 of 350×340 */
  .mh-popup-close{left:87.3%; top:0.5%; width:12.6%;}
}
.mh-popup-close:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
.btn-book:disabled{
  opacity:0.55;
  cursor:not-allowed;
}
.form-status:not(.is-success):not(.is-error){
  color:var(--grey);
}
/* =====================================================================
   FIGMA EDITS (07-10): desktop "web main" + "Mobile WEB" 390
   ===================================================================== */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.mob-only{display:none;}

/* ---- Real conversations: new lead + sub line ---- */
#our-chats .lead{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:20px; line-height:1.25;
  text-transform:uppercase; color:var(--ink); max-width:none; margin:16px 0 12px;
}
.chats-sub{font-size:18px; line-height:1.25; color:var(--ink); margin-bottom:60px;}

/* ---- Final CTA heading: "30 minutes is enough / to know if we're a good fit" ---- */
#contact h2{
  /* stretch to the full 1440 canvas so the 82px line fits on one row like in Figma */
  margin-left:calc((100% - min(100vw, var(--canvas))) / 2);
  margin-right:calc((100% - min(100vw, var(--canvas))) / 2);
  font-size:clamp(36px, 4.51vw, 65px); line-height:1.25; color:var(--ink);
}
#contact h2 .accent{font-size:clamp(44px, 5.69vw, 82px); line-height:1.25; margin-top:0; white-space:nowrap;}

/* ---- Form ---- */
.cta-form label{font-size:22px;}
.cta-form input{font-size:17.5px;}
.cta-fine a{font-weight:700; text-decoration:underline; text-underline-offset:2px;}

/* ---- Desktop font sizes per Figma (1440) ---- */
@media (min-width:851px){
  .hero-list{font-size:clamp(17px, 1.53vw, 22px);}
  .card4 p{font-size:clamp(16px, 1.32vw, 19px);}
  #how-we-start h2{font-size:clamp(54px, 6.95vw, 100px);}
  #our-chats h2{font-size:clamp(50px, 6.95vw, 100px);}

  /* steps: uneven columns like in the layout (col 2 needs the widest text) */
  .steps-grid{display:grid; grid-template-columns:430fr 475fr 295fr; gap:56px 0;}
  .step{width:auto;}
}
@media (min-width:851px) and (max-width:1100px){
  .card4 p{font-size:15px;}
}
@media (min-width:851px) and (max-width:1200px){
  .step p br{display:none;}
  .steps-grid{column-gap:24px;}
}

/* ---- Mobile + tablet: header CTA is visible next to the burger ---- */
@media (max-width:850px){
  .header-inner{gap:14px;}
  .logo{margin-right:auto;}
  .header-cta{display:block; order:2;}
  .menu-toggle{order:3;}
  .header-cta a{width:auto; height:28px; padding:0 12px; font-size:11px; letter-spacing:0.04em;}
}

/* ---- Phones (Figma "Mobile WEB" 390) ---- */
@media (max-width:600px){
  .desk-only{display:none;}
  .mob-only{display:inline;}

  /* Hero: mascot sits to the right, behind the copy; script captions are live text */
  /* the mascot runs down under the numbers band, as in Figma. No overflow-x:clip here: iOS Safari then
     clips the bottom too (hard cut above the band). The sideways bleed is clipped by .page-canvas */
  #hero{padding-top:88px; overflow:visible;}
  .hero-logomark{margin-bottom:15px;}
  .hero-grid{position:relative; min-height:95.6vw;}
  .hero-copy{position:relative; z-index:3;}
  .hero-copy h1{font-size:26px; line-height:1.12; max-width:280px;}
  .hero-list{font-size:16px; margin-top:38px; line-height:1.6;}
  .hero-list li{padding-left:17px; margin-bottom:0;}
  .hero-list li::before{top:0.36em;}

  .mascot-frame{position:absolute; inset:0; margin:0; min-height:0; display:block; z-index:1;}
  .mascot-img-mobile{display:none;}
  .mascot-img-desktop{
    display:block; position:absolute; top:16.7vw; left:24.7vw;
    width:76.7vw; max-width:none; height:auto;
  }
  .hero-script-stack{display:block; position:absolute; inset:0; left:0; bottom:auto; z-index:4; pointer-events:none;}
  .hero-script{position:absolute; margin:0; line-height:1; white-space:nowrap;}
  .hero-script.line1{top:80vw; left:1.3vw; margin-left:0; font-size:7.5vw;}
  .hero-script.line2{top:90.8vw; left:35.6vw; font-size:6.67vw;}

  /* What we do */
  .card4 h3{font-size:20px;}
  .card4 p{font-size:16px;}

  /* The difference */
  #difference .lead{font-size:14px;}
  .gripe{font-size:16px;}
  .difference-statement{font-size:19px; line-height:1.26;}

  /* How we start: script label top-right of the heading */
  .hws-head, .chats-head{display:block; position:relative; padding-top:25px;}
  .hws-head .script, .chats-head .script{position:absolute; top:0; right:0; font-size:35px; margin:0; line-height:1;}
  .step h3{font-size:20px; margin-bottom:10px;}
  .step p{font-size:16px;}
  .step p br{display:none;}

  /* Real conversations */
  #our-chats .lead{font-size:16px; margin:14px 0 10px;}
  .chats-sub{font-size:14px; margin-bottom:40px;}
  .chat-caption{font-size:12px; text-align:center; line-height:1.3;}

  /* Pricing */
  #pricing .kicker{font-size:14px;}
  .pricing-copy{font-size:12px;}
  .pricing-copy br{display:none;}
  .pricing-copy .accent{font-size:13px;}

  /* Final CTA */
  #contact h2{font-size:22px; line-height:1.2; padding:0 5px;}
  #contact h2 .accent{font-size:32px; line-height:1.05; margin-top:4px; white-space:normal;}
  .cta-form label{font-size:20px;}
  .cta-form input{font-size:16px;}
  /* bottom mascot: 416px wide at x-26, cut by the frame edge like in Figma */
  #contact{overflow:hidden;}
  .cta-mascot{display:block; align-self:flex-start; width:106.7vw; max-width:none; margin:0 0 -7.2vw -11.8vw;}
}
@media (max-width:600px){
  .hero-script.line1 .m-accent,
  .hero-script.line2 .lead{color:var(--coral);}
}
@media (max-width:600px){
  .hero-list{max-width:190px;}
}

/* ---- "Book a call" form button: live text instead of button-form.png ---- */
.btn-book{
  display:flex; align-items:stretch; flex:1; width:100%; height:69px;
  padding:0; border:0; background:none; background-image:none;
}
.btn-book-label{
  flex:1; display:flex; align-items:center; padding-left:29px;
  background:var(--coral); color:var(--ink);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:20px;
  text-transform:uppercase; letter-spacing:0.01em;
  transition:background .15s ease;
}
.btn-book-icon{
  flex:0 0 80px; display:flex; align-items:center; justify-content:center;
  background:#ffece9; border:1.5px solid var(--coral);
}
.btn-book-icon img{width:25px; height:25px;}
.btn-book:hover .btn-book-label{background:#ff7166;}

/* ---- Desktop: pricing head stacked on the left, step-by-step label near "HOW" ---- */
@media (min-width:851px){
  .pricing-head{display:block; margin-bottom:38px;}
  #pricing h2{font-size:clamp(50px, 6.95vw, 100px); white-space:nowrap;}
  #pricing .kicker{text-align:left; font-size:22px; margin-top:2px;}

  .hws-head{display:flex; justify-content:flex-end; position:relative;}
  .hws-head .script{position:absolute; left:54%; top:35px; margin:0; z-index:1;}
}
@media (min-width:1201px){
  .cta-content{grid-template-columns:minmax(320px,1fr) 694px;}
  .cta-form{column-gap:38px;}
}

@media (max-width:850px){
  .folder-banner{height:auto; min-height:56px;}
}
@media (max-width:600px){
  #pricing .kicker br{display:none;}
  #pricing{padding:80px 0 100px;}
  #difference{padding-bottom:110px;}
  .btn-book{height:57px;}
  .btn-book-label{padding-left:28px;}
  .btn-book-icon{flex-basis:58px;}
  .form-status:empty{display:none;}
  .cta-fine{margin:4px 0 60px;}
}
.form-status:empty{display:none;}
.cta-form .cta-fine{margin-top:-4px;}
@media (max-width:600px){ .cta-form .cta-fine{margin:4px 0 60px;} }

/* =====================================================================
   STYLE AUDIT vs FIGMA (fonts, weights, colors, line-heights, tracking)
   ===================================================================== */
h1,h2,h3{letter-spacing:0;}

/* colors: light text on dark blocks = #ece8e4, body copy = #1c1c1c */
.header-cta a, .num-item .label,
#difference h2, .difference-statement,
#pricing h2, #pricing .kicker, .pricing-copy, #pricing .btn.ghost{color:var(--cream);}
.card4 p, .step p{color:var(--ink);}

/* fonts & weights */
nav.main-menu a{letter-spacing:0;}
.header-cta a{font-weight:600; letter-spacing:0;}
.num-item .n{font-weight:700;}
.num-item .label, .num-item .coral-note{font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:0;}
#difference .lead, .difference-statement, #pricing .kicker{font-family:'Manrope',sans-serif;}
#difference .lead, #pricing .kicker{font-weight:600;}
.card4 h3, .step h3{font-weight:700;}
.chat-caption{font-weight:400;}
#pricing .btn.ghost{font-weight:600; letter-spacing:0;}
.btn-book-label{line-height:1.26;}
.cta-form label{line-height:1.26;}
.cta-fine{line-height:1.25;}

/* ---- Desktop (Figma 1440) ---- */
@media (min-width:851px){
  .hero-copy h1{font-size:clamp(34px, 3.34vw, 48px); line-height:1.26;}
  .hero-list{line-height:1.26;}

  .num-item .n{font-size:clamp(64px, 10.35vw, 149px); line-height:1.26; letter-spacing:-3px;}
  .num-item .label, .num-item .coral-note{font-size:clamp(15px, 1.41vw, 20.3px); line-height:1.26;}
  .num-item .label{margin-top:-14px;}

  #services h2, #difference h2{font-size:clamp(60px, 6.95vw, 100px);}
  #services h2, #difference h2, #how-we-start h2, #our-chats h2, #pricing h2{line-height:1.26;}

  .card4 h3, .step h3{line-height:1.26;}
  .card4 p{line-height:1.2;}
  .step p, .gripe{line-height:1.26;}

  #difference .lead{font-size:22px; line-height:1.26;}
  .difference-statement{line-height:1.26;}
  #pricing .kicker{line-height:1.26;}
  .chat-caption{line-height:1.26;}
}

/* ---- Phones (Figma 390) ---- */
@media (max-width:600px){
  .hero-list{line-height:1.1;}
  .hero-list li{margin-bottom:5px;}

  .num-item .n{font-size:42px; line-height:1; letter-spacing:-0.8px;}
  /* labels kept at ~10px on purpose: 8px from the layout is unreadable on a phone */
  .num-item .label{line-height:1.1;}
  .num-item .coral-note{font-weight:500; line-height:1;}

  #services h2, #difference h2, #how-we-start h2, #our-chats h2{font-size:40px; line-height:1.26;}
  #pricing h2{font-size:40px; line-height:1.1;}

  .card4 h3, .step h3{line-height:1.1;}
  .card4 p, .step p, .gripe{line-height:1.1;}
  #difference .lead, #pricing .kicker{line-height:1.15;}

  #our-chats .lead{line-height:1.15;}
  .chats-sub, .chat-caption{line-height:1.1;}
  .folder-banner{font-size:14px;}

  .pricing-copy, .pricing-copy .accent{line-height:1.1;}
  #pricing .btn.ghost{font-size:20px;}

  #contact h2{line-height:1.1;}
  #contact h2 .accent{line-height:1;}
}

/* =====================================================================
   MOBILE LAYOUT PASS vs Figma "Mobile WEB" 390 (positions & spacing)
   ===================================================================== */
@media (max-width:600px){
  .wrap{padding-left:20px; padding-right:20px;}

  /* header 51px, small logo 67x12, CTA 74x22 */
  .header-inner{height:51px; padding:0 20px;}
  nav.main-menu{top:51px;}
  .logo img{height:12.25px;}
  .header-cta a{width:74px; height:22px; padding:0; font-size:9px; letter-spacing:0;}

  /* hero */
  #hero{padding-top:88px;}
  .hero-logomark{width:100%; margin-bottom:15px;}

  /* numbers: left-aligned columns at x18 / x129 / x269 */
  #numbers{padding-top:58px;}
  .numbers-row{grid-template-columns:111px 140px 1fr; gap:0; text-align:left; margin-left:-2px;}
  .num-item .n{line-height:43px;}
  .num-item .label{font-size:8px; margin-top:6px; padding-left:2px;}
  .num-item .coral-note{font-size:8px; margin-top:3px; padding-left:2px;}

  /* what we do */
  #services{padding-top:66px;}
  #services h2{margin-bottom:45px;}
  .cards4{gap:41px;}
  /* in Figma the SALES title has line-height 1.259 (the other three 1.1) */
  .card4:last-child h3{line-height:1.26;}
  .card4 .icon-wrap{margin-bottom:15px;}
  .card4 .icon-wrap img{width:60px; height:60px;}
  .icon-wrap-support img{width:90px!important; height:90px!important;}
  .card4 h3{margin-bottom:8px;}

  /* the difference */
  #difference{padding-bottom:60px;}
  #difference::before{bottom:-110px;}
  .difference-head{gap:10px; margin-bottom:45px;}
  .gripe{gap:0; padding-bottom:20px; margin-bottom:20px;}
  .gripe .x{flex:0 0 29px;}
  .gripe > span:last-child{margin-right:-4px;}
  .gripe:nth-child(6){padding-bottom:20px; margin-bottom:20px;}
  .gripe:nth-child(7){padding-bottom:0; margin-bottom:0;}
  .difference-statement{margin-top:45px;}

  /* how we start */
  #how-we-start{padding-top:28px;}
  .hws-head{margin-bottom:45px;}
  .hws-head .script{top:20px; right:0;}
  .steps-grid{gap:42px;}
  .step-icon{width:140px; height:52px; aspect-ratio:auto; margin-bottom:14px;}
  .step h3{margin-bottom:8px;}

  /* divider: dark-line.png, 701px wide, bleeds off the right edge */
  .section-stroke-pic{display:block; overflow:hidden; margin:13px 0 0 20px;}
  .section-stroke{position:static; width:701px; max-width:none; height:94px; margin:0;}

  /* real conversations */
  #our-chats{margin-top:-8px;}
  .chats-head{margin-bottom:0;}
  .chats-head .script{top:16px; right:-1px;}
  #our-chats .lead{margin:25px 0 12px;}
  .chats-sub{margin-bottom:46px;}
  .chat-cards{gap:10px;}
  .chat-caption{margin-top:8px;}
  .folder-banner{min-height:44px; height:44px; padding:0 20px; margin-top:45px;}

  /* pricing */
  #pricing{padding:90px 0 45px;}
  .pricing-head{gap:9px; margin-bottom:25px;}
  .pill-row{margin-bottom:45px;}
  .pricing-copy p + p{margin-top:13px;}
  .pricing-copy p.accent{margin-top:16px;}
  #pricing .btn.ghost{height:53px; margin-top:45px;}

  /* final CTA + form */
  #contact{padding-top:32px;}
  .cta-content{margin-top:41px;}
  .cta-form{padding-top:0; row-gap:39px;}
  .cta-form label{margin-bottom:12px;}
  .cta-form input{padding:8px 0 15px; line-height:20px;}
  .cta-form .form-actions{margin-top:4px;}
  .btn-book{height:53px;}
  .btn-book-label{padding-left:27px;}
  .btn-book-icon{flex-basis:61px;}
  .cta-form .cta-fine{margin:-20px 0 0;}
}
@media (max-width:600px){
  #services{padding-top:31px;}
  #our-chats{margin-top:-4px;}
}
@media (max-width:600px){
  #numbers .wrap{padding:0;}
  .numbers-row{margin-left:18px;}
  /* band's torn edges: top ~38px above the digits, bottom ~45px below the note, as in Figma (±3px) */
  #numbers::before{top:-18px; bottom:-40px;}
}
@media (max-width:600px){
  /* black smoke: images/difference-bg-mob.png (780×2052 @2x) at natural size, anchored to both section edges;
     dark from ~30px above the heading to ~105px below the statement, like in Figma */
  #difference::before{top:-111.5px; bottom:-88.5px; background-image:url('../images/difference-bg-mob.png'); background-size:100% 100%;}
}
@media (max-width:600px){
  .card4 p br.mob-only, .step p br.mob-only, .pricing-copy br.mob-only, .pricing-copy .accent br{display:inline;}
  .card4 p br.desk-only, .step p br.desk-only, .pricing-copy br.desk-only, .gripe br.desk-only{display:none;}
}
@media (max-width:600px){ .step p br.both{display:inline;} }
/* pricing on phones: black brush band images/pricing-bg-mob.png (780×1178 @2x), torn edges where Figma has them */
@media (max-width:600px){
  /* anchored to both edges of the section: torn bottom edge always ~37px under Get pricing and ~40px above the next heading */
  #pricing::before{top:24px; bottom:-41px; height:auto; background-image:url('../images/pricing-bg-mob.png'); background-size:100% 100%;}
}

/* Fixed line count at every width: What we do = 4 lines, How we start = 3 lines.
   Lines are set by explicit <br>, auto-wrapping is off. */
.card4 p, .step p{white-space:nowrap;}
/* What we do: br.lb = break everywhere, br.l4 = desktop/tablet 4-line split, br.l3 = phone 3-line split (Figma Mobile) */
.card4 p br.lb, .card4 p br.l4{display:inline;}
.card4 p br.l3{display:none;}
@media (max-width:600px){
  .card4 p br.l4{display:none;}
  .card4 p br.l3{display:inline;}
  /* longest Figma line is ~320px at 16px: shrink a little below 372px wide so it never overflows */
  .card4 p{font-size:min(16px, 4.3vw);}
}
@media (min-width:601px){ .step p br.desk-only, .step p br.both{display:inline;} }
/* 821–1200: three uneven columns are narrow, scale the step text so each fixed line fits its column */
@media (min-width:851px) and (max-width:1200px){ .step p{font-size:1.65vw;} }
/* The difference on phones: the lead is solid #ece8e4 in Figma (gripes keep their 90% opacity) */
@media (max-width:600px){ #difference .lead{color:#ece8e4;} }

/* ---------- MOBILE / TABLET MENU (≤820): full-screen paper panel in the site's style ----------
   Items look like the section headings (Manrope ExtraBold, uppercase) with coral numbers like the
   "How we start" steps; the coral "Book a call" button is the same as in the form. */
.menu-extra{display:none;}
@media (max-width:850px){
  html.menu-open{overflow:hidden;}
  html.menu-open .site-header{background:var(--ink);}
  html.menu-open .header-cta{visibility:hidden;} /* the same button is at the bottom of the menu */

  /* the header has backdrop-filter, so it is the containing block of this fixed panel */
  nav.main-menu{
    top:calc(100% + 1px); left:0; right:0; width:auto; margin:0;
    height:calc(100dvh - 57px); max-height:none; overflow-y:auto; overscroll-behavior:contain;
    padding:16px 32px 40px; border:0;
    background:var(--paper) url('../assets/bg.webp') center top / cover;
    color:var(--ink);
    display:flex; flex-direction:column;
    counter-reset:menu-item;
    transform:translateY(-12px);
    transition:opacity .25s ease, transform .25s ease;
  }
  nav.main-menu.open{transform:none;}

  nav.main-menu > a{
    counter-increment:menu-item;
    display:flex; align-items:baseline; gap:14px;
    padding:18px 0; border-bottom:1px solid var(--line);
    font-family:'Manrope',sans-serif; font-weight:800; font-size:40px; line-height:1.1;
    text-transform:uppercase; letter-spacing:0; color:var(--ink);
    opacity:0; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, color .15s ease;
  }
  nav.main-menu > a::before{
    content:counter(menu-item, decimal-leading-zero);
    flex:0 0 24px;
    font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:13px; line-height:1;
    color:var(--coral);
  }
  nav.main-menu > a:hover, nav.main-menu > a:focus-visible{color:var(--coral); opacity:1;}
  nav.main-menu.open > a{opacity:1; transform:none;}
  nav.main-menu.open > a:nth-child(2){transition-delay:.04s;}
  nav.main-menu.open > a:nth-child(3){transition-delay:.08s;}
  nav.main-menu.open > a:nth-child(4){transition-delay:.12s;}
  nav.main-menu.open > a:nth-child(5){transition-delay:.16s;}

  .menu-extra{display:block; margin-top:auto; padding-top:40px; opacity:0; transition:opacity .3s ease .2s;}
  nav.main-menu.open .menu-extra{opacity:1;}
  nav.main-menu .menu-extra a.menu-cta{
    display:flex; height:53px; padding:0; border:0;
    font-size:inherit; letter-spacing:0; color:inherit;
  }
  .menu-mail{margin:16px 0 0; font-family:'Instrument Sans',sans-serif; font-size:14px; line-height:1.3; color:var(--ink);}
  nav.main-menu .menu-mail a{
    display:inline; padding:0; border:0;
    font-size:inherit; font-weight:700; text-transform:none; letter-spacing:0;
    color:var(--ink); text-decoration:underline;
  }

  /* burger → cross */
  .menu-toggle span{transition:transform .25s ease, opacity .2s ease;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (max-width:600px){
  nav.main-menu{height:calc(100dvh - 52px); padding:8px 20px 32px;}
  nav.main-menu > a{font-size:min(32px, 8.4vw); padding:16px 0;}
}
/* The difference on phones: lines follow the explicit <br> like in Figma (no extra wraps);
   below ~390px the text shrinks a little so the longest line still fits */
@media (max-width:600px){
  .gripe > span:last-child, .difference-statement{white-space:nowrap;}
  .gripe{font-size:min(16px, 4.1vw);}
  .difference-statement{font-size:min(19px, 4.87vw);}
}
/* What we do, phones: the ring behind Customer Support as in Figma Mobile —
   the Figma image (images/decor-circle-mob.png) in a 314.6×306.3 box rotated −30°,
   centred 48.9px from the card's left edge and 103.3px below its top */
@media (max-width:600px){
  .card4.decorated::before{
    background-image:url(../images/decor-circle-mob.png);
    background-size:100% 100%;
    width:314.6px; height:306.3px;
    left:48.9px; top:103.3px;
    transform:translate(-50%,-50%) rotate(-30deg);
  }
}
/* How we start ≤820: a real grid (the base .steps-grid is flex + space-between, which put the
   steps 1-or-2 per row unevenly). Phones: one column like Figma; tablets: two equal columns */
@media (max-width:850px){
  .steps-grid{display:grid; grid-template-columns:minmax(0,1fr); justify-content:normal; align-items:start;}
  .step{width:auto; min-width:0;}
}
@media (min-width:601px) and (max-width:850px){
  .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:44px;}
  .step p{font-size:min(15px, 2.4vw);} /* the longest line fits a column from 601px */
}
/* Tablets: script label on the heading's level, top-right — like on phones / in Figma
   (before, the head was a column: "Step by step" above the heading, "Human to human" below it) */
@media (min-width:601px) and (max-width:850px){
  .hws-head, .chats-head{display:block; position:relative;}
  .hws-head .script, .chats-head .script{position:absolute; top:0; right:0; margin:0; line-height:1; font-size:clamp(35px,6vw,46px);}
}
/* Numbers on phones: the 390px layout (columns 111/140/rest, 18px inset, 42px digits, 8px labels)
   scaled with the viewport, so 391–600px looks the same instead of bunching to the left */
@media (max-width:600px){
  .numbers-row{grid-template-columns:28.46vw 35.9vw 1fr; margin-left:4.62vw;}
  .num-item .n{font-size:10.77vw; line-height:11.03vw; letter-spacing:-0.205vw;}
  .num-item .label, .num-item .coral-note{font-size:max(8px, 2.05vw);}
}
/* phones: dark bands stretch only horizontally (not "cover"), so their torn/smoky edges keep
   the same distance to the neighbouring headings at every width from 320 to 600 */
@media (max-width:600px){
  #numbers::before, #difference::before{background-size:100% 100%;}
}
/* phones: section spacing fixed at its 390px (Figma) values instead of growing with vw up to 600px */
@media (max-width:600px){
  #numbers{padding-bottom:42.9px;}
  #services{padding-bottom:46.8px;}
  #difference{padding-top:42.9px;}
}

/* How we start, desktop: "Step by step" lives inside the h2 and is sized/placed in em of the heading
   (Figma web main @1440: heading 100px at x793–1321 y2892, script 55px box x769–1002 y2927–3044) */
@media (min-width:851px){
  .hws-head{display:block;}
  #how-we-start h2{position:relative;}
  #how-we-start .hws-head .script{
    position:absolute; left:auto; right:5.8em; top:1.2em; margin:0;
    font-size:0.55em; line-height:1; font-weight:400; text-transform:none; white-space:nowrap;
    color:var(--coral); pointer-events:none;
  }
}
/* the script is inside the h2 now: the h2 is always its containing block; don't inherit the heading's caps/weight */
#how-we-start h2{position:relative;}
.hws-head .script{text-transform:none; font-weight:400; letter-spacing:normal;}
/* phones: the h2 starts 25px below the head's top (head padding) */
@media (max-width:600px){ #how-we-start .hws-head .script{top:-5px;} }
/* The difference, desktop: the lead's last line sits on the heading's baseline (Figma: lead box bottom
   19px above the 100px heading's box bottom), at every heading size */
@media (min-width:851px){
  .difference-head{align-items:last baseline;}
}

/* Real conversations: "Human to human" lives inside the h2 too (always its containing block) */
#our-chats h2{position:relative;}
.chats-head .script{text-transform:none; font-weight:400; letter-spacing:normal;}
@media (max-width:600px){ #our-chats .chats-head .script{top:-9px;} } /* h2 starts 25px below the head (padding) */
/* desktop: sized/placed in em of the heading (Figma @1440: heading 100px at x113 y3813, script 55px box x1080–1394 y3974–4091) */
@media (min-width:851px){
  .chats-head{display:block;}
  #our-chats .chats-head .script{
    position:absolute; left:17.58em; right:auto; top:3.49em; margin:0;
    font-size:0.55em; line-height:1; white-space:nowrap; color:var(--coral); pointer-events:none;
  }
}
/* The difference, desktop/tablet: as in Figma web main (2745:93) — list 1057.7px of the 1200px wrap,
   two 450px columns with a 157px gap, so every divider line has the same 450px width;
   rows 1–3 have a line in BOTH columns (the 6th item too), only the last item has none */
@media (min-width:601px){
  .gripe:nth-child(6){border-bottom:1px solid var(--line-onDark); padding-bottom:20px; margin-bottom:20px;}
}
/* narrower than ~1100px the text would wrap in 450-proportion columns: there the list keeps the full width */
@media (min-width:1101px){
  .gripe-list{width:88.14%; column-gap:14.85%;}
}

/* =====================================================================
   TABLET 601–850
   ===================================================================== */
@media (min-width:601px) and (max-width:850px){
  /* The difference: smoky dark band (mobile image) anchored to the section, dark from ~30px above
     the heading to ~60px below the statement, so all light text sits on black */
  #difference{padding:74px 0 82px;}
  #difference::before{inset:auto 0; top:-78px; bottom:-68px; background-image:url('../images/difference-bg-mob.png'); background-size:100% 100%;}

  /* Pricing: torn band (mobile image) clear of the heading and the button */
  #pricing{padding:96px 0 52px;}
  #pricing::before{inset:auto 0; top:24px; bottom:-41px; background-image:url('../images/pricing-bg-mob.png'); background-size:100% 100%;}

  /* Contact: the coral line of the heading must fit the width */
  #contact h2 .accent{font-size:min(44px, 6.3vw); white-space:nowrap;}
  /* placeholders fit their half-width fields */
  .cta-form input{font-size:min(16px, 2.4vw);}
}
@media (min-width:601px) and (max-width:850px){
  /* statement stays on its two lines (no lonely "ABOVE") */
  .difference-statement{white-space:nowrap; font-size:min(34px, 5.1vw);}
}
@media (min-width:601px) and (max-width:850px){
  /* chat cards: two equal columns aligned at the top, captions centred under them */
  .chat-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start;}
  .chat-card-img{display:block; width:100%; height:auto;}
  .chat-caption{text-align:center; font-size:min(16px, 2.3vw); line-height:1.25; text-wrap:balance; margin-top:10px;}
}
/* What we do, 601–1100 (two columns): the ring behind Customer Support as on phones / Figma Mobile —
   the Figma ring image ~315px, centred by the icon and title, instead of a 70vw ring hanging between the columns */
@media (min-width:601px) and (max-width:1100px){
  .card4.decorated::before{
    background-image:url(../images/decor-circle-mob.png);
    background-size:100% 100%;
    width:314.6px; height:306.3px;
    left:48.9px; top:96px;
    transform:translate(-50%,-50%) rotate(-30deg);
  }
}
/* Desktop: header and content share the same side gutters — 2.5% each side up to 1263px, then 1200px centred
   (before, the header was max 1200px with no padding, so on 851–1260px the logo and "Book a call" touched the edges) */
@media (min-width:851px){
  .wrap, .header-inner{width:min(1200px, 95%); max-width:none; margin-left:auto; margin-right:auto;}
}
/* tablet menu 601–850: calmer size — items 26px instead of the 40px section-heading size */
@media (min-width:601px) and (max-width:850px){
  nav.main-menu{padding:12px 32px 36px;}
  nav.main-menu > a{font-size:26px; padding:16px 0; gap:16px;}
  nav.main-menu > a::before{font-size:12px; flex-basis:22px;}
  .menu-extra{padding-top:32px; max-width:420px;}
}
@media (min-width:601px) and (max-width:850px){
  /* dropdown panel under the header, as tall as its content; the page behind is dimmed */
  nav.main-menu{height:auto; max-height:calc(100dvh - 57px); padding-bottom:28px; box-shadow:0 0 0 100vmax rgba(28,28,28,0); transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease;}
  nav.main-menu.open{box-shadow:0 24px 40px rgba(0,0,0,0.25), 0 0 0 100vmax rgba(28,28,28,0.45);}
  .menu-extra{margin-top:0; display:flex; align-items:center; gap:24px; max-width:none;}
  nav.main-menu .menu-extra a.menu-cta{flex:0 0 340px;}
  .menu-mail{margin:0;}
}
/* phones: the hero now CONTAINS the whole mascot (it hung 12.11vw below the hero) and the numbers band is
   pulled up by the same amount to lie over its bottom. Nothing has to overflow, so no browser (iOS Safari)
   can clip it into a hard edge with a paper strip above the band; the hero itself clips sideways */
@media (max-width:600px){
  #hero{padding-bottom:12.2vw; overflow:hidden;}
  #numbers{margin-top:calc(12px - 12.2vw);}
}
/* phone menu: smaller items (22px instead of 32px) */
@media (max-width:600px){
  nav.main-menu > a{font-size:22px; padding:14px 0; gap:14px;}
  nav.main-menu > a::before{font-size:11px; flex-basis:22px;}
}