:root{
    --black:#050505;
    --navy:#071426;
    --navy-light:#0c1f38;
    --blue:#1e7cff;
    --orange:#ff6a00;
    --accent:#27D4FD;   /* Jimi logo cyan — used on the CTA button */
    --white:#ffffff;
    --grey:#8b96a8;
    --grey-dim:#5a6478;
    --line:rgba(255,255,255,0.08);
    --glass:rgba(255,255,255,0.03);
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --ease:cubic-bezier(.16,.8,.24,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
body{
    /* Site-wide background. The veil sits at 93% so the artwork reads as
       texture behind the content rather than competing with it — the
       source image is bright and busy, and at full strength every section
       of text would be fighting a website mockup and a glowing globe.
       background-color stays as the fallback while the image loads. */
    background-color:var(--black);
    background-image:
      linear-gradient(rgba(5,5,5,0.93), rgba(5,5,5,0.93)),
      url("assets/jimi-hero-bg.jpg");
    background-repeat:no-repeat, no-repeat;
    background-size:cover, cover;
    background-position:center, center;
    background-attachment:fixed, fixed;
    color:var(--white);
    font-family:var(--font-body);
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--blue); color:var(--white);}
:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:3px;
    border-radius:2px;
  }
.wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 40px;
  }
.eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--orange);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
.eyebrow::before{
    content:"";
    width:16px;
    height:1px;
    background:var(--orange);
  }

  /* ================= BACKGROUND AMBIENCE ================= */
  .noise-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:0.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
  }

  /* ================= HEADER ================= */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:18px 0;   /* balanced against the stacked logo lockup so the bar
                         keeps roughly its original height */
    transition:padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
    border-bottom:1px solid transparent;
  }
header.scrolled{
    padding:11px 0;
    background:rgba(5,5,5,0.72);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    /* The stacked logo lockup is wider than the old wordmark, so on
       mid-width desktops the nav crept right up against it. This keeps a
       guaranteed gap no matter how the free space works out. */
    gap:20px;
  }
.logo{
    display:flex;
    flex-direction:column;
    align-items:center;      /* Jimi sits centered over the tagline */
    gap:6px;
    line-height:1;
    text-decoration:none;
  }
  /* Transparent logotype lifted from the brand artwork, so it sits on any
     background. Height-driven so it scales with the header rather than
     being pinned to a fixed pixel width. */
  .logo-img{
    /* 20% larger than the previous lockup, then sized so the logotype is
       at least as wide as the tagline beneath it — in the source artwork
       "Jimi" dominates the line under it, and a 41px logotype would have
       rendered 146px wide against a 250px tagline, inverting that. */
    height:44px;   /* new wordmark is wider (4.29:1), trimmed to keep the
                      lockup balanced against the tagline beneath it */
    width:auto;
    display:block;
    transition:transform .35s var(--ease), filter .35s var(--ease);
  }
.logo:hover .logo-img{
    transform:translateY(-1px);
    filter:drop-shadow(0 0 14px rgba(30,124,255,.55));
  }
.logo-sub{
    display:block;
    font-family:var(--font-body);
    font-size:9.1px;         /* scaled with the logotype */
    letter-spacing:.2em;     /* trimmed so the line sits under the logotype
                                instead of running past it on both sides */
    text-transform:uppercase;
    color:var(--grey);
    font-weight:600;
    white-space:nowrap;
    text-align:center;
    text-indent:.26em;       /* offsets the trailing letterspace so the
                                block optically centers under the logotype */
  }
.nav-links{
    display:flex;
    align-items:center;
    gap:34px;
    margin-right:auto;   /* pull the nav toward the logo instead of letting
                            space-between push it to the middle */
    margin-left:18px;    /* sits closer to the logo */
  }
.nav-links a{
    font-size:14px;
    font-weight:500;
    color:var(--grey);
    position:relative;
    padding:4px 0;
    transition:color 0.25s var(--ease);
  }
.nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background:linear-gradient(90deg, var(--blue), var(--orange));
    transition:width 0.3s var(--ease);
  }
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{width:100%;}
.btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    font-weight:600;
    padding:12px 24px;
    border-radius:8px;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color .3s var(--ease);
    white-space:nowrap;
  }
.btn-primary{
    background:var(--white);
    color:var(--black);
    border:1px solid var(--white);
  }
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(255,255,255,0.15);
  }
