/* ===== CSS CUSTOM PROPERTIES (ROOT) ===== */
  :root{
    --bg:#0d0d0e;
    --bg-soft:#131315;
    --surface:#1a1a1d;
    --surface-2:#202023;
    --line: rgba(244,242,234,0.10);
    --text:#f4f2ea;
    --muted:#a6a49a;
    --muted-2:#78766d;
    --gold:#e8c93a;
    --gold-dim: rgba(232,201,58,0.14);
    --teal:#2f8a78;
    --teal-dim: rgba(47,138,120,0.16);
    --radius-s: 4px;
    --radius-m: 10px;
    --maxw: 1180px;
    --header-h: 72px;
  }

  /* ===== BASE & GLOBAL STYLES ===== */
  *{ 
    box-sizing: border-box; 
  }
  img{ max-width:100%; }
  html{ 
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
  }
  :focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 3px;
  }
  body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(232, 201, 58, 0.1);
    overflow-x: hidden;
    width: 100%;
  }
  img, svg{ 
    display: block; 
    max-width: 100%;
    height: auto;
  }
  a{ 
    color: inherit; 
    text-decoration: none;
    -webkit-transition: color 0.15s ease;
    transition: color 0.15s ease;
  }
  ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
  }
  button{ 
    font-family: inherit; 
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border: none;
  }

  h1, h2, h3, h4{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.01em;
  }

  .wrap{ 
    max-width: var(--maxw); 
    margin: 0 auto; 
    padding: 0 28px;
  }
  section{ 
    padding: 96px 0;
  }
  @media (max-width:720px){ 
    section{ 
      padding: 64px 0; 
    } 
  }

  .eyebrow{
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--radius-s);
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    -webkit-transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .btn:active{ 
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
  }
  .btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn-primary{ 
    background: var(--gold); 
    color: #141200;
  }
  .btn-primary:hover{ 
    background: #f0d451;
  }
  .btn-ghost{ 
    border-color: var(--line); 
    color: var(--text);
  }
  .btn-ghost:hover{ 
    border-color: var(--muted-2);
  }

  /* ===== HEADER & NAVIGATION ===== */
  header{
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
  }
  header::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(13, 13, 14, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 28px;
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .logo{ 
    font-family: 'Fraunces', serif; 
    font-weight: 700; 
    font-size: 20px; 
    letter-spacing: -0.01em; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    flex: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .logo-mark{ 
    width: 28px; 
    height: 28px; 
    border-radius: 7px; 
    flex: none;
    background-size: contain;
  }
  @media (max-width:400px){
    .logo{ 
      font-size: 17px; 
      gap: 6px; 
    }
    .logo-mark{ 
      width: 24px; 
      height: 24px; 
      border-radius: 6px; 
    }
  }
  .logo span{ 
    color: var(--gold);
  }
  .nav-links{ 
    display: flex; 
    gap: 26px; 
    align-items: center;
  }
  .nav-links a{ 
    font-size: 14px; 
    color: var(--muted);
    white-space: nowrap;
    -webkit-transition: color 0.15s;
    transition: color 0.15s;
  }
  .nav-links a:hover{ 
    color: var(--text);
  }
  .lang-toggle{
    display: flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    flex: none;
  }
  .lang-toggle button,
  .lang-toggle a{
    background: none;
    border: none;
    color: var(--muted);
    padding: 7px 13px;
    text-decoration: none;
    display: inline-block;
    -webkit-transition: background 0.15s ease, color 0.15s ease;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .lang-toggle button.active,
  .lang-toggle a.active{ 
    background: var(--gold); 
    color: #141200;
  }
  .nav-right{ 
    display: flex; 
    align-items: center; 
    gap: 18px; 
    flex-wrap: nowrap;
    flex: none;
  }
  .nav-right .nav-cta{ 
    white-space: nowrap; 
    flex: none;
  }
  .hamburger{ 
    display: none; 
    background: none; 
    border: none; 
    color: var(--text); 
    flex: none;
    padding: 6px;
    margin: -6px;
  }

  /* Elements that only ever appear inside the slide-out mobile panel —
     hidden entirely on desktop, where their desktop twins (inside
     .nav-right) are shown instead. */
  .nav-mobile-actions,
  .nav-mobile-cta{
    display: none;
  }

  /* Below this width the full nav-links row plus the lang toggle, the
     WhatsApp icon and the CTA no longer have room to breathe, so we
     collapse everything into a single hamburger-triggered panel rather
     than letting it all cram together in one row. */
  @media (max-width:1100px){
    .nav-links{
      position: fixed;
      inset: var(--header-h) 0 0 0;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 6px 28px 32px;
      border-top: 1px solid var(--line);
      max-width: 100vw;
      box-sizing: border-box;
      overflow-x: hidden;
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity 0.18s ease, -webkit-transform 0.18s ease;
      transition: opacity 0.18s ease, transform 0.18s ease;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 49;
    }
    .nav-links.open{ 
      opacity: 1; 
      pointer-events: auto; 
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    .nav-links li{
      width: 100%;
      min-width: 0;
    }
    .nav-links > li > a,
    .nav-links .dropdown-trigger{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 0;
      width: 100%;
      border-bottom: 1px solid var(--line);
      font-size: 16px;
      color: var(--muted);
    }
    .nav-links .dropdown-trigger{ cursor:pointer; }
    .has-dropdown.open > .dropdown-trigger{ color: var(--text); }

    /* Language toggle + WhatsApp button live at the top of the panel
       on mobile, instead of squeezed into the header bar. #navLinks is
       used here (rather than .nav-mobile-actions/.nav-mobile-cta alone)
       so these overrides beat the generic ".nav-links > li > a" rule
       above, which would otherwise stretch the icon/button into a
       full-width underlined row like the plain text links. */
    .nav-mobile-actions{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 0 20px;
      border-bottom: 1px solid var(--line);
    }
    .nav-mobile-actions .lang-toggle{
      font-size: 13.5px;
    }
    .nav-mobile-actions .lang-toggle button,
    .nav-mobile-actions .lang-toggle a{
      padding: 9px 16px;
    }
    #navLinks .nav-mobile-actions a.nav-whatsapp{
      display: flex;
      width: 40px;
      height: 40px;
      padding: 0;
      border-bottom: none;
    }

    /* Primary CTA repeated as a full-width button at the foot of the
       panel so it's still one tap away with the menu open. */
    .nav-mobile-cta{
      display: block;
      margin-top: 20px;
    }
    #navLinks .nav-mobile-cta a{
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 15px 18px;
      font-size: 15px;
      border-bottom: none;
    }

    /* Their desktop counterparts step out of the header bar entirely on
       mobile — only the logo and the hamburger remain visible up top,
       everything else lives in the panel above (avoids showing the
       lang toggle twice). */
    .nav-right #langToggle,
    .nav-right .nav-whatsapp,
    .nav-right .nav-cta{
      display: none;
    }

    .hamburger{ 
      display: block;
    }
  }

  /* ---------- HERO ---------- */
  .hero{ padding:88px 0 70px; position:relative; overflow:hidden; }
  .hero-grid{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:center;
  }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

  .hero h1{ font-size:clamp(36px,5vw,58px); max-width:14ch; }
  .hero-sub{ color:var(--muted); font-size:17.5px; max-width:46ch; margin:22px 0 34px; }
  .hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:30px; }
  .hero-note{ font-size:13.5px; color:var(--muted-2); }

  .badge-row{ display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; }
  .badge{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted); }
  .badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }

  /* draft / refined compare slider */
  .compare{
    position:relative; aspect-ratio:4/3.3; border-radius:12px; overflow:hidden;
    border:1px solid var(--line); box-shadow:0 30px 60px -25px rgba(0,0,0,0.6);
    user-select:none;
  }
  .compare-layer{ position:absolute; inset:0; }
  .compare-after{ z-index:1; }
  .compare-before{ z-index:2; clip-path: inset(0 50% 0 0); }
  .cmock{ width:100%; height:100%; padding:20px; display:flex; flex-direction:column; gap:12px; }
  .cmock-draft{ background:repeating-linear-gradient(45deg, rgba(244,242,234,0.03) 0 2px, transparent 2px 10px), var(--surface); }
  .cmock-final{ background:linear-gradient(160deg, var(--surface-2), var(--bg-soft)); }
  .cbar{ height:9px; border-radius:3px; }
  .cmock-draft .cbar{ border:1.5px dashed rgba(244,242,234,0.3); background:transparent; }
  .cmock-final .cbar{ background:var(--gold); opacity:0.9; }
  .crow{ display:flex; gap:10px; flex:1; }
  .cbox{ flex:1; border-radius:6px; }
  .cmock-draft .cbox{ border:1.5px dashed rgba(244,242,234,0.3); }
  .cmock-final .cbox:nth-child(1){ background:linear-gradient(135deg, var(--gold), #b9962a); }
  .cmock-final .cbox:nth-child(2){ background:var(--surface); border:1px solid var(--line); }
  .cmock-final .cbox:nth-child(3){ background:linear-gradient(135deg, var(--teal), #1e5c50); }
  .ccta{ height:30px; width:110px; border-radius:6px; }
  .cmock-draft .ccta{ border:1.5px dashed rgba(244,242,234,0.35); }
  .cmock-final .ccta{ background:var(--gold); }
  .clabel{
    position:absolute; top:12px; left:12px; font-size:10.5px; letter-spacing:0.05em;
    padding:4px 9px; border-radius:4px; font-weight:600;
  }
  .cmock-draft .clabel{ background:rgba(0,0,0,0.4); color:var(--muted); border:1px solid var(--line); }
  .cmock-final .clabel{ background:rgba(13,13,14,0.5); color:var(--gold); border:1px solid rgba(232,201,58,0.35); }
  .compare-slider{
    position:absolute; inset:0; width:100%; height:100%; z-index:5;
    -webkit-appearance:none; appearance:none; background:transparent; margin:0; cursor:ew-resize;
  }
  .compare-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:44px; background:transparent; }
  .compare-handle{ position:absolute; top:0; bottom:0; left:50%; width:0; z-index:4; pointer-events:none; }
  .compare-handle:before{ content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--gold); box-shadow:0 0 12px rgba(232,201,58,0.6); }
  .compare-handle .grip{
    position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%; background:var(--gold);
    display:flex; align-items:center; justify-content:center; color:#141200; font-size:13px;
    box-shadow:0 6px 18px rgba(232,201,58,0.45);
  }
  .compare-caption{ text-align:center; font-size:12.5px; color:var(--muted-2); margin-top:14px; }
  @media (max-width:900px){ .compare{ margin-top:20px; } }

  /* ---------- MISSION / VISION / MOTTO ---------- */
  .mission-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:42px;
  }
  @media (max-width:900px){ .mission-grid{ grid-template-columns:1fr; gap:32px; } }
  .mission-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:36px 32px; display:flex; flex-direction:column; position:relative;
  }
  .mission-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--teal));
    border-radius:var(--radius-m) var(--radius-m) 0 0;
  }
  .mission-card h4{
    font-size:13px; color:var(--muted); margin:0 0 14px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
  }
  .mission-card h3{ font-size:20px; line-height:1.3; margin:0 0 16px; color:var(--text); }
  .mission-card p{ font-size:14.8px; color:var(--muted); line-height:1.65; margin:0; }

  /* ---------- TOOLS SECTION ---------- */
  .tools-banner{
    display:grid; grid-template-columns:1fr 1.2fr; gap:50px; align-items:center;
  }
  @media (max-width:900px){ .tools-banner{ grid-template-columns:1fr; } }
  .tools-banner-copy h3{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; line-height:1.2; }
  .tools-banner-copy p{ color:var(--muted); font-size:15.5px; line-height:1.7; margin:0 0 24px; max-width:54ch; }
  .tools-feature-list{
    margin:24px 0; display:flex; flex-direction:column; gap:12px;
  }
  .tools-feature-list li{
    display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--text);
  }
  .tools-feature-list li:before{
    content:"✓"; color:var(--gold); font-weight:700; flex:none; margin-top:2px;
  }
  .audit-tool-card{
    background:linear-gradient(135deg, var(--surface-2), var(--surface));
    border:1px solid var(--line); border-radius:var(--radius-m); padding:32px;
    text-align:center; display:flex; flex-direction:column; justify-content:space-between;
  }
  .audit-tool-card .eyebrow{ margin-bottom:10px; color:var(--gold); }
  .audit-tool-card h3{ font-size:22px; margin:0 0 12px; }
  .audit-tool-card p{ color:var(--muted); font-size:14.8px; margin:0 0 28px; }
  .audit-tool-card .btn{ width:100%; justify-content:center; }

  /* ---------- VALUE STRIP ---------- */
  .value-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); }
  .value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
  .value-item{ padding:34px 28px; border-right:1px solid var(--line); }
  .value-item:last-child{ border-right:none; }
  .value-item h4{ font-size:16.5px; margin-bottom:8px; }
  .value-item p{ margin:0; color:var(--muted); font-size:14.5px; }
  @media (max-width:800px){
    .value-grid{ grid-template-columns:1fr; }
    .value-item{ border-right:none; border-bottom:1px solid var(--line); }
  }

  /* ---------- SECTION HEADS ---------- */
  .section-head{ max-width:640px; margin-bottom:50px; }
  .section-head h2{ font-size:clamp(28px,3.4vw,38px); margin-bottom:14px; }
  .section-head p{ color:var(--muted); font-size:16px; margin:0; }

  /* ---------- SECTORS ---------- */
  .sectors-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media (max-width:900px){ .sectors-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .sectors-grid{ grid-template-columns:1fr; } }
  .sector-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:28px; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease;
  }
  .sector-card:hover{ border-color:rgba(232,201,58,0.35); transform:translateY(-2px); }
  .sector-icon{
    width:46px; height:46px; border-radius:var(--radius-s); flex:none; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg, var(--gold-dim), var(--teal-dim));
    border:1px solid var(--line);
  }
  .sector-card h4{ font-size:16.5px; margin:0 0 8px; color:var(--text); }
  .sector-card p{ color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 14px; }
  .sector-card .sector-note{
    color:var(--muted-2); font-size:12.5px; line-height:1.6; margin:0;
    padding-top:14px; border-top:1px solid var(--line);
  }
  .sectors-footnote{ color:var(--muted-2); font-size:13px; margin-top:28px; text-align:center; }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media (max-width:900px){ .testimonials-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .testimonials-grid{ grid-template-columns:1fr; } }

  /* ---------- STATS (measurable results) ---------- */
  /* Below the breakpoint, three fixed-width cards no longer fit the
     viewport. Rather than let them overflow and get clipped (or crush
     down illegibly), the row scrolls horizontally on its own so every
     card stays fully readable at full size. */
  .stats-scroll{
    position:relative;
    margin-top:34px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:var(--muted-2) transparent;
    padding-bottom:10px;
    margin-bottom:-10px;
    /* Fades the right edge so an unscrolled card reads as "more content
       this way" rather than looking like it's simply been cut off. */
    mask-image:linear-gradient(to right, black 0%, black 88%, transparent 100%);
    -webkit-mask-image:linear-gradient(to right, black 0%, black 88%, transparent 100%);
  }
  .stats-scroll::-webkit-scrollbar{ height:6px; }
  .stats-scroll::-webkit-scrollbar-track{ background:transparent; }
  .stats-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
  .stats-grid{ display:flex; gap:24px; }
  .stat-card{
    flex:0 0 auto;
    width:250px;
    scroll-snap-align:start;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:28px;
  }
  .stat-card h3{ font-size:32px; margin:0 0 10px; }
  .stat-card p{ color:var(--muted); font-size:14px; margin:0; }
  .stats-hint{ display:none; }
  @media (max-width:759px){
    .stats-hint{
      display:block;
      margin-top:12px;
      font-size:12.5px;
      color:var(--muted-2);
      text-align:right;
    }
  }
  @media (min-width:760px){
    .stats-scroll{ overflow-x:visible; mask-image:none; -webkit-mask-image:none; }
    .stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
    .stat-card{ width:auto; }
  }
  .testimonial-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:30px 28px; display:flex; flex-direction:column;
  }
  .testimonial-mark{ margin-bottom:16px; }
  .testimonial-stars{ display:flex; gap:3px; margin:0 0 12px; }
  .testimonial-stars svg{ flex:none; }
  .mini-testimonial-stars{ display:flex; gap:2px; margin:0 0 8px; }
  .mini-testimonial-stars svg{ flex:none; }
  .star-rating{ display:flex; gap:3px; margin:0 0 12px; }
  .star-rating svg{ flex:none; }
  .testimonial-quote{
    color:var(--muted); font-size:14.6px; line-height:1.72; margin:0 0 26px; flex:1;
  }
  .testimonial-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
  .testimonial-avatar{
    width:44px; height:44px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:600; font-size:14px;
    background:linear-gradient(155deg, var(--gold-dim), var(--teal-dim));
    border:1px solid var(--line);
  }
  .testimonial-author h4{ font-size:14.5px; margin:0 0 2px; }
  .testimonial-author p{ margin:0; color:var(--muted-2); font-size:12.3px; }

  /* ---------- PROCESS VISUAL (portfolio proof) ---------- */
  .proof-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:26px; }
  @media (max-width:860px){ .proof-grid{ grid-template-columns:1fr; } }
  .proof-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:26px; position:relative; overflow:hidden;
  }
  .proof-card h4{ font-size:15px; margin-bottom:6px; }
  .proof-card p{ color:var(--muted); font-size:13.8px; margin:0; }
  .scroll-mock{ height:230px; position:relative; margin-top:18px; }
  .scroll-mock .layer{
    position:absolute; left:6%; right:6%; height:80px; border-radius:8px;
    border:1px solid var(--line); background:var(--surface-2);
  }
  .scroll-mock .layer:nth-child(1){ top:0; opacity:1; }
  .scroll-mock .layer:nth-child(2){ top:52px; left:10%; right:2%; opacity:0.75; background:linear-gradient(160deg, var(--teal-dim), transparent); }
  .scroll-mock .layer:nth-child(3){ top:104px; left:2%; right:10%; opacity:0.55; background:linear-gradient(160deg, var(--gold-dim), transparent); }
  .scroll-mock .layer:nth-child(4){ top:156px; opacity:0.35; }

  .metric-row{ display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; }
  .score-ring{
    width:96px; height:96px; border-radius:50%;
    background:conic-gradient(var(--gold) 0 96%, var(--surface-2) 96% 100%);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .score-ring span{
    width:74px; height:74px; border-radius:50%; background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:22px; font-weight:600;
  }
  .metric-copy h4{ font-size:15px; margin-bottom:4px; }
  .metric-copy p{ color:var(--muted); font-size:13.8px; margin:0; }
  .growth-line{ margin-top:16px; }

  .proof-note{
    margin-top:26px; display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-m); padding:22px 26px;
  }
  .proof-note p{ margin:0; color:var(--muted); font-size:14px; max-width:60ch; }

  /* ---------- PRICING ---------- */
  .free-banner{
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    background:linear-gradient(120deg, var(--teal-dim), transparent 60%), var(--surface);
    border:1px solid var(--line); border-radius:var(--radius-m);
    padding:26px 30px; margin-bottom:54px;
  }
  .free-banner h4{ font-size:18px; margin-bottom:6px; }
  .free-banner p{ margin:0; color:var(--muted); font-size:14.5px; max-width:52ch; }
  @media (max-width:560px){
    .free-banner{ flex-direction:column; align-items:stretch; }
    .free-banner .btn{ width:100%; justify-content:center; }
  }

  .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:920px){ .price-grid{ grid-template-columns:1fr; } }
  .price-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:34px 28px; display:flex; flex-direction:column;
  }
  .price-card.featured{ border-color:var(--gold); position:relative; background:var(--surface-2); }
  .price-card.featured:before{
    content:"Recommended"; position:absolute; top:-13px; left:28px;
    background:var(--gold); color:#141200; font-size:11.5px; font-weight:700;
    padding:4px 11px; border-radius:999px; letter-spacing:0.02em;
  }
  .tier-name{ font-size:13.5px; color:var(--muted); margin-bottom:6px; font-weight:600; }
  .price-card h3{ font-size:24px; margin-bottom:10px; }
  .price-card .who{ color:var(--muted); font-size:14px; margin-bottom:22px; min-height:44px; }
  .price{ font-family:'Fraunces', serif; font-size:32px; margin-bottom:2px; }
  .price small{ font-family:'Inter',sans-serif; font-size:13px; color:var(--muted-2); font-weight:500; }
  .price-note{ font-size:12.5px; color:var(--muted-2); margin-bottom:24px; }
  .feature-list{ margin:0 0 28px; flex:1; }
  .feature-list li{ display:flex; gap:10px; padding:8px 0; font-size:14.3px; color:var(--text); border-top:1px solid var(--line); }
  .feature-list li:first-child{ border-top:none; }
  .feature-list li:before{ content:"—"; color:var(--gold); flex:none; }
  .price-card .btn{ width:100%; justify-content:center; }

  .maintenance-grid .price-card.featured{ border-color:var(--teal); background:var(--surface-2); }
  .maintenance-grid .price-card.featured:before{
    content:"Recommended"; background:var(--teal); color:#06231c;
  }
  .maintenance-grid .feature-list li:before{ color:var(--teal); }

  /* ---------- PROCESS TIMELINE ---------- */
  .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
  @media (max-width:800px){ .timeline{ grid-template-columns:1fr; gap:0; } }
  .tl-step{ padding:0 26px 0 0; position:relative; }
  .tl-step:not(:last-child):after{
    content:""; position:absolute; top:9px; right:0; width:100%; height:1px; background:var(--line);
  }
  @media (max-width:800px){
    .tl-step{ padding:0 0 34px 30px; border-left:1px solid var(--line); margin-left:9px; }
    .tl-step:not(:last-child):after{ display:none; }
    .tl-step:last-child{ padding-bottom:0; }
  }
  .tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); margin-bottom:20px; }
  @media (max-width:800px){ .tl-dot{ position:absolute; left:-35px; top:2px; margin-bottom:0; } }
  .tl-day{ font-size:12px; color:var(--muted-2); margin-bottom:8px; font-weight:600; letter-spacing:0.02em; }
  .tl-step h4{ font-size:17px; margin-bottom:8px; }
  .tl-step p{ color:var(--muted); font-size:13.8px; margin:0; padding-right:10px; }

  /* ---------- TEAM ---------- */
  .team-lead{
    display:flex; gap:40px; margin-bottom:44px; flex-wrap:wrap;
  }
  .founder{ display:flex; gap:16px; align-items:center; }
  .avatar{
    width:64px; height:64px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:600; font-size:20px;
    background:linear-gradient(155deg, var(--gold-dim), var(--teal-dim));
    border:1px solid var(--line);
    overflow:hidden;
  }
  .founder h4{ font-size:16px; margin-bottom:3px; }
  .founder p{ margin:0; color:var(--muted); font-size:13.3px; }
  .team-note{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:28px 30px; color:var(--muted); font-size:15px; max-width:74ch;
  }
  .team-note strong{ color:var(--text); }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; }
  @media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-info h4{ font-size:15px; margin:26px 0 10px; }
  .contact-info h4:first-child{ margin-top:0; }
  .contact-line{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14.8px; margin-bottom:8px; }
  .contact-line a{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }
  .contact-line a:hover{ color:var(--gold); }
  .social-row{ display:flex; gap:12px; margin-top:20px; }
  .social-btn{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s;
  }
  .social-btn:hover{ border-color:var(--gold); background:var(--gold-dim); }
  .social-btn.whatsapp:hover{ border-color:#25D366; background:rgba(37,211,102,0.14); color:#25D366; }
  .nav-whatsapp{ width:38px; height:38px; color:var(--muted); }
  .nav-whatsapp:hover{ border-color:#25D366; background:rgba(37,211,102,0.14); color:#25D366; }

  form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:32px; }
  .field{ margin-bottom:20px; }
  .field label{ display:block; font-size:12.5px; letter-spacing:0.03em; color:var(--muted); margin-bottom:8px; }
  .field input, .field select, .field textarea{
    width:100%; background:var(--bg-soft); border:1px solid var(--line); color:var(--text);
    padding:13px 14px; border-radius:var(--radius-s); font-family:inherit; font-size:14.5px;
    transition:border-color .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
  .field textarea{ resize:vertical; min-height:120px; }
  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:520px){ .row-2{ grid-template-columns:1fr; } }

  .time-block{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .time-block input[type="time"]{ width:auto; flex:1; min-width:140px; color-scheme:dark; }
  .time-block input[type="time"]::-webkit-calendar-picker-indicator{ filter:invert(0.85); cursor:pointer; }
  .anytime-check{ display:flex; align-items:center; gap:8px; font-size:13.8px; color:var(--muted); white-space:nowrap; }
  .anytime-check input{ width:16px; height:16px; accent-color:var(--gold); }

  .submit-btn{ width:100%; justify-content:center; margin-top:6px; }
  .submit-btn:disabled{ opacity:0.6; cursor:not-allowed; }
  .form-privacy{ margin:12px 0 0; font-size:12.3px; color:var(--muted-2); text-align:center; }
  .form-status{ margin-top:16px; font-size:14px; padding:12px 14px; border-radius:var(--radius-s); display:none; }
  .form-status.ok{ display:block; background:var(--teal-dim); color:#bfe9de; border:1px solid rgba(47,138,120,0.4); }
  .form-status.err{ display:block; background:rgba(220,70,70,0.12); color:#f3b3b3; border:1px solid rgba(220,70,70,0.4); }

  /* ---------- IT SOLUTIONS OVERVIEW ---------- */
  .overview-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:980px){ .overview-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .overview-grid{ grid-template-columns:1fr; } }
  .overview-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:26px 24px; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease;
  }
  .overview-card:hover{ border-color:rgba(232,201,58,0.35); transform:translateY(-2px); }
  .overview-icon{
    width:44px; height:44px; border-radius:var(--radius-s); flex:none; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg, var(--gold-dim), var(--teal-dim));
    border:1px solid var(--line);
  }
  .overview-card h4{ font-size:15.5px; margin:0 0 8px; }
  .overview-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 16px; flex:1; }
  .overview-card a.jump{ font-size:12.8px; font-weight:600; color:var(--gold); display:inline-flex; align-items:center; gap:5px; }
  .overview-card a.jump:hover{ color:var(--text); }

  /* ---------- SERVICE SECTIONS (shared) ---------- */
  .service-tag{
    display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:#141200; background:var(--gold); padding:3px 10px; border-radius:999px; margin-bottom:14px;
  }
  .service-tag.teal{ color:#06231c; background:var(--teal); }
  .card-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .card-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:980px){ .card-grid-3{ grid-template-columns:1fr 1fr; } .card-grid-4{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .card-grid-3{ grid-template-columns:1fr; } .card-grid-4{ grid-template-columns:1fr; } }

  .svc-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:28px; display:flex; flex-direction:column;
  }
  .svc-card h4{ font-size:16.5px; margin:0 0 10px; }
  .svc-card p{ color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 18px; flex:1; }
  .svc-price{
    font-family:'Fraunces', serif; font-size:19px; margin:0 0 4px; padding-top:16px;
    border-top:1px solid var(--line);
  }
  .svc-price small{ font-family:'Inter',sans-serif; font-size:12px; color:var(--muted-2); font-weight:500; }
  .svc-note{ font-size:12px; color:var(--muted-2); margin:0 0 18px; }
  .svc-card .btn{ width:100%; justify-content:center; margin-top:auto; }

  .mini-testimonial{
    margin-top:44px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:26px 28px; display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
  }
  .mini-testimonial svg{ flex:none; margin-top:2px; }
  .mini-testimonial blockquote{ margin:0; flex:1; min-width:200px; }
  .mini-testimonial p{ margin:0 0 10px; color:var(--muted); font-size:14.4px; line-height:1.68; font-style:italic; }
  .mini-testimonial footer{ border:none; padding:0; margin:0; }
  .mini-testimonial .mt-author{ font-size:13px; color:var(--text); font-weight:600; font-style:normal; }
  .mini-testimonial .mt-role{ font-size:12.3px; color:var(--muted-2); font-style:normal; }

  .quote-strip{
    margin-top:28px; padding:22px 26px; border:1px dashed var(--line); border-radius:var(--radius-m);
    color:var(--muted-2); font-size:13px; text-align:center;
  }

  /* ---------- RECRUITING ---------- */
  .recruit-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-bottom:48px; }
  @media (max-width:900px){ .recruit-grid{ grid-template-columns:1fr; gap:0; } }
  .recruit-step{ padding:0 20px 0 0; position:relative; }
  .recruit-step:not(:last-child):after{
    content:""; position:absolute; top:9px; right:0; width:100%; height:1px; background:var(--line);
  }
  @media (max-width:900px){
    .recruit-step{ padding:0 0 30px 30px; border-left:1px solid var(--line); margin-left:9px; }
    .recruit-step:not(:last-child):after{ display:none; }
    .recruit-step:last-child{ padding-bottom:0; }
  }
  .recruit-step .tl-dot{ background:var(--teal); }
  .recruit-step h4{ font-size:15px; margin-bottom:6px; }
  .recruit-step p{ color:var(--muted); font-size:13.2px; margin:0; padding-right:8px; }

  /* ---------- LEADERSHIP (redesigned team) ---------- */
  .leadership-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  @media (max-width:760px){ .leadership-grid{ grid-template-columns:1fr; } }
  .leader-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    overflow:hidden; display:flex; flex-direction:column;
  }
  .leader-photo{ aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); }
  .leader-photo img{ width:100%; height:100%; object-fit:cover; }
  .leader-body{ padding:26px 28px 28px; }
  .leader-body .tier-name{ margin-bottom:8px; }
  .leader-body h3{ font-size:22px; margin:0 0 4px; }
  .leader-role{ color:var(--gold); font-size:13.5px; font-weight:600; margin:0 0 14px; }
  .leader-body p.bio{ color:var(--muted); font-size:14px; line-height:1.65; margin:0 0 20px; }
  .leader-socials{ display:flex; gap:10px; }
  .leader-socials a{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--muted);
    transition:border-color .15s, background .15s, color .15s;
  }
  .leader-socials a:hover{ border-color:var(--gold); background:var(--gold-dim); color:var(--text); }

  /* ---------- PHILANTHROPY / IMPACT ---------- */
  .impact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:900px){ .impact-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .impact-grid{ grid-template-columns:1fr; } }
  .impact-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:28px; display:flex; flex-direction:column; position:relative;
  }
  .impact-card .service-tag{ align-self:flex-start; }
  .impact-card h4{ font-size:16.5px; margin:0 0 10px; }
  .impact-card p{ color:var(--muted); font-size:13.8px; line-height:1.62; margin:0 0 14px; }
  .impact-card .impact-stat{
    margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
    font-size:12.5px; color:var(--muted-2);
  }
  .impact-card.template{
    border-style:dashed; align-items:center; justify-content:center; text-align:center; color:var(--muted-2);
  }
  .impact-card.template h4{ color:var(--muted); }

  /* ---------- FOOTER ---------- */
  footer{ border-top:1px solid var(--line); padding:44px 0; }
  .footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .footer-row p{ margin:0; color:var(--muted-2); font-size:13px; }
  .footer-links{ display:flex; flex-wrap:wrap; gap:12px 22px; row-gap:12px; }
  .footer-links a{ font-size:13px; color:var(--muted); white-space:nowrap; }
  .footer-links a:hover{ color:var(--gold); }
  @media (max-width:600px){
    .footer-row{ flex-direction:column; align-items:flex-start; }
    .footer-links{ gap:10px 16px; }
  }

