﻿
:root{
    --navy:#0F2A44;
    --navy-2:#132F4C;
    --ink:#1B2A3A;
    --blue:#1C7FC4;
    --blue-deep:#125180;
    --green:#5FA83A;
    --slate:#5B6B7A;
    --slate-light:#8695A3;
    --bg:#FFFFFF;
    --bg-soft:#F6F8F9;
    --line:#E3E7EA;
    --line-strong:#CDD5DB;
    --max:1280px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Libre Franklin', sans-serif;
    color:var(--navy);
    font-weight:700;
    line-height:1.14;
    letter-spacing:-0.01em;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{list-style:none;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 0px;}

  .eyebrow{
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--blue-deep);
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
  }

  
  .eyebrow::before{
    content:"";
    width:22px;
    height:2px;
    background:var(--green);
    display:inline-block;
  }
  .eyebrow.on-dark{ color:#0a4b86; }
  .eyebrow.on-dark::before{ background:#0a4b86; }

  .eyebrow.on-dark1{ color:#98c0de; }
  .eyebrow.on-dark::before{ background:#5fa83a; }

  /* ===== Scroll reveal (premium fade + rise-in, used sitewide) =====
     Placed early so later component rules (card hovers etc.) still win the
     cascade on shared properties like `transform` once an element is revealed. */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  /* Directional variants — pair on genuine two-column layouts so each side
     converges toward the centre (e.g. text from the left, image from the right). */
  .reveal-left{ transform:translateX(-48px); }
  .reveal-left.is-visible{ transform:translateX(0); }
  .reveal-right{ transform:translateX(48px); }
  .reveal-right.is-visible{ transform:translateX(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  a:focus-visible, button:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  .skip-link{ position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 18px; z-index:200; }
  .skip-link:focus{ left:16px; top:16px; }

  /* ===== Header ===== */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.97);
    border-bottom:1px solid var(--line);
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  /* ===== Homepage: transparent nav + utility bar overlaid on the hero image ===== */
  body.home .utility-bar{
    position:relative; z-index:50;
    background:linear-gradient(180deg, rgba(6,18,30,0.4) 0%, rgba(6,18,30,0.08) 100%);
  }
  .utility-inner{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px 24px; padding:11px 0;
  }
  .utility-tagline{ font-size:13px; font-weight:600; color:var(--navy); }
  .utility-markets{ display:flex; flex-wrap:wrap; gap:8px 22px; }
  .utility-markets span{ font-size:13px; color:var(--blue-deep); font-weight:500; }

  /* The hero overlay now opens on white, so the header can keep its normal dark-on-light
     colors (logo, nav text, button) throughout — only the background needs to stay
     transparent until is-scrolled swaps it for a solid bar. */
  body.home header{
    background:transparent; border-bottom:none; box-shadow:none;
  }
  body.home header.is-scrolled{
    background:rgba(255,255,255,0.97); border-bottom:1px solid var(--line);
    box-shadow:0 2px 16px rgba(15,42,68,0.08);
  }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; height:88px; }
  .logo-link img{ height:32px; width:auto; }
  nav.primary{ display:flex; align-items:center; gap:36px; }
  nav.primary a{
    font-size:13px; font-weight:600; color:var(--ink);
    text-transform:uppercase; letter-spacing:0.04em;
    position:relative; padding:8px 0;
  }
  nav.primary a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
  }
  nav.primary a:hover::after{ transform:scaleX(1); }
  nav.primary a.btn-primary{
    color:#fff;
    padding:12px 22px;
    gap:9px;
    box-shadow:0 0 0 rgba(15,42,68,0);
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  nav.primary a.btn-primary::after{ content:none; }
  nav.primary a.btn-primary:hover{
    background:var(--blue-deep);
    transform:translate(-3px,-3px);
    box-shadow:3px 3px 0 var(--green);
  }
  nav.primary a.btn-primary .btn-arrow{ font-size:14px; }
  .nav-links{ display:flex; align-items:center; gap:28px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    padding:13px 24px; border:1px solid transparent; border-radius:999px; cursor:pointer; white-space:nowrap;
    transition:all .2s ease;
  }
  .btn-primary{ background:var(--navy); color:#fff; }
  .btn-primary:hover{ background:var(--blue-deep); }
  .btn-outline{ border-color:#fff; color:#fff; }
  .btn-outline:hover{ background:rgba(255,255,255,0.12); }
  .btn-ghost{ border-color:var(--line-strong); color:var(--navy); }
  .btn-ghost:hover{ border-color:var(--navy); }
  .btn-arrow{ transition:transform .2s ease; }
  .btn:hover .btn-arrow{ transform:translateX(3px); }
  .menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
  .menu-toggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; }

  /* ===== Hero (full-bleed video background) ===== */
  .hero{
    position:relative; z-index:1; overflow:hidden;
    min-height:640px;
    display:flex; align-items:flex-end;
    background:url('../images/hero-home-bg.jpg') center/cover no-repeat;
  }
  .hero-video{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover;
  }
  /* Brand-color wash: white (top) → green → blue (bottom), echoing the logo palette */
  .hero::before{
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.95) 15%,
      rgba(236,250,232,0.9) 20%,
      rgba(95,168,58,0.8) 40%,
      rgba(78,143,47,0.8) 62%,
      rgba(28,127,196,0.8) 84%,
      rgba(18,81,128,0.7) 100%)
  }
  /* Pull the hero up behind the utility bar + transparent header so the video and gradient span the full block */
  /* -150/790 (not the exact 132/772 header+utility height) leaves a small safety buffer so a
     wrapped utility-bar line on narrow screens never exposes a gap above the hero */
  body.home .hero{ margin-top:-150px; min-height:790px; }
  .hero-inner{ position:relative; z-index:2; padding:120px 0 64px; }
  .hero h1{
    color:#fff; font-size:clamp(34px, 4.6vw, 68px); margin:20px 0 22px; max-width:820px;
    text-shadow:0 2px 16px rgba(6,18,30,0.35);
  }
  .hero p.lead{
    font-size:18px; color:#fff; max-width:600px; margin-bottom:34px;
    text-shadow:0 1px 10px rgba(6,18,30,0.35);
  }
  .hero .eyebrow{ text-shadow:0 1px 8px rgba(255,255,230,0.6); }
  .cta-row{ display:flex; gap:16px; flex-wrap:wrap; }

  /* Centered hero content variant (homepage) */
  .hero-center{ margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .hero-center .eyebrow{ justify-content:center; }
  .hero-center h1, .hero-center p.lead{ max-width:860px; }
  .hero-center .cta-row{ justify-content:center; }

  .scroll-cue{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    margin:44px auto 0; color:#DCE7EF; font-size:11.5px; font-weight:700;
    letter-spacing:0.14em; text-transform:uppercase;
  }
  .scroll-cue .scroll-line{
    width:1px; height:34px; background:rgba(255,255,255,0.5);
    position:relative; overflow:hidden;
  }
  .scroll-cue .scroll-line::after{
    content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
    background:#fff; animation:scroll-cue-move 1.8s ease-in-out infinite;
  }
  @keyframes scroll-cue-move{
    0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
  }

  /* ===== Section base ===== */
  section{ padding:104px 0; }
  .section-head{ max-width:680px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(26px,3vw,38px); margin-top:16px; }
  .section-head p{ color:var(--slate); font-size:16px; margin-top:14px; }

  .accent-blue{ color:var(--blue); }

  /* ===== About Effigain (intro strip, first section after the hero) ===== */
  .about-intro .section-head-row > div{ max-width:800px; }
  .about-grid{
    display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; margin-top:8px;
  }
  .about-grid.three-col{ grid-template-columns:repeat(3, 1fr); }
  @media (max-width:900px){ .about-grid.three-col{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .about-grid.three-col{ grid-template-columns:1fr; } }
  .about-card{
    position:relative; overflow:hidden;
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:28px 24px; box-shadow:0 4px 18px rgba(15,42,68,0.05);
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
  }
  .about-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--blue), var(--green));
    transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
  }
  .about-card:hover{
    transform:translateY(-9px);
    box-shadow:0 26px 50px rgba(15,42,68,0.18);
    border-color:transparent;
  }
  .about-card:hover::before{ transform:scaleX(1); }
  .about-card:hover .why-card-icon{ transform:scale(1.12); }
  .about-card h3{ font-size:16.5px; margin-bottom:10px; line-height:1.3; }
  .about-card p{ color:var(--slate); font-size:14px; line-height:1.55; }

  /* ===== Why Choose Us (rounded-card variant) ===== */
  .why-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-top:8px;
  }
  /* Variant: three-column layout for compact premium sections */
  .why-grid.three-col{
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .why-card{
    position:relative; overflow:hidden;
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:32px 28px; box-shadow:0 4px 18px rgba(15,42,68,0.05);
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
  }
  .why-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--blue), var(--green));
    transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
  }
  .why-card:hover{
    transform:translateY(-9px);
    box-shadow:0 26px 50px rgba(15,42,68,0.18);
    border-color:transparent;
  }
  .why-card:hover::before{ transform:scaleX(1); }
  .why-card:hover .why-card-icon{ transform:scale(1.12); }
  .why-card-icon{
    width:56px; height:56px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .why-card-icon svg{ width:24px; height:24px; }
  .why-card-icon-blue{ background:#E3F1FC; color:var(--blue); }
  .why-card-icon-green{ background:#E9F4E1; color:var(--green); }
  .why-card h3{ font-size:18px; margin-bottom:12px; }
  .why-card p{ color:var(--slate); font-size:14.5px; line-height:1.6; margin-bottom:22px; }

  .why-banner{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
    background:var(--bg-soft); border-radius:16px; padding:32px 40px; margin-top:48px;
  }
  .why-banner p{ font-size:15px; color:var(--ink); }
  .why-banner p strong{ color:var(--navy); }

  /* ===== Stats showcase (standalone section — page-derived facts only) =====
     Styling reference: intralinkgroup.com "So far we've reached" — white background,
     no dividers/borders/icons, scale contrast between the big number and its label. */
  .stats-showcase{
    position:relative; overflow:hidden; text-align:center; color:#fff;
    background:linear-gradient(160deg, var(--blue-deep) 0%, var(--navy) 100%);
  }
  .stats-showcase::before{
    content:""; position:absolute; inset:0; z-index:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 100%);
    mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 100%);
  }
  .stats-showcase::after{
    content:""; position:absolute; top:50%; left:50%; z-index:0;
    width:820px; height:820px; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(95,168,58,0.16) 0%, rgba(28,127,196,0.14) 45%, rgba(28,127,196,0) 72%);
  }
  .stats-showcase .wrap{ position:relative; z-index:1; }
  .stats-showcase .eyebrow{ justify-content:center; }
  .stats-showcase h2{ color:#fff; font-size:clamp(24px,2.6vw,32px); margin-top:16px; }
  .stats-showcase-desc{
    color:#C3D3E0; font-size:16px; max-width:520px; margin:14px auto 64px;
  }
  .stats-row{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:40px;
    max-width:1160px; margin:0 auto;
  }
  .stat-block{
    opacity:0; transform:translateY(18px);
    transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  }
  .stats-showcase.is-visible .stat-block{ opacity:1; transform:translateY(0); }
  .stat-block:nth-child(1){ transition-delay:0s; }
  .stat-block:nth-child(2){ transition-delay:.1s; }
  .stat-block:nth-child(3){ transition-delay:.2s; }
  .stat-block:nth-child(4){ transition-delay:.3s; }
  .stat-block-icon{
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; margin:0 auto 22px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff;
  }
  .stat-block-icon svg{ width:24px; height:24px; }
  .stat-block-num{
    display:block; font-family:'Libre Franklin',sans-serif; font-weight:800;
    font-size:clamp(38px,4.8vw,54px); color:#fff; line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .stat-block-label{
    display:block; margin-top:14px; font-size:14.5px; color:#C3D3E0; font-weight:500;
  }

  /* ===== Two-Way homepage layout: intro left, connected timeline right ===== */
  /* overflow:hidden is intentionally NOT used here — it would clip the
     containing block for .twoway-intro's position:sticky and silently break it */
  .twoway{ position:relative; }
  .twoway::before{
    content:""; position:absolute; top:0; right:0; z-index:0; pointer-events:none;
    width:420px; height:420px;
    background:radial-gradient(circle at top right, rgba(95,168,58,0.09) 0%, rgba(95,168,58,0) 70%);
  }
  .twoway::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(15,42,68,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,42,68,0.045) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 40%, #000 0%, transparent 100%);
    mask-image:radial-gradient(ellipse 75% 75% at 50% 40%, #000 0%, transparent 100%);
  }
  .twoway-layout{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
  /* left column pins in place while the timeline scrolls past it, like the reference site */
  .twoway-intro{ position:sticky; top:104px; }
  .twoway-intro .section-head{ max-width:none; margin-bottom:32px; }

  .twoway-timeline{ position:relative; }
  .timeline-item{ position:relative; padding-left:56px; padding-bottom:44px; }
  .timeline-item:last-child{ padding-bottom:0; }
  .timeline-item::before{
    content:""; position:absolute; left:19px; top:40px; bottom:0; width:1px; background:var(--line);
  }
  .timeline-item:last-child::before{ display:none; }
  .timeline-marker{
    position:absolute; left:0; top:0; width:40px; height:40px; z-index:1;
    display:flex; align-items:center; justify-content:center; background:var(--navy);
  }
  .timeline-marker svg{ width:18px; height:18px; }
  .timeline-item[data-direction="inbound"] .timeline-marker svg{ color:var(--blue); }
  .timeline-item[data-direction="outbound"] .timeline-marker svg{ color:var(--green); }
  .timeline-img{ height:200px; overflow:hidden; border:1px solid var(--line); margin-bottom:22px; }
  .timeline-img img{ width:100%; height:100%; object-fit:cover; }
  .timeline-body .tag{
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
    display:inline-block; margin-bottom:16px; color:var(--blue-deep);
  }
  .timeline-item[data-direction="outbound"] .tag{ color:var(--green); }
  .timeline-body h3{ font-size:22px; margin-bottom:12px; }
  .timeline-body p{ color:var(--slate); font-size:15px; margin-bottom:22px; }

  /* ===== Two-way image + text panels (reused on the Market Entry page) ===== */
  .twoway-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .twoway-card{
    padding:0; border-right:1px solid var(--line); border-top:4px solid var(--line);
    background:var(--bg); transition:transform .2s ease, box-shadow .2s ease; position:relative;
  }
  .twoway-card:last-child{ border-right:none; }
  .twoway-card[data-direction="inbound"]{ border-top-color:var(--blue); }
  .twoway-card[data-direction="outbound"]{ border-top-color:var(--green); }
  .twoway-card:hover{ transform:translateY(-4px); box-shadow:6px 6px 0 var(--line); z-index:1; }
  .twoway-img{ height:380px; overflow:hidden; position:relative; }
  .twoway-img img{ width:100%; height:100%; object-fit:cover; }
  .twoway-badge{
    position:absolute; top:0; left:0; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center; background:var(--navy);
  }
  .twoway-badge svg{ width:20px; height:20px; }
  .twoway-card[data-direction="inbound"] .twoway-badge svg{ color:var(--blue); }
  .twoway-card[data-direction="outbound"] .twoway-badge svg{ color:var(--green); }
  .twoway-body{ padding:40px 44px 48px; }
  .twoway-card .tag{
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
    padding:0; display:inline-block; margin-bottom:18px; color:var(--blue-deep);
  }
  .twoway-card[data-direction="outbound"] .tag{ color:var(--green); }
  .twoway-card h3{ font-size:23px; margin-bottom:14px; }
  .twoway-card p{ color:var(--slate); font-size:15px; margin-bottom:26px; }
  .link-cta{
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    display:inline-flex; align-items:center; gap:8px;
    color:var(--navy); border-bottom:2px solid var(--navy); padding-bottom:4px;
  }
  .link-cta:hover{ color:var(--blue-deep); border-color:var(--blue-deep); }
  .link-cta-light{ color:#fff; border-bottom-color:rgba(255,255,255,0.5); }
  .link-cta-light:hover{ color:#7FD15A; border-bottom-color:#7FD15A; }

  /* ===== Capabilities ===== */
  .capabilities{ position:relative; overflow:hidden; background:var(--bg-soft); }
  .capabilities::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(15,42,68,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,42,68,0.05) 1px, transparent 1px),
      radial-gradient(circle, rgba(28,127,196,0.10) 0%, rgba(28,127,196,0) 70%);
    background-size:42px 42px, 42px 42px, 480px 480px;
    background-position:0 0, 0 0, top -160px right -160px;
    background-repeat:repeat, repeat, no-repeat;
  }
  .capabilities::after{
    content:""; position:absolute; bottom:-180px; left:-180px; z-index:0;
    width:420px; height:420px; pointer-events:none;
    background:radial-gradient(circle, rgba(95,168,58,0.09) 0%, rgba(95,168,58,0) 70%);
  }
  .capabilities > .wrap{ position:relative; z-index:1; }
  .cap-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .cap-item{
    position:relative;
    background:#fff; padding:36px 30px 30px; min-height:180px;
    display:flex; flex-direction:column; gap:22px;
    transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .cap-item::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  }
  .cap-item-num{
    position:absolute; top:22px; right:24px;
    font-family:'Libre Franklin', sans-serif; font-weight:800; font-size:12.5px;
    letter-spacing:0.02em; color:var(--line-strong);
    transition:color .25s ease;
  }
  .cap-icon-badge{
    width:52px; height:52px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-soft); border:1px solid var(--line);
    transition:background .25s ease, border-color .25s ease;
  }
  .cap-icon{ width:24px; height:24px; color:var(--blue-deep); flex:none; transition:color .2s ease; }
  .cap-item-label{ font-size:14.5px; font-weight:600; color:var(--navy); line-height:1.35; }
  .cap-item:hover{
    background:#fff;
    transform:translateY(-4px);
    box-shadow:6px 6px 0 var(--line);
    z-index:1;
  }
  .cap-item:hover::before{ transform:scaleX(1); }
  .cap-item:hover .cap-item-num{ color:var(--blue); }
  .cap-item:hover .cap-icon-badge{ background:var(--navy); border-color:var(--navy); }
  .cap-item:hover .cap-icon{ color:#fff; }

  /* ===== Shared pill (Industries region tags reuse this base) ===== */
  .pill, .ind-pill{
    display:inline-flex; align-items:center;
    border:1px solid var(--line-strong); padding:11px 20px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--ink);
    transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .pill--light:hover{ border-color:var(--blue); color:var(--blue-deep); background:var(--bg-soft); }

  /* ===== Focus (premium showcase treatment) ===== */
  .focus-section{ position:relative; overflow:hidden; }
  .focus-section::before{
    content:""; position:absolute; top:-140px; left:-160px; z-index:0;
    width:460px; height:460px; pointer-events:none;
    background:radial-gradient(circle, rgba(95,168,58,0.08) 0%, rgba(95,168,58,0) 70%);
  }
  .focus-section::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(15,42,68,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,42,68,0.045) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 50%, #000 0%, transparent 100%);
    mask-image:radial-gradient(ellipse 70% 70% at 30% 50%, #000 0%, transparent 100%);
  }
  .focus{ position:relative; z-index:1; display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:center; }
  .focus-text .heading-md{ font-size:clamp(28px,3.2vw,38px); }
  .focus-list{
    display:grid; grid-template-columns:1fr 1fr; column-gap:32px;
    list-style:none; margin-top:36px; border-top:1px solid var(--line);
  }
  .focus-list li{
    display:flex; align-items:center; gap:14px;
    padding:16px 0; border-bottom:1px solid var(--line);
    font-size:14.5px; font-weight:600; color:var(--ink);
    transition:color .2s ease;
  }
  .focus-mark{
    width:7px; height:7px; flex:none; background:var(--blue-deep);
    transition:background .2s ease, transform .2s ease;
  }
  .focus-list li:hover{ color:var(--blue-deep); }
  .focus-list li:hover .focus-mark{ background:var(--green); transform:scale(1.2); }

  .focus-showcase{ position:relative; margin:28px 28px 28px 0; }
  .focus-photo-frame{ position:relative; }
  .focus-photo-frame::after{
    content:""; position:absolute; left:28px; top:28px; width:100%; height:100%;
    background:var(--navy); z-index:-1;
  }
  .focus-photo{ position:relative; height:440px; overflow:hidden; z-index:1; }
  .focus-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .focus-photo::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(160deg, rgba(15,42,68,0.32) 0%, rgba(15,42,68,0) 55%);
  }
  .focus-highlight{
    position:absolute; left:-28px; bottom:-32px; z-index:2; max-width:280px;
    display:flex; align-items:center; gap:16px;
    background:#fff; border:1px solid var(--line); padding:22px 24px;
    box-shadow:8px 8px 0 var(--bg-soft);
  }
  .focus-highlight-icon{
    flex:none; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-soft); color:var(--blue-deep);
  }
  .focus-highlight-icon svg{ width:22px; height:22px; }
  .focus-highlight-label{
    display:block; font-size:11px; font-weight:700; color:var(--slate-light);
    text-transform:uppercase; letter-spacing:.06em;
  }
  .focus-highlight-value{
    display:block; font-family:'Libre Franklin',sans-serif; font-weight:700;
    font-size:16px; color:var(--navy); margin-top:3px;
  }

  /* ===== Industries (premium image-card grid) ===== */
  .industries{
    position:relative; overflow:hidden; color:#fff;
    background:linear-gradient(135deg, var(--blue-deep) 0%, var(--navy) 48%, #11342a 100%);
  }
  .industries::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .industries::after{
    content:""; position:absolute; top:-160px; right:-120px; z-index:0; pointer-events:none;
    width:520px; height:520px;
    background:radial-gradient(circle, rgba(95,168,58,0.20) 0%, rgba(28,127,196,0.14) 45%, rgba(28,127,196,0) 72%);
  }
  .industries > .wrap{ position:relative; z-index:1; }
  .industries .section-head p{ color:#C3D3E0; }
  .ind-pill{
    border-color:rgba(255,255,255,0.28); color:#F1F6F9;
  }
  .ind-pill:hover{ border-color:var(--green); background:rgba(95,168,58,0.15); }

  .carousel-controls{ display:flex; align-items:center; gap:12px; }
  .carousel-btn{
    width:44px; height:44px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid rgba(255,255,255,0.3); border-radius:999px; color:#fff; cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .carousel-btn:hover{ background:rgba(255,255,255,0.12); border-color:#fff; }
  .carousel-btn:disabled{ opacity:0.35; cursor:default; }
  .carousel-btn:disabled:hover{ background:transparent; border-color:rgba(255,255,255,0.3); }
  .carousel-btn svg{ width:18px; height:18px; }

  .industry-track{
    display:flex; gap:14px; overflow-x:auto; padding:8px 4px 18px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .industry-track::-webkit-scrollbar{ display:none; }
  .industry-card{
    position:relative; display:block; overflow:hidden; background:var(--navy);
    flex:0 0 260px; height:290px; scroll-snap-align:start;
    border:1px solid rgba(255,255,255,0.16);
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
  }
  .industry-card img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
  }
  .industry-card::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(11,27,44,0.08) 0%, rgba(11,27,44,0.88) 100%);
  }
  .industry-card::after{
    content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
    background:linear-gradient(90deg, var(--blue), var(--green));
    transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
  }
  .industry-card:hover{
    transform:translateY(-6px);
    box-shadow:7px 7px 0 var(--green);
    border-color:rgba(255,255,255,0.4);
    z-index:1;
  }
  .industry-card:hover img{ transform:scale(1.08); }
  .industry-card:hover::after{ transform:scaleX(1); }
  .industry-card-num{
    position:absolute; top:14px; left:14px; z-index:2;
    font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:11.5px;
    letter-spacing:0.03em; color:rgba(255,255,255,0.85);
    background:rgba(11,27,44,0.55); border:1px solid rgba(255,255,255,0.25);
    padding:3px 8px;
  }
  .industry-card-name{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:16px 16px 16px 18px; color:#fff;
    font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:15px; line-height:1.25;
  }
  .industry-card-arrow{
    flex:none; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,0.35); color:#fff;
    opacity:0; transform:translateX(-6px);
    transition:opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .industry-card-arrow svg{ width:13px; height:13px; }
  .industry-card:hover .industry-card-arrow{
    opacity:1; transform:translateX(0);
    border-color:var(--green); background:rgba(95,168,58,0.25);
  }

  /* ===== Insights (featured story + secondary list) ===== */
  .insights{ position:relative; overflow:hidden; }
  .insights::after{
    content:""; position:absolute; bottom:-160px; right:-140px; z-index:0;
    width:440px; height:440px; pointer-events:none;
    background:radial-gradient(circle, rgba(28,127,196,0.09) 0%, rgba(28,127,196,0) 70%);
  }
  .insights::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(15,42,68,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,42,68,0.045) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 50%, #000 0%, transparent 100%);
    mask-image:radial-gradient(ellipse 70% 70% at 70% 50%, #000 0%, transparent 100%);
  }
  .insights > .wrap{ position:relative; z-index:1; }
  .insights-grid{ display:grid; grid-template-columns:1.2fr 1fr; border:1px solid var(--line); }
  .insight-cat{
    display:inline-block; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
    color:var(--blue-deep); padding-left:10px; border-left:2px solid var(--blue);
  }

  .insight-feature{
    display:block; border-right:1px solid var(--line); transition:background .2s ease;
  }
  .insight-feature:hover{ background:var(--bg-soft); }
  .insight-feature-img{ height:320px; overflow:hidden; }
  .insight-feature-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .insight-feature:hover .insight-feature-img img{ transform:scale(1.06); }
  .insight-feature-body{ padding:32px 36px 36px; }
  .insight-feature-body h3{ font-size:24px; margin:16px 0 12px; line-height:1.3; }
  .insight-feature-body p{ color:var(--slate); font-size:15px; margin-bottom:22px; }

  .insight-list{ display:flex; flex-direction:column; }
  .insight-row{
    display:flex; gap:20px; padding:24px 28px; border-bottom:1px solid var(--line);
    transition:background .2s ease;
  }
  .insight-list .insight-row:last-child{ border-bottom:none; }
  .insight-row:hover{ background:var(--bg-soft); }
  .insight-row-img{ flex:0 0 96px; height:96px; overflow:hidden; }
  .insight-row-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .insight-row-body h3{ font-size:15.5px; font-weight:600; margin-top:10px; line-height:1.4; }

  /* ===== Client & partner logos (placeholder slots, auto-scrolling marquee) ===== */
  .logo-strip{ position:relative; overflow:hidden; background:var(--bg-soft); }
  .logo-strip::before{
    content:""; position:absolute; top:50%; left:50%; z-index:0;
    width:640px; height:320px; transform:translate(-50%,-50%); pointer-events:none;
    background:radial-gradient(ellipse, rgba(95,168,58,0.07) 0%, rgba(28,127,196,0.06) 55%, rgba(28,127,196,0) 78%);
  }
  .logo-strip::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(15,42,68,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,42,68,0.04) 1px, transparent 1px);
    background-size:40px 40px;
    -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 100%);
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 100%);
  }
  .logo-strip > .wrap{ position:relative; z-index:1; }
  .logo-strip-heading{ font-size:clamp(24px,2.6vw,32px); margin-top:16px; max-width:640px; }
  .logo-marquee{
    position:relative; overflow:hidden; margin-top:28px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-track{
    display:flex; width:max-content;
    animation:logo-scroll 26s linear infinite;
  }
  .logo-marquee:hover .logo-track{ animation-play-state:paused; }
  .logo-set{ display:flex; gap:16px; padding-right:16px; flex:none; }
  .logo-slot{
    flex:0 0 150px; height:84px;
    display:flex; align-items:center; justify-content:center;
    border:1px dashed var(--line-strong); background:#fff;
  }
  .logo-slot span{
    color:var(--slate-light); font-size:12.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .logo-strip-note{ margin-top:20px; font-size:13px; color:var(--slate-light); font-style:italic; }
  @keyframes logo-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .logo-track{ animation:none; }
  }

  /* ===== Closing CTA ===== */
  .accent-green{ color:var(--green); }
  .closing{ position:relative; overflow:hidden; background:var(--navy); color:#fff; }
  .closing::before{
    content:""; position:absolute; top:-200px; left:-140px; z-index:0;
    width:560px; height:560px; pointer-events:none;
    background:radial-gradient(circle, rgba(28,127,196,0.12) 0%, rgba(28,127,196,0) 70%);
  }
  .closing::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
  }
  .closing-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; align-items:stretch; }
  .closing-body{ position:relative; padding:96px 64px; }
  .closing-body::before{
    content:""; position:absolute; top:0; left:0; width:64px; height:4px;
    background:linear-gradient(90deg, var(--blue), var(--green));
  }
  .closing h2{ color:#fff; font-size:clamp(28px,3.2vw,40px); margin:18px 0 18px; }
  .closing p{ color:#C9D9E5; font-size:16px; margin-bottom:32px; max-width:460px; }
  .closing .btn-outline:hover{ background:var(--green); border-color:var(--green); color:#fff; }
  .closing-img{ position:relative; min-height:340px; }
  .closing-img img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
  .closing-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,42,68,0.55), rgba(15,42,68,0)); }
  .closing-badge{
    position:absolute; left:32px; bottom:32px; z-index:1; max-width:240px;
    display:flex; align-items:center; gap:14px;
    background:#fff; border:1px solid var(--line); padding:18px 20px;
    box-shadow:8px 8px 0 rgba(0,0,0,0.18);
  }
  .closing-badge-icon{
    flex:none; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-soft); color:var(--blue-deep);
  }
  .closing-badge-icon svg{ width:20px; height:20px; }
  .closing-badge-label{
    display:block; font-size:10.5px; font-weight:700; color:var(--slate-light);
    text-transform:uppercase; letter-spacing:.06em;
  }
  .closing-badge-value{
    display:block; font-family:'Libre Franklin',sans-serif; font-weight:700;
    font-size:14.5px; color:var(--navy); margin-top:3px;
  }

  /* ===== Footer ===== */
  footer{ background:#0A1E32; color:#93A9BB; padding:68px 0 30px; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; margin-bottom:52px; }
  .foot-brand img{ height:28px; margin-bottom:18px; filter:brightness(0) invert(1); }
  .foot-brand p{ font-size:14px; color:#728AA0; max-width:280px; }
  .foot-social{ display:flex; gap:12px; margin-top:20px; }
  .foot-social-link{
    width:36px; height:36px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.08); color:#AEC0CF;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .foot-social-link svg{ width:16px; height:16px; }
  .foot-social-link[hidden]{ display:none; }
  .foot-social-link:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
  footer h4{ color:#fff; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; font-weight:700; }
  footer ul li{ margin-bottom:12px; }
  footer ul li a{ font-size:14.5px; color:#AEC0CF; }
  footer ul li a:hover{ color:#fff; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#5F7789; }
  .foot-bottom a{ color:#AEC0CF; text-decoration:underline; text-underline-offset:2px; }
  .foot-bottom a:hover{ color:#fff; }

  /* ===== Responsive ===== */
  @media (max-width:980px){
    nav.primary{ display:none; }
    .menu-toggle{ display:block; }
    .twoway-grid{ grid-template-columns:1fr; }
    .twoway-card{ border-right:none; border-bottom:1px solid var(--line); }
    .twoway-layout{ grid-template-columns:1fr; gap:48px; }
    .twoway-intro{ position:static; }
    .cap-grid{ grid-template-columns:1fr 1fr; }
    .about-grid{ grid-template-columns:repeat(3, 1fr); }
    .why-grid{ grid-template-columns:1fr 1fr; }
    .industry-card{ flex-basis:220px; height:250px; }
    .stats-row{ grid-template-columns:1fr 1fr; row-gap:48px; }
    .focus{ grid-template-columns:1fr; }
    .insights-grid{ grid-template-columns:1fr; }
    .insight-feature{ border-right:none; border-bottom:1px solid var(--line); }
    .closing-grid{ grid-template-columns:1fr; }
    .closing-body{ padding:64px 40px; }
    .closing-img{ min-height:260px; order:-1; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .utility-markets{ display:none; }
  }
  @media (max-width:560px){
    .wrap{ padding:0 22px; }
    .cap-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr 1fr; }
    .why-grid{ grid-template-columns:1fr; }
    .why-banner{ padding:28px 24px; text-align:center; justify-content:center; }
    .industry-card{ flex-basis:200px; height:230px; }
    .focus-showcase{ display:none; }
    .focus-list{ grid-template-columns:1fr; }
    .stats-row{ grid-template-columns:1fr; row-gap:40px; }
    section{ padding:72px 0; }
    .foot-grid{ grid-template-columns:1fr; }
    .closing-body{ padding:48px 24px; }
    /* the utility bar wraps to 2 lines at this width, taking more vertical space than the
       fixed 120px hero-inner padding accounts for — push content down so the eyebrow
       clears the header instead of sitting behind it */
    body.home .hero-inner{ padding-top:170px; }
  }

  /* ===== Utility classes (replace one-off inline styles) ===== */
  .no-pad{ padding:0; }
  .pad-bottom-0{ padding-bottom:0; }
  .btn-outline-solid{ background:#fff; color:var(--navy); border-color:#fff; }
  .btn-outline-solid:hover{ background:#EAF5FF; }
  .heading-md{ font-size:clamp(24px,2.6vw,32px); margin-top:16px; }
  .text-slate{ color:var(--slate); margin-top:16px; font-size:15.5px; }
  .heading-on-dark{ color:#fff; }
  .section-head-row{
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:wrap; gap:20px; max-width:none;
  }

  /* ===== Mobile nav (driven by js/script.js) ===== */
  nav.primary.is-open{
    display:flex; position:absolute; top:88px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 40px 24px;
  }
  nav.primary.is-open .nav-links{
    flex-direction:column; align-items:flex-start; gap:4px; width:100%;
  }
  nav.primary.is-open .nav-links a{ padding:12px 0; width:100%; }
  nav.primary.is-open .btn-primary{ margin-top:12px; }
  body.home header nav.primary.is-open a{ color:var(--ink); }
  body.home header nav.primary.is-open .btn-primary{ background:var(--navy); color:#fff; }
  .menu-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2){ opacity:0; }
  .menu-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .menu-toggle span{ transition:transform .2s ease, opacity .2s ease; }

/* =========================================================
   SHARED COMPONENTS — used across interior pages
   ========================================================= */

/* ===== Page hero (smaller full-bleed banner for interior pages) ===== */
.page-hero{
  position:relative;
  min-height:220px;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,42,68,0.6) 0%, rgba(15,42,68,0.8) 60%, rgba(11,31,51,0.94) 100%);
}
.page-hero-inner{ position:relative; padding:38px 0 24px; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ color:#fff; font-size:clamp(30px,4vw,46px); max-width:820px; margin-bottom:16px; }
.page-hero p.lead{ font-size:17px; color:#DCE7EF; max-width:640px; }
.breadcrumb{ position:relative; font-size:13px; color:#9CC0DD; margin-bottom:14px; }
.breadcrumb a{ color:#9CC0DD; }
.breadcrumb a:hover{ color:#fff; }

/* ===== Alternate section background (zebra striping) ===== */
.section-soft{ background:var(--bg-soft); }
.section-navy{ background:var(--navy); color:#fff; }
.section-navy .section-head p{ color:#C3D3E0; }
.section-navy h2, .section-navy h3{ color:#fff; }

/* ===== Intro block (statement + bullet constraints, used on About/Market Entry etc.) ===== */
.intro-block{ max-width:760px; }
.intro-block h2{ font-size:clamp(26px,3vw,36px); margin:16px 0 18px; }
.intro-block .statement{ font-size:20px; color:var(--navy); font-weight:600; margin-bottom:22px; line-height:1.45; }
.intro-block p{ color:var(--slate); font-size:16px; margin-bottom:18px; }
.intro-block p:last-child{ margin-bottom:0; }

/* ===== About page: Challenge section (constraint checklist + photo) ===== */
.challenge-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }
.challenge-section .intro-block{ max-width:none; }
.constraint-panel{
  background:var(--bg-soft); border:1px solid var(--line);
  padding:8px 28px; margin:24px 0 28px;
}
.constraint-list{ margin-top:0; border-top:none; }
.constraint-resolve{ font-weight:700; color:var(--navy) !important; }

/* ===== About page: Vision & Mission (premium icon cards, reuses .why-card) ===== */
.vision-mission .section-head{ text-align:center; margin:0 auto 48px; max-width:600px; }
.vision-mission .eyebrow{ justify-content:center; }
.vision-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  max-width:980px; margin:0 auto;
}
.vision-grid .why-card{ padding:52px 44px; }
.vision-grid .why-card-icon{ width:84px; height:84px; margin-bottom:30px; }
.vision-grid .why-card-icon svg{ width:38px; height:38px; }
.vision-grid .why-card h3{ font-size:23px; margin-bottom:14px; }
.vision-grid .why-card p{ font-size:15.5px; line-height:1.7; margin-bottom:0; }

/* ===== Generic two-column bullet list (reused across many pages) ===== */
.bullet-list{ display:grid; grid-template-columns:1fr 1fr; margin-top:8px; }
.bullet-list li{
  font-size:15px; padding:14px 0 14px 20px; border-top:1px solid var(--line);
  position:relative; color:var(--ink);
}
.bullet-list li::before{
  content:""; position:absolute; left:0; top:21px; width:8px; height:1px; background:var(--slate-light);
}
.bullet-list li:nth-child(-n+2){ border-top:none; }
.bullet-list.single-col{ grid-template-columns:1fr; }
.bullet-list.single-col li:nth-child(-n+2){ border-top:1px solid var(--line); }
.bullet-list.single-col li:first-child{ border-top:none; }
.section-navy .bullet-list li{ color:#E4EEF5; border-top-color:rgba(255,255,255,0.14); }
.section-navy .bullet-list li::before{ background:rgba(255,255,255,0.4); }

/* ===== Info grid (title + description cards — values, models, capabilities, industries, insight categories) ===== */
/* ===== Sector cards (Industries page — photo-topped, reuses homepage industry imagery) ===== */
.sector-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-top:8px; }
.sector-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.sector-card-img{ position:relative; height:170px; overflow:hidden; }
.sector-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.sector-card-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,42,68,0) 60%, rgba(15,42,68,0.18) 100%); }
.sector-card-body{ padding:22px 22px 26px; }
.sector-card-body h3{ font-size:16.5px; margin-bottom:8px; color:var(--navy); }
.sector-card-body p{ font-size:13.5px; color:var(--slate); line-height:1.55; margin:0; }
.sector-card:hover{ transform:translateY(-9px); box-shadow:0 26px 50px rgba(15,42,68,0.16); border-color:transparent; }
.sector-card:hover .sector-card-img img{ transform:scale(1.08); }
@media (max-width:980px){ .sector-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sector-grid{ grid-template-columns:1fr; } }

.info-grid{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.info-card{
  background:#fff; padding:32px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.info-card h3{ font-size:17px; margin-bottom:10px; }
.info-card p{ font-size:14.5px; color:var(--slate); }
.info-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }

/* ===== Values grid (About page — pastel-tinted cards with large ghost numerals,
   floating on the dark section; deliberately different presentation from the
   rounded icon-cards used earlier on the same page) ===== */
.values-grid.five-col{ grid-template-columns:repeat(5, 1fr); }
@media (max-width:1100px){ .values-grid.five-col{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .values-grid.five-col{ grid-template-columns:1fr; } }
.value-item h3:last-child{ margin-bottom:0; }
.values-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  margin-top:8px;
}
.value-item{
  border-radius:16px; padding:40px 32px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.value-item:nth-child(odd){ background:#E3F1FC; }
.value-item:nth-child(even){ background:#E9F4E1; }
.value-num{
  display:block; font-family:'Libre Franklin',sans-serif; font-weight:800;
  font-size:44px; line-height:1; color:rgba(15,42,68,0.14);
  margin-bottom:20px; transition:color .3s ease;
}
.value-item h3{ color:var(--navy); font-size:19px; margin-bottom:10px; }
.value-item p{ color:var(--slate); font-size:14.5px; line-height:1.6; }
.value-item:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,0.28);
}
.value-item:hover .value-num{ color:rgba(15,42,68,0.28); }

/* ===== Process flow (genuine sequences only) ===== */
.process-flow{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:0;
  position:relative; padding:8px 0 0;
}
.process-flow::before{
  content:""; position:absolute; top:34px; left:calc(100%/16); right:calc(100%/16); height:2px;
  background:var(--line); z-index:0;
}
.process-step{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 10px; position:relative; z-index:1;
}
.process-step .step-num{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:#fff; border:2px solid var(--blue-deep); color:var(--blue-deep);
  font-family:'Libre Franklin', sans-serif; font-weight:800; font-size:17px;
  margin-bottom:16px; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.process-step:nth-child(even) .step-num{ border-color:var(--green); color:var(--green); }
.process-step .step-label{ font-size:13.5px; font-weight:600; color:var(--navy); line-height:1.4; max-width:130px; }
.process-step:hover .step-num{
  background:var(--blue-deep); color:#fff; transform:translateY(-5px);
  box-shadow:0 12px 26px rgba(18,81,128,0.32);
}
.process-step:nth-child(even):hover .step-num{
  background:var(--green); box-shadow:0 12px 26px rgba(95,168,58,0.32);
}
.section-navy .process-flow::before{ background:rgba(255,255,255,0.2); }
.section-navy .process-step .step-num{ background:var(--navy); border-color:rgba(255,255,255,0.5); color:#fff; }
.section-navy .process-step:nth-child(even) .step-num{ border-color:var(--green); color:var(--green); }
.section-navy .process-step .step-label{ color:#fff; }
.section-navy .process-step:hover .step-num{ background:var(--blue-deep); border-color:var(--blue-deep); }
.section-navy .process-step:nth-child(even):hover .step-num{ background:var(--green); border-color:var(--green); color:#fff; }

@media (max-width:860px){
  .process-flow{ grid-template-columns:1fr; gap:0; padding:4px 0; }
  .process-flow::before{ top:0; bottom:28px; left:27px; right:auto; width:2px; height:auto; }
  .process-step{ flex-direction:row; align-items:flex-start; text-align:left; padding:0 0 28px; }
  .process-step .step-num{ margin-bottom:0; margin-right:18px; }
  .process-step .step-label{ max-width:none; padding-top:15px; }
  .process-step:last-child{ padding-bottom:0; }
  .process-step:hover .step-num{ transform:translateX(4px); }
}

/* ===== Pills (light variant, for use on white backgrounds) ===== */
.pill-wrap{ display:flex; flex-wrap:wrap; gap:12px; }
.pill-light{
  border:1px solid var(--line-strong); padding:11px 20px; font-size:14px; color:var(--navy);
  transition:all .2s ease; background:#fff;
}
.pill-light:hover{ border-color:var(--blue); background:var(--bg-soft); }

/* ===== Checkbox list (Contact page "I Am Looking For") ===== */
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.checkbox-item{
  display:flex; align-items:flex-start; gap:12px; padding:13px 16px;
  border:1px solid var(--line); border-radius:10px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.checkbox-item:hover{ border-color:var(--blue); background:var(--bg-soft); transform:translateY(-2px); }
.checkbox-item:has(:checked){ border-color:var(--blue); background:#EAF3FC; }
.checkbox-item input{ margin-top:4px; width:16px; height:16px; accent-color:var(--blue); flex:none; }
.checkbox-item label{ font-size:14.5px; color:var(--ink); }

/* ===== Cap-grid narrow-column variant (contact page) ===== */
.cap-grid.two-col{ grid-template-columns:1fr 1fr; }
@media (max-width:480px){ .cap-grid.two-col{ grid-template-columns:1fr; } }
/* ===== Cap-grid three-col variant (6-item lists divide evenly) ===== */
.cap-grid.three-col{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .cap-grid.three-col{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .cap-grid.three-col{ grid-template-columns:1fr; } }
/* ===== Cap-grid five-col variant (10-item lists divide evenly) ===== */
.cap-grid.five-col{ grid-template-columns:repeat(5, 1fr); }
@media (max-width:1100px){ .cap-grid.five-col{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:700px){ .cap-grid.five-col{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .cap-grid.five-col{ grid-template-columns:1fr; } }

/* ===== Contact form ===== */
.contact-form-wrap{ max-width:760px; margin:0 auto; }
.form-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:48px; box-shadow:0 24px 60px rgba(15,42,68,0.09);
}
.form-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--blue), var(--green));
}
.form-card .section-head-inline{ margin-top:0; }
.form-card .checkbox-grid{ margin-bottom:36px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--slate); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--line-strong); border-radius:10px; background:#fff; padding:12px 15px; font-family:'Inter',sans-serif;
  font-size:14.5px; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover{ border-color:var(--slate-light); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(28,127,196,0.15);
}
.form-field textarea{ resize:vertical; min-height:110px; }
.form-submit{ margin-top:32px; }
.form-submit .btn{ width:100%; justify-content:center; padding:16px 24px; font-size:13.5px; }
.form-submit .btn:disabled{ opacity:0.65; cursor:not-allowed; }
.form-note{ font-size:13px; color:var(--slate-light); margin-top:16px; text-align:center; }

/* Honeypot field — hidden from sighted users but present in the DOM for spam bots to fill in */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

.form-status{ font-size:14px; margin-top:16px; text-align:center; color:var(--green); }
.form-status.is-error{ color:#C0392B; }
/* ===== Acknowledgement modal dialog (contact form success) ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(11,31,51,0.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  position:relative; background:#fff; border-radius:20px; max-width:440px; width:100%;
  padding:44px 36px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,0.3);
}
.modal-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
  background:#E9F4E1; color:var(--green);
  display:flex; align-items:center; justify-content:center;
}
.modal-icon svg{ width:26px; height:26px; }
.modal-box h3{ font-size:21px; color:var(--navy); margin-bottom:10px; }
.modal-box p{ color:var(--slate); font-size:15.5px; line-height:1.6; }
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px;
  background:none; border:none; font-size:22px; line-height:1;
  color:var(--slate-light); cursor:pointer;
}
.modal-close:hover{ color:var(--ink); }

/* ===== Simple CTA banner (generic reuse for pages without a scripted closing CTA) ===== */
.cta-banner{ background:var(--navy); color:#fff; padding:72px 0; text-align:center; }
.cta-banner .eyebrow{ justify-content:center; }
.cta-banner h2{ color:#fff; font-size:clamp(26px,3vw,34px); margin:16px auto 26px; max-width:640px; }
.cta-banner .btn-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ===== Where We Focus — world map section ===== */
.market-map-section .section-head{ text-align:center; margin:0 auto 48px; max-width:640px; }
.market-map-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.market-map-panel{
  background:#fff; border-radius:16px; padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.world-map-svg{ width:100%; height:auto; display:block; }

.market-legend{ display:flex; flex-direction:column; }
.market-legend-dot{ width:13px; height:13px; border-radius:3px; margin-top:5px; flex-shrink:0; }
.market-legend-home{
  display:flex; align-items:flex-start; gap:14px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  border-radius:10px; padding:16px 18px; margin-bottom:24px;
}
.market-legend-home h3{ color:#fff; font-size:17px; margin-bottom:4px; }
.market-legend-home p{ color:#C3D3E0; font-size:14px; margin:0; line-height:1.5; }
.market-legend-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.market-legend-item{ display:flex; align-items:flex-start; gap:12px; padding:16px 0; border-top:1px solid rgba(255,255,255,0.14); }
.market-legend-item:nth-child(-n+2){ border-top:none; padding-top:0; }
.market-legend-item:nth-child(even){ border-left:1px solid rgba(255,255,255,0.14); padding-left:22px; }
.market-legend-item:nth-child(odd){ padding-right:22px; }
.market-legend-item h3{ color:#fff; font-size:16px; margin-bottom:4px; }
.market-legend-item p{ color:#C3D3E0; font-size:13.5px; margin:0; line-height:1.5; }
@media (max-width:900px){
  .market-map-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .market-legend-grid{ grid-template-columns:1fr; }
  .market-legend-item:nth-child(-n+2){ border-top:1px solid rgba(255,255,255,0.14); padding-top:16px; }
  .market-legend-item:first-child{ border-top:none; padding-top:0; }
  .market-legend-item:nth-child(even){ border-left:none; padding-left:0; }
  .market-legend-item:nth-child(odd){ padding-right:0; }
}

/* ===== Parallax variant (closing CTA on every page) =====
   background-attachment:fixed gives a true CSS parallax without JS; the
   section itself must stay free of any transform or it silently breaks.
   Each page supplies its own image via a .cta-parallax--* modifier below
   (reusing that page's own hero photo, so the page visually bookends). */
.cta-parallax{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center; background-attachment:fixed;
  padding:140px 0;
}
.cta-parallax::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgba(18,81,128,0.82) 0%, rgba(95,168,58,0.72) 100%);
}
.cta-parallax .wrap{ position:relative; z-index:1; }
@media (max-width:768px){
  /* background-attachment:fixed is unreliable on mobile browsers (and can
     cause jank on iOS Safari) — scroll normally with the page instead */
  .cta-parallax{ background-attachment:scroll; }
}

.cta-parallax--about{ background-image:url('../images/sector-india-industrial.jpg'); }
.cta-parallax--market-entry{ background-image:url('../images/hero-market-entry-bg.jpg'); }
.cta-parallax--representation{ background-image:url('../images/hero-representation-bg.jpg'); }
.cta-parallax--project-dev{ background-image:url('../images/hero-project-dev-bg.jpg'); }
.cta-parallax--tech-scouting{ background-image:url('../images/hero-tech-scouting-bg.jpg'); }
.cta-parallax--industries{ background-image:url('../images/hero-industries-bg.jpg'); }
.cta-parallax--partner{ background-image:url('../images/hero-partner-bg.jpg'); }
.cta-parallax--insights{ background-image:url('../images/hero-insights-bg.jpg'); }
.cta-parallax--solutions{ background-image:url('../images/hero-industries-bg.jpg'); }

/* ===== Responsive additions ===== */
@media (max-width:980px){
  .info-grid{ grid-template-columns:1fr 1fr; }
  .challenge-grid{ grid-template-columns:1fr; gap:40px; }
  .vision-grid{ grid-template-columns:1fr; max-width:480px; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .checkbox-grid{ grid-template-columns:1fr; }
  .checkbox-item:nth-child(2){ border-top:1px solid var(--line); }
}
@media (max-width:560px){
  .bullet-list{ grid-template-columns:1fr; }
  .bullet-list li:nth-child(-n+2){ border-top:1px solid var(--line); }
  .bullet-list li:first-child{ border-top:none; }
  .info-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .form-card{ padding:24px; }
  .page-hero-inner{ padding:32px 0 20px; }
}

/* ===== Page hero background images (per-page, no inline styles) ===== */
.hero-about{ background-image:url('../images/hero-about-bg.jpg'); }
.hero-market-entry{ background-image:url('../images/hero-market-entry-bg.jpg'); }
.hero-representation{ background-image:url('../images/hero-representation-bg.jpg'); }
.hero-project-dev{ background-image:url('../images/hero-project-dev-bg.jpg'); }
.hero-tech-scouting{ background-image:url('../images/hero-tech-scouting-bg.jpg'); }
.hero-industries{ background-image:url('../images/hero-industries-bg.jpg'); }
.hero-partner{ background-image:url('../images/hero-partner-bg.jpg'); }
.hero-insights{ background-image:url('../images/hero-insights-bg.jpg'); }
.hero-contact{ background-image:url('../images/hero-contact-bg.jpg'); }
.hero-solutions{ background-image:url('../images/hero-industries-bg.jpg'); }

/* ===== Small measure utility (avoids one-off inline max-width styles) ===== */
.measure-md{ max-width:640px; }

/* ===== Contact page spacing utilities (avoid inline styles) ===== */
.section-head-tight{ margin-bottom:32px; }
.section-head-inline{ margin:40px 0 20px; max-width:none; }

/* ===== Generic centered section-head variant ===== */
.section-head-center{ text-align:center; margin:0 auto 8px; max-width:640px; }
.section-head-center .eyebrow{ justify-content:center; }

/* ===== Solutions page: intro pull-quote ===== */
.solutions-quote{ max-width:740px; margin:0 auto; padding:0 20px; text-align:center; border:none; }
.solutions-quote .quote-mark{
  display:block; font-family:'Libre Franklin', sans-serif; font-size:72px; line-height:1;
  font-weight:800; margin-bottom:12px;
  background:linear-gradient(90deg, var(--blue), var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.solutions-quote p{
  font-family:'Libre Franklin', sans-serif; font-size:clamp(20px,2.3vw,26px); font-weight:600;
  color:var(--navy); line-height:1.55; margin-bottom:18px;
}
.solutions-quote .quote-note{
  font-family:'Inter', sans-serif; font-weight:400; font-size:15.5px; color:var(--slate); line-height:1.6; margin-bottom:0;
}

/* ===== Contact page: "Whether You Are" intro section ===== */
.contact-intro{ text-align:center; }
.contact-intro .section-head{ max-width:720px; margin:0 auto 8px; }
.contact-intro .eyebrow{ justify-content:center; }
.contact-intro .statement{ font-size:19px; color:var(--navy); font-weight:600; margin-bottom:0; }
.contact-intro .about-grid{ margin-top:32px; text-align:left; }
.contact-intro .closing-line{
  font-size:19px; font-weight:600; color:var(--navy); line-height:1.5;
  position:relative; padding-top:28px; margin-top:40px;
}

.contact-form-head{ text-align:center; margin:0 auto 8px; }
.contact-form-head .eyebrow{ justify-content:center; }

/* ===== Contact page: registered office / phone / email section ===== */
.contact-details-section .why-card p a{ color:var(--ink); font-weight:600; }
.contact-details-section .why-card p a:hover{ color:var(--blue); }
.contact-intro .closing-line::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:40px; height:3px; background:linear-gradient(90deg, var(--blue), var(--green));
}

/* ===== Floating "Send a Message" chat button + quick contact popup ===== */
.chat-fab{
  position:fixed; right:28px; bottom:28px; z-index:200;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:#fff; border:none; border-radius:999px;
  padding:15px 22px; font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; box-shadow:0 8px 24px rgba(15,42,68,0.25);
  transition:background .2s ease, transform .2s ease;
}
.chat-fab:hover{ background:#4E8F2F; transform:translateY(-2px); }
.chat-fab svg{ width:18px; height:18px; flex:none; }

.chat-popup{
  position:fixed; right:28px; bottom:96px; z-index:200;
  width:340px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid var(--line); box-shadow:0 16px 48px rgba(15,42,68,0.22);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.chat-popup.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.chat-popup-head{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--navy); color:#fff; padding:16px 20px;
}
.chat-popup-head span{ font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:15px; }
.chat-popup-close{
  background:none; border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; padding:2px 4px;
}
.chat-popup-form{ padding:20px; display:flex; flex-direction:column; gap:14px; }
.chat-popup-form .form-field label{ font-size:11.5px; }
.chat-popup-form .form-field input, .chat-popup-form .form-field textarea{ font-size:14px; }
.chat-popup-form .form-field textarea{ min-height:80px; }
.chat-popup-submit{ width:100%; justify-content:center; }
.chat-popup-form .form-note{ margin-top:0; }
.chat-popup-success{ padding:32px 20px; text-align:center; }
.chat-popup-success p{ color:var(--ink); font-size:15px; }

@media (max-width:560px){
  .chat-fab{ right:16px; bottom:16px; padding:13px 18px; font-size:13px; }
  .chat-popup{ right:16px; bottom:82px; }
}

/* ===== Floating WhatsApp button (present on every page) ===== */
.whatsapp-fab{
  position:fixed; right:28px; bottom:28px; z-index:210;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; box-shadow:0 8px 24px rgba(15,42,68,0.25);
  transition:background .2s ease, transform .2s ease;
}
.whatsapp-fab:hover{ background:#1DA851; transform:translateY(-2px); }
.whatsapp-fab svg{ width:30px; height:30px; flex:none; }
/* Raised variant: used on pages that also show the "Send a Message" chat-fab,
   so the two floating buttons stack without overlapping. */
.whatsapp-fab.is-raised{ bottom:100px; }

@media (max-width:560px){
  .whatsapp-fab{ right:16px; bottom:16px; width:50px; height:50px; }
  .whatsapp-fab svg{ width:26px; height:26px; }
  .whatsapp-fab.is-raised{ bottom:78px; }
}

/* ===== Floating social media rail (homepage only) ===== */
.social-fab-rail{
  position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:200;
  display:flex; flex-direction:column; gap:12px;
}
.social-fab{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 6px 18px rgba(15,42,68,0.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-fab:hover{ transform:translateX(4px) scale(1.06); }
.social-fab svg{ width:20px; height:20px; flex:none; }
.social-fab[hidden]{ display:none; }
.social-fab-linkedin{ background:#0A66C2; }
.social-fab-facebook{ background:#1877F2; }
.social-fab-instagram{ background:linear-gradient(45deg, #F9CE34, #EE2A7B, #6228D7); }

@media (max-width:900px){
  .social-fab-rail{ display:none; }
}