.btn-outline{
    background:transparent;
    border:1px solid rgba(255,255,255,0.55);
    color:var(--white);
    box-shadow:0 0 0px rgba(255,255,255,0);
  }
.btn-outline:hover{
    border-color:var(--white);
    box-shadow:0 0 24px rgba(255,255,255,0.22), inset 0 0 20px rgba(255,255,255,0.05);
    transform:translateY(-2px);
  }
.btn-ghost{
    background:transparent;
    border:1px solid var(--line);
    color:var(--white);
  }
.btn-ghost:hover{
    border-color:rgba(30,124,255,0.5);
    box-shadow:0 0 24px rgba(30,124,255,0.25);
    transform:translateY(-2px);
  }
  /* Nav buttons only — 6% larger than the base button, with a white
     border. Scoped to .nav-cta so the hero and section buttons keep
     their existing sizing. */
  .nav-cta .btn{
    font-size:14.8px;
    padding:13px 25px;
    border-width:1.5px;   /* 50% thicker than the 1px base */
    font-weight:700;
    justify-content:center;
    text-align:center;
  }
.nav-cta .btn-ghost{
    border-color:rgba(255,255,255,0.55);
  }
.nav-cta .btn-ghost:hover{
    border-color:var(--white);
    box-shadow:0 0 24px rgba(255,255,255,0.22);
  }
.btn-icon{ transition:transform 0.3s var(--ease); }
.btn:hover .btn-icon{ transform:translateX(3px); }
.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-pay-link{
    font-size:14px;
    font-weight:500;
    color:var(--grey);
    transition:color 0.25s var(--ease);
    white-space:nowrap;
  }
.nav-pay-link:hover{ color:var(--white); }
.nav-phone{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:12px;
    font-family:var(--font-mono);
    font-size:14px;
    font-weight:500;
    color:var(--orange);
    white-space:nowrap;
    transition:opacity 0.25s var(--ease);
  }
.nav-phone svg{ width:15px; height:15px; flex-shrink:0; }
.nav-phone:hover{ opacity:0.75; }
.nav-links-phone{ display:none; }
.nav-links-pay{ display:none; }
.menu-toggle{
    display:none;
    background:none; border:none; color:var(--white);
    width:38px; height:38px;
    align-items:center; justify-content:center;
  }
.menu-toggle svg{ width:20px; height:20px; }

  /* ================= HERO ================= */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:120px;
    padding-bottom:80px;
    overflow:hidden;
  }
.particle{
    position:absolute;
    border-radius:50%;
    background:var(--white);
    opacity:0;
    animation:particle-float 8s ease-in-out infinite;
  }
@keyframes particle-float{
    0%{ opacity:0; transform:translateY(0) scale(0.5); }
    10%{ opacity:0.9; }
    90%{ opacity:0.5; }
    100%{ opacity:0; transform:translateY(-140px) scale(1); }
  }

  /* ================= REVEAL ANIMATION ================= */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:0.08s; }
.reveal-delay-2{ transition-delay:0.16s; }
.reveal-delay-3{ transition-delay:0.24s; }

  /* ================= TRUST ================= */
  .trust{
    padding:36px 0;
    border:2px solid var(--orange);
    background:var(--navy);
    text-align:center;
  }
.trust h3{
    font-family:var(--font-body);
    font-size:12px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--grey-dim);
    margin-bottom:20px;
    font-weight:600;
  }
.logo-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:44px;
  }
.client-logo{
    display:flex;
    align-items:center;
    gap:9px;
    color:#ffffff;
    opacity:0.9;
    transition:opacity 0.3s var(--ease), color 0.3s var(--ease);
  }
.client-logo:hover{ opacity:1; color:var(--grey); }
.client-logo svg{ width:20px; height:20px; flex-shrink:0; }
.client-logo span{
    font-family:var(--font-body);
    font-weight:600;
    font-size:17px;
    letter-spacing:0.01em;
    color:#ffffff;
  }

  /* ================= SECTION SHARED ================= */
  section{ position:relative; padding:150px 0; }
.section-head{
    max-width:640px;
    margin-bottom:72px;
  }
.section-head h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2rem, 3.6vw, 3.2rem);
    line-height:1.08;
    letter-spacing:-0.01em;
  }