/* =======================================================
   MULTI-PAGE ARCHITECTURE ADDITIONS
   (company home + individual service pages)
   ======================================================= */

/* ---------- NAV DROPDOWN (Services) ---------- */
.nav-links li.has-dropdown{ position:relative; }
.dropdown-trigger{
  display:flex; align-items:center; gap:5px; cursor:pointer; min-width:0;
  color:var(--muted); font-size:14px; -webkit-transition:color .15s; transition:color .15s;
}
.has-dropdown:hover .dropdown-trigger,
.has-dropdown:focus-within .dropdown-trigger{ color:var(--text); }
.dropdown-trigger svg{ transition:transform .18s ease; }
.dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  min-width:280px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:10px; box-shadow:0 20px 50px rgba(0,0,0,0.45);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:40;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.has-dropdown:hover .dropdown-trigger svg{ transform:rotate(180deg); }
.dropdown-menu a{
  display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:6px;
  font-size:13.5px; color:var(--text);
}
.dropdown-menu a:hover{ background:var(--surface); }
.dropdown-menu a span.dd-sub{ font-size:11.8px; color:var(--muted-2); font-weight:400; }
@media (max-width:1100px){
  /* Below the hamburger breakpoint the dropdown drops flexbox entirely
     for its own list of links: plain block elements always wrap to the
     width of their container, with none of the cross-axis / automatic
     min-size edge cases flexbox has for text content. That's what kept
     causing the panel to render wider than the screen (or, once one
     symptom was patched, to collapse its content to near-zero visible
     width) across earlier attempts at fixing this with flex tweaks.

     Sub-items are flush with the same left edge as Home / Team / Impact
     (no extra indent) so alignment is consistent down the whole panel.
     A thin gold rule along the top and bottom of the expanded block,
     plus a faint background tint, is what marks it as "inside Services"
     instead of indentation — spacing and type size otherwise match the
     rest of the menu exactly. */
  .dropdown-menu,
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu{
    display:none;
    position:static; left:auto; right:auto; top:auto; transform:none;
    opacity:1; visibility:visible; box-shadow:none;
    background:rgba(255,255,255,0.025);
    border:none; border-top:1px solid var(--line);
    width:100%; max-width:100%; min-width:0; box-sizing:border-box;
    padding:2px 0; margin:0;
  }
  .has-dropdown.open .dropdown-menu{ display:block; }
  .dropdown-menu a{
    display:block;
    width:100%; max-width:100%; box-sizing:border-box;
    padding:13px 0; border-radius:0;
    border-bottom:1px solid var(--line);
    white-space:normal; overflow-wrap:break-word; word-break:break-word;
    font-size:15px; color:var(--text);
    -webkit-transition:color .15s; transition:color .15s;
  }
  .dropdown-menu a:active{ color:var(--gold); }
  .dropdown-menu a span.dd-sub{
    display:block; margin-top:3px;
    font-size:12.8px; color:var(--muted-2); font-weight:400;
    white-space:normal; overflow-wrap:break-word;
  }
  .has-dropdown.open > .dropdown-trigger{ border-bottom-color:transparent; }
  .has-dropdown.open .dropdown-trigger svg{ transform:rotate(180deg); }
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  padding:22px 0 0; font-size:12.8px; color:var(--muted-2); display:flex; align-items:center; gap:8px;
}
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--gold); }

