@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

  /* ── THEME TOKENS ── */
  :root {
    --font-display: "Bebas Neue", sans-serif;
    --font-brand: "Humanst521 BT", "Humanist521 BT", Frutiger, "Gill Sans", "Trebuchet MS", sans-serif;
    --orange: #EC671F;
    --accent: #EC671F;
    --orange-h: #EC671F;

    /* light */
    --bg:       #D9DADA;
    --bg-alt:   #ececed;
    --surface:  #ffffff;
    --border:   #e2dcd6;
    --ink:      #111110;
    --ink-2:    #5a5650;
    --ink-3:    #847e78;

    /* marquee / footer always dark */
    --bar-bg:   #111110;
    --bar-fg:   #f5f2ee;
    --btn-radius: 999px;
    --section-radius: 34px;
    --btn-shadow: 0 12px 24px rgba(43, 42, 41, .14);
  }

  /* ── RESET ── */
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html, body, button, input, textarea, select, option { font-family: var(--font-brand); }
  html { scroll-behavior:smooth; }
  body {
    background: #D9DADA;
    color: var(--ink);
    font-family: var(--font-brand);
    font-weight: 400;
    font-size: 16px;
    padding-bottom: 16px;
    overflow-x: hidden;
    cursor: none;
    transition: background 0.35s ease, color 0.35s ease;
  }
  body::before {
    content:'';
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:118px;
    background:linear-gradient(to bottom, #D9DADA 0%, #D9DADA 74%, rgba(217,218,218,0) 100%);
    opacity:0;
    pointer-events:none;
    z-index:490;
    transition:opacity .22s ease;
  }
  body.nav-scroll-mask::before {
    opacity:1;
  }

  #hg-loader {
    position: fixed;
    inset: 0;
    background: #fbfcfa;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    opacity: 1;
    transition: opacity 0.7s ease;
  }

  #hg-loader.fade-out {
    opacity: 0;
    pointer-events: none;
  }

  #hg-loader.hidden {
    display: none;
  }

  #hg-loader img {
    width: 160px;
    height: auto;
    animation: loaderPulse 1.8s ease-out forwards;
  }

  @keyframes loaderPulse {
    0% { transform: scale(0.85); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  #hg-loader-wordmark {
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-top: 18px;
    opacity: 0;
    animation: wordmarkFade 0.6s ease 0.8s forwards;
  }

  @keyframes wordmarkFade {
    to { opacity: 1; }
  }

  body.loading {
    overflow: hidden;
  }

  /* Disable custom cursor on touch devices */
  @media (hover:none), (pointer:coarse) {
    body { cursor:auto; }
    .cur-dot,
    .cur-ring { display:none; }
  }

  /* ── CURSOR ── */
  .cur-dot {
    position:fixed; width:8px; height:8px;
    background:var(--orange); border-radius:50%;
    pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition: width .18s, height .18s;
  }
  .cur-ring {
    position:fixed; width:34px; height:34px;
    border:1.5px solid var(--orange); border-radius:50%;
    pointer-events:none; z-index:9998;
    transform:translate(-50%,-50%);
    transition: width .18s, height .18s, opacity .18s;
    opacity:.45;
  }

  /* ── NAV ── */
  nav {
    position:fixed;
    top:16px;
    left:28px;
    right:28px;
    z-index:500;
    opacity:1;
    transform:none;
    will-change:auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 12px 0 32px;
    height:64px;
    background:#ffffff;
    border:none;
    border-radius:999px;
    box-shadow:0 4px 24px rgba(0, 0, 0, .07);
    transition: background .25s, box-shadow .25s;
  }
  .nav-logo {
    text-decoration:none; display:flex; align-items:center;
  }
  .logo-plate {
    display:inline-flex; align-items:center; justify-content:center;
    height:50px; padding:0;
    background:transparent; border:none; box-shadow:none;
  }
  .logo-img {
    height:48px; width:auto; display:block;
    filter:contrast(1.01) saturate(1.02);
  }
  .nav-center {
    display:flex; gap:40px; list-style:none; align-items:center;
  }
  .nav-center a {
    font-size:13px; font-weight:500; letter-spacing:.08em;
    text-transform:uppercase; color:#0a0a0a; text-decoration:none;
    transition:color .2s;
  }
  .nav-center a:hover { color:var(--orange); }
  .nav-right { display:flex; align-items:center; gap:10px; }

  /* ── BUTTON SYSTEM ── */
  .nav-cta,
  .btn-dark,
  .btn-orange,
  .form-btn,
  .btn-text,
  .btn-ghost-inv,
  .meta-map,
  .social-btn {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:var(--btn-radius);
    text-decoration:none;
    font-weight:600;
    transition:transform .18s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
  }
  .nav-cta:focus-visible,
  .btn-dark:focus-visible,
  .btn-orange:focus-visible,
  .form-btn:focus-visible,
  .btn-text:focus-visible,
  .btn-ghost-inv:focus-visible,
  .meta-map:focus-visible,
  .social-btn:focus-visible {
    outline:2px solid var(--orange);
    outline-offset:2px;
  }
  .nav-cta:hover,
  .btn-dark:hover,
  .btn-orange:hover,
  .form-btn:hover,
  .btn-text:hover,
  .btn-ghost-inv:hover,
  .meta-map:hover,
  .social-btn:hover {
    transform:translateY(-2px);
    box-shadow:var(--btn-shadow);
  }
  .nav-cta,
  .btn-dark,
  .btn-orange,
  .form-btn {
    background:var(--orange);
    color:#fff;
    border:1px solid transparent;
  }
  .nav-cta {
    padding:12px 28px;
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
    border-radius:999px;
    background:var(--orange);
    color:#ffffff;
    transition:background-color .2s ease;
  }
  .nav-cta:hover { background:#0a0a0a; transform:none; box-shadow:none; }
  .nav-call {
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:12px 28px;
  }
  .nav-call svg {
    display:block;
    width:15px;
    height:15px;
    flex-shrink:0;
  }

  /* ── HERO ── */
  #home {
    min-height:clamp(780px, 92vh, 960px); display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end; gap:46px;
    padding:84px 64px 108px;
    margin:8px 16px 0;
    position:relative; overflow:hidden;
    isolation:isolate;
  }
  .hero-photo {
    position:absolute;
    inset:0;
    z-index:0;
    background-image:url('../assets/hero/honest-office-hero.jpg');
    background-size:cover;
    background-position:center 43%;
    background-repeat:no-repeat;
    transform:scale(1.06);
    filter:saturate(1.03) contrast(1.02);
  }
  .hero-photo::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(130deg, rgba(7,6,5,.97) 0%, rgba(7,6,5,.89) 40%, rgba(7,6,5,.34) 68%, rgba(7,6,5,0) 88%);
  }
  .hero-photo::after {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(115% 64% at 17% 88%, rgba(10,9,8,.42) 0%, rgba(10,9,8,.14) 40%, rgba(10,9,8,0) 100%);
  }
  .hero-left {
    position:relative;
    z-index:2;
    max-width:560px;
    padding-bottom:24px;
  }
  .hero-streams {
    position:absolute;
    left:0;
    right:0;
    bottom:34px;
    z-index:3;
    overflow:hidden;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
  .hero-streams .marquee-wrap {
    margin:0;
    border-radius:0;
    background:rgba(17, 17, 16, .96);
  }
  .hero-streams .marquee-wrap + .marquee-wrap {
    margin-top:0;
  }

  .eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-size:11px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--orange);
    margin-bottom:28px;
    opacity:0; animation:fadeUp .7s ease .1s forwards;
  }
  .eyebrow::before {
    content:''; width:22px; height:1.5px; background:var(--orange);
  }

  #home h1 {
    font-family:var(--font-display);
    font-size:clamp(72px, 7vw, 90px);
    font-weight:400; line-height:1.06;
    letter-spacing:-.01em; color:#ffffff;
    margin-bottom:24px;
    opacity:0; animation:fadeUp .7s ease .2s forwards;
    transition:color .35s;
  }
  #home h1 span { color:var(--orange); }

  #home .hero-sub {
    font-size:15.5px; line-height:1.75; color:#888888;
    max-width:430px; margin-bottom:40px;
    opacity:0; animation:fadeUp .7s ease .3s forwards;
    transition:color .35s;
  }

  .hero-btns {
    display:flex; gap:16px; align-items:center;
    opacity:0; animation:fadeUp .7s ease .4s forwards;
  }
  .btn-dark,
  .btn-orange,
  .form-btn {
    padding:13px 26px;
    font-size:13px;
    letter-spacing:.04em;
  }
  #home .btn-text {
    padding:12px 22px;
    font-size:13px;
    letter-spacing:.03em;
    border:1px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.9);
    color:#111110;
  }
  #home .btn-text:hover {
    background:var(--orange);
    border-color:var(--orange);
    color:#fff;
  }

  .wa-float {
    position:fixed;
    right:8px;
    bottom:8px;
    width:54px;
    height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    text-decoration:none;
    z-index:620;
    transition:transform .18s ease, opacity .2s ease, filter .22s ease;
  }
  .wa-float img {
    width:100%;
    height:100%;
    display:block;
    filter:drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
    transition:filter .22s ease;
  }
  .wa-float:hover {
    transform:translateY(-3px) scale(1.04);
    filter:drop-shadow(0 0 14px rgba(26, 196, 81, .55));
  }
  .wa-float:hover img {
    filter:drop-shadow(0 0 12px rgba(26, 196, 81, .8));
  }
  .wa-float:focus-visible {
    outline:2px solid var(--orange);
    outline-offset:4px;
    border-radius:10px;
  }

  /* ── MARQUEE ── */
  .marquee-wrap {
    background:#111110;
    overflow:hidden;
    white-space:nowrap;
    padding:12px 0;
    border-radius:22px;
    margin:12px 8px 0;
    transition:background .35s;
  }
  .marquee-wrap + .marquee-wrap { margin-top:6px; }
  .marquee-track { display:inline-flex; gap:0; animation:ticker 30s linear infinite; width:max-content; }
  .marquee-track-rev { animation:ticker2 25s linear infinite; }
  .marquee-wrap:hover .marquee-track { animation-play-state:paused; }
  .m-item {
    display:inline-flex; align-items:center; gap:14px; padding:0 22px;
    font-size:12px; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:#ffffff;
    white-space:nowrap;
    transition:color .35s;
  }
  .m-dot { width:4px; height:4px; background:var(--orange); border-radius:50%; flex-shrink:0; }
  @keyframes ticker { from{transform:translateX(-50%)} to{transform:translateX(0)} }
  @keyframes ticker2 { from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ── SHARED SECTION ── */
  section {
    padding:96px 64px;
    border-radius:var(--section-radius);
    overflow:hidden;
    margin:16px 16px 0;
  }
  h2 {
    font-family:var(--font-display);
    font-size:clamp(34px,4vw,56px);
    font-weight:400; line-height:1.08;
    letter-spacing:-.02em; color:var(--ink);
    transition:color .35s;
  }
  h2 em { font-style:italic; color:var(--orange); }
  .label {
    display:inline-flex; align-items:center; gap:9px;
    font-size:11.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--orange); margin-bottom:14px;
  }
  .label::before { content:''; width:18px; height:1.5px; background:var(--orange); }
  .sub {
    font-size:15px; color:var(--ink-2); margin-top:12px;
    max-width:460px; line-height:1.75; transition:color .35s;
  }

  /* ── SERVICES ── */
  #services {
    background:#ffffff;
    border-radius:var(--section-radius);
    margin:16px 16px 0;
    overflow:hidden;
    padding-top:50px;
    padding-bottom:62px;
    transition:background .35s, border-radius .35s;
  }
  #services h2 {
    color:var(--ink);
  }
  #services .sub {
    color:var(--ink-2);
  }
  .svc-head {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:34px; gap:20px; flex-wrap:wrap;
  }
  .svc-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:16px;
    background:transparent;
    border:none;
    border-radius:28px;
    overflow:visible;
    transition:gap .25s ease;
  }
  .svc {
    background:var(--bar-bg);
    padding:24px;
    position:relative; overflow:hidden; isolation:isolate;
    border:1px solid #2a2a29;
    border-radius:20px;
    min-height:168px;
    transition:border-color .3s, transform .3s, box-shadow .3s;
  }
  .svc-link {
    display:block;
    text-decoration:none;
    color:inherit;
  }
  .svc-link:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:-2px;
  }
  .svc::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s ease;
    background:radial-gradient(ellipse at center, rgba(232,99,10,.09) 0%, rgba(232,99,10,0) 70%);
  }
  .svc:is(:hover, .svc-active) {
    transform:translateY(-4px);
    border-color:#2a2a29;
    box-shadow:0 16px 48px rgba(0,0,0,.4);
    z-index:5;
  }
  .svc:is(:hover, .svc-active)::before { opacity:1; }
  .svc:is(:hover, .svc-active) .svc-num { color:var(--orange); }
  .svc > * { position:relative; z-index:2; }
  .svc-num {
    display:block;
    font-size:10px; font-weight:600; letter-spacing:.12em;
    font-family:var(--font-brand);
    color:var(--orange);
    background:none;
    border:none;
    margin-bottom:14px;
    transition:color .25s, text-shadow .25s;
  }
  .svc-accent { display:none; }
  .svc-grid.has-hover .svc:not(.svc-active) {
    opacity:1;
    filter:none;
  }
  .svc-name {
    font-family:var(--font-display);
    font-size:25px;
    letter-spacing:.02em;
    line-height:1.05;
    text-transform:uppercase;
    color:#ffffff;
    margin-bottom:8px;
    font-weight:400;
    transition:color .35s, transform .25s ease, opacity .25s ease;
  }
  .svc-desc {
    display:block;
    margin:0;
    margin-top:6px;
    font-family:var(--font-brand);
    font-size:13px;
    line-height:1.45;
    color:rgba(255,255,255,.74);
    max-width:95%;
    position:relative;
    z-index:2;
    transition:opacity .25s ease, transform .25s ease;
  }
  .svc-arr {
    position:absolute; right:20px; bottom:20px;
    width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    background:transparent; display:flex; align-items:center; justify-content:center;
    z-index:4;
    transition:background .3s, border-color .3s, transform .3s, opacity .2s ease;
  }
  .svc:is(:hover, .svc-active) .svc-arr {
    background:var(--orange);
    border-color:var(--orange);
    transform:none;
    opacity:1;
  }
  .svc-arr svg {
    width:11px;
    height:11px;
    stroke:rgba(255,255,255,.7);
    transition:stroke .3s;
  }
  .svc:is(:hover, .svc-active) .svc-arr svg { stroke:#fff; }
  .svc:is(:hover, .svc-active) .svc-num { text-shadow:none; }
  .svc:is(:hover, .svc-active) .svc-name {
    opacity:0;
    transform:translateY(6px);
  }
  .svc:is(:hover, .svc-active) .svc-desc {
    opacity:0;
    transform:translateY(6px);
  }
  .svc-graphic {
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    opacity:0;
    transition:opacity .3s ease;
  }
  .svc:is(:hover, .svc-active) .svc-graphic { opacity:1; }
  .svc-graphic svg {
    max-width:66%;
    max-height:66%;
    width:auto;
    height:auto;
  }
  .svc-graphic-label {
    font-size:10px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--orange);
    opacity:0;
    transform:translateY(4px);
    transition:opacity .3s ease .1s, transform .3s ease .1s;
  }
  .svc:is(:hover, .svc-active) .svc-graphic-label {
    opacity:1;
    transform:translateY(0);
  }
  #services .btn-dark {
    box-shadow:0 2px 12px rgba(224,92,21,.2);
  }
  #services .btn-dark:hover {
    box-shadow:0 6px 20px rgba(224,92,21,.3);
    transform:translateY(-1px);
  }
  #services .btn-dark svg { transition:transform .2s; }
  #services .btn-dark:hover svg { transform:translateX(3px); }

  /* ── PROCESS ── */
  #process {
    background:var(--bar-bg);
    color:var(--bar-fg);
    padding-top:34px;
    padding-bottom:30px;
  }
  #process > .reveal:first-child {
    max-width:none;
    margin:0;
  }
  #process .label {
    color:var(--orange);
    margin-bottom:10px;
  }
  #process .label::before {
    background:var(--orange);
  }
  .process-title {
    margin:0;
    color:#ffffff;
    font-family:var(--font-display);
    font-size:clamp(28px,2.8vw,40px);
    font-weight:400;
    line-height:1;
    letter-spacing:-.02em;
    text-transform:none;
    max-width:700px;
  }
  .process-title em {
    color:var(--orange);
    font-style:italic;
  }
  .process-title br {
    display:block;
  }
  .process-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:16px;
    max-width:none;
    margin:10px 0 0;
    align-items:start;
  }
  .process-step {
    min-width:0;
    display:flex;
    flex-direction:column;
    position:relative;
  }
  .process-step::before {
    content:'';
    position:absolute;
    left:-6%;
    top:50%;
    width:210px;
    height:110px;
    border-radius:999px;
    transform:translateY(-50%) scale(.9);
    background:radial-gradient(circle at 35% 50%, rgba(236,103,31,.34) 0%, rgba(236,103,31,.14) 36%, rgba(236,103,31,0) 74%);
    filter:blur(16px);
    opacity:0;
    pointer-events:none;
    transition:opacity .32s ease, transform .32s ease;
  }
  .process-step-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    min-height:32px;
  }
  .process-step h3 {
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(24px,2vw,34px);
    line-height:.95;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#ffffff;
    font-weight:400;
    transition:text-shadow .28s ease, color .28s ease;
  }
  .process-arrow {
    color:var(--orange);
    font-size:40px;
    line-height:1;
    flex-shrink:0;
    transform:translateY(-0.5px);
    transition:transform .28s cubic-bezier(.22,.8,.26,1), color .28s ease, filter .28s ease;
  }
  .process-step:not(:last-child) .process-arrow {
    position:static;
    transform:translateY(-0.5px);
  }
  .process-arrow-ghost {
    visibility:hidden;
  }
  .process-step p {
    margin:0;
    font-family:var(--font-brand);
    font-size:12.5px;
    line-height:1.45;
    color:rgba(255,255,255,.46);
    max-width:23ch;
    transition:color .28s ease;
  }
  .process-step:hover::before,
  .process-step:focus-within::before {
    opacity:.85;
    transform:translateY(-50%) scale(1);
  }
  .process-step:hover h3,
  .process-step:focus-within h3 {
    text-shadow:0 0 14px rgba(236, 103, 31, .24);
  }
  .process-step:hover p,
  .process-step:focus-within p {
    color:rgba(255,255,255,.65);
  }
  .process-step:hover .process-arrow,
  .process-step:focus-within .process-arrow {
    transform:translateY(-0.5px) translateX(3px) scale(1.08);
    filter:drop-shadow(0 4px 10px rgba(236, 103, 31, .24));
  }

  /* ── CLIENTS ── */
  #clients {
    background:#ffffff;
    padding:40px 64px;
    text-align:center;
    transition:background .35s;
  }
  .clients-label {
    font-family:var(--font-display);
    font-size:clamp(20px,2.4vw,32px);
    font-weight:400;
    letter-spacing:-.02em;
    line-height:1.08;
    text-transform:none;
    color:var(--ink);
    margin-bottom:26px;
    display:flex; align-items:center; justify-content:center; gap:14px;
    transition:color .35s;
  }
  .clients-label strong {
    color:var(--orange);
    font-weight:400;
    font-size:clamp(34px, 4.2vw, 58px);
    line-height:1;
  }
  .clients-label::before, .clients-label::after {
    content:''; flex:1; max-width:110px; height:2px; background:var(--orange);
  }
  .logo-marquee {
    overflow:hidden; white-space:nowrap; padding:16px 0;
    mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .logo-marquee-track {
    display:inline-flex; align-items:center; gap:0;
    width:max-content;
    animation:logoScroll 48s linear infinite;
  }
  .client-logo-slot {
    width:176px;
    height:84px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 176px;
  }
  @media (hover: hover) {
    .logo-marquee:hover .logo-marquee-track { animation-play-state:paused; }
  }
  .logo-marquee:focus-within .logo-marquee-track { animation-play-state:paused; }
  .client-logo-img {
    width:auto; max-width:128px; height:62px;
    object-fit:contain; object-position:center;
    flex-shrink:0; vertical-align:middle;
    opacity:.92;
    transition:transform .25s ease, opacity .25s ease, filter .25s ease;
  }
  .client-logo-img:hover {
    transform:translateY(-2px) scale(1.04);
    opacity:1;
    filter:drop-shadow(0 4px 14px rgba(232,96,28,.18));
  }
  @keyframes logoScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ── ABOUT ── */
  #about {
    background:var(--bar-bg); color:var(--bar-fg);
    display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
    padding-top:76px;
    padding-bottom:72px;
    transition:background .35s, color .35s;
  }
  #about .label { color:var(--orange); }
  #about .label::before { background:var(--orange); }
  #about h2 { color:var(--bar-fg); }
  .about-body {
    font-size:15px; line-height:1.82;
    color:color-mix(in srgb, var(--bar-fg) 64%, transparent);
    margin-top:18px;
  }
  .about-body strong { color:color-mix(in srgb, var(--bar-fg) 90%, transparent); font-weight:500; }
  .about-btns { margin-top:36px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  .btn-ghost-inv {
    border-color:color-mix(in srgb, var(--bar-fg) 40%, transparent);
    background:color-mix(in srgb, var(--bar-bg) 70%, transparent);
    color:var(--bar-fg);
  }
  .stats {
    display:flex;
    flex-direction:column;
    padding-right:68px;
  }
  .stat {
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 0; border-bottom:1px solid color-mix(in srgb, var(--bar-fg) 9%, transparent);
    position:relative;
    transform-style:preserve-3d;
    transition:transform .28s cubic-bezier(.22,.8,.26,1), border-color .28s ease;
  }
  .stat:first-child { border-top:1px solid color-mix(in srgb, var(--bar-fg) 9%, transparent); }
  .stat::before {
    content:'';
    position:absolute;
    left:2%;
    top:50%;
    width:220px;
    height:120px;
    border-radius:999px;
    transform:translateY(-50%) scale(.9);
    background:radial-gradient(circle at 35% 50%, rgba(236,103,31,.34) 0%, rgba(236,103,31,.14) 34%, rgba(236,103,31,0) 74%);
    filter:blur(18px);
    opacity:0;
    pointer-events:none;
    transition:opacity .32s ease, transform .32s ease;
  }
  .stat-n {
    font-family:var(--font-brand); font-style:italic;
    font-size:clamp(40px,4.5vw,58px); color:var(--orange); line-height:1;
    transition:transform .28s cubic-bezier(.22,.8,.26,1), text-shadow .28s ease, filter .28s ease;
    transform:translateZ(0);
  }
  .stat-n-tight {
    letter-spacing:-0.04em;
  }
  .stat-l {
    font-size:15px; color:color-mix(in srgb, var(--bar-fg) 62%, transparent);
    text-align:right; max-width:198px; line-height:1.52;
    transition:color .28s ease, transform .28s cubic-bezier(.22,.8,.26,1);
    transform:translateZ(0);
  }
  .stat:hover,
  .stat:focus-within {
    transform:perspective(900px) translateY(-3px) rotateX(1deg) scale(1.005);
  }
  .stat:hover::before,
  .stat:focus-within::before {
    opacity:.82;
    transform:translateY(-50%) scale(1);
  }
  .stat:hover .stat-n,
  .stat:focus-within .stat-n {
    transform:translateZ(10px) scale(1.04);
    text-shadow:0 0 14px rgba(236, 103, 31, .26);
    filter:drop-shadow(0 4px 10px rgba(236, 103, 31, .2));
  }
  .stat:hover .stat-l,
  .stat:focus-within .stat-l {
    color:color-mix(in srgb, var(--bar-fg) 86%, transparent);
    transform:translateZ(7px) translateX(-8px);
  }

  /* ── CONTACT ── */
  #contact {
    background:#ffffff;
    padding-top:54px;
    padding-bottom:46px;
    transition:background .35s;
  }
  .contact-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:56px;
    align-items:start;
  }
  .contact-left { max-width:560px; }
  .contact-copy {
    margin-top:10px;
    font-size:16px;
    line-height:1.62;
    color:var(--ink-2);
    max-width:530px;
    transition:color .35s;
  }
  .contact-meta { margin-top:16px; display:grid; gap:1px; }
  .meta-phones {
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    border-bottom:1px solid var(--border);
    margin-bottom:2px;
  }
  .meta-phone {
    position:relative;
    display:grid;
    gap:5px;
    padding:10px 18px 10px 0;
    text-decoration:none;
    transition:transform .15s, color .2s;
  }
  .meta-phone:not(:last-child)::after {
    content:'';
    position:absolute;
    right:9px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:30px;
    background:var(--border);
  }
  .meta-phone:hover { transform:translateX(3px); }
  .meta-phone:hover .meta-k,
  .meta-phone:hover .meta-v { color:var(--orange); }
  .meta-item {
    display:grid;
    gap:5px;
    padding:10px 0;
    text-decoration:none;
    border-bottom:1px solid var(--border);
    transition:border-color .22s, transform .15s;
  }
  .meta-item:hover { border-color:var(--orange); transform:translateX(3px); }
  .meta-item-static { cursor:default; }
  .meta-item-static:hover { border-color:var(--border); transform:none; }
  .meta-k {
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-2);
    transition:color .35s;
  }
  .meta-v {
    font-size:15px;
    line-height:1.58;
    color:var(--ink);
    font-weight:500;
    transition:color .35s;
  }
  .meta-actions {
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .meta-map {
    font-size:12px;
    letter-spacing:.03em;
    color:var(--ink-2);
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 12px;
    background:var(--surface);
  }
  .meta-map:hover {
    border-color:var(--orange);
    background:var(--orange);
    color:#fff;
  }
  .meta-map svg {
    width:13px;
    height:13px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .social-strip {
    margin-top:14px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .social-btn {
    width:42px;
    height:42px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    padding:0;
    cursor:pointer;
  }
  .social-btn:hover {
    border-color:var(--orange);
    background:var(--orange);
    color:#fff;
  }
  .social-btn svg {
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .contact-right {
    align-self:center;
  }
  .contact-right .label { margin-bottom:14px; }

  .cform {
    display:flex;
    flex-direction:column;
    gap:13px;
    background:var(--surface);
    border:none;
    border-radius:24px;
    padding:18px;
    transition:background .35s;
  }
  .frow { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
  .fg { display:flex; flex-direction:column; gap:5px; }
  .fg label { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); transition:color .35s; }
  .fg input, .fg select, .fg textarea {
    font-family:var(--font-brand); font-size:13.5px; color:var(--ink);
    background:#D9DADA; border:1.5px solid #D9DADA;
    border-radius:14px; padding:11px 13px; outline:none; width:100%;
    transition:border-color .2s, background .2s, color .35s, box-shadow .2s;
    appearance:none; -webkit-appearance:none;
  }
  .fg input:hover, .fg select:hover, .fg textarea:hover {
    border-color:color-mix(in srgb, var(--orange) 28%, #D9DADA);
    background:#dee0e1;
  }
  .fg input::placeholder,
  .fg textarea::placeholder {
    color:#7c7c7c;
  }
  .fg input:focus, .fg select:focus, .fg textarea:focus {
    border-color:var(--orange);
    background:var(--surface);
    box-shadow:0 0 0 3px rgba(236,103,31,.14);
  }
  .fg input.qq-invalid, .fg select.qq-invalid, .fg textarea.qq-invalid {
    border-color:#d4574f;
    background:color-mix(in srgb, #d4574f 8%, #D9DADA);
  }
  .fg textarea { resize:vertical; min-height:108px; }
  .form-btn {
    padding:14px 26px;
    font-family:var(--font-brand);
    font-size:14px;
    letter-spacing:.04em;
    cursor:pointer;
    width:auto;
    align-self:flex-start;
  }
  .form-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .form-btn-alt {
    padding:14px 24px;
    border-radius:var(--btn-radius);
    background:#111110;
    color:#ffffff;
    border:1px solid #111110;
  }
  .form-btn-alt:hover {
    background:#111110;
    color:#ffffff;
    border-color:#111110;
  }
  .form-btn.is-loading {
    opacity:.72;
    pointer-events:none;
  }
  .qq-feedback {
    min-height:0;
    margin-top:0;
    font-size:12.5px;
    line-height:1.45;
    letter-spacing:.01em;
    color:var(--ink-2);
    display:none;
  }
  .qq-feedback:not(:empty) {
    display:block;
    margin-top:2px;
  }
  .qq-feedback.is-error { color:#b23e38; }
  .qq-feedback.is-success { color:#1f7f46; }

  /* ── FOOTER ── */
  footer {
    background:var(--bar-bg); padding:22px 56px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
    border-top:none;
    border-radius:var(--section-radius);
    margin:16px 16px 10px;
    overflow:hidden;
    transition:background .35s;
  }
  .f-logo {
    color:var(--bar-fg); text-decoration:none;
    display:flex; align-items:center; gap:8px;
    transition:color .35s;
  }
  .f-logo .logo-plate {
    height:50px;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .f-logo .logo-img {
    height:46px;
    width:auto;
    filter:contrast(1.01) saturate(1.02);
  }
  .f-dot { width:8px; height:8px; background:var(--orange); border-radius:50%; }
  .f-copy { font-size:11.5px; color:rgba(255,255,255,.34); }
  .f-links { display:flex; gap:16px; }
  .f-links a {
    font-size:11.5px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(255,255,255,.44);
    text-decoration:none;
    transition:color .2s;
  }
  .f-links a:hover { color:var(--orange); }

  /* ── REVEAL ── */
  .reveal { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity:1; transform:translateY(0); }
  .delay { transition-delay:.12s; }

  /* ── KEYFRAMES ── */
  @keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

  @media(max-width:1200px){
    nav {
      top:14px;
      left:22px;
      right:22px;
      padding:0 10px 0 24px;
    }
    .nav-center { gap:28px; }
  }

  @media(max-width:1100px){
    :root { --section-radius: 28px; }
    #home {
      grid-template-columns:1fr;
      padding:86px 34px 98px;
      min-height:820px;
      margin:8px 12px 0;
      gap:28px;
    }
    .hero-streams { bottom:26px; }
    .hero-photo { background-position:center 47%; }
    .hero-sub { max-width:560px; }
    section { padding:76px 34px; }
    section { margin:14px 12px 0; }
    #services {
      padding-top:44px;
      padding-bottom:54px;
      margin:14px 12px 0;
    }
    #clients { padding:38px 34px; }
    #about { gap:56px; }
    .contact-grid { gap:42px; }
    footer {
      margin:14px 12px 0;
    }
  }

  /* ── RESPONSIVE ── */
  @media(max-width:920px){
    :root { --section-radius: 22px; }
    nav {
      top:12px;
      left:18px;
      right:18px;
      padding:0 8px 0 18px;
      height:60px;
    }
    .logo-plate { height:44px; }
    .logo-img { height:40px; }
    .nav-call { padding:10px 20px; }
    .nav-center { display:none; }
    #home { grid-template-columns:1fr; padding:78px 20px 90px; gap:30px; min-height:760px; margin:8px 10px 0; }
    .hero-streams { bottom:22px; }
    .hero-photo { background-position:center 49%; }
    .hero-left { padding-bottom:24px; }
    section { padding:66px 20px; }
    section { margin:10px 10px 0; }
    #services {
      padding-top:38px;
      padding-bottom:48px;
      margin:10px 10px 0;
    }
    #process {
      padding-top:30px;
      padding-bottom:28px;
    }
    .process-title {
      font-size:clamp(28px, 6.2vw, 36px);
      line-height:1;
    }
    .process-grid {
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px 12px;
      max-width:none;
      margin-top:10px;
    }
    .process-step-head {
      justify-content:space-between;
      gap:10px;
    }
    .process-step h3 {
      font-size:clamp(22px, 5.2vw, 30px);
    }
    .process-step p {
      font-size:12px;
    }
    #clients { padding:34px 20px; }
    .client-logo-slot { width:138px; height:72px; flex-basis:138px; }
    .client-logo-img { max-width:98px; height:50px; }
    .svc-grid { grid-template-columns:1fr 1fr; gap:12px; }
    .svc { padding:20px; min-height:156px; }
    .svc-name { font-size:18px; }
    .svc-desc { font-size:10.5px; }
    #about { grid-template-columns:1fr; gap:44px; padding-top:58px; padding-bottom:56px; }
    .stats { padding-right:0; }
    .contact-grid { grid-template-columns:1fr; gap:44px; }
    .meta-phones {
      grid-template-columns:1fr;
      border-bottom:none;
      gap:2px;
      margin-bottom:2px;
    }
    .meta-phone {
      padding:10px 0;
      border-bottom:1px solid var(--border);
    }
    .meta-phone:not(:last-child)::after { display:none; }
    .contact-right { align-self:stretch; }
    .frow { grid-template-columns:1fr; }
    .form-actions { width:100%; }
    .form-btn,
    .form-btn-alt { width:100%; align-self:stretch; justify-content:center; }
    footer {
      flex-direction:column;
      align-items:flex-start;
      padding:16px 20px;
      gap:10px;
      margin:10px 10px 0;
    }
    .svc-head { flex-direction:column; align-items:flex-start; }
    .wa-float {
      right:6px;
      bottom:6px;
      width:50px;
      height:50px;
    }
  }
  @media(max-width:520px){
    h1 { font-size:clamp(40px, 12vw, 56px); line-height:1.08; }
    .hero-btns { flex-direction:column; align-items:stretch; }
    .hero-btns .btn-dark,
    .hero-btns .btn-text { width:100%; justify-content:center; }
    .clients-label { font-size:clamp(16px, 6.2vw, 24px); gap:10px; }
    .clients-label::before,
    .clients-label::after { display:none; }
    .f-links { gap:12px; flex-wrap:wrap; }
    .svc-grid { grid-template-columns:1fr; gap:8px; }
    .svc { padding:18px; min-height:148px; }
    .svc-name { font-size:17px; }
    .svc-desc { font-size:10px; }
    .process-grid { grid-template-columns:1fr; gap:12px; margin-top:10px; }
    .process-title {
      font-size:clamp(26px, 9.2vw, 34px);
      max-width:none;
    }
    .process-title br { display:block; }
    .process-step h3 { font-size:24px; }
    .process-arrow { font-size:32px; }
    .hero-photo { background-position:center 54%; }
  }

  @media (hover:none), (pointer:coarse) {
    .svc-graphic {
      display:none !important;
      opacity:0 !important;
    }
    .svc:is(:hover, .svc-active) {
      transform:none;
      border-color:#2a2a29;
      box-shadow:none;
      z-index:auto;
    }
    .svc:is(:hover, .svc-active)::before {
      opacity:0;
    }
    .svc:is(:hover, .svc-active) .svc-name,
    .svc:is(:hover, .svc-active) .svc-desc,
    .svc:is(:hover, .svc-active) .svc-arr {
      opacity:1;
      transform:none;
    }
  }