.elementor-kit-18{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-kadence1:#2B6CB0;--e-global-color-kadence2:#215387;--e-global-color-kadence3:#1A202C;--e-global-color-kadence4:#2D3748;--e-global-color-kadence5:#4A5568;--e-global-color-kadence6:#718096;--e-global-color-kadence7:#EDF2F7;--e-global-color-kadence8:#F7FAFC;--e-global-color-kadence9:#ffffff;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Lato";--e-global-typography-accent-font-weight:500;}.elementor-kit-18.el-is-editing{--global-palette1:#2B6CB0;--global-palette2:#215387;--global-palette3:#1A202C;--global-palette4:#2D3748;--global-palette5:#4A5568;--global-palette6:#718096;--global-palette7:#EDF2F7;--global-palette8:#F7FAFC;--global-palette9:#ffffff;}.elementor-kit-18 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   JUSTSETU — FULL SITE STYLESHEET (includes About page additions)
============================================================ */

/* ============================================================
   COLOR TOKENS — rebranded for the new blue/orange JustSetu &
   Connect logo (colors sampled directly from the logo file).
   Variable NAMES are kept as-is (--black, --gold, etc.) to avoid
   rewriting every var(--gold)/var(--black) reference in this
   file — only the VALUES changed. So --black/--black-deep now
   hold navy blues, and --gold/--gold-light/--gold-dark now hold
   oranges. Functionally identical, just re-themed under the hood.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&family=Lato:wght@300;400;700&display=swap');

:root{
    --black:#0d1b3f;
    --black-deep:#050e28;
    --gold:#f96d03;
    --gold-light:#ffb877;
    --gold-dark:#c23606;
    --cream:#f5f8fd;
    --cream-alt:#eaf0fb;
    --paper:#ffffff;
    --border:#dbe6f7;
    --border-soft:#eef3fb;
    --text:#0d1b3f;
    --text-muted:#55637f;
    --text-faint:#8996b0;
    --danger:#b5432f;

    --fs-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
    --fs-xs:  clamp(0.75rem, 0.72rem + 0.18vw, 0.8125rem);
    --fs-sm:  clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
    --fs-base:clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
    --fs-md:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --fs-lg:  clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    --fs-xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
    --fs-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
    --fs-3xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
    --fs-hero:clamp(2.25rem, 1.5rem + 3.6vw, 3.85rem);

    --sp-3xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
    --sp-2xs: clamp(0.5rem, 0.42rem + 0.35vw, 0.625rem);
    --sp-xs:  clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
    --sp-sm:  clamp(1rem, 0.85rem + 0.7vw, 1.375rem);
    --sp-md:  clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --sp-lg:  clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
    --sp-xl:  clamp(3rem, 2rem + 4.5vw, 5.5rem);
    --sp-2xl: clamp(4rem, 2.6rem + 6.5vw, 8rem);

    --radius-sm: clamp(10px, 0.6vw + 6px, 14px);
    --radius-md: clamp(16px, 1vw + 10px, 22px);
    --radius-lg: clamp(22px, 1.4vw + 14px, 32px);
    --radius-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(13,27,63,0.06);
    --shadow-md: 0 12px 30px rgba(13,27,63,0.08);
    --shadow-lg: 0 24px 60px rgba(13,27,63,0.14);
    --shadow-gold: 0 10px 24px rgba(249,109,3,0.35);

    --ease: cubic-bezier(.22,.9,.32,1);
    --container: min(1200px, calc(100vw - 2 * var(--sp-sm)));
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--cream);
    color:var(--text);
    font-family:'Lato', -apple-system, "Segoe UI", sans-serif;
    font-weight:400;
    font-size:var(--fs-base);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  button{ font-family:inherit; cursor:pointer; }

  /* NOTE: this design uses flex `gap` for ALL spacing between text
     elements (headings, eyebrows, paragraphs, buttons) and never
     relies on margins anywhere. The !important below is intentional
     and safe: it exists only to beat WordPress/Elementor theme CSS
     that applies its own default margins to h1-h4/p tags via more
     specific .elementor-kit-18s (e.g. .entry-content h2), which otherwise
     stacks extra gaps on top of the intended flex gap. */
  h1,h2,h3,h4{
    font-family:'Montserrat', -apple-system, "Segoe UI", sans-serif;
    font-weight:600;
    margin:0 !important;
    letter-spacing:-0.01em;
    color:var(--text);
    text-wrap:balance;
  }
  h2{ line-height:1.14; }
  p{ margin:0 !important; }
  .eyebrow{ margin:0 !important; }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding-left:var(--sp-sm);
    padding-right:var(--sp-sm);
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Montserrat', sans-serif;
    font-size:var(--fs-2xs);
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold-dark);
  }
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:var(--gold-dark);
    display:inline-block;
  }

  .lead{
    font-size:var(--fs-md);
    color:var(--text-muted);
    line-height:1.7;
    font-weight:300;
  }

  .thin{ font-weight:300; }
  .medium{ font-weight:500; }

  .grad-text{
    background:linear-gradient(100deg,var(--black) 0%, var(--gold-dark) 55%, var(--gold) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .grad-text-light{
    background:linear-gradient(100deg,#ffffff 0%, var(--gold-light) 65%, var(--gold) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* ---------- Reveal animation ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-1{ transition-delay:.05s; }
  .reveal-2{ transition-delay:.15s; }
  .reveal-3{ transition-delay:.25s; }
  .reveal-4{ transition-delay:.35s; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- Buttons ---------- */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:var(--radius-pill);
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    font-size:var(--fs-sm);
    padding:clamp(0.75rem, 0.6rem + 0.6vw, 1.05rem) clamp(1.25rem, 1rem + 1.2vw, 2.1rem);
    border:1px solid transparent;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    white-space:nowrap;
    isolation:isolate;
    overflow:hidden;
  }
  .btn::before{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:inherit;
    border:1px solid var(--btn-ring, rgba(255,255,255,0.28));
    pointer-events:none;
    z-index:1;
    transition:opacity .35s var(--ease);
  }
  .btn::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 70%);
    transform:translateX(-120%);
    transition:transform .7s var(--ease);
    z-index:2;
  }
  .btn:hover::after{ transform:translateX(120%); }
  .btn > *{ position:relative; z-index:3; }

  .btn-primary{
    --btn-ring: rgba(13,27,63,0.22);
    background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
    color:#ffffff;
    box-shadow:var(--shadow-gold);
  }
  .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(249,109,3,0.45);
    color:#ffffff;
  }

  .btn-gold{
    --btn-ring: rgba(13,27,63,0.22);
    background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
    color:#ffffff;
    box-shadow:var(--shadow-gold);
  }
  .btn-gold:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(249,109,3,0.45);
    color:#ffffff;
  }

  .btn-ghost{
    --btn-ring: rgba(249,109,3,0.3);
    background:var(--paper);
    color:var(--black);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
  }
  .btn-ghost:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
    border-color:var(--gold);
  }

  .btn-sm{
    padding:clamp(0.55rem,0.45rem + 0.4vw,0.7rem) clamp(0.9rem,0.7rem + 0.8vw,1.3rem);
    font-size:var(--fs-xs);
  }
  .btn-sm::before{ inset:2px; }

  /* ---------- Chips / pills ---------- */
  .chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--paper);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    border-radius:var(--radius-pill);
    padding:clamp(0.4rem,0.3rem + 0.3vw,0.55rem) clamp(0.85rem,0.7rem + 0.6vw,1.2rem);
    font-size:var(--fs-2xs);
    font-weight:700;
    color:var(--black);
  }
  .chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

  /* ---------- Cards ---------- */
  .card{
    position:relative;
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  }
  .card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));
    opacity:0; transform:scaleX(0.25); transform-origin:left;
    transition:opacity .45s var(--ease), transform .55s var(--ease);
  }
  .card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:#cddbf3;
  }
  .card:hover::before{ opacity:1; transform:scaleX(1); }

  .icon-badge{
    width:clamp(58px, 3vw + 42px, 78px);
    height:clamp(58px, 3vw + 42px, 78px);
    border-radius:var(--radius-sm);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border-soft);
    background:linear-gradient(160deg,var(--cream-alt),var(--paper));
  }
  .icon-badge img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ---------- Icon badge, SVG variant (About page: Vision/Mission) ---------- */
  .icon-badge-svg{
    width:clamp(52px, 2.6vw + 38px, 64px);
    height:clamp(52px, 2.6vw + 38px, 64px);
    border-radius:var(--radius-sm);
    background:linear-gradient(160deg,var(--cream-alt),var(--paper));
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-dark);
    margin-bottom:4px;
  }

  /* =========================================================
     NAV
  ========================================================= */
  .nav-shell{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    justify-content:center;
    padding:var(--sp-xs) var(--sp-sm) 0;
  }
  .nav{
    display:inline-flex;
    align-items:center;
    gap:clamp(1.5rem, 0.8rem + 2.6vw, 3.25rem);
    max-width:calc(100vw - 2 * var(--sp-sm));
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(219,230,247,0.9);
    box-shadow:var(--shadow-md);
    border-radius:var(--radius-pill);
    padding:clamp(0.6rem,0.5rem + 0.4vw,0.85rem) clamp(0.65rem,0.5rem + 0.6vw,0.95rem) clamp(0.6rem,0.5rem + 0.4vw,0.85rem) clamp(1rem,0.85rem + 0.7vw,1.4rem);
    transition:box-shadow .3s var(--ease);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    font-size:var(--fs-md);
    letter-spacing:-0.01em;
    color:var(--black);
  }
  .brand img{
    width:clamp(36px,1.8vw + 26px,46px);
    height:clamp(36px,1.8vw + 26px,46px);
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 2px var(--cream), 0 0 0 3px var(--gold);
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:clamp(1rem, 0.7rem + 1.2vw, 2rem);
    font-size:var(--fs-xs);
    font-weight:700;
    color:var(--text-muted);
  }
  .nav-links a{ position:relative; padding:6px 2px; transition:color .25s var(--ease); }
  .nav-links a:hover, .nav-links a.active{ color:var(--black); }
  .nav-links a.active::after{
    content:"";
    position:absolute; left:2px; right:2px; bottom:-2px;
    height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--gold-dark),var(--gold));
  }
  .nav-links .has-mega{ display:flex; align-items:center; gap:5px; cursor:pointer; }
  .nav-links .has-mega svg{ transition:transform .3s var(--ease); }
  .nav-item-services:hover .has-mega svg{ transform:rotate(180deg); }

  .nav-item-services{ position:relative; }

  .mega{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width:min(880px, calc(100vw - 2 * var(--sp-sm)));
    padding-top:14px;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s var(--ease);
    z-index:90;
  }
  .nav-item-services:hover .mega{
    opacity:1; pointer-events:auto;
  }
  .nav-item-services:hover .mega-panel{ transform:translateY(0); }

  .mega-panel{
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:var(--sp-md);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--sp-sm) var(--sp-md);
    max-height:min(70vh, 560px);
    overflow-y:auto;
    transform:translateY(6px);
    transition:transform .28s var(--ease);
  }
  .mega-panel::-webkit-scrollbar{ width:6px; }
  .mega-panel::-webkit-scrollbar-thumb{ background:var(--border); border-radius:99px; }

  .mega-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .mega-col .eyebrow{ margin-bottom:8px; white-space:normal; line-height:1.3; }
  .mega-col .eyebrow::before{ content:none; }

  .mega-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:var(--fs-xs);
    color:var(--text-muted);
    font-weight:400;
    line-height:1.3;
    padding:6px 8px;
    margin:0 -8px;
    border-radius:var(--radius-sm);
    transition:color .2s var(--ease), background .2s var(--ease);
  }
  .mega-item:hover{ color:var(--gold-dark); background:var(--cream-alt); }
  .mega-item-icon{
    flex:none;
    width:26px; height:26px;
    border-radius:8px;
    overflow:hidden;
    background:var(--cream-alt);
    display:flex; align-items:center; justify-content:center;
  }
  .mega-item-icon img{ width:16px; height:16px; object-fit:contain; }

  .mega-footer{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-sm);
    margin-top:var(--sp-2xs);
    padding-top:var(--sp-sm);
    border-top:1px solid var(--border-soft);
    font-size:var(--fs-2xs);
    color:var(--text-faint);
  }
  .mega-viewall{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    font-size:var(--fs-xs);
    color:var(--gold-dark);
    transition:gap .25s var(--ease);
  }
  .mega-viewall:hover{ gap:10px; }
  .mega-viewall svg{ flex:none; }

  .nav-cta{ display:flex; align-items:center; gap:10px; }
  .burger{
    display:none;
    width:38px; height:38px;
    align-items:center; justify-content:center;
    background:var(--black); color:var(--gold);
    border-radius:50%;
    border:none;
  }
  .burger span{ position:relative; width:16px; height:2px; background:currentColor; }
  .burger span::before,.burger span::after{
    content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor;
  }
  .burger span::before{ top:-5px; }
  .burger span::after{ top:5px; }

  .mobile-panel{
    max-width:var(--container);
    margin:8px auto 0;
    padding:0 var(--sp-sm);
  }
  .mobile-panel-inner{
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    padding:var(--sp-sm);
    display:flex;
    flex-direction:column;
    gap:var(--sp-2xs);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease), margin .45s var(--ease);
  }
  .mobile-panel-inner a{
    font-family:'Montserrat',sans-serif;
    font-size:var(--fs-sm);
    font-weight:600;
    padding:10px 6px;
    border-bottom:1px solid var(--border-soft);
    color:var(--black);
  }
  .mobile-panel-inner a.btn{
    color:#ffffff;
    border-bottom:none;
  }
  body.menu-open .mobile-panel-inner{
    max-height:480px; opacity:1;
    padding:var(--sp-sm);
  }

  /* =========================================================
     HERO
  ========================================================= */
  .hero{ position:relative; padding-bottom:var(--sp-xl); }
  .blob{ position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; }
  .blob-1{ width:min(46vw,620px); height:min(46vw,620px); top:clamp(-220px,-16vw,-120px); left:clamp(-160px,-12vw,-70px); background:var(--gold); opacity:.34; }
  .blob-2{ width:min(50vw,680px); height:min(50vw,680px); top:clamp(-160px,-10vw,-70px); right:clamp(-220px,-16vw,-110px); background:var(--gold-light); opacity:.32; }
  .blob-3{ width:min(40vw,540px); height:min(30vw,380px); top:120px; left:32%; background:#6f93e0; opacity:.3; }

  .hero-content{
    position:relative;
    max-width:840px;
    margin:0 auto;
    text-align:center;
    padding:clamp(0.5rem, 0.2rem + 1vw, 1.25rem) var(--sp-sm) 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(0.65rem, 0.5rem + 0.6vw, 1rem);
  }
  .hero h1{
    margin:0;
    font-size:var(--fs-hero);
    line-height:1.02;
    letter-spacing:-0.02em;
    font-weight:600;
  }
  .hero h1 .thin{ font-weight:300; color:var(--text); }

  .hero-lead{ margin:0; max-width:600px; font-size:var(--fs-sm); line-height:1.6; }

  .hero-ctas{ margin:0; display:flex; flex-wrap:wrap; gap:var(--sp-xs); justify-content:center; }
  .hero-trust{ display:flex; flex-wrap:wrap; gap:var(--sp-2xs); justify-content:center; }

  .hero-visual{
    position:relative;
    max-width:var(--container);
    margin:clamp(0.5rem, 0.3rem + 0.6vw, 1rem) auto calc(-1 * var(--sp-xl));
    padding:0 var(--sp-sm);
  }
  .hero-visual-inner{
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border);
    aspect-ratio:16/7.4;
  }
  .hero-visual-inner img{ width:100%; height:100%; object-fit:cover; }

  /* Interior pages (About, Services archive, etc.): tighter top/bottom
     padding than the homepage hero, which carries a big visual below it. */
  .hero.hero-compact{
    padding-top:var(--sp-xs);
    padding-bottom:var(--sp-md);
  }

  /* =========================================================
     SECTION SCAFFOLDING
  ========================================================= */
  section{ position:relative; }
  .section-head{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--sp-xs);
    padding-bottom:var(--sp-lg);
  }
  .section-head h2{ font-size:var(--fs-2xl); }
  .section-pad{ padding:var(--sp-2xl) 0; }
  .section-pad-tight{ padding:var(--sp-xl) 0; }

  /* ---------- Problem ---------- */
  .problem-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-md);
  }
  .problem-card{ padding:var(--sp-md); display:flex; flex-direction:column; gap:var(--sp-2xs); background:linear-gradient(165deg,#eef3fc,var(--paper) 55%); }
  .problem-tag{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:var(--fs-xs);
    color:var(--danger);
    background:rgba(181,67,47,0.08);
    border:1px solid rgba(181,67,47,0.18);
    border-radius:var(--radius-pill);
    padding:5px 12px;
    width:fit-content;
    margin-top:2px;
  }
  .problem-card p{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:300; }

  /* ---------- Services (Featured + Row) ----------
     Plain flexbox only — no CSS Grid, no row/column spans.
     This is deliberate: a spanning grid cell's height depends on
     its sibling rows, which is exactly what kept breaking inside
     Elementor. A flex row's height is just "as tall as its own
     content," full stop — nothing else can inflate or distort it. */
  .services-featured{ margin-bottom:var(--sp-md); }
  .service-feature{
    display:flex !important;
    align-items:center;
    gap:var(--sp-lg);
    padding:var(--sp-lg);
    background:linear-gradient(120deg,var(--cream-alt),var(--paper) 60%);
    border-color:var(--border-soft);
  }
  .service-feature-media{
    flex:none;
    width:clamp(120px, 10vw + 70px, 190px);
    height:clamp(120px, 10vw + 70px, 190px);
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border-soft);
    background:linear-gradient(160deg,var(--cream-alt),var(--paper));
  }
  .service-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .service-feature-body{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    text-align:left !important;
    gap:var(--sp-2xs);
    flex:1;
  }
  .service-feature-body h3{ font-size:var(--fs-xl); padding-right:0; }
  .service-feature-body p{ font-size:var(--fs-sm); max-width:560px; }
  .service-feature-body .chip{ align-self:flex-start; }

  .services-row{
    display:flex;
    gap:var(--sp-md);
  }
  .services-row .service-card{ flex:1; }

  .service-card{
    padding:var(--sp-md);
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-2xs);
    background:linear-gradient(165deg,var(--cream-alt),var(--paper) 60%);
    border-color:var(--border-soft);
    text-align:left;
  }
  .service-card h3{ font-size:var(--fs-md); line-height:1.3; padding-right:34px; }
  .service-card p{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:300; }
  .card-arrow{
    position:absolute;
    top:var(--sp-sm);
    right:var(--sp-sm);
    width:34px; height:34px;
    border-radius:50%;
    background:var(--paper);
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-dark);
    transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
  }
  .service-feature:hover .card-arrow,
  .service-card:hover .card-arrow{
    background:var(--black); border-color:var(--black); color:var(--gold-light);
    transform:translate(3px,-3px);
  }

  .service-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:var(--fs-xs);
    color:var(--gold-dark);
  }
  .service-cta svg{ transition:transform .3s var(--ease); }
  .service-feature:hover .service-cta svg{ transform:translate(3px,-3px); }

  /* ---------- Stats ---------- */
  .stats{
    background:linear-gradient(155deg,var(--black-deep),var(--black) 60%,#0a1836);
    border:1px solid rgba(249,109,3,0.22);
    border-radius:var(--radius-lg);
    padding:var(--sp-lg) var(--sp-md);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-around;
    box-shadow:0 30px 70px rgba(13,27,63,0.35);
  }
  .stats::before{
    content:"";
    position:absolute; top:-40%; left:-10%;
    width:55%; height:150%;
    background:var(--gold);
    opacity:.2;
    filter:blur(90px);
    border-radius:50%;
  }
  .stats::after{
    content:"";
    position:absolute; bottom:-40%; right:-10%;
    width:45%; height:140%;
    background:var(--gold-light);
    opacity:.14;
    filter:blur(90px);
    border-radius:50%;
  }
  .stat{
    position:relative;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:var(--sp-2xs) var(--sp-xs);
  }
  .stat-icon{
    width:clamp(38px,2vw + 28px,48px);
    height:clamp(38px,2vw + 28px,48px);
    border-radius:50%;
    background:rgba(249,109,3,0.12);
    border:1px solid rgba(249,109,3,0.4);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-light);
    margin-bottom:2px;
  }
  .stat-num{
    font-family:'Montserrat',sans-serif;
    font-size:var(--fs-3xl);
    font-weight:600;
    background:linear-gradient(100deg,#ffffff 0%, var(--gold-light) 70%, var(--gold) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    line-height:1;
  }
  .stat-num .accent{ background:inherit; -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat-label{ font-size:var(--fs-xs); color:#f0b487; font-weight:400; letter-spacing:.02em; }
  .stat-divider{
    position:relative;
    align-self:stretch;
    width:1px;
    margin:var(--sp-sm) 0;
    background:linear-gradient(180deg, transparent, rgba(249,109,3,0.35), transparent);
  }

  /* ---------- Process ---------- */
  .process-banner{
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    border:1px solid var(--border);
    margin-bottom:var(--sp-md);
  }
  .process-banner img{ width:100% !important; height:auto; display:block; }
  .process-steps{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--sp-sm);
  }
  .step{
    border-radius:var(--radius-md);
    padding:var(--sp-sm);
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:6px;
    border:1px solid var(--border-soft);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
  .step-num{ font-family:'Montserrat',sans-serif; font-size:var(--fs-xl); font-weight:600; color:var(--gold-dark); }
  .step-label{ font-family:'Montserrat',sans-serif; font-size:var(--fs-xs); font-weight:600; color:var(--black); }
  .step:nth-child(1){ background:#eef3fb; }
  .step:nth-child(2){ background:#e3ebf9; }
  .step:nth-child(3){ background:#d8e3f6; }
  .step:nth-child(4){ background:#cddbf3; }

  /* ---------- Who we serve ---------- */
  .serve-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--sp-md);
  }
  .serve-card{ padding:var(--sp-md); display:flex; flex-direction:column; gap:10px; }
  .serve-num{
    font-family:'Montserrat',sans-serif; font-weight:600; font-size:var(--fs-lg);
    color:transparent; -webkit-text-stroke:1.25px var(--gold-dark);
    line-height:1;
  }
  .serve-card h3{ font-size:var(--fs-sm); }
  .serve-card p{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:300; }

  /* ---------- About ---------- */
  .about{
    display:flex;
    align-items:center;
    gap:var(--sp-lg);
  }
  .about-media{
    flex:0 0 44%;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    border:1px solid var(--border);
    aspect-ratio:4/3;
  }
  .about-media img{ width:100%; height:100%; object-fit:cover; }
  .about-copy{ flex:1; display:flex; flex-direction:column; gap:var(--sp-2xs); }
  .about-copy h2{ font-size:var(--fs-2xl); }
  .about-copy p{ font-size:var(--fs-base); color:var(--text-muted); font-weight:300; }
  .about-link{
    margin-top:var(--sp-2xs);
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:var(--fs-sm); color:var(--gold-dark);
    display:inline-flex; align-items:center; gap:8px; width:fit-content;
    border-bottom:1px solid transparent;
    transition:border-color .3s;
  }
  .about-link:hover{ border-color:var(--gold-dark); }

  /* ---------- About page: image placeholder (Story + Why Choose Us) ---------- */
  .about-media-placeholder{
    width:100%; height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:repeating-linear-gradient(135deg, var(--cream-alt), var(--cream-alt) 10px, var(--paper) 10px, var(--paper) 20px);
    color:var(--text-faint);
    border:1px dashed var(--border);
  }
  .about-media-placeholder svg{ opacity:.5; }
  .about-media-placeholder span{
    font-family:'Montserrat',sans-serif;
    font-size:var(--fs-2xs);
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  /* ---------- About page: Vision & Mission ---------- */
  .vm-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-md);
  }
  .vm-card{
    padding:var(--sp-lg) var(--sp-md);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-2xs);
    text-align:left;
  }
  .vm-card h3{ font-size:var(--fs-lg); }
  .vm-card p{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:300; }

  /* ---------- About page: Leadership / team ---------- */
  .team-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-md);
  }
  .team-card{
    padding:var(--sp-md);
    display:flex;
    gap:var(--sp-sm);
    align-items:flex-start;
    text-align:left;
  }
  .team-photo{
    flex:none;
    width:clamp(90px, 6vw + 60px, 128px);
    height:clamp(90px, 6vw + 60px, 128px);
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border-soft);
  }
  .team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .team-body{ display:flex; flex-direction:column; gap:6px; flex:1; }
  .team-name{ font-size:var(--fs-md); }
  .team-role{
    font-family:'Montserrat',sans-serif;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--gold-dark);
  }
  .team-bio{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:300; }
  .team-link{
    margin-top:2px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:var(--fs-2xs);
    color:var(--gold-dark);
    border-bottom:1px solid transparent;
    width:fit-content;
    transition:border-color .3s;
  }
  .team-link:hover{ border-color:var(--gold-dark); }

  /* ---------- About page: Why Choose Us (image left, card grid right) ---------- */
  .why-wrap{
    display:flex;
    align-items:stretch;
    gap:var(--sp-lg);
  }
  .why-cards{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-md);
    align-content:start;
  }

  /* ---------- Testimonials ---------- */
  .testi-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-sm);
  }
  .testi-card{
    padding:var(--sp-sm);
    display:flex;
    flex-direction:column;
    gap:var(--sp-2xs);
    background:var(--paper);
    position:relative;
  }
  .testi-quote{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:300; font-style:italic; }
  .testi-badge{
    align-self:flex-start;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--gold-dark);
    background:var(--cream-alt);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-pill);
    padding:4px 10px;
  }

  /* ---------- FAQ ---------- */
  .faq-wrap{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:var(--sp-lg);
    align-items:start;
  }
  .faq-side{
    position:sticky;
    top:calc(90px + var(--sp-sm));
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-xs);
  }
  .faq-side h2{ font-size:var(--fs-2xl); text-align:left; }
  .faq-side p{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:300; max-width:340px; }
  .faq-card{
    padding:var(--sp-xs) var(--sp-lg);
    border:1px solid var(--border);
    background:var(--paper);
  }
  .faq-item{ border-top:1px solid var(--border-soft); }
  .faq-item:last-of-type{ border-bottom:none; }
  .faq-q{
    width:100%;
    background:none;
    border:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-sm);
    padding:var(--sp-sm) 0;
    text-align:left;
    font-family:'Montserrat',sans-serif;
    font-size:var(--fs-base);
    font-weight:500;
    color:var(--black);
  }
  .faq-toggle{
    flex:none;
    width:32px; height:32px;
    border-radius:50%;
    background:var(--cream-alt);
    border:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-dark);
    transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  }
  .faq-toggle svg{ transition:transform .35s var(--ease); }
  .faq-item.open .faq-toggle{ background:var(--black); border-color:var(--black); color:var(--gold-light); }
  .faq-item.open .faq-toggle svg{ transform:rotate(180deg); }
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .faq-a p{
    padding:0 0 var(--sp-sm);
    font-size:var(--fs-sm);
    color:var(--text-muted);
    font-weight:300;
    max-width:560px;
  }
  .faq-more{ padding:var(--sp-sm) 0; font-size:var(--fs-xs); color:var(--text-faint); border-top:1px solid var(--border-soft); }

  /* ---------- Final CTA ---------- */
  .final-cta{
    position:relative;
    overflow:hidden;
    background:linear-gradient(155deg,var(--black-deep),var(--black) 55%,#132a52);
    border:1px solid rgba(249,109,3,0.22);
    border-radius:var(--radius-lg);
    padding:var(--sp-2xl) var(--sp-md);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--sp-sm);
    box-shadow:0 40px 90px rgba(13,27,63,0.4);
  }
  .final-cta .blob{ opacity:.28; }
  .cta-badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:rgba(249,109,3,0.14);
    border:1px solid rgba(249,109,3,0.4);
    color:var(--gold-light);
    font-family:'Montserrat',sans-serif;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:7px 16px;
    border-radius:var(--radius-pill);
    margin-bottom:var(--sp-2xs);
  }
  .final-cta h2{ font-size:var(--fs-2xl); max-width:580px; position:relative; color:#fff; }
  .final-cta p{ position:relative; max-width:480px; color:#a9b6d0; font-weight:300; font-size:var(--fs-base); }
  .cta-actions{ position:relative; display:flex; flex-wrap:wrap; gap:var(--sp-xs); justify-content:center; padding-top:var(--sp-2xs); }
  .btn-outline-light{
    --btn-ring: rgba(255,255,255,0.14);
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,0.3);
  }
  .btn-outline-light:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,0.7);
    box-shadow:0 10px 26px rgba(255,255,255,0.08);
  }
  .cta-trust{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:var(--sp-sm);
    justify-content:center;
    padding-top:var(--sp-sm);
    font-size:var(--fs-2xs);
    letter-spacing:.02em;
    color:#8d9ab8;
  }

  /* ---------- Footer ---------- */
  footer{ border-top:1px solid var(--border); padding-top:var(--sp-xl); }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(4,1fr);
    gap:var(--sp-md);
    padding-bottom:var(--sp-lg);
  }
  .footer-brand{ display:flex; flex-direction:column; gap:var(--sp-2xs); }
  .footer-brand .brand{ font-size:var(--fs-md); }
  .footer-brand p{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:300; max-width:240px; }
  .footer-social{ display:flex; gap:10px; margin-top:4px; }
  .footer-social a{
    width:32px; height:32px; border-radius:50%;
    background:var(--cream-alt); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    transition:background .3s,border-color .3s, transform .3s;
  }
  .footer-social a:hover{ background:var(--black); border-color:var(--black); color:var(--gold); transform:translateY(-2px); }
  .footer-col{ display:flex; flex-direction:column; gap:10px; }
  .footer-col a, .footer-col span{ font-size:var(--fs-xs); color:var(--text-muted); transition:color .25s; }
  .footer-col a:hover{ color:var(--gold-dark); }
  .footer-bottom{
    border-top:1px solid var(--border-soft);
    padding:var(--sp-sm) 0 var(--sp-lg);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    font-size:var(--fs-2xs);
    color:var(--text-faint);
  }
  .footer-bottom a{ color:var(--text-faint); }
  .footer-bottom a:hover{ color:var(--gold-dark); }

  /* =========================================================
     SERVICES ARCHIVE PAGE
     Flexbox only throughout (no CSS Grid row/column spans) —
     each row's height depends only on its own content.
  ========================================================= */
  /* No overflow:hidden here, same as .hero on the homepage — the blob glow
     fades out on its own past the section edge instead of getting clipped
     into a hard-edged "box". */
  .archive-hero{ position:relative; }
  .archive-hero .section-head{ position:relative; padding-bottom:0; }
  .archive-hero-head{ margin-bottom:var(--sp-lg); }

  .archive-hero-title{
    margin:0;
    max-width:720px;
    font-size:var(--fs-3xl);
    line-height:1.08;
    letter-spacing:-0.01em;
    font-weight:600;
  }
  .archive-hero-title .thin{ font-weight:300; color:var(--text); }

  /* Reuses the homepage's dark .stats panel component (same markup/classes)
     as the hero's visual anchor, just narrower than the full-width version
     used further down the homepage. */
  .archive-hero-stats{
    position:relative;
    max-width:600px;
    margin:var(--sp-lg) auto 0;
    padding:var(--sp-sm) var(--sp-md);
  }
  .archive-hero-stats .stat{ padding:0; gap:6px; }
  .archive-hero-stats .stat-icon{
    width:clamp(30px, 1.4vw + 22px, 38px);
    height:clamp(30px, 1.4vw + 22px, 38px);
    margin-bottom:0;
  }
  .archive-hero-stats .stat-num{ font-size:var(--fs-xl); }
  .archive-hero-stats .stat-label{ font-size:var(--fs-2xs); }
  .archive-hero-stats .stat-divider{ margin:var(--sp-2xs) 0; }

  .archive-quick-links{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--sp-2xs);
    margin-top:var(--sp-lg);
  }
  .archive-quick-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--paper);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    border-radius:var(--radius-pill);
    padding:clamp(0.55rem,0.45rem + 0.35vw,0.75rem) clamp(1rem,0.8rem + 0.6vw,1.35rem);
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:var(--fs-xs);
    color:var(--black);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  }
  .archive-quick-link .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }
  .archive-quick-link:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
    border-color:var(--gold);
    background:linear-gradient(135deg,var(--cream-alt),var(--paper));
  }

  .archive-category{ padding-top:var(--sp-lg); padding-bottom:var(--sp-lg); }
  .archive-category:not(:last-of-type){ border-bottom:1px solid var(--border-soft); }

  .archive-category-head{
    display:flex;
    align-items:center;
    gap:var(--sp-sm);
    margin-bottom:var(--sp-md);
  }
  .archive-category-head .icon-badge{ flex:none; }
  .archive-category-head-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-3xs);
  }
  .archive-category-head-text h2{ font-size:var(--fs-xl); }
  .archive-category-head-text p{ color:var(--text-muted); max-width:640px; }

  .archive-grid{
    display:flex;
    flex-wrap:wrap;
    gap:var(--sp-md);
  }
  .archive-card{
    position:relative;
    flex:1 1 260px;
    padding:var(--sp-md);
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-3xs);
    background:linear-gradient(165deg,var(--cream-alt),var(--paper) 60%);
    border-color:var(--border-soft);
    text-align:left;
  }
  .archive-card .icon-badge-sm{
    width:clamp(42px, 1.6vw + 32px, 52px);
    height:clamp(42px, 1.6vw + 32px, 52px);
    margin-bottom:var(--sp-3xs);
  }
  .archive-card h3{ font-size:var(--fs-md); }
  .archive-card p{ color:var(--text-muted); font-size:var(--fs-sm); }

  /* =========================================================
     RESPONSIVE
  ========================================================= */
  @media (max-width: 980px){
    .problem-grid,.serve-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .services-row{ flex-wrap:wrap; }
    .services-row .service-card{ flex:1 1 calc(50% - var(--sp-md)); }
    .process-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stats{ padding:var(--sp-lg) var(--sp-sm); }
    .about{ flex-direction:column; }
    .about-media{ flex:none; width:100%; }
    .vm-grid{ grid-template-columns:1fr; }
    .team-grid{ grid-template-columns:1fr; }
    .why-wrap{ flex-direction:column; }
    .why-media{ width:100%; }
    .testi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .footer-grid{ grid-template-columns:repeat(3,1fr); }
    .footer-brand{ grid-column:1 / -1; }
    .faq-wrap{ grid-template-columns:1fr; }
    .faq-side{ position:static; }
    .archive-card{ flex:1 1 calc(50% - var(--sp-md)); }
  }

  @media (max-width: 720px){
    .nav-links, .nav-cta .btn{ display:none; }
    .burger{ display:flex; }
    .problem-grid,.serve-grid,.testi-grid{ grid-template-columns:1fr; }
    .service-feature{ flex-direction:column !important; align-items:stretch !important; text-align:center !important; }
    .service-feature-media{ width:100%; height:auto; aspect-ratio:16/9; }
    .service-feature-body{ align-items:center !important; text-align:center !important; }
    .service-feature-body .chip{ align-self:center; }
    .services-row{ flex-direction:column; }
    .services-row .service-card{ flex:1 1 auto; }
    .process-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stats{ flex-direction:column; gap:var(--sp-sm); }
    .team-card{ flex-direction:column; align-items:center; text-align:center; }
    .team-photo{ width:110px; height:110px; }
    .team-body{ align-items:center; }
    .why-cards{ grid-template-columns:1fr; }
    .archive-category-head{ flex-direction:column; align-items:flex-start; }
    .archive-card{ flex:1 1 100%; }
    .archive-quick-link{ font-size:var(--fs-2xs); padding:0.5rem 0.85rem; }
    .stat-divider{ width:60px; height:1px; align-self:center; margin:0; background:linear-gradient(90deg, transparent, rgba(249,109,3,0.35), transparent); }
    .footer-grid{ grid-template-columns:repeat(2,1fr); }
  }

/* Full-width flat header bar on mobile (instead of the floating pill) */
@media (max-width: 720px) {
  .nav-shell{
    padding: 0;
  }
  .nav{
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-2xs) var(--sp-sm);
  }
}

/* Align mobile page-content side margins with the header's margin.
   Root cause: the theme's #inner-wrap applies BOTH a margin and a padding
   from the shared .wrap class (double inset), and Elementor's top-level
   root containers (.e-con.e-parent) add their own default side padding,
   which then re-triggers auto-centering margin on nested .wrap divs.
   This removes those redundant outer insets so only each section's own
   nested .wrap padding remains — matching the header's single inset. */
@media (max-width: 720px) {
  main#inner-wrap.wrap {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .e-con.e-parent {
    padding-left: 0;
    padding-right: 0;
  }
  .e-con.e-parent .wrap {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}/* End custom CSS */