/* ---------- SERVICE PAGE HERO ---------- */
.service-hero{ padding-top:36px; padding-bottom:64px; }
.service-hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; }
@media (max-width:900px){ .service-hero-grid{ grid-template-columns:1fr; } }
.service-hero h1{ font-size:clamp(30px,4.2vw,46px); margin:14px 0 18px; }
.service-hero .hero-sub{ color:var(--muted); font-size:16.5px; line-height:1.7; max-width:56ch; margin:0 0 30px; }
.service-hero-visual{
  aspect-ratio:4/3; border-radius:var(--radius-m); border:1px solid var(--line);
  background:linear-gradient(150deg, var(--surface-2), var(--surface));
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.service-hero-visual svg{ width:38%; height:38%; opacity:0.85; }
.service-hero-visual::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, var(--gold-dim), transparent 60%);
}
.service-quicklinks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.service-quicklinks a{
  font-size:12.8px; color:var(--muted); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; transition:border-color .15s, color .15s;
}
.service-quicklinks a:hover{ border-color:var(--gold); color:var(--text); }

/* ---------- APPLE-STYLE SERVICE SHOWCASE (company home) ---------- */
.showcase-row{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:72px 0; border-top:1px solid var(--line);
}
.showcase-row:first-of-type{ border-top:none; }
.showcase-row.reverse .showcase-visual{ order:2; }
.showcase-row.reverse .showcase-copy{ order:1; }
@media (max-width:880px){
  .showcase-row, .showcase-row.reverse{ grid-template-columns:1fr; gap:30px; }
  .showcase-row.reverse .showcase-visual{ order:1; }
  .showcase-row.reverse .showcase-copy{ order:2; }
}
.showcase-visual{
  aspect-ratio:5/4; border-radius:var(--radius-m); border:1px solid var(--line);
  background:linear-gradient(155deg, var(--surface-2), var(--surface));
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.showcase-visual svg{ width:34%; height:34%; }
.showcase-visual::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 75% 15%, var(--teal-dim), transparent 55%);
}
.showcase-copy .eyebrow{ margin-bottom:12px; }
.showcase-copy h3{ font-size:clamp(24px,3vw,32px); margin:0 0 16px; line-height:1.18; }
.showcase-copy p{ color:var(--muted); font-size:15.5px; line-height:1.72; margin:0 0 22px; max-width:48ch; }
.showcase-copy .showcase-price{ font-size:13.5px; color:var(--text); font-weight:600; margin:0 0 22px; }
.showcase-copy .showcase-price strong{ color:var(--text); font-weight:600; }
.showcase-links{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.showcase-links a.learn-more{ font-weight:600; font-size:14.5px; color:var(--gold); display:inline-flex; align-items:center; gap:6px; }
.showcase-links a.learn-more:hover{ color:var(--text); }

/* ---------- PAGE-END CTA BANNER (service pages) ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--teal-dim), transparent 60%), var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-m);
  padding:48px 44px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.cta-banner h3{ font-size:clamp(22px,3vw,28px); margin:0; max-width:32ch; }
.cta-banner p{ margin:0; color:var(--muted); font-size:15px; max-width:52ch; }
.cta-banner .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* ---------- FAQ (service pages) ---------- */
.faq-list{ max-width:760px; }
.faq-item{ border-top:1px solid var(--line); padding:22px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item h4{ font-size:15.5px; margin:0 0 8px; }
.faq-item p{ margin:0; color:var(--muted); font-size:14.2px; line-height:1.65; }

/* ---------- HOW IT WORKS (simple 3-4 step, service pages) ---------- */
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:820px){ .how-grid{ grid-template-columns:1fr; } }
.how-step{ position:relative; padding-left:0; }
.how-num{
  font-family:'Fraunces', serif; font-size:34px; color:var(--gold); margin:0 0 10px; opacity:0.7;
}
.how-step h4{ font-size:16px; margin:0 0 8px; }
.how-step p{ color:var(--muted); font-size:14px; line-height:1.6; margin:0; }

/* =======================================================
   PRICING / PAYMENT / TRUST REWORK
   ======================================================= */
.trust-strip{ background:var(--surface-2); border-bottom:1px solid var(--line); padding:12px 0; }
.trust-strip-row{ display:flex; flex-wrap:wrap; gap:20px 30px; justify-content:center; align-items:center; }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:12.4px; color:var(--muted); }
@media (max-width:760px){ .trust-strip-row{ gap:12px 20px; } .trust-item{ font-size:11.6px; } }

.payment-strip{
  display:flex; gap:14px; align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius-m); padding:18px 22px;
  margin:28px 0 34px; max-width:900px;
}
.payment-strip p{ margin:0; color:var(--muted); font-size:13.4px; line-height:1.6; }

.svc-turnaround, .price-turnaround{
  font-size:12.3px; color:var(--gold); font-weight:600; margin:0 0 6px;
  display:flex; align-items:center; gap:6px;
}
.svc-includes, .price-includes{
  font-size:12.3px; color:var(--muted-2); margin:0 0 16px; line-height:1.55;
}

.catalog-group-head{ margin:0 0 20px; padding-top:8px; }
.catalog-group-head:first-child{ padding-top:0; }
.catalog-group-head h4{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin:0 0 4px; font-weight:700; }
.catalog-group-head p{ font-size:13.4px; color:var(--muted-2); margin:0; }
.catalog-group{ margin-bottom:46px; }
.catalog-group:last-child{ margin-bottom:0; }

.wa-cta{ display:inline-flex; align-items:center; justify-content:center; }
.wa-cta svg{ flex:none; }

.price-payment-line{
  font-size:11.8px; color:var(--muted-2); margin:0 0 16px; padding-top:12px; border-top:1px dashed var(--line);
}

/* =======================================================
   HERO VISUAL — clickable service constellation
   ======================================================= */
