:root{
    --white:#FFFFFF;
    --gray-light:#F8F9FA;
    --charcoal:#2B2B2B;
    --gray-mid:#6B7280;
    --border:#EAECEF;
    --yellow:#FFD60A;
    --blue:#2563EB;
    --blue-dark:#1B4FCC;
    --yellow-soft:#FFF3B0;
    --blue-soft:#DBE7FB;
    --radius:14px;
    --radius-lg:16px;
    --shadow-sm:0 2px 10px rgba(43,43,43,0.06);
    --shadow-md:0 10px 30px rgba(43,43,43,0.10);
    --ease:cubic-bezier(.22,1,.36,1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--charcoal);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.12;}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer;}
  .container{max-width:1180px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    display:inline-flex; flex-direction:column; align-items:flex-start; gap:10px;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--blue);
    margin-bottom:14px;
  }
  .eyebrow::before{content:''; width:40px; height:2px; background:var(--yellow); border-radius:2px;}
  .section-head.center .eyebrow{align-items:center;}
  .section{padding:110px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:14px;}
  .section-head p{color:var(--gray-mid); font-size:17px;}
  .bg-alt{background:var(--gray-light);}

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 28px; border-radius:100px; font-weight:700; font-family:'Manrope',sans-serif;
    font-size:15px; border:2px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
    white-space:nowrap;
  }
  .btn-primary{background:var(--blue); color:var(--white);}
  .btn-primary:hover{background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 12px 24px rgba(37,99,235,.28);}
  .btn-accent{background:var(--yellow); color:var(--charcoal);}
  .btn-accent:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(255,214,10,.35);}
  .btn-outline{background:transparent; color:var(--charcoal); border-color:var(--charcoal);}
  .btn-outline:hover{background:var(--charcoal); color:var(--white); transform:translateY(-2px);}
  .btn-ghost-light{background:rgba(255,255,255,.12); color:var(--white); border-color:rgba(255,255,255,.4); backdrop-filter:blur(6px);}
  .btn-ghost-light:hover{background:var(--white); color:var(--charcoal); border-color:var(--white);}

  /* NAV */
  header.site-nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:22px 0; transition:all .4s var(--ease);
  }
  header.site-nav.scrolled{
    padding:14px 0; background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--border);
  }
  .nav-inner{display:flex; align-items:center; justify-content:space-between;}
  .logo{display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:20px;}
  .logo-mark{width:34px; height:34px; position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .logo-mark img{width:100%; height:100%; object-fit:contain;}
  header.site-nav:not(.scrolled) .logo-mark img, footer .logo-mark img{filter:brightness(0) invert(1);}
  .nav-links{display:flex; align-items:center; gap:36px;}
  .nav-links a{
    font-family:'Manrope',sans-serif; font-weight:600; font-size:14.5px; position:relative; padding:4px 0;
    color:var(--charcoal); transition:color .25s;
  }
  header.site-nav:not(.scrolled) .nav-links a, header.site-nav:not(.scrolled) .logo{color:var(--white);}
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--yellow);
    transition:width .3s var(--ease);
  }
  .nav-links a:hover::after, .nav-links a.active::after{width:100%;}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; z-index:1100;}
  .burger span{width:24px; height:2px; background:currentColor; border-radius:2px;}
  header.site-nav:not(.scrolled) .burger{color:var(--white);}

  /* HERO */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    background:url('../assets/images/devanture-boutique.jpg') center 30%/cover no-repeat;
    overflow:hidden; padding-top:120px;
  }
  .hero::before{
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(18,20,24,.94) 0%, rgba(18,20,24,.82) 38%, rgba(18,20,24,.5) 65%, rgba(18,20,24,.28) 100%),
      radial-gradient(circle at 78% 30%, rgba(255,214,10,.16), transparent 45%),
      radial-gradient(circle at 15% 80%, rgba(37,99,235,.28), transparent 50%);
    pointer-events:none;
  }
  .hero-grid{display:grid; grid-template-columns:1fr; gap:60px; align-items:center; position:relative; z-index:2;}
  .hero-grid > div{max-width:620px;}
  .hero-eyebrow{color:var(--yellow); font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:22px; display:flex; flex-direction:column; gap:10px;}
  .hero h1{color:var(--white); font-size:clamp(38px,5vw,64px); margin-bottom:22px;}
  .hero h1 em{font-style:normal; color:var(--yellow);}
  .hero p.lead{color:rgba(255,255,255,.78); font-size:18px; max-width:460px; margin-bottom:36px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}

  /* Scroll cue */
  .scroll-cue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.5); font-size:12px; text-align:center; font-family:'Manrope',sans-serif; letter-spacing:.08em;}
  .scroll-cue .line{width:1px; height:34px; background:rgba(255,255,255,.3); margin:10px auto 0; position:relative; overflow:hidden;}
  .scroll-cue .line::after{content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--yellow); animation:scrolldown 2s ease-in-out infinite;}
  @keyframes scrolldown{0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}}

  /* Feature cards (Pourquoi nous choisir) */
  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .feature-card{
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:32px 26px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  }
  .feature-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent;}
  .icon-badge{
    width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:var(--gray-light); margin-bottom:20px; transition:background .35s, transform .35s;
  }
  .feature-card:hover .icon-badge{background:var(--yellow); transform:rotate(-6deg) scale(1.05);}
  .icon-badge svg{width:24px; height:24px; stroke:var(--blue); transition:stroke .35s;}
  .feature-card:hover .icon-badge svg{stroke:var(--charcoal);}
  .feature-card h3{font-size:18px; margin-bottom:10px;}
  .feature-card p{color:var(--gray-mid); font-size:14.5px;}

  /* Services */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .service-card{
    position:relative; border-radius:var(--radius-lg); overflow:hidden; height:280px;
    display:flex; align-items:flex-end; padding:28px; color:var(--white);
    box-shadow:var(--shadow-sm); transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
  .service-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
  .service-card:hover img{transform:scale(1.08);}
  .service-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(43,43,43,0) 30%, rgba(20,20,20,.85) 100%);}
  .service-card .content{position:relative; z-index:2;}
  .service-card h3{font-size:19px; margin-bottom:6px;}
  .service-card p{font-size:13.5px; color:rgba(255,255,255,.8);}
  .service-tag{
    position:absolute; top:20px; left:20px; z-index:2; background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
    color:var(--white); font-size:11px; font-weight:700; font-family:'Manrope',sans-serif; letter-spacing:.06em;
    text-transform:uppercase; padding:6px 12px; border-radius:100px;
  }

  /* Service pills (teaser sur l'accueil) */
  .service-pills{display:flex; flex-wrap:wrap; gap:16px;}
  .pill{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 26px; border-radius:100px; background:var(--white);
    font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--charcoal);
    box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .pill:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
  .pill-icon{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
  .pill-coral{background:var(--yellow-soft);}
  .pill-coral .pill-icon{background:var(--yellow);}
  .pill-teal{background:var(--blue-soft);}
  .pill-teal .pill-icon{background:var(--blue);}

  /* Brands / mutuelles */
  .brand-marquee{
    overflow:hidden; width:100%; position:relative;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .brand-track{
    display:flex; align-items:center; gap:72px; width:max-content;
    animation:brand-scroll 28s linear infinite;
  }
  .brand-marquee:hover .brand-track{animation-play-state:paused;}
  @keyframes brand-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .brand-item{
    font-family:'Manrope',sans-serif; font-weight:800; font-size:26px; letter-spacing:.01em;
    white-space:nowrap; color:var(--charcoal); opacity:.32;
    transition:opacity .35s, color .35s;
  }
  .brand-item:hover{opacity:1; color:var(--blue);}

  .tiers-banner{
    max-width:560px; margin:0 auto; text-align:center; background:var(--white);
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px 40px;
    box-shadow:var(--shadow-sm); transition:box-shadow .35s, transform .35s;
  }
  .tiers-banner:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
  .tiers-banner .icon-badge{background:var(--blue-soft);}
  .tiers-banner .icon-badge svg{stroke:var(--blue);}
  .tiers-banner h3{font-size:19px; margin-bottom:10px;}
  .tiers-banner p{color:var(--gray-mid); font-size:14.5px;}

  /* Testimonials */
  .grid-testi{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .testi-card{
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px;
    transition:box-shadow .35s, transform .35s;
  }
  .testi-card:hover{box-shadow:var(--shadow-md); transform:translateY(-5px);}
  .stars{color:var(--yellow); font-size:15px; letter-spacing:2px; margin-bottom:14px;}
  .testi-card p.quote{font-size:14.5px; color:var(--charcoal); margin-bottom:20px;}
  .testi-person{display:flex; align-items:center; gap:12px;}
  .testi-person img{width:44px; height:44px; border-radius:50%; object-fit:cover;}
  .testi-person strong{font-family:'Manrope',sans-serif; font-size:14px; display:block;}
  .testi-person span{font-size:12.5px; color:var(--gray-mid);}

  /* Method / steps with connecting frame */
  .method-wrap{position:relative;}
  .method-frame{width:100%; height:auto; margin-bottom:-20px;}
  .method-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;}
  .step-card{text-align:center; padding:0 16px;}
  .step-num{
    width:64px; height:64px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center;
    background:var(--charcoal); color:var(--yellow); font-family:'Manrope',sans-serif; font-weight:800; font-size:20px;
    border:3px solid var(--yellow); transition:transform .4s var(--ease);
  }
  .step-card:hover .step-num{transform:scale(1.1) rotate(8deg);}
  .step-card h3{font-size:17px; margin-bottom:8px;}
  .step-card p{color:var(--gray-mid); font-size:14px;}

  /* Location */
  .loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  .loc-info{display:flex; flex-direction:column; gap:22px;}
  .loc-item{display:flex; gap:16px; align-items:flex-start;}
  .loc-item .ic{width:42px; height:42px; border-radius:12px; background:var(--gray-light); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .loc-item .ic svg{width:20px; height:20px; stroke:var(--blue);}
  .loc-item h4{font-size:15px; margin-bottom:4px;}
  .loc-item p{color:var(--gray-mid); font-size:14px;}
  .map-frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border); height:100%; min-height:360px;}
  .map-frame iframe{width:100%; height:100%; min-height:360px; border:0;}
  .contact-visuals{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px;}
  .visual-frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border); aspect-ratio:4/3;}
  .visual-frame img, .visual-frame iframe{width:100%; height:100%; object-fit:cover; border:0; display:block;}

  /* CTA banner */
  .cta-banner{
    position:relative; border-radius:24px; overflow:hidden; padding:70px 60px; text-align:center;
    background:linear-gradient(120deg,#1c2430,#2B2B2B 60%,#182034);
  }
  .cta-banner::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(255,214,10,.18), transparent 40%), radial-gradient(circle at 85% 80%, rgba(37,99,235,.3), transparent 45%);}
  .cta-banner .in{position:relative; z-index:2;}
  .cta-banner h2{color:var(--white); font-size:clamp(28px,3.6vw,44px); margin-bottom:16px;}
  .cta-banner p{color:rgba(255,255,255,.7); max-width:480px; margin:0 auto 32px;}

  /* Footer */
  footer{background:var(--charcoal); color:rgba(255,255,255,.75); padding:80px 0 30px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; margin-bottom:56px;}
  .footer-col h4{color:var(--white); font-size:14px; margin-bottom:20px; font-family:'Manrope',sans-serif; letter-spacing:.04em;}
  .footer-col ul li{margin-bottom:12px; font-size:14px;}
  .footer-col ul li a:hover{color:var(--yellow);}
  .footer-brand p{font-size:14px; color:rgba(255,255,255,.55); margin:16px 0 20px; max-width:280px;}
  .social-row{display:flex; gap:12px;}
  .social-row a{
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center; transition:all .3s;
  }
  .social-row a:hover{background:var(--yellow); border-color:var(--yellow); color:var(--charcoal);}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:26px; display:flex; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px;}
  .footer-bottom a:hover{color:var(--white);}

  /* Page hero (sub pages) */
  .page-hero{
    padding:180px 0 90px; background:var(--charcoal); position:relative; overflow:hidden; text-align:center;
  }
  .page-hero::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255,214,10,.12), transparent 45%), radial-gradient(circle at 10% 80%, rgba(37,99,235,.25), transparent 45%);}
  .page-hero .in{position:relative; z-index:2;}
  .page-hero .eyebrow{color:var(--yellow);}
  .page-hero .eyebrow::before{background:var(--yellow);}
  .page-hero h1{color:var(--white); font-size:clamp(32px,4.2vw,52px);}
  .page-hero p{color:rgba(255,255,255,.65); max-width:520px; margin:16px auto 0;}

  /* About page */
  .story-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .story-grid-reverse > div:first-child{order:2;}
  .story-grid-reverse > img{order:1;}
  .story-grid img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md);}
  .values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .value-item{text-align:center; padding:20px;}
  .value-item .icon-badge{margin:0 auto 18px; background:var(--gray-light);}
  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .team-card{text-align:center;}
  .team-avatar{
    width:100%; aspect-ratio:1/1; border-radius:var(--radius-lg); margin-bottom:16px;
    background:var(--gray-light); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; transition:background .35s, transform .35s;
  }
  .team-card:hover .team-avatar{background:var(--blue-soft); transform:translateY(-4px);}
  .team-avatar svg{width:34%; height:34%; stroke:var(--gray-mid); transition:stroke .35s;}
  .team-card:hover .team-avatar svg{stroke:var(--blue);}
  .team-card h4{font-size:16px;}
  .team-card span{font-size:13px; color:var(--gray-mid);}

  /* Legal pages */
  .legal-content{max-width:760px; margin:0 auto;}
  .legal-block{margin-bottom:44px;}
  .legal-block h2{font-size:20px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border);}
  .legal-block p{color:var(--gray-mid); font-size:14.5px; margin-bottom:12px;}
  .legal-placeholder{
    background:var(--gray-light); border:1px dashed var(--border); border-radius:var(--radius);
    padding:16px 18px; font-size:13.5px; color:var(--gray-mid); font-style:italic;
  }
  .legal-updated{color:var(--gray-mid); font-size:13px; margin-bottom:8px;}

  /* FAQ */
  .faq-list{max-width:760px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding:24px 0; display:flex; justify-content:space-between; align-items:center;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:var(--charcoal);
  }
  .faq-q .plus{width:24px; height:24px; position:relative; flex-shrink:0;}
  .faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--blue); border-radius:2px; transition:transform .35s var(--ease);}
  .faq-q .plus::before{width:14px; height:2px; top:11px; left:5px;}
  .faq-q .plus::after{width:2px; height:14px; left:11px; top:5px;}
  .faq-item.open .faq-q .plus::after{transform:rotate(90deg); opacity:0;}
  .faq-item.open .faq-q{color:var(--blue);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
  .faq-a p{padding-bottom:24px; color:var(--gray-mid); font-size:14.5px; max-width:640px;}

  /* Products page */
  .cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:36px 24px;}
  .cat-card{display:flex; flex-direction:column;}
  .cat-img-wrap{
    width:100%; aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-sm); transition:box-shadow .4s var(--ease);
  }
  .cat-card:hover .cat-img-wrap{box-shadow:var(--shadow-md);}
  .cat-img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
  .cat-card:hover .cat-img-wrap img{transform:scale(1.05);}
  .cat-card .c-content{padding-top:16px;}
  .cat-card h3{color:var(--charcoal); font-size:17px; margin-bottom:4px;}
  .cat-card p{color:var(--gray-mid); font-size:13px;}

  /* Services page detail */
  .service-detail{display:grid; grid-template-columns:56px 1fr; gap:22px; padding:30px 0; border-bottom:1px solid var(--border);}
  .service-detail .icon-badge{width:56px; height:56px; margin-bottom:0;}
  .service-detail h3{font-size:19px; margin-bottom:8px;}
  .service-detail p{color:var(--gray-mid); font-size:14.5px; max-width:600px;}

  /* Contact page */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .form-group{margin-bottom:20px;}
  .form-group label{display:block; font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px; margin-bottom:8px;}
  .form-group input, .form-group textarea{
    width:100%; padding:14px 16px; border:1.5px solid var(--border); border-radius:10px; font-family:'Inter',sans-serif;
    font-size:14.5px; transition:border-color .3s, box-shadow .3s; background:var(--gray-light);
  }
  .form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.12); background:var(--white);}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .contact-info-card{background:var(--charcoal); border-radius:var(--radius-lg); padding:36px; color:var(--white); margin-bottom:24px;}
  .contact-info-card .loc-item .ic{background:rgba(255,255,255,.08);}
  .contact-info-card .loc-item .ic svg{stroke:var(--yellow);}
  .contact-info-card .loc-item p{color:rgba(255,255,255,.65);}
  .contact-info-card .loc-item h4{color:var(--white);}

  /* Utility / reveal */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media(max-width:980px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero-grid > div{margin:0 auto;}
    .hero-eyebrow{align-items:center;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .hero-ctas{justify-content:center;}
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .grid-3, .grid-testi, .cat-grid{grid-template-columns:repeat(2,1fr);}
    .brand-track{gap:48px;} .brand-item{font-size:22px;}
    .method-steps{grid-template-columns:1fr; gap:40px;}
    .loc-grid, .story-grid, .contact-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
    .values-grid{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:repeat(2,1fr);}
    .nav-links{position:fixed; top:0; right:0; height:100vh; width:280px; background:var(--white); flex-direction:column;
      justify-content:center; align-items:flex-start; padding:40px; gap:26px; transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:-10px 0 40px rgba(0,0,0,.1);}
    .nav-links.open{transform:translateX(0);}
    header.site-nav .nav-links a{color:var(--charcoal) !important;}
    .burger{display:flex;}
    .nav-cta .btn{display:none;}
  }
  @media(max-width:640px){
    .section{padding:72px 0;}
    .grid-4, .grid-3, .grid-testi, .cat-grid{grid-template-columns:1fr;}
    .contact-visuals{grid-template-columns:1fr;}
    .brand-track{gap:36px;} .brand-item{font-size:19px;}
    .form-row{grid-template-columns:1fr;}
    .cta-banner{padding:50px 26px;}
    .team-grid{grid-template-columns:1fr 1fr;}
  }

  .avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,#0ea5e9,#06b6d4);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    flex-shrink:0;
}