:root{
    --primary-color:#000000;
    --secondary-color:#FBF9F6;
    --bg-color:#F4F0E9;
    --text-color:#62605D;
    --accent-color:#615328;
    --accent-secondary-color:#BDAD7B;
    --white-color:#FFFFFF;
    --divider-color:#00000014;
    --dark-divider-color:#FFFFFF1A;
    --error-color:rgb(230,87,87);
    --default-font:"DM Sans", sans-serif;
    --accent-font:"Space Grotesk", sans-serif;

    /* derived, all built from the tokens above */
    --ink-2: color-mix(in srgb, var(--primary-color) 90%, var(--accent-color) 10%);
    --text-soft: color-mix(in srgb, var(--text-color) 65%, var(--bg-color) 35%);
    --dark-text-soft: color-mix(in srgb, var(--white-color) 78%, var(--primary-color) 22%);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-color);
    color:var(--text-color);
    font-family:var(--default-font);
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
  }

  h1,h2,h3,.serif{
    font-family:var(--accent-font);
    font-weight:400;
    line-height:1.08;
    letter-spacing:-0.01em;
  }

  .mono{
    font-family:var(--accent-font);
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:0.72rem;
  }

  a{color:inherit;text-decoration:none;}

  .wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 6vw;
  }

  /* ---------- Injection spine (signature scroll element) ---------- */
  #spine{
    position:fixed;
    left:0; top:0;
    width:3px;
    height:100vh;
    background:var(--dark-divider-color);
    z-index:40;
    opacity:0.9;
  }
  #spine-fill{
    position:absolute;
    left:0; top:0;
    width:100%;
    height:0%;
    background:linear-gradient(180deg, var(--accent-secondary-color), var(--accent-secondary-color), var(--accent-color));
    box-shadow:0 0 14px rgba(189,173,123,0.55);
    transition:height 60ms linear;
  }
  @media (max-width:820px){
    #spine{width:100%;height:3px;top:0;left:0;}
    #spine-fill{width:0%;height:100%;transition:width 60ms linear;
      background:linear-gradient(90deg, var(--accent-secondary-color), var(--accent-secondary-color), var(--accent-color));}
  }

  /* ---------- Nav ---------- */
 
  .nav-inner{
    max-width:1160px;margin:0 auto;padding:18px 6vw;
    display:flex;align-items:center;justify-content:space-between;
  }
  .brand{font-family:var(--accent-font);font-size:1.3rem;letter-spacing:0.01em;}
  .brand span{color:var(--accent-color);font-style:italic;}
  .nav-cta{
    font-family:var(--accent-font);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;
    border:1px solid var(--text-color);padding:9px 18px;border-radius:2px;
    transition:all .25s ease;white-space:nowrap;
  }
  .nav-cta:hover{background:var(--accent-color);color:var(--secondary-color);border-color:var(--accent-color);}
header.main-header {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    border-bottom: 1px solid #b2a86d;
}
 
.main-menu ul li a {
    font-family: var(--accent-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2em;
    padding: 12px 10px !important;
    color: #fff !important;
    background: transparent;
    border-radius: 0px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

nav.navbar.navbar-expand-lg {
    background-color:#000;
}
  /* ---------- Hero ---------- */
  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff !important;
    opacity: 50%;
    z-index: 1;
}
  .hero{
    background:var(--secondary-color) !important;
    color:var(--text-color);
    position:relative;
    overflow:hidden;
    padding:14.5rem 0 4rem !important;
    border-bottom:1px solid var(--divider-color);
  }
  .hero-grain{
    position:absolute;inset:0;
    background-image:radial-gradient(circle at 20% 20%, rgba(97,83,40,0.06), transparent 45%),
                      radial-gradient(circle at 85% 75%, rgba(97,83,40,0.05), transparent 50%);
    pointer-events:none;
  }
  .hero-inner{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:center;
  }
  .eyebrow{
    font-family:var(--accent-font);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--accent-color);margin-bottom:1.4rem;display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:'';width:26px;height:1px;background:var(--accent-color);}
  .hero h1 {
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    color: var(--primary-color);
    margin-bottom: 1.4rem;
    text-transform: capitalize;
}
  .hero h1 em{color:var(--accent-color);font-style:italic;}
  .hero p.lead{
    font-size:1.05rem;color:var(--text-color);max-width:520px;margin-bottom:2.2rem;
  }
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  .btn-primary{
    background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
    color:var(--secondary-color);font-weight:600;padding:14px 28px;border-radius:2px;
    font-size:0.92rem;box-shadow:0 8px 24px rgba(97,83,40,0.22);
    transition:transform .25s ease;display:inline-block; border-radius:100px;
  }
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{
    color:var(--primary-color);border-bottom:1px solid var(--accent-color);padding-bottom:3px;font-size:0.92rem;
  }

  .tooth-wrap{position:relative;display:flex;justify-content:center;}
  .tooth-wrap svg{width:100%;max-width:340px;height:auto;}
  #tooth-fill{transform-origin:bottom;transform:scaleY(0);}

  /* ---------- Section shells ---------- */
  section{padding:5.5rem 0;}
  .section-dark{background:var(--secondary-color);color:var(--text-color);}
  .section-line-top{border-top:1px solid var(--divider-color);}

  .kicker{
    font-family:var(--accent-font);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--accent-color);margin-bottom:0.9rem;
  }
  .section-dark .kicker{color:var(--accent-color);}
  h2.h-title{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:1.4rem;max-width:760px;}
  .section-dark h2.h-title{color:var(--primary-color);}

  /* ---------- What is Bioclear ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
  .pullquote{
    font-family:var(--accent-font);font-style:italic;font-size:1.5rem;line-height:1.4;
    color:var(--primary-color);border-left:2px solid var(--accent-secondary-color);padding-left:1.6rem;margin:2rem 0;
  }
  .process-list-inline{list-style:none;margin:1.6rem 0;}
  .process-list-inline li{
    padding:0.8rem 0;border-bottom:1px solid var(--divider-color);
    display:flex;gap:14px;align-items:flex-start;font-size:0.98rem;
  }
  .process-list-inline li::before{
    content:'—';color:var(--accent-color);font-weight:600;flex-shrink:0;
  }

  /* ---------- Treats grid ---------- */
  .treats-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--divider-color);border:1px solid var(--divider-color);margin-top:2.5rem;
  }
  .treat-card{
    background:var(--bg-color);padding:2rem 1.8rem;transition:background .3s ease;
  }
  .treat-card:hover{background:var(--secondary-color);}
  .treat-card .num{font-family:var(--accent-font);font-size:0.72rem;color:var(--accent-color);margin-bottom:0.8rem;}
  .treat-card p{font-size:0.95rem;color:var(--text-color);}

  /* ---------- Black triangle spotlight ---------- */
  .spotlight{
    background:var(--secondary-color);border:1px solid var(--accent-color);
    padding:3rem;margin-top:2rem;position:relative;
  }
  .spotlight::before{
    content:'';position:absolute;top:14px;left:14px;right:14px;bottom:14px;
    border:1px solid rgba(97,83,40,0.35);pointer-events:none;
  }
  .spotlight h3{font-size:1.7rem;margin-bottom:1rem;color:var(--primary-color);}
  .spotlight p{max-width:700px;}

   /* ---------- Process (connected timeline: horizontal desktop / vertical mobile) ---------- */
  .process-flow{
    display:flex;gap:0.5rem;margin-top:3.5rem;position:relative;
  }
  .process-flow::before{
    content:'';position:absolute;top:34px;left:34px;right:34px;height:1px;
    background:var(--divider-color);z-index:1;
  }
  .process-step{
    flex:1;text-align:center;position:relative;z-index:2;padding:0 0.6rem;
  }
  .process-step-icon{
    width:68px;height:68px;border-radius:50%;margin:0 auto 1.3rem;
    border:1px solid var(--accent-color);background:var(--bg-color);
    display:flex;align-items:center;justify-content:center;position:relative;
  }
  .process-step-icon img{width:45px;height:45px;stroke:var(--accent-color);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
  .process-step-num{
    position:absolute;top:-4px;right:-4px;width:24px;height:24px;border-radius:50%;
    background:var(--accent-color);color:var(--secondary-color);
    font-family:var(--accent-font);font-size:0.68rem;font-weight:600;
    display:flex;align-items:center;justify-content:center;
  }
  .process-step h4{font-size:1.02rem;margin-bottom:0.6rem;color:var(--primary-color);font-family:var(--default-font);font-weight:600;line-height:1.3;}
  .process-step p{color:var(--text-color);font-size:0.88rem;max-width:270px;margin:0 auto;}
 
  /* ---------- Process flow: force-vertical modifier (for step counts that don't suit 5-wide) ---------- */
  .process-flow.vertical{flex-direction:column;gap:0;}
  .process-flow.vertical::before{display:none;}
  .process-flow.vertical .process-step{
    display:grid;grid-template-columns:60px 1fr;column-gap:1.4rem;padding:0 0 2rem;position:relative;flex:none;text-align:left;
  }
  .process-flow.vertical .process-step:not(:last-child)::after{
    content:'';position:absolute;left:29px;top:68px;bottom:0;width:1px;background:var(--divider-color);
  }
  .process-flow.vertical .process-step-icon{grid-column:1;grid-row:1/3;margin:0;flex-shrink:0;align-self:start;}
  .process-flow.vertical .process-step h4{grid-column:2;grid-row:1;}
  .process-flow.vertical .process-step p{grid-column:2;grid-row:2;max-width:none;margin:0;}
 
  /* ---------- Process flow: grid-4 modifier (4 steps per row, wraps to next row) ---------- */
  .process-flow.grid-4{
    display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem 1.6rem;
  }
  .process-flow.grid-4::before{display:none;}
  .process-flow.grid-4 .process-step{
    text-align:left;padding:0;flex:none;
  }
  .process-flow.grid-4 .process-step-icon{margin:0 0 1.2rem;}
  .process-flow.grid-4 .process-step p{max-width:none;}
  @media (max-width:980px){
    .process-flow.grid-4{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .process-flow.grid-4{grid-template-columns:1fr;}
  }
 
  /* ---------- Benefits ---------- */
  .benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:2.5rem;}
  .benefit{
    display:flex;gap:1rem;align-items:flex-start;padding:1.4rem;background:var(--secondary-color);border-left:2px solid var(--accent-secondary-color);
  }
  .benefit svg{flex-shrink:0;width:22px;height:22px;stroke:var(--accent-color);margin-top:2px;}
  .benefit p{font-size:0.95rem;}
  .benefit strong{display:block;font-weight:600;margin-bottom:0.2rem;color:var(--primary-color);}

  /* ---------- Cost ---------- */
  .cost-box{
    background:var(--bg-color);color:var(--text-color);padding:2.6rem;margin-top:2rem;border-radius:2px;
    border:1px solid var(--accent-color);
  }
  .cost-box p{color:var(--text-color);margin-bottom:1rem;}
  .cost-note{
    font-family:var(--accent-font);font-size:0.8rem;color:var(--accent-color);
    border-top:1px dashed var(--divider-color);padding-top:1rem;margin-top:1rem;
  }

  /* ---------- Why choose (credentials plaque) ---------- */
  .cred-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem;
  }
  .cred-card{
    background:var(--secondary-color);border:1px solid var(--divider-color);
    padding:2rem 1.8rem;transition:border-color .25s ease, transform .25s ease;
  }
  .cred-card:hover{border-color:var(--accent-color);transform:translateY(-3px);}
  .cred-icon{
    width:52px;height:52px;border-radius:50%;
    border:1px solid var(--accent-color);background:var(--bg-color);
    display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;
  }
  .cred-icon img{width:34px;height:34px;stroke:var(--accent-color);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
  .cred-mark{
    display:block;font-family:var(--accent-font);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--accent-color);margin-bottom:0.5rem;
  }
  .cred-card h3{font-size:1.1rem;font-family:var(--default-font);font-weight:600;color:var(--primary-color);margin-bottom:0.5rem;line-height:1.3;}
  .cred-card p{font-size:0.94rem;color:var(--text-color);}
 
  /* ---------- FAQ ---------- */
  .faq-item{border-bottom:1px solid var(--divider-color); padding-bottom:20px;}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
    padding:1.5rem 0;cursor:pointer;font-weight:600;color:var(--primary-color);font-size:1.02rem;
  }
  .faq-q .idx{font-family:var(--accent-font);color:var(--accent-color);font-weight:400;margin-right:0.8rem;font-size:0.85rem;}
  .faq-plus{font-family:var(--accent-font);font-size:1.2rem;color:var(--accent-color);transition:transform .3s ease;flex-shrink:0;}
  .faq-item summary.faq-q{list-style:none;}