.hero-visual-wrap{
  position:relative; aspect-ratio:1/1; width:100%; max-width:420px; margin:0 auto;
}
.hero-lines{ position:absolute; inset:0; width:100%; height:100%; }
.hero-node{
  position:absolute; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1.4px solid var(--line);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  z-index:2;
}
.hero-node svg{ width:20px; height:20px; }
.hero-node-teal{ border-color:var(--teal); }
.hero-node-gold{ border-color:var(--gold); }
.hero-node:hover{
  transform:translate(-50%,-50%) scale(1.12);
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.hero-node-teal:hover{ background:var(--teal-dim); }
.hero-node-gold:hover{ background:var(--gold-dim); }
.hero-node-center{
  left:50%; top:50%;
  width:72px; height:72px; border-color:var(--gold); background:var(--gold-dim);
  padding:14px; box-sizing:border-box; cursor:default;
}
.hero-node-center img{ width:100%; height:100%; object-fit:contain; }
@media (max-width:560px){
  .hero-node{ width:42px; height:42px; }
  .hero-node svg{ width:16px; height:16px; }
  .hero-node-center{ width:58px; height:58px; padding:10px; }
}

/* =======================================================
   LEADERSHIP CARD SPACING
   ======================================================= */
.leadership-grid{ gap:28px 36px; margin-bottom:36px; }
.leader-card{ box-shadow:0 1px 0 rgba(255,255,255,0.02) inset; }
.leader-body{ padding:28px 30px 32px; }

/* ---------- 2-UP GRID (creator marketplace, etc.) ---------- */
.card-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:700px){ .card-grid-2{ grid-template-columns:1fr; } }

/* ===== Professional polish v5: accessibility + legal pages ===== */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--gold);color:#111;padding:10px 16px;border-radius:8px;font-weight:600}
.skip-link:focus{left:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.legal{padding:72px 0 96px}
.legal .wrap{max-width:760px}
.legal h1{margin:0 0 6px}
.legal h2{font-size:1.2rem;margin:30px 0 8px}
.legal p,.legal li{color:var(--muted);line-height:1.75;font-size:15.5px}
.legal ul{padding-left:20px;margin:8px 0}
.legal .meta{font-size:13.5px;margin-bottom:18px}
.legal .lang-jump{margin-bottom:28px;font-size:14px}
.legal .lang-jump a{margin-right:14px;text-decoration:underline}
.legal hr{border:0;border-top:1px solid var(--line);margin:56px 0}

.testimonials-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }

/* ===== Service detail sections ===== */
.detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .detail-grid{ grid-template-columns:1fr; } }
.detail-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px 26px 22px; }
.detail-card h4{ font-size:16.5px; margin:0 0 14px; }
.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.check-list li{ position:relative; padding-left:24px; color:var(--muted); font-size:14.2px; line-height:1.55; }
.check-list li::before{ content:""; position:absolute; left:2px; top:5px; width:5px; height:10px; border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(40deg); }
.detail-intro{ color:var(--muted); font-size:15px; max-width:62ch; margin-top:12px; }