.section-head p{
    color:var(--grey);
    font-size:16.5px;
    margin-top:20px;
    max-width:520px;
  }

  /* ================= SECTION DIVIDER ================= */
  .section-divider{
    position:relative;
    height:120px;
    background:#ffffff;
    overflow:hidden;
  }
.section-divider::before{
    content:"";
    position:absolute;
    top:50%; left:0; right:0;
    height:1.5px;
    transform:translateY(-50%);
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(30,124,255,0.55) 22%,
      rgba(255,106,0,0.85) 50%,
      rgba(30,124,255,0.55) 78%,
      transparent 100%);
  }
.section-divider::after{
    content:"";
    position:absolute;
    top:50%; left:0; right:0;
    height:44px;
    transform:translateY(-50%);
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(255,106,0,0.14) 50%,
      transparent 100%);
    filter:blur(12px);
  }

  /* ================= SERVICES ================= */
  .services{ background:linear-gradient(180deg, var(--black) 0%, var(--black) 82%, #ffffff 100%); }
.service-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
.service-card{
    position:relative;
    padding:38px 32px 34px;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
    border:1px solid var(--line);
    backdrop-filter:blur(6px);
    overflow:hidden;
    transition:box-shadow 0.45s var(--ease);
  }
.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    padding:1px;
    background:linear-gradient(140deg, transparent 30%, var(--card-glow, var(--blue)) 100%);
    opacity:1;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
  }
.service-card:hover{
    box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);
  }
