:root{
    --bg:#FAF9FC;
    --bg-panel:#F2EFFA;
    --surface:#FFFFFF;
    --ink:#1E1B2E;
    --ink-soft:#6C6980;
    --border:#E5E3ED;
    --primary:#5A5478;
    --primary-hover:#484361;
    --primary-dark:#211E38;
    --primary-soft:#EAE8F1;
    --on-dark-soft:#B7B2CA;
    --gold:#C9A063;
    --gold-hover:#B48A4C;
    --gold-soft:#F6EEDF;
    --whatsapp:#239852;
    --whatsapp-hover:#1d7f44;
    --tint-lav-bg:#EAE8F1; --tint-lav-ink:#5A5478;
    --tint-blue-bg:#E6F0FE; --tint-blue-ink:#2F6FE4;
    --tint-mint-bg:#E5F8EF; --tint-mint-ink:#1FA971;
    --tint-peach-bg:#F6EEDF; --tint-peach-ink:#B48A4C;
    --radius-lg:1.75rem;
    --radius-md:1.1rem;
    --radius-sm:0.8rem;
    --shadow-card:0 20px 40px -24px rgba(20,18,50,.16), 0 4px 14px -6px rgba(20,18,50,.06);
    --shadow-pop:0 28px 56px -20px rgba(20,18,50,.30);
    --progress-height:3px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:6.5rem;}
  body{
    font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.65;
    font-size:1rem;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--primary-soft); color:var(--primary-dark); }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  h1,h2,h3,h4{ font-weight:800; letter-spacing:-0.025em; color:var(--ink); line-height:1.13; }
  .container-page{ max-width:80rem; margin:0 auto; padding:0 1.25rem; }
  @media(min-width:768px){ .container-page{ padding:0 2rem; } }
  @media(min-width:1200px){ .container-page{ padding:0 2.5rem; } }
  .section-y{ padding-top:4.5rem; padding-bottom:4.5rem; }
  @media(min-width:768px){ .section-y{ padding-top:6rem; padding-bottom:6rem; } }
  .panel{ background:var(--bg-panel); }
  .dark-panel{ background:var(--primary-dark); color:#fff; }
  .dark-panel h2, .dark-panel h3, .dark-panel h4{ color:#fff; }

  .display-xl{ font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.08; letter-spacing:-0.03em; }
  .display-lg{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
  .eyebrow{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--primary); background:var(--primary-soft); padding:0.4rem 0.9rem; border-radius:999px; margin-bottom:1rem; }
  .dark-panel .eyebrow{ background:rgba(255,255,255,.1); color:var(--on-dark-soft); }
  .lede{ font-size:1.05rem; line-height:1.7; color:var(--ink-soft); }
  .dark-panel .lede{ color:rgba(255,255,255,.72); }

  /* Buttons */
  .btn{ display:inline-flex; align-items:center; gap:0.55rem; padding:0.95rem 1.75rem; border-radius:999px; font-size:0.9rem; font-weight:600; transition:transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; white-space:nowrap; }
  .btn-sm{ padding:0.7rem 1.35rem; font-size:0.85rem; }
  .btn-primary{ background:var(--primary); color:#fff; box-shadow:0 14px 28px -14px rgba(90,84,120,.55); }
  .btn-primary:hover{ background:var(--primary-hover); transform:translateY(-1px); }
  .btn-dark{ background:var(--ink); color:#fff; }
  .btn-dark:hover{ background:#000; transform:translateY(-1px); }
  .btn-whatsapp{ background:var(--whatsapp); color:#fff; box-shadow:0 14px 28px -14px rgba(35,152,82,.55); }
  .btn-whatsapp:hover{ background:var(--whatsapp-hover); transform:translateY(-1px); }
  .btn-outline{ border:1.5px solid var(--border); color:var(--ink); }
  .btn-outline:hover{ border-color:var(--primary); color:var(--primary); }
  .btn-outline-light{ border:1.5px solid rgba(255,255,255,.3); color:#fff; }
  .btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
  .btn-white{ background:#fff; color:var(--primary-dark); }
  .btn-white:hover{ transform:translateY(-1px); box-shadow:var(--shadow-pop); }
  .btn .icon{ width:17px; height:17px; }

  /* Reveal animation */
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal-in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* Header */
  .header-wrap{ position:fixed; top:0; left:0; right:0; z-index:50; padding:1rem 1.25rem 0; }
  @media(min-width:768px){ .header-wrap{ padding:1.25rem 2rem 0; } }
  header.site-header{ max-width:80rem; margin:0 auto; background:rgba(255,255,255,.9); backdrop-filter:blur(9px); border:1px solid var(--border); border-radius:999px; box-shadow:0 12px 30px -18px rgba(33,30,56,.18); transition:box-shadow .3s ease, border-radius .32s cubic-bezier(.16,1,.3,1); overflow:hidden; transform:translateZ(0); will-change:transform; }
  header.site-header.scrolled{ box-shadow:0 16px 36px -14px rgba(33,30,56,.28); }
  /* The closed header is a pill (border-radius:999px). Once the menu drawer
     opens the header becomes tall, and a 999px radius on a tall box renders as
     a huge ellipse that swallows the links. Dropping to a fixed radius while
     open keeps it a proper rounded rectangle. */
  header.site-header.menu-open{ border-radius:1.6rem; box-shadow:0 20px 44px -16px rgba(33,30,56,.32); }
  .scroll-progress{ position:absolute; top:0; left:0; height:var(--progress-height); width:100%; background:var(--primary); z-index:2; transform:scaleX(0); transform-origin:left center; will-change:transform; }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:0.4rem 0.85rem; }
  @media(min-width:768px){ .header-inner{ padding:0.4rem 0.75rem 0.4rem 1rem; } }
  .brand{ display:flex; align-items:center; gap:0.9rem; }
  .brand-badge{ width:3.25rem; height:3.25rem; border-radius:0.85rem; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0.35rem; box-shadow:0 2px 10px -2px rgba(20,18,50,.3); border:1px solid var(--border); }
  .brand-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
  .brand-name{ font-size:0.95rem; font-weight:800; color:var(--ink); line-height:1.1; }
  .brand-caption{ font-size:0.65rem; font-weight:500; color:var(--ink-soft); }
  nav.desktop-nav{ display:none; align-items:center; gap:1.5rem; }
  nav.desktop-nav a{ position:relative; font-size:0.84rem; font-weight:600; color:var(--ink-soft); transition:color .2s; padding:0.4rem 0; white-space:nowrap; }
  nav.desktop-nav a:hover{ color:var(--ink); }
  nav.desktop-nav a.active{ color:var(--primary); }
  .header-right{ display:flex; align-items:center; gap:0.9rem; }
  /* Bars/cross button. Drawn in CSS rather than swapped as an icon font so it
     can morph smoothly and cannot fall out of sync with the drawer - the state
     comes straight off aria-expanded. */
  .menu-btn{ color:var(--ink); display:flex; align-items:center; justify-content:center; }
  .menu-icon{ position:relative; display:block; width:22px; height:15px; }
  .menu-icon span{
    position:absolute; left:0; width:100%; height:2px; border-radius:2px;
    background:currentColor;
    transition:transform .32s cubic-bezier(.16,1,.3,1), top .32s cubic-bezier(.16,1,.3,1), opacity .18s ease;
  }
  .menu-icon span:nth-child(1){ top:0; }
  .menu-icon span:nth-child(2){ top:6.5px; }
  .menu-icon span:nth-child(3){ top:13px; }
  .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1){ top:6.5px; transform:rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2){ opacity:0; transform:scaleX(.3); }
  .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3){ top:6.5px; transform:rotate(-45deg); }
  @media (prefers-reduced-motion: reduce){ .menu-icon span{ transition:none; } }
  /* The header no longer carries a phone/WhatsApp button, so the nav takes the
     freed space and centres itself between the logo and the right edge rather
     than being pushed hard right by an empty container. */
  @media(min-width:1200px){
    nav.desktop-nav{ display:flex; flex:1; justify-content:center; }
    .menu-btn{ display:none; }
  }

  /* Drawer. It stays in the document (rather than display:none) so its height
     and opacity can actually be animated; visibility keeps it out of the tab
     order while closed, and is switched only after the collapse finishes. */
  .mobile-panel{
    display:block; overflow:hidden; visibility:hidden;
    max-height:0; opacity:0;
    border-top:1px solid transparent;
    transition:max-height .34s cubic-bezier(.16,1,.3,1),
               opacity .2s ease,
               border-top-color .3s ease,
               visibility 0s linear .34s;
  }
  .mobile-panel.open{
    visibility:visible; max-height:36rem; opacity:1;
    border-top-color:var(--border);
    transition:max-height .38s cubic-bezier(.16,1,.3,1),
               opacity .26s ease .04s,
               border-top-color .3s ease,
               visibility 0s;
  }
  /* Each row eases up into place as the drawer expands. */
  .mobile-panel .container-page > *{
    opacity:0; transform:translateY(-6px);
    transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  }
  .mobile-panel.open .container-page > *{ opacity:1; transform:translateY(0); }
  .mobile-panel.open .container-page > *:nth-child(1){ transition-delay:.05s; }
  .mobile-panel.open .container-page > *:nth-child(2){ transition-delay:.08s; }
  .mobile-panel.open .container-page > *:nth-child(3){ transition-delay:.11s; }
  .mobile-panel.open .container-page > *:nth-child(4){ transition-delay:.14s; }
  .mobile-panel.open .container-page > *:nth-child(5){ transition-delay:.17s; }
  .mobile-panel.open .container-page > *:nth-child(6){ transition-delay:.2s; }
  .mobile-panel.open .container-page > *:nth-child(7){ transition-delay:.23s; }
  @media (prefers-reduced-motion: reduce){
    .mobile-panel, .mobile-panel.open,
    .mobile-panel .container-page > *, .mobile-panel.open .container-page > *{
      transition:none; transform:none;
    }
  }
  .mobile-panel .container-page{ padding:1rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:1rem; max-width:none; }
  .mobile-panel a{ font-size:0.92rem; font-weight:600; color:var(--ink); }

  /* Hero */
  #top{ padding-top:6.5rem; }
  @media(min-width:768px){ #top{ padding-top:7.5rem; } }
  .hero-card{ position:relative; border-radius:var(--radius-lg); overflow:visible; margin-bottom:0; }
  .hero-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:460px; display:flex; align-items:center; }
  @media(min-width:768px){ .hero-media{ min-height:580px; } }
  /* Hero photo. Declared here rather than as an inline style so the mobile
     layer below can swap in a much smaller file for phones (see the mobile
     block) instead of making a phone download the full 2000px desktop image. */
  .hero-media .bg{
    position:absolute; inset:0; background-size:cover; background-position:center;
    background-image:url('https://images.unsplash.com/photo-1748063578185-3d68121b11ff?q=80&w=2000&auto=format&fit=crop');
    background-color:#211E38;
  }
  .hero-media .overlay{ position:absolute; inset:0; background:linear-gradient(95deg, rgba(33,30,56,.94) 10%, rgba(33,30,56,.76) 45%, rgba(33,30,56,.18) 80%); }
  .hero-text{ position:relative; z-index:2; padding:2.5rem 1.75rem 4.5rem; color:#fff; max-width:36rem; }
  @media(min-width:768px){ .hero-text{ padding:3.5rem 3.5rem 6rem; } }
  .hero-text h1{ color:#fff; font-weight:700; }
  .hero-text .lede{ color:rgba(255,255,255,.78); margin-top:1rem; max-width:38ch; }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:0.85rem; margin-top:2rem; }
  .trust-line{ display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; margin-top:1.5rem; }
  .trust-line-item{ display:flex; align-items:center; gap:0.45rem; font-size:0.82rem; font-weight:600; color:rgba(255,255,255,.85); }
  .trust-line-item .tickmark{ color:#7CF0A8; font-weight:800; }

  .trust-pill{ position:absolute; top:1.25rem; right:1.25rem; z-index:3; background:#fff; border-radius:999px; padding:0.5rem 1rem 0.5rem 0.5rem; display:flex; align-items:center; gap:0.6rem; box-shadow:var(--shadow-pop); }
  .trust-avatars{ display:flex; }
  .trust-avatars span{ width:1.9rem; height:1.9rem; border-radius:50%; background:var(--primary-soft); color:var(--primary); font-size:0.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; margin-left:-0.55rem; }
  .trust-avatars span:first-child{ margin-left:0; }
  .trust-pill-text{ font-size:0.72rem; line-height:1.25; }
  .trust-pill-text strong{ display:block; font-size:0.8rem; color:var(--ink); }
  .trust-pill-text span{ color:var(--ink-soft); }

  /* Why-choose-us process list */
  .process-list{ display:flex; flex-direction:column; }
  .process-item{ display:flex; gap:1.5rem; align-items:flex-start; padding:1.85rem 0; border-top:1px solid var(--border); }
  .process-item:last-child{ padding-bottom:0; }
  .process-icon{ width:2.85rem; height:2.85rem; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .process-icon svg{ width:18px; height:18px; }
  .process-item h3{ font-size:1.02rem; }
  .process-item p{ font-size:0.88rem; color:var(--ink-soft); margin-top:0.4rem; line-height:1.55; max-width:42ch; }

  /* Floating stats bar (overlaps hero) */
  .stats-bar{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); padding:1.6rem 0.75rem; margin-top:-3.5rem; position:relative; z-index:5; display:grid; grid-template-columns:repeat(2,1fr); }
  @media(min-width:768px){ .stats-bar{ grid-template-columns:repeat(4,1fr); padding:2.1rem 1rem; margin-top:-4.25rem; } }
  .stat-item{ text-align:center; padding:0.65rem 0.5rem; border-right:1px solid var(--border); }
  .stat-item:last-child, .stat-item:nth-child(2n){ border-right:none; }
  @media(min-width:768px){ .stat-item:nth-child(2n){ border-right:1px solid var(--border); } .stat-item:last-child{ border-right:none; } }
  .stat-value{ font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:800; color:var(--ink); }
  .stat-label{ margin-top:0.35rem; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); }

  /* About */
  .about-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
  @media(min-width:1024px){ .about-grid{ grid-template-columns:1fr 1fr; gap:3.5rem; } }
  .about-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
  .about-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.2; }
  .about-copy p{ margin-top:1rem; color:var(--ink-soft); line-height:1.75; }
  .about-highlights{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.85rem; }
  .about-highlight{ border:1px solid var(--border); border-radius:var(--radius-md); padding:1.1rem 1.2rem; }
  .about-highlight .h-icon{ width:2.2rem; height:2.2rem; border-radius:0.65rem; background:var(--tint-mint-bg); color:var(--tint-mint-ink); display:flex; align-items:center; justify-content:center; margin-bottom:0.7rem; }
  .about-highlight .h-icon svg{ width:14px; height:14px; }
  .about-highlight strong{ display:block; font-size:0.88rem; font-weight:700; color:var(--ink); line-height:1.35; }

  /* Section header row */
  .section-head{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2.75rem; }
  @media(min-width:1024px){ .section-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
  .section-head .lede{ max-width:32rem; }

  /* Card grids (services/areas) */
  .card-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
  @media(min-width:640px){ .card-grid{ grid-template-columns:1fr 1fr; } }
  @media(min-width:1024px){ .card-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }
  @media(min-width:1024px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }
  .info-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.75rem; display:flex; flex-direction:column; position:relative; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
  .info-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); border-color:transparent; }
  .info-icon{ width:2.9rem; height:2.9rem; border-radius:0.9rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
  .info-icon svg{ width:20px; height:20px; }
  .info-index{ position:absolute; top:1.5rem; right:1.5rem; font-size:0.72rem; font-weight:700; color:var(--border); letter-spacing:0.02em; }
  .info-card h3{ font-size:1rem; }
  .info-card p{ font-size:0.86rem; color:var(--ink-soft); margin-top:0.5rem; line-height:1.55; flex-grow:1; }

  .areas-others{ margin-top:2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.5rem 1.75rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem; }
  .others-label{ font-size:0.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:0.6rem; }
  .others-list{ display:flex; flex-wrap:wrap; gap:0.5rem 1rem; font-size:0.88rem; font-weight:600; }

  /* Testimonials */
  .testimonial-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.75rem; display:flex; flex-direction:column; gap:1.1rem; box-shadow:var(--shadow-card); }
  .stars{ display:inline-flex; align-self:flex-start; align-items:center; background:var(--primary-soft); color:var(--primary); font-size:0.8rem; letter-spacing:0.1em; padding:0.35rem 0.75rem; border-radius:999px; }
  .stars .star-empty{ color:var(--border); }
  .testimonial-quote{ font-size:0.98rem; line-height:1.6; color:var(--ink); flex-grow:1; }
  .testimonial-footer{ display:flex; align-items:center; gap:0.75rem; }
  .testimonial-avatar{ width:2.6rem; height:2.6rem; border-radius:50%; background:var(--primary-soft); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; color:var(--primary); flex-shrink:0; }
  .testimonial-name{ font-size:0.88rem; font-weight:700; }
  .testimonial-role{ font-size:0.78rem; color:var(--ink-soft); }
  /* Carousel dots exist in the markup but only render on phones (see mobile layer) */
  .carousel-dots{ display:none; }

  /* FAQ */
  .faq-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
  @media(min-width:1024px){ .faq-grid{ grid-template-columns:0.75fr 1.25fr; } }
  .faq-note{ margin-top:1.1rem; font-size:0.88rem; color:var(--ink-soft); max-width:28ch; }
  .faq-list{ display:flex; flex-direction:column; gap:0.75rem; }
  details.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.15rem 1.4rem; }
  details.faq-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:0.95rem; font-weight:700; gap:1rem; }
  details.faq-item summary::-webkit-details-marker{ display:none; }
  .faq-plus{ width:1.6rem; height:1.6rem; border-radius:50%; background:var(--primary-soft); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--primary); transition:transform .25s ease; }
  details.faq-item[open] .faq-plus{ transform:rotate(45deg); }
  .faq-answer{ margin-top:0.85rem; font-size:0.88rem; color:var(--ink-soft); line-height:1.7; }

  /* Contact */
  .contact-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
  @media(min-width:1024px){ .contact-grid{ grid-template-columns:0.9fr 1.1fr; gap:3rem; } }
  .contact-ctas{ display:flex; flex-wrap:wrap; gap:0.85rem; margin-top:2rem; }
  .contact-info{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2.25rem; }
  .contact-info-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm); padding:1rem 1.1rem; grid-column:span 2; }
  @media(min-width:480px){ .contact-info-item.half{ grid-column:span 1; } }
  .contact-info-label{ font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--on-dark-soft); }
  .contact-info-value{ margin-top:0.4rem; font-size:0.9rem; color:rgba(255,255,255,.9); line-height:1.5; }
  .contact-form{ background:#fff; border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--shadow-pop); }
  .form-row{ margin-bottom:1.1rem; }
  .form-row label{ display:block; font-size:0.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:0.45rem; }
  .form-row input, .form-row select, .form-row textarea{
    width:100%; background:var(--bg-panel); border:1.5px solid transparent; color:var(--ink); border-radius:0.85rem; padding:0.75rem 1rem; font-family:inherit; font-size:0.92rem;
  }
  .form-row input::placeholder, .form-row textarea::placeholder{ color:var(--ink-soft); opacity:.7; }
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--primary); background:#fff; }
  .form-two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .form-submit-note{ margin-top:0.9rem; font-size:0.78rem; color:var(--ink-soft); text-align:center; }
  .form-success{ margin-top:0.9rem; font-size:0.85rem; font-weight:700; color:var(--whatsapp); display:none; text-align:center; }
  .form-success.show{ display:block; }

  /* Final CTA */
  .final-cta{ text-align:center; border-radius:var(--radius-lg); padding:3.5rem 2rem; }
  .final-cta h2{ color:#fff; }
  .final-cta p{ color:rgba(255,255,255,.75); margin-top:0.75rem; }
  .final-cta .hero-ctas{ justify-content:center; margin-top:2rem; }

  /* Map */
  .map-header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
  .map-frame-wrap{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); background:var(--surface); }
  /* The fallback sits underneath; a loaded Google map is opaque and hides it.
     The iframe is deliberately left transparent so that if the embed is
     blocked or fails, the address card below shows through instead. */
  .map-header-lede{ margin-top:0.9rem; max-width:46ch; }
  .map-fallback{
    position:absolute; inset:0; z-index:0;
    display:flex; align-items:center; justify-content:center;
    padding:1.5rem; color:var(--ink-soft);
    background:var(--surface);
    border-radius:inherit; overflow:hidden;
  }
  /* The map pattern lives on a pseudo-element so it can be faded out towards
     the edges - fading it well before the corner means the grid lines and the
     rounded corner never touch, so there is no seam where they meet.
     Kept to a single evenly-repeating grid plus a soft central tint: an
     earlier version added wider "road" bands on their own tile size, which
     tiled independently of the grid (background-image layers repeat by
     default) and produced a second, misaligned pattern on top of the first. */
  .map-fallback::before{
    content:''; position:absolute; inset:0; border-radius:inherit;
    background-image:
      radial-gradient(circle at 50% 50%, rgba(90,84,120,.12), transparent 60%),
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:100% 100%, 34px 34px, 34px 34px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
    mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
  }
  /* A real card lifted off the map, rather than text floating on a blank panel */
  .map-card{
    position:relative; z-index:1;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-md); box-shadow:var(--shadow-pop);
    padding:2.1rem 1.9rem 1.7rem; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:0.45rem;
    max-width:23rem;
  }
  .map-pin-badge{
    position:relative; width:2.9rem; height:2.9rem; margin-bottom:0.8rem;
    border-radius:50%; background:var(--primary);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 10px 20px -8px rgba(90,84,120,.55);
  }
  .map-pin-badge svg{ width:21px; height:21px; color:#fff; position:relative; z-index:1; }
  /* Two rings pulse out on a staggered loop, each capped at scale(1.6) - a
     46.4px badge tops out at ~74px, the same footprint already measured to
     clear the card's padding on both desktop and the smallest phone width.
     The previous attempt scaled to 1.9x (≈88px) with no such cap, which is
     what pushed past the card's top edge. */
  .map-pin-badge::before, .map-pin-badge::after{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:1.5px solid var(--primary); opacity:0;
    animation:mapPulse 2.6s cubic-bezier(.22,.61,.36,1) infinite;
  }
  .map-pin-badge::after{ animation-delay:1.3s; }
  @keyframes mapPulse{
    0%{ transform:scale(1); opacity:.5; }
    100%{ transform:scale(1.6); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .map-pin-badge::before, .map-pin-badge::after{ animation:none; display:none; }
  }
  .map-card-label{ font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--primary); }
  .map-card strong{ font-size:1.05rem; line-height:1.4; color:var(--ink); }
  .map-card-hours{ display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; color:var(--ink-soft); }
  .map-card-hours svg{ width:14px; height:14px; }
  .map-card .btn{ margin-top:0.85rem; }
  /* Set by the sync script when the Excel map link is not embeddable: the
     iframe would only render a browser error page, so it is removed. */
  .map-frame-wrap.map-unavailable iframe{ display:none; }
  .map-frame-wrap.map-unavailable{ min-height:340px; }
  @media(min-width:768px){ .map-frame-wrap.map-unavailable{ min-height:420px; } }
  .map-frame-wrap iframe{ position:relative; z-index:1; width:100%; height:340px; border:0; display:block; background:transparent; }
  @media(min-width:768px){ .map-frame-wrap iframe{ height:420px; } }

  /* Footer */
  footer{ background:var(--primary-dark); color:#fff; padding:4rem 0 7rem; }
  @media(min-width:640px){ footer{ padding-bottom:4rem; } }
  .footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
  @media(min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
  .footer-brand{ display:flex; align-items:center; gap:0.95rem; }
  .footer-desc{ margin-top:1.1rem; font-size:0.87rem; color:rgba(255,255,255,.65); max-width:30ch; line-height:1.6; }
  .footer-heading{ font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--on-dark-soft); margin-bottom:1.1rem; }
  .footer-links{ display:flex; flex-direction:column; gap:0.7rem; }
  .footer-links a, .footer-links span{ font-size:0.87rem; color:rgba(255,255,255,.75); }
  .footer-links a:hover{ color:#fff; }
  .footer-contact-item{ display:flex; align-items:flex-start; gap:0.55rem; font-size:0.87rem; color:rgba(255,255,255,.75); margin-bottom:0.85rem; transition:color .2s ease; }
  .footer-contact-item:hover{ color:#fff; }
  .footer-contact-item svg{ width:15px; height:15px; color:var(--on-dark-soft); flex-shrink:0; margin-top:2px; }
  .footer-hours{ display:flex; align-items:flex-start; gap:0.55rem; font-size:0.87rem; color:rgba(255,255,255,.75); margin-bottom:0.85rem; }
  .footer-hours svg{ width:15px; height:15px; color:var(--on-dark-soft); flex-shrink:0; margin-top:2px; }
  .footer-bottom{ margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.75rem; font-size:0.78rem; color:rgba(255,255,255,.5); }

  /* Mobile CTA bar */
  .mobile-cta-bar{ position:fixed; bottom:0; left:0; right:0; z-index:40; display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; padding:0.75rem; background:rgba(255,255,255,.94); backdrop-filter:blur(7px); border-top:1px solid var(--border); transform:translateZ(0); will-change:transform; }
  .mobile-cta-bar a{ display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.85rem; border-radius:999px; font-size:0.85rem; font-weight:700; }
  .mobile-cta-bar a svg{ width:16px; height:16px; }
  .mobile-cta-bar .call{ background:var(--ink); color:#fff; }
  .mobile-cta-bar .wa{ background:var(--whatsapp); color:#fff; }
  @media(min-width:640px){ .mobile-cta-bar{ display:none; } }

  /* Back to top */
  .back-to-top{
    position:fixed; right:1.25rem; bottom:5.5rem; z-index:45;
    width:2.75rem; height:2.75rem; border-radius:50%;
    background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-card); opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, background .2s ease;
  }
  .back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .back-to-top:hover{ background:var(--primary); }
  .back-to-top svg{ width:19px; height:19px; }
  @media(min-width:640px){ .back-to-top{ bottom:2rem; right:1.5rem; } }

  /* ============================================================
     MOBILE OPTIMISATION LAYER
     Everything below is scoped to (max-width) or (hover:none)
     queries only, so the desktop layout above is untouched.
     ============================================================ */

  /* Touch devices: hover effects never "stick", and taps give real feedback */
  @media (hover:none){
    .info-card:hover{ transform:none; box-shadow:none; border-color:var(--border); }
    .btn:hover, .btn-primary:hover, .btn-whatsapp:hover, .btn-dark:hover, .btn-white:hover{ transform:none; }
    a, button, summary, .info-card{ -webkit-tap-highlight-color:rgba(90,84,120,.14); }
    .btn:active{ transform:scale(.97); }
    .info-card:active, .testimonial-card:active, .about-highlight:active{ transform:scale(.99); }
    details.faq-item summary:active{ opacity:.7; }
    .mobile-cta-bar a:active{ transform:scale(.97); filter:brightness(.94); }
  }

  /* ---------- Phones and small tablets ---------- */
  @media (max-width:767.98px){
    /* Guard against any stray element causing sideways scroll on a phone */
    html, body{ overflow-x:hidden; }

    /* Anchor scrolling clears the fixed header without a huge gap */
    html{ scroll-padding-top:5.25rem; }

    /* Keep the last section clear of the fixed bottom CTA bar */
    body{ padding-bottom:calc(4.75rem + env(safe-area-inset-bottom, 0px)); }

    .section-y{ padding-top:3.25rem; padding-bottom:3.25rem; }
    .display-lg{ font-size:clamp(1.55rem,6.2vw,2rem); }
    .lede{ font-size:0.98rem; }
    .section-head{ margin-bottom:1.75rem; gap:0.75rem; }

    /* --- Header: give the logo room, shrink the rest --- */
    .header-wrap{ padding:0.6rem 0.85rem 0; }
    .header-inner{ padding:0.35rem 0.5rem 0.35rem 0.65rem; }
    .brand-badge{ width:2.85rem; height:2.85rem; border-radius:0.75rem; padding:0.3rem; }
    .brand{ gap:0.65rem; min-width:0; }
    .brand-name{ font-size:0.88rem; }
    .brand-caption{ font-size:0.6rem; }
    /* WhatsApp pill in the header collapses to an icon button - the full
       green button already lives in the thumb-reachable bottom bar. */
    .header-right{ gap:0.35rem; }
    .menu-btn{ width:2.75rem; height:2.75rem; align-items:center; justify-content:center; }

    /* --- Mobile drawer: big, comfortable tap rows --- */
    .mobile-panel .container-page{ padding:0.5rem 1rem 1rem; gap:0; }
    .mobile-panel a{ display:flex; align-items:center; min-height:3rem; font-size:1rem; border-bottom:1px solid var(--border); }
    .mobile-panel a:last-of-type{ border-bottom:none; }

    /* --- Hero -------------------------------------------------------
       The old phone layout stretched the photo behind the text and then
       covered it with an 82-97% opaque scrim, so the house was effectively
       invisible. Here the photo gets its own fixed-ratio band at the top of
       the card and the copy sits underneath on solid colour: the image is
       fully visible AND the text keeps maximum contrast, instead of the two
       fighting each other for the same pixels.
       ----------------------------------------------------------------- */
    #top{ padding-top:5.25rem; }
    .hero-media{
      min-height:0; flex-direction:column; align-items:stretch;
      justify-content:flex-start; background:#211E38;
    }
    /* The photo becomes a real block in the flow rather than a full-bleed
       absolute layer, so nothing can sit on top of it and hide it. */
    .hero-media .bg{
      position:relative; inset:auto; order:1;
      width:100%; aspect-ratio:16/11;
      background-position:center 45%;
      /* ~900px wide instead of 2000px - roughly a quarter of the bytes on
         mobile data, and still sharp on a 3x phone screen at this size. */
      background-image:url('https://images.unsplash.com/photo-1748063578185-3d68121b11ff?q=80&w=900&auto=format&fit=crop');
    }
    /* Fades the bottom of the photo into the text panel so it ends on a soft
       blend rather than a hard horizontal seam. */
    .hero-media .bg::after{
      content:''; position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(33,30,56,0) 52%, rgba(33,30,56,.55) 80%, #211E38 100%);
    }
    .hero-media .overlay{ display:none; }

    /* Credibility pill tucked onto the bottom edge of the photo - keeps the
       social proof high on the page without costing a full row of height. */
    .trust-pill{
      position:relative; z-index:3; order:2; align-self:flex-start;
      top:auto; right:auto; width:auto;
      margin:-2.4rem 1.15rem 0; padding:0.4rem 0.9rem 0.4rem 0.4rem;
      background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
      box-shadow:var(--shadow-pop);
    }
    .trust-avatars span{ width:1.7rem; height:1.7rem; font-size:0.58rem; border-color:#fff; }
    .trust-pill-text strong{ color:var(--ink); font-size:0.76rem; }
    .trust-pill-text span{ color:var(--ink-soft); font-size:0.68rem; }

    /* Bottom padding clears the stats bar, which pulls up over the hero. */
    .hero-text{ order:3; padding:1.35rem 1.35rem 2.9rem; max-width:none; }
    .display-xl{ font-size:clamp(1.6rem,6.6vw,2.15rem); line-height:1.14; }
    .hero-text .lede{ font-size:0.94rem; line-height:1.6; margin-top:0.7rem; max-width:none; }
    /* The full locality list is valuable on desktop but pushes the buttons
       far below the fold on a phone. It stays in the markup (and in the
       Areas section) - it is only visually collapsed at this width. */
    .lede-extra{ display:none; }

    /* Full-width thumb-friendly hero buttons */
    .hero-ctas{ gap:0.6rem; margin-top:1.4rem; }
    .hero-ctas .btn{ flex:1 1 100%; justify-content:center; min-height:3.25rem; font-size:0.95rem; }
    /* One trust point per line scans far faster than a wrapped cluster */
    .trust-line{ flex-direction:column; flex-wrap:nowrap; gap:0.55rem; margin-top:1.35rem; }
    .trust-line-item{ font-size:0.8rem; align-items:flex-start; }
    .trust-line-item .tickmark{ line-height:1.4; }

    /* --- Stats --- */
    .stats-bar{ margin-top:-2rem; padding:0.85rem 0.4rem; border-radius:var(--radius-md); }
    .stat-item{ padding:0.7rem 0.35rem; }
    .stat-value{ font-size:1.6rem; }
    .stat-label{ font-size:0.62rem; letter-spacing:0.02em; }

    /* --- About --- */
    .about-grid{ gap:1.75rem; }
    .about-media img{ aspect-ratio:4/3; }
    .about-copy p{ font-size:0.95rem; }
    .about-highlights{ gap:0.6rem; margin-top:1.5rem; }
    .about-highlight{ padding:0.85rem 0.9rem; }
    .about-highlight .h-icon{ width:1.85rem; height:1.85rem; margin-bottom:0.5rem; }
    .about-highlight strong{ font-size:0.8rem; }

    /* --- Services + Areas: two compact tiles per row --- */
    .card-grid{ grid-template-columns:1fr 1fr; gap:0.7rem; }
    .info-card{ padding:1.1rem 0.9rem; border-radius:var(--radius-md); }
    .info-icon{ width:2.35rem; height:2.35rem; border-radius:0.7rem; margin-bottom:0.75rem; }
    .info-icon svg{ width:17px; height:17px; }
    .info-card h3{ font-size:0.88rem; line-height:1.3; }
    .info-card p{ font-size:0.78rem; margin-top:0.35rem; line-height:1.45; }
    .info-index{ top:1rem; right:1rem; font-size:0.65rem; }

    .areas-others{ margin-top:1.25rem; padding:1.1rem 1.15rem; gap:1rem; }
    .others-list{ gap:0.45rem; }
    .others-list span{ background:var(--primary-soft); color:var(--primary); padding:0.3rem 0.7rem; border-radius:999px; font-size:0.78rem; }

    /* --- Why choose us --- */
    .process-item{ gap:1rem; padding:1.25rem 0; }
    .process-icon{ width:2.35rem; height:2.35rem; }
    .process-icon svg{ width:15px; height:15px; }
    .process-item h3{ font-size:0.95rem; }
    .process-item p{ font-size:0.83rem; }

    /* --- Testimonials: swipeable carousel --- */
    .testimonials-track{
      display:flex; gap:0.85rem; overflow-x:auto; scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
      margin:0 -1.25rem; padding:0.25rem 1.25rem 0.5rem;
    }
    .testimonials-track::-webkit-scrollbar{ display:none; }
    .testimonials-track .testimonial-card{
      flex:0 0 85%; scroll-snap-align:center; padding:1.4rem;
    }
    /* Cards 2 and 3 start off-screen horizontally, so the scroll-reveal
       observer may never fire for them - force them visible in carousel mode. */
    .testimonials-track .reveal{ opacity:1; transform:none; }
    .testimonial-quote{ font-size:0.92rem; }
    .carousel-dots{ display:flex; justify-content:center; gap:0.4rem; margin-top:1rem; }
    .carousel-dots button{
      width:0.5rem; height:0.5rem; border-radius:50%; background:var(--border);
      padding:0; transition:all .25s ease;
    }
    .carousel-dots button.active{ background:var(--primary); width:1.4rem; border-radius:999px; }

    /* --- FAQ: larger hit area --- */
    details.faq-item{ padding:0.35rem 1.1rem; }
    details.faq-item summary{ font-size:0.9rem; min-height:3.25rem; }
    .faq-answer{ font-size:0.85rem; padding-bottom:1rem; }
    .faq-note{ max-width:none; }

    /* --- Contact: one field per row, 16px text (stops iOS zoom-on-focus) --- */
    .contact-grid{ gap:1.75rem; }
    .form-two{ grid-template-columns:1fr; gap:0; }
    .contact-form{ padding:1.25rem 1.1rem; border-radius:var(--radius-md); }
    .form-row{ margin-bottom:0.9rem; }
    .form-row input, .form-row select, .form-row textarea{
      font-size:16px; padding:0.85rem 1rem; min-height:3rem; border-radius:0.75rem;
    }
    .form-row label{ font-size:0.75rem; margin-bottom:0.35rem; }
    .contact-form button[type="submit"]{ min-height:3.4rem; }
    .contact-ctas{ gap:0.6rem; margin-top:1.5rem; }
    .contact-ctas .btn{ flex:1 1 100%; justify-content:center; min-height:3.25rem; }
    .contact-info{ gap:0.7rem; margin-top:1.75rem; }
    .contact-info-item{ padding:0.85rem 0.95rem; }
    .contact-info-value{ font-size:0.85rem; }

    /* --- Map + final CTA --- */
    .map-frame-wrap iframe{ height:260px; }
    .map-header{ gap:1rem; margin-bottom:1.25rem; }
    .map-header-lede{ margin-top:0.7rem; font-size:0.92rem; }
    .map-header .btn{ width:100%; justify-content:center; min-height:3.25rem; }
    /* The placeholder shrinks to fit its card on a phone instead of leaving a
       tall empty band above and below it. */
    .map-frame-wrap.map-unavailable{ min-height:0; }
    .map-fallback{ position:relative; inset:auto; padding:2rem 1.1rem; }
    .map-card{ width:100%; max-width:none; padding:1.5rem 1.25rem 1.4rem; }
    .map-card strong{ font-size:1rem; }
    .map-card .btn{ width:100%; justify-content:center; min-height:3.1rem; }
    .final-cta{ padding:2.5rem 1.25rem; border-radius:var(--radius-md); }
    .final-cta .hero-ctas .btn{ flex:1 1 100%; }

    /* --- Footer --- */
    /* --- Footer -----------------------------------------------------
       Stacked in one long column the footer ran for several screens - the
       9-item area list alone was ~400px of scrolling. Each block is now a
       clearly divided section, and the link lists run in two columns, which
       roughly halves the footer height and makes it scannable.
       ----------------------------------------------------------------- */
    footer{ padding:2.5rem 0 6rem; }
    .footer-grid{ gap:0; }
    .footer-grid > div{ padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.1); }
    .footer-grid > div:first-child{ padding-top:0; border-top:none; }
    .footer-heading{ margin-bottom:0.75rem; }
    .footer-desc{ margin-top:0.9rem; max-width:none; font-size:0.85rem; }
    .footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:0.1rem 1rem; }
    .footer-links a, .footer-links span{ min-height:2.6rem; display:flex; align-items:center; font-size:0.85rem; }
    /* "Nearby areas of Faridabad" is a note, not a link - let it span both
       columns so it never sits awkwardly beside a real link. */
    .footer-links span{ grid-column:1 / -1; color:rgba(255,255,255,.5); font-size:0.8rem; }
    .footer-contact-item, .footer-hours{ min-height:2.9rem; margin-bottom:0.15rem; align-items:center; }
    .footer-contact-item svg, .footer-hours svg{ margin-top:0; }
    .footer-bottom{ margin-top:1.5rem; padding-top:1.35rem; flex-direction:column; gap:0.4rem; }
  }

  /* Very narrow phones: fall back to single column so text never crushes */
  @media (max-width:359.98px){
    .card-grid{ grid-template-columns:1fr; }
    .about-highlights{ grid-template-columns:1fr; }
  }

  /* Bottom CTA bar: extend to tablets, respect the iPhone home indicator */
  @media (max-width:767.98px){
    .mobile-cta-bar{
      display:grid;
      padding:0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
      gap:0.6rem;
    }
    .mobile-cta-bar a{ min-height:3.1rem; font-size:0.9rem; }
    .back-to-top{ bottom:calc(5.25rem + env(safe-area-inset-bottom, 0px)); right:1rem; width:2.6rem; height:2.6rem; }
  }

  /* Landscape phones: trim vertical padding so content still fits */
  @media (max-width:900px) and (orientation:landscape) and (max-height:520px){
    #top{ padding-top:4.75rem; }
    .hero-text{ padding:1.25rem 1.35rem 2.5rem; }
    .section-y{ padding-top:2.5rem; padding-bottom:2.5rem; }
  }

  /* Landscape, but only while the stacked phone hero is actually in use
     (<=767.98px). Above that width the desktop hero layout applies and the
     photo is still an absolute full-bleed layer, so these overrides must not
     reach it - a fixed height on an inset:0 element fights itself. */
  @media (max-width:767.98px) and (orientation:landscape) and (max-height:520px){
    /* A 16/11 band would eat the whole screen with the phone on its side,
       so the photo gets a much shorter, letterbox ratio here. */
    .hero-media .bg{ aspect-ratio:auto; height:46vh; min-height:150px; }
    .trust-pill{ margin-top:-2.2rem; }
  }

  /* ============================================================
     AREA LANDING PAGES (areas/*.html)
     ============================================================ */
  .breadcrumb{ font-size:0.82rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center; }
  .breadcrumb a{ color:var(--primary); font-weight:600; }
  .breadcrumb a:hover{ text-decoration:underline; }
  .breadcrumb span[aria-hidden]{ opacity:.45; }

  .area-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
  @media(min-width:900px){ .area-grid{ grid-template-columns:1.15fr 1fr; gap:3.5rem; } }

  .area-list{ display:flex; flex-direction:column; gap:0.85rem; margin-top:1.25rem; }
  .area-list li{ display:flex; align-items:flex-start; gap:0.75rem; font-size:0.95rem; font-weight:600; color:var(--ink); }
  .area-list .tick{ width:1.5rem; height:1.5rem; border-radius:50%; background:var(--tint-mint-bg); color:var(--tint-mint-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
  .area-list .tick svg{ width:13px; height:13px; }

  /* Area pages start with content (no full-bleed hero), so clear the fixed header */
  body > main > section#top{ padding-top:7.5rem; }
  @media(max-width:767.98px){ body > main > section#top{ padding-top:6.25rem; } }

  .others-list a{ background:var(--primary-soft); color:var(--primary); padding:0.5rem 1rem; border-radius:999px; font-size:0.88rem; font-weight:600; transition:background .2s ease, color .2s ease; }
  .others-list a:hover{ background:var(--primary); color:#fff; }