.scope-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.scope-col{border:1px solid var(--line);border-radius:14px;padding:24px}
.scope-col h4{margin:0 0 12px;font-size:16px}
.scope-col ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.2px;line-height:1.7}
.scope-col li+li{margin-top:6px}

/* ===== Glacier glass layer v7 ===== */
body{position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(60vw 45vh at 12% 8%,rgba(94,200,214,.10),transparent 70%),radial-gradient(50vw 40vh at 88% 30%,rgba(212,175,106,.08),transparent 70%),radial-gradient(55vw 45vh at 40% 95%,rgba(120,170,230,.08),transparent 70%)}
.price-card,.svc-card,.scope-col,.testimonial-card,.stat-card,.proof-card,.custom-band{
 background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
 border:1px solid rgba(190,230,240,.16);
 -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -24px rgba(0,0,0,.65);
 transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.price-card:hover,.svc-card:hover,.scope-col:hover,.testimonial-card:hover,.stat-card:hover{
 transform:translateY(-3px);border-color:rgba(150,225,238,.38);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 48px -22px rgba(94,200,214,.28)}
.custom-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border-radius:16px;padding:28px 32px}
.custom-band h3{margin:0 0 6px;font-size:1.15rem}
.custom-band p{margin:0;color:var(--muted);max-width:620px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .price-card,.svc-card,.scope-col,.testimonial-card,.stat-card,.proof-card,.custom-band{background:rgba(24,28,34,.92)}}