.service-card.reveal{ transform:none !important; }
.service-card:nth-child(1){ --card-glow: var(--blue); }
.service-card:nth-child(2){ --card-glow: #7a5cff; }
.service-card:nth-child(3){ --card-glow: var(--orange); }
.service-card:nth-child(4){ --card-glow: #2dd4bf; }
.service-card:nth-child(5){ --card-glow: #ff5c8a; }
.service-card:nth-child(6){ --card-glow: #ffd23f; }
.service-card h3{
    font-family:var(--font-display);
    font-size:21px;
    font-weight:600;
    margin-bottom:16px;
    text-align:center;
  }
.service-card ul{ display:flex; flex-direction:column; gap:11px; }
.service-card ul li{
    font-size:14.5px;
    color:var(--grey);
    display:flex;
    align-items:center;
    gap:10px;
  }
.service-card ul li::before{
    content:"";
    width:5px; height:5px;
    border-radius:50%;
    background:var(--card-glow, var(--blue));
    flex-shrink:0;
  }

  /* ================= PORTFOLIO ================= */
  .portfolio{ background:#ffffff; }
.project-visual{
    position:absolute; inset:0;
    transition:transform 0.7s var(--ease);
  }
.project-visual svg{ width:100%; height:100%; }
.project-logo-img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:36px;
    box-sizing:border-box;
  }
.project-overlay{
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.8) 20%, rgba(5,5,5,0.25) 38%, transparent 52%, transparent 100%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
  }
.project-industry{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--orange);
    margin-bottom:14px;
  }
.project-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:600;
    color:var(--white);
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
.project-link svg{ width:14px; height:14px; transition:transform 0.3s var(--ease); }
.testimonials .section-head h2{ color:#0b0f14; }
.testi-card{
    padding:34px 30px;
    border-radius:16px;
    background:#f6f7f9;
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 6px 24px rgba(0,0,0,0.05);
  }
.stars{ display:flex; gap:4px; margin-bottom:22px; }
.stars svg{ width:15px; height:15px; fill:var(--orange); }
.testi-card p.quote{
    font-size:15px;
    color:#374151;
    line-height:1.65;
    margin-bottom:28px;
  }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
    width:42px; height:42px;
    border-radius:50%;
    flex-shrink:0;
  }
.testi-avatar svg{ width:100%; height:100%; }
.testi-name{ font-size:14px; font-weight:600; color:#0b0f14; }
.testi-role{ font-size:12.5px; color:#6b7280; }

  /* ================= CTA ================= */
  .cta-section{
    background:
      radial-gradient(ellipse 800px 500px at 50% 0%, rgba(255,106,0,0.13), transparent 60%),
      radial-gradient(ellipse 600px 400px at 20% 100%, rgba(30,124,255,0.10), transparent 55%),
      var(--navy);
    text-align:center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
.cta-section h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.2rem, 4.6vw, 3.6rem);
    line-height:1.08;
    letter-spacing:-0.01em;
    max-width:760px;
    margin:0 auto 20px;
  }
.cta-section p{
    color:var(--grey);
    font-size:17px;
    max-width:480px;
    margin:0 auto 44px;
  }
.btn-cta{
    /* Jimi logo blue: the J runs #27D4FD cyan into #0061F6 */
    background:linear-gradient(100deg, #0061F6, #27D4FD);
    color:var(--white);
    border:none;
    padding:17px 34px;
    font-size:15px;
    border-radius:9px;
    box-shadow:0 0 0 rgba(39,212,253,0);
  }
.btn-cta:hover{
    box-shadow:0 12px 44px -8px rgba(39,212,253,0.55);
    transform:translateY(-3px);
  }
.cta-form{
    max-width:520px;
    margin:0 auto;
    text-align:left;
  }
.cta-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
  }
.cta-form input,
  .cta-form textarea{
    width:100%;
    padding:14px 16px;
    border-radius:10px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    color:var(--white);
    font-family:var(--font-body);
    font-size:14.5px;
    transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
.cta-form input::placeholder,
  .cta-form textarea::placeholder{ color:var(--grey-dim); }
.cta-form textarea{ resize:vertical; margin-bottom:20px; }
.cta-form input:focus,
  .cta-form textarea:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(30,124,255,0.15);
  }
.cta-form .btn-cta{
    width:100%;
    border-radius:9px;
    cursor:pointer;
    justify-content:center;   /* full-width button, so centre the label */
    text-align:center;
  }
  /* Hero buttons: with the arrow removed there is nothing to left-align
     against, so centre the label inside the padding. */
  .hero-ctas .btn{
    justify-content:center;
    text-align:center;
    font-weight:700;
  }


  /* ---- Horizontal carousel ---- */
  .carousel{ position:relative; }
.carousel-track{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:4px 2px 10px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track > *{
    flex:0 0 calc((100% - 48px) / 3);
    scroll-snap-align:start;
  }
.carousel-nav{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-bottom:18px;
  }
.carousel-btn{
    width:42px; height:42px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line);
    color:var(--grey);
    cursor:pointer;
    transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  }
.carousel-btn svg{ width:17px; height:17px; }
.carousel-btn:hover{ color:var(--orange); border-color:rgba(255,106,0,0.4); background:rgba(255,106,0,0.06); }
.carousel-btn:disabled{ opacity:0.3; cursor:default; }
.carousel-btn:disabled:hover{ color:var(--grey); border-color:var(--line); background:rgba(255,255,255,0.04); }
.testimonials .carousel-btn{
    background:#f4f6f9;
    border-color:#dfe4ec;
    color:#5a6478;
  }
.testimonials .carousel-btn:hover{ color:var(--orange); border-color:rgba(255,106,0,0.45); background:#fff6f0; }
.testimonials .carousel-btn:disabled:hover{ color:#5a6478; border-color:#dfe4ec; background:#f4f6f9; }

  /* Wordmark tile for projects without a logo file */
  .project-wordmark{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    width:100%; height:100%;
    padding:0 24px;
    text-align:center;
  }
.project-wordmark span{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.01em;
    color:#fff;
  }
.project-wordmark small{
    margin-top:9px;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.5);
  }
@media (max-width:1024px){
    .carousel-track > *{ flex-basis:calc((100% - 24px) / 2); }
  }
@media (max-width:700px){
    .carousel-track > *{ flex-basis:86%; }
.carousel-nav{ display:none; }
  }
@media (prefers-reduced-motion:reduce){
    .carousel-track{ scroll-behavior:auto; }
  }

  /* ================= FOOTER ================= */
  footer{
    /* Was solid black, which blanked the site background out completely
       across the whole footer. Semi-transparent so the artwork carries
       through to the bottom of the page. */
    background:rgba(5,5,5,0.82);
    padding:80px 0 34px;
  }
.footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:56px;
    border-bottom:1px solid var(--line);
    margin-bottom:34px;
  }
  /* The header lockup is centred; the footer column is left-aligned text,
     so the logo is overridden here rather than centring the whole block. */
  .footer-logo{
    align-items:flex-start;
  }
.footer-logo .logo-img{ height:44px; }        /* smaller than the header */
  .footer-logo .logo-sub{ text-align:left; text-indent:0; font-size:9px; }
.footer-tagline{
    font-family:var(--font-display);
    font-size:15px;
    font-weight:600;
    color:var(--white);
    margin-top:16px;
    max-width:280px;
    line-height:1.45;
    letter-spacing:.01em;
  }
.footer-brand p{
    color:var(--grey-dim);
    font-size:14px;
    margin-top:18px;
    max-width:260px;
    line-height:1.6;
  }
.footer-col h5{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--grey-dim);
    margin-bottom:20px;
  }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{
    font-size:14px;
    color:var(--grey);
    transition:color 0.25s var(--ease);
  }
.footer-col a:hover{ color:var(--white); }
.contact-link{ display:flex; align-items:center; gap:9px; }
.contact-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px; height:16px;
    color:var(--grey-dim);
    flex-shrink:0;
    transition:color 0.25s var(--ease);
  }
.contact-icon svg{ width:15px; height:15px; }
.contact-link:hover .contact-icon{ color:var(--orange); }
  /* Phone number stands out in orange with its icon lit, rather than
     sitting in the same grey as the rest of the list. */
  .contact-link.is-phone .contact-text{
    color:var(--orange);
    font-weight:600;
  }
.contact-link.is-phone .contact-icon{ color:var(--orange); }
.contact-link.is-phone:hover .contact-text{ opacity:.8; }
.contact-cta{ display:none; }
.contact-text{ display:inline; }
.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
  }
