:root{
      --navy:#192230;
      --yellow:#FFCD00;
      --white:#FFFFFF;
      --ease:cubic-bezier(.2,.8,.2,1);
      --page:min(1480px, calc(100% - 48px));
      --shadow-soft:0 18px 48px rgba(25,34,48,.10);
      --shadow-strong:0 30px 90px rgba(25,34,48,.18);
      --shadow-yellow:0 18px 48px rgba(255,205,0,.24);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--white);
      color:var(--navy);
      font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    button{font:inherit}
    .container{width:var(--page);margin-inline:auto}
    .section{padding:110px 0}

    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    }
    .eyebrow::before{content:"";width:28px;height:3px;border-radius:99px;background:var(--yellow)}
    .display{
      margin:18px 0 0;
      max-width:1050px;
      font-size:clamp(48px,6.6vw,102px);
      line-height:.91;
      letter-spacing:-.072em;
      font-weight:800;
    }
    .lead{
      margin:26px 0 0;
      max-width:790px;
      font-size:16px;
      line-height:1.85;
      font-weight:500;
      opacity:.72;
    }

    /* =========================================================
       SERVICES HERO — intentionally no header/footer in this file
       ========================================================= */
    .services-hero{
      position:relative;
      padding:120px 0 80px;
      overflow:hidden;
      background:
        radial-gradient(circle at 82% 18%, rgba(255,205,0,.22), transparent 20%),
        var(--white);
    }
    .services-hero::before{
      content:"";
      position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(25,34,48,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(25,34,48,.035) 1px,transparent 1px);
      background-size:56px 56px;
      mask-image:linear-gradient(to bottom,black,transparent 90%);
      pointer-events:none;
    }
    .hero-layout{
      position:relative;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:70px;
      align-items:end;
    }
    .hero-side{
      position:relative;
      padding:30px;
      border-radius:30px;
      background:var(--navy);
      color:var(--white);
      box-shadow:var(--shadow-strong);
      overflow:hidden;
    }
    .hero-side::after{
      content:"";
      position:absolute;
      width:220px;height:220px;border-radius:50%;
      background:var(--yellow);
      right:-90px;top:-110px;
      opacity:.14;
    }
    .hero-side small{
      display:block;
      color:var(--yellow);
      font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    }
    .hero-side h2{
      margin:18px 0 12px;
      font-size:30px;line-height:1.05;letter-spacing:-.035em;
    }
    .hero-side p{
      margin:0;
      font-size:12px;line-height:1.75;
      color:rgba(255,255,255,.68);
    }
    .hero-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
    .hero-chip{
      padding:9px 11px;border-radius:999px;
      background:rgba(255,205,0,.08);
      border:1px solid rgba(255,205,0,.20);
      color:var(--yellow);
      font-size:9px;font-weight:800;
    }

    /* =========================================================
       QUICK SCAN
       Gives busy clients a 10-second overview before the details.
       ========================================================= */
    .quick-scan{padding:30px 0 70px}
    .quick-shell{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      border:1px solid rgba(25,34,48,.10);
      border-radius:26px;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      background:var(--white);
    }
    .quick-item{
      position:relative;
      min-height:145px;
      padding:22px;
      border-right:1px solid rgba(25,34,48,.10);
      transition:.3s var(--ease);
    }
    .quick-item:last-child{border-right:0}
    .quick-item:hover{background:var(--yellow);transform:translateY(-4px)}
    .quick-num{font-size:9px;font-weight:800;letter-spacing:.14em;opacity:.5}
    .quick-name{
      margin-top:34px;
      font-size:15px;font-weight:800;line-height:1.15;
    }
    .quick-arrow{
      position:absolute;right:18px;top:18px;
      width:34px;height:34px;border-radius:11px;
      display:grid;place-items:center;
      background:var(--navy);color:var(--yellow);
      opacity:0;transform:translateY(6px);
      transition:.3s var(--ease);
    }
    .quick-item:hover .quick-arrow{opacity:1;transform:none}
    .quick-arrow svg{width:15px;height:15px}

    /* =========================================================
       SERVICE EXPLORER
       Desktop: hover/focus reveals service detail panel.
       Mobile: tap accordion controlled by JS.
       ========================================================= */
    .explorer{
      padding:100px 0;
      background:var(--navy);
      color:var(--white);
      overflow:hidden;
      position:relative;
    }
    .explorer::before{
      content:"";
      position:absolute;
      width:520px;height:520px;border-radius:50%;
      background:var(--yellow);
      filter:blur(170px);
      opacity:.12;
      right:-180px;top:-200px;
    }
    .explorer-head{
      position:relative;z-index:2;
      display:grid;
      grid-template-columns:1fr .55fr;
      gap:50px;
      align-items:end;
      margin-bottom:44px;
    }
    .explorer .lead{color:rgba(255,255,255,.68);opacity:1}
    .explorer-tip{
      justify-self:end;
      max-width:360px;
      padding:16px 18px;
      border-radius:18px;
      background:rgba(255,205,0,.08);
      border:1px solid rgba(255,205,0,.18);
      color:var(--yellow);
      font-size:10px;font-weight:700;line-height:1.65;
    }

    .service-stack{
      position:relative;z-index:2;
      display:grid;
      gap:10px;
    }
    .service-row{
      position:relative;
      border:1px solid rgba(255,255,255,.09);
      border-radius:24px;
      overflow:hidden;
      background:rgba(255,255,255,.035);
      transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
    }
    .service-row:hover,
    .service-row:focus-within,
    .service-row.open{
      border-color:rgba(255,205,0,.52);
      background:rgba(255,205,0,.045);
      transform:translateY(-2px);
    }
    .service-summary{
      width:100%;
      border:0;
      cursor:pointer;
      color:inherit;
      background:transparent;
      display:grid;
      grid-template-columns:74px 1fr auto;
      gap:22px;
      align-items:center;
      padding:24px 26px;
      text-align:left;
    }
    .service-index{
      width:52px;height:52px;
      border-radius:16px;
      display:grid;place-items:center;
      background:var(--yellow);color:var(--navy);
      font-size:11px;font-weight:800;
      box-shadow:0 10px 28px rgba(255,205,0,.18);
    }
    .service-title-wrap strong{
      display:block;
      font-size:clamp(22px,2.2vw,34px);
      line-height:1;
      letter-spacing:-.035em;
    }
    .service-title-wrap span{
      display:block;
      margin-top:8px;
      font-size:11px;
      line-height:1.6;
      color:rgba(255,255,255,.56);
    }
    .service-trigger{
      width:46px;height:46px;border-radius:14px;
      display:grid;place-items:center;
      color:var(--yellow);
      border:1px solid rgba(255,205,0,.20);
      transition:.3s var(--ease);
    }
    .service-trigger svg{width:19px;height:19px;transition:.3s var(--ease)}
    .service-row:hover .service-trigger,
    .service-row:focus-within .service-trigger,
    .service-row.open .service-trigger{background:var(--yellow);color:var(--navy)}
    .service-row:hover .service-trigger svg,
    .service-row:focus-within .service-trigger svg,
    .service-row.open .service-trigger svg{transform:rotate(45deg)}

    .service-detail{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:28px;
      max-height:0;
      opacity:0;
      overflow:hidden;
      padding:0 26px;
      transition:max-height .5s var(--ease),opacity .32s var(--ease),padding .42s var(--ease);
    }
    .service-row:hover .service-detail,
    .service-row:focus-within .service-detail,
    .service-row.open .service-detail{
      max-height:620px;
      opacity:1;
      padding:8px 26px 28px;
    }

    .service-description{
      min-height:230px;
      padding:26px;
      border-radius:20px;
      background:var(--yellow);
      color:var(--navy);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .service-description h3{
      margin:0;
      font-size:26px;line-height:1.05;letter-spacing:-.03em;
    }
    .service-description p{
      margin:14px 0 0;
      max-width:580px;
      font-size:12px;line-height:1.75;
      opacity:.72;
    }
    .category-link{
      display:inline-flex;
      align-items:center;
      gap:9px;
      margin-top:26px;
      font-size:11px;font-weight:800;
    }
    .category-link svg{width:16px;height:16px}

    .sub-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:9px;
      align-content:start;
    }
    .sub-item{
      min-height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:15px 16px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.045);
      transition:.25s var(--ease);
    }
    .sub-item:hover{background:var(--white);color:var(--navy);transform:translateY(-3px)}
    .sub-name{font-size:11px;font-weight:800;line-height:1.35}
    .sub-icon{
      width:28px;height:28px;flex:0 0 28px;
      border-radius:9px;
      display:grid;place-items:center;
      background:rgba(255,205,0,.10);color:var(--yellow);
    }
    .sub-item:hover .sub-icon{background:var(--yellow);color:var(--navy)}
    .sub-icon svg{width:13px;height:13px}

    /* =========================================================
       BUSINESS-NEED ROUTER
       A second way to choose services, useful for clients who don't
       know agency terminology.
       ========================================================= */
    .need-router{background:var(--white)}
    .router-layout{
      display:grid;
      grid-template-columns:.75fr 1.25fr;
      gap:70px;
      align-items:start;
    }
    .router-copy{position:sticky;top:40px}
    .router-list{display:grid;gap:12px}
    .router-card{
      position:relative;
      padding:24px 68px 24px 24px;
      border:1px solid rgba(25,34,48,.10);
      border-radius:22px;
      background:var(--white);
      box-shadow:0 10px 30px rgba(25,34,48,.055);
      transition:.3s var(--ease);
    }
    .router-card:hover{
      transform:translateX(8px);
      border-color:var(--yellow);
      box-shadow:var(--shadow-soft);
    }
    .router-card strong{font-size:15px}
    .router-card p{
      margin:7px 0 0;
      font-size:11px;line-height:1.65;
      opacity:.62;
    }
    .router-go{
      position:absolute;right:18px;top:50%;transform:translateY(-50%);
      width:40px;height:40px;border-radius:13px;
      display:grid;place-items:center;
      background:var(--navy);color:var(--yellow);
      transition:.3s var(--ease);
    }
    .router-card:hover .router-go{background:var(--yellow);color:var(--navy)}
    .router-go svg{width:17px;height:17px}

    /* =========================================================
       STARTUP POSITIONING / CTA
       No invented awards, team size, client count, etc.
       ========================================================= */
    .startup-note{padding:0 0 110px}
    .startup-shell{
      position:relative;
      overflow:hidden;
      padding:54px 58px;
      border-radius:34px;
      background:var(--yellow);
      color:var(--navy);
      display:grid;
      grid-template-columns:1fr auto;
      gap:40px;
      align-items:center;
      box-shadow:var(--shadow-yellow);
    }
    .startup-shell::after{
      content:"";
      position:absolute;
      width:320px;height:320px;border-radius:50%;
      right:-100px;top:-180px;
      border:70px solid rgba(25,34,48,.07);
    }
    .startup-shell h2{
      margin:0;
      max-width:850px;
      font-size:clamp(34px,4.7vw,70px);
      line-height:.98;
      letter-spacing:-.055em;
    }
    .startup-shell p{
      margin:16px 0 0;
      max-width:680px;
      font-size:13px;line-height:1.8;
      opacity:.7;
    }
    .cta-button{
      position:relative;z-index:2;
      min-height:56px;
      padding:0 22px;
      border-radius:18px;
      background:var(--navy);
      color:var(--yellow);
      display:inline-flex;align-items:center;gap:10px;
      font-size:12px;font-weight:800;
      box-shadow:0 18px 40px rgba(25,34,48,.20);
      transition:.3s var(--ease);
    }
    .cta-button:hover{transform:translateY(-4px)}
    .cta-button svg{width:17px;height:17px}

    /* reveal */
    .reveal{
      opacity:0;
      transform:translateY(28px);
      transition:opacity .75s var(--ease),transform .75s var(--ease);
    }
    .reveal.visible{opacity:1;transform:none}
    .delay-1{transition-delay:.08s}
    .delay-2{transition-delay:.16s}

    @media(max-width:1100px){
      :root{--page:min(100% - 30px,1480px)}
      .hero-layout{grid-template-columns:1fr;gap:42px}
      .quick-shell{grid-template-columns:repeat(5,minmax(160px,1fr));overflow-x:auto}
      .quick-item{min-width:160px}
      .explorer-head{grid-template-columns:1fr}
      .explorer-tip{justify-self:start}
      .service-detail{grid-template-columns:1fr}
      .router-layout{grid-template-columns:1fr;gap:45px}
      .router-copy{position:relative;top:auto}
    }

    @media(max-width:760px){
      .section{padding:84px 0}
      .services-hero{padding:92px 0 62px}
      .display{font-size:clamp(48px,15vw,70px)}
      .lead{font-size:14px}
      .quick-scan{padding-bottom:55px}
      .quick-shell{
        display:flex;
        border-radius:20px;
        scroll-snap-type:x mandatory;
      }
      .quick-item{
        flex:0 0 74%;
        scroll-snap-align:start;
        border-right:1px solid rgba(25,34,48,.10);
      }

      .explorer{padding:82px 0}
      .explorer-tip{display:none}
      .service-summary{
        grid-template-columns:52px 1fr auto;
        padding:18px;
        gap:14px;
      }
      .service-index{width:46px;height:46px;border-radius:14px}
      .service-title-wrap strong{font-size:20px}
      .service-title-wrap span{font-size:10px}
      .service-trigger{width:40px;height:40px}
      .service-detail{
        display:block;
        padding-inline:18px;
      }

      /* Disable hover-driven expansion on touch/mobile.
         JS .open state becomes the source of truth. */
      .service-row:hover .service-detail,
      .service-row:focus-within .service-detail{
        max-height:0;
        opacity:0;
        padding:0 18px;
      }
      .service-row.open .service-detail{
        max-height:1100px;
        opacity:1;
        padding:4px 18px 20px;
      }
      .service-row:hover .service-trigger svg,
      .service-row:focus-within .service-trigger svg{transform:none}
      .service-row.open .service-trigger svg{transform:rotate(45deg)}

      .service-description{min-height:auto;padding:22px;margin-bottom:10px}
      .service-description h3{font-size:22px}
      .sub-grid{grid-template-columns:1fr}
      .sub-item{min-height:62px}

      .startup-shell{
        grid-template-columns:1fr;
        padding:40px 26px;
      }
    }

    @media(max-width:480px){
      :root{--page:calc(100% - 22px)}
      .hero-side{padding:22px;border-radius:24px}
      .service-summary{grid-template-columns:46px 1fr 36px;padding:15px}
      .service-index{width:42px;height:42px}
      .service-trigger{width:36px;height:36px}
      .router-card{padding:20px 60px 20px 20px}
      .startup-shell{border-radius:28px}
    }

    @media(prefers-reduced-motion:reduce){
      *{scroll-behavior:auto!important;transition:none!important}
      .reveal{opacity:1;transform:none}
    }