:root{
    --navy:#1C2D4A;
    --muted: rgba(28,45,74,0.55);
    --navy-deep:#101B2E;
    --ink:#1B2740;
    --vellum:#EDEAE1;
    --chalk:#FAF8F3;
    --ochre:#C8932B;
    --ochre-light:#E0B45A;
    --moss:#5B7553;
    --moss-light:#7FA06B;
    --walnut:#6B4226;
    --walnut-light:#8B5A34;
    --line: rgba(28,45,74,0.14);
    --line-strong: rgba(28,45,74,0.28);
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Lora', Georgia, serif;
    --font-mono:'JetBrains Mono', monospace;
    --max: 1140px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--vellum);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;}
  img,svg{display:block; max-width:100%;}

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 28px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--walnut);
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
    margin:0 0 16px;
    line-height:1;
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;
    min-width:7px;
    background:var(--ochre);
    border:1px solid var(--navy);
    flex-shrink:0;
    display:block;
  }

  h1,h2,h3,h4{
    font-family:var(--font-display);
    color:var(--navy);
    margin:0;
    letter-spacing:-0.01em;
  }

  .section{
    padding:96px 0;
    border-bottom:1px solid var(--line);
  }
  .section-head{
    max-width:680px;
    margin-bottom:56px;
  }
  .section-head h2{
    font-size:clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight:600;
    line-height:1.18;
    margin-bottom:18px;
  }
  .section-head p{
    font-size:1.05rem;
    color:var(--ink);
    opacity:0.82;
    margin:0;
  }

  /* ---------- Buttons ---------- */
  .btn{
    font-family:var(--font-display);
    font-weight:600;
    font-size:0.95rem;
    padding:14px 26px;
    border:1.5px solid var(--navy);
    background:var(--navy);
    color:var(--chalk);
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform 0.15s ease, background 0.15s ease;
  }
  .btn:hover{ background:var(--navy-deep); transform:translateY(-1px); }
  .btn:focus-visible{ outline:3px solid var(--ochre); outline-offset:2px; }
  .btn.ghost{
    background:transparent;
    color:var(--navy);
  }
  .btn.ghost:hover{ background:rgba(28,45,74,0.06); }
  .btn.small{ padding:10px 18px; font-size:0.84rem; }
  .btn.ochre-btn{
    background:var(--ochre);
    border-color:var(--ochre);
    color:var(--navy-deep);
  }
  .btn.ochre-btn:hover{ background:var(--ochre-light); border-color:var(--ochre-light); }

  /* ---------- Nav ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background:rgba(237,234,225,0.95);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav{
    max-width:var(--max);
    margin:0 auto;
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .logo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.2rem;
    color:var(--navy);
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
  }
  .logo-mark{
    width:13px; height:13px;
    background:var(--ochre);
    border:1.5px solid var(--navy);
  }
  .logo-img{
    height:38px;
    width:auto;
    display:block;
    mix-blend-mode:multiply;
  }
  .logo-img--footer{
    height:52px;
    mix-blend-mode:multiply;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none;
    font-family:var(--font-mono);
    font-size:0.82rem;
    letter-spacing:0.03em;
    color:var(--ink);
    opacity:0.8;
  }
  .nav-links a:hover{ opacity:1; color:var(--ochre); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .nav-phone{
    font-family:var(--font-mono);
    font-size:0.82rem;
    color:var(--navy);
    text-decoration:none;
    opacity:0.75;
    letter-spacing:0.02em;
  }
  .nav-phone:hover{ opacity:1; }
  @media (max-width:760px){
    .nav-links{ display:none; }
    .nav-phone{ display:none; }
  }

  /* ---------- Hero ---------- */
  .hero{
    padding:80px 0 96px;
    border-bottom:1px solid var(--line);
  }
  .hero-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.2rem, 5vw, 3.5rem);
    font-weight:700;
    line-height:1.08;
    margin-bottom:22px;
  }
  .hero p.sub{
    font-size:1.1rem;
    opacity:0.85;
    max-width:480px;
    margin:0 0 34px;
  }
  .hero-ctas{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .hero-stat-row{
    display:flex;
    gap:40px;
    margin-top:48px;
    padding-top:32px;
    border-top:1px solid var(--line);
  }
  .hero-stat span{
    display:block;
    font-family:var(--font-display);
    font-size:1.9rem;
    font-weight:700;
    color:var(--navy);
  }
  .hero-stat small{
    font-family:var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    opacity:0.6;
  }

  /* hero illustration grid */
  .hero-visual{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .hero-thumb{
    border:1.5px solid var(--navy);
    background:var(--chalk);
    padding:0;
    position:relative;
    overflow:hidden;
    aspect-ratio:4/3;
  }
  .hero-thumb .thumb-label{
    position:absolute;
    top:14px; left:14px;
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.1em;
    padding:3px 7px;
    background:rgba(250,248,243,0.9);
    border:1px solid var(--line-strong);
    z-index:2;
    pointer-events:none;
  }
  .hero-thumb svg{ width:100%; height:auto; display:block; }
  .hero-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-thumb.featured{
    grid-column:1/-1;
  }

  /* ---------- How It Works ---------- */
  .hiw-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:1fr;
    gap:1px;
    background:var(--line-strong);
    border:1px solid var(--line-strong);
  }
  .hiw-card{
    background:var(--chalk);
    padding:38px 32px;
    height:100%;
    box-sizing:border-box;
  }
  .hiw-card-top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
  }
  .hiw-num{
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--ochre);
    flex-shrink:0;
  }
  .hiw-card h3{
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:12px;
  }
  .hiw-card p{
    font-size:0.96rem;
    opacity:0.8;
    margin:0;
  }
  .hiw-icon{
    width:36px; height:36px;
    flex-shrink:0;
  }

  /* ---------- Example Gallery ---------- */
  .gallery-intro{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:32px;
    margin-bottom:48px;
  }
  .gallery-intro .section-head{
    margin-bottom:0;
  }
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
  }
  .example-card{
    border:1.5px solid var(--navy);
    background:var(--chalk);
  }
  .example-card-visual{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-bottom:1.5px solid var(--navy);
    height:240px;
  }
  .ex-panel{
    position:relative;
    padding:0;
    overflow:hidden;
  }
  .ex-panel + .ex-panel{
    border-left:1px solid var(--line-strong);
  }
  .ex-panel .panel-tag{
    position:absolute;
    top:10px; left:10px;
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.1em;
    padding:3px 7px;
    z-index:2;
    pointer-events:none;
  }
  .panel-tag.before-tag{
    background:rgba(250,248,243,0.88);
    border:1px solid var(--line-strong);
    color:var(--navy);
  }
  .panel-tag.after-tag{
    background:var(--ochre);
    border:1px solid var(--navy);
    color:var(--navy-deep);
  }
  .ex-panel svg{ width:100%; height:100%; display:block; }
  .ex-panel img{ width:100%; height:100%; object-fit:cover; display:block; object-position:center; }
  .example-card-body{
    padding:24px 26px;
  }
  .example-card-body .ex-tag{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ochre);
    display:block;
    margin-bottom:10px;
  }
  .example-card-body h3{
    font-size:1.15rem;
    font-weight:600;
    margin-bottom:10px;
  }
  .example-card-body p{
    font-size:0.92rem;
    opacity:0.8;
    margin:0 0 18px;
  }
  .scope-pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .pill{
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.06em;
    padding:4px 10px;
    border:1px solid var(--line-strong);
    color:var(--navy);
    background:var(--vellum);
  }

  /* ---------- Renovation Styles ---------- */
  .styles-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .style-card{
    border:1px solid var(--line-strong);
    background:var(--chalk);
    padding:0;
    cursor:pointer;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration:none;
    display:block;
  }
  .style-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(28,45,74,0.12);
  }
  .style-swatch{
    height:72px;
    border-bottom:1px solid var(--navy);
  }
  .style-swatch.paint{ background:linear-gradient(135deg, var(--ochre) 0%, #8B6914 100%); }
  .style-swatch.landscape{ background:linear-gradient(135deg, var(--moss) 0%, #3A5230 100%); }
  .style-swatch.structural{ background:linear-gradient(135deg, var(--walnut) 0%, #3E200F 100%); }
  .style-swatch.fullcurb{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
  .style-swatch.kitchen{ background:linear-gradient(135deg, #C0843A 0%, #7A4E1E 100%); }
  .style-swatch.bathroom{ background:linear-gradient(135deg, #5B8FA8 0%, #2B5F78 100%); }
  .style-swatch.living{ background:linear-gradient(135deg, #8A7D6B 0%, #4E3F2F 100%); }
  .style-swatch.fullint{ background:linear-gradient(135deg, #6B5B8A 0%, #3A2B5E 100%); }
  .styles-category-label{
    font-size:0.72rem;font-weight:600;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--muted);
    margin:40px 0 16px;
  }
  .styles-category-label:first-of-type{ margin-top:0; }
  .style-body{
    padding:20px;
  }
  .style-body h4{
    font-size:1rem;
    font-weight:600;
    margin-bottom:8px;
  }
  .style-body p{
    font-size:0.86rem;
    opacity:0.78;
    margin:0 0 14px;
  }
  .style-body .style-cta{
    font-family:var(--font-mono);
    font-size:0.74rem;
    color:var(--ochre);
    letter-spacing:0.04em;
  }

  /* ---------- Process timeline ---------- */
  .process-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:center;
  }
  .process-steps{
    display:flex;
    flex-direction:column;
  }
  .pstep{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:20px;
    padding:22px 0;
    border-top:1px solid var(--line);
  }
  .pstep:last-child{ border-bottom:1px solid var(--line); }
  .pstep-num{
    font-family:var(--font-mono);
    font-size:0.9rem;
    color:var(--ochre);
    padding-top:2px;
  }
  .pstep-body h4{
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:6px;
  }
  .pstep-body p{
    margin:0;
    font-size:0.94rem;
    opacity:0.78;
  }
  .process-cta-panel{
    background:var(--navy);
    padding:48px 40px;
    color:var(--chalk);
  }
  .process-cta-panel h3{
    color:var(--chalk);
    font-size:1.6rem;
    font-weight:600;
    margin-bottom:16px;
    line-height:1.2;
  }
  .process-cta-panel p{
    opacity:0.78;
    margin:0 0 32px;
    font-size:1rem;
  }
  .contact-ways{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:32px;
  }
  .contact-way{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:var(--chalk);
    opacity:0.9;
    font-family:var(--font-mono);
    font-size:0.9rem;
    letter-spacing:0.02em;
    transition:opacity 0.15s;
  }
  .contact-way:hover{ opacity:1; }
  .contact-way-icon{
    width:36px; height:36px;
    border:1px solid rgba(250,248,243,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    flex-shrink:0;
  }

  /* ---------- Contact Section ---------- */
  .contact-section{
    background:var(--chalk);
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:start;
  }
  .contact-left h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    font-weight:600;
    line-height:1.18;
    margin-bottom:18px;
  }
  .contact-left p{
    font-size:1.02rem;
    opacity:0.82;
    margin:0 0 36px;
  }
  .contact-details{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .contact-detail-item{
    display:flex;
    gap:16px;
    align-items:center;
  }
  .cdi-icon{
    width:40px; height:40px;
    background:var(--vellum);
    border:1px solid var(--line-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
  }
  .cdi-body{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .cdi-label{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--walnut);
    display:block;
    margin-bottom:4px;
  }
  .cdi-value{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.05rem;
    color:var(--navy);
    text-decoration:none;
  }
  .cdi-value:hover{ color:var(--ochre); }

  /* contact form */
  .contact-form{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .form-group label{
    font-family:var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--navy);
    opacity:0.75;
  }
  .form-group input,
  .form-group select,
  .form-group textarea{
    font-family:var(--font-body);
    font-size:0.96rem;
    padding:12px 14px;
    border:1.5px solid var(--line-strong);
    background:var(--vellum);
    color:var(--ink);
    outline:none;
    transition:border-color 0.15s;
    width:100%;
    appearance:none;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus{
    border-color:var(--navy);
  }
  .form-group textarea{ resize:vertical; min-height:110px; }
  .form-group select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C2D4A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:40px;
  }
  .form-note{
    font-family:var(--font-mono);
    font-size:0.74rem;
    opacity:0.55;
    margin:0;
  }

  /* ---------- Final CTA ---------- */
  .final-cta{
    text-align:center;
    padding:110px 0;
    background:var(--navy);
    color:var(--chalk);
    border-bottom:none;
  }
  .final-cta h2{
    color:var(--chalk);
    font-size:clamp(1.9rem, 4vw, 2.8rem);
    font-weight:600;
    margin-bottom:16px;
  }
  .final-cta p{
    opacity:0.78;
    margin:0 0 34px;
    font-size:1.05rem;
  }
  .final-cta-btns{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .final-cta .btn.ochre-btn{ }
  .final-cta .btn.ghost{
    border-color:rgba(250,248,243,0.4);
    color:var(--chalk);
  }
  .final-cta .btn.ghost:hover{
    background:rgba(250,248,243,0.1);
  }

  /* ---------- Footer ---------- */
  footer{
    padding:64px 0 36px;
    background:var(--vellum);
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:32px;
    padding-bottom:40px;
    border-bottom:1px solid var(--line);
  }
  .footer-tagline{
    font-size:0.92rem;
    opacity:0.75;
    max-width:240px;
    margin-top:14px;
  }
  .footer-col h5{
    font-family:var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--walnut);
    margin:0 0 16px;
  }
  .footer-col ul{ list-style:none; margin:0; padding:0; }
  .footer-col li{ margin-bottom:10px; }
  .footer-col a{
    text-decoration:none;
    font-size:0.92rem;
    opacity:0.8;
  }
  .footer-col a:hover{ opacity:1; color:var(--ochre); }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    padding-top:28px;
    flex-wrap:wrap;
  }
  .disclaimer{
    font-family:var(--font-mono);
    font-size:0.72rem;
    opacity:0.55;
    max-width:560px;
    line-height:1.6;
  }
  .copyright{
    font-family:var(--font-mono);
    font-size:0.72rem;
    opacity:0.55;
    white-space:nowrap;
  }

  /* ---------- Contact page ---------- */
  .contact-simple{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  .contact-simple-ways{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .contact-simple-or{
    font-family:var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0;
  }
  .contact-ways{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .contact-way{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:var(--navy);
    font-size:1rem;
    font-weight:500;
    padding:16px 20px;
    border:1.5px solid var(--line-strong);
    border-radius:6px;
    background:#fff;
    transition:border-color 0.15s, box-shadow 0.15s;
  }
  .contact-way:hover{
    border-color:var(--ochre);
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
  }
  .contact-way-icon{
    font-size:1.3rem;
    line-height:1;
    flex-shrink:0;
  }

  /* ---------- Reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.55s ease, transform 0.55s ease;
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- Toast ---------- */
  .toast{
    position:fixed;
    bottom:28px; right:28px;
    background:var(--navy);
    color:var(--chalk);
    font-family:var(--font-mono);
    font-size:0.84rem;
    padding:14px 22px;
    border-left:3px solid var(--ochre);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.3s ease, transform 0.3s ease;
    pointer-events:none;
    z-index:100;
    max-width:320px;
  }
  .toast.show{ opacity:1; transform:translateY(0); }

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .hero-inner{ grid-template-columns:1fr; }
    .hero-visual{ max-width:560px; }
    .hiw-grid{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:1fr; }
    .styles-grid{ grid-template-columns:repeat(2,1fr); }
    .process-row{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:600px){
    .section{ padding:64px 0; }
    .form-row{ grid-template-columns:1fr; }
    .styles-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
    .hero-stat-row{ gap:24px; }
    .gallery-intro{ flex-direction:column; align-items:flex-start; }
    .process-cta-panel{ padding:36px 24px; }
  }

  /* ===== SIMPLIFIED CONTACT SECTION ===== */
  .contact-simple{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  }
  .contact-simple h2{ font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:16px; }
  .contact-simple p{ color:var(--muted);line-height:1.65; }
  .contact-simple-or{
    font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--muted);margin-bottom:20px;
  }
  @media(max-width:860px){ .contact-simple{grid-template-columns:1fr;gap:48px;} }

  /* ===== FULL-SCREEN QUIZ OVERLAY ===== */
  .quiz-overlay{
    position:fixed;inset:0;z-index:9999;
    background:var(--chalk);
    display:flex;flex-direction:column;
    opacity:0;pointer-events:none;
    transition:opacity 0.25s ease;
    overflow-y:auto;
  }
  .quiz-overlay.open{ opacity:1; pointer-events:all; }
  .quiz-top{
    position:sticky;top:0;z-index:2;
    background:var(--chalk);
    border-bottom:1px solid var(--line-strong);
  }
  .quiz-topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 40px;
  }
  .quiz-logo{ height:30px;width:auto;mix-blend-mode:multiply; }
  .quiz-close{
    background:none;border:none;cursor:pointer;
    font-size:1.4rem;color:var(--navy);line-height:1;padding:4px 8px;
  }
  .quiz-progress-track{ height:3px;background:rgba(28,45,74,0.12); }
  .quiz-progress-fill{
    height:100%;background:var(--ochre);
    transition:width 0.4s ease;width:0%;
  }
  .quiz-body{
    flex:1;display:flex;align-items:flex-start;justify-content:center;
    padding:60px 24px 100px;
  }
  .quiz-inner{ width:100%;max-width:700px; }
  .quiz-step{ display:none; }
  .quiz-step.active{ display:block; }
  .quiz-step-label{
    font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px;display:block;
  }
  .quiz-q{
    font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;
    color:var(--navy);line-height:1.2;margin-bottom:8px;
  }
  .quiz-hint{ color:var(--muted);font-size:0.95rem;margin-bottom:32px; }
  .quiz-options{
    display:grid;gap:12px;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  }
  .qopt{
    display:flex;flex-direction:column;
    border:1.5px solid var(--line-strong);
    border-radius:6px;padding:22px 20px;
    cursor:pointer;background:#fff;
    transition:border-color 0.15s,box-shadow 0.15s;
    text-align:left;overflow:hidden;
  }
  .qopt:hover{ border-color:var(--ochre); }
  .qopt.sel{
    border-color:var(--navy);
    box-shadow:inset 0 0 0 1px var(--navy);
    background:rgba(28,45,74,0.04);
  }
  .qopt-icon{ font-size:1.6rem;margin-bottom:10px; }
  .qopt-label{ font-weight:600;color:var(--navy);margin-bottom:4px;font-size:1rem;display:block; }
  .qopt-desc{ font-size:0.82rem;color:var(--muted);line-height:1.4;display:block; }
  .qopt-img{
    width:calc(100% + 40px);margin:-22px -20px 14px;
    height:80px;overflow:hidden;flex-shrink:0;
  }
  .qopt-img svg{ width:100%;height:100%; }
  .quiz-fields{ display:flex;flex-direction:column;gap:16px; }
  .quiz-field-row{ display:grid;grid-template-columns:1fr 1fr;gap:16px; }
  .quiz-label{
    display:block;font-size:0.72rem;font-weight:600;
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--muted);margin-bottom:6px;
  }
  .quiz-input{
    width:100%;border:1.5px solid var(--line-strong);border-radius:4px;
    padding:14px 16px;font-size:1rem;color:var(--navy);
    background:#fff;box-sizing:border-box;font-family:inherit;
  }
  .quiz-input:focus{ outline:none;border-color:var(--navy); }
  textarea.quiz-input{ resize:vertical;min-height:100px; }
  .quiz-nav{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:40px;padding-top:24px;
    border-top:1px solid var(--line-strong);
  }
  .quiz-back-btn{
    background:none;border:none;cursor:pointer;
    color:var(--muted);font-size:0.9rem;padding:8px 0;
  }
  .quiz-back-btn:hover{ color:var(--navy); }
  .quiz-next-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--ochre);color:#fff;
    border:none;border-radius:3px;
    padding:14px 28px;font-weight:600;font-size:0.9rem;
    cursor:pointer;transition:background 0.15s,transform 0.15s;
  }
  .quiz-next-btn:hover{ background:var(--navy-deep);transform:translateY(-1px); }
  .quiz-next-btn:disabled{ opacity:0.45;cursor:not-allowed;transform:none; }
  .quiz-success{ text-align:center;padding:48px 0; }
  .quiz-success-icon{ font-size:3.5rem;margin-bottom:20px; }
  @media(max-width:600px){
    .quiz-topbar{ padding:16px 20px; }
    .quiz-body{ padding:36px 20px 80px; }
    .quiz-options{ grid-template-columns:1fr 1fr; }
    .quiz-field-row{ grid-template-columns:1fr; }
  }