.legal h2.legal-title{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.15;margin:0 0 6px}
#process .scope-col h4{color:var(--gold)}
#faq .faq-list{margin-top:8px}

/* ===== Glacier step form v9 ===== */
.qf{position:relative;padding:30px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(190,230,240,.18);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 28px 60px -30px rgba(0,0,0,.7)}
.qf::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(160,230,245,.8),transparent)}
.qf-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.qf-top b{color:var(--gold);font-weight:600}
.qf-bar{display:flex;gap:6px;margin:14px 0 26px}.qf-bar i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .3s}
.qf-bar i.on{background:linear-gradient(90deg,#7fd6e6,var(--gold))}
.qf-step{display:none}.qf-step.active{display:block;animation:qfIn .35s ease}
@keyframes qfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qf-q{font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.2;margin:0 0 8px}
.qf-hint{margin:0 0 20px;color:var(--muted);font-size:14px}
.qf-step .field{margin-bottom:0}
.qf-chips{display:flex;flex-wrap:wrap;gap:10px}
.qf-chip{position:relative;cursor:pointer}.qf-chip input{position:absolute;opacity:0;pointer-events:none}
.qf-chip span{display:inline-block;padding:12px 16px;border-radius:12px;font-size:14.5px;border:1px solid rgba(190,230,240,.2);background:rgba(255,255,255,.04);transition:all .25s ease}
.qf-chip:hover span{border-color:rgba(150,225,238,.5)}
.qf-chip input:checked+span{border-color:#7fd6e6;background:rgba(127,214,230,.14);box-shadow:0 0 0 3px rgba(127,214,230,.12)}
.qf-chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.qf-nav{display:flex;gap:12px;margin-top:26px}.qf-nav .btn{flex:1;justify-content:center}
.qf-back{background:transparent;border:1px solid rgba(190,230,240,.25);color:var(--muted);flex:0 0 auto!important;padding-inline:22px}
.qf-done{display:none;text-align:center;padding:26px 6px}
.qf-done .tick{width:60px;height:60px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;color:#7ee0a8;background:rgba(94,200,150,.14);border:1px solid rgba(94,200,150,.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.qf{background:rgba(24,28,34,.94)}}

.qf-nav{align-items:stretch}.qf-nav .submit-btn{margin-top:0}.qf-nav .btn{min-height:50px}

/* ===== Pricing UX v11 ===== */
html[lang="sw"] .price-card.featured:before,html[lang="sw"] .maintenance-grid .price-card.featured:before{content:"Inapendekezwa"}
@media (min-width:900px){.price-grid .price-card.featured{transform:translateY(-8px);background:linear-gradient(160deg,rgba(127,214,230,.15),rgba(212,175,106,.07));border-color:rgba(127,214,230,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 56px -24px rgba(94,200,214,.4)}}
.price-card .svc-price{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.bill-toggle{display:flex;width:max-content;max-width:100%;margin:0 auto 30px;padding:5px;gap:4px;border-radius:999px;border:1px solid rgba(190,230,240,.2);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bill-toggle button{border:0;cursor:pointer;padding:10px 20px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);background:transparent;transition:all .25s ease}
.bill-toggle button.on{background:var(--gold);color:#141200}
.bill-toggle em{font-style:normal;font-size:11px;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(94,200,150,.2);color:#7ee0a8}
.bill-toggle button.on em{background:rgba(20,18,0,.14);color:#141200}
.save-line{margin:-2px 0 12px;color:#7ee0a8;font-size:13.5px;font-weight:600}

/* ===== Clarity and conversion polish v12 ===== */
.hero h1{max-width:18ch;text-wrap:balance}
.price-payment-line,.price-includes,.form-privacy{font-size:12.5px}
.m-bar{display:none}
@media (max-width:760px){
  .hero h1{max-width:100%}
  .trust-strip{padding:10px 0}.trust-strip-row{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;justify-items:start}
  .trust-item{font-size:12px;line-height:1.35;align-items:flex-start}
  .hero-cta-row{flex-direction:column;align-items:stretch}.hero-cta-row .btn{width:100%;justify-content:center;min-height:52px}
  .learn-more,.showcase-links a,.contact-line a,header .logo,header a.brand{display:inline-flex;align-items:center;min-height:44px}
  header nav a,.mobile-menu a,.mobile-nav a{min-height:44px;display:inline-flex;align-items:center}
  body.has-mbar{padding-bottom:84px}
  .m-bar{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:900;padding:10px;border-radius:16px;background:rgba(18,21,26,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(190,230,240,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -16px rgba(0,0,0,.8);transition:transform .3s ease,opacity .3s ease}
  .m-bar.hide{transform:translateY(130%);opacity:0;pointer-events:none}
  .m-bar a{flex:1;text-align:center;padding:14px 10px;border-radius:11px;font-weight:600;font-size:14.5px;text-decoration:none;min-height:46px}
  .m-wa{border:1px solid rgba(190,230,240,.3);color:var(--text)}.m-cta{background:var(--gold);color:#141200}
}
@media (max-width:760px){.hero-cta-row .btn-primary{order:-1}}

/* ===== Leadership portraits v13 ===== */
.leadership-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.leader-card{display:grid;grid-template-columns:200px 1fr;align-items:center;padding:22px;border-radius:20px;overflow:visible;background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid rgba(190,230,240,.16);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -24px rgba(0,0,0,.65)}
.leader-photo{width:200px;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid rgba(190,230,240,.24);box-shadow:0 14px 30px -16px rgba(0,0,0,.7);background:var(--surface-2)}
.leader-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 18%;display:block}
.leader-body{padding:0 4px 0 26px}
@media (max-width:1000px){.leadership-grid{grid-template-columns:1fr}}
@media (max-width:560px){.leader-card{grid-template-columns:1fr;padding:20px}.leader-photo{width:150px}.leader-body{padding:18px 0 0}}