.footer-bottom p{ font-size:13px; color:var(--grey-dim); }
.social-row{ display:flex; gap:14px; }
.social-row a{
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    transition:border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
  }
.social-row a:hover{
    border-color:var(--blue);
    background:rgba(30,124,255,0.08);
    transform:translateY(-2px);
  }
.social-row svg{ width:15px; height:15px; }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 1024px){
    .wrap{ padding:0 28px; }
.service-grid{ grid-template-columns:repeat(2, 1fr); }
.footer-top{ grid-template-columns:1fr 1fr; gap:40px 24px; }
  }
@media (max-width: 720px){
    /* iOS and several Android browsers handle background-attachment:fixed
       badly — it either ignores it or repaints on every scroll frame. */
    body{ background-attachment:scroll, scroll; }
section{ padding:96px 0; }
    /* Scale the logo lockup down on phones — at desktop size it is ~206px
       wide and would crowd the menu button on a narrow screen. */
    .logo-img{ height:42px; }
.logo-sub{ font-size:8.6px; letter-spacing:.16em; }
.nav-inner{ gap:16px; }
.services{ background:linear-gradient(180deg, var(--black) 0%, var(--black) 96%, #ffffff 100%); }
.contact-text{ display:none; }
.contact-icon{
      display:flex;
      align-items:center;
      justify-content:center;
      width:34px; height:34px;
      border-radius:50%;
      background:rgba(255,255,255,0.06);
      border:1px solid var(--line);
      color:var(--orange);
      flex-shrink:0;
    }
.contact-icon svg{ width:15px; height:15px; }
.contact-cta{
      display:inline;
      font-weight:600;
      color:var(--white);
    }
.nav-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.55);
      opacity:0;
      pointer-events:none;
      transition:opacity 0.4s var(--ease);
      z-index:98;
    }
.nav-backdrop.open{ opacity:1; pointer-events:auto; }
.nav-links{
      margin-left:0;   /* desktop nudges must not offset the fixed drawer */
      margin-right:0;
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:78%;
      max-width:320px;
      background-image:
        linear-gradient(190deg, rgba(5,5,5,0.35) 0%, rgba(5,5,5,0.92) 45%, rgba(5,5,5,0.98) 70%),
        url("assets/jimi-hero-bg.jpg");
      background-size:cover;
      background-position:center 25%;
      background-repeat:no-repeat;
      backdrop-filter:blur(20px);
      border-left:1px solid var(--line);
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
      gap:28px;
      padding:40px;
      transform:translateX(100%);
      transition:transform 0.45s var(--ease);
      z-index:99;
    }
.nav-links.open{ transform:translateX(0); }
.nav-links a{ font-size:18px; }
.menu-toggle{ display:flex; }
.nav-cta .btn-outline{ display:none; }
.nav-login-btn{ display:none; }
.nav-pay-link{ display:none; }
.nav-phone{ display:none; }
.nav-links-phone{ margin-left:0; }
.nav-links-phone{ display:flex; }
.nav-links-pay{ display:block; }
.service-grid{ grid-template-columns:1fr; }
.footer-top{ grid-template-columns:1fr 1fr; }
.footer-brand{ grid-column:1/-1; }
.cta-section p{ padding:0 12px; }
.cta-form-row{ grid-template-columns:1fr; }
@media (max-width: 480px){
    .wrap{ padding:0 20px; }
.logo-img{ height:36px; }
.logo-sub{ font-size:7.6px; letter-spacing:.14em; }
.footer-top{ grid-template-columns:1fr; gap:32px; }
.footer-bottom{ flex-direction:column; align-items:flex-start; }
  }


/* ==========================================================
   SERVICE PAGES — layout added for the /services/ section.
   Everything above is inherited from the homepage so these
   pages stay visually identical to the rest of the site.
   ========================================================== */

.svc-hero{
  padding:150px 0 60px;
  background:
    radial-gradient(900px 460px at 12% -10%, rgba(30,124,255,.16), transparent 60%),
    radial-gradient(700px 400px at 92% 6%, rgba(255,106,0,.10), transparent 55%),
    var(--black);
  border-bottom:1px solid var(--line);
}
.svc-hero .eyebrow{ margin-bottom:16px; }
.svc-hero h1{
  font-family:var(--font-display);
  font-size:clamp(32px,5vw,54px);
  line-height:1.06;
  letter-spacing:-.02em;
  margin-bottom:20px;
  max-width:17ch;
}
.svc-hero .lede{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.65;
  color:var(--grey);
  max-width:62ch;
}
.svc-hero .svc-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

.crumbs{ font-size:13px; color:var(--grey-dim); margin-bottom:22px; }
.crumbs a{ color:var(--grey); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ margin:0 8px; opacity:.5; }

.svc-body{ padding:70px 0 90px; background:var(--black); }
.svc-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; }

.prose h2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.8vw,32px);
  letter-spacing:-.01em;
  margin:52px 0 18px;
  line-height:1.2;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-family:var(--font-display);
  font-size:19px;
  margin:32px 0 12px;
  color:var(--white);
}
.prose p{ font-size:16px; line-height:1.75; color:#b9c2d0; margin-bottom:18px; }
.prose ul, .prose ol{ margin:0 0 22px 0; padding-left:0; list-style:none; }
.prose ul li, .prose ol li{
  position:relative; padding-left:26px; margin-bottom:11px;
  font-size:15.5px; line-height:1.7; color:#b9c2d0;
}
.prose ul li::before{
  content:""; position:absolute; left:6px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--blue);
}
.prose ol{ counter-reset:step; }
.prose ol li{ counter-increment:step; }
.prose ol li::before{
  content:counter(step); position:absolute; left:0; top:2px;
  font-family:var(--font-mono); font-size:11px; color:var(--accent);
}
.prose a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(39,212,253,.3); }
.prose a:hover{ border-bottom-color:var(--accent); }
.prose strong{ color:var(--white); font-weight:600; }

/* Example / scenario call-out */
.example{
  border:1px solid var(--line);
  border-left:2px solid var(--blue);
  background:linear-gradient(180deg, rgba(30,124,255,.06), rgba(255,255,255,.015));
  border-radius:12px;
  padding:22px 24px;
  margin:26px 0 30px;
}
.example .example-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin-bottom:10px;
}
.example p:last-child{ margin-bottom:0; }

.callout{
  border:1px solid var(--line); border-left:2px solid var(--orange);
  background:linear-gradient(180deg, rgba(255,106,0,.06), rgba(255,255,255,.015));
  border-radius:12px; padding:22px 24px; margin:26px 0 30px;
}
.callout .example-label{ color:var(--orange); }

/* Comparison table */
.compare{ width:100%; border-collapse:collapse; margin:24px 0 30px; font-size:14.5px; }
.compare th, .compare td{
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--line);
  color:#b9c2d0; line-height:1.6;
}
.compare th{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); font-weight:500;
}
.compare td:first-child{ color:var(--white); font-weight:500; width:34%; }

/* Sidebar */
.svc-side{ position:sticky; top:100px; display:flex; flex-direction:column; gap:18px; }
.side-card{
  border:1px solid var(--line); border-radius:14px; padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.side-card h4{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--grey); margin-bottom:14px; font-weight:500;
}
.side-card ul{ list-style:none; display:flex; flex-direction:column; gap:1px; }
.side-card ul li a{
  display:block; padding:8px 0; font-size:14px; color:#b9c2d0;
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.04);
}
.side-card ul li:last-child a{ border-bottom:none; }
.side-card ul li a:hover{ color:var(--accent); }
.side-card p{ font-size:14px; line-height:1.65; color:var(--grey); margin-bottom:14px; }
.side-card .btn{ width:100%; justify-content:center; }

/* Related services grid at the foot of each page */
.related{ padding:0 0 90px; background:var(--black); }
.related h2{
  font-family:var(--font-display); font-size:22px; margin-bottom:22px;
}
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related-card{
  display:block; border:1px solid var(--line); border-radius:14px; padding:22px;
  text-decoration:none; background:var(--glass); transition:.25s var(--ease);
}
.related-card:hover{ border-color:rgba(39,212,253,.4); transform:translateY(-2px); }
.related-card h3{ font-family:var(--font-display); font-size:16px; color:var(--white); margin-bottom:8px; }
.related-card p{ font-size:13.5px; line-height:1.6; color:var(--grey); }

/* Closing CTA */
.svc-cta{
  padding:70px 0 90px; background:var(--black); border-top:1px solid var(--line);
}
.svc-cta-inner{
  border:1px solid var(--line); border-radius:20px; padding:48px 44px;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(30,124,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  text-align:center;
}
.svc-cta h2{ font-family:var(--font-display); font-size:clamp(24px,3vw,34px); margin-bottom:14px; }
.svc-cta p{ color:var(--grey); font-size:16px; line-height:1.7; max-width:56ch; margin:0 auto 28px; }
.svc-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Service index page */
.svc-index-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:56px; }
.svc-index-group{ margin-bottom:56px; }
.svc-index-group > h2{
  font-family:var(--font-display); font-size:22px; margin-bottom:6px;
}
.svc-index-group > p{ color:var(--grey); font-size:15px; margin-bottom:24px; max-width:64ch; line-height:1.7; }

@media (max-width:980px){
  .svc-layout{ grid-template-columns:1fr; gap:44px; }
  .svc-side{ position:static; }
  .related-grid, .svc-index-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .svc-hero{ padding:120px 0 46px; }
  .related-grid, .svc-index-grid{ grid-template-columns:1fr; }
  .svc-cta-inner{ padding:34px 24px; }
  .compare td:first-child{ width:auto; }
  .compare th, .compare td{ padding:11px 10px; font-size:13.5px; }
}

/* ==========================================================
   SERVICES SUB-HEADER
   Sits under the main site header on /services/ pages only.
   Keeps the primary nav clean while making every service
   reachable from every service page.
   ========================================================== */

.svcnav{
  position:sticky;
  top:64px;
  z-index:90;
  background:rgba(6,10,20,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.svcnav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(39,212,253,.35),rgba(30,124,255,.25),transparent);
}
.svcnav-inner{
  display:flex;align-items:center;gap:8px;
  height:52px;
}

.svcnav-home{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  padding:7px 13px;border-radius:9px;
  font-size:12.5px;font-weight:600;color:var(--grey);
  text-decoration:none;border:1px solid transparent;transition:.2s var(--ease);
}
.svcnav-home svg{width:14px;height:14px}
.svcnav-home:hover{color:var(--white);background:rgba(255,255,255,.05)}
.svcnav-home.is-current{
  color:var(--accent);border-color:rgba(39,212,253,.3);background:rgba(39,212,253,.08);
}

.svcnav-groups{
  display:flex;align-items:center;gap:2px;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.svcnav-groups::-webkit-scrollbar{display:none}

.svcnav-group{position:relative;flex-shrink:0}
.svcnav-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:9px;border:1px solid transparent;
  background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--grey);
  transition:.2s var(--ease);
}
.svcnav-trigger svg{width:12px;height:12px;opacity:.6;transition:transform .2s var(--ease)}
.svcnav-trigger:hover{color:var(--white);background:rgba(255,255,255,.05)}
.svcnav-group.is-active .svcnav-trigger{
  color:var(--white);background:rgba(30,124,255,.14);border-color:rgba(30,124,255,.28);
}
.svcnav-group.open .svcnav-trigger svg{transform:rotate(180deg)}

.svcnav-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  min-width:230px;padding:7px;
  background:#0a1120;border:1px solid var(--line-2, rgba(255,255,255,.12));
  border-radius:13px;
  box-shadow:0 18px 46px -12px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.18s var(--ease);
  display:flex;flex-direction:column;gap:1px;
}
.svcnav-group:hover .svcnav-menu,
.svcnav-group.open .svcnav-menu{ opacity:1;visibility:visible;transform:none; }

.svcnav-menu a{
  display:block;padding:9px 12px;border-radius:8px;
  font-size:13px;color:#b9c2d0;text-decoration:none;white-space:nowrap;
  transition:.15s var(--ease);
}
.svcnav-menu a:hover{ background:rgba(30,124,255,.14);color:var(--white); }
.svcnav-menu a.is-current{
  color:var(--accent);background:rgba(39,212,253,.09);font-weight:600;
}

.svcnav-call{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:7px 14px;border-radius:9px;
  border:1px solid rgba(39,212,253,.28);background:rgba(39,212,253,.07);
  font-size:12.5px;font-weight:600;color:var(--accent);
  text-decoration:none;transition:.2s var(--ease);
}
.svcnav-call svg{width:13px;height:13px}
.svcnav-call:hover{background:rgba(39,212,253,.14);border-color:rgba(39,212,253,.5)}

/* The hero sits below both bars now. */
.svc-hero{ padding-top:96px; }

@media (max-width:1100px){
  .svcnav-call span{ display:none; }
  .svcnav-call{ padding:7px 10px; }
}
@media (max-width:820px){
  .svcnav{ top:58px; }
  .svcnav-home span{ display:none; }
}
@media (max-width:640px){
  .svcnav-inner{ height:48px; gap:6px; }
  .svcnav-home{ padding:7px 9px; }
  .svcnav-home svg{ width:16px;height:16px }
  .svcnav-call{ display:none; }
  .svc-hero{ padding-top:86px; }
  /* Tap only on small screens — hover menus are unusable on touch. */
  .svcnav-group:hover .svcnav-menu{ opacity:0;visibility:hidden;transform:translateY(-6px); }
  .svcnav-group.open .svcnav-menu{ opacity:1;visibility:visible;transform:none; }
  .svcnav-menu{ min-width:210px; }
  /* Keep the last dropdowns on screen. */
  .svcnav-group:nth-last-child(-n+2) .svcnav-menu{ left:auto;right:0; }
}

/* Card tints on the sub-nav and the services index, matching the homepage cards. */
.svcnav-group.tint-blue.is-active   .svcnav-trigger{ background:rgba(30,124,255,.16);  border-color:rgba(30,124,255,.34);  color:#fff; }
.svcnav-group.tint-purple.is-active .svcnav-trigger{ background:rgba(122,92,255,.16);  border-color:rgba(122,92,255,.34);  color:#fff; }
.svcnav-group.tint-orange.is-active .svcnav-trigger{ background:rgba(255,106,0,.16);   border-color:rgba(255,106,0,.34);   color:#fff; }
.svcnav-group.tint-teal.is-active   .svcnav-trigger{ background:rgba(45,212,191,.16);  border-color:rgba(45,212,191,.34);  color:#fff; }
.svcnav-group.tint-pink.is-active   .svcnav-trigger{ background:rgba(255,92,138,.16);  border-color:rgba(255,92,138,.34);  color:#fff; }
.svcnav-group.tint-yellow.is-active .svcnav-trigger{ background:rgba(255,210,63,.16);  border-color:rgba(255,210,63,.34);  color:#fff; }

.svc-index-group.tint-blue   > h2{ color:#5b9bff; }
.svc-index-group.tint-purple > h2{ color:#9d86ff; }
.svc-index-group.tint-orange > h2{ color:#ff8c3a; }
.svc-index-group.tint-teal   > h2{ color:#2dd4bf; }
.svc-index-group.tint-pink   > h2{ color:#ff7ba3; }
.svc-index-group.tint-yellow > h2{ color:#ffd23f; }