@charset "utf-8";
/* CSS Document */

    /* ══════════════════════════════════════════
       DESIGN TOKENS — 360 Brand
    ══════════════════════════════════════════ */
    :root {
      --orange:    #f23000;
      --orange-dk: #C8440E;
      --orange-lt: #FF7A45;
      --black:     #0A0A0A;
      --ink:       #111111;
      --ash:       #1A1A1A;
      --mid:       #2E2E2E;
      --muted:     #999999;
      --silver:    #CCCCCC;
      --white:     #FFFFFF;
      --off-white: #F8F6F3;
      --font-display: 'Barlow Condensed', sans-serif;
      --font-body:    'Barlow', sans-serif;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
    }

    /* ══════════════════════════════════════════
       RESET & BASE
    ══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      background: var(--black);
      color: var(--white);
      overflow-x: hidden;
      cursor: none;
    }

    ::selection { background: var(--orange); color: var(--white); }

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

    /* ══════════════════════════════════════════
       CUSTOM CURSOR
    ══════════════════════════════════════════ */
    .cursor {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      mix-blend-mode: difference;
    }
    .cursor-dot {
      width: 8px; height: 8px;
      background: var(--white);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s, background .2s;
    }
    .cursor-ring {
      width: 36px; height: 36px;
      border: 1.5px solid var(--white);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: transform .12s var(--ease-out), width .3s, height .3s, opacity .3s;
      opacity: 0.6;
    }
    body:has(a:hover) .cursor-dot,
    body:has(button:hover) .cursor-dot { width: 14px; height: 14px; background: var(--orange); }
    body:has(a:hover) .cursor-ring,
    body:has(button:hover) .cursor-ring { width: 54px; height: 54px; opacity: 0; }

    /* ══════════════════════════════════════════
       SCROLL PROGRESS
    ══════════════════════════════════════════ */
    .progress-bar {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      background: var(--orange);
      width: 0%;
      z-index: 9998;
      transition: width .1s linear;
    }

    /* ══════════════════════════════════════════
       NAVIGATION
    ══════════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 900;
      padding: 0 5vw;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background .4s var(--ease-out), backdrop-filter .4s;
    }
    nav.scrolled {
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .nav-logo svg { height: 36px; width: auto; }
    .nav-wordmark {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.1rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1;
    }
    .nav-wordmark span { color: var(--orange); }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--silver);
      transition: color .2s;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 0; height: 2px;
      background: var(--orange);
      transition: width .3s var(--ease-out);
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { width: 100%; }

    .nav-cta {
      font-family: var(--font-display);
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 10px 24px;
      background: var(--orange);
      color: var(--white);
      border-radius: 2px;
      transition: background .2s, transform .2s;
    }
    .nav-cta:hover { background: var(--orange-lt); transform: translateY(-1px); }

    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 8px;
    }
    .nav-toggle span {
      display: block;
      width: 24px; height: 2px;
      background: var(--white);
      transition: transform .3s, opacity .3s;
    }

    /* Mobile nav */
    .nav-mobile {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--ink);
      z-index: 850;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
    }
    .nav-mobile.open { display: flex; }
    .nav-mobile a {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--white);
      transition: color .2s;
    }
    .nav-mobile a:hover { color: var(--orange); }

    /* ══════════════════════════════════════════
       HERO SLIDER
    ══════════════════════════════════════════ */
    .hero {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
    }

    /* ── Slides ── */
    .hero-slides {
      position: relative;
      width: 100%;
      height: 100vh;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 5vw 12vh;
      opacity: 0;
      visibility: hidden;
      transition: opacity .9s var(--ease-out), visibility .9s;
      will-change: opacity;
    }
    .hero-slide.active {
      opacity: 1;
      visibility: visible;
    }

    /* Per-slide background colours / overlays */
    .hero-slide-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .slide-1 .hero-slide-bg {
      background:
	  	url(../img/bg.png),
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(240,90,30,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 20% 80%, rgba(240,90,30,0.07) 0%, transparent 50%),
        var(--black);
    }
    .slide-2 .hero-slide-bg {
      background:
	  	url(../img/bg2.png),
        radial-gradient(ellipse 70% 55% at 30% 35%, rgba(240,90,30,0.13) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 80% 70%, rgba(200,68,14,0.08) 0%, transparent 55%),
        linear-gradient(135deg, #0d0d0d 0%, #111 100%);
    }
    .slide-3 .hero-slide-bg {
      background:
	  	url(../img/bg3.png),
        radial-gradient(ellipse 90% 60% at 50% 20%, rgba(240,90,30,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 90%, rgba(240,90,30,0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0a0a0a 0%, #131313 100%);
    }
    .slide-4 .hero-slide-bg {
      background:
	  	url(../img/bg4.png),
        radial-gradient(ellipse 65% 65% at 75% 45%, rgba(240,90,30,0.16) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 15% 60%, rgba(240,90,30,0.06) 0%, transparent 50%),
        #0c0c0c;
    }

    /* Grid lines (shared) */
    .hero-grid {
      position: absolute;
      inset: 0;
      z-index: 1;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    }

    /* Rotating 360 circle motif */
    .hero-orb {
      position: absolute;
      right: -5vw;
      top: 50%;
      transform: translateY(-50%);
      width: min(55vw, 700px);
      height: min(55vw, 700px);
      border-radius: 50%;
      border: 1px solid rgba(240,90,30,0.15);
      animation: orbit 30s linear infinite;
      z-index: 1;
    }
    .hero-orb::before {
      content: '';
      position: absolute;
      inset: 12%;
      border-radius: 50%;
      border: 1px solid rgba(240,90,30,0.10);
      animation: orbit 20s linear infinite reverse;
    }
    .hero-orb::after {
      content: '';
      position: absolute;
      inset: 24%;
      border-radius: 50%;
      border: 1px solid rgba(240,90,30,0.08);
      animation: orbit 15s linear infinite;
    }
    .hero-orb-dot {
      position: absolute;
      width: 12px; height: 12px;
      background: var(--orange);
      border-radius: 50%;
      top: 0; left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 30px var(--orange);
    }

    @keyframes orbit { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }

    /* Slide content layering */
    .hero-slide-content {
      position: relative;
      z-index: 2;
    }

    .hero-eyebrow {
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 32px; height: 1px;
      background: var(--orange);
    }

    /* Animate content in when slide becomes active */
    .hero-slide .hero-eyebrow,
    .hero-slide .hero-headline,
    .hero-slide .hero-sub,
    .hero-slide .hero-actions {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
    }
    .hero-slide.active .hero-eyebrow  { opacity: 1; transform: none; transition-delay: .15s; }
    .hero-slide.active .hero-headline { opacity: 1; transform: none; transition-delay: .28s; }
    .hero-slide.active .hero-sub      { opacity: 1; transform: none; transition-delay: .42s; }
    .hero-slide.active .hero-actions  { opacity: 1; transform: none; transition-delay: .55s; }

    .hero-headline {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(4rem, 10vw, 10rem);
      line-height: .92;
      letter-spacing: -.01em;
      text-transform: uppercase;
      max-width: 900px;
    }
    .hero-headline .accent { color: var(--orange); }
    .hero-headline .outline {
      -webkit-text-stroke: 2px var(--white);
      color: transparent;
    }

    .hero-sub {
      margin-top: 2rem;
      max-width: 480px;
      font-size: 1.05rem;
      font-weight: 300;
      color: rgba(255,255,255,0.65);
      line-height: 1.7;
    }

    .hero-actions {
      margin-top: 2.5rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    /* ── Slider controls ── */
    .slider-controls {
      position: absolute;
      bottom: 56px; /* just above the ticker */
      right: 5vw;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .slider-dots {
      display: flex;
      align-items: center;
      gap: .55rem;
    }
    .slider-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.25);
      border: none;
      padding: 0;
      transition: background .3s, transform .3s, width .3s;
      cursor: none;
    }
    .slider-dot.active {
      background: var(--orange);
      width: 24px;
      border-radius: 3px;
    }

    .slider-btn {
      width: 40px; height: 40px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.04);
      transition: background .2s, border-color .2s, color .2s, transform .2s;
      cursor: none;
    }
    .slider-btn:hover {
      background: var(--orange);
      border-color: var(--orange);
      color: var(--white);
      transform: scale(1.08);
    }

    /* Slide counter */
    .slider-counter {
      font-family: var(--font-display);
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .15em;
      color: rgba(255,255,255,0.3);
      min-width: 42px;
      text-align: center;
    }
    .slider-counter .current { color: var(--orange); }

    .btn-primary {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 16px 36px;
      background: var(--orange);
      color: var(--white);
      border-radius: 2px;
      position: relative;
      overflow: hidden;
      transition: transform .2s var(--ease-out);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--white);
      transform: translateX(-101%);
      transition: transform .3s var(--ease-out);
      mix-blend-mode: overlay;
      opacity: 0.3;
    }
    .btn-primary:hover { transform: translateY(-2px); }
    .btn-primary:hover::after { transform: translateX(0); }

    .btn-ghost {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--white);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
    }
    .btn-ghost:hover { color: var(--orange); border-color: var(--orange); }
    .btn-ghost svg { transition: transform .3s var(--ease-out); }
    .btn-ghost:hover svg { transform: translateX(4px); }

    /* Hero ticker */
    .hero-ticker {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 42px;
      background: var(--orange);
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .ticker-track {
      display: flex;
      gap: 0;
      animation: ticker 25s linear infinite;
      white-space: nowrap;
    }
    .ticker-item {
      font-family: var(--font-display);
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--white);
      padding: 0 2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .ticker-item::after { content: '✦'; opacity: 0.6; }
    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ══════════════════════════════════════════
       STATS BAND
    ══════════════════════════════════════════ */
    .stats-band {
      background: var(--ash);
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 3rem 5vw;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
    }
    .stat-item {
      padding: 2rem;
      text-align: center;
      position: relative;
    }
    .stat-item + .stat-item::before {
      content: '';
      position: absolute;
      left: 0; top: 20%; bottom: 20%;
      width: 1px;
      background: rgba(255,255,255,0.1);
    }
    .stat-num {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 900;
      color: var(--orange);
      line-height: 1;
    }
    .stat-label {
      font-size: .78rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: .5rem;
    }

    /* ══════════════════════════════════════════
       SECTION SHARED
    ══════════════════════════════════════════ */
    section { padding: 7rem 5vw; }

    .section-label {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--orange);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 1.2rem;
    }
    .section-label::before {
      content: '';
      display: block;
      width: 24px; height: 1px;
      background: var(--orange);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5vw, 4.5rem);
      font-weight: 900;
      line-height: .95;
      letter-spacing: -.01em;
      text-transform: uppercase;
    }
    .section-title .orange { color: var(--orange); }

    .section-body {
      font-size: 1.05rem;
      font-weight: 300;
      color: rgba(255,255,255,0.6);
      line-height: 1.75;
      max-width: 520px;
      margin-top: 1.2rem;
    }

    /* Reveal on scroll */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }
    .reveal-delay-5 { transition-delay: .5s; }

    /* ══════════════════════════════════════════
       ABOUT SECTION
    ══════════════════════════════════════════ */
    #about {
      background: var(--black);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
    }

    .about-visual {
      position: relative;
    }
    .about-card {
      background: var(--ash);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 4px;
      padding: 3rem;
      position: relative;
      overflow: hidden;
    }
    .about-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 4px; height: 100%;
      background: var(--orange);
    }
    .about-big-num {
      font-family: var(--font-display);
      font-size: 7rem;
      font-weight: 900;
      line-height: 1;
      color: rgba(240,90,30,0.12);
      position: absolute;
      right: 1.5rem;
      top: 1rem;
      pointer-events: none;
      user-select: none;
    }
    .about-card-title {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
    .about-card-body {
      font-size: .9rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.7;
    }

    .about-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .about-rating {
      margin-top: 2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.2rem 1.5rem;
      background: rgba(240,90,30,0.08);
      border: 1px solid rgba(240,90,30,0.2);
      border-radius: 4px;
    }
    .stars { color: var(--orange); font-size: 1.1rem; letter-spacing: 2px; }
    .rating-text { font-size: .85rem; color: rgba(255,255,255,0.6); }
    .rating-text strong { color: var(--white); }

    .about-tagline {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.5rem);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1.5rem;
      letter-spacing: -.01em;
    }
    .about-tagline .orange { color: var(--orange); }

    .about-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .7rem;
      margin-top: 1.5rem;
    }
    .about-list li {
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      font-size: .9rem;
      color: rgba(255,255,255,0.65);
    }
    .about-list li::before {
      content: '▸';
      color: var(--orange);
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* ══════════════════════════════════════════
       SERVICES — REDESIGNED
    ══════════════════════════════════════════ */
    #services {
      background: var(--ink);
      padding: 6rem 5vw 7rem;
    }

    .services-topbar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: 3rem;
      flex-wrap: wrap;
    }
    .services-intro {
      font-size: .95rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.75;
      max-width: 420px;
    }

    /* ── Service Category Tabs ── */
    .svc-tabs {
      display: flex;
      gap: 0;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .svc-tab {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      padding: .8rem 1.5rem;
      color: var(--muted);
      border: none;
      background: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      white-space: nowrap;
      transition: color .2s, border-color .2s, background .2s;
      cursor: none;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .svc-tab .tab-badge {
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .08em;
      padding: 2px 6px;
      border-radius: 2px;
      background: var(--orange);
      color: var(--white);
      text-transform: uppercase;
    }
    .svc-tab:hover { color: var(--white); }
    .svc-tab.active { color: var(--orange); border-bottom-color: var(--orange); }

    .svc-panel { display: none; }
    .svc-panel.active { display: block; }

    /* ── BTL / Print Hero Layout ── */
    .svc-hero-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }

    /* Feature card — large, orange-accent, left column spanning 2 rows */
    .svc-feature-card {
      background: linear-gradient(135deg, #1a1a1a 0%, #161616 100%);
      border: 1px solid rgba(240,90,30,0.25);
      border-radius: 8px;
      padding: 2.8rem;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      cursor: none;
      transition: border-color .3s, box-shadow .3s;
    }
    .svc-feature-card:hover {
      border-color: rgba(240,90,30,0.55);
      box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 0 80px rgba(240,90,30,0.04);
    }
    .svc-feature-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 55% at 80% 20%, rgba(240,90,30,0.10) 0%, transparent 65%);
      pointer-events: none;
    }
    /* Giant watermark icon */
    .svc-feature-card::after {
      content: '';
      position: absolute;
      right: -1.5rem; bottom: -1.5rem;
      width: 200px; height: 200px;
      border-radius: 50%;
      border: 40px solid rgba(240,90,30,0.05);
      pointer-events: none;
    }
    .svc-feature-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--orange);
      background: rgba(240,90,30,0.12);
      border: 1px solid rgba(240,90,30,0.25);
      border-radius: 2px;
      padding: 5px 12px;
      margin-bottom: 1.5rem;
      width: fit-content;
    }
    .svc-feature-badge::before {
      content: '';
      width: 6px; height: 6px;
      background: var(--orange);
      border-radius: 50%;
      animation: pulse-dot 1.8s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .4; transform: scale(.7); }
    }
    .svc-feature-icon {
      width: 56px; height: 56px;
      color: var(--orange);
      margin-bottom: 1.5rem;
    }
    .svc-feature-title {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 2rem;
      text-transform: uppercase;
      letter-spacing: .02em;
      line-height: 1.05;
      margin-bottom: 1rem;
    }
    .svc-feature-title .accent { color: var(--orange); }
    .svc-feature-desc {
      font-size: .9rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.75;
      margin-bottom: 1.8rem;
      flex: 1;
    }
    /* Sub-items list inside feature card */
    .svc-feature-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem .8rem;
      margin-bottom: 2rem;
    }
    .svc-feature-list li {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      list-style: none;
    }
    .svc-feature-list li::before {
      content: '';
      width: 5px; height: 5px;
      background: var(--orange);
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ── Standard service card ── */
    .svc-card {
      background: #161616;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: .75rem;
      position: relative;
      overflow: hidden;
      cursor: none;
      transition: border-color .25s, transform .25s var(--ease-out), box-shadow .25s;
    }
    .svc-card:hover {
      border-color: rgba(240,90,30,0.3);
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(0,0,0,0.35);
    }
    .svc-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      height: 2px; width: 0;
      background: var(--orange);
      transition: width .4s var(--ease-out);
    }
    .svc-card:hover::after { width: 100%; }

    .svc-card-icon {
      width: 40px; height: 40px;
      color: var(--orange);
      opacity: .8;
    }
    .svc-card-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      line-height: 1.15;
    }
    .svc-card-desc {
      font-size: .8rem;
      color: rgba(255,255,255,0.45);
      line-height: 1.7;
      flex: 1;
    }
    .svc-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
    }
    .svc-card-tag {
      font-family: var(--font-display);
      font-size: .6rem;
      font-weight: 600;
      letter-spacing: .11em;
      text-transform: uppercase;
      padding: 3px 8px;
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.35);
      border-radius: 2px;
    }
    .svc-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-display);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--orange);
      margin-top: auto;
      transition: gap .2s;
    }
    .svc-card-link:hover { gap: 10px; }

    /* Grid variants */
    .svc-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
    }
    .svc-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
    }
    .svc-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.2rem;
    }

    /* CTA row under panels */
    .svc-cta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .svc-cta-text {
      font-family: var(--font-display);
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
    }
    .svc-cta-text strong { color: var(--white); }

    /* Responsive */
    @media (max-width: 1024px) {
      .svc-hero-layout { grid-template-columns: 1fr; }
      .svc-grid-4 { grid-template-columns: repeat(2, 1fr); }
      .svc-grid-3 { grid-template-columns: repeat(2, 1fr); }
      .svc-feature-list { grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .svc-tabs { gap: .2rem; }
      .svc-tab { font-size: .7rem; padding: .6rem 1rem; }
      .svc-grid-3, .svc-grid-4, .svc-grid-2 { grid-template-columns: 1fr; }
      .svc-feature-list { grid-template-columns: 1fr 1fr; }
      .svc-feature-title { font-size: 1.5rem; }
      .services-topbar { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 480px) {
      .svc-feature-card { padding: 1.8rem; }
      .svc-feature-list { grid-template-columns: 1fr 1fr; }
    }

    /* ══════════════════════════════════════════
       PROCESS SECTION
    ══════════════════════════════════════════ */
    #process {
      background: var(--orange);
      color: var(--white);
      position: relative;
      overflow: hidden;
    }
    #process::before {
      content: '360°';
      position: absolute;
      right: -2rem;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-display);
      font-size: 30vw;
      font-weight: 900;
      color: rgba(0,0,0,0.07);
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    #process .section-label { color: rgba(0,0,0,0.5); }
    #process .section-label::before { background: rgba(0,0,0,0.4); }
    #process .section-title { color: var(--black); }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 3.5rem;
      position: relative;
    }
    .process-steps::before {
      content: '';
      position: absolute;
      top: 28px; left: 12.5%;
      right: 12.5%;
      height: 1px;
      background: rgba(0,0,0,0.2);
      z-index: 0;
    }
    .process-step { padding: 0 1.5rem; position: relative; z-index: 1; }
    .step-dot {
      width: 56px; height: 56px;
      background: var(--black);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
    }
    .step-dot span {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 900;
      color: var(--orange);
    }
    .step-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--black);
      margin-bottom: .6rem;
    }
    .step-body { font-size: .85rem; color: rgba(0,0,0,0.6); line-height: 1.65; }

    /* ══════════════════════════════════════════
       WORK / PORTFOLIO
    ══════════════════════════════════════════ */
    #work {
      background: var(--black);
    }
    .work-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3rem;
      gap: 2rem;
    }
    .work-link {
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--orange);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      transition: gap .3s;
    }
    .work-link:hover { gap: 14px; }

    .work-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 1.5px;
    }
    .work-card {
      position: relative;
      overflow: hidden;
      background: var(--ash);
      aspect-ratio: 3/4;
    }
    .work-card:first-child {
      grid-column: span 2;
      aspect-ratio: 16/9;
    }
    .work-card-bg {
      width: 100%; height: 100%;
      transition: transform .6s var(--ease-out);
    }
    .work-card:hover .work-card-bg { transform: scale(1.05); }
    .work-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.8rem;
      transform: translateY(4px);
      transition: transform .3s;
    }
    .work-card:hover .work-overlay { transform: translateY(0); }
    .work-cat {
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: .4rem;
    }
    .work-name {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 800;
      text-transform: uppercase;
      line-height: 1.1;
    }
    .work-arrow {
      position: absolute;
      top: 1.2rem; right: 1.2rem;
      width: 38px; height: 38px;
      background: var(--orange);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity .3s, transform .3s;
    }
    .work-card:hover .work-arrow { opacity: 1; transform: scale(1); }

    /* Placeholder artwork for cards */
    .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
    .ph-1 { background: linear-gradient(135deg, #1a1a1a 0%, #2d1a0a 100%); }
    .ph-2 { background: linear-gradient(135deg, #0d1a0d 0%, #1a2d1a 100%); }
    .ph-3 { background: linear-gradient(135deg, #1a0d1a 0%, #2d1a2d 100%); }
    .ph-4 { background: linear-gradient(135deg, #0d1a1a 0%, #1a2d2d 100%); }
    .ph-5 { background: linear-gradient(135deg, #1a1a0d 0%, #2d2d1a 100%); }
    .ph-inner {
      font-family: var(--font-display);
      font-size: 4rem;
      font-weight: 900;
      color: rgba(240,90,30,0.15);
      text-transform: uppercase;
      letter-spacing: -.03em;
    }

    /* ══════════════════════════════════════════
       WHY 360
    ══════════════════════════════════════════ */
    #why {
      background: var(--ash);
    }
    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
      margin-top: 3rem;
    }

    .why-items { display: flex; flex-direction: column; gap: 0; }
    .why-item {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 1.5rem;
      align-items: flex-start;
      padding: 1.8rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: border-color .3s;
    }
    .why-item:hover { border-color: rgba(240,90,30,0.3); }
    .why-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
    .why-icon {
      width: 50px; height: 50px;
      background: rgba(240,90,30,0.1);
      border: 1px solid rgba(240,90,30,0.2);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      flex-shrink: 0;
    }
    .why-item-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: .4rem;
    }
    .why-item-body { font-size: .85rem; color: rgba(255,255,255,0.5); line-height: 1.65; }

    .why-visual {
      position: relative;
    }
    .why-big-card {
      background: var(--black);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 6px;
      padding: 3rem;
      position: relative;
      overflow: hidden;
    }
    .why-big-card::before {
      content: '';
      position: absolute;
      top: -40%; right: -40%;
      width: 80%;
      padding-bottom: 80%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(240,90,30,0.08) 0%, transparent 70%);
    }
    .why-quote {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 2rem;
    }
    .why-quote .orange { color: var(--orange); }

    .why-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: rgba(255,255,255,0.06);
    }
    .why-metric {
      background: var(--ash);
      padding: 1.4rem;
    }
    .why-metric-num {
      font-family: var(--font-display);
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--orange);
      line-height: 1;
    }
    .why-metric-label {
      font-size: .72rem;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-top: .3rem;
    }

    /* ══════════════════════════════════════════
       PLATFORMS STRIP
    ══════════════════════════════════════════ */
    .platforms {
      background: var(--black);
      padding: 3rem 5vw;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .platforms-label {
      font-family: var(--font-display);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      margin-bottom: 2rem;
    }
    .platforms-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.5rem;
      flex-wrap: wrap;
    }
    .platform-pill {
      font-family: var(--font-display);
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      padding: 8px 18px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px;
      transition: color .3s, border-color .3s;
    }
    .platform-pill:hover { color: var(--orange); border-color: var(--orange); }

    /* ══════════════════════════════════════════
       TESTIMONIAL
    ══════════════════════════════════════════ */
    #testimonials {
      background: var(--ink);
      text-align: center;
    }
    .testimonial-wrap {
      max-width: 800px;
      margin: 3rem auto 0;
    }
    .testimonial-rating {
      font-size: 1.5rem;
      color: var(--orange);
      letter-spacing: 4px;
      margin-bottom: 2rem;
    }
    .testimonial-quote {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--white);
      margin-bottom: 2rem;
    }
    .testimonial-meta { font-size: .85rem; color: var(--muted); }
    .testimonial-meta strong { color: var(--white); }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
      margin-top: 3rem;
      background: rgba(255,255,255,0.06);
    }
    .t-card {
      background: var(--ink);
      padding: 2rem;
      transition: background .3s;
    }
    .t-card:hover { background: var(--ash); }
    .t-stars { color: var(--orange); font-size: .85rem; margin-bottom: .8rem; }
    .t-text { font-size: .88rem; color: rgba(255,255,255,0.6); line-height: 1.65; margin-bottom: 1.2rem; font-style: italic; }
    .t-author {
      font-family: var(--font-display);
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--white);
    }
    .t-role { font-size: .72rem; color: var(--muted); margin-top: .2rem; }

    /* ══════════════════════════════════════════
       CTA BAND
    ══════════════════════════════════════════ */
    .cta-band {
      background: var(--orange);
      padding: 6rem 5vw;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0,0,0,0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,0,0,0.1) 0%, transparent 60%);
    }
    .cta-band-title {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 6vw, 5.5rem);
      font-weight: 900;
      line-height: .92;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 1.5rem;
      position: relative;
    }
    .cta-band-sub {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.8);
      margin-bottom: 2.5rem;
      position: relative;
    }
    .btn-white {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 16px 40px;
      background: var(--white);
      color: var(--orange);
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: transform .2s, background .2s;
      position: relative;
    }
    .btn-white:hover { transform: translateY(-2px); background: var(--black); color: var(--white); }

    /* ══════════════════════════════════════════
       CONTACT
    ══════════════════════════════════════════ */
    #contact {
      background: var(--black);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: start;
    }

    .contact-info { padding-top: 1rem; }

    .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
      padding: 1.4rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .contact-detail:first-of-type { border-top: 1px solid rgba(255,255,255,0.07); }
    .contact-icon {
      width: 40px; height: 40px;
      background: rgba(240,90,30,0.1);
      border: 1px solid rgba(240,90,30,0.2);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      flex-shrink: 0;
    }
    .contact-label {
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: .2rem;
    }
    .contact-value {
      font-size: .95rem;
      color: var(--white);
      font-weight: 400;
    }
    .contact-value a { transition: color .2s; }
    .contact-value a:hover { color: var(--orange); }

    .contact-map {
      margin-top: 2rem;
      background: var(--ash);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 4px;
      overflow: hidden;
      height: 220px;
	  width:100%;
      position: relative;
    }
    .contact-map iframe { width: 100%; height: 100%; border: 0; filter: invert(90%) hue-rotate(180deg); }

    /* Contact Form */
    .contact-form-wrap {}
    .form-title {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .03em;
      margin-bottom: .5rem;
    }
    .form-sub { font-size: .88rem; color: rgba(255,255,255,0.45); margin-bottom: 2rem; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    .form-group { margin-bottom: 1rem; }
    .form-group label {
      display: block;
      font-family: var(--font-display);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: .5rem;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      background: var(--ash);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 2px;
      padding: 12px 16px;
      color: var(--white);
      font-family: var(--font-body);
      font-size: .9rem;
      transition: border-color .2s;
      outline: none;
      -webkit-appearance: none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--orange);
    }
    .form-group select { cursor: none; }
    .form-group select option { background: var(--ash); }
    .form-group textarea { resize: vertical; min-height: 120px; }

    .form-submit {
      width: 100%;
      padding: 16px;
      background: var(--orange);
      color: var(--white);
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      border-radius: 2px;
      cursor: none;
      transition: background .2s, transform .2s;
      margin-top: .5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .form-submit:hover { background: var(--orange-lt); transform: translateY(-1px); }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    footer {
      background: var(--ink);
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 4rem 5vw 2rem;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem;
      margin-bottom: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .footer-brand {}
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1rem;
    }
    .footer-logo svg { height: 32px; }
    .footer-logo-text {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .footer-logo-text span { color: var(--orange); }
    .footer-desc {
      font-size: .85rem;
      color: rgba(255,255,255,0.4);
      line-height: 1.65;
      max-width: 280px;
      margin-bottom: 1.5rem;
    }
    .footer-social {
      display: flex;
      gap: .8rem;
    }
    .social-btn {
      width: 36px; height: 36px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.4);
      transition: background .2s, color .2s, border-color .2s;
    }
    .social-btn:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }

    .footer-col-title {
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 1.2rem;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
    .footer-links a {
      font-size: .85rem;
      color: rgba(255,255,255,0.4);
      transition: color .2s;
    }
    .footer-links a:hover { color: var(--orange); }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .footer-copy { font-size: .78rem; color: rgba(255,255,255,0.25); }
    .footer-copy a { color: var(--orange); }
    .footer-legal {
      display: flex;
      gap: 1.5rem;
    }
    .footer-legal a {
      font-size: .75rem;
      color: rgba(255,255,255,0.25);
      transition: color .2s;
    }
    .footer-legal a:hover { color: var(--white); }

    /* ══════════════════════════════════════════
       BACK TO TOP
    ══════════════════════════════════════════ */
    .back-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 48px; height: 48px;
      background: var(--orange);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      z-index: 500;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .3s, transform .3s;
      cursor: none;
    }
    .back-top.visible { opacity: 1; transform: translateY(0); }
    .back-top:hover { background: var(--orange-lt); }

    /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .footer-top { grid-template-columns: 1fr 1fr; }
      .stats-band { grid-template-columns: repeat(2, 1fr); }
      .stat-item:nth-child(3)::before { display: none; }
    }

    @media (max-width: 768px) {
      .nav-links, .nav-cta { display: none; }
      .nav-toggle { display: flex; }

      #about { grid-template-columns: 1fr; gap: 3rem; }
      .process-steps { grid-template-columns: 1fr 1fr; }
      .process-steps::before { display: none; }
      .work-grid { grid-template-columns: 1fr; }
      .work-card:first-child { grid-column: span 1; aspect-ratio: 4/3; }
      .why-grid { grid-template-columns: 1fr; gap: 3rem; }
      .testimonials-grid { grid-template-columns: 1fr; }
      #contact { grid-template-columns: 1fr; gap: 3rem; }
      .form-row { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; text-align: center; }
      .stats-band { grid-template-columns: 1fr 1fr; }
      .about-cards-grid { grid-template-columns: 1fr; }
      body { cursor: auto; }
      .cursor { display: none; }
      button, a { cursor: pointer; }
      .form-group select, .form-submit { cursor: pointer; }
    }

    @media (max-width: 480px) {
      section { padding: 5rem 5vw; }
      .process-steps { grid-template-columns: 1fr; }
      .hero-headline { font-size: clamp(3rem, 13vw, 5rem); }
      .stats-band { grid-template-columns: 1fr; }
      .stat-item + .stat-item::before { display: none; border-top: 1px solid rgba(255,255,255,0.07); width: auto; top: 0; height: 1px; }
      .slider-controls { right: 5vw; bottom: 52px; gap: .6rem; }
      .slider-counter { display: none; }
    }

    /* ══════════════════════════════════════════
       PRODUCT CATALOG
    ══════════════════════════════════════════ */
    #catalog {
      padding: 6rem 5vw 7rem;
      background: #0e0e0e;
    }

    .catalog-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: 3rem;
      flex-wrap: wrap;
    }
    .catalog-header-left { max-width: 560px; }

    /* Category tabs */
    .catalog-tabs {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      padding-bottom: 0;
    }
    .cat-tab {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: .7rem 1.4rem;
      color: var(--muted);
      border-bottom: 2px solid transparent;
      transition: color .2s, border-color .2s;
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
      margin-bottom: -1px;
      white-space: nowrap;
      cursor: none;
    }
    .cat-tab:hover { color: var(--white); }
    .cat-tab.active { color: var(--orange); border-bottom-color: var(--orange); }

    /* Product grid */
    .catalog-panel { display: none; }
    .catalog-panel.active { display: block; }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1.2rem;
    }

    /* Product card */
    .product-card {
      background: #161616;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color .25s, transform .25s var(--ease-out), box-shadow .25s;
      cursor: none;
    }
    .product-card:hover {
      border-color: rgba(240,90,30,0.35);
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    }

    /* Card visual / icon area */
    .product-card-visual {
      position: relative;
      aspect-ratio: 4/3;
      background: #1c1c1c;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .product-card-visual svg {
      width: 52px;
      height: 52px;
      color: rgba(240,90,30,0.35);
      transition: color .3s, transform .3s var(--ease-out);
    }
    .product-card:hover .product-card-visual svg {
      color: var(--orange);
      transform: scale(1.1);
    }
    /* Abstract geometric pattern per card */
    .product-card-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 70% 30%, rgba(240,90,30,0.08) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(240,90,30,0.05) 0%, transparent 40%);
      transition: opacity .3s;
    }
    .product-card:hover .product-card-visual::before { opacity: 1.6; }

    /* Badge */
    .product-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      font-family: var(--font-display);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 2px;
    }
    .badge-hot    { background: var(--orange); color: var(--white); }
    .badge-new    { background: #22c55e;       color: var(--white); }
    .badge-promo  { background: #a855f7;       color: var(--white); }
    .badge-popular{ background: #3b82f6;       color: var(--white); }

    /* Card body */
    .product-card-body {
      padding: 1.1rem 1.2rem 1.3rem;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .product-card-name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: .35rem;
      line-height: 1.2;
    }
    .product-card-desc {
      font-size: .8rem;
      color: var(--muted);
      line-height: 1.55;
      margin-bottom: 1rem;
      flex: 1;
    }
    .product-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
    }
    .product-price {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .85rem;
      color: var(--white);
      line-height: 1.2;
    }
    .product-price .from {
      font-size: .65rem;
      font-weight: 400;
      color: var(--muted);
      display: block;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .product-price .amount { color: var(--orange); font-size: 1rem; }

    .product-card-btn {
      font-family: var(--font-display);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 7px 14px;
      background: rgba(240,90,30,0.12);
      color: var(--orange);
      border: 1px solid rgba(240,90,30,0.25);
      border-radius: 2px;
      white-space: nowrap;
      transition: background .2s, border-color .2s, color .2s;
      cursor: none;
    }
    .product-card-btn:hover {
      background: var(--orange);
      color: var(--white);
      border-color: var(--orange);
    }

    /* "See All" row */
    .catalog-see-all {
      margin-top: 2.2rem;
      text-align: center;
    }
    .catalog-see-all a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--orange);
      border: 1px solid rgba(240,90,30,0.3);
      border-radius: 2px;
      padding: 12px 32px;
      transition: background .2s, color .2s;
    }
    .catalog-see-all a:hover {
      background: var(--orange);
      color: var(--white);
    }

    /* Trust strip inside catalog */
    .catalog-trust {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      margin-top: 3.5rem;
      padding-top: 2.5rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      flex: 1;
      min-width: 180px;
    }
    .trust-icon {
      width: 40px; height: 40px;
      background: rgba(240,90,30,0.1);
      border: 1px solid rgba(240,90,30,0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      flex-shrink: 0;
    }
    .trust-label {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1.3;
    }
    .trust-sub {
      font-size: .72rem;
      color: var(--muted);
      margin-top: 2px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .catalog-header { flex-direction: column; align-items: flex-start; }
      .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
      .catalog-tabs { gap: .25rem; }
      .cat-tab { font-size: .7rem; padding: .6rem 1rem; }
      .catalog-trust { gap: 1.2rem; }
    }
    @media (max-width: 480px) {
      .product-grid { grid-template-columns: 1fr 1fr; }
      .catalog-trust { flex-direction: column; }
    }
	
	
	
	
	
	
    /* ══════════════════════════════════════════
       ABOUT PAGE — SHARED UTILITIES & ANIMATIONS
    ══════════════════════════════════════════ */

    /* Material Symbols font settings */
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      font-family: 'Material Symbols Outlined';
    }

    /* Pulse animation (live dot) */
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: .5; transform: scale(1.2); }
    }
    .pulse-dot { animation: pulse 1.8s cubic-bezier(0.4,0,0.6,1) infinite; }

    /* Orbital / slow-spin decoration */
    @keyframes spin-slow { to { transform: rotate(360deg); } }
    .spin-slow { animation: spin-slow 20s linear infinite; }

    /* ── About-page colour aliases (map to global tokens) ── */
    :root {
      --clr-bg:            var(--black);
      --clr-surface:       var(--ash);
      --clr-surface-low:   #1c1b1b;
      --clr-surface-high:  var(--mid);
      --clr-accent:        var(--orange);
      --clr-accent-bright: var(--orange-lt);
      --clr-text:          var(--white);
      --clr-text-muted:    var(--muted);
      --clr-border:        rgba(255,255,255,0.06);
    }

    /* ── About hero ── */
    .about-hero {
      padding-top: 160px;
      padding-bottom: 5rem;
      padding-inline: 5vw;
      position: relative;
      overflow: hidden;
	  background: url(../img/about-bg.jpg);
    }
    .about-hero__glow {
      position: absolute;
      top: 0; right: 0;
      width: clamp(300px, 40vw, 600px);
      height: clamp(300px, 40vw, 600px);
      background: rgba(252,90,10,0.08), url(../img/bg.png);
      border-radius: 50%;
      filter: blur(100px);
      transform: translate(30%, -30%);
      pointer-events: none;
    }

    /* ── body-lg (about page extended text style) ── */
    .body-lg {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.75;
      color: var(--clr-text-muted);
    }

    /* ── Vision section ── */
    .vision-section {
      padding: 5rem 5vw;
    }
    @media (min-width: 768px) { .vision-section { padding: 7rem 5vw; } }
    .vision-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      align-items: center;
    }
    @media (min-width: 768px) {
      .vision-grid { grid-template-columns: 5fr 7fr; gap: 2rem; }
    }
    
    .vision-img-wrap img {
      width: 100%; height: 100%; object-fit: cover;
      opacity: 0.6;
      transition: transform 0.7s ease, opacity 0.7s ease;
    }
    .vision-img-wrap:hover img { transform: scale(1.05); opacity: 0.8; }
    .vision-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--clr-bg) 0%, transparent 60%);
      pointer-events: none;
    }
    .data-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--clr-accent);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      letter-spacing: 0.2em;
      font-weight: 700;
      text-transform: uppercase;
    }

    /* ── Process section ── */
    .process-section {
      padding: 5rem 5vw;
      background: #0e0e0e;
    }
    @media (min-width: 768px) { .process-section { padding: 7rem 5vw; } }
    .process-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 3rem;
    }
    @media (min-width: 640px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
    .process-card {
      background: var(--clr-surface);
      padding: 2.5rem;
      border: 1px solid var(--clr-border);
      transition: border-color 0.3s;
    }
    .process-card:hover { border-color: rgba(252,90,10,0.4); }
    .process-num {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 32px;
      font-weight: 900;
      color: var(--clr-accent);
      margin-bottom: 1rem;
    }
    .process-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 24px;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--clr-text);
      margin-bottom: 1rem;
    }

    /* ── Why 360 ── */
    .why-section {
      padding: 5rem 5vw;
    }
    @media (min-width: 768px) { .why-section { padding: 7rem 5vw; } }
    .why-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      align-items: center;
    }
    @media (min-width: 1024px) { .why-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
    .why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2rem; }
    .why-item { display: flex; gap: 1.5rem; }
    .why-icon { color: var(--clr-accent); flex-shrink: 0; margin-top: 2px; font-size: 22px; }
    .why-item-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 14px;
      letter-spacing: 0.15em;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--clr-text);
      margin-bottom: 0.5rem;
    }
    .why-img-wrap {
      position: relative;
      aspect-ratio: 1;
      background: var(--clr-surface);
      overflow: hidden;
      border: 1px solid var(--clr-border);
    }
    .why-img-wrap img {
      width: 100%; height: 100%; object-fit: cover;
      filter: grayscale(1);
      opacity: 0.8;
      transition: filter 0.7s ease, opacity 0.7s ease;
    }
    .why-img-wrap:hover img { filter: grayscale(0); opacity: 1; }
    .why-badge {
      position: absolute;
      bottom: -2rem;
      left: -2rem;
      background: var(--clr-accent);
      padding: 1.5rem 2rem;
      display: none;
    }
    @media (min-width: 640px) { .why-badge { display: block; } }
    .why-badge-text {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 24px;
      font-weight: 900;
      text-transform: uppercase;
      color: #5b1a00;
      line-height: 1;
    }

    /* ── Team section ── */
    .team-section {
      padding: 5rem 5vw;
      background: var(--clr-surface-low);
    }
	
	.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: auto;
	}
	
    @media (min-width: 768px) { .team-section { padding: 7rem 5vw; } }
    
    .team-card { }
    .team-card-img {
      aspect-ratio: 3/4;
      background: var(--clr-surface);
      position: relative;
      overflow: hidden;
      margin-bottom: 1.5rem;
	   
    }
    .team-card-img img {
      width: 100%; height: 100%; object-fit: cover;
      filter: grayscale(1);
      transition: filter 0.5s ease, transform 0.5s ease;
    }
    .team-card:hover .team-card-img img { filter: grayscale(0); transform: scale(1.05); }
    .team-card-quote {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 1.5rem;
      background: rgba(252,90,10,0.92);
      transform: translateY(100%);
      transition: transform 0.4s ease;
    }
    .team-card:hover .team-card-quote { transform: translateY(0); }
    .team-card-quote p {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      color: #5b1a00;
    }
    .team-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 24px;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--clr-text);
    }
    .team-role {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      letter-spacing: 0.2em;
      font-weight: 700;
      color: var(--clr-text-muted);
      text-transform: uppercase;
    }

    /* ── CTA section ── */
    .cta-section {
      padding: 5rem 5vw;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: var(--clr-bg);
    }
    @media (min-width: 768px) { .cta-section { padding: 7rem 5vw; } }
    .cta-ring {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(90vw, 700px);
      height: min(90vw, 700px);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 50%;
      pointer-events: none;
    }
    .cta-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(40px, 9vw, 90px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
      color: var(--clr-text);
      margin-bottom: 3rem;
      position: relative;
    }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      background: var(--clr-accent);
      color: #5b1a00;
      padding: 1rem 3rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      position: relative;
      transition: background 0.3s;
    }
    .cta-btn:hover { background: var(--clr-accent-bright); }
    .cta-btn .arrow {
      transition: transform 0.3s;
      font-size: 20px;
    }
    .cta-btn:hover .arrow { transform: translateX(6px); }

    /* ── Orbital ornament ── */
    .orbital {
      position: absolute;
      right: 5vw;
      top: 25%;
      display: none;
    }
    @media (min-width: 1024px) { .orbital { display: flex; align-items: center; justify-content: center; } }
    .orbital-outer {
      width: 256px; height: 256px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .orbital-inner {
      width: 192px; height: 192px;
      border: 1px solid rgba(252,90,10,0.30);
      border-radius: 50%;
      position: relative;
    }
    .orbital-dot {
      position: absolute;
      top: -4px; left: 50%;
      width: 8px; height: 8px;
      background: var(--clr-accent);
      border-radius: 50%;
      box-shadow: 0 0 10px #fc5a0a;
      transform: translateX(-50%);
    }
    .orbital-label {
      position: absolute;
      text-align: center;
    }
    .orbital-label span {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 10px;
      letter-spacing: 0.3em;
      color: var(--clr-text-muted);
      display: block;
    }
    .live-dot {
      width: 8px; height: 8px;
      background: #22c55e;
      border-radius: 50%;
      margin: 4px auto 0;
    }

    /* ── Breadcrumb ── */
    .breadcrumb {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clr-text-muted);
      margin-bottom: 1.5rem;
    }
    .breadcrumb a { color: var(--clr-text-muted); text-decoration: none; }
    .breadcrumb a:hover { color: var(--clr-accent); }
    .breadcrumb span { color: var(--clr-accent); margin: 0 0.5rem; }

    /* ══════════════════════════════════════════
       ABOUT PAGE — HISTORY TIMELINE
    ══════════════════════════════════════════ */
    .about-history {
      padding: 7rem 5vw;
      background: #0e0e0e;
    }
    .about-history__inner { max-width: 900px; margin: 0 auto; }

    .timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 90px;
      top: 0; bottom: 0;
      width: 1px;
      background: rgba(255,255,255,0.08);
    }
    .timeline-item {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 0 2.5rem;
      padding: 2.5rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      position: relative;
    }
    .timeline-item:last-child { border-bottom: none; }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: 90px;
      top: 2.8rem;
      width: 10px; height: 10px;
      background: var(--orange);
      border-radius: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 12px rgba(242,48,0,0.5);
    }
    .timeline-year {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: .1em;
      color: var(--orange);
      text-align: right;
      padding-top: .25rem;
      padding-right: 1.5rem;
    }
    .timeline-content { padding-left: 1.5rem; }
    .timeline-heading {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--white);
      margin-bottom: .75rem;
    }

    @media (max-width: 600px) {
      .timeline::before { left: 0; }
      .timeline-item { grid-template-columns: 1fr; padding-left: 1.5rem; }
      .timeline-item::before { left: 0; }
      .timeline-year { text-align: left; padding-right: 0; padding-left: 0; margin-bottom: .5rem; }
      .timeline-content { padding-left: 0; }
    }

    /* ══════════════════════════════════════════
       ABOUT PAGE — VISION / MISSION / PURPOSE
    ══════════════════════════════════════════ */
    .vm-section {
      padding: 7rem 5vw;
    }
    .vm-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    @media (max-width: 768px) {
      .vm-grid { grid-template-columns: 1fr; }
    }
    .vm-card {
      background: #161616;
      border: 1px solid rgba(255,255,255,0.06);
      padding: 2.5rem;
      transition: border-color .3s;
    }
    .vm-card:hover { border-color: rgba(242,48,0,0.3); }
    .vm-card--wide {
      grid-column: 1 / -1;
    }
    @media (max-width: 768px) {
      .vm-card--wide { grid-column: 1; }
    }
    .vm-card__icon {
      color: var(--orange);
      margin-bottom: 1.2rem;
    }
    .vm-card .section-label {
      margin-bottom: 1rem;
    }
    .vm-card .body-std {
      color: rgba(255,255,255,0.55);
      line-height: 1.75;
    }

    /* ══════════════════════════════════════════
       ABOUT PAGE — SERVICES OVERVIEW
    ══════════════════════════════════════════ */
    .services-overview {
      padding: 7rem 5vw;
      background: #0e0e0e;
    }
    .services-overview-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.05);
      margin-top: 0;
    }
    @media (max-width: 900px) {
      .services-overview-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 540px) {
      .services-overview-grid { grid-template-columns: 1fr; }
    }
    .sov-card {
      background: #111;
      padding: 2.5rem;
      transition: background .3s;
    }
    .sov-card:hover { background: #181818; }
    .sov-num {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 900;
      color: rgba(242,48,0,0.18);
      line-height: 1;
      margin-bottom: .75rem;
      transition: color .3s;
    }
    .sov-card:hover .sov-num { color: var(--orange); }
    .sov-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--white);
      margin-bottom: .75rem;
    }
    .sov-card .body-std {
      font-size: .88rem;
      color: rgba(255,255,255,0.45);
      line-height: 1.7;
    }

    /* ══════════════════════════════════════════
       ABOUT PAGE — CLIENTS MARQUEE
    ══════════════════════════════════════════ */
    .clients-section {
      padding: 7rem 5vw;
    }
    .clients-marquee {
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 2rem 0;
      margin-top: 3rem;
    }
    .clients-track {
      display: flex;
      align-items: center;
      gap: 2rem;
      white-space: nowrap;
      animation: marquee 18s linear infinite;
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .clients-track:hover { animation-play-state: paused; }
    .client-name {
      font-family: var(--font-display);
      font-size: 1.1rem;
	  text-align: center;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.50);
      transition: color .3s;
      flex-shrink: 0;
    }
    .client-name:hover { color: var(--orange); }
    .client-sep {
      color: var(--orange);
      font-size: 1rem;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════
       ABOUT PAGE — RESPONSIVE ADDITIONS
    ══════════════════════════════════════════ */
    @media (max-width: 768px) {
      .vm-grid { grid-template-columns: 1fr; }
      .services-overview-grid { grid-template-columns: repeat(2, 1fr); }
      .why-section .why-grid { grid-template-columns: 1fr; gap: 3rem; }
      .clients-section { padding: 5rem 5vw; }
    }
    @media (max-width: 480px) {
      .services-overview-grid { grid-template-columns: 1fr; }
      .about-history { padding: 5rem 5vw; }
    }

    /* ══════════════════════════════════════════
       UTILITY — shared across all pages
    ══════════════════════════════════════════ */
    /* Responsive image helper */
    .img-fluid { max-width: 100%; height: auto; display: block; }

    /* Mobile nav link style */
    .nav-m-link {
      font-family: var(--font-display);
      font-size: 2.8rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--white);
      transition: color .2s;
    }
    .nav-m-link:hover { color: var(--orange); }

    /* ═══════════════════════════════════════
       PRODUCTS PAGE — SCOPED STYLES
    ═══════════════════════════════════════ */

    /* ── Hero ── */
    .products-hero {
      padding-top: 160px;
      padding-bottom: 6rem;
      padding-inline: 5vw;
      position: relative;
      overflow: hidden;
      background: var(--black);
    }
    .products-hero__bg {
      position: absolute;
      inset: 0;
      background:
	  			 url(../img/product-bg.jpg),
        radial-gradient(ellipse 60% 55% at 80% 30%, rgba(242,48,0,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 10% 80%, rgba(242,48,0,0.06) 0%, transparent 50%);
      pointer-events: none;
    }
    /* Subtle grid lines */
    .products-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    }
    .products-hero__content {
      position: relative;
      z-index: 2;
      max-width: 860px;
    }
    .products-hero__eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 1.5rem;
    }
    .products-hero__eyebrow::before {
      content: '';
      display: block;
      width: 32px; height: 1px;
      background: var(--orange);
    }
    .products-hero__title {
      font-family: var(--font-display);
      font-size: clamp(56px, 10vw, 130px);
      font-weight: 900;
      line-height: .9;
      text-transform: uppercase;
      letter-spacing: -.01em;
      color: var(--white);
      margin-bottom: 2rem;
    }
    .products-hero__title .outline {
      -webkit-text-stroke: 2px var(--orange);
      color: transparent;
    }
    .products-hero__sub {
      font-family: var(--font-body);
      font-size: 1.1rem;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.55);
      max-width: 580px;
    }

    /* ── Category Nav ── */
    .cat-nav {
      position: sticky;
      top: 72px;
      z-index: 80;
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 0 5vw;
    }
    .cat-nav__inner {
      display: flex;
      align-items: center;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .cat-nav__inner::-webkit-scrollbar { display: none; }
    .cat-btn {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      padding: 1.1rem 1.5rem;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
      cursor: none;
      transition: color .2s, border-color .2s;
      margin-bottom: -1px;
    }
    .cat-btn:hover { color: var(--white); }
    .cat-btn.active { color: var(--orange); border-bottom-color: var(--orange); }

    /* ── Section wrapper ── */
    .prod-section {
      padding: 7rem 5vw;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .prod-section:nth-child(even) { background: #0d0d0d; }

    .prod-section__header {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2rem 3rem;
      align-items: start;
      margin-bottom: 4rem;
    }
    @media (max-width: 768px) {
      .prod-section__header { grid-template-columns: 1fr; }
    }
    .prod-section__num {
      font-family: var(--font-display);
      font-size: clamp(80px, 12vw, 140px);
      font-weight: 900;
      line-height: 1;
      color: rgba(242,48,0,0.10);
      letter-spacing: -.02em;
      user-select: none;
    }
    .prod-section__meta { padding-top: .5rem; }
    .prod-section__title {
      font-family: var(--font-display);
      font-size: clamp(36px, 6vw, 72px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: .95;
      color: var(--white);
      margin-bottom: 1.2rem;
    }
    .prod-section__title span { color: var(--orange); }
    .prod-section__desc {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.5);
      max-width: 600px;
    }

    /* ── Product cards grid ── */
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .prod-card {
      background: #111;
      padding: 2.2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: background .3s;
      position: relative;
      overflow: hidden;
    }
    .prod-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 0;
      background: var(--orange);
      transition: height .4s var(--ease-out);
    }
    .prod-card:hover { background: #181818; }
    .prod-card:hover::before { height: 100%; }

    .prod-card__icon {
      width: 44px; height: 44px;
      background: rgba(242,48,0,0.08);
      border: 1px solid rgba(242,48,0,0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      transition: background .3s, border-color .3s;
      flex-shrink: 0;
    }
    .prod-card:hover .prod-card__icon {
      background: rgba(242,48,0,0.15);
      border-color: rgba(242,48,0,0.4);
    }
    .prod-card__name {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--white);
      line-height: 1.2;
    }
    .prod-card__desc {
      font-family: var(--font-body);
      font-size: .88rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.42);
      flex: 1;
    }
    .prod-card__tag {
      display: inline-block;
      font-family: var(--font-display);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 3px 10px;
      background: rgba(242,48,0,0.1);
      color: var(--orange);
      border: 1px solid rgba(242,48,0,0.2);
      border-radius: 2px;
      width: fit-content;
    }

    /* ── Wide feature card (spans 2 columns) ── */
    .prod-card--feature {
      grid-column: span 2;
      flex-direction: row;
      align-items: flex-start;
      gap: 2.5rem;
      padding: 2.5rem 3rem;
    }
    @media (max-width: 640px) {
      .prod-card--feature {
        grid-column: span 1;
        flex-direction: column;
        padding: 2.2rem;
      }
    }
    .prod-card--feature .prod-card__body { flex: 1; }
    .prod-card--feature .prod-card__icon {
      width: 56px; height: 56px;
      flex-shrink: 0;
    }

    /* ── Highlight strip (orange bg) ── */
    .prod-highlight {
      background: var(--orange);
      padding: 2rem 2.5rem;
      display: flex;
      align-items: center;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .prod-highlight__quote {
      font-family: var(--font-display);
      font-size: clamp(1rem, 2.5vw, 1.3rem);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: #5b1a00;
      flex: 1;
      min-width: 260px;
      line-height: 1.3;
    }
    .prod-highlight__quote em {
      font-style: normal;
      color: rgba(255,255,255,0.85);
    }

    /* ── Materials list ── */
    .materials-list {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      margin-top: 1.5rem;
    }
    .material-tag {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 5px 14px;
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.55);
      transition: border-color .2s, color .2s;
    }
    .material-tag:hover { border-color: var(--orange); color: var(--orange); }

    /* ── Giveaway items grid ── */
    .giveaway-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 1px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.04);
      margin-top: 3rem;
    }
    .giveaway-item {
      background: #111;
      padding: 1.5rem 1.2rem;
      text-align: center;
      transition: background .2s;
    }
    .giveaway-item:hover { background: #1a1a1a; }
    .giveaway-item__icon {
      font-size: 1.8rem;
      margin-bottom: .6rem;
      display: block;
    }
    .giveaway-item__name {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }

    /* ── CTA bar ── */
    .prod-cta-bar {
      padding: 6rem 5vw;
      text-align: center;
      background: var(--black);
      position: relative;
      overflow: hidden;
    }
    .prod-cta-bar::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(90vw, 800px);
      height: min(90vw, 800px);
      border: 1px solid rgba(255,255,255,0.03);
      border-radius: 50%;
      pointer-events: none;
    }
    .prod-cta-bar__title {
      font-family: var(--font-display);
      font-size: clamp(40px, 8vw, 90px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: .95;
      color: var(--white);
      margin-bottom: 1.5rem;
      position: relative;
    }
    .prod-cta-bar__sub {
      font-family: var(--font-body);
      font-size: 1rem;
      color: rgba(255,255,255,0.45);
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }
    .prod-cta-bar .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .prod-section { padding: 5rem 5vw; }
      .prod-section__num { font-size: clamp(60px, 18vw, 100px); }
      .prod-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
      .prod-grid { grid-template-columns: 1fr; }
      .giveaway-grid { grid-template-columns: repeat(3, 1fr); }
    }
	
	
	    /* ═══════════════════════════════════════════════
       SERVICES PAGE — SCOPED STYLES
    ═══════════════════════════════════════════════ */

    /* ── Hero ── */
    .svc-hero {
      padding-top: 160px;
      padding-bottom: 0;
      padding-inline: 5vw;
      background: var(--black);
      position: relative;
      overflow: hidden;
    }
    .svc-hero__bg {
      position: absolute;
      inset: 0;
      background:
	  	url(../img/services-bg.jpg),
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(242,48,0,0.11) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(242,48,0,0.06) 0%, transparent 50%);
      pointer-events: none;
    }
    .svc-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.013) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    }
    .svc-hero__inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: end;
      padding-bottom: 5rem;
    }
    @media (max-width: 860px) {
      .svc-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
    }
    .svc-hero__eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 1.5rem;
    }
    .svc-hero__eyebrow::before {
      content: '';
      display: block;
      width: 32px; height: 1px;
      background: var(--orange);
      flex-shrink: 0;
    }
    .svc-hero__title {
      font-family: var(--font-display);
      font-size: clamp(60px, 10vw, 130px);
      font-weight: 900;
      line-height: .9;
      text-transform: uppercase;
      letter-spacing: -.01em;
      color: var(--white);
      margin-bottom: 2rem;
    }
    .svc-hero__title .outline {
      -webkit-text-stroke: 2px var(--orange);
      color: transparent;
    }
    .svc-hero__sub {
      font-family: var(--font-body);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(255,255,255,0.5);
      margin-bottom: 2.5rem;
    }
    .svc-hero__right {
      display: flex;
      flex-direction: column;
      gap: 1px;
      align-self: end;
    }
    .svc-hero__service-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 1.5rem;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      border-bottom: none;
      gap: 1rem;
      transition: background .2s, border-color .2s;
      cursor: default;
    }
    .svc-hero__service-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.05); }
    .svc-hero__service-row:hover {
      background: rgba(242,48,0,0.06);
      border-color: rgba(242,48,0,0.2);
    }
    .svc-hero__service-row:hover .svc-hero__srow-num { color: var(--orange); }
    .svc-hero__srow-num {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .2em;
      color: rgba(255,255,255,0.2);
      transition: color .2s;
      flex-shrink: 0;
    }
    .svc-hero__srow-name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--white);
      flex: 1;
    }
    .svc-hero__srow-arrow {
      color: rgba(255,255,255,0.15);
      font-size: 1rem;
      transition: color .2s, transform .2s;
    }
    .svc-hero__service-row:hover .svc-hero__srow-arrow {
      color: var(--orange);
      transform: translateX(4px);
    }

    /* ── Sticky Tab Nav ── */
    .svc-tabnav {
      position: sticky;
      top: 72px;
      z-index: 80;
      background: rgba(8,8,8,0.95);
      backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .svc-tabnav__inner {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 5vw;
    }
    .svc-tabnav__inner::-webkit-scrollbar { display: none; }
    .svc-tab-btn {
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      padding: 1.1rem 1.4rem;
      border: none;
      border-bottom: 2px solid transparent;
      background: none;
      white-space: nowrap;
      cursor: none;
      transition: color .2s, border-color .2s;
      margin-bottom: -1px;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .svc-tab-btn:hover { color: rgba(255,255,255,0.7); }
    .svc-tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }
    .tab-featured {
      font-family: var(--font-display);
      font-size: .55rem;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 2px 6px;
      background: var(--orange);
      color: var(--black);
      border-radius: 2px;
    }

    /* ── Section wrapper ── */
    .svc-section {
      padding: 6rem 5vw;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      display: none;
    }
    .svc-section.active { display: block; }
    .svc-section:nth-child(even) { background: #0d0d0d; }

    /* ── Section header ── */
    .svc-sec-header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 2rem;
      margin-bottom: 4rem;
    }
    @media (max-width: 640px) {
      .svc-sec-header { grid-template-columns: 1fr; }
    }
    .svc-sec-title {
      font-family: var(--font-display);
      font-size: clamp(38px, 6vw, 72px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: .93;
      color: var(--white);
      margin-bottom: 1rem;
    }
    .svc-sec-title span { color: var(--orange); }
    .svc-sec-desc {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.48);
      max-width: 560px;
    }

    /* ── Feature + side layout ── */
    .svc-feature-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 860px) {
      .svc-feature-layout { grid-template-columns: 1fr; }
    }

    /* ── Feature card ── */
    .svc-feat-card {
      background: var(--orange);
      padding: 2.8rem;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      position: relative;
      overflow: hidden;
    }
    .svc-feat-card::before {
      content: '';
      position: absolute;
      bottom: -40px; right: -40px;
      width: 200px; height: 200px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%;
      pointer-events: none;
    }
    .svc-feat-card::after {
      content: '';
      position: absolute;
      bottom: -80px; right: -80px;
      width: 280px; height: 280px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 50%;
      pointer-events: none;
    }
    .svc-feat-badge {
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 900;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      display: inline-block;
      width: fit-content;
    }
    .svc-feat-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
      color: var(--white);
    }
    .svc-feat-title em {
      font-style: normal;
      color: rgba(255,255,255,0.6);
    }
    .svc-feat-desc {
      font-family: var(--font-body);
      font-size: .95rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.75);
      flex: 1;
    }
    .svc-feat-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .4rem .8rem;
      list-style: none;
      padding: 0; margin: 0;
    }
    .svc-feat-list li {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      padding-left: 1rem;
      position: relative;
    }
    .svc-feat-list li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: rgba(255,255,255,0.4);
    }
    .svc-feat-cta {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-family: var(--font-display);
      font-size: .8rem;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--white);
      padding: .85rem 1.6rem;
      align-self: flex-start;
      transition: background .2s, color .2s;
    }
    .svc-feat-cta:hover { background: var(--black); color: var(--white); }

    /* ── Side cards stack ── */
    .svc-side-stack {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* ── Service card ── */
    .svc-card-p {
      background: #111;
      border: 1px solid rgba(255,255,255,0.05);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: .9rem;
      flex: 1;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, background .3s;
    }
    .svc-card-p::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 2px;
      background: var(--orange);
      transition: width .4s var(--ease-out);
    }
    .svc-card-p:hover { background: #171717; border-color: rgba(242,48,0,0.25); }
    .svc-card-p:hover::before { width: 100%; }
    .svc-card-p__icon {
      color: var(--orange);
      width: 36px; height: 36px;
      flex-shrink: 0;
    }
    .svc-card-p__title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--white);
      line-height: 1.2;
    }
    .svc-card-p__desc {
      font-family: var(--font-body);
      font-size: .88rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.42);
      flex: 1;
    }
    .svc-card-p__tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }
    .svc-tag {
      font-family: var(--font-display);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 3px 9px;
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.4);
      transition: border-color .2s, color .2s;
    }
    .svc-tag:hover { border-color: var(--orange); color: var(--orange); }
    .svc-tag--price {
      border-color: rgba(242,48,0,0.25);
      color: var(--orange);
    }
    .svc-card-p__link {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      display: flex;
      align-items: center;
      gap: .4rem;
      transition: color .2s;
      width: fit-content;
    }
    .svc-card-p__link:hover { color: var(--orange); }

    /* ── 3-col grid ── */
    .svc-grid-3col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 960px) {
      .svc-grid-3col { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .svc-grid-3col { grid-template-columns: 1fr; }
    }

    /* ── 4-col grid ── */
    .svc-grid-4col {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 1.5rem;
    }
    @media (max-width: 1024px) {
      .svc-grid-4col { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .svc-grid-4col { grid-template-columns: 1fr; }
    }

    /* ── CTA row ── */
    .svc-cta-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
      margin-top: 2.5rem;
      padding: 1.8rem 2.2rem;
      background: #161616;
      border: 1px solid rgba(255,255,255,0.05);
      border-left: 3px solid var(--orange);
    }
    .svc-cta-strip__text {
      font-family: var(--font-body);
      font-size: .95rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
    }
    .svc-cta-strip__text strong { color: var(--white); }

    /* ── Process band ── */
    .process-band {
      padding: 6rem 5vw;
      background: #0d0d0d;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .process-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 3.5rem;
      position: relative;
    }
    .process-grid::before {
      content: '';
      position: absolute;
      top: 28px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(242,48,0,0.4), rgba(242,48,0,0.4), transparent);
    }
    @media (max-width: 860px) {
      .process-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
      .process-grid::before { display: none; }
    }
    @media (max-width: 480px) {
      .process-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    }
    .process-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1rem;
      padding: 0 1rem;
    }
    .process-step__dot {
      width: 56px; height: 56px;
      background: var(--black);
      border: 1px solid rgba(242,48,0,0.35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      transition: background .3s, border-color .3s;
    }
    .process-step:hover .process-step__dot {
      background: rgba(242,48,0,0.12);
      border-color: var(--orange);
    }
    .process-step__num {
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .1em;
      color: var(--orange);
    }
    .process-step__title {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--white);
    }
    .process-step__body {
      font-family: var(--font-body);
      font-size: .82rem;
      line-height: 1.65;
      color: rgba(255,255,255,0.38);
    }

    /* ── Why band ── */
    .why-band {
      padding: 6rem 5vw;
    }
    .why-band-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }
    @media (max-width: 860px) {
      .why-band-grid { grid-template-columns: 1fr; gap: 3rem; }
    }
    .why-list-p {
      list-style: none;
      padding: 0; margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .why-item-p {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 1.2rem;
      align-items: start;
      padding: 1.8rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .why-item-p:last-child { border-bottom: none; }
    .why-item-p__icon {
      width: 44px; height: 44px;
      background: rgba(242,48,0,0.07);
      border: 1px solid rgba(242,48,0,0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      flex-shrink: 0;
      margin-top: .1rem;
    }
    .why-item-p__title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--white);
      margin-bottom: .4rem;
    }
    .why-item-p__body {
      font-family: var(--font-body);
      font-size: .88rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.42);
    }
    /* Big quote block */
    .why-quote-block {
      background: var(--orange);
      padding: 3rem;
      position: relative;
      overflow: hidden;
    }
    .why-quote-block::before {
      content: '"';
      position: absolute;
      top: -20px; left: 20px;
      font-family: var(--font-display);
      font-size: 16rem;
      font-weight: 900;
      color: rgba(255,255,255,0.07);
      line-height: 1;
      pointer-events: none;
    }
    .why-quote-text {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.15;
      color: var(--white);
      margin-bottom: 2rem;
      position: relative;
    }
    .why-stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 2rem;
    }
    .why-stat-mini__num {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 900;
      color: var(--white);
      line-height: 1;
    }
    .why-stat-mini__label {
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin-top: .3rem;
    }

    /* ── Final CTA ── */
    .svc-final-cta {
      padding: 7rem 5vw;
      background: var(--black);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .svc-final-cta::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(90vw, 700px);
      height: min(90vw, 700px);
      border: 1px solid rgba(255,255,255,0.025);
      border-radius: 50%;
      pointer-events: none;
    }
    .svc-final-cta__title {
      font-family: var(--font-display);
      font-size: clamp(42px, 8vw, 100px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: .92;
      color: var(--white);
      margin-bottom: 1.5rem;
      position: relative;
    }
    .svc-final-cta__sub {
      font-family: var(--font-body);
      font-size: 1rem;
      color: rgba(255,255,255,0.42);
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.75;
    }
    .svc-final-cta .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
    }
    .svc-contact-row {
      display: flex;
      justify-content: center;
      gap: 3rem;
      flex-wrap: wrap;
      margin-top: 2rem;
    }
    .svc-contact-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .3rem;
    }
    .svc-contact-item__label {
      font-family: var(--font-display);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
    }
    .svc-contact-item__val {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .05em;
      color: rgba(255,255,255,0.55);
      transition: color .2s;
    }
    .svc-contact-item__val:hover { color: var(--orange); }
	
	
	    /* ══════════════════════════════════════════
       DESIGN TOKENS — 360 Brand
    ══════════════════════════════════════════ */
    :root {
      --orange:    #f23000;
      --orange-dk: #C8440E;
      --orange-lt: #FF7A45;
      --black:     #0A0A0A;
      --ink:       #111111;
      --ash:       #1A1A1A;
      --mid:       #2E2E2E;
      --muted:     #999999;
      --silver:    #CCCCCC;
      --white:     #FFFFFF;
      --off-white: #F8F6F3;
      --font-display: 'Barlow Condensed', sans-serif;
      --font-body:    'Barlow', sans-serif;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
    body {
      font-family: var(--font-body);
      background: var(--black);
      color: var(--white);
      overflow-x: hidden;
      cursor: none;
    }
    ::selection { background: var(--orange); color: var(--white); }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    button { cursor: none; border: none; background: none; font-family: inherit; }

    /* ══════════════════════════════════════════
       CUSTOM CURSOR
    ══════════════════════════════════════════ */
    .cursor { position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
    .cursor-dot {
      width: 8px; height: 8px;
      background: var(--white);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s, background .2s;
    }
    .cursor-ring {
      width: 36px; height: 36px;
      border: 1.5px solid var(--white);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: transform .12s var(--ease-out), width .3s, height .3s, opacity .3s;
      opacity: 0.6;
    }
    body:has(a:hover) .cursor-dot,
    body:has(button:hover) .cursor-dot { width: 14px; height: 14px; background: var(--orange); }
    body:has(a:hover) .cursor-ring,
    body:has(button:hover) .cursor-ring { width: 54px; height: 54px; opacity: 0; }

    /* ══════════════════════════════════════════
       SCROLL PROGRESS
    ══════════════════════════════════════════ */
    .progress-bar {
      position: fixed; top: 0; left: 0;
      height: 3px; background: var(--orange);
      width: 0%; z-index: 9998;
      transition: width .1s linear;
    }

    /* ══════════════════════════════════════════
       NAVIGATION
    ══════════════════════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 900; padding: 0 5vw; height: 72px;
      display: flex; align-items: center; justify-content: space-between;
      transition: background .4s var(--ease-out), backdrop-filter .4s;
    }
    nav.scrolled {
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .nav-logo img { height: 36px; width: auto; }
    .nav-wordmark {
      font-family: var(--font-display); font-weight: 800;
      font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase;
      color: var(--white); line-height: 1;
    }
    .nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
    .nav-links a {
      font-family: var(--font-display); font-size: .85rem; font-weight: 600;
      letter-spacing: .15em; text-transform: uppercase; color: var(--silver);
      transition: color .2s; position: relative;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -4px; left: 0;
      width: 0; height: 2px; background: var(--orange);
      transition: width .3s var(--ease-out);
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { width: 100%; }
    .nav-links a.active { color: var(--orange); }
    .nav-links a.active::after { width: 100%; }
    .nav-cta {
      font-family: var(--font-display); font-size: .8rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      background: var(--orange); color: var(--white);
      padding: .6rem 1.4rem; border-radius: 2px;
      transition: background .2s, transform .2s;
    }
    .nav-cta:hover { background: var(--orange-dk); transform: translateY(-1px); }
    .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; }
    .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: all .3s; }

    .nav-mobile {
      position: fixed; inset: 0; background: var(--black);
      z-index: 800; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 2rem;
      transform: translateX(100%); transition: transform .4s var(--ease-out);
    }
    .nav-mobile.open { transform: translateX(0); }
    .nav-m-link {
      font-family: var(--font-display); font-size: 2rem; font-weight: 800;
      letter-spacing: .1em; text-transform: uppercase; color: var(--white);
      transition: color .2s;
    }
    .nav-m-link:hover { color: var(--orange); }

    @media (max-width: 900px) {
      .nav-links, .nav-cta { display: none; }
      .nav-toggle { display: flex; }
    }

    /* ══════════════════════════════════════════
       BACK TO TOP
    ══════════════════════════════════════════ */
    .back-top {
      position: fixed; bottom: 2rem; right: 2rem; z-index: 800;
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--orange); color: var(--white);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: translateY(20px);
      transition: opacity .3s, transform .3s;
    }
    .back-top.visible { opacity: 1; transform: translateY(0); }

    /* ══════════════════════════════════════════
       SERVICES HERO
    ══════════════════════════════════════════ */
    .svc-hero {
      padding-top: 160px;
      padding-bottom: 7rem;
      padding-inline: 5vw;
      position: relative;
      overflow: hidden;
      background: var(--black);
    }
    .svc-hero__bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 55% at 85% 20%, rgba(242,48,0,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 5% 90%, rgba(242,48,0,0.07) 0%, transparent 55%);
      pointer-events: none;
    }
    .svc-hero__bg::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    }
    .svc-hero__content {
      position: relative; z-index: 2; max-width: 920px;
    }
    .svc-hero__eyebrow {
      display: flex; align-items: center; gap: 14px;
      font-family: var(--font-display);
      font-size: .75rem; font-weight: 700;
      letter-spacing: .38em; text-transform: uppercase;
      color: var(--orange); margin-bottom: 1.6rem;
    }
    .svc-hero__eyebrow::before {
      content: ''; display: block; width: 36px; height: 1px; background: var(--orange);
    }
    .svc-hero__title {
      font-family: var(--font-display);
      font-size: clamp(58px, 11vw, 148px);
      font-weight: 900; line-height: .88;
      text-transform: uppercase; letter-spacing: -.01em;
      color: var(--white); margin-bottom: 2.2rem;
    }
    .svc-hero__title .outline {
      -webkit-text-stroke: 2px var(--orange);
      color: transparent;
    }
    .svc-hero__sub {
      font-size: 1.1rem; font-weight: 300;
      line-height: 1.8; color: rgba(255,255,255,0.5);
      max-width: 600px; margin-bottom: 3rem;
    }
    .svc-hero__stats {
      display: flex; gap: 4rem; flex-wrap: wrap;
    }
    .stat-item__num {
      font-family: var(--font-display); font-size: 2.8rem;
      font-weight: 900; color: var(--orange); line-height: 1;
    }
    .stat-item__label {
      font-size: .8rem; font-weight: 400;
      letter-spacing: .12em; text-transform: uppercase;
      color: rgba(255,255,255,0.4); margin-top: .3rem;
    }

    /* ══════════════════════════════════════════
       STICKY SERVICE NAV
    ══════════════════════════════════════════ */
    .svc-nav {
      position: sticky; top: 72px; z-index: 80;
      background: rgba(10,10,10,0.94);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 0 5vw;
    }
    .svc-nav__inner {
      display: flex; align-items: center;
      overflow-x: auto; scrollbar-width: none; gap: 0;
    }
    .svc-nav__inner::-webkit-scrollbar { display: none; }
    .svc-tab {
      font-family: var(--font-display); font-size: .75rem;
      font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,0.38); padding: 1.1rem 1.4rem;
      border-bottom: 2px solid transparent; border-top: none;
      border-left: none; border-right: none;
      background: none; white-space: nowrap;
      cursor: none; transition: color .2s, border-color .2s;
      margin-bottom: -1px;
    }
    .svc-tab:hover { color: var(--white); }
    .svc-tab.active { color: var(--orange); border-bottom-color: var(--orange); }

    /* ══════════════════════════════════════════
       SERVICE SECTIONS
    ══════════════════════════════════════════ */
    .svc-section {
      padding: 8rem 5vw;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      position: relative;
    }
    .svc-section:nth-child(even) { background: #0d0d0d; }

    /* Big number accent */
    .svc-num {
      position: absolute; top: 4rem; right: 5vw;
      font-family: var(--font-display);
      font-size: clamp(100px, 18vw, 220px);
      font-weight: 900; line-height: 1;
      color: rgba(242,48,0,0.055);
      letter-spacing: -.03em; user-select: none;
      pointer-events: none;
    }

    .svc-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem 6rem;
      align-items: start;
      margin-bottom: 5rem;
      position: relative; z-index: 2;
    }
    @media (max-width: 900px) {
      .svc-intro { grid-template-columns: 1fr; gap: 2rem; }
    }
    .svc-label {
      font-family: var(--font-display); font-size: .72rem;
      font-weight: 700; letter-spacing: .38em; text-transform: uppercase;
      color: var(--orange); margin-bottom: 1.2rem;
      display: flex; align-items: center; gap: 10px;
    }
    .svc-label::before {
      content: ''; display: block; width: 28px; height: 1px; background: var(--orange);
    }
    .svc-title {
      font-family: var(--font-display);
      font-size: clamp(36px, 5.5vw, 72px);
      font-weight: 900; line-height: .92;
      text-transform: uppercase; letter-spacing: -.01em;
      color: var(--white);
    }
    .svc-title span { color: var(--orange); }
    .svc-desc {
      font-size: 1rem; font-weight: 300;
      line-height: 1.8; color: rgba(255,255,255,0.5);
      margin-top: 1.6rem;
    }
    .svc-right {
      display: flex; flex-direction: column; gap: 1.2rem;
      padding-top: 1rem;
    }

    /* Feature list items */
    .svc-feature {
      display: flex; gap: 1rem; align-items: flex-start;
      padding: 1.2rem 1.4rem;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 4px;
      transition: border-color .25s, background .25s, transform .25s;
    }
    .svc-feature:hover {
      border-color: rgba(242,48,0,0.35);
      background: rgba(242,48,0,0.04);
      transform: translateX(6px);
    }
    .svc-feature__icon {
      width: 36px; height: 36px; flex-shrink: 0;
      background: rgba(242,48,0,0.12);
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      color: var(--orange);
    }
    .svc-feature__body { flex: 1; }
    .svc-feature__name {
      font-family: var(--font-display); font-size: 1rem;
      font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      color: var(--white); margin-bottom: .3rem;
    }
    .svc-feature__text {
      font-size: .88rem; line-height: 1.6;
      color: rgba(255,255,255,0.42); font-weight: 300;
    }

    /* Cards grid for sub-services */
    .svc-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
      position: relative; z-index: 2;
      margin-top: 3.5rem;
    }
    .svc-card {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px; padding: 2rem;
      transition: border-color .3s, background .3s, transform .3s;
      display: flex; flex-direction: column; gap: 1rem;
    }
    .svc-card:hover {
      border-color: rgba(242,48,0,0.3);
      background: rgba(242,48,0,0.04);
      transform: translateY(-4px);
    }
    .svc-card--hero {
      grid-column: 1 / -1;
      background: rgba(242,48,0,0.06);
      border-color: rgba(242,48,0,0.2);
      flex-direction: row; align-items: flex-start; gap: 2rem;
      flex-wrap: wrap;
    }
    @media (max-width: 600px) {
      .svc-card--hero { flex-direction: column; }
    }
    .svc-card__icon {
      width: 44px; height: 44px; flex-shrink: 0;
      background: rgba(242,48,0,0.15); border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      color: var(--orange);
    }
    .svc-card__body { flex: 1; }
    .svc-card__name {
      font-family: var(--font-display); font-size: 1.05rem;
      font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: var(--white); margin-bottom: .5rem;
    }
    .svc-card__text {
      font-size: .88rem; line-height: 1.7;
      color: rgba(255,255,255,0.44); font-weight: 300;
    }
    .svc-card__tag {
      display: inline-block; margin-top: .8rem;
      font-family: var(--font-display); font-size: .68rem;
      font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
      color: var(--orange);
      border: 1px solid rgba(242,48,0,0.35);
      padding: .25rem .7rem; border-radius: 2px;
    }
    .tag-list {
      display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem;
    }
    .tag {
      font-family: var(--font-display); font-size: .65rem;
      font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      padding: .2rem .6rem; border-radius: 2px;
    }

    /* Process strip */
    .svc-process {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 0;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px; overflow: hidden;
      margin-top: 5rem; position: relative; z-index: 2;
    }
    .process-step {
      padding: 2rem 1.8rem;
      border-right: 1px solid rgba(255,255,255,0.06);
      position: relative; overflow: hidden;
      transition: background .3s;
    }
    .process-step:last-child { border-right: none; }
    .process-step:hover { background: rgba(242,48,0,0.05); }
    .process-step__num {
      font-family: var(--font-display); font-size: 3rem;
      font-weight: 900; color: rgba(242,48,0,0.15);
      line-height: 1; margin-bottom: .8rem;
    }
    .process-step__title {
      font-family: var(--font-display); font-size: .95rem;
      font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--white); margin-bottom: .4rem;
    }
    .process-step__text {
      font-size: .83rem; line-height: 1.6;
      color: rgba(255,255,255,0.38); font-weight: 300;
    }
    @media (max-width: 768px) {
      .svc-process { grid-template-columns: 1fr 1fr; }
      .process-step:nth-child(2n) { border-right: none; }
    }
    @media (max-width: 480px) {
      .svc-process { grid-template-columns: 1fr; }
      .process-step { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    }

    /* Divider with label */
    .section-divider {
      display: flex; align-items: center; gap: 1.5rem;
      margin-bottom: 3rem; position: relative; z-index: 2;
    }
    .section-divider__line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
    .section-divider__label {
      font-family: var(--font-display); font-size: .7rem;
      font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
      color: rgba(255,255,255,0.2);
    }

    /* ══════════════════════════════════════════
       WHY CHOOSE US — STRIP
    ══════════════════════════════════════════ */
    .why-strip {
      background: var(--orange);
      padding: 5rem 5vw;
    }
    .why-strip__title {
      font-family: var(--font-display);
      font-size: clamp(36px, 6vw, 80px);
      font-weight: 900; text-transform: uppercase;
      color: var(--white); line-height: .92;
      margin-bottom: 3.5rem;
    }
    .why-strip__title span { opacity: .35; }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 2rem;
    }
    .why-item {
      background: rgba(0,0,0,0.15);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px; padding: 1.8rem;
      transition: background .25s, transform .25s;
    }
    .why-item:hover { background: rgba(0,0,0,0.25); transform: translateY(-3px); }
    .why-item__num {
      font-family: var(--font-display); font-size: 2.2rem;
      font-weight: 900; color: var(--white); opacity: .2;
      margin-bottom: .5rem;
    }
    .why-item__title {
      font-family: var(--font-display); font-size: 1.05rem;
      font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
      color: var(--white); margin-bottom: .5rem;
    }
    .why-item__text {
      font-size: .85rem; line-height: 1.65;
      color: rgba(255,255,255,0.65); font-weight: 300;
    }

    /* ══════════════════════════════════════════
       CLIENTS STRIP
    ══════════════════════════════════════════ */
    .clients-strip {
      padding: 5rem 5vw;
      background: var(--ash);
      text-align: center;
    }
    .clients-strip__label {
      font-family: var(--font-display); font-size: .72rem;
      font-weight: 700; letter-spacing: .35em; text-transform: uppercase;
      color: rgba(255,255,255,0.3); margin-bottom: 2.5rem;
    }
    .clients-marquee {
      display: flex; gap: 3rem; flex-wrap: wrap;
      justify-content: center; align-items: center;
    }
    .client-name {
      font-family: var(--font-display); font-size: 1.1rem;
      font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,0.25);
      transition: color .25s;
    }
    .client-name:hover { color: var(--orange); }

    /* ══════════════════════════════════════════
       CTA BAR
    ══════════════════════════════════════════ */
    .svc-cta {
      padding: 7rem 5vw;
      text-align: center;
      position: relative; overflow: hidden;
      background: var(--ink);
    }
    .svc-cta::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(242,48,0,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .svc-cta__title {
      font-family: var(--font-display);
      font-size: clamp(42px, 8vw, 110px);
      font-weight: 900; line-height: .9;
      text-transform: uppercase; margin-bottom: 1.5rem;
      position: relative; z-index: 2;
    }
    .svc-cta__sub {
      font-size: 1.05rem; font-weight: 300;
      line-height: 1.8; color: rgba(255,255,255,0.48);
      max-width: 540px; margin: 0 auto 2.5rem;
      position: relative; z-index: 2;
    }
    .svc-cta__actions {
      display: flex; gap: 1rem; justify-content: center;
      flex-wrap: wrap; position: relative; z-index: 2;
    }
    .btn-primary {
      font-family: var(--font-display); font-size: .85rem;
      font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      background: var(--orange); color: var(--white);
      padding: 1rem 2.2rem; border-radius: 2px;
      display: inline-flex; align-items: center; gap: .6rem;
      transition: background .2s, transform .2s;
    }
    .btn-primary:hover { background: var(--orange-dk); transform: translateY(-2px); }
    .btn-outline {
      font-family: var(--font-display); font-size: .85rem;
      font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      border: 1.5px solid rgba(255,255,255,0.2); color: var(--white);
      padding: 1rem 2.2rem; border-radius: 2px;
      transition: border-color .2s, transform .2s;
    }
    .btn-outline:hover { border-color: var(--orange); transform: translateY(-2px); }
    .contact-bar {
      display: flex; gap: 3rem; justify-content: center;
      flex-wrap: wrap; margin-top: 2.5rem;
      position: relative; z-index: 2;
    }
    .contact-bar a {
      font-family: var(--font-display); font-size: .82rem;
      font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
      color: rgba(255,255,255,0.28); transition: color .2s;
    }
    .contact-bar a:hover { color: var(--orange); }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    footer {
      background: var(--black);
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 3rem; padding: 5rem 5vw 4rem;
    }
    @media (max-width: 900px) {
      .footer-top { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .footer-top { grid-template-columns: 1fr; }
    }
    .footer-logo {
      display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
    }
    .footer-logo img { height: 32px; width: auto; }
    .footer-logo-text {
      font-family: var(--font-display); font-weight: 800;
      font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
      color: var(--white);
    }
    .footer-desc {
      font-size: .88rem; line-height: 1.7;
      color: rgba(255,255,255,0.3); margin-bottom: 1.5rem;
    }
    .footer-social { display: flex; gap: .6rem; }
    .social-btn {
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.4);
      transition: background .2s, border-color .2s, color .2s;
    }
    .social-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
    .footer-col-title {
      font-family: var(--font-display); font-size: .72rem;
      font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
      color: rgba(255,255,255,0.25); margin-bottom: 1.4rem;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
    .footer-links a {
      font-size: .88rem; color: rgba(255,255,255,0.4);
      transition: color .2s;
    }
    .footer-links a:hover { color: var(--orange); }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem;
      padding: 1.5rem 5vw;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .footer-copy {
      font-size: .8rem; color: rgba(255,255,255,0.2);
    }
    .footer-copy a { color: rgba(255,255,255,0.35); transition: color .2s; }
    .footer-copy a:hover { color: var(--orange); }
    .footer-legal { display: flex; gap: 1.5rem; }
    .footer-legal a { font-size: .78rem; color: rgba(255,255,255,0.2); transition: color .2s; }
    .footer-legal a:hover { color: rgba(255,255,255,0.5); }

    /* ══════════════════════════════════════════
       ANIMATIONS
    ══════════════════════════════════════════ */
    .reveal {
      opacity: 0; transform: translateY(30px);
      transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }

    @media (max-width: 768px) {
      .svc-section { padding: 5rem 5vw; }
      .svc-hero { padding-top: 130px; padding-bottom: 4rem; }
    }
	
	
	    /* ═══════════════════════════════════════════════
       SERVICES PAGE — SCOPED STYLES
    ═══════════════════════════════════════════════ */

    /* ── Hero ── */
    .svc-hero {
      padding-top: 160px;
      padding-bottom: 0;
      padding-inline: 5vw;
      background: var(--black);
      position: relative;
      overflow: hidden;
    }
    .svc-hero__bg {
      position: absolute;
      inset: 0;
      background:
	  url(../img/services-bg.jpg),
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(242,48,0,0.11) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(242,48,0,0.06) 0%, transparent 50%);
      pointer-events: none;
    }
    .svc-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.013) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    }
    .svc-hero__inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: end;
      padding-bottom: 5rem;
    }
    @media (max-width: 860px) {
      .svc-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
    }
    .svc-hero__eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 1.5rem;
    }
    .svc-hero__eyebrow::before {
      content: '';
      display: block;
      width: 32px; height: 1px;
      background: var(--orange);
      flex-shrink: 0;
    }
    .svc-hero__title {
      font-family: var(--font-display);
      font-size: clamp(60px, 10vw, 130px);
      font-weight: 900;
      line-height: .9;
      text-transform: uppercase;
      letter-spacing: -.01em;
      color: var(--white);
      margin-bottom: 2rem;
    }
    .svc-hero__title .outline {
      -webkit-text-stroke: 2px var(--orange);
      color: transparent;
    }
    .svc-hero__sub {
      font-family: var(--font-body);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(255,255,255,0.5);
      margin-bottom: 2.5rem;
    }
    .svc-hero__right {
      display: flex;
      flex-direction: column;
      gap: 1px;
      align-self: end;
    }
    .svc-hero__service-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 1.5rem;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      border-bottom: none;
      gap: 1rem;
      transition: background .2s, border-color .2s;
      cursor: default;
    }
    .svc-hero__service-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.05); }
    .svc-hero__service-row:hover {
      background: rgba(242,48,0,0.06);
      border-color: rgba(242,48,0,0.2);
    }
    .svc-hero__service-row:hover .svc-hero__srow-num { color: var(--orange); }
    .svc-hero__srow-num {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .2em;
      color: rgba(255,255,255,0.2);
      transition: color .2s;
      flex-shrink: 0;
    }
    .svc-hero__srow-name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--white);
      flex: 1;
    }
    .svc-hero__srow-arrow {
      color: rgba(255,255,255,0.15);
      font-size: 1rem;
      transition: color .2s, transform .2s;
    }
    .svc-hero__service-row:hover .svc-hero__srow-arrow {
      color: var(--orange);
      transform: translateX(4px);
    }

    /* ── Sticky Tab Nav ── */
    .svc-tabnav {
      position: sticky;
      top: 72px;
      z-index: 80;
      background: rgba(8,8,8,0.95);
      backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .svc-tabnav__inner {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 5vw;
    }
    .svc-tabnav__inner::-webkit-scrollbar { display: none; }
    .svc-tab-btn {
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      padding: 1.1rem 1.4rem;
      border: none;
      border-bottom: 2px solid transparent;
      background: none;
      white-space: nowrap;
      cursor: none;
      transition: color .2s, border-color .2s;
      margin-bottom: -1px;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .svc-tab-btn:hover { color: rgba(255,255,255,0.7); }
    .svc-tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }
    .tab-featured {
      font-family: var(--font-display);
      font-size: .55rem;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 2px 6px;
      background: var(--orange);
      color: var(--black);
      border-radius: 2px;
    }

    /* ── Section wrapper ── */
    .svc-section {
      padding: 6rem 5vw;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      display: none;
    }
    .svc-section.active { display: block; }
    .svc-section:nth-child(even) { background: #0d0d0d; }

    /* ── Section header ── */
    .svc-sec-header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 2rem;
      margin-bottom: 4rem;
    }
    @media (max-width: 640px) {
      .svc-sec-header { grid-template-columns: 1fr; }
    }
    .svc-sec-title {
      font-family: var(--font-display);
      font-size: clamp(38px, 6vw, 72px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: .93;
      color: var(--white);
      margin-bottom: 1rem;
    }
    .svc-sec-title span { color: var(--orange); }
    .svc-sec-desc {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.48);
      max-width: 560px;
    }

    /* ── Feature + side layout ── */
    .svc-feature-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 860px) {
      .svc-feature-layout { grid-template-columns: 1fr; }
    }

    /* ── Feature card ── */
    .svc-feat-card {
      background: var(--orange);
      padding: 2.8rem;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      position: relative;
      overflow: hidden;
    }
    .svc-feat-card::before {
      content: '';
      position: absolute;
      bottom: -40px; right: -40px;
      width: 200px; height: 200px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%;
      pointer-events: none;
    }
    .svc-feat-card::after {
      content: '';
      position: absolute;
      bottom: -80px; right: -80px;
      width: 280px; height: 280px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 50%;
      pointer-events: none;
    }
    .svc-feat-badge {
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 900;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      display: inline-block;
      width: fit-content;
    }
    .svc-feat-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
      color: var(--white);
    }
    .svc-feat-title em {
      font-style: normal;
      color: rgba(255,255,255,0.6);
    }
    .svc-feat-desc {
      font-family: var(--font-body);
      font-size: .95rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.75);
      flex: 1;
    }
    .svc-feat-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .4rem .8rem;
      list-style: none;
      padding: 0; margin: 0;
    }
    .svc-feat-list li {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      padding-left: 1rem;
      position: relative;
    }
    .svc-feat-list li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: rgba(255,255,255,0.4);
    }
    .svc-feat-cta {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-family: var(--font-display);
      font-size: .8rem;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--white);
      padding: .85rem 1.6rem;
      align-self: flex-start;
      transition: background .2s, color .2s;
    }
    .svc-feat-cta:hover { background: var(--black); color: var(--white); }

    /* ── Side cards stack ── */
    .svc-side-stack {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* ── Service card ── */
    .svc-card-p {
      background: #111;
      border: 1px solid rgba(255,255,255,0.05);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: .9rem;
      flex: 1;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, background .3s;
    }
    .svc-card-p::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 2px;
      background: var(--orange);
      transition: width .4s var(--ease-out);
    }
    .svc-card-p:hover { background: #171717; border-color: rgba(242,48,0,0.25); }
    .svc-card-p:hover::before { width: 100%; }
    .svc-card-p__icon {
      color: var(--orange);
      width: 36px; height: 36px;
      flex-shrink: 0;
    }
    .svc-card-p__title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--white);
      line-height: 1.2;
    }
    .svc-card-p__desc {
      font-family: var(--font-body);
      font-size: .88rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.42);
      flex: 1;
    }
    .svc-card-p__tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }
    .svc-tag {
      font-family: var(--font-display);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 3px 9px;
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.4);
      transition: border-color .2s, color .2s;
    }
    .svc-tag:hover { border-color: var(--orange); color: var(--orange); }
    .svc-tag--price {
      border-color: rgba(242,48,0,0.25);
      color: var(--orange);
    }
    .svc-card-p__link {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      display: flex;
      align-items: center;
      gap: .4rem;
      transition: color .2s;
      width: fit-content;
    }
    .svc-card-p__link:hover { color: var(--orange); }

    /* ── 3-col grid ── */
    .svc-grid-3col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 960px) {
      .svc-grid-3col { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .svc-grid-3col { grid-template-columns: 1fr; }
    }

    /* ── 4-col grid ── */
    .svc-grid-4col {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 1.5rem;
    }
    @media (max-width: 1024px) {
      .svc-grid-4col { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .svc-grid-4col { grid-template-columns: 1fr; }
    }

    /* ── CTA row ── */
    .svc-cta-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
      margin-top: 2.5rem;
      padding: 1.8rem 2.2rem;
      background: #161616;
      border: 1px solid rgba(255,255,255,0.05);
      border-left: 3px solid var(--orange);
    }
    .svc-cta-strip__text {
      font-family: var(--font-body);
      font-size: .95rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
    }
    .svc-cta-strip__text strong { color: var(--white); }

    /* ── Process band ── */
    .process-band {
      padding: 6rem 5vw;
      background: #0d0d0d;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .process-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 3.5rem;
      position: relative;
    }
    .process-grid::before {
      content: '';
      position: absolute;
      top: 28px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(242,48,0,0.4), rgba(242,48,0,0.4), transparent);
    }
    @media (max-width: 860px) {
      .process-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
      .process-grid::before { display: none; }
    }
    @media (max-width: 480px) {
      .process-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    }
    .process-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1rem;
      padding: 0 1rem;
    }
    .process-step__dot {
      width: 56px; height: 56px;
      background: var(--black);
      border: 1px solid rgba(242,48,0,0.35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      transition: background .3s, border-color .3s;
    }
    .process-step:hover .process-step__dot {
      background: rgba(242,48,0,0.12);
      border-color: var(--orange);
    }
    .process-step__num {
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .1em;
      color: var(--orange);
    }
    .process-step__title {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--white);
    }
    .process-step__body {
      font-family: var(--font-body);
      font-size: .82rem;
      line-height: 1.65;
      color: rgba(255,255,255,0.38);
    }

    /* ── Why band ── */
    .why-band {
      padding: 6rem 5vw;
    }
    .why-band-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }
    @media (max-width: 860px) {
      .why-band-grid { grid-template-columns: 1fr; gap: 3rem; }
    }
    .why-list-p {
      list-style: none;
      padding: 0; margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .why-item-p {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 1.2rem;
      align-items: start;
      padding: 1.8rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .why-item-p:last-child { border-bottom: none; }
    .why-item-p__icon {
      width: 44px; height: 44px;
      background: rgba(242,48,0,0.07);
      border: 1px solid rgba(242,48,0,0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange);
      flex-shrink: 0;
      margin-top: .1rem;
    }
    .why-item-p__title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--white);
      margin-bottom: .4rem;
    }
    .why-item-p__body {
      font-family: var(--font-body);
      font-size: .88rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.42);
    }
    /* Big quote block */
    .why-quote-block {
      background: var(--orange);
      padding: 3rem;
      position: relative;
      overflow: hidden;
    }
    .why-quote-block::before {
      content: '"';
      position: absolute;
      top: -20px; left: 20px;
      font-family: var(--font-display);
      font-size: 16rem;
      font-weight: 900;
      color: rgba(255,255,255,0.07);
      line-height: 1;
      pointer-events: none;
    }
    .why-quote-text {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.15;
      color: var(--white);
      margin-bottom: 2rem;
      position: relative;
    }
    .why-stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 2rem;
    }
    .why-stat-mini__num {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 900;
      color: var(--white);
      line-height: 1;
    }
    .why-stat-mini__label {
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin-top: .3rem;
    }

    /* ── Final CTA ── */
    .svc-final-cta {
      padding: 7rem 5vw;
      background: var(--black);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .svc-final-cta::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(90vw, 700px);
      height: min(90vw, 700px);
      border: 1px solid rgba(255,255,255,0.025);
      border-radius: 50%;
      pointer-events: none;
    }
    .svc-final-cta__title {
      font-family: var(--font-display);
      font-size: clamp(42px, 8vw, 100px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: .92;
      color: var(--white);
      margin-bottom: 1.5rem;
      position: relative;
    }
    .svc-final-cta__sub {
      font-family: var(--font-body);
      font-size: 1rem;
      color: rgba(255,255,255,0.42);
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.75;
    }
    .svc-final-cta .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
    }
    .svc-contact-row {
      display: flex;
      justify-content: center;
      gap: 3rem;
      flex-wrap: wrap;
      margin-top: 2rem;
    }
    .svc-contact-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .3rem;
    }
    .svc-contact-item__label {
      font-family: var(--font-display);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
    }
    .svc-contact-item__val {
      font-family: var(--font-display);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .05em;
      color: rgba(255,255,255,0.55);
      transition: color .2s;
    }
    .svc-contact-item__val:hover { color: var(--orange); }

/* ══════════════════════════════════════════
   TEAM SECTION
══════════════════════════════════════════ */

.team-section {
  padding: 5rem 5vw;
  background: var(--clr-surface-low);
}

@media (min-width: 768px) {
  .team-section {
    padding: 7rem 5vw;
  }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 3rem auto 0;
}

.team-card-img {
  aspect-ratio: 3/4;
  background: var(--clr-surface);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .5s ease,
              transform .5s ease;
}

.team-card:hover .team-card-img img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.team-card-quote {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  background: rgba(252,90,10,.92);
  transform: translateY(100%);
  transition: transform .4s ease;
}

.team-card:hover .team-card-quote {
  transform: translateY(0);
}

.team-card-quote p {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #5b1a00;
}

.team-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--clr-text);
}

.team-role {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}