@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/bricolage-grotesque.woff2') format('woff2');}

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

    :root {
      --orange: #D8342E;
      --orange-dark: #B4211C;
      --orange-light: #FCEBE9;
      --black: #0D0D0D;
      --gray-900: #1A1A1A;
      --gray-700: #3D3D3D;
      --gray-500: #6B6B6B;
      --gray-200: #E8E8E8;
      --gray-100: #F5F5F3;
      --white: #FFFFFF;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--black);
      background: var(--white);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 64px;
      height: 68px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--gray-200);
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .nav-logo-mark {
      width: 38px;
      height: 38px;
      background: var(--orange);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.5px;
      flex-shrink: 0;
    }
    .nav-logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }
    .nav-logo-name {
      font-size: 15px;
      font-weight: 800;
      color: var(--black);
      letter-spacing: -0.3px;
    }
    .nav-logo-sub {
      font-size: 10px;
      font-weight: 600;
      color: var(--gray-500);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }
    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-700);
      text-decoration: none;
      transition: color .15s;
    }
    .nav-links a:hover { color: var(--black); }
    .nav-cta {
      background: var(--orange) !important;
      color: #fff !important;
      padding: 10px 22px;
      border-radius: 8px;
      font-weight: 600 !important;
      font-size: 14px !important;
      transition: background .15s !important;
    }
    .nav-cta:hover { background: var(--orange-dark) !important; }

    /* ── HERO ── */
    .hero {
      padding-top: 68px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      overflow: hidden;
    }
    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 64px 80px 64px;
      background: var(--white);
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 24px;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 2px;
      background: var(--orange);
      border-radius: 2px;
    }
    .hero-h1 {
      font-size: 60px;
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: -2.5px;
      color: var(--black);
      margin-bottom: 24px;
    }
    .hero-h1 span {
      color: var(--orange);
    }
    .hero-sub {
      font-size: 18px;
      color: var(--gray-500);
      line-height: 1.7;
      max-width: 460px;
      margin-bottom: 44px;
    }
    .hero-actions {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange);
      color: #fff;
      padding: 15px 28px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      transition: background .15s, transform .12s;
    }
    .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--black);
      padding: 15px 28px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border: 1.5px solid var(--gray-200);
      transition: border-color .15s;
    }
    .btn-secondary:hover { border-color: #999; }
    .hero-metrics {
      display: flex;
      gap: 40px;
      margin-top: 56px;
      padding-top: 40px;
      border-top: 1px solid var(--gray-200);
    }
    .metric-num {
      font-size: 28px;
      font-weight: 900;
      color: var(--black);
      letter-spacing: -1px;
    }
    .metric-num span { color: var(--orange); }
    .metric-lbl {
      font-size: 12px;
      color: var(--gray-500);
      font-weight: 500;
      margin-top: 2px;
    }
    .hero-right {
      position: relative;
      background: #000;
      overflow: hidden;
    }
    .hero-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      filter: none;
    }
    .hero-right-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(244,121,32,0.26) 0%, rgba(13,13,13,0.52) 100%);
    }
    .hero-badge {
      position: absolute;
      bottom: 40px;
      right: 40px;
      background: var(--white);
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }
    .hero-badge-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gray-500);
      margin-bottom: 8px;
    }
    .hero-badge-value {
      font-size: 28px;
      font-weight: 900;
      color: var(--black);
      letter-spacing: -1px;
    }
    .hero-badge-value span { color: var(--orange); }
    .hero-badge-sub {
      font-size: 12px;
      color: var(--gray-500);
      margin-top: 2px;
    }

    /* ── SERVICES ── */
    .section { padding: 100px 64px; }
    .section-alt { background: var(--gray-100); }
    .section-dark { background: var(--black); }
    .section-inner { max-width: 1200px; margin: 0 auto; }
    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px;
    }
    .section-eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: var(--orange);
      border-radius: 2px;
    }
    .section-h2 {
      font-size: 48px;
      font-weight: 900;
      letter-spacing: -1.5px;
      line-height: 1.07;
      color: var(--black);
      margin-bottom: 16px;
    }
    .section-dark .section-h2 { color: var(--white); }
    .section-lead {
      font-size: 18px;
      color: var(--gray-500);
      line-height: 1.7;
      max-width: 560px;
      margin-bottom: 64px;
    }
    .section-dark .section-lead { color: rgba(255,255,255,0.5); }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .service-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 36px 32px;
      transition: box-shadow .2s, transform .2s;
    }
    .service-card:hover {
      box-shadow: 0 16px 48px rgba(0,0,0,0.08);
      transform: translateY(-4px);
    }
    .service-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--orange-light);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }
    .service-icon svg { width: 26px; height: 26px; }
    .service-title {
      font-size: 19px;
      font-weight: 800;
      color: var(--black);
      margin-bottom: 12px;
      letter-spacing: -0.3px;
    }
    .service-desc {
      font-size: 15px;
      color: var(--gray-500);
      line-height: 1.7;
    }

    /* ── ABOUT ── */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about-img {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      height: 500px;
      background: #000;
    }
    .about-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      filter: none;
    }
    .about-img-badge {
      position: absolute;
      bottom: 32px;
      left: 32px;
      background: var(--orange);
      color: #fff;
      border-radius: 14px;
      padding: 20px 24px;
    }
    .about-img-badge strong {
      display: block;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -1px;
    }
    .about-img-badge span {
      font-size: 12px;
      font-weight: 600;
      opacity: 0.85;
    }
    .about-content { display: flex; flex-direction: column; gap: 20px; }
    .about-p { font-size: 16px; color: var(--gray-700); line-height: 1.75; }
    .about-values {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 12px;
    }
    .value-item {
      padding: 20px;
      border-radius: 14px;
      background: var(--gray-100);
      border-left: 3px solid var(--orange);
    }
    .value-title { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
    .value-desc { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

    /* ── PROCESS ── */
    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 64px;
      position: relative;
    }
    .process-steps::before {
      content: '';
      position: absolute;
      top: 28px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: var(--gray-200);
      z-index: 0;
    }
    .process-step { text-align: center; position: relative; z-index: 1; padding: 0 16px; }
    .step-circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--white);
      border: 2px solid var(--orange);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 18px;
      font-weight: 900;
      color: var(--orange);
    }
    .step-title { font-size: 16px; font-weight: 800; color: var(--black); margin-bottom: 8px; }
    .step-desc { font-size: 13.5px; color: var(--gray-500); line-height: 1.65; }

    /* ── CONTACT ── */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .contact-info { display: flex; flex-direction: column; gap: 32px; }
    .contact-item { display: flex; align-items: flex-start; gap: 18px; }
    .contact-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--orange-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .contact-icon svg { width: 22px; height: 22px; color: var(--orange); }
    .contact-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
    .contact-value { font-size: 18px; font-weight: 700; color: var(--black); }
    .contact-value a { color: var(--black); text-decoration: none; }
    .contact-value a:hover { color: var(--orange); }
    .contact-form { display: flex; flex-direction: column; gap: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
    input, textarea, select {
      width: 100%;
      padding: 13px 16px;
      border: 1.5px solid var(--gray-200);
      border-radius: 10px;
      font-size: 15px;
      font-family: inherit;
      color: var(--black);
      background: var(--white);
      transition: border-color .15s;
      outline: none;
    }
    input:focus, textarea:focus, select:focus { border-color: var(--orange); }
    textarea { resize: vertical; min-height: 120px; }
    .form-submit {
      background: var(--orange);
      color: #fff;
      border: none;
      padding: 15px 28px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s;
      width: 100%;
    }
    .form-submit:hover { background: var(--orange-dark); }

    /* ── FOOTER ── */
    footer {
      background: var(--black);
      color: var(--white);
      padding: 64px 64px 40px;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 64px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }
    .footer-logo-mark {
      width: 36px;
      height: 36px;
      background: var(--orange);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      color: #fff;
    }
    .footer-logo-name { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
    .footer-logo-sub { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.4); letter-spacing: 1.5px; text-transform: uppercase; }
    .footer-tagline { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.7; max-width: 280px; }
    .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 18px; }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-links a { font-size: 14px; color: rgba(255,255,255,0.6); text-decoration: none; transition: color .15s; }
    .footer-links a:hover { color: #fff; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 32px;
    }
    .footer-copy { font-size: 13px; color: rgba(255,255,255,0.3); }
    .footer-legal { display: flex; gap: 20px; }
    .footer-legal a { font-size: 13px; color: rgba(255,255,255,0.3); text-decoration: none; }


    /* ── OG MARK ── */
    .ogmark { display:block; border-radius:10px; }
    .footer-logo-mark { width:auto!important; height:auto!important; background:none!important; }

    /* ── WORK / AJIL ── */
    .work-feature { display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; margin-top:24px; }
    .work-visual {
      position:relative; border-radius:24px; background:#C95F10;
      min-height:500px; display:flex; align-items:center; justify-content:center; padding:48px; overflow:hidden;
    }
    .wv-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .wv-overlay { position:absolute; inset:0; background:linear-gradient(145deg, rgba(240,100,30,.82) 0%, rgba(20,18,16,.74) 100%); }
    .phone { position:relative; z-index:2; width:236px; background:#0D0D0D; border-radius:34px; padding:11px; box-shadow:0 34px 80px rgba(0,0,0,.38); }
    .phone-shot { display:block; width:100%; border-radius:24px; }
    .phone-screen { background:#fff; border-radius:24px; overflow:hidden; }
    .ph-head { background:#0D0D0D; padding:16px 0 18px; display:flex; align-items:center; justify-content:center; }
    .ph-logo { position:relative; font-weight:800; font-size:30px; color:#fff; letter-spacing:-1px; }
    .ph-pin { position:absolute; right:-13px; top:-7px; width:14px; height:18px; }
    .ph-map { height:112px; background:
        radial-gradient(circle at 62% 46%, rgba(244,121,32,.18), transparent 60%),
        repeating-linear-gradient(0deg,#EEF0F1 0 22px,#E7E9EB 22px 23px),
        repeating-linear-gradient(90deg,#EEF0F1 0 22px,#E7E9EB 22px 23px);
      position:relative; }
    .ph-route { position:absolute; left:26%; top:64%; width:38%; height:2px; background:#0D0D0D; transform:rotate(-24deg); }
    .ph-mpin { position:absolute; left:60%; top:40%; width:20px; height:26px; }
    .ph-body { padding:16px 16px 20px; }
    .ph-status { font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#F47920; }
    .ph-title { font-size:16px; font-weight:800; color:#0D0D0D; margin:3px 0 12px; letter-spacing:-.3px; }
    .ph-track { display:flex; align-items:center; gap:0; margin-bottom:14px; }
    .ph-node { width:16px; height:16px; border-radius:50%; background:#0D0D0D; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
    .ph-node.off { background:#E4E6E8; }
    .ph-seg { height:3px; flex:1; background:#0D0D0D; }
    .ph-seg.off { background:#E4E6E8; }
    .ph-store { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #EDEFF0; border-radius:12px; }
    .ph-av { width:34px; height:34px; border-radius:9px; background:#FEF0E4; display:flex; align-items:center; justify-content:center; font-size:16px; }
    .ph-sn { font-size:12.5px; font-weight:700; color:#0D0D0D; }
    .ph-ss { font-size:10.5px; color:#8A8F94; margin-top:1px; }
    .ph-total { margin-left:auto; font-size:13px; font-weight:800; color:#0D0D0D; }
    .work-tag { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:14px; }
    .work-tag::before { content:''; width:7px; height:7px; border-radius:50%; background:#2E7D32; box-shadow:0 0 0 3px rgba(46,125,50,.18); }
    .work-title { font-size:30px; font-weight:900; letter-spacing:-1px; color:var(--black); margin-bottom:14px; }
    .work-desc { font-size:16px; color:var(--gray-700); line-height:1.75; margin-bottom:22px; }
    .work-stack { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
    .work-stack span { font-size:12.5px; font-weight:600; color:var(--gray-700); background:var(--gray-100); border:1px solid var(--gray-200); padding:7px 13px; border-radius:999px; }
    @media (max-width:1024px){ .work-feature{ grid-template-columns:1fr; gap:40px; } .work-visual{ min-height:auto; padding:40px; } }


    /* ── AJIL HERO ── */
    .ajil-hero { position:relative; border-radius:28px; overflow:hidden; margin-top:20px; min-height:600px; display:flex; align-items:center; box-shadow:0 30px 80px rgba(0,0,0,.18); }
    .ajil-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
    .ajil-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,18,16,.94) 0%, rgba(20,18,16,.74) 44%, rgba(240,100,30,.30) 100%); }
    .ajil-hero-inner { position:relative; z-index:2; width:100%; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; padding:56px 60px; }
    .ajil-hero-copy { max-width:600px; }
    .ajil-hero-title { font-size:46px; font-weight:900; letter-spacing:-1.6px; line-height:1.04; color:#fff; margin:14px 0 18px; }
    .ajil-hero-desc { font-size:16px; line-height:1.7; color:rgba(255,255,255,.82); margin-bottom:24px; }
    .ajil-stack { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
    .ajil-stack span { font-size:12.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); padding:7px 13px; border-radius:999px; }
    .ajil-hero-phone .phone { width:236px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      nav { padding: 0 32px; }
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-right { display: none; }
      .hero-left { padding: 80px 32px; }
      .hero-h1 { font-size: 44px; }
      .section { padding: 72px 32px; }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .process-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
      .process-steps::before { display: none; }
      .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .ajil-hero-inner { grid-template-columns:1fr; padding:40px 32px; }
      .ajil-hero-phone { display:none; }
      .ajil-hero-title { font-size:34px; }
      .ajil-hero-overlay { background:linear-gradient(180deg, rgba(20,18,16,.72), rgba(20,18,16,.90)); }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    }
    @media (max-width: 640px) {
      nav .nav-links { display: none; }
      .hero-h1 { font-size: 36px; letter-spacing: -1.5px; }
      .services-grid { grid-template-columns: 1fr; }
      .process-steps { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      footer { padding: 48px 24px 32px; }
      .footer-top { grid-template-columns: 1fr; }
      .section { padding: 60px 24px; }
    }
  

    /* ── MULTI-PAGE ADDITIONS ── */
    .nav-actions { display:flex; align-items:center; gap:14px; }
    .nav-ajil {
      display:inline-flex; align-items:center; gap:6px;
      font-size:14px; font-weight:700; color:var(--orange);
      text-decoration:none; padding:9px 16px; border:1.5px solid var(--orange);
      border-radius:8px; transition:background .15s,color .15s; white-space:nowrap;
    }
    .nav-ajil:hover { background:var(--orange); color:#fff; }
    .page-hero { padding:148px 64px 60px; background:var(--gray-100); border-bottom:1px solid var(--gray-200); }
    .page-hero-title { font-size:56px; font-weight:900; letter-spacing:-2px; line-height:1.04; color:var(--black); margin-bottom:16px; }
    .page-hero-sub { font-size:18px; color:var(--gray-500); max-width:620px; line-height:1.7; }
    .cta-band { text-align:center; }
    .cta-band .section-lead { margin-left:auto; margin-right:auto; }
    .ajil-cta {
      display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--black);
      padding:15px 28px; border-radius:10px; font-size:15px; font-weight:700; text-decoration:none;
      border:1.5px solid var(--gray-200); transition:border-color .15s, transform .12s; margin-left:12px;
    }
    .ajil-cta:hover { border-color:#999; transform:translateY(-1px); }
    @media (max-width:1024px){
      .page-hero { padding:120px 32px 48px; }
      .page-hero-title { font-size:42px; }
    }
    @media (max-width:640px){
      .nav-ajil { padding:8px 12px; font-size:13px; }
      .nav-cta { padding:9px 14px !important; }
      .page-hero-title { font-size:32px; letter-spacing:-1px; }
      .ajil-cta { margin-left:0; margin-top:12px; }
    }

/* ================= PREMIUM LAYER ================= */
:root{
  --red:#D8342E; --red-2:#EF6A50; --red-deep:#B4211C;
  --ink:#0B0B0C; --paper:#FBFAF8;
  --grad-red:linear-gradient(118deg,#EF6A50 0%,#D8342E 52%,#B4211C 100%);
  --shadow-sm:0 2px 10px rgba(15,15,20,.05);
  --shadow-md:0 20px 44px -22px rgba(25,18,18,.38);
  --shadow-lg:0 46px 100px -46px rgba(25,18,18,.55);
  --r-lg:22px; --r-xl:30px;
}
html{ scroll-behavior:smooth; }
body{ background:var(--paper); letter-spacing:-0.011em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--red); color:#fff; }
h1,h2,h3,.hero-h1,.section-h2,.section-h2 *,.service-title,.value-title,.step-title,.footer-logo-name,.ajil-hero-title,.hero-badge-value,.metric-num{
  font-family:'Bricolage Grotesque','Inter',-apple-system,sans-serif;
  letter-spacing:-0.03em;
}

/* NAV */
nav{ height:74px; padding:0 44px; background:rgba(251,250,248,.7); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid rgba(15,15,20,.06); transition:height .35s ease, background .35s ease, box-shadow .35s ease; }
nav.scrolled{ height:62px; background:rgba(251,250,248,.9); box-shadow:0 12px 34px -20px rgba(0,0,0,.3); }
.nav-links a{ position:relative; font-weight:500; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; background:var(--grad-red); border-radius:2px; transition:width .28s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-logo-sub{ color:var(--red); font-weight:800; letter-spacing:.16em; }
.nav-cta{ border-radius:999px; background:var(--ink); box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; }
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 16px 28px -14px rgba(0,0,0,.5); }
.nav-ajil{ border-radius:999px; transition:color .25s, border-color .25s, background .25s; }
.nav-ajil:hover{ color:var(--red); border-color:var(--red); }

/* BUTTONS */
.btn-primary{ background:var(--grad-red); border-radius:999px; box-shadow:0 16px 32px -16px rgba(216,52,46,.72); transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 24px 48px -18px rgba(216,52,46,.85); }

/* HERO */
.hero-eyebrow,.section-eyebrow{ color:var(--red); letter-spacing:.22em; font-weight:800; }
.hero-h1{ letter-spacing:-0.045em; line-height:1.01; }
.hero-h1 span{ background:var(--grad-red); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hero-badge-value .metric-num,.metric-num{ background:var(--grad-red); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* SECTION RHYTHM */
.section{ padding-top:98px; padding-bottom:98px; }
.section-h2{ letter-spacing:-0.035em; }

/* CARDS */
.service-card{ border-radius:var(--r-lg); border:1px solid rgba(15,15,20,.07); background:#fff; box-shadow:var(--shadow-sm); transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s, border-color .38s; }
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(216,52,46,.28); }
.service-icon{ background:var(--grad-red); color:#fff; border-radius:14px; box-shadow:0 12px 24px -12px rgba(216,52,46,.6); }
.value-item,.process-step,.contact-item{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.value-item:hover,.contact-item:hover{ transform:translateY(-4px); }
.step-circle{ background:var(--grad-red); box-shadow:0 12px 26px -12px rgba(216,52,46,.6); }

/* DARK SECTIONS */
.section-dark,.cta-band{ background:radial-gradient(130% 150% at 78% -10%, #241c1b 0%, #0B0B0C 58%); }

/* REVEAL ANIMATIONS */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }