/* ---------- SELF-HOSTED FONTS ----------
   Files are NOT included — download them and drop them in a /fonts folder
   next to this stylesheet. See /fonts/README.txt for exact instructions. */

@font-face{
  font-family: 'Space Grotesk';
  src: url('./fonts/space-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Space Grotesk';
  src: url('./fonts/space-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Space Grotesk';
  src: url('./fonts/space-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Space Grotesk';
  src: url('./fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src: url('./fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src: url('./fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src: url('./fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'JetBrains Mono';
  src: url('./fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'JetBrains Mono';
  src: url('./fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

  :root{
    --blue-deep:   #6AB7CF;
    --blue-bright: #6AB7CF;
    --ink:         #1C1E22;
    --gray-warm:   #EDEDE9;
    --gray-mid:    #859998;
    --gray-line:   #D9DAD6;
    --orange:      #FF6A3D;
    --paper:       #FAFAF7;

    --display: 'Space Grotesk', sans-serif;
    --body:    'IBM Plex Sans', sans-serif;
    --mono:    'JetBrains Mono', monospace;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    line-height:1.5;
    overflow-x:hidden;
  }

  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  img{ max-width:100%; display:block; }

  ::selection{ background:var(--orange); color:var(--paper); }

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

  :focus-visible{
    outline:2px solid var(--orange);
    outline-offset:3px;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--blue-bright);
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    background:rgba(250,250,247,0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--gray-line);
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 32px;
    max-width:1180px;
    margin:0 auto;
  }
  .logo{
    display:flex;
    align-items:center;
  }
  .logo-img{
    height:34px;
    width:auto;
    display:block;
  }
  .logo-img--footer{
    height:26px;
  }
  .nav-links{
    display:flex;
    gap:36px;
    font-size:14px;
    font-weight:500;
  }
  .nav-links a{
    position:relative;
    padding:4px 0;
    color:var(--ink);
    transition:color .2s ease;
  }
  .nav-links a:hover{ color:var(--blue-bright); }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0; height:2px;
    background:var(--orange);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }

  .nav-cta{
    font-family:var(--mono);
    font-size:13px;
    border:1px solid var(--blue-deep);
    color:var(--blue-deep);
    padding:9px 18px;
    border-radius:999px;
    transition:background .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{ background:var(--blue-deep); color:var(--ink); }

  .menu-btn{ display:none; background:none; border:0; cursor:pointer; }

  .lang-switch{
    display:flex;
    align-items:center;
    border:1px solid var(--gray-line);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }
  .lang-btn{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.03em;
    background:none;
    border:0;
    color:var(--gray-mid);
    padding:6px 11px;
    border-radius:999px;
    cursor:pointer;
    transition:background .18s ease, color .18s ease;
  }
  .lang-btn:hover{ color:var(--blue-deep); }
  .lang-btn.active{
    background:var(--blue-deep);
    color:var(--ink);
  }
  @media (max-width: 640px){
    .lang-switch{ order:-1; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:170px 0 110px;
    overflow:hidden;
  }
  .hero-canvas-holder{
    position:absolute;
    inset:0;
    z-index:0;
  }
  #fieldCanvas{
    width:100%;
    height:100%;
    display:block;
  }
  .hero .wrap{
    position:relative;
    z-index:2;
  }
  .hero-inner{
    max-width:760px;
  }
  h1{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(40px, 6.4vw, 78px);
    line-height:0.98;
    letter-spacing:-0.02em;
    color:var(--blue-deep);
    margin:18px 0 22px;
  }
  h1 em{
    font-style:normal;
    color:var(--orange);
  }
  .hero p.lede{
    font-size:18px;
    color:#42474D;
    max-width:520px;
    margin-bottom:36px;
  }
  .hero-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:var(--mono);
    font-size:14px;
    padding:14px 26px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn-primary{
    background:var(--blue-deep);
    color:var(--ink);
  }
  .btn-primary:hover{
    background:var(--orange);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(255,106,61,0.28);
  }
  .btn-ghost{
    background:var(--orange);
    border:1px solid var(--orange);
    color:var(--ink);
  }
  .btn-ghost:hover{
    background:var(--blue-deep);
    border-color:var(--blue-deep);
    color:var(--ink);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(106,183,207,0.35);
  }

  .hero-tag-row{
    margin-top:64px;
    display:flex;
    gap:28px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:12px;
    color:var(--gray-mid);
  }
  .hero-tag-row span{
    padding-left:14px;
    border-left:2px solid var(--gray-line);
  }

  /* ---------- SECTION HEADERS ---------- */
  section{ padding:96px 0; }
  .section-head{
    max-width:620px;
    margin-bottom:56px;
  }
  .section-head h2{
    font-family:var(--display);
    font-size:clamp(28px, 3.6vw, 42px);
    font-weight:600;
    letter-spacing:-0.01em;
    margin-top:12px;
    color:var(--ink);
  }
  .section-head p{
    margin-top:14px;
    color:#54595F;
    font-size:16px;
  }

  /* ---------- SERVICES ---------- */
  .services{
    background:var(--gray-warm);
    border-top:1px solid var(--gray-line);
    border-bottom:1px solid var(--gray-line);
  }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--gray-line);
    border:1px solid var(--gray-line);
  }
  .service-card{
    background:var(--gray-warm);
    padding:38px 32px;
    transition:background .25s ease;
  }
  .service-card:hover{ background:var(--paper); }
  .service-card .num{
    font-family:var(--mono);
    font-size:12px;
    color:var(--blue-bright);
  }
  .service-card h3{
    font-family:var(--display);
    font-size:22px;
    font-weight:600;
    margin:16px 0 12px;
    color:var(--blue-deep);
  }
  .service-card p{
    font-size:14.5px;
    color:#54595F;
  }
  .service-card .tools{
    margin-top:18px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--gray-mid);
  }

  /* ---------- WORK / PORTFOLIO ---------- */
  .work-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .work-card{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    aspect-ratio:4/3.1;
    border:1px solid var(--gray-line);
    cursor:pointer;
  }
  .work-card canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .work-meta{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:16px 18px;
    background:linear-gradient(to top, rgba(22,52,92,0.88), rgba(22,52,92,0));
    color:var(--paper);
    transform:translateY(8px);
    opacity:0.92;
    transition:transform .25s ease;
  }
  .work-card:hover .work-meta{ transform:translateY(0); }
  .work-meta .k{
    font-family:var(--mono);
    font-size:11px;
    color:#FFD9C7;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .work-meta h3{
    font-family:var(--display);
    font-size:17px;
    font-weight:600;
    margin-top:4px;
  }
  .work-meta p{
    font-size:12.5px;
    color:#E8EEF2;
    margin-top:6px;
    line-height:1.4;
    max-width:92%;
  }
  .work-card::after{
    content:"";
    position:absolute; inset:0;
    border:2px solid transparent;
    border-radius:14px;
    transition:border-color .2s ease;
    pointer-events:none;
  }
  .work-card:hover::after{ border-color:var(--orange); }

  /* ---------- ABOUT / PROCESS ---------- */
  .about{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:64px;
    align-items:start;
  }
  .about-copy p{
    color:#42474D;
    font-size:16px;
    margin-bottom:16px;
    max-width:440px;
  }
  .stat-row{
    display:flex;
    gap:36px;
    margin-top:28px;
    flex-wrap:wrap;
  }
  .stat b{
    font-family:var(--display);
    font-size:30px;
    color:var(--blue-deep);
    display:block;
  }
  .stat span{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--gray-mid);
    text-transform:uppercase;
  }

  .process-list{ display:flex; flex-direction:column; }
  .process-item{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:20px;
    padding:22px 0;
    border-top:1px solid var(--gray-line);
  }
  .process-item:last-child{ border-bottom:1px solid var(--gray-line); }
  .process-item .step{
    font-family:var(--mono);
    color:var(--orange);
    font-size:14px;
    padding-top:2px;
  }
  .process-item h3{
    font-family:var(--display);
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
  }
  .process-item p{
    color:#54595F;
    font-size:14.5px;
    max-width:420px;
  }

  /* ---------- FAQ ---------- */
  .faq-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--gray-line);
    border:1px solid var(--gray-line);
    border-radius:14px;
    overflow:hidden;
  }
  .faq-item{
    background:var(--paper);
    padding:30px 32px;
  }
  .faq-item h3{
    font-family:var(--display);
    font-size:17px;
    font-weight:600;
    margin-bottom:10px;
    color:var(--blue-deep);
  }
  .faq-item p{
    font-size:14.5px;
    color:#54595F;
    max-width:420px;
  }
  .faq-item p a{
    color:var(--blue-bright);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  @media (max-width: 900px){
    .faq-list{ grid-template-columns:1fr; }
  }

  /* ---------- CONTACT ---------- */
  .contact{
    background:var(--blue-deep);
    color:var(--ink);
    border-radius:22px;
    margin:0 32px;
    max-width:1180px;
    margin-inline:auto;
    padding:64px 48px;
    position:relative;
    overflow:hidden;
  }
  .contact::before{
    content:"";
    position:absolute;
    width:420px; height:420px;
    background:radial-gradient(circle, rgba(255,106,61,0.35), transparent 70%);
    right:-120px; top:-140px;
  }
  .contact-inner{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
  }
  .contact .eyebrow{ color:#B34A1E; }
  .contact h2{
    font-family:var(--display);
    font-size:clamp(26px, 3.2vw, 38px);
    margin:12px 0 18px;
    max-width:420px;
  }
  .contact p.lede{
    color:#33444C;
    max-width:400px;
    margin-bottom:8px;
  }
  form{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  label{
    font-family:var(--mono);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#33444C;
  }
  input, textarea{
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(20,40,45,0.22);
    border-radius:10px;
    padding:12px 14px;
    color:var(--ink);
    font-family:var(--body);
    font-size:14.5px;
  }
  input::placeholder, textarea::placeholder{ color:#5C6E75; }
  input:focus, textarea:focus{
    border-color:var(--orange);
    background:rgba(255,255,255,0.8);
  }
  textarea{ resize:vertical; min-height:90px; }

  .submit-btn{
    align-self:flex-start;
    background:var(--orange);
    color:var(--ink);
    font-family:var(--mono);
    font-weight:500;
    font-size:14px;
    padding:13px 26px;
    border:0;
    border-radius:999px;
    cursor:pointer;
    margin-top:6px;
    transition:transform .18s ease, background .18s ease;
  }
  .submit-btn:hover{ background:#FFFFFF; transform:translateY(-2px); }

  .form-note{
    font-family:var(--mono);
    font-size:12px;
    color:#3E5560;
    margin-top:4px;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:48px 0 40px;
  }
  .footer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    border-top:1px solid var(--gray-line);
    padding-top:28px;
  }
  .footer-links{
    display:flex;
    gap:24px;
    font-size:13px;
    color:var(--gray-mid);
  }
  .footer-links a:hover{ color:var(--blue-bright); }
  .footer-copy{
    font-family:var(--mono);
    font-size:12px;
    color:var(--gray-mid);
  }

  /* ---------- LEGAL PAGES ---------- */
  .legal-hero{
    padding:150px 0 40px;
  }
  .legal-hero .eyebrow{ margin-bottom:14px; }
  .legal-hero h1{
    font-family:var(--display);
    font-size:clamp(32px, 5vw, 48px);
    font-weight:700;
    letter-spacing:-0.01em;
    color:var(--blue-deep);
    margin-bottom:14px;
  }
  .legal-updated{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--gray-mid);
  }
  .legal-body{
    padding:20px 0 100px;
  }
  .legal-content{
    max-width:760px;
  }
  .legal-content h2{
    font-family:var(--display);
    font-size:22px;
    font-weight:600;
    color:var(--blue-deep);
    margin:44px 0 14px;
  }
  .legal-content h2:first-child{ margin-top:0; }
  .legal-content p{
    font-size:15.5px;
    color:#3A4146;
    margin-bottom:14px;
  }
  .legal-content ul{
    margin:0 0 14px 0;
    padding-left:0;
    list-style:none;
  }
  .legal-content li{
    font-size:15.5px;
    color:#3A4146;
    padding:8px 0 8px 22px;
    position:relative;
    border-bottom:1px solid var(--gray-line);
  }
  .legal-content li:last-child{ border-bottom:none; }
  .legal-content li::before{
    content:"—";
    position:absolute;
    left:0;
    color:var(--blue-bright);
  }
  .legal-content .placeholder{
    background:rgba(255,106,61,0.14);
    color:#B34A1E;
    padding:1px 5px;
    border-radius:4px;
    font-family:var(--mono);
    font-size:0.92em;
  }
  .legal-content a{
    color:var(--blue-bright);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .legal-back{
    display:flex;
    width:fit-content;
    align-items:center;
    gap:6px;
    font-family:var(--mono);
    font-size:13px;
    color:var(--gray-mid);
    margin-bottom:24px;
  }
  .legal-back:hover{ color:var(--blue-bright); }


  @media (max-width: 900px){
    .service-grid{ grid-template-columns:1fr; }
    .work-grid{ grid-template-columns:repeat(2, 1fr); }
    .about{ grid-template-columns:1fr; }
    .contact-inner{ grid-template-columns:1fr; }
  }

  @media (max-width: 640px){
    .nav-links{
      position:fixed;
      top:64px; left:0; right:0;
      flex-direction:column;
      background:var(--paper);
      padding:22px 32px;
      gap:18px;
      border-bottom:1px solid var(--gray-line);
      transform:translateY(-130%);
      transition:transform .25s ease;
    }
    .nav-links.open{ transform:translateY(0); }
    .menu-btn{ display:block; }
    .nav-cta{ display:none; }
    .work-grid{ grid-template-columns:1fr; }
    .hero{ padding:140px 0 80px; }
    .contact{ margin:0 16px; padding:44px 24px; border-radius:16px; }
    .stat-row{ flex-direction:column; gap:16px; }
  }

  /* ---------- BACK TO TOP ---------- */
  .back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,106,61,0.55);
    border:1px solid rgba(255,106,61,0.7);
    backdrop-filter:blur(4px);
    cursor:pointer;
    z-index:90;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease, background .2s ease, visibility .25s;
  }
  .back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  body.cookie-banner-open .back-to-top{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none;
  }
  .back-to-top:hover{
    background:rgba(255,106,61,0.85);
  }
  .back-to-top svg{
    width:18px;
    height:18px;
    stroke:var(--paper);
  }
  @media (max-width: 640px){
    .back-to-top{
      right:16px;
      bottom:16px;
      width:42px;
      height:42px;
    }
  }

  /* ---------- COOKIE CONSENT ---------- */
  .cookie-banner{
    position:fixed;
    left:24px;
    right:auto;
    bottom:24px;
    width:calc(100% - 48px);
    max-width:380px;
    margin:0;
    background:var(--paper);
    border:1px solid var(--gray-line);
    border-radius:16px;
    box-shadow:0 12px 32px rgba(20,30,35,0.16);
    padding:20px 22px;
    z-index:200;
    transform:translateY(140%);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
  }
  .cookie-banner.visible{
    transform:translateY(0);
    opacity:1;
  }
  .cookie-banner-body p{
    font-size:13.5px;
    color:#3A4146;
    line-height:1.5;
    margin-bottom:14px;
  }
  .cookie-banner-body a{
    color:var(--blue-bright);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .cookie-banner-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .cookie-btn{
    font-family:var(--mono);
    font-size:12.5px;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
    background:none;
  }
  .cookie-btn-ghost{
    color:var(--gray-mid);
    border-color:var(--gray-line);
    margin-right:auto;
  }
  .cookie-btn-ghost:hover{ color:var(--blue-bright); border-color:var(--blue-bright); }
  .cookie-btn-reject{
    color:var(--ink);
    border-color:var(--gray-mid);
    background:var(--gray-warm);
  }
  .cookie-btn-reject:hover{ border-color:var(--ink); }
  .cookie-btn-accept{
    color:var(--ink);
    background:var(--orange);
    border-color:var(--orange);
  }
  .cookie-btn-accept:hover{ transform:translateY(-1px); background:var(--blue-deep); border-color:var(--blue-deep); }

  .cookie-panel{
    position:fixed;
    left:24px;
    right:auto;
    bottom:24px;
    width:calc(100% - 48px);
    max-width:380px;
    margin:0;
    background:var(--paper);
    border:1px solid var(--gray-line);
    border-radius:16px;
    box-shadow:0 12px 32px rgba(20,30,35,0.18);
    padding:22px;
    z-index:210;
    opacity:0;
    transform:translateY(16px);
    transition:transform .2s ease, opacity .2s ease;
  }
  .cookie-panel.visible{ opacity:1; transform:translateY(0); }
  .cookie-panel-back{
    background:none;
    border:0;
    color:var(--gray-mid);
    font-family:var(--mono);
    font-size:12px;
    cursor:pointer;
    margin-bottom:6px;
    padding:0;
  }
  .cookie-panel-back:hover{ color:var(--blue-bright); }
  .cookie-panel h2{
    font-family:var(--display);
    font-size:18px;
    font-weight:600;
    color:var(--blue-deep);
    margin-bottom:14px;
  }
  .cookie-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:12px 0;
    border-top:1px solid var(--gray-line);
  }
  .cookie-row-text strong{
    font-size:13.5px;
    color:var(--ink);
    display:block;
    margin-bottom:3px;
  }
  .cookie-row-text p{
    font-size:12px;
    color:var(--gray-mid);
    line-height:1.4;
  }
  .cookie-toggle{
    flex:none;
    width:38px;
    height:22px;
    border-radius:999px;
    background:var(--gray-line);
    border:1px solid var(--gray-line);
    position:relative;
    cursor:pointer;
    padding:0;
    margin-top:2px;
  }
  .cookie-toggle-knob{
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--paper);
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
    transition:left .15s ease;
  }
  .cookie-toggle.on{ background:var(--blue-bright); border-color:var(--blue-bright); }
  .cookie-toggle.on .cookie-toggle-knob{ left:18px; }
  .cookie-toggle-locked{
    background:var(--blue-bright);
    border-color:var(--blue-bright);
    opacity:0.55;
    cursor:default;
  }
  .cookie-toggle-locked .cookie-toggle-knob{ left:18px; }
  .cookie-save-btn{
    width:100%;
    margin-top:16px;
    text-align:center;
  }

  .cookie-settings-fab{
    position:fixed;
    left:16px;
    bottom:16px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--paper);
    border:1px solid var(--gray-line);
    box-shadow:0 4px 14px rgba(20,30,35,0.14);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:90;
  }
  .cookie-settings-fab[hidden]{ display:none; }
  .cookie-settings-fab svg{
    width:18px;
    height:18px;
    stroke:var(--gray-mid);
  }
  .cookie-settings-fab:hover svg{ stroke:var(--blue-bright); }

  @media (max-width: 640px){
    .cookie-banner, .cookie-panel{ left:12px; right:12px; bottom:12px; width:auto; max-width:none; padding:18px; }
    .cookie-btn-ghost{ margin-right:0; width:100%; text-align:center; order:3; }
    .cookie-banner-actions{ flex-direction:column; }
  }

  /* ---------- AMBIENT SOUND TOGGLE ---------- */
  .ambient-toggle{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--gray-line);
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex:none;
    transition:border-color .2s ease, background .2s ease;
  }
  .ambient-toggle svg{
    width:16px;
    height:16px;
    stroke:var(--gray-mid);
  }
  .ambient-toggle .ambient-icon-on{ display:none; }
  .ambient-toggle:hover{ border-color:var(--blue-bright); }
  .ambient-toggle:hover svg{ stroke:var(--blue-bright); }
  .ambient-toggle.on{
    background:var(--blue-bright);
    border-color:var(--blue-bright);
  }
  .ambient-toggle.on svg{ stroke:var(--paper); }
  .ambient-toggle.on .ambient-icon-off{ display:none; }
  .ambient-toggle.on .ambient-icon-on{ display:block; animation:ambientPulse 1.8s ease-in-out infinite; }

  @keyframes ambientPulse{
    0%, 100% { opacity:1; }
    50% { opacity:0.55; }
  }

  @media (max-width: 640px){
    .ambient-toggle{ width:32px; height:32px; }
    .ambient-toggle svg{ width:14px; height:14px; }
  }