/* Yasmine Davis — shared site styles */
  :root{
    --cream: #FAF3E1;
    --cream-deep: #F0E3BF;
    --forest: #1E3B2C;
    --forest-deep: #12261B;
    --palm: #3F7D52;
    --palm-light: #7AAE83;
    --gold: #C08A2E;
    --gold-light: #E7C877;
    --gold-deep: #8F6418;
    --clay: #D9603B;
    --rose: #B5657D;
    --ink: #241F14;
    --white: #FFFDF6;
    --tone-home: #F2E8D0;
    --tone-contact: #E6EFE7;
    --tone-pricing: #FBEEE7;
    --tone-faq: #F3ECDB;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-script: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --radius-arch: 200px 200px 24px 24px;
  }

  /* ---------- hero art band (botanical illustration header) ---------- */
  .hero-art{
    width: 100%;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: relative;
  }
  .hero-art-tiled{
    background-size: 300px auto;
    background-repeat: repeat;
    background-position: top left;
  }
  .hero-art::after{
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(to bottom, rgba(255,253,246,0) 60%, var(--band-tone, var(--cream)) 100%);
    pointer-events:none;
  }
  .page-body{
    padding: 4rem 6vw 7.5rem;
  }
  @media (min-width: 820px){
    .hero-art{ height: 420px; }
  }
  @media (max-width: 480px){
    .hero-art{ height: 200px; }
    .page-body{ padding: 2.6rem 6vw 6rem; }
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    overflow-x:hidden;
  }
  img,video{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}
  a{color:inherit; text-decoration:none;}

  ::selection{ background: var(--gold-light); color: var(--forest-deep); }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- layout scaffolding ---------- */
  main{ display:block; }
  .screen{
    min-height:100vh;
    width:100%;
    position:relative;
    padding: 6.5rem 6vw 7.5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .screen-inner{ width:100%; max-width:1180px; margin:0 auto; position:relative; z-index:2;}

  .eyebrow{
    font-family:var(--font-script);
    font-style: italic;
    font-weight: 600;
    font-size:1.15rem;
    color: var(--clay);
    letter-spacing:.01em;
    display:inline-block;
    margin-bottom:.35rem;
  }
  .hero-byline{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--forest-deep);
    letter-spacing: .01em;
    margin-bottom: .6rem;
    display:block;
  }
  .hero-byline .hero-handle{
    font-weight: 500;
    color: var(--forest);
    opacity:.65;
  }
  .headline{
    font-family:var(--font-display);
    font-weight:600;
    color: var(--forest-deep);
    line-height:1.02;
    letter-spacing:-0.01em;
  }
  .section-sub{
    font-size:1.05rem;
    color: var(--forest);
    max-width:46ch;
    line-height:1.6;
    margin-top:1rem;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border:none;
    border-radius:999px;
    padding: .95rem 1.9rem;
    font-family: var(--font-body);
    font-weight:700;
    font-size:.98rem;
    letter-spacing:.01em;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .btn{ position:relative; overflow:hidden; z-index:1; }
  .btn-gold{
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--forest-deep);
    box-shadow: 0 10px 24px rgba(192,138,46,.35);
  }
  .btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(192,138,46,.45); }
  .btn-gold:active{ transform: translateY(0) scale(.97); }
  .btn-gold::after{
    content:'';
    position:absolute; top:0; left:-60%; width:45%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
    pointer-events:none;
  }
  .btn-gold:hover::after{ left:130%; }
  .btn-pulse{ animation: btnGlow 3.4s ease-in-out infinite; }
  @keyframes btnGlow{
    0%,100%{ box-shadow: 0 10px 24px rgba(192,138,46,.35); }
    50%{ box-shadow: 0 12px 30px rgba(192,138,46,.55); }
  }
  .btn-ghost{
    background: transparent;
    color: var(--forest);
    border: 1.5px solid var(--forest);
    padding: .9rem 1.7rem;
    z-index:1;
  }
  .btn-ghost::before{
    content:'';
    position:absolute; inset:0;
    background: var(--forest);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index:-1;
    border-radius: inherit;
  }
  .btn-ghost:hover::before{ transform: scaleX(1); }
  .btn-ghost:hover{ color: var(--white); }
  .btn-ghost:active{ transform: scale(.97); }

  /* ---------- decorative texture ---------- */
  .grain-bg{
    position:absolute; inset:0;
    background-image: radial-gradient(var(--gold-deep) 0.7px, transparent 0.7px);
    background-size: 22px 22px;
    opacity:.08;
    pointer-events:none;
    z-index:0;
  }
  .blob{
    position:absolute;
    border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%;
    opacity:.5;
    z-index:0;
    filter: blur(1px);
  }

  /* ---------- top nav (desktop) ---------- */
  .topnav{
    display:none;
    position: sticky;
    top:0;
    z-index:60;
    background: rgba(30,59,44,0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(231,200,119,.25);
  }
  .topnav-inner{
    max-width:1180px;
    margin:0 auto;
    padding: 1.1rem 6vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
  }
  .topnav-brand{
    font-family: var(--font-display);
    font-weight:700;
    font-size:1.05rem;
    color: var(--cream);
    text-decoration:none;
    white-space:nowrap;
  }
  .topnav-links{ display:flex; gap:1.9rem; flex-wrap:wrap; }
  .topnav-link{
    font-family: var(--font-body);
    font-size:.86rem;
    font-weight:600;
    letter-spacing:.02em;
    color: rgba(250,243,225,.7);
    text-decoration:none;
    transition: color .2s ease;
    white-space:nowrap;
  }
  .topnav-link:hover{ color: var(--gold-light); }
  .topnav-link.active{ color: var(--gold-light); }

  /* Above this width: top nav takes over and the floating mobile dock
     disappears entirely, along with the scroll-hide logic it needs.
     (Media query lives after the .tabbar ruleset below, so it wins the
     cascade regardless of source order.) */

  /* ---------- app tab bar ---------- */
  .tabbar{
    position:fixed;
    left:50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    z-index:50;
    display:flex;
    gap:.25rem;
    background: rgba(30,59,44,0.94);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(231,200,119,.35);
    border-radius: 999px;
    padding:.4rem;
    box-shadow: 0 16px 40px rgba(18,38,27,.35);
    max-width: 96vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  /* Hidden state: slides the dock off-screen while the user is actively
     scrolling down through content, so it can never sit on top of a price
     card, form field, or CTA. main.js toggles this class on scroll. */
  .tabbar.is-hidden{
    transform: translateX(-50%) translateY(160%);
    opacity: 0;
    pointer-events: none;
  }
  .tabbar::-webkit-scrollbar{ display:none; }
  .tab{
    background:transparent;
    border:none;
    color: rgba(250,243,225,.65);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.2rem;
    padding: .5rem .85rem;
    border-radius:999px;
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    transition: color .2s ease, background .2s ease;
  }
  .tab svg{ width:19px; height:19px; stroke: currentColor; fill:none; stroke-width:1.6; }
  .tab.active{ color: var(--forest-deep); background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
  .tab:hover:not(.active){ color: var(--gold-light); }

  /* Below this width, six icon+label tabs don't reliably fit (this is the
     exact bug that made FAQ disappear off-screen on phone widths). Dropping
     the label and going icon-only, like a native app tab bar, guarantees
     all six always fit with room to spare. */
  @media (max-width: 480px){
    .tab-label{ display:none; }
    .tab{ padding: .65rem; }
    .tab svg{ width:21px; height:21px; }
  }

  /* Above this width: top nav takes over and the floating mobile dock
     disappears entirely, along with the scroll-hide logic it needs.
     Placed after .tabbar's own rules so it reliably wins the cascade. */
  @media (min-width: 821px){
    .topnav{ display:block; }
    .tabbar{ display:none; }
    .page-body{ padding-bottom: 4rem; }
  }

  /* ---------- boho arch frame ---------- */
  .arch-frame{
    position:relative;
    background: var(--white);
    border: 2px solid var(--gold);
    border-radius: var(--radius-arch);
    padding: 3.2rem 2.4rem 2.2rem;
  }
  .arch-frame::before{
    content:'';
    position:absolute; inset:9px;
    border: 1px solid var(--gold-light);
    border-radius: 190px 190px 16px 16px;
    pointer-events:none;
  }
  .arch-ornament{
    position:absolute;
    top:-14px; left:50%;
    transform: translateX(-50%);
    width:34px; height:34px;
    z-index:2;
  }
  .arch-ornament svg{ width:100%; height:100%; }

  /* ================= HOME ================= */
  #home{
    background: var(--tone-home);
  }
  .screen.has-hero-art{
    padding: 0;
    display: block;
  }
  .plant-accent{
    position:absolute;
    right:-20px; bottom:-10px;
    width: 290px;
    max-width: 36vw;
    z-index:0;
    pointer-events:none;
    mix-blend-mode: multiply;
    opacity:.9;
    transform-origin: bottom center;
    animation: plantSway 7.5s ease-in-out infinite;
  }
  .plant-accent img{ width:100%; height:auto; display:block; }
  @keyframes plantSway{
    0%,100%{ transform: rotate(-1.3deg); }
    50%{ transform: rotate(1.3deg); }
  }
  @media (max-width:640px){
    .plant-accent{ width:170px; right:-14px; bottom:-4px; opacity:.75; }
  }

  /* ---------- video frame / play button (shared) ---------- */
  .video-card{ position:relative; }
  .video-play{
    position:absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width:56px; height:56px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border: 2px solid rgba(255,253,246,.9);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 22px rgba(18,38,27,.4);
    z-index:4;
    transition: transform .2s ease, opacity .25s ease;
    animation: playPulse 2.6s ease-in-out infinite;
  }
  .video-play svg{ width:20px; height:20px; margin-left:3px; fill:var(--forest-deep); }
  .video-play:hover{ transform: translate(-50%,-50%) scale(1.08); }
  .video-card.is-playing .video-play{ opacity:0; pointer-events:none; }
  @keyframes playPulse{
    0%,100%{ box-shadow: 0 8px 22px rgba(18,38,27,.4), 0 0 0 0 rgba(231,200,119,.45); }
    50%{ box-shadow: 0 8px 22px rgba(18,38,27,.4), 0 0 0 10px rgba(231,200,119,0); }
  }

  .home-grid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem;
    align-items:center;
    margin-top: 4.5rem;
  }
  .headline-home{ font-size: clamp(2.4rem, 5vw, 4.1rem); margin-top:.2rem; }
  .home-frame{ text-align:center; }
  .trust-label{
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color: var(--gold-deep); font-weight:700; margin-bottom:.6rem;
  }
  .cta-row{ display:flex; gap:1rem; margin-top:1.9rem; flex-wrap:wrap; }

  /* ---------- proof strip ---------- */
  .proof-strip{ margin-top: 4rem; }
  .proof-trusted{
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color: var(--gold-deep); font-weight:700; margin-bottom:.5rem;
  }
  .proof-trusted-names{
    font-family: var(--font-display);
    font-size:1.05rem;
    color: var(--forest);
    margin-bottom: 2rem;
  }
  .proof-cards{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.2rem;
  }
  .proof-card{
    background: var(--white);
    border: 1.5px solid var(--gold-light);
    border-radius: 20px;
    padding: 1.5rem 1.4rem;
  }
  .proof-card .proof-stat{
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--clay);
    line-height:1.1;
  }
  .proof-card .proof-desc{
    font-size:.86rem;
    color: var(--forest);
    line-height:1.5;
    margin-top:.5rem;
  }

  .intro-video-wrap{
    position:relative;
    width:100%;
    max-width:320px;
    aspect-ratio: 9/16;
    margin: 0 auto 1.4rem;
    border-radius: 26px;
    overflow:hidden;
    background: var(--forest-deep);
    box-shadow: 0 14px 34px rgba(18,38,27,.24);
  }
  .intro-video-wrap video{ width:100%; height:100%; object-fit:cover; display:block; }
  .intro-eyebrow{ font-family:var(--font-script); font-style:italic; font-weight:600; font-size:1.1rem; color:var(--clay); margin-bottom:.6rem; display:block; }

  /* ---------- contact CTA video ---------- */
  .contact-intro{
    display:flex;
    align-items:center;
    gap:2.2rem;
    flex-wrap:wrap;
    margin-bottom: .5rem;
  }
  .contact-intro-text{ flex:1 1 320px; }
  .cta-video-wrap{
    position:relative;
    width:240px;
    aspect-ratio:9/16;
    border-radius:24px;
    overflow:hidden;
    background: var(--forest-deep);
    border: 3px solid var(--gold);
    box-shadow: 0 14px 30px rgba(192,138,46,.24);
    flex-shrink:0;
  }
  .cta-video-wrap video{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:640px){
    .contact-intro{ flex-direction:column; align-items:flex-start; }
    .cta-video-wrap{ width:210px; margin:0 auto; align-self:center; }
  }

  /* ================= PORTFOLIO ================= */
  #portfolio{ background: var(--cream); }
  #portfolio .eyebrow{ color: var(--clay); }
  #portfolio .headline{ color: var(--forest-deep); }
  #portfolio .section-sub{ color: var(--forest); }

  .work-subhead{
    font-family: var(--font-display);
    font-size:1.3rem;
    color: var(--forest-deep);
    margin-top: 2.4rem;
  }

  .social-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-top:.5rem;
    font-size:.88rem;
    font-weight:600;
    color: var(--clay);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .social-link svg{ width:15px; height:15px; flex-shrink:0; }

  .notebook-body{
    background: var(--white);
    border-radius: 26px;
    padding: 3.2rem 2.6rem 2.6rem;
    box-shadow: 0 24px 54px rgba(60,40,10,.1);
    position:relative;
    z-index:1;
    margin-top: 1.6rem;
  }

  /* ---------- breakout callout (mental health, outside the main lane) ---------- */
  .breakout-section{
    margin-top: 4.4rem;
    background: linear-gradient(160deg, rgba(181,101,125,.12), rgba(181,101,125,.03));
    border: 1.5px solid rgba(181,101,125,.35);
    border-radius: 30px;
    padding: 3rem 2.8rem;
  }
  .breakout-badge{
    display:inline-block;
    background: var(--rose);
    color: var(--white);
    font-weight:800;
    font-size:.78rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:.5rem 1.15rem;
    border-radius:999px;
    margin-bottom:1.1rem;
  }
  .breakout-intro{
    font-size:1rem;
    color: var(--forest);
    max-width:640px;
    line-height:1.65;
    margin-bottom:2.4rem;
  }
  .breakout-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 2.8rem;
    align-items:start;
  }
  .breakout-box-lg{ max-width:400px; }
  .breakout-box-sm{ max-width:270px; }
  @media (max-width:820px){
    .breakout-grid{ grid-template-columns:1fr; }
    .breakout-section{ padding:2.4rem 1.7rem; }
    .breakout-box-lg, .breakout-box-sm{ max-width:320px; }
  }
  .frame-item{ transition: opacity .25s ease; }
  .frame-item.is-hidden{ display:none; }

  .frame-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3.2rem 2.4rem;
    max-width: 1160px;
    margin: 0 auto;
  }
  .frame-item{ text-align:center; }
  .frame-box{
    position:relative;
    width:100%;
    max-width:360px;
    aspect-ratio: 9/16;
    margin:0 auto;
    border-radius: 26px;
    overflow:hidden;
    background: var(--forest-deep);
    box-shadow: 0 16px 36px rgba(18,38,27,.22);
  }
  .frame-video-wrap{
    position:absolute;
    inset: 0;
    overflow:hidden;
    border-radius:inherit;
    background: var(--forest-deep);
    z-index:1;
  }
  .frame-video-wrap video{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .4s ease;
  }
  .frame-item:hover .frame-video-wrap video{ transform: scale(1.05); }
  .frame-box .video-play{ width:58px; height:58px; }
  .frame-box .video-play svg{ width:21px; height:21px; }
  .frame-caption{ margin-top: 1.1rem; padding: 0 .5rem; }
  .frame-caption .cap-title{
    font-family: var(--font-display);
    font-size:1.02rem;
    font-weight:600;
    color: var(--forest-deep);
    line-height:1.35;
  }
  .frame-caption .cap-note{
    font-size:.85rem;
    color: var(--forest);
    line-height:1.65;
    margin-top:.6rem;
  }
  .frame-caption .cap-tag{
    display:inline-block;
    margin-top:.5rem;
    font-size:.62rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: var(--forest-deep);
    background: var(--gold-light);
    padding:.22rem .65rem;
    border-radius:999px;
    font-weight:700;
  }
  .frame-caption .cap-stats{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.4rem .85rem;
    margin-top:.65rem;
  }
  .frame-caption .cap-stats span{
    font-size:.82rem;
    color: var(--forest);
  }
  .frame-caption .cap-stats strong{
    color: var(--forest-deep);
    font-weight:800;
  }

  /* ================= SERVICES ================= */
  #services{ background: var(--cream); }
  .service-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.4rem;
    margin-top: 3rem;
  }
  .service-card{
    background: var(--white);
    border: 2px solid var(--gold);
    border-radius: 28px 10px 28px 10px;
    padding: 2rem 1.7rem 1.8rem;
    position:relative;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .service-card::before{
    content:'';
    position:absolute; inset:7px;
    border: 1px solid var(--gold-light);
    border-radius: 22px 6px 22px 6px;
    pointer-events:none;
  }
  .service-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(192,138,46,.18); }
  .service-card .icon{ width:40px; height:40px; stroke: var(--clay); fill:none; stroke-width:1.6; margin-bottom: 1rem;}
  .service-card h3{ font-family: var(--font-display); font-size:1.15rem; color: var(--forest-deep); margin-bottom:.5rem;}
  .service-card p{ font-size:.9rem; color: var(--forest); line-height:1.55; }

  .fit-frame{ margin-top: 3.2rem; max-width: 640px; border-radius: 36px; padding-top: 3rem; }
  .fit-frame::before{ border-radius: 28px; }
  .fit-frame ul{ list-style:none; margin-top:1rem; }
  .fit-frame li{ display:flex; gap:.6rem; font-size:.95rem; color: var(--forest); margin-bottom:.6rem; align-items:flex-start; }
  .fit-frame li svg{ flex-shrink:0; width:18px; height:18px; stroke: var(--palm); fill:none; stroke-width:2; margin-top:.15rem; }
  .fit-frame .fit-intro{ font-size:.92rem; color:var(--forest); line-height:1.6; margin-bottom:.3rem; text-align:center; }
  .fit-frame .fit-closer{ font-size:.95rem; color:var(--forest-deep); font-weight:700; text-align:center; margin-top:1.2rem; font-family:var(--font-display); }

  .narrative-block{ margin-top: 3.2rem; max-width: 680px; }
  .narrative-block .narrative-label{
    font-family:var(--font-script);
    font-style:italic;
    font-weight:600;
    font-size:1.05rem;
    color: var(--clay);
    display:block;
    margin-bottom:.4rem;
  }
  .narrative-block p{ font-size:1rem; color: var(--forest); line-height:1.7; }

  .positioning-quote{
    margin-top: 3.2rem;
    max-width: 700px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    color: var(--forest-deep);
    line-height:1.4;
    border-left: 3px solid var(--gold);
    padding-left: 1.4rem;
  }

  /* ================= PRICING ================= */
  #pricing{ background: var(--tone-pricing); color: var(--ink); }
  #pricing .eyebrow{ color: var(--clay); }
  #pricing .headline{ color: var(--forest-deep); }
  #pricing .section-sub{ color: var(--forest); }

  .price-group{ margin-top: 3rem; }
  .price-group-label{
    font-family: var(--font-display);
    font-size:1.3rem;
    color: var(--gold-deep);
    margin-bottom: 1.2rem;
    display:flex;
    align-items:center;
    gap:.7rem;
  }
  .price-group-label::after{ content:''; flex:1; height:1px; background: rgba(192,138,46,.28); }

  .price-cards{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.3rem;
  }
  .price-card{
    background: var(--white);
    color: var(--ink);
    border-radius: 140px 140px 20px 20px;
    padding: 2.6rem 1.7rem 1.9rem;
    text-align:center;
    position:relative;
    border: 2px solid var(--gold);
    box-shadow: 0 14px 34px rgba(192,138,46,.1);
  }
  .price-card .p-name{ font-family: var(--font-display); font-size:1.2rem; color: var(--forest-deep); }
  .price-card .p-price{ font-family: var(--font-display); font-size:2rem; color: var(--clay); margin:.3rem 0 .7rem; }
  .price-card .p-tag{ font-size:.82rem; color: var(--forest); margin-bottom:1rem; min-height:2.4em; }
  .price-card ul{ list-style:none; text-align:left; font-size:.82rem; color: var(--forest); line-height:1.65; margin-bottom:1.3rem; }
  .price-card ul li::before{ content:'✦ '; color: var(--gold); }
  .price-card .btn{ width:100%; justify-content:center; }
  .price-mini{ transform: scale(.97); }

  .addon-cards{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
  }
  .addon-card{
    background: var(--white);
    border: 1px solid rgba(192,138,46,.25);
    border-radius: 16px;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 10px 26px rgba(192,138,46,.08);
  }
  .addon-name{
    font-family: var(--font-display);
    font-size:1.02rem;
    color: var(--forest-deep);
    margin-bottom:.5rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
    flex-wrap:wrap;
  }
  .addon-price{ color: var(--gold-deep); font-size:.92rem; }
  .addon-card p{ font-size:.85rem; color: var(--forest); line-height:1.55; }

  .urgency-line{
    margin-top: 2.6rem;
    text-align:center;
    font-family: var(--font-script);
    font-style:italic;
    font-weight:600;
    font-size:1.1rem;
    color: var(--gold-deep);
  }

  /* ================= CONTACT ================= */
  #contact{ background: var(--tone-contact); }
  .closing-cta{
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-radius: 24px;
    padding: 1.8rem 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    flex-wrap:wrap;
    margin-bottom: 3rem;
  }
  .closing-cta p{
    font-family: var(--font-display);
    font-size:1.2rem;
    color: var(--forest-deep);
    max-width:38ch;
    line-height:1.35;
  }
  .closing-cta .btn-ghost{
    border-color: var(--forest-deep);
    color: var(--forest-deep);
    flex-shrink:0;
  }
  .closing-cta .btn-ghost::before{ background: var(--forest-deep); }
  @media (max-width:640px){
    .closing-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
  }
  .contact-grid{
    display:grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 2.4rem;
    margin-top: 3rem;
    align-items:start;
  }
  .contact-info p{ font-size:.95rem; color: var(--forest); line-height:1.7; margin-bottom:1rem; }
  .contact-info .info-row{ margin-bottom:1.5rem; }
  .contact-info .info-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--gold-deep); font-weight:700; margin-bottom:.3rem; }
  .contact-info .info-value{ font-family: var(--font-display); font-size:1.15rem; color: var(--forest-deep); }
  .contact-info a.info-value{ text-decoration:none; border-bottom: 1.5px solid var(--gold); }

  form#contactForm{
    background: var(--white);
    border: 2px solid var(--gold);
    border-radius: 32px;
    padding: 2rem;
  }
  .field{ margin-bottom: 1.15rem; }
  .field label{ display:block; font-size:.78rem; font-weight:700; color: var(--forest-deep); margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.05em; }
  .field input, .field select, .field textarea{
    width:100%;
    border: 1.5px solid var(--cream-deep);
    background: var(--cream);
    border-radius: 12px;
    padding: .75rem .9rem;
    font-family: var(--font-body);
    font-size:.92rem;
    color: var(--ink);
    outline:none;
    transition: border-color .15s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .field textarea{ resize:vertical; min-height:100px; }
  #formStatus{ margin-top:1rem; font-size:.88rem; font-weight:600; display:none; }
  #formStatus.show{ display:block; }
  #formStatus.success{ color: var(--palm); }
  #formStatus.error{ color: var(--clay); }

  /* ================= FAQ ================= */
  #faq{ background: var(--tone-faq); }
  .faq-group{ margin-top: 2.6rem; max-width: 760px; }
  .faq-group-title{
    font-family: var(--font-display);
    font-size:1.25rem;
    color: var(--forest-deep);
    margin-bottom: 1.1rem;
  }
  .faq-item{
    background: var(--white);
    border: 1.5px solid var(--gold-light);
    border-radius: 14px;
    padding: .2rem 1.3rem;
    margin-bottom: .8rem;
  }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    font-weight:700;
    font-size:.98rem;
    color: var(--forest-deep);
    padding: 1rem 1.8rem 1rem 0;
    position:relative;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+';
    position:absolute; right:0; top:50%;
    transform: translateY(-50%);
    font-size:1.3rem;
    color: var(--gold);
    transition: transform .2s ease;
  }
  .faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
  .faq-item p, .faq-item ul{ font-size:.9rem; color: var(--forest); line-height:1.6; padding-bottom:1.1rem; }
  .faq-item ul{ padding-left:1.2rem; margin-top:.3rem; }

  .objection-box{
    background: var(--forest-deep);
    color: var(--cream);
    border-radius: 22px;
    padding: 2rem 2rem 1.8rem;
    margin-top: 2.8rem;
    max-width: 760px;
  }
  .objection-box h3{
    font-family: var(--font-display);
    font-size:1.3rem;
    color: var(--gold-light);
    margin-bottom: 1rem;
  }
  .objection-box p{ font-size:.92rem; line-height:1.65; color: rgba(250,243,225,.9); margin-bottom:.8rem; }
  .objection-box ul{ list-style:none; margin: .8rem 0 1.2rem; }
  .objection-box li{ font-size:.92rem; line-height:1.6; color: rgba(250,243,225,.9); margin-bottom:.7rem; padding-left:1.3rem; position:relative; }
  .objection-box li::before{ content:'✦'; position:absolute; left:0; color: var(--gold-light); }
  .objection-box .objection-closer{ font-style:italic; color: var(--gold-light); margin-bottom:0; }

  .process-steps{
    margin-top: 2.8rem;
    max-width: 760px;
    counter-reset: step;
  }
  .process-steps-title{
    font-family: var(--font-display);
    font-size:1.25rem;
    color: var(--forest-deep);
    margin-bottom: 1.2rem;
  }
  .process-step{
    display:flex;
    gap:1rem;
    margin-bottom: 1.1rem;
    align-items:flex-start;
  }
  .process-step .step-num{
    flex-shrink:0;
    width:30px; height:30px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--forest-deep);
    font-weight:800;
    font-size:.85rem;
    display:flex; align-items:center; justify-content:center;
  }
  .process-step p{ font-size:.92rem; color: var(--forest); line-height:1.55; padding-top:.15rem; }
  /* ---------- responsive ---------- */
  @media (max-width: 880px){
    .home-grid{ grid-template-columns:1fr; gap:2.2rem; }
    .contact-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
    .screen{ padding: 5.5rem 6vw 8rem; }
  }
  @media (max-width:480px){
    .frame-grid{ grid-template-columns: 1fr; gap: 2.6rem; max-width:340px; margin-left:auto; margin-right:auto; }
    .frame-box{ max-width:300px; }
    .intro-video-wrap{ max-width:240px; }
    .cta-video-wrap{ width:190px; }
    .proof-cards{ grid-template-columns:1fr; }
  }