.faq-item summary.faq-q::-webkit-details-marker{display:none;}
.faq-item[open] .faq-plus{transform:rotate(45deg);}
.faq-a{overflow:hidden;}
  }
  .faq-a-inner{padding:0 0 1.6rem 2.4rem;font-size:0.96rem;color:var(--text-soft);max-width:720px;}

  /* ---------- Closing CTA ---------- */
  .closing{
    background:color-mix(in srgb, var(--accent-secondary-color) 22%, var(--bg-color) 78%);
    color:var(--text-color);
    text-align:center;padding:6rem 0;
    border-top:1px solid var(--divider-color);
    border-bottom:1px solid var(--divider-color);
  }
  .closing h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:0 auto 1.4rem;color:var(--primary-color);}
  .closing p{color:var(--text-color);margin:0 auto 2.2rem;}

  /* ---------- Footer / disclaimer ---------- */
  footer{background:var(--secondary-color);padding:2.6rem 0;border-top:1px solid var(--divider-color);}
  /*footer p{font-size:0.82rem;color:var(--text-soft);max-width:900px;font-style:italic;}*/

   @media (max-width:1140px){
    .process-flow{flex-direction:column;gap:0;}
    .process-flow::before{display:none;}
    .process-step{
      display:flex;text-align:left;gap:1.4rem;padding:0 0 2rem;position:relative;
    }
    .process-step:not(:last-child)::after{
      content:'';position:absolute;left:33px;top:68px;bottom:0;width:1px;background:var(--divider-color);
    }
    .process-step-icon{margin:0;flex-shrink:0;}
    .process-step p{max-width:none;margin:0;}
  }
 
  @media (max-width:820px){
    .hero-inner{grid-template-columns:1fr;gap:2.5rem;text-align:left;}
    .split{grid-template-columns:1fr;gap:2rem;}
    .treats-grid{grid-template-columns:1fr 1fr;}
    .benefits-grid{grid-template-columns:1fr;}
    .cred-grid{grid-template-columns:1fr 1fr;}
    section{padding:3.6rem 0;}
  }
  @media (max-width:520px){
    .treats-grid{grid-template-columns:1fr;}
    .cred-grid{grid-template-columns:1fr;}
    
    
        .process-step {
         display: block; 
        text-align: left;
        gap: 1.4rem;
        padding: 0 0 2rem;
        position: relative;
    }
    
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 33px;
        top: 68px;
        bottom: 0;
        width: 1px;
        background: var(--divider-color);
        display:none;
    }
    .process-step h4 {
    font-size: 1.02rem;
    margin-bottom: 0.6rem;
    color: var(--primary-color);
    font-family: var(--default-font);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 20px;
}
.page-header-box span {
    display: inline-block;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: var(--white-color);
    text-transform: uppercase;
    margin-bottom: 10px;
    cursor: none;
    font-family: var(--accent-font);
}
  }
 
  :focus-visible{outline:2px solid var(--accent-secondary-color);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;animation:none !important;}
  }
 
 
  .cost-table-wrap{margin-top:2rem;overflow-x:auto;}
  .cost-table{width:100%;border-collapse:collapse;font-size:0.94rem;}
  .cost-table th{
    text-align:left;font-family:var(--accent-font);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--accent-color);padding:0.9rem 1.2rem;border-bottom:1px solid var(--accent-color);white-space:nowrap;
  }
  .cost-table td{
    padding:0.9rem 1.2rem;border-bottom:1px solid var(--divider-color);color:var(--text-color);
  }
  .cost-table tr:nth-child(even) td{background:var(--secondary-color);}
  .cost-table td:first-child, .cost-table th:first-child{color:var(--primary-color);font-weight:600;}
  .cost-table-note{
    font-family:var(--accent-font);font-size:0.8rem;color:var(--accent-color);
    margin-top:1rem;
  }
  /* ---------- Simple plain list (e.g. "what influences the cost") ---------- */
  .plain-list{list-style:none;margin-top:1.5rem;}
  .plain-list li{
    padding:0.7rem 0;border-bottom:1px solid var(--divider-color);
    display:flex;gap:12px;align-items:flex-start;font-size:0.96rem;color:var(--text-color);
  }
  .plain-list li::before{content:'—';color:var(--accent-color);font-weight:600;flex-shrink:0;}
  
  .hero-icon-wrpa img {
      border-radius:25px;
  }
 .page-header-box span {
    display: inline-block;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: var(--white-color);
    text-transform: uppercase;
    margin-bottom: 10px;
    cursor: none;
    font-family: var(--accent-font);
}