:root{
    color-scheme:dark;
    --navy-deep:#000000;
    --navy:#080808;
    --navy-soft:#121212;
    --sun:#ff6b6b;
    --sun-light:#87ceeb;
    --paper:#e6e6e6;
    --paper-dim:#a6a6a6;
    --line: rgba(135,206,235,0.22);
    --img-hero:url("/assets/hero-bg.webp");
    --img-about:url("/assets/about-bg.webp");
    --img-landing:url("/assets/service-landing.webp");
    --img-logo:url("/assets/service-logo.webp");
    --img-banners:url("/assets/service-banners.webp");
    --img-presentations:url("/assets/service-presentations.webp");
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  .skip-link{
    position:absolute; top:-100px; left:12px; z-index:300;
    background:var(--sun); color:var(--navy-deep);
    padding:14px 22px;
    font-family:'Montserrat',sans-serif; font-size:0.85rem; font-weight:600;
    text-decoration:none;
    transition:top .2s ease;
  }
  .skip-link:focus{ top:12px; }
  html{scroll-behavior:smooth;}
  body{
    background:var(--navy-deep);
    color:var(--paper);
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:var(--sun);color:var(--navy-deep);}

  a{color:inherit;text-decoration:none;}
  .display{font-family:'Cinzel Decorative',serif;}

  /* subtle sun-ray texture on dark navy */
  .rays{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,107,107,0.10), transparent 60%),
      none;
    mask-image: radial-gradient(ellipse 900px 700px at 50% -10%, black, transparent 70%);
  }

  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 6vw;
    background:linear-gradient(to bottom, rgba(0,0,0,0.92), transparent);
    backdrop-filter:blur(2px);
  }
  .brand{
    font-family:'Cinzel Decorative',serif;
    font-size:1.05rem;
    letter-spacing:0.04em;
    color:var(--sun-light);
    text-decoration:none;
  }
  .brand span{color:var(--paper);}
  .nav-panel{display:flex; align-items:center; gap:clamp(14px,3vw,34px);}
  .nav-panel-header{ display:none; }
  .nav-links{display:flex; align-items:center; gap:inherit; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;}
  .nav-links a{opacity:0.8; transition:opacity .25s, color .25s; position:relative;}
  .nav-links a:hover, .nav-links a:focus-visible{opacity:1; color:var(--sun);}
  .nav-links a:focus-visible{outline:2px solid var(--sun); outline-offset:4px; border-radius:2px;}

  /* CONTACT DROPDOWN (header) */
  .contact-dropdown{ position:relative; }
  .contact-toggle{
    display:inline-flex; align-items:center; gap:7px;
    background:none; border:none; padding:0; margin:0;
    font-family:inherit; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--paper); opacity:0.8; cursor:pointer;
    transition:opacity .25s, color .25s;
  }
  .contact-toggle:hover, .contact-toggle:focus-visible, .contact-toggle[aria-expanded="true"]{ opacity:1; color:var(--sun); }
  .contact-toggle:focus-visible{ outline:2px solid var(--sun); outline-offset:4px; border-radius:2px; }
  .contact-toggle .chev{ transition:transform .25s ease; flex-shrink:0; }
  .contact-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .contact-menu{
    position:absolute; top:calc(100% + 16px); right:0;
    min-width:250px;
    background:var(--navy-deep);
    border:1px solid var(--line);
    box-shadow:0 20px 50px rgba(0,0,0,0.18);
    padding:8px;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:60;
  }
  .contact-dropdown.open .contact-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .contact-menu a{
    display:flex; flex-direction:column; gap:3px;
    padding:12px 14px; border-radius:3px;
    transition:background .2s ease;
  }
  .contact-menu a:hover, .contact-menu a:focus-visible{ background:rgba(255,107,107,0.1); }
  .contact-menu .cm-label{ font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--sun); }
  .contact-menu .cm-value{ font-size:0.85rem; color:var(--paper); font-weight:500; word-break:break-word; }
  .contact-menu .cm-fullpage{
    display:block; text-align:center;
    margin-top:4px; padding:12px 14px;
    border-top:1px solid var(--line);
    font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--sun); font-weight:600;
  }
  .contact-menu .cm-fullpage:hover{ background:rgba(255,107,107,0.1); }
  .nav-links a.active{ color:var(--sun); }
  .nav-links a.active::after{ right:0; }

  /* MOBILE MENU TOGGLE */
  .menu-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:36px; height:36px; padding:0; margin:0;
    background:none; border:none; cursor:pointer; z-index:60; position:relative;
  }
  .menu-toggle span{ display:block; width:100%; height:2px; background:var(--paper); 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); }

  section{position:relative; z-index:1;}

  /* HERO */
  .hero{
    min-height:100svh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:120px 6vw 80px;
    position:relative;
    overflow:hidden;
  }
  .hero-video{
    position:absolute; inset:0; z-index:-2;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 35%;
    filter:saturate(0.8) brightness(0.8);
    transform:scale(1.04);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.3), rgba(0,0,0,0.6) 65%),
      linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.58) 55%, var(--navy-deep) 90%);
  }
  .seal-wrap{
    width:clamp(150px,20vw,210px);
    height:clamp(150px,20vw,210px);
    margin-bottom:34px;
    position:relative;
  }
  .seal-spin{ animation:spin 40s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .seal-wrap .core{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:22%;
  }
  .seal-wrap .core img{
    width:100%; height:100%; object-fit:contain;
    filter:none;
  }

  .eyebrow{
    font-size:0.72rem; letter-spacing:0.32em; text-transform:uppercase;
    color:var(--sun-light); opacity:0.85; margin-bottom:18px;
  }
  h1.studio-name{
    font-family:'Cinzel Decorative',serif;
    font-weight:700;
    font-size:clamp(2.4rem,7vw,5.2rem);
    line-height:1.05;
    color:var(--paper);
    text-shadow:none;
  }
  h1.studio-name em{
    font-style:normal; color:var(--sun);
  }
  .tagline{
    margin-top:22px;
    font-size:clamp(0.95rem,1.6vw,1.15rem);
    color:var(--paper-dim);
    max-width:34ch;
    font-weight:300;
  }
  .founder-credit{
    margin-top:14px;
    font-size:0.78rem;
    letter-spacing:0.08em;
    color:var(--paper-dim);
    text-transform:uppercase;
  }
  .founder-credit b{ color:var(--sun-light); font-weight:600; letter-spacing:0.03em; text-transform:none; }

  .cta-row{
    margin-top:44px;
    display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px;
    font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
    border-radius:2px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    border:1px solid var(--sun);
  }
  .btn:focus-visible{ outline:2px solid var(--sun-light); outline-offset:3px; }
  .btn-solid{
    background:var(--sun); color:var(--navy-deep);
  }
  .btn-solid:hover{ background:var(--sun-light); transform:translateY(-2px); }
  .btn-ghost{ color:var(--sun-light); }
  .btn-ghost:hover{ background:rgba(255,107,107,0.1); transform:translateY(-2px); }

  .scroll-hint{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--paper-dim);
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .scroll-hint .stem{
    width:1px; height:34px; background:linear-gradient(var(--sun), transparent);
    animation:drip 2.2s ease-in-out infinite;
  }
  @keyframes drip{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

  /* DIVIDER */
  .divider{
    display:flex; align-items:center; gap:18px;
    max-width:1100px; margin:0 auto; padding:0 6vw;
  }
  .divider .line{ flex:1; height:1px; background:var(--line); }
  .divider .mark{ font-family:'Cinzel Decorative',serif; color:var(--sun); font-size:0.85rem; }

  /* SERVICES */
  .services{ padding:120px 6vw; max-width:1200px; margin:0 auto; }
  .section-head{ text-align:center; margin-bottom:70px; }
  .section-eyebrow{ font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--sun-light); margin-bottom:16px; }
  h2{
    font-family:'Cinzel Decorative',serif;
    font-size:clamp(1.7rem,4vw,2.6rem);
    color:var(--paper);
    font-weight:700;
  }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--navy-deep);
    padding:44px 30px;
    transition:background .3s ease;
  }
  .service-card:hover{ background:var(--navy-soft); }
  .service-card.has-photo{
    position:relative;
    background-size:cover;
    background-position:center;
    isolation:isolate;
  }
  .service-card.has-photo::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.95) 78%);
    transition:background .3s ease;
  }
  .service-card.has-photo:hover::before{
    background:linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.9) 78%);
  }
  .service-num{
    font-family:'Cinzel Decorative',serif;
    color:var(--sun);
    font-size:0.85rem;
    opacity:0.8;
    display:block;
    margin-bottom:20px;
  }
  .service-card h3{
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:1.05rem;
    letter-spacing:0.02em;
    margin-bottom:12px;
    color:var(--paper);
  }
  .service-card p{
    font-size:0.85rem;
    line-height:1.7;
    color:var(--paper-dim);
    font-weight:300;
  }

  /* ABOUT */
  .about{
    background:var(--navy);
    padding:120px 6vw;
    position:relative;
    overflow:hidden;
  }
  .about::before{
    content:"";
    position:absolute; inset:0; z-index:0;
    background-image:var(--img-about);
    background-size:cover;
    background-position:center;
    filter:saturate(0.5) brightness(0.5);
  }
  .about::after{
    content:"";
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, var(--navy) 0%, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.9) 80%, var(--navy) 100%);
  }
  .about-inner{
    max-width:780px; margin:0 auto; text-align:center;
    position:relative; z-index:1;
  }
  .about blockquote{
    font-family:'Cinzel Decorative',serif;
    font-size:clamp(1.15rem,2.6vw,1.7rem);
    line-height:1.6;
    color:var(--paper);
    font-weight:400;
  }
  .about blockquote .accent{ color:var(--sun); }
  .about-sign{
    margin-top:36px;
    font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--paper-dim);
  }
  .about-sign b{ color:var(--sun-light); font-weight:600; }
  .about-desc{
    font-size:clamp(0.9rem,1.6vw,1.02rem);
    line-height:1.85;
    color:var(--paper-dim);
    font-weight:300;
    max-width:52ch;
    margin:0 auto 50px;
  }

  /* PORTFOLIO CTA */
  .portfolio{
    padding:130px 6vw;
    text-align:center;
    max-width:820px; margin:0 auto;
  }
  .portfolio h2{ margin-bottom:20px; }
  .portfolio p{ color:var(--paper-dim); font-weight:300; max-width:44ch; margin:0 auto 40px; line-height:1.75; }

  .portfolio-link{
    display:inline-flex; align-items:center; gap:14px;
    padding:20px 40px;
    border:1px solid var(--sun);
    font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
    color:var(--sun-light);
    transition:all .3s ease;
    position:relative; overflow:hidden;
    max-width:100%;
    text-align:center;
    white-space:normal;
  }
  .portfolio-link::before{
    content:""; position:absolute; inset:0; background:var(--sun);
    transform:translateX(-101%); transition:transform .35s ease; z-index:-1;
  }
  .portfolio-link:hover{ color:var(--navy-deep); background:transparent; }
  .portfolio-link:hover::before{ transform:translateX(0); }
  .portfolio-link:focus-visible{ outline:2px solid var(--sun-light); outline-offset:4px; }

  /* CONTACT */
  .contact{
    background:var(--navy);
    padding:130px 6vw 100px;
  }
  .contact-grid{
    max-width:1000px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:40px;
    text-align:center;
  }
  .contact-item{
    padding:40px 24px;
    border:1px solid var(--line);
  }
  .contact-item .label{
    font-size:0.68rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--sun-light); margin-bottom:18px; display:block;
  }
  .contact-item a.value{
    font-family:'Cinzel Decorative',serif;
    font-size:clamp(1rem,2vw,1.3rem);
    color:var(--paper);
    word-break:break-word;
    transition:color .25s;
    display:inline-block;
  }
  .contact-item a.value:hover{ color:var(--sun); }
  .contact-item .sub{
    display:block; margin-top:12px; font-size:0.72rem; color:var(--paper-dim); font-weight:300;
  }

  /* FOOTER */
  footer{
    padding:50px 6vw 40px;
    display:flex; flex-wrap:wrap; gap:20px;
    align-items:center; justify-content:space-between;
    border-top:1px solid var(--line);
  }
  .footer-brand{ font-family:'Cinzel Decorative',serif; font-size:0.85rem; color:var(--sun-light); }
  .socials{ display:flex; align-items:center; gap:18px; }
  .socials a{
    color:var(--paper-dim);
    opacity:0.85;
    display:inline-flex; align-items:center; justify-content:center;
    transition:opacity .25s, color .25s, transform .25s;
  }
  .socials a:hover, .socials a:focus-visible{ opacity:1; color:var(--sun); transform:translateY(-2px); }
  .copyright{ font-size:0.68rem; color:var(--paper-dim); font-weight:300; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* staggered entrance for grid items — each child animates slightly after the last */
  .services.in .service-card,
  .testimonials.in .testimonial-card,
  .how.in .how-step,
  .faq.in .faq-item,
  .teaser.in .teaser-icon-item{
    animation:stagger-in .6s ease backwards;
  }
  .services.in .service-card:nth-child(1),  .testimonials.in .testimonial-card:nth-child(1),  .how.in .how-step:nth-child(1),  .faq.in .faq-item:nth-child(1),  .teaser.in .teaser-icon-item:nth-child(1){ animation-delay:.05s; }
  .services.in .service-card:nth-child(2),  .testimonials.in .testimonial-card:nth-child(2),  .how.in .how-step:nth-child(2),  .faq.in .faq-item:nth-child(2),  .teaser.in .teaser-icon-item:nth-child(2){ animation-delay:.15s; }
  .services.in .service-card:nth-child(3),  .testimonials.in .testimonial-card:nth-child(3),  .how.in .how-step:nth-child(3),  .faq.in .faq-item:nth-child(3),  .teaser.in .teaser-icon-item:nth-child(3){ animation-delay:.25s; }
  .services.in .service-card:nth-child(4),  .how.in .how-step:nth-child(4),  .faq.in .faq-item:nth-child(4),  .teaser.in .teaser-icon-item:nth-child(4){ animation-delay:.35s; }
  .services.in .service-card:nth-child(5),  .faq.in .faq-item:nth-child(5),  .teaser.in .teaser-icon-item:nth-child(5){ animation-delay:.45s; }
  .services.in .service-card:nth-child(6),  .teaser.in .teaser-icon-item:nth-child(6){ animation-delay:.55s; }
  .services.in .service-card:nth-child(7),  .teaser.in .teaser-icon-item:nth-child(7){ animation-delay:.65s; }
  @keyframes stagger-in{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* hero entrance — plays once on page load, independent of scroll */
  .hero-enter{ opacity:0; transform:translateY(20px); animation:hero-in .9s ease forwards; }
  .hero-enter.hero-enter-1{ animation-delay:.1s; }
  .hero-enter.hero-enter-2{ animation-delay:.25s; }
  .hero-enter.hero-enter-3{ animation-delay:.4s; }
  .hero-enter.hero-enter-4{ animation-delay:.55s; }
  @keyframes hero-in{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* card hover polish */
  .service-card, .testimonial-card{ transition:transform .3s ease, box-shadow .3s ease, background .3s ease; }
  .service-card:hover{ transform:translateY(-4px); }
  .testimonial-card:hover{ transform:translateY(-4px); }

  /* button micro-interaction */
  .btn, .portfolio-link, .chat-qr-btn, .qf-field select, #qCalc{ transition:transform .2s ease, box-shadow .2s ease, background .25s ease, color .25s ease, border-color .2s ease; }
  .btn:active, .portfolio-link:active{ transform:scale(0.97); }
  .btn-solid:hover{ transform:translateY(-2px); }

  /* nav link underline sweep */
  .nav-links a{ position:relative; }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px;
    background:var(--sun); transition:right .25s ease;
  }
  .nav-links a:hover::after{ right:0; }

  /* chat launcher — one-time gentle attention pulse on load, not infinite */
  
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .seal-spin{ animation:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .scroll-hint .stem{ animation:none; }
    .hero-enter{ opacity:1; transform:none; animation:none; }
    .service-grid .service-card, .testimonial-grid .testimonial-card, .how-grid .how-step, .faq-list .faq-item, .teaser-icon-grid .teaser-icon-item{ animation:none; }
    .chat-launcher{ animation:none; }
    .service-card:hover, .testimonial-card:hover, .btn-solid:hover{ transform:none; }
  }

  @media (max-width:768px){
    header{ padding:18px 5vw; }
    .menu-toggle{ display:flex; }

    .nav-overlay{
      position:fixed; inset:0;
      background:rgba(0,0,0,0.5);
      opacity:0; visibility:hidden;
      transition:opacity .35s ease, visibility .35s;
      z-index:110;
    }
    .nav-overlay.open{ opacity:1; visibility:visible; }

    .nav-panel{
      position:fixed; top:0; right:0; bottom:0;
      width:min(310px, 82vw);
      height:100vh; height:100dvh;
      background:var(--navy-deep);
      border-top:none; border-left:1px solid var(--sun);
      box-shadow:-20px 0 50px rgba(0,0,0,0.25);
      flex-direction:column; align-items:stretch; gap:0;
      max-height:none; overflow-y:auto;
      transform:translateX(100%);
      transition:transform .35s cubic-bezier(.4,0,.2,1);
      z-index:120;
    }
    .nav-panel.open{ transform:translateX(0); max-height:none; }

    .nav-panel-header{
      display:flex; align-items:center; justify-content:space-between;
      padding:20px 6vw;
      border-bottom:1px solid var(--line);
    }
    .nav-panel-title{
      font-family:'Cinzel Decorative',serif;
      font-size:1rem; color:var(--sun);
    }
    .nav-panel-close{
      background:none; border:none; cursor:pointer;
      font-size:1.7rem; line-height:1; color:var(--paper-dim);
      padding:2px 6px;
    }
    .nav-panel-close:hover{ color:var(--sun); }

    .nav-links{ flex-direction:column; align-items:stretch; gap:0; padding:8px 6vw 4px; font-size:0.78rem; }
    .nav-links a{ padding:15px 0; border-bottom:1px solid var(--line); }
    .contact-dropdown{ padding:4px 6vw 22px; }
    .contact-toggle{ width:100%; justify-content:space-between; padding:15px 0; font-size:0.78rem; }
    .contact-menu{
      position:static; margin-top:4px;
      opacity:1; visibility:visible; pointer-events:auto; transform:none;
      box-shadow:none; border:none; background:transparent; padding:0;
      display:none;
    }
    .contact-dropdown.open .contact-menu{ display:block; }
    .services, .about, .portfolio, .contact{ padding-left:6vw; padding-right:6vw; }
    footer{ flex-direction:column; text-align:center; }
    .socials{ justify-content:center; }
    .portfolio-link{ padding:18px 24px; font-size:0.74rem; }
  }
  /* GET A QUOTE */
  .quote{
    background:var(--navy);
    padding:120px 6vw;
    text-align:center;
  }
  .quote-intro{
    max-width:640px; margin:18px auto 50px;
    color:var(--paper-dim); line-height:1.7;
  }
  .quote-form{
    max-width:720px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr;
    gap:22px 24px;
    text-align:left;
  }
  .qf-field{ display:flex; flex-direction:column; gap:9px; }
  .qf-field span{
    font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--sun-light);
  }
  .qf-field select, .qf-field input, .qf-field textarea{
    font-family:inherit; font-size:0.9rem; color:var(--paper);
    background:var(--navy-deep);
    border:1px solid var(--line);
    padding:13px 14px;
    width:100%;
  }
  .qf-field select:focus, .qf-field input:focus, .qf-field textarea:focus{
    outline:none; border-color:var(--sun);
  }
  .qf-field textarea{ resize:vertical; line-height:1.5; }
  .qf-full{ grid-column:1 / -1; }
  #qCalc{ border:none; cursor:pointer; justify-self:start; }
  .quote-hints{ display:flex; flex-wrap:wrap; gap:8px; margin-top:-6px; }
  .qhint{
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.76rem; color:var(--paper-dim);
    background:rgba(255,107,107,0.08);
    border:1px solid var(--line);
    padding:7px 12px;
    line-height:1.3;
  }

  .quote-result{
    max-width:520px; margin:50px auto 0;
    padding:40px 30px;
    border:1px solid var(--sun);
    background:var(--navy-deep);
  }
  .qr-range{
    font-family:'Cinzel Decorative',serif;
    font-size:clamp(1.6rem,4vw,2.2rem);
    color:var(--sun);
  }
  .qr-note{ color:var(--paper-dim); margin:16px 0 26px; line-height:1.6; font-size:0.88rem; }

  @media (max-width:640px){
    .quote-form{ grid-template-columns:1fr; }
    #qCalc{ justify-self:stretch; }
  }

  /* HOW IT WORKS */
  .how{
    padding:110px 6vw 90px;
    max-width:1200px; margin:0 auto;
    text-align:center;
  }
  .how-grid{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:36px;
    text-align:left;
  }
  .how-step{ position:relative; }
  .how-num{
    font-family:'Cinzel Decorative',serif;
    font-size:1.6rem;
    color:var(--sun);
    display:block;
    margin-bottom:10px;
  }
  .how-step h3{
    font-family:'Cinzel Decorative',serif;
    font-size:1.1rem;
    color:var(--paper);
    margin-bottom:10px;
  }
  .how-step p{ color:var(--paper-dim); line-height:1.6; font-size:0.9rem; }

  .trust-strip{
    padding:70px 6vw;
    max-width:1200px; margin:0 auto;
  }
  .trust-row{
    display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  }
  .trust-badge{
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--sun);
    border:1px solid var(--line);
    padding:10px 20px;
  }

  /* HOME PAGE TEASERS */
  .teaser{
    padding:110px 6vw;
    max-width:1080px; margin:0 auto;
    text-align:center;
  }
  .teaser-icon-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin:44px 0 48px;
  }
  .teaser-icon-item{
    background:var(--navy-deep);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    padding:32px 16px;
    color:var(--sun);
    transition:background .3s ease, color .3s ease;
  }
  .teaser-icon-item:hover{ background:var(--navy-soft); }
  .teaser-icon-item span{
    font-size:0.78rem; color:var(--paper);
    text-align:center; line-height:1.4;
  }
  .quote-cta{
    background:var(--navy);
    padding:110px 6vw;
    max-width:700px; margin:0 auto;
    text-align:center;
  }
  .quote-cta p{ color:var(--paper-dim); line-height:1.7; margin:20px 0 40px; }
  .testimonials.teaser-parent{ padding-bottom:60px; }
  .teaser-grid{ max-width:600px; margin-left:auto; margin-right:auto; grid-template-columns:1fr; }
  #testimonial-teaser .btn{ margin-top:36px; }
  .final-cta{
    padding:130px 6vw 150px;
    max-width:700px; margin:0 auto;
    text-align:center;
  }
  .final-cta h2{ font-family:'Cinzel Decorative',serif; font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:20px; }
  .final-cta p{ color:var(--paper-dim); line-height:1.7; margin-bottom:40px; }

  /* TESTIMONIALS */
  .testimonials{
    background:var(--navy);
    padding:110px 6vw;
    text-align:center;
  }
  .testimonial-grid{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    max-width:1100px; margin-left:auto; margin-right:auto;
  }
  .testimonial-card{
    background:var(--navy-deep);
    padding:40px 30px;
    text-align:left;
  }
  .testimonial-stars{ color:var(--sun); font-size:0.9rem; letter-spacing:0.15em; margin-bottom:16px; }
  .testimonial-quote{ color:var(--paper); line-height:1.7; font-size:0.95rem; margin-bottom:20px; font-style:italic; }
  .testimonial-name{ font-size:0.8rem; color:var(--sun-light); font-weight:600; }
  .testimonial-role{ font-size:0.75rem; color:var(--paper-dim); margin-top:2px; }

  /* FAQ */
  .faq{
    padding:110px 6vw;
    max-width:820px; margin:0 auto;
  }
  .faq .section-head{ text-align:center; }
  .faq-list{ margin-top:50px; }
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-question{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    background:none; border:none; text-align:left; cursor:pointer;
    padding:22px 0;
    font-family:inherit; font-size:1rem; color:var(--paper); font-weight:600;
  }
  .faq-question .fq-chev{ flex-shrink:0; transition:transform .25s ease; color:var(--sun); }
  .faq-question[aria-expanded="true"] .fq-chev{ transform:rotate(180deg); }
  .faq-answer{
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
    color:var(--paper-dim); line-height:1.7; font-size:0.92rem;
  }
  .faq-answer-inner{ padding-bottom:22px; }
  .faq-item.open .faq-answer{ max-height:300px; }

  /* TERMS & PRIVACY — modal */
  .legal-links{ display:flex; flex-wrap:wrap; gap:16px 22px; font-size:0.72rem; }
  .legal-link-btn{
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    font-family:inherit; font-size:inherit;
    color:var(--paper-dim); opacity:0.85;
    transition:opacity .25s, color .25s;
  }
  .legal-link-btn:hover, .legal-link-btn:focus-visible{ opacity:1; color:var(--sun); }

  .legal-modal{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:5vh 5vw;
  }
  .legal-modal[hidden]{ display:none; }
  .legal-modal-overlay{
    position:absolute; inset:0;
    background:rgba(0,0,0,0.55);
  }
  .legal-modal-box{
    position:relative;
    background:var(--navy-deep);
    border:1px solid var(--sun);
    max-width:760px; width:100%;
    max-height:88vh;
    box-shadow:0 30px 70px rgba(0,0,0,0.35);
  }
  .legal-modal-scroll{
    max-height:88vh;
    overflow-y:auto;
    padding:50px 44px 44px;
  }
  .legal-modal-close{
    position:absolute; top:14px; right:18px; z-index:2;
    background:none; border:none; cursor:pointer;
    font-size:1.8rem; line-height:1; color:var(--paper-dim);
    padding:6px 10px;
    transition:color .2s ease;
  }
  .legal-modal-close:hover{ color:var(--sun); }
  .legal-modal .section-eyebrow{ text-align:center; }
  .legal-modal h2{ text-align:center; }
  .legal-modal .legal-updated{ text-align:center; }
  .legal-updated{ font-size:0.75rem; color:var(--paper-dim); margin-top:10px; }
  .legal-body h3{
    font-family:'Cinzel Decorative',serif;
    font-size:1.05rem; color:var(--paper);
    margin:32px 0 12px;
  }
  .legal-body h3:first-child{ margin-top:0; }
  .legal-body p{ color:var(--paper-dim); line-height:1.75; font-size:0.92rem; }
  .legal-body a{ color:var(--sun); text-decoration:underline; text-underline-offset:3px; }

  @media (max-width:640px){
    .legal-modal-scroll{ padding:44px 24px 34px; }
  }

  /* PAYMENT INFO */
  .payment-info{
    margin-top:36px;
    max-width:480px; margin-left:auto; margin-right:auto;
    border:1px solid var(--sun);
    background:var(--navy-deep);
    padding:26px 28px;
    text-align:center;
  }
  .payment-info .pi-label{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sun); margin-bottom:8px; }
  .payment-info .pi-value{ font-size:1.1rem; color:var(--paper); font-weight:600; }
  .payment-info .pi-note{ font-size:0.78rem; color:var(--paper-dim); margin-top:8px; }

  /* CHAT WIDGET */
  .chat-widget{ position:fixed; right:22px; bottom:22px; z-index:150; }
  .chat-launcher{
    width:58px; height:58px; border-radius:50%;
    background:var(--sun); border:none; cursor:pointer;
    color:var(--navy-deep);
    display:flex; align-items:center; justify-content:center;
    box-shadow:none;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .chat-launcher:hover{ transform:scale(1.06); box-shadow:none; }
  .chat-launcher .ci-close{ display:none; }
  .chat-launcher[aria-expanded="true"] .ci-chat{ display:none; }
  .chat-launcher[aria-expanded="true"] .ci-close{ display:block; }

  .chat-panel{
    position:absolute; right:0; bottom:74px;
    width:min(360px, 88vw);
    height:min(520px, 70vh);
    background:var(--navy-deep);
    border:1px solid var(--sun);
    box-shadow:0 24px 60px rgba(0,0,0,0.3);
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .chat-panel[hidden]{ display:none; }

  .chat-header{
    background:var(--sun); color:var(--navy-deep);
    padding:16px 18px;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
  }
  .chat-header-title{ font-family:'Cinzel Decorative',serif; font-size:0.95rem; }
  .chat-header-sub{ font-size:0.72rem; opacity:0.85; margin-top:2px; }
  .chat-header-close{
    background:none; border:none; cursor:pointer;
    color:var(--navy-deep); font-size:1.5rem; line-height:1; padding:0 4px;
  }

  .chat-messages{
    flex:1; overflow-y:auto;
    padding:18px;
    display:flex; flex-direction:column; gap:12px;
  }
  .chat-msg{ max-width:85%; line-height:1.55; font-size:0.87rem; }
  .chat-msg.bot{
    align-self:flex-start;
    background:var(--navy); color:var(--paper);
    padding:11px 14px;
    border-radius:2px;
    white-space:pre-line;
  }
  .chat-msg.user{
    align-self:flex-end;
    background:var(--sun); color:var(--navy-deep);
    padding:9px 14px;
    font-weight:600;
    border-radius:2px;
  }
  .chat-msg.bot a{ color:var(--sun); text-decoration:underline; }

  .chat-quick-replies{
    display:flex; flex-wrap:wrap; gap:8px;
    padding:0 18px 14px;
    flex-shrink:0;
  }
  .chat-quick-replies:empty{ padding:0; }
  .chat-qr-btn{
    background:none;
    border:1px solid var(--sun);
    color:var(--sun);
    font-size:0.78rem; font-family:inherit;
    padding:8px 13px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .chat-qr-btn:hover{ background:var(--sun); color:var(--navy-deep); }

  .chat-input-row{
    display:flex; gap:8px;
    padding:14px;
    border-top:1px solid var(--line);
    flex-shrink:0;
  }
  .chat-input-row input{
    flex:1; min-width:0;
    font-family:inherit; font-size:0.85rem;
    background:var(--navy); color:var(--paper);
    border:1px solid var(--line);
    padding:10px 12px;
  }
  .chat-input-row input:focus{ outline:none; border-color:var(--sun); }
  .chat-input-row button{
    background:var(--sun); color:var(--navy-deep);
    border:none; cursor:pointer;
    width:38px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }

  @media (max-width:480px){
    .chat-widget{ right:14px; bottom:14px; }
    .chat-panel{ width:92vw; height:75vh; bottom:70px; }
  }
/* Grids: draw the hairlines on the cells themselves, so an incomplete last row
   stays empty black instead of showing the line colour as a filled block. */
.service-grid, .teaser-icon-grid{
  gap:0; background:transparent; border:none;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.service-card, .teaser-icon-item{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}

/* Chat: give the assistant's bubbles a visible (still dark) surface against the pure-black panel */
.chat-msg.bot{ background:#151515; border:1px solid var(--line); }


/* ===== SEO restructure additions ===== */
main h1:not(.studio-name){ font-family:'Cinzel Decorative',serif; font-size:clamp(1.7rem,4vw,2.6rem); color:var(--paper); font-weight:700; }
.portfolio h1{ margin-bottom:20px; }
.about h1{ margin:6px 0 26px; }
.legal-page{ padding:150px 6vw 110px; max-width:820px; margin:0 auto; }
.legal-page .section-eyebrow, .legal-page h1, .legal-page .legal-updated{ text-align:center; }
.legal-page .legal-updated{ margin:10px 0 50px; }
.legal-back{ margin-top:50px; padding-top:26px; border-top:1px solid var(--line); text-align:center; font-size:.85rem; color:var(--paper-dim); }
.legal-back a, .portfolio-links a{ color:var(--sun); text-decoration:underline; text-underline-offset:3px; }
.portfolio .portfolio-links{ margin:36px auto 0; font-size:.88rem; max-width:60ch; }
.legal-links a{ color:var(--paper-dim); opacity:.85; transition:opacity .25s, color .25s; }
.legal-links a:hover{ opacity:1; color:var(--sun); }
.footer-nav{ flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
  padding-bottom:26px; margin-bottom:6px; border-bottom:1px solid var(--line);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
.footer-nav a{ color:var(--paper-dim); transition:color .25s; }
.footer-nav a:hover{ color:var(--sun); }
.quote-explainer{ max-width:720px; margin:80px auto 0; padding-top:40px; border-top:1px solid var(--line); text-align:left; }
.quote-explainer h2{ font-size:1.25rem; margin-bottom:18px; }
.quote-explainer p{ color:var(--paper-dim); line-height:1.75; font-size:.92rem; margin-bottom:14px; }
.quote-explainer strong{ color:var(--paper); font-weight:600; }