/* ===========================================================================
   Ethion Tech — site-wide stylesheet
   Shared by index.html and contact.html
   =========================================================================== */

  :root{
    --ink:#021022;
    --deep:#015E78;
    --mid:#178DB0;
    --teal:#41ADD7;
    --mist:#f3f4f8;
    --line:#dde1ea;
    --white:#ffffff;
    --teal-glow: rgba(65,173,215,0.35);
    --teal-soft: rgba(65,173,215,0.14);
    --deep-soft: rgba(1,94,135,0.10);
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  /* League Spartan is intentionally not a token here — it's reserved for
     the "EthionTech" logo wordmark only (.logo, .Tech-style), kept
     deliberately distinct from the heading/body/mono system above. */

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    font-family:var(--font-body);
    background:var(--mist);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}

  .wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:'';
    width:24px;height:1px;
    background:var(--teal);
    display:inline-block;
  }

  h1{
    font-family:var(--font-display);
    line-height:1.05;
    letter-spacing:-0.02em;
  }
  h2{
      font-family: var(--font-display);
  }
  h3,h4{
      font-family: var(--font-display);
  }
  p{
      font-family: "Inter", Sans-Serif;
  }

  /* ---------- NAV ---------- */
  .utility-bar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:101;
    background:var(--ink);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .utility-bar .wrap{
    display:flex;
    gap:24px;
    padding:8px 32px;
  }
  .utility-bar a{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:rgba(255,255,255,0.7);
    transition:color .2s ease;
  }
  .utility-bar a:hover{color:var(--teal);}
  @media(max-width:768px){.utility-bar{display:none;}}

  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    padding:22px 0;
    transition:background .35s ease, padding .35s ease, box-shadow .35s ease, top .35s ease;
  }
  header.scrolled{
    background:rgba(2,16,34,0.92);
    backdrop-filter:blur(10px);
    padding:14px 0;
    box-shadow:0 8px 30px rgba(2,16,34,0.25);
  }
  header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:5px;
    font-family: "League Spartan", sans-serif;
    font-weight:700;
    font-size:32px;
    color:#F3F4F8;
    /*letter-spacing:-0.01em;*/
  }
  .logo img{
  height:56px;
  display:block;
  }
  .logo span{color:var(--teal);}
  nav.navlinks{
    display:flex;
    gap:28px;
  }
    .Tech-style{
      margin:0;
      color: var(--teal);
      font-size: 32px;
      font-family: "League Spartan", Sans-Serif;
      font-weight: 700;
  }
  nav.navlinks a{
    color:rgba(255,255,255,0.78);
    font-size:14px;
    font-weight:500;
    position:relative;
    padding:4px 0;
    transition:color .2s ease;
  }
  nav.navlinks a:hover{color:var(--white);}
  nav.navlinks a::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:0;height:1px;
    background:var(--teal);
    transition:width .25s ease;
  }
  nav.navlinks a:hover::after{width:100%;}
  nav.navlinks a[aria-current="page"]{color:var(--white);}
  nav.navlinks a[aria-current="page"]::after{width:100%;}

  /* ---------- SERVICES DROPDOWN ---------- */
  .nav-dropdown{position:relative;}
  .dropdown-trigger{
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .dropdown-trigger .chevron{transition:transform .2s ease;}
  .nav-dropdown.open .dropdown-trigger .chevron{transform:rotate(180deg);}
  .nav-dropdown.open .dropdown-trigger::after{width:100%;}
  .nav-dropdown.open .dropdown-trigger{color:var(--white);}

  .dropdown-menu{
    position:absolute;
    top:calc(100% + 14px);
    left:0;
    min-width:250px;
    background:rgba(2,16,34,0.98);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:4px;
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    box-shadow:0 24px 40px -16px rgba(0,0,0,0.5);
    z-index:20;
  }
  .dropdown-menu a{
    display:block;
    padding:11px 14px;
    border-radius:8px;
    font-size:13.5px;
    color:rgba(255,255,255,0.78);
  }
  .dropdown-menu a::after{display:none;}
  .dropdown-menu a:hover{background:rgba(255,255,255,0.07);color:var(--white);}

  @media(min-width:860px){
    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown.open .dropdown-menu{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }
  }

  @media(max-width:859px){
    .dropdown-menu{
      position:static;
      display:none;
      opacity:1;
      visibility:visible;
      transform:none;
      background:rgba(255,255,255,0.04);
      border:none;
      box-shadow:none;
      margin:4px 0 8px;
      padding:4px 0 4px 14px;
    }
    .nav-dropdown.open .dropdown-menu{display:block;}
    .dropdown-menu a{
      padding:10px 0;
      border-bottom:none;
      color:rgba(255,255,255,0.65);
      font-size:13.5px;
    }
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border-radius:100px;
    font-size:14px;
    font-weight:600;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--teal);
    color:var(--white);
    box-shadow:0 0 0 0 var(--teal-glow);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -6px var(--teal-glow);
  }
  .btn-lg{
    padding:17px 32px;
    font-size:16px;
  }
  .cta-secondary{
    display:inline-flex;
    align-items:center;
    color:rgba(255,255,255,0.75);
    font-size:14px;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color .2s ease;
  }
  .cta-secondary:hover{color:var(--white);}
  .btn-ghost{
    color:var(--white);
    border:1px solid rgba(255,255,255,0.25);
  }
  .btn-ghost:hover{
    border-color:rgba(255,255,255,0.6);
    transform:translateY(-2px);
  }
  .btn-dark{
    background:var(--ink);
    color:var(--white);
  }
  .btn-dark:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -8px rgba(2,16,34,0.4);
  }

  .navcta{display:none;}
  @media(min-width:860px){.navcta{display:inline-flex;}}

  .mobile-cta{display:none;}

  .menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:var(--white);
    background:rgba(255,255,255,0.08);
    border-radius:8px;
    flex-shrink:0;
    transition:background .2s ease;
  }
  .menu-toggle:hover{background:rgba(255,255,255,0.14);}
  .menu-toggle .icon-close{display:none;}
  .menu-toggle.open .icon-menu{display:none;}
  .menu-toggle.open .icon-close{display:block;}

  @media(max-width:859px){
    .menu-toggle{display:flex;}

    nav.navlinks{
      display:none;
      position:absolute;
      top:calc(100% + 1px);
      left:0;
      right:0;
      flex-direction:column;
      align-items:stretch;
      gap:2px;
      background:rgba(2,16,34,0.98);
      backdrop-filter:blur(10px);
      padding:18px 32px 26px;
      border-top:1px solid rgba(255,255,255,0.08);
      box-shadow:0 24px 40px -20px rgba(0,0,0,0.5);
    }
    nav.navlinks.open{display:flex;}
    nav.navlinks a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
    nav.navlinks a:last-of-type{border-bottom:none;}
    nav.navlinks a::after{display:none;}
    nav.navlinks a.mobile-cta{
      padding:12px 22px;
      border-bottom:none;
      margin-top:16px;
      width:max-content;
    }

    .mobile-cta{display:inline-flex;}
  }

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(circle at 82% 8%, rgba(65,173,215,0.35), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(1,94,135,0.35), transparent 40%),
      var(--ink);
    color:var(--white);
    padding:168px 0 90px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse at 60% 20%, black 0%, transparent 70%);
    pointer-events:none;
  }
  .hero .wrap{position:relative;z-index:2;}

  /* ---------- HERO ORBIT ANIMATION ---------- */
  .hero-orbit-anim{
    position:absolute;
    top:50%;
    right:3%;
    transform:translateY(-50%);
    width:420px;
    z-index:1;
    pointer-events:none;
    opacity:0;
    animation:orbitFadeIn 0.8s ease-out forwards;
  }
  @keyframes orbitFadeIn{to{opacity:1;}}
  .hero-orbit-anim svg{width:100%;height:auto;display:block;}
  @media(max-width:899px){.hero-orbit-anim{display:none;}}
  @media(min-width:1000px){.hero-orbit-anim{width:475px;}}
  @media(min-width:1152px){.hero-orbit-anim{width:560px;}}
  @media(min-width:1250px){.hero-orbit-anim{width:595px;}}
  @media(min-width:1300px){.hero-orbit-anim{width:615px;}}
  @media(min-width:1750px){.hero-orbit-anim{width:825px;}}
  @media(min-width:2150px){.hero-orbit-anim{width:1015px;}}
  @media(min-width:2600px){.hero-orbit-anim{width:1225px;}}
  @media(min-width:3100px){.hero-orbit-anim{width:1460px;}}
  @media(min-width:3720px){.hero-orbit-anim{width:1750px;}}
  @media(min-width:4350px){.hero-orbit-anim{width:2050px;}}

  .ring-inner{
    animation:spinCW 18s linear infinite;
    transform-origin:300px 130px;
  }
  .ring-outer{
    animation:spinCCW 26s linear infinite;
    transform-origin:300px 130px;
  }
  .ring-inner .orbit-counter{
    animation:spinCCW 18s linear infinite;
    transform-box:fill-box;
    transform-origin:center;
  }
  .ring-outer .orbit-counter{
    animation:spinCW 26s linear infinite;
    transform-box:fill-box;
    transform-origin:center;
  }
  @keyframes spinCW{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @keyframes spinCCW{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}

  .orbit-pulse{
    transform-box:fill-box;
    transform-origin:center;
    animation:orbitPulse 2.4s ease-out infinite;
  }
  @keyframes orbitPulse{
    0%{opacity:0.6;transform:scale(0.8);}
    100%{opacity:0;transform:scale(2.6);}
  }

  @media (prefers-reduced-motion: reduce){
    .hero-orbit-anim{opacity:1;animation:none;}
    .ring-inner, .ring-outer, .ring-inner .orbit-counter, .ring-outer .orbit-counter{animation:none;}
    .orbit-pulse{animation:none;opacity:0;}
  }

  .hero-top{
    display:block;
  }
  .hero h1{
    font-size:clamp(40px, 5.2vw, 68px);
    max-width:clamp(300px, 42vw, 530px);
    font-weight:800;
    line-height:0.98;
    letter-spacing:-0.02em;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(100deg, var(--teal) 20%, #7fd4ec 50%, var(--teal) 80%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--teal);
  }
  .hero-sub{
    font-family: var(--font-body);
    max-width:460px;
    font-size:17px;
    line-height:1.6;
    color:rgba(255,255,255,0.68);
    padding-bottom:8px;
    margin-top:24px;
  }
  .hero-actions{
    display:flex;
    gap:14px;
    margin-top:44px;
    flex-wrap:wrap;
  }

  .ticker-strip{
    margin-top:78px;
    border-top:1px solid rgba(255,255,255,0.12);
    border-bottom:1px solid rgba(255,255,255,0.12);
    padding:20px 0;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
  }
  .ticker-track{
    display:inline-flex;
    gap:48px;
    animation:tickerScroll 26s linear infinite;
    font-family:var(--font-mono);
    font-size:13px;
    color:rgba(255,255,255,0.6);
    letter-spacing:0.02em;
  }
  .ticker-track span{color:var(--teal);}
  @keyframes tickerScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  /* ---------- LOGO MARQUEE ---------- */
  .logos-section{
    padding:24px 0 48px;
    background:var(--mist);
    border-bottom:1px solid var(--line);
  }
  .logos-label{
    font-family:var(--font-mono);
    font-size:12px;
    color:#6b7385;
    text-transform:uppercase;
    letter-spacing:0.12em;
    margin-bottom:28px;
  }
  .logos-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:56px;
    margin-top:16px;
  }
  .logos-grid img{
    height:44px;
    width:auto;
    max-width:180px;
    object-fit:contain;
  }
  .marquee-mask{
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .marquee-track{
    display:flex;
    gap:64px;
    width:max-content;
    animation:marquee 30s linear infinite;
  }
  .marquee-track span{
    display:flex;
    align-items:center;
  }
  .marquee-track span img{
    height:60px;
    width:auto;
    max-width:220px;
    object-fit:contain;
  }
  @keyframes marquee{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  /* ---------- STATS BAND ---------- */
  .stats{
    background:linear-gradient(120deg, var(--ink) 0%, var(--deep) 100%);
    color:var(--white);
    padding:36px 0;
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    text-align:center;
  }
  @media(max-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:560px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
  .stat-num{
    font-family:var(--font-display);
    font-size:clamp(16px,1.7vw,22px);
    font-weight:800;
    letter-spacing:-0.01em;
    color:var(--white);
  }
  .stat-num small{font-size:0.5em;color:var(--teal);}

  /* ---------- HOMEPAGE REDESIGN: bolder scale ----------
     Core research finding across Langoor / Trilliant / Innovination / EZ Rankings:
     bigger, more confident type is the recurring differentiator, not new color.
     Scoped to #top (the homepage <main>) so About/Services/Contact are untouched. */
  #top .section-head h2{
    font-size:clamp(34px,4.8vw,56px);
    letter-spacing:-0.015em;
  }
  #top .stat-num{
    font-size:clamp(17px,1.9vw,24px);
  }
  #top .ticker-track{
    font-size:14.5px;
    color:rgba(255,255,255,0.72);
  }
  #top .ticker-track span{
    font-weight:600;
  }
  .stat-label{
    margin-top:4px;
    font-size:11.5px;
    line-height:1.3;
    color:rgba(255,255,255,0.62);
  }

  /* ---------- CASE STUDIES ---------- */
  .case-band{background:var(--ink);}
  .case-row{
    padding:88px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-align:center;
  }
  .case-band .case-row:last-child{border-bottom:none;}
  .case-challenge{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.5);
    margin-bottom:20px;
  }
  .case-client{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(34px,7vw,64px);
    line-height:1.05;
    letter-spacing:-0.02em;
    color:var(--white);
    margin-bottom:20px;
  }
  .case-desc{
    max-width:480px;
    margin:0 auto;
    color:rgba(255,255,255,0.65);
    font-size:15px;
    line-height:1.65;
  }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:120px 0;}
  .about-page section:not(.page-hero){padding:64px 0;}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:64px;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-size:clamp(30px,4vw,48px);
  }
  .section-head-card{
    background:var(--mist);
    border:1px solid var(--line);
    border-radius:24px;
    padding:40px 44px;
  }
  .section-head p{
    max-width:380px;
    color:#565f74;
    font-size:15px;
    font-weight:300;
    line-height:1.6;
    padding-bottom:6px;
  }

  /* ---------- PANEL CARD SYSTEM (About / Values / Contact) ---------- */
  .about-copy p{
    color:#5c6478;
    font-size:15px;
    font-weight:300;
    line-height:1.7;
    margin-bottom:24px;
    max-width:640px;
  }
  /* ---------- SERVICE PAGE: "What's included" — flat, no boxes/photos ---------- */
  .included-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:64px;
    align-items:start;
  }
  @media(max-width:860px){.included-grid{grid-template-columns:1fr;gap:36px;}}
  .included-icon{
    width:40px;height:40px;
    color:var(--teal);
    margin-bottom:22px;
  }
  .included-icon svg{width:100%;height:100%;}
  .included-intro h3{font-size:23px;margin-bottom:14px;letter-spacing:-0.01em;}
  .included-intro p{color:#5c6478;line-height:1.75;font-size:15px;}
  .included-image{
    margin-top:24px;
    border-radius:16px;
    overflow:hidden;
    background:var(--teal-soft);
    aspect-ratio:16/9;
    max-height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .included-image img{width:100%;height:100%;object-fit:cover;display:block;}
  .included-image svg{width:55%;height:auto;color:var(--teal);}

  .split-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  @media(max-width:860px){.split-panel{grid-template-columns:1fr;}}

  .panel{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:44px;
  }
  .panel::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:0;
    background:linear-gradient(90deg, var(--teal), var(--deep));
    transition:height .3s ease;
  }
  .panel:hover::before{height:4px;}
  .panel-dark{
    background:var(--white);
    color:var(--ink);
    border:1px solid var(--line);
    transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .panel-dark:hover{
    background:var(--ink);
    color:var(--white);
    border-color:var(--teal);
    box-shadow:0 20px 44px -20px var(--teal-glow);
  }
  .panel-light{
    background:var(--mist);
    border:1px solid var(--line);
    transition:background-color .35s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .panel-light:hover{
    background:var(--ink);
    border-color:var(--teal);
    transform:translateY(-6px);
    box-shadow:0 20px 40px -16px var(--teal-glow);
  }
  .panel-light:hover .icon-badge{
    background:rgba(255,255,255,0.08);
    color:var(--teal);
  }

  .icon-badge{
    width:56px;height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
    flex-shrink:0;
    transition:background-color .35s ease, color .35s ease;
  }
  .panel-dark .icon-badge{background:var(--ink);color:var(--teal);}
  .panel-dark:hover .icon-badge{background:rgba(255,255,255,0.08);color:var(--teal);}
  .panel-light .icon-badge{background:var(--ink);color:var(--teal);}
  .icon-badge.sm{width:44px;height:44px;border-radius:12px;margin-bottom:18px;}

  .panel-eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:14px;
    font-weight:600;
  }
  .panel h2, .panel h3{margin-bottom:16px;}
  .panel-dark h2, .panel-dark h3, .panel-dark h4{color:var(--ink);transition:color .35s ease;}
  .panel-dark:hover h2, .panel-dark:hover h3, .panel-dark:hover h4{color:var(--white);}
  .panel-light h2, .panel-light h3, .panel-light h4{color:var(--ink);transition:color .35s ease;}
  .panel-light:hover h2, .panel-light:hover h3, .panel-light:hover h4{color:var(--white);}
  .panel p{font-size:15px;font-weight:300;line-height:1.7;}
  .panel-dark p{color:#5c6478;transition:color .35s ease;}
  .panel-dark:hover p{color:rgba(255,255,255,0.72);}
  .panel-light p{color:#5c6478;transition:color .35s ease;}
  .panel-light:hover p{color:rgba(255,255,255,0.72);}

  /* ---------- PANEL: photo variant — image and text as two separate blocks,
     not text overlaid on the photo ---------- */
  .panel-photo{
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .panel-photo-img{
    height:210px;
    flex-shrink:0;
    background-size:cover;
    background-position:center;
    transition:transform .4s ease;
  }
  .panel-photo:hover .panel-photo-img{transform:scale(1.04);}
  .panel-photo-body{
    flex:1;
    padding:32px 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:var(--white);
    transition:background-color .35s ease;
  }
  .panel-photo:hover .panel-photo-body{background:var(--ink);}
  .panel-photo-body h2, .panel-photo-body h3, .panel-photo-body h4{color:var(--ink);transition:color .35s ease;}
  .panel-photo:hover .panel-photo-body h2, .panel-photo:hover .panel-photo-body h3, .panel-photo:hover .panel-photo-body h4{color:var(--white);}
  .panel-photo-body p{color:#5c6478;transition:color .35s ease;}
  .panel-photo:hover .panel-photo-body p{color:rgba(255,255,255,0.72);}
  .panel-photo-body .tag-pill{transition:background-color .35s ease, color .35s ease, border-color .35s ease;}
  .panel-photo:hover .panel-photo-body .tag-pill{background:rgba(255,255,255,0.1);color:var(--white);border-color:rgba(255,255,255,0.22);}
  .panel-photo-body .icon-badge{background:var(--ink);color:var(--teal);}
  .panel-photo:hover .panel-photo-body .icon-badge{background:rgba(255,255,255,0.08);color:var(--teal);}
  .panel-photo-body .feature-list li{transition:border-color .35s ease;}
  .panel-photo-body .feature-list li:first-child{padding-top:0;}
  .panel-photo:hover .panel-photo-body .feature-list li{border-top-color:rgba(255,255,255,0.15);}

  .tag-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
  }
  .tag-pill{
    padding:8px 16px;
    border-radius:100px;
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    background:var(--teal-soft);
    color:var(--teal);
    border:1px solid rgba(65,173,215,0.3);
  }

  .feature-list{list-style:none;margin-top:6px;}
  .feature-list li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px 0;
    border-top:1px solid var(--line);
    transition:border-color .35s ease;
  }
  .panel-dark:hover .feature-list li{border-top:1px solid rgba(255,255,255,0.1);}
  .feature-list li:first-child{border-top:none;padding-top:0;}
  .feature-list .f-icon{
    width:32px;height:32px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:var(--teal);
  }
  .feature-list h4{font-size:15px;margin-bottom:4px;}
  .feature-list p{font-size:13.5px;margin:0;}

  /* ---------- FOUNDER CARDS (About section) — split photo/info layout ---------- */
  .founder-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  @media(max-width:760px){.founder-grid{grid-template-columns:1fr;}}
  .founder-card{
    display:flex;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .founder-card:hover{
    transform:translateY(-8px);
    border-color:var(--teal);
    box-shadow:0 28px 52px -18px var(--teal-glow);
  }
  .founder-photo-panel{
    position:relative;
    flex:0 0 42%;
    height:340px;
    overflow:hidden;
    background:linear-gradient(160deg, var(--ink), var(--deep));
  }
  .founder-photo-panel::before{
    content:'';
    position:absolute;
    top:-30%;left:-30%;
    width:160%;height:160%;
    background:radial-gradient(circle at 50% 30%, var(--teal-glow), transparent 60%);
    transition:opacity .35s ease;
    opacity:0.7;
  }
  .founder-card:hover .founder-photo-panel::before{opacity:1;}
  .founder-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transition:transform .4s ease;
  }
  .founder-card:hover .founder-photo{transform:scale(1.06);}
  .founder-info-panel{
    position:relative;
    flex:1;
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .founder-quote-mark{
    position:absolute;
    top:2px;right:22px;
    font-family:var(--font-display);
    font-size:60px;
    font-weight:700;
    line-height:1;
    color:var(--teal-soft);
    transition:color .3s ease, transform .3s ease;
  }
  .founder-card:hover .founder-quote-mark{
    color:var(--teal);
    transform:scale(1.1);
  }
  .founder-info-panel h3{font-size:20px;margin-bottom:10px;}
  .founder-role-pill{
    display:inline-flex;
    width:fit-content;
    font-family:var(--font-mono);
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--deep);
    background:var(--teal-soft);
    border-radius:100px;
    transition:background .3s ease, color .3s ease;
    padding:6px 14px;
    margin-bottom:16px;
  }
  .founder-card:hover .founder-role-pill{
    background:var(--teal);
    color:var(--white);
  }
  .founder-info-panel p{
    color:#5c6478;
    font-size:14px;
    line-height:1.7;
    font-style:italic;
    margin:0;
  }
  @media(max-width:700px){
    .founder-card{flex-direction:column;}
    .founder-photo-panel{flex:none;height:240px;}
    .founder-quote-mark{top:16px;}
  }

  /* ---------- SERVICE PAGE: "band-grid" What's-included variant — image
     and text as two separate side-by-side blocks, not overlaid ---------- */
  .feature-band{
    border-radius:28px;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    margin-bottom:24px;
  }
  @media(max-width:760px){.feature-band{flex-direction:column;}}
  .feature-band-img{
    width:320px;
    flex-shrink:0;
    background-size:cover;
    background-position:center;
  }
  @media(max-width:760px){.feature-band-img{width:100%;height:200px;}}
  .feature-band-body{
    background:var(--ink);
    color:var(--white);
    padding:48px;
    display:flex;
    align-items:center;
    gap:24px;
    flex:1;
  }
  @media(max-width:520px){.feature-band-body{flex-direction:column;align-items:flex-start;text-align:left;}}
  .feature-band .icon-badge{background:rgba(255,255,255,0.08);color:var(--teal);margin-bottom:0;flex-shrink:0;}
  .feature-band h3{color:var(--white);margin-bottom:10px;}
  .feature-band p{color:rgba(255,255,255,0.68);font-size:15px;line-height:1.7;margin:0;max-width:560px;}

  /* ---------- SERVICE PAGE: "cards-grid" banner photo ---------- */
  .feature-banner{
    height:220px;
    border-radius:20px;
    background-size:cover;
    background-position:center;
    margin-bottom:32px;
  }

  /* ---------- SERVICE PAGE: "Our approach" text + photo ---------- */
  .approach-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    align-items:center;
  }
  @media(max-width:760px){.approach-grid{grid-template-columns:1fr;}}
  .approach-photo{
    aspect-ratio:16/10;
    max-height:260px;
    border-radius:20px;
    background-size:cover;
    background-position:center;
  }
  .feature-card-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media(max-width:700px){.feature-card-grid{grid-template-columns:1fr;}}
  .feature-card{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    transition:transform .3s ease;
  }
  .feature-card:hover{transform:translateY(-4px);box-shadow:none;border-color:transparent;}
  .feature-card .f-icon{
    width:48px;height:48px;
    border-radius:0;
    background:transparent;
    color:var(--teal);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .feature-card h4{font-size:15.5px;margin-bottom:6px;}
  .feature-card p{font-size:13.5px;color:#5c6478;margin:0;line-height:1.6;}

  /* ---------- SERVICE PAGE: "cards-grid" What's-included variant (no dark panel) ---------- */
  .feature-intro{max-width:680px;margin-bottom:32px;}
  .feature-intro p{font-size:16px;line-height:1.75;color:#3a4152;}
  .feature-card-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
  @media(max-width:960px){.feature-card-row{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.feature-card-row{grid-template-columns:1fr;}}

  /* ---------- VALUES BAND (dark, centered) ---------- */
  .values-band{
    background:
      linear-gradient(160deg, rgba(2,16,34,0.88), rgba(2,16,34,0.94)),
      url('photos/photo-1572021335469-31706a17aaef-1600.jpg') center/cover no-repeat;
    color:var(--white);
  }
  .values-band .section-head{text-align:center;justify-content:center;flex-direction:column;align-items:center;}
  .values-band .section-head .eyebrow{justify-content:center;}
  .values-band .section-head p{max-width:520px;color:rgba(255,255,255,0.6);}
  .values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  @media(max-width:760px){.values-grid{grid-template-columns:1fr;}}
  .value-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    padding:36px 28px;
    text-align:center;
    transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .value-card:hover{
    background:rgba(255,255,255,0.07);
    border-color:rgba(65,173,215,0.35);
    transform:translateY(-6px);
    box-shadow:0 16px 32px -12px rgba(0,0,0,0.4);
  }
  .value-card .icon-badge{
    margin:0 auto 24px;
    background:var(--teal-soft);
    color:var(--teal);
    transition:background .25s ease, color .25s ease, transform .25s ease;
  }
  .value-card:hover .icon-badge{
    background:var(--teal);
    color:var(--white);
    transform:scale(1.08);
  }
  .value-card h3{color:var(--white);font-size:19px;margin-bottom:10px;}
  .value-card p{color:rgba(255,255,255,0.6);font-size:14px;line-height:1.6;margin:0;}

  /* ---------- PROBLEMS WE SOLVE (gradient icon, big corner number, mini graphic + pill) ---------- */
  .problems-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  @media(max-width:960px){.problems-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.problems-grid{grid-template-columns:1fr;}}
  .problem-card{
    position:relative;
    overflow:hidden;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:18px;
    padding:26px 22px;
    box-shadow:0 14px 32px -18px rgba(2,16,34,0.25);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .problem-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, var(--teal), var(--deep));
  }
  .problem-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 44px -20px rgba(2,16,34,0.22);
    border-color:transparent;
  }
  .problem-num{
    position:absolute;
    top:14px;right:18px;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:38px;
    color:var(--mist);
    -webkit-text-stroke:1px var(--line);
    line-height:1;
    z-index:0;
  }
  .problem-icon{
    position:relative;
    z-index:1;
    width:52px;height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    background:linear-gradient(135deg, var(--teal), var(--deep));
    box-shadow:0 10px 24px -8px var(--teal-glow);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .problem-card:hover .problem-icon{
    transform:scale(1.08) rotate(-4deg);
    box-shadow:0 14px 28px -6px var(--teal-glow);
  }
  .problem-card h4{position:relative;z-index:1;font-size:17px;margin-bottom:8px;}
  .problem-card p{position:relative;z-index:1;font-size:14px;color:#5c6478;line-height:1.6;margin:0;}
  .problem-card p mark{
    background:var(--teal-soft);
    color:var(--deep);
    font-weight:600;
    padding:1px 4px;
    border-radius:4px;
  }
  .problem-graphic{margin:16px 0 14px;opacity:0.9;}
  .problem-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    font-weight:600;
    color:var(--deep);
    background:var(--teal-soft);
    border-radius:100px;
    padding:7px 14px;
  }
  .problem-pill span, .why-row-pill span{
    display:inline-flex;
    flex-shrink:0;
  }
  .problem-link{margin-top:16px;display:inline-flex;}

  /* ---------- WHY ETHION TECH (horizontal row list) ---------- */
  .why-list{display:flex;flex-direction:column;}
  .why-row{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:28px;
    padding:30px 12px;
    border-top:1px solid var(--line);
    transition:background .3s ease, padding-left .3s ease;
  }
  .why-list .why-row:last-child{border-bottom:1px solid var(--line);}
  .why-row::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:0;height:100%;
    background:linear-gradient(180deg, var(--teal), var(--deep));
    transition:width .3s ease;
  }
  .why-row:hover{background:var(--mist);padding-left:24px;}
  .why-row:hover::before{width:4px;}
  .why-row-left{display:flex;align-items:center;gap:18px;}
  .why-icon{
    width:56px;height:56px;
    flex-shrink:0;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--teal), var(--deep));
    box-shadow:0 10px 24px -10px var(--teal-glow);
    transition:transform .3s ease;
  }
  .why-row:hover .why-icon{transform:scale(1.08) rotate(-4deg);}
  .why-num{
    font-family:var(--font-mono);
    font-size:14px;
    font-weight:600;
    color:#8a91a3;
  }
  .why-row-content h4{font-size:19px;margin-bottom:6px;}
  .why-row-content p{font-size:14.5px;color:#5c6478;line-height:1.6;margin:0;max-width:520px;}
  .why-row-content p mark{
    background:var(--teal-soft);
    color:var(--deep);
    font-weight:600;
    padding:1px 4px;
    border-radius:4px;
  }
  .why-row-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    font-weight:600;
    color:var(--deep);
    background:var(--teal-soft);
    border-radius:100px;
    padding:8px 16px;
    white-space:nowrap;
  }
  @media(max-width:760px){
    .why-row{grid-template-columns:1fr;gap:16px;padding:26px 6px;}
    .why-row-pill{justify-self:start;}
  }

  /* ---------- SERVICES-HOME BAND (dark, centered — matches VALUES BAND) ---------- */
  #services-home{
    background-color:var(--ink);
    color:var(--white);
  }
  #services-home .services-grid{background:transparent;border:none;gap:24px;}
  #services-home .section-head{text-align:center;justify-content:center;flex-direction:column;align-items:center;}
  #services-home .section-head .eyebrow{justify-content:center;}
  #services-home .section-head p{max-width:520px;color:rgba(255,255,255,0.6);}
  #services-home .service-ribbon{
    position:absolute;
    top:0;right:0;
    padding:7px 16px 7px 14px;
    border-radius:0 13px 0 13px;
    font-family:var(--font-mono);
    font-size:9.5px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--ink);
    background:var(--teal);
    z-index:2;
  }
  #services-home .service-card:has(.service-ribbon) .service-card-top{margin-top:22px;}
  #services-home .service-card{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    padding:26px 26px 30px;
    text-align:left;
    transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  #services-home .service-card:hover{
    background:var(--teal);
    border-color:var(--teal);
    transform:translate(-4px,-4px);
    box-shadow:6px 6px 0 rgba(2,16,34,0.9);
  }
  #services-home .service-card:hover .service-num-badge{background:var(--ink);color:var(--white);}
  #services-home .service-card:hover h3{color:var(--ink);}
  #services-home .service-card:hover .service-divider{background:rgba(2,16,34,0.2);}
  #services-home .service-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:20px;
  }
  #services-home .service-num-badge{
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    background:var(--white);
    padding:5px 10px;
    border-radius:6px;
  }
  #services-home .service-icon-box{
    width:40px;height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1.5px solid rgba(255,255,255,0.25);
    border-radius:9px;
    color:var(--teal);
    transition:border-color .25s ease, background .25s ease;
  }
  #services-home .service-card:hover .service-icon-box{
    border-color:var(--ink);
    background:var(--ink);
    color:var(--teal);
  }
  #services-home .service-card h3{color:var(--white);font-size:19px;margin-bottom:10px;}
  #services-home .service-card .service-desc{color:rgba(255,255,255,0.6);}
  #services-home .service-card:hover .service-desc{color:rgba(2,16,34,0.75);}
  #services-home .service-divider{
    height:1px;
    background:rgba(255,255,255,0.14);
    margin:20px 0 16px;
  }
  #services-home .service-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  #services-home .service-chip{
    font-size:12px;
    color:rgba(255,255,255,0.7);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:7px;
    padding:6px 10px;
    transition:border-color .25s ease, color .25s ease;
  }
  #services-home .service-card:hover .service-chip{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--teal);
  }
  #services-home .service-card .service-link{color:var(--teal);justify-content:flex-start;margin-top:18px;}
  #services-home .service-card:hover .service-link{color:var(--ink);}

  /* ---------- SERVICES ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media(max-width:860px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.services-grid{grid-template-columns:1fr;}}
  .service-card{
    background:var(--white);
    padding:38px 32px;
    transition:background .25s ease, transform .25s ease;
  }
  .service-card-thumb{
    height:170px;
    margin:-38px -32px 24px -32px;
    background-size:cover;
    background-position:center;
  }
  .service-card:hover{
    background:var(--ink);
    color:var(--white);
  }
  .service-card:hover .service-icon{
    background:var(--teal);
    color:var(--white);
  }
  .service-card:hover .service-desc{color:rgba(255,255,255,0.65);}
  .service-icon{
    width:52px;height:52px;
    border-radius:14px;
    background:var(--deep-soft);
    color:var(--deep);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    transition:background .25s ease, color .25s ease;
  }
  .service-card h3{
    font-size:19px;
    margin-bottom:10px;
    font-weight:600;
  }
  .service-desc{
    font-size:14px;
    line-height:1.6;
    color:#5c6478;
    transition:color .25s ease;
  }
  .service-checklist{
    list-style:none;
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .service-checklist li{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    color:#5c6478;
    transition:color .25s ease;
  }
  .service-checklist li::before{
    content:'';
    width:16px;height:16px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--teal-soft);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2341ADD7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size:10px;
    background-position:center;
    background-repeat:no-repeat;
    transition:background-color .25s ease;
  }
  .service-card:hover .service-checklist li{color:rgba(255,255,255,0.6);}
  .service-card .service-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:20px;
    font-size:13.5px;
    font-weight:600;
    color:var(--deep);
    transition:color .25s ease;
  }
  .service-card:hover .service-link{color:var(--teal);}

  /* ---------- TRANSFORM CAROUSEL ---------- */
  .transform-band{
    background:var(--teal);
    padding:80px 0;
    overflow:hidden;
  }
  .transform-band .section-head{margin-bottom:44px;}
  #top .transform-band .section-head h2{
    color:var(--ink);
    font-size:clamp(26px,3.2vw,38px);
    max-width:640px;
  }
  .transform-carousel{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .transform-track-mask{
    overflow:hidden;
    flex:1;
    min-width:0;
  }
  .transform-track{
    display:flex;
    gap:24px;
    transition:transform .45s ease;
  }
  .transform-card{
    flex:0 0 calc((100% - 48px)/3);
    min-width:0;
    background:var(--white);
    border-radius:20px;
    padding:36px 24px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  .transform-icon{
    width:60px;height:60px;
    border-radius:16px;
    background:var(--teal-soft);
    color:var(--deep);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .transform-card h3{
    font-size:16px;
    color:var(--ink);
  }
  .transform-arrow{
    width:44px;height:44px;
    border-radius:50%;
    background:var(--white);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 8px 20px -8px rgba(2,16,34,0.3);
  }
  .transform-arrow:hover{transform:scale(1.08);}
  @media(max-width:860px){.transform-card{flex-basis:calc((100% - 24px)/2);}}
  @media(max-width:560px){.transform-card{flex-basis:100%;}}

  /* ---------- WORK / PROJECTS ---------- */
  .work-list{display:flex;flex-direction:column;}
  .work-row{
    display:grid;
    grid-template-columns:1.1fr 1.4fr auto;
    align-items:center;
    gap:28px;
    padding:34px 0;
    border-top:1px solid var(--line);
    transition:padding .3s ease;
  }
  .work-list .work-row:last-child{border-bottom:1px solid var(--line);}
  @media(max-width:760px){
    .work-row{grid-template-columns:1fr;gap:14px;padding:28px 0;}
  }
  .work-thumb{
    width:100%;
    aspect-ratio:16/10;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:16px;
  }
  .work-thumb::after{
    content:attr(data-tag);
    font-family:var(--font-mono);
    font-size:11px;
    color:rgba(255,255,255,0.85);
    background:rgba(2,16,34,0.35);
    padding:5px 10px;
    border-radius:100px;
  }
  .work-info h3{
    font-size:24px;
    margin-bottom:8px;
  }
  .work-info p{
    color:#5c6478;
    font-size:14px;
    max-width:420px;
    line-height:1.55;
  }
  .work-meta{
    text-align:right;
    font-family:var(--font-mono);
  }
  @media(max-width:760px){.work-meta{text-align:left;}}
  .work-meta .result{
    font-size:26px;
    color:var(--teal);
    font-weight:500;
  }
  .work-meta .client{
    font-size:12px;
    color:#8a91a3;
    margin-top:4px;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }

  /* ---------- COLLABS ---------- */
  .collab-band{
    background:var(--ink);
    color:var(--white);
  }
  .collab-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.1);
    margin-top:20px;
  }
  @media(max-width:760px){.collab-grid{grid-template-columns:repeat(2,1fr);}}
  .collab-tile{
    background:var(--ink);
    padding:34px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
    transition:background .25s ease;
  }
  .collab-tile:hover{background:#081a34;}
  .collab-tile .badge-name{
    font-family:var(--font-display);
    font-weight:600;
    font-size:19px;
  }
  .collab-tile .badge-type{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .collab-band .section-head h2, .collab-band .section-head p{color:var(--white);}
  .collab-band .section-head p{color:rgba(255,255,255,0.55);}

  /* ---------- CONTENT WALL: live embeds (YouTube/Instagram/TikTok/Facebook) ---------- */
  .wall-embeds{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,280px));
    justify-content:start;
    width:max-content;
    max-width:100%;
    gap:20px;
    margin-bottom:28px;
  }
  .wall-embed-card{display:flex;flex-direction:column;gap:10px;}
  .wall-embed-frame{
    position:relative;
    width:100%;
    max-width:100%;
    border-radius:16px;
    overflow:hidden;
    background:var(--ink);
  }
  .wall-embed-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }
  .wall-embed-frame video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .wall-embed-caption{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:12px;
    color:#5c6478;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .wall-embed-caption .platform-icon{width:18px;height:18px;flex-shrink:0;}
  .wall-embed-metric{margin-left:auto;color:var(--teal);font-weight:600;text-transform:none;}

  /* ---------- CONTENT WALL (signature) ---------- */
  .contentwall{background:var(--mist);}
  .wall-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:130px;
    gap:14px;
  }
  @media(max-width:860px){.wall-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;}}
  .wall-tile{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:var(--white);
    cursor:pointer;
    isolation:isolate;
  }
  .wall-tile{text-decoration:none;}
  .wall-tile .platform-row{
    display:flex;
    align-items:center;
    gap:7px;
    width:fit-content;
    background:rgba(2,16,34,0.55);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    padding:6px 12px 6px 6px;
    border-radius:100px;
  }
  .wall-tile .platform-icon{
    width:20px;height:20px;
    flex-shrink:0;
    display:flex;
  }
  .wall-tile .platform-icon svg{width:100%;height:100%;display:block;}
  .wall-tile .platform{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    opacity:1;
  }
  .wall-tile .format{
    font-family:var(--font-display);
    font-weight:600;
    font-size:17px;
  }
  .wall-tile .metric{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    background:rgba(2,16,34,0.78);
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
    text-align:center;
    padding:12px;
  }
  .wall-tile:hover .metric{opacity:1;transform:translateY(0);}
  .wall-tile .metric .num{
    font-family:var(--font-mono);
    font-size:24px;
    color:var(--teal);
  }
  .wall-tile .metric .label{
    font-size:11px;
    color:rgba(255,255,255,0.7);
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .span-2{grid-column:span 2;}

  /* ---------- SOCIAL BADGES (plain follow-us links, no metric data) ---------- */
  .social-badges{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:14px;
  }
  .social-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    width:104px;
    height:104px;
    border-radius:24px;
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .social-badge:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(2,16,34,0.14);}
  .social-badge .platform-icon{width:68px;height:68px;}
  .row-2{grid-row:span 2;}

  /* ---------- PROCESS ---------- */
  .process-band{background:var(--ink);}
  .process-band .section-head h2{color:var(--white);}
  .process-band .section-head p{color:rgba(255,255,255,0.55);}
  .process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
  }
  @media(max-width:860px){.process-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.process-grid{grid-template-columns:1fr;}}
  .process-step{
    position:relative;
    padding:24px 22px 28px;
    border-top:2px solid rgba(255,255,255,0.15);
    border-radius:0;
    background:transparent;
    transition:border-color .25s ease, transform .25s ease;
  }
  .process-step:hover{
    border-top-color:var(--teal);
    transform:translateY(-6px);
  }
  .process-icon{
    width:48px;height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ink);
    border:2px solid rgba(65,173,215,0.4);
    color:var(--teal);
    margin-bottom:20px;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .process-step:hover .process-icon{
    background:var(--teal);
    border-color:var(--teal);
    color:var(--ink);
    transform:scale(1.08);
  }
  @media(min-width:861px){
    .process-step:not(:nth-child(4))::after{
      content:'';
      position:absolute;
      top:48px;
      right:-15px;
      width:10px;height:10px;
      border-top:2px solid rgba(255,255,255,0.25);
      border-right:2px solid rgba(255,255,255,0.25);
      transform:rotate(45deg);
    }
  }
  .process-step:hover .pnum{color:var(--teal);}
  .process-step .pnum{
    font-family:var(--font-mono);
    color:var(--teal);
    font-size:13px;
    margin-bottom:16px;
    display:block;
    transition:color .25s ease;
  }
  .process-step h3{
    font-size:19px;
    margin-bottom:10px;
    color:var(--white);
  }
  .process-step p{
    font-size:14px;
    color:rgba(255,255,255,0.68);
    line-height:1.6;
  }
  .process-step .includes-label{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--white);
    margin-top:18px;
    font-weight:600;
  }
  .process-step .service-checklist{margin-top:10px;}
  .process-step .service-checklist li{color:rgba(255,255,255,0.65);}
  .process-step .service-checklist li::before{background-color:rgba(65,173,215,0.25);}

  /* ---------- TESTIMONIALS ---------- */
  .testimonials{background:var(--mist);padding:64px 0;}
  .testimonials .section-head{margin-bottom:24px;}
  .test-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  @media(max-width:900px){.test-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.test-grid{grid-template-columns:1fr;}}
  .test-card{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .test-quote{
    font-size:15.5px;
    line-height:1.65;
    color:#232a3b;
  }
  .test-person{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:auto;
  }

  /* ---------- FAQ ---------- */
  #faq .wrap{position:relative;}
  .faq-list{max-width:760px;}
  .faq-graphic{
    position:absolute;
    top:169px;
    right:0;
    width:340px;
    height:652px;
    pointer-events:none;
  }
  @media(max-width:1249px){.faq-graphic{display:none;}}
  .faq-item{
    position:relative;
    border-top:1px solid var(--line);
    padding:22px 0 22px 18px;
    margin-left:-18px;
    transition:background-color .25s ease, padding-left .25s ease, margin-left .25s ease;
  }
  .faq-list .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-item::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:3px;height:100%;
    background:var(--teal);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .25s ease;
  }
  .faq-item:hover{background:var(--mist);}
  .faq-item:hover::before{transform:scaleY(1);}
  .faq-item summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:16px;
    color:var(--ink);
    transition:color .25s ease;
  }
  .faq-item:hover summary{color:var(--deep);}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+';
    font-size:22px;
    font-weight:400;
    line-height:1;
    color:var(--teal);
    flex-shrink:0;
    transition:transform .2s ease, color .25s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item:hover summary::after{color:var(--deep);}
  .faq-item p{
    margin-top:14px;
    font-size:14.5px;
    line-height:1.6;
    color:#5c6478;
    max-width:640px;
  }
  .avatar{
    width:42px;height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
    flex-shrink:0;
  }
  .person-meta .pname{font-size:14px;font-weight:600;}
  .person-meta .prole{font-size:12.5px;color:#7a8194;}

  /* ---------- TEAM ---------- */
  .team-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  @media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.team-grid{grid-template-columns:1fr;}}
  .team-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:30px 24px;
    text-align:center;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .team-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -18px rgba(2,16,34,0.16);
    border-color:rgba(65,173,215,0.35);
  }
  .team-avatar{
    width:84px;height:84px;
    border-radius:50%;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-display);
    font-weight:700;
    font-size:24px;
    color:var(--white);
  }
  .team-card h3{font-size:16px;margin-bottom:4px;}
  .team-role{
    font-family:var(--font-mono);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--teal);
    margin-bottom:12px;
  }
  .team-bio{font-size:13.5px;color:#5c6478;line-height:1.6;}

  /* ---------- CTA BAND ---------- */
  .ctaband{
    background:var(--ink);
    color:var(--white);
    padding:110px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .ctaband::before{
    content:'';
    position:absolute;
    width:600px;height:600px;
    background:radial-gradient(circle, var(--teal-glow), transparent 70%);
    top:-300px;left:50%;
    transform:translateX(-50%);
    pointer-events:none;
  }
  .ctaband .wrap{position:relative;z-index:2;}
  .ctaband h2{
    font-size:clamp(32px,5vw,56px);
    max-width:720px;
    margin:0 auto 30px;
  }
  .ctaband .btn{margin:0 auto;width:max-content;}
  .ctaband-compact{padding:60px 0;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:rgba(255,255,255,0.6);
    padding:56px 0 30px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:40px;
    padding-bottom:40px;
  }
  .footer-cols{
    display:flex;
    gap:44px;
    flex-wrap:wrap;
    margin-left:auto;
  }
  .footer-col h4{
    font-family:var(--font-mono);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--teal);
    margin-bottom:16px;
    font-weight:400;
  }
  .footer-col h4 a{display:inline;padding:0;color:inherit;text-decoration:none;font-size:inherit;text-transform:inherit;letter-spacing:inherit;font-family:inherit;}
  .footer-col h4 a:hover{color:var(--white);}
  .footer-col a{
    display:block;
    font-size:14px;
    padding:5px 0;
    color:rgba(255,255,255,0.65);
    transition:color .2s ease;
  }
  .footer-col a:hover{color:var(--white);}
  .footer-col-social a{display:flex;align-items:center;gap:9px;}
  .social-icon{flex-shrink:0;opacity:0.85;}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:12.5px;
    color:rgba(255,255,255,0.55);
    flex-wrap:wrap;
    gap:12px;
  }

  /* ---------- REVEAL ---------- */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{opacity:1;transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .marquee-track, .ticker-track{animation:none;}
    .reveal{opacity:1;transform:none;transition:none;}
    *{transition-duration:0.01ms !important;}
  }

  :focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
  }
  /* PAGE HEADER */
  .page-hero{
    background:
      radial-gradient(circle at 82% 8%, rgba(65,173,215,0.35), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(1,94,135,0.35), transparent 40%),
      var(--ink);
    color:var(--white);
    padding:168px 0 90px;
    min-height:540px;
    display:flex;
    align-items:center;
  }
  .page-hero > .wrap{width:100%;}
  @media(max-width:700px){.page-hero{min-height:460px;}}
  .page-hero h1{font-size:clamp(42px,6.6vw,80px);font-weight:800;letter-spacing:-0.02em;line-height:1.02;max-width:720px;}
  .page-hero p{max-width:480px;margin-top:18px;font-size:16px;line-height:1.6;color:rgba(255,255,255,0.68);}

  /* CONTACT LAYOUT */
  .contact-section{padding:100px 0;}
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:64px;
    align-items:start;
  }
  @media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}

  .contact-info h2{font-size:28px;margin-bottom:18px;}
  .contact-info p{color:#5c6478;font-size:15px;line-height:1.6;margin-bottom:36px;}
  .info-row{
    display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line);
  }
  .info-row:last-child{border-bottom:1px solid var(--line);}
  .info-icon{
    width:38px;height:38px;border-radius:10px;background:var(--deep-soft);color:var(--deep);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .info-row h4{font-size:14px;margin-bottom:4px;}
  .info-row p{font-size:14px;color:#5c6478;margin:0;}
  .info-row a{color:var(--deep);font-weight:600;}
  .info-row a:hover{color:var(--teal);}

  /* FORM */
  .contact-form{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px;
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media(max-width:560px){.form-row{grid-template-columns:1fr;}}
  .field{margin-bottom:22px;}
  .field label{
    display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--ink);
  }
  .field input, .field textarea, .field select{
    width:100%;
    padding:13px 16px;
    border:1px solid var(--line);
    border-radius:10px;
    font-family:var(--font-body);
    font-size:14px;
    color:var(--ink);
    background:var(--mist);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field textarea{resize:vertical;min-height:130px;}
  .field input:focus, .field textarea:focus, .field select:focus{
    outline:none;
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(65,173,215,0.15);
    background:var(--white);
  }
  .field.required label::after{
    content:' *';
    color:var(--teal);
  }
  .form-note{
    font-size:12.5px;
    color:#8a91a3;
    margin-top:14px;
  }
  .form-status{
    display:none;
    margin-top:18px;
    padding:14px 16px;
    border-radius:10px;
    font-size:14px;
  }
  .form-status.success{
    display:block;
    background:rgba(65,173,215,0.1);
    color:var(--deep);
    border:1px solid rgba(65,173,215,0.3);
  }
  .form-status.error{
    display:block;
    background:rgba(200,40,40,0.08);
    color:#a32a2a;
    border:1px solid rgba(200,40,40,0.25);
  }
  .submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}

  /* ---------- GET A QUOTE MODAL ---------- */
  .quote-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(2,16,34,0.72);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:200;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .quote-modal-overlay.open{opacity:1;visibility:visible;}
  .quote-modal{
    background:var(--white);
    border-radius:20px;
    padding:40px;
    max-width:560px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    position:relative;
    transform:translateY(16px);
    transition:transform .25s ease;
  }
  .quote-modal-overlay.open .quote-modal{transform:translateY(0);}
  .quote-modal h3{font-size:24px;margin-bottom:8px;}
  .quote-modal-sub{color:#5c6478;font-size:14px;margin-bottom:28px;}
  .quote-modal-close{
    position:absolute;top:20px;right:20px;
    width:36px;height:36px;
    border:none;background:var(--mist);border-radius:50%;
    font-size:20px;line-height:1;color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background-color .2s ease;
  }
  .quote-modal-close:hover{background:var(--teal-soft);}
  @media(max-width:560px){.quote-modal{padding:28px 24px;}}

  /* ---------- PORTFOLIO ---------- */
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  @media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.portfolio-grid{grid-template-columns:1fr;}}
  .portfolio-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .portfolio-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 32px rgba(2,16,34,0.1);
  }
  .portfolio-card-thumb{
    aspect-ratio:16/10;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding:16px;
  }
  .portfolio-card-thumb::after{
    content:attr(data-tag);
    font-family:var(--font-mono);
    font-size:11px;
    color:rgba(255,255,255,0.85);
    background:rgba(2,16,34,0.35);
    padding:5px 10px;
    border-radius:100px;
  }
  .portfolio-card-body{padding:26px;}
  .portfolio-card-body .eyebrow{margin-bottom:10px;}
  .portfolio-card-body h3{font-size:19px;margin-bottom:10px;}
  .portfolio-card-body p{font-size:14px;line-height:1.6;color:#5c6478;}
  .portfolio-card-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:16px;
    font-size:13.5px;
    font-weight:600;
    color:var(--deep);
  }
  .portfolio-card:hover .portfolio-card-link{color:var(--teal);}

  .filter-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:32px;
  }
  .filter-tab{
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
    background:var(--white);
    border:1px solid var(--line);
    border-radius:100px;
    padding:9px 20px;
    cursor:pointer;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .filter-tab:hover{border-color:var(--teal);}
  .filter-tab.active{background:var(--ink);border-color:var(--ink);color:var(--white);}

  /* ---------- BLOG POST BODY (Quill-authored) ---------- */
  .post-body{max-width:720px;margin:0 auto;font-size:16px;line-height:1.75;color:var(--ink);}
  .post-body h2{font-family:var(--font-display);font-size:26px;margin:36px 0 14px;}
  .post-body h3{font-family:var(--font-display);font-size:20px;margin:28px 0 12px;}
  .post-body p{margin-bottom:18px;}
  .post-body a{color:var(--deep);text-decoration:underline;}
  .post-body a:hover{color:var(--teal);}
  .post-body ul, .post-body ol{margin:0 0 18px 22px;}
  .post-body li{margin-bottom:6px;}
  .post-body blockquote{
    border-left:3px solid var(--teal);
    padding:4px 0 4px 20px;
    margin:24px 0;
    font-style:italic;
    color:#5c6478;
  }
  .post-body pre{
    background:var(--ink);
    color:#e8f3f7;
    padding:18px 20px;
    border-radius:10px;
    overflow-x:auto;
    font-family:var(--font-mono);
    font-size:13.5px;
    margin:20px 0;
  }
  .post-body code{font-family:var(--font-mono);font-size:0.9em;}
  .post-body img{max-width:100%;border-radius:12px;margin:20px 0;display:block;}

  /* ---------- ABOUT: PHILOSOPHY INTRO ---------- */
  .philosophy-body{
    display:flex;
    align-items:center;
    gap:56px;
    flex-wrap:wrap;
  }
  .philosophy-copy{flex:1 1 420px;max-width:640px;}
  .philosophy-graphic{flex:0 0 240px;max-width:240px;color:var(--teal);}
  @media(max-width:760px){
    .philosophy-body{flex-direction:column;align-items:flex-start;}
    .philosophy-graphic{flex-basis:auto;width:180px;max-width:180px;}
  }

  /* ---------- ABOUT: MISSION & VISION (open layout, no card/box) ---------- */
  .mv-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
  }
  .mv-col + .mv-col{border-left:1px solid var(--line);padding-left:64px;}
  .mv-icon{color:var(--teal);margin-bottom:22px;}
  .mv-eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:10px;
  }
  .mv-col h3{font-size:22px;line-height:1.3;margin-bottom:14px;}
  .mv-col p{font-size:15.5px;line-height:1.75;color:#3a4152;}
  @media(max-width:760px){
    .mv-grid{grid-template-columns:1fr;gap:40px;}
    .mv-col + .mv-col{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:40px;}
  }

  /* ---------- ABOUT: TEAM social link ---------- */
  .team-social{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;height:34px;
    margin-top:16px;
    border-radius:50%;
    background:var(--teal-soft);
    color:var(--teal);
    transition:background-color .2s ease, color .2s ease;
  }
  .team-social:hover{background:var(--teal);color:var(--white);}

  /* ---------- ABOUT: "AT A GLANCE" STAT STRIP ---------- */
  .about-stats{
    display:flex;
    justify-content:center;
    gap:64px;
    margin-top:48px;
    padding-top:40px;
    border-top:1px solid var(--line);
    flex-wrap:wrap;
  }
  .about-stat{text-align:center;}
  .about-stat-num{
    font-family:var(--font-display);
    font-size:clamp(30px,4vw,44px);
    font-weight:700;
    color:var(--teal);
    line-height:1;
  }
  .about-stat-label{
    margin-top:8px;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#5c6478;
  }
  @media(max-width:560px){.about-stats{gap:36px;}}

  /* ---------- ABOUT: VALUES (row list, distinct from Services' card grid) ---------- */
  .value-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:48px;
  }
  @media(max-width:700px){.value-grid{grid-template-columns:1fr;}}
  .value-row{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:26px 0;
    border-top:1px solid var(--line);
  }
  .value-grid > .value-row:nth-child(1),
  .value-grid > .value-row:nth-child(2){border-top:none;}
  .value-row .icon-badge{
    background:var(--teal-soft);
    color:var(--teal);
    margin-bottom:0;
  }
  .value-row h3{font-size:17px;margin-bottom:6px;}
  .value-row p{font-size:14.5px;line-height:1.65;color:#5c6478;margin:0;}

  /* ---------- ABOUT: TEAM (centered when fewer than 4 real members) ---------- */
  .team-grid.count-1{grid-template-columns:repeat(1,1fr);max-width:280px;margin:0 auto;}
  .team-grid.count-2{grid-template-columns:repeat(2,1fr);max-width:600px;margin:0 auto;}
  .team-grid.count-3{grid-template-columns:repeat(3,1fr);}
  @media(max-width:560px){.team-grid.count-2, .team-grid.count-1{grid-template-columns:1fr;}}

  .case-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
    color:rgba(255,255,255,0.75);
    margin-bottom:18px;
  }
  .case-back:hover{color:var(--white);}
  .result-chips{display:flex;flex-wrap:wrap;gap:12px;}
  .result-chip{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px 22px;
    font-family:var(--font-mono);
    font-size:18px;
    color:var(--teal);
    font-weight:500;
  }

  /* ---------- BACK TO TOP ---------- */
  .back-to-top{
    position:fixed;
    bottom:28px;
    right:28px;
    width:48px;height:48px;
    border-radius:50%;
    background:var(--ink);
    color:var(--white);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, background-color .25s ease, visibility .3s ease;
    z-index:60;
    box-shadow:0 10px 24px -8px rgba(2,16,34,0.4);
  }
  .back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
  .back-to-top:hover{background:var(--teal);}
  @media(max-width:560px){.back-to-top{bottom:18px;right:18px;width:44px;height:44px;}}

  /* ---------- SERVICE PAGE: vector-illustrated hero (pages with no photo) ---------- */
  .page-hero-illustrated .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
    flex-wrap:wrap;
  }
  .hero-copy{flex:1 1 420px;}
  .hero-illustration{
    flex:0 0 340px;
    max-width:340px;
    color:var(--teal);
    opacity:0.95;
  }
  @media(max-width:760px){
    .page-hero-illustrated .wrap{flex-direction:column;align-items:flex-start;}
    .hero-illustration{flex-basis:auto;width:220px;max-width:220px;margin-top:8px;}
  }

  /* ---------- SERVICE PAGE: approach stage-flow + third-block detail ---------- */
  .approach-flow-strip{margin-bottom:32px;}
  .flow-chain{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }
  .flow-chain--approach .flow-step{
    background:var(--teal-soft);
    border:1px solid rgba(65,173,215,0.3);
    border-radius:14px;
    padding:18px 22px;
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:110px;
    transition:transform .25s ease, background-color .25s ease;
  }
  .flow-chain--approach .flow-step:hover{background:var(--teal);transform:translateY(-3px);}
  .flow-chain--approach .flow-step:hover .flow-step-num,
  .flow-chain--approach .flow-step:hover .flow-step-label{color:var(--white);}
  .flow-step-num{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:700;
    color:var(--teal);
    transition:color .25s ease;
  }
  .flow-step-label{
    font-family:var(--font-display);
    font-size:14.5px;
    font-weight:600;
    color:var(--ink);
    transition:color .25s ease;
  }
  .flow-chain--approach .flow-connector{color:var(--teal);display:flex;flex-shrink:0;}
  .flow-chain--compact{gap:8px;margin-top:10px;}
  .flow-chain--compact .flow-step{
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
    color:var(--ink);
  }
  .flow-chain--compact .flow-connector{color:var(--teal);display:flex;flex-shrink:0;}
  .test-card-row{display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
  @media(max-width:700px){.test-quote-mark{display:none;}}

  .approach-body{display:flex;align-items:center;gap:48px;flex-wrap:wrap;}
  .approach-copy{flex:1 1 420px;max-width:720px;}
  .approach-graphic{flex:0 0 200px;max-width:200px;color:var(--teal);}
  @media(max-width:760px){.approach-graphic{display:none;}}
  .approach-detail{
    margin-top:44px;
    background:var(--teal-soft);
    border:1px solid rgba(65,173,215,0.3);
    border-radius:16px;
    padding:32px 36px;
  }
  .approach-detail-heading{font-size:clamp(20px,2.6vw,26px);margin-bottom:14px;}
  .approach-detail p{color:#3a4152;line-height:1.7;max-width:640px;margin:0;}
  .dot-list{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 0;
    color:#3a4152;
    font-size:15px;
  }
  .dot-list li{display:flex;align-items:center;}
  .dot-list li:not(:last-child)::after{
    content:'·';
    color:var(--teal);
    font-weight:700;
    margin:0 14px;
  }
  .dot-list--plus li:not(:last-child)::after{content:'+';}
  .dot-list--stacked{flex-direction:column;align-items:flex-start;gap:10px;}
  .dot-list--stacked li{font-size:17px;font-weight:600;color:var(--ink);}
  .dot-list--stacked li:not(:last-child)::after{content:none;}
  @media(max-width:560px){
    .flow-chain--approach .flow-step{padding:12px 16px;}
    .flow-step-num{font-size:11px;}
    .flow-step-label{font-size:13px;}
    .flow-chain--compact .flow-step{font-size:17px;}
  }

  /* ---------- SERVICE PAGE REWORK: breadcrumb, hero CTA, soft-card system ---------- */
  .breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:12px;
    color:rgba(255,255,255,0.5);
    margin-bottom:22px;
  }
  .breadcrumb a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color .2s ease;}
  .breadcrumb a:hover{color:var(--teal);}
  .breadcrumb span[aria-current]{color:rgba(255,255,255,0.85);}

  .hero-cta{margin-top:30px;}

  .soft-card{
    background:var(--teal-soft);
    border:none;
    box-shadow:0 8px 28px -6px rgba(65,173,215,0.28);
    border-radius:14px;
    padding:26px;
    transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  }
  .soft-card:hover{box-shadow:0 14px 34px -8px rgba(65,173,215,0.38);}
  .soft-card-icon{
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--teal) 0%, var(--deep) 100%);
    border-radius:12px;
    color:var(--white);
    padding:10px;
    margin-bottom:18px;
    box-shadow:0 6px 16px -6px rgba(1,94,135,0.45);
  }
  .soft-card-icon svg{width:100%;height:100%;}

  .included-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
  }
  @media(max-width:560px){.included-cards{grid-template-columns:1fr;}}
  .included-cards .soft-card{padding:30px;}
  .included-cards .soft-card:hover{transform:translateY(-3px);}
  .included-cards .soft-card h4{font-size:15.5px;margin-bottom:6px;color:var(--ink);}
  .included-cards .soft-card p{font-size:13.5px;color:#5c6478;margin:0;line-height:1.6;}

  .whofor-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  @media(max-width:700px){.whofor-cards{grid-template-columns:1fr;}}
  .whofor-cards .soft-card{display:flex;gap:14px;align-items:flex-start;padding:22px;}
  .whofor-cards .soft-card-icon{margin-bottom:0;flex-shrink:0;}
  .whofor-cards .soft-card p{margin:0;color:#3a4152;font-size:14.5px;line-height:1.6;}

  .services-grid.related-grid{
    gap:16px;
    background:transparent;
    border:none;
  }
  .service-card.soft-card{
    padding:26px;
    text-align:left;
  }
  .service-card.soft-card:hover{background:var(--teal);transform:translateY(-3px);}
  .service-card.soft-card:hover h3, .service-card.soft-card:hover .service-link{color:var(--white);}

  /* ---------- SERVICE PAGE: extra CTA bands + "what changes" section ---------- */
  .cta-doodle-wrap{
    position:absolute;
    top:24px;left:28px;
    color:rgba(255,255,255,0.16);
    pointer-events:none;
    z-index:1;
  }
  @media(max-width:700px){.cta-doodle-wrap{display:none;}}

  .whatchanges-band{padding:100px 0;}
  .whatchanges-band .section-head{margin-bottom:56px;}
  .whatchanges-band .section-head p{color:#5c6478;margin-top:10px;}
  .whatchanges-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px 40px;
  }
  @media(max-width:860px){.whatchanges-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.whatchanges-grid{grid-template-columns:1fr;}}
  .whatchanges-item{
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .whatchanges-item .soft-card-icon{
    width:44px;height:44px;
    flex-shrink:0;
    margin-bottom:0;
  }
  .whatchanges-item h4{font-size:16px;margin-bottom:5px;color:var(--ink);}
  .whatchanges-item p{font-size:13.5px;color:#5c6478;margin:0;line-height:1.6;}

  /* ---------- HOMEPAGE INTERACTIVITY ---------- */
  @media (hover: hover) and (pointer: fine) {
    #services-home .service-card::after,
    .problem-card::after,
    .founder-info-panel::after{
      content:'';
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(65,173,215,0.16), transparent 65%);
      opacity:0;
      transition:opacity .3s ease;
      pointer-events:none;
    }
    #services-home .service-card:hover::after,
    .problem-card:hover::after,
    .founder-info-panel:hover::after{opacity:1;}

    .founder-card{
      transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    }
    .founder-card:hover{
      transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px);
    }
  }

  /* Ambient drifting circles — echoes the hero's orbit motif in two more sections */
  #problems, #why-us{position:relative;overflow:hidden;}
  #problems > .wrap, #why-us > .wrap{position:relative;z-index:1;}
  #problems::before, #problems::after, #why-us::before, #why-us::after{
    content:'';
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(65,173,215,0.15);
    pointer-events:none;
    z-index:0;
  }
  #problems::before{width:220px;height:220px;top:-60px;right:8%;animation:driftA 22s ease-in-out infinite;}
  #problems::after{width:140px;height:140px;bottom:-40px;left:4%;border-color:rgba(1,94,135,0.14);animation:driftB 18s ease-in-out infinite;}
  #why-us::before{width:180px;height:180px;top:10%;left:-60px;animation:driftB 26s ease-in-out infinite;}
  #why-us::after{width:110px;height:110px;bottom:6%;right:6%;border-color:rgba(1,94,135,0.14);animation:driftA 20s ease-in-out infinite;}
  @keyframes driftA{0%,100%{transform:translate(0,0);}50%{transform:translate(18px,-14px);}}
  @keyframes driftB{0%,100%{transform:translate(0,0);}50%{transform:translate(-16px,16px);}}

  @media (prefers-reduced-motion: reduce){
    #problems::before, #problems::after, #why-us::before, #why-us::after{animation:none;}
    .founder-card, .founder-card:hover{transform:none;}
  }

  /* ---------- CUSTOM CURSOR ---------- */
  @media (hover: hover) and (pointer: fine){
    body, a, button, .btn, input, textarea, select, summary, .service-card, .problem-card, .founder-card{
      cursor:none;
    }
    .cursor-dot, .cursor-ring{
      position:fixed;
      top:0;left:0;
      border-radius:50%;
      pointer-events:none;
      z-index:9999;
      transform:translate(-50%,-50%);
    }
    .cursor-dot{
      width:6px;height:6px;
      background:var(--teal);
      transition:opacity .15s ease;
    }
    .cursor-ring{
      width:36px;height:36px;
      border:1.5px solid rgba(65,173,215,0.55);
      box-shadow:0 0 18px 2px var(--teal-glow);
      transition:width .25s ease, height .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease, opacity .25s ease;
      opacity:0.8;
    }
    .cursor-ring.is-hover{
      width:56px;height:56px;
      border-color:var(--teal);
      box-shadow:0 0 30px 6px var(--teal-glow);
      background:rgba(65,173,215,0.08);
    }
    .cursor-dot.is-hidden, .cursor-ring.is-hidden{opacity:0;}

    .cursor-label{
      position:fixed;
      top:0;left:0;
      transform:translate(-50%, 22px);
      pointer-events:none;
      z-index:9999;
      background:var(--ink);
      color:var(--white);
      font-family:var(--font-mono);
      font-size:11px;
      letter-spacing:0.06em;
      text-transform:uppercase;
      padding:4px 11px;
      border-radius:100px;
      white-space:nowrap;
      opacity:0;
      transition:opacity .2s ease;
    }
    .cursor-label.is-visible{opacity:1;}

    .cursor-ripple{
      position:fixed;
      top:0;left:0;
      border:1.5px solid var(--teal);
      border-radius:50%;
      transform:translate(-50%,-50%);
      pointer-events:none;
      z-index:9998;
      animation:cursorRipple .6s ease-out forwards;
    }
    @keyframes cursorRipple{
      0%{width:16px;height:16px;opacity:0.8;}
      100%{width:90px;height:90px;opacity:0;}
    }
  }
  @media (prefers-reduced-motion: reduce), (hover:none), (pointer:coarse){
    .cursor-dot, .cursor-ring, .cursor-label{display:none;}
  }