/* ============ TOKENS ============ */
  :root{
    --white:      #FFFFFF;
    --blue-light: #EAF4FF;   /* section tint */
    --blue:       #2E86DE;   /* primary accent */
    --blue-dark:  #1B5FA8;   /* hover / deep accent */
    --blue-deep:  var(--text-heading);   /* headings on dark */
    --ink:        var(--text-body);
    --muted:      var(--text-muted);
    --line:       #DCE8F5;

    --display: "Poppins", "Segoe UI", sans-serif;
    --body: "Inter", "Segoe UI", sans-serif;

    --maxw: 1120px;
  }

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


  /* =====================================================================
     SITE COLOUR MAP  (edit ONLY this block to retune text colours)
     Values are taken from the live theme (twentysixteen-child style.css):
       --title-color #161921 | --body-color #646464 | --theme-color #3363c0
     ===================================================================== */
  :root{
    --text-heading: #161921;  /* headings, brand name   = theme --title-color                */
    --text-body:    #161921;  /* strong text, list items = theme --title-color                */
    --text-muted:   #646464;  /* paragraphs, small print = theme --body-color                 */
    --text-link:    #3363c0;  /* links, outline buttons  = theme --theme-color (theme-yellow) */
    --text-accent:  #3363c0;  /* eyebrows, highlights    = theme --theme-color (theme-yellow) */
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3{
    font-family: var(--display);
    font-weight: 600;
    color: var(--blue-deep);
    margin: 0 0 0.45em;
    line-height: 1.15;
  }
  h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; }
  h2{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
  h3{ font-size: 1.1rem; font-weight: 600; }
  p{ margin: 0 0 1em; color: var(--muted); }
  a{ color: var(--text-link); }
  ul{ margin:0; padding:0; list-style:none; }
  img{ max-width:100%; display:block; }

  .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  .eyebrow{
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-accent);
    margin-bottom: 12px;
  }

  /* ============ BUTTONS ============ */
  .btn{
    font-family: var(--display);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow .15s ease;
  }
  .btn:focus-visible{ outline: 3px solid var(--blue); outline-offset: 2px; }
  .btn svg{ width:18px; height:18px; flex-shrink:0; }
  .btn-whatsapp{ background: #25D366; color: #fff; }
  .btn-whatsapp:hover{ background: #1DBB59; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,211,102,0.35); }
  .btn-call{ background: var(--blue); color: #fff; }
  .btn-call:hover{ background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(46,134,222,0.35); }
  .btn-outline{ background: transparent; color: var(--text-link); border-color: var(--blue); }
  .btn-outline:hover{ background: var(--blue-light); }
  .btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
  .btn-sm{ padding: 9px 16px; font-size: 0.8rem; }

  /* ============ NAV ============ */
  header.site{
    position: sticky; top:0; z-index: 50;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 24px;
    max-width: var(--maxw); margin:0 auto;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
  }
  .brand img{
    width: 38px; height: 38px;
    border-radius: 8px;
    object-fit: cover;
  }
  .brand .name{
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--blue-deep);
    line-height:1.1;
  }
  .brand .name small{
    display:block;
    font-family: var(--body);
    font-weight: 500;
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.03em;
  }
  .nav-cta{ display:flex; gap:10px; }
  @media (max-width: 560px){
    .nav-cta .btn span.full{ display:none; }
    .nav-cta .btn{ padding: 11px 16px; }
  }

  /* ============ HERO ============ */
  .hero{
    padding: 56px 0 64px;
    background: linear-gradient(180deg, var(--blue-light) 0%, var(--white) 100%);
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items:center;
  }
  @media (max-width: 880px){
    .hero-grid{ grid-template-columns: 1fr; }
  }
  .hero h1 span{ color: var(--text-accent); }
  .hero-sub{ font-size: 1.05rem; max-width: 46ch; }
  .badges{
    display:flex; flex-wrap:wrap; gap: 10px 22px;
    margin: 20px 0 28px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
  }
  .badges li{ display:flex; align-items:center; gap:8px; }
  .badges li::before{
    content:"\2713";
    color: var(--text-accent);
    font-weight: 700;
  }
  .hero-photo{
    border-radius: 16px;
    overflow: hidden;
    background: var(--blue-light);
    border: 1px solid var(--line);
    box-shadow: 0 20px 40px -20px rgba(27,95,168,0.35);
    padding: 14px;
  }
  .hero-photo img{ width:100%; height: 100%; object-fit: contain; object-position: center; aspect-ratio: 4/4.6; }

  .trust-badge{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 6px 16px -8px rgba(27,95,168,0.25);
    margin-bottom: 18px;
  }
  .trust-badge .stars{ color: #F5A623; letter-spacing: 1px; }

  /* shared "card" effect for inline section photos, matching the hero photo */
  .img-card{
    border-radius: 16px;
    overflow: hidden;
    background: var(--blue-light);
    border: 1px solid var(--line);
    box-shadow: 0 20px 40px -20px rgba(27,95,168,0.35);
  }
  .img-card img{ width:100%; height:100%; object-fit: cover; display:block; }

  /* ============ FLOATING CTA STACK (WhatsApp) ============ */
  .float-stack{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display:flex;
    flex-direction: column;
    gap: 14px;
  }
  .float-btn{
    position: relative;
    width: 58px; height: 58px;
    border-radius: 50%;
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .float-btn svg{ width: 28px; height: 28px; }
  .float-btn:hover{ transform: translateY(-2px) scale(1.05); }
  .float-btn:focus-visible{ outline: 3px solid var(--blue-deep); outline-offset: 3px; }
  .float-wa{ background: #25D366; box-shadow: 0 10px 24px -6px rgba(37,211,102,0.55); }
  .float-wa:hover{ box-shadow: 0 14px 30px -6px rgba(37,211,102,0.65); }
  @keyframes wa-pulse{
    0%{ box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
    70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  .float-wa::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    animation: wa-pulse 2.2s infinite;
  }
  @media (max-width: 560px){
    .float-stack{ right: 16px; bottom: 16px; gap: 12px; }
    .float-btn{ width: 52px; height: 52px; }
    .float-btn svg{ width: 24px; height: 24px; }
  }

  /* ============ TAB SWITCHER (Replacement / Repair) ============ */
  .tab-switch{
    display:flex;
    justify-content:center;
    gap: 4px;
    background: var(--blue-light);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
    max-width: 640px;
    margin: 0 auto 40px;
  }
  @media (max-width: 620px){
    .tab-switch{ flex-direction: column; border-radius: 16px; }
  }
  .tab-btn{
    flex: 1;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--blue-deep);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 13px 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  @media (max-width: 620px){ .tab-btn{ border-radius: 12px; } }
  .tab-btn:hover{ color: var(--text-link); }
  .tab-btn.active{
    background: var(--blue);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(46,134,222,0.55);
  }
  .tab-btn:focus-visible{ outline: 3px solid var(--blue-dark); outline-offset: 2px; }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; }

  /* ============ GOOGLE REVIEWS CARD ============ */
  .reviews-card{
    display:grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: 40px;
    align-items:center;
    background: var(--blue-light);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px;
  }
  @media (max-width: 720px){
    .reviews-card{ grid-template-columns: 1fr; text-align:center; padding: 32px 24px; }
    .reviews-left{ display:flex; flex-direction:column; align-items:center; }
  }
  .reviews-left{ text-align:center; }
  .google-g{ display:flex; justify-content:center; margin-bottom: 10px; }
  .reviews-stars{ color: #F5A623; font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 6px; }
  .reviews-score{ font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--blue-deep); }
  .reviews-score span{ font-size: 1.1rem; color: var(--muted); font-weight: 500; }
  .reviews-right p{ margin-bottom: 0; }
  .reviews-count{ font-size: 0.82rem; color: var(--muted); font-weight: 500; margin-top: 4px; }

  .review-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 24px;
  }
  @media (max-width: 880px){ .review-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 520px){ .review-grid{ grid-template-columns: 1fr; } }
  .review-tile{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
  }
  .review-tile-stars{ color: #F5A623; font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 10px; }
  .review-tile-text{ font-size: 0.88rem; color: var(--ink); margin-bottom: 14px; }
  .review-tile-name{ font-size: 0.78rem; color: var(--muted); font-weight: 600; }

  /* ============ BEFORE / AFTER SLIDER ============ */
  .ba-slider{
    position: relative;
    width: 100%;
    aspect-ratio: 4/3.3;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 20px 40px -20px rgba(27,95,168,0.35);
    user-select: none;
  }
  .ba-after, .ba-before{
    position: absolute; inset: 0;
  }
  .ba-after img, .ba-before img{
    width:100%; height:100%; object-fit: cover; display:block;
  }
  .ba-before{
    clip-path: inset(0 50% 0 0);
  }
  .ba-tag{
    position:absolute; top: 14px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
  }
  .ba-tag-after{ right: 14px; background: var(--blue-dark); }
  .ba-tag-before{ left: 14px; background: var(--ink); }
  .ba-range{
    position:absolute; inset:0;
    width:100%; height:100%;
    margin:0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
    -webkit-appearance: none;
  }
  .ba-handle{
    position:absolute; top:0; bottom:0; left:50%;
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    pointer-events:none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  }
  .ba-handle span{
    position:absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--text-link);
    display:flex; align-items:center; justify-content:center;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px -4px rgba(0,0,0,0.35);
  }

  /* ============ SECTION SHELL ============ */
  section{ padding: 64px 0; }
  section.alt{ background: var(--blue-light); }
  .section-head{ max-width: 62ch; margin-bottom: 36px; }
  .section-head p{ font-size: 1.02rem; }
  .center{ text-align:center; margin-left:auto; margin-right:auto; }

  /* ============ WHY GRID ============ */
  .why-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  @media (max-width: 880px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 480px){ .why-grid{ grid-template-columns: 1fr; } }
  .why-item{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 20px;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .why-item:hover{ box-shadow: 0 12px 24px -14px rgba(27,95,168,0.35); transform: translateY(-2px); }
  .why-item .icon{
    width: 40px; height:40px;
    border-radius: 10px;
    background: var(--blue-light);
    color: var(--text-accent);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 14px;
    font-size: 1.1rem;
  }
  .why-item strong{ display:block; font-size: 0.98rem; margin-bottom:4px; color: var(--ink); }
  .why-item span.desc{ font-size: 0.87rem; color: var(--muted); }

  /* ============ TWO COL / SIGNS ============ */
  .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (max-width: 880px){ .split{ grid-template-columns: 1fr; } }
  .split .img-card{ width:100%; aspect-ratio: 4/3.3; }

  .checklist li{
    display:flex; align-items:flex-start; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.96rem;
    color: var(--ink);
  }
  .checklist li:first-child{ border-top: 1px solid var(--line); }
  .checklist .tag{
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .panel-card{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
  }

  /* ============ MATERIAL / STAINLESS ============ */
  .material{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items:center;
  }
  @media (max-width: 880px){ .material{ grid-template-columns: 1fr; } }

  /* ============ GALLERY / SLIDER ============ */
  .slider{
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .slider-track{
    display:flex;
    gap: 16px;
    width: max-content;
    animation: slide-loop 28s linear infinite;
  }
  .slider:hover .slider-track{ animation-play-state: paused; }
  .slider-track .img-card{
    width: 300px;
    aspect-ratio: 4/3;
    flex-shrink: 0;
  }
  @keyframes slide-loop{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  @media (max-width: 560px){
    .slider-track .img-card{ width: 220px; }
  }

  /* ============ FINAL CTA ============ */
  .final{
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    color: #fff;
    text-align:center;
    padding: 76px 0;
  }
  .final h2{ color:#fff; }
  .final .eyebrow{ color: #DCEBFB; }
  .final p{ color: #E4F0FC; max-width: 52ch; margin: 0 auto 26px; }
  .final .btn-row{ justify-content:center; }
  .final .btn-call{ background:#fff; color: var(--text-link); }
  .final .btn-call:hover{ background:#EAF4FF; }

  footer{
    padding: 26px 0;
    font-size: 0.8rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
    overflow: hidden;
  }
  footer .foot-cta{ margin-top: 10px; }


  /* ============ RESPONSIVE HARDENING (additive, no desktop change) ============ */
  html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body{ overflow-x: hidden; }
  .hero-grid > *, .split > *, .material > *, .reviews-card > *{ min-width: 0; }
  .ba-range{ touch-action: pan-y; }                 /* keep vertical scroll working on touch */
  header.site{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .float-stack{ right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  @media (max-width: 560px){
    .float-stack{ right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  }
  @media (max-width: 880px){
    section{ padding: 52px 0; }
    .hero{ padding: 40px 0 48px; }
    .hero-grid, .split, .material{ gap: 32px; }
  }
  @media (max-width: 480px){
    .wrap{ padding: 0 18px; }
    .nav{ padding: 12px 18px; }
    .btn-row .btn{ flex: 1 1 100%; justify-content: center; }
    .reviews-card{ padding: 28px 18px; }
    .final{ padding: 60px 0; }
  }