:root {
      --navy: #10243d;
      --navy-2: #173753;
      --ink: #14202c;
      --muted: #5a6773;
      --orange: #f5a623;
      --orange-deep: #dc8311;
      --pale: #f4f7fa;
      --white: #ffffff;
      --line: #dce4ea;
      --green: #217a58;
      --shadow: 0 18px 45px rgba(16, 36, 61, .13);
      --radius: 22px;
      --max: 1160px;
    }

    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--white);
      font-family: Aptos, "Segoe UI", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.55;
    }
    a { color: inherit; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    .wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--orange-deep);
      font-size: .84rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(220, 228, 234, .8);
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(12px);
    }
    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: var(--navy);
      text-decoration: none;
      font-size: 1.35rem;
      font-weight: 900;
      letter-spacing: -.04em;
    }
    .brand-mark {
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: var(--orange);
      background: var(--navy);
      box-shadow: 0 7px 18px rgba(16, 36, 61, .18);
    }
    .brand-mark svg { width: 23px; height: 23px; }
    nav { display: flex; align-items: center; gap: 27px; }
    nav a {
      color: #334454;
      text-decoration: none;
      font-size: .95rem;
      font-weight: 700;
    }
    nav a:hover { color: var(--navy); }
    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 19px;
      border: 0;
      border-radius: 13px;
      background: var(--orange);
      color: #17212b;
      text-decoration: none;
      font-weight: 850;
      box-shadow: 0 10px 22px rgba(245, 166, 35, .22);
      cursor: pointer;
      transition: transform .2s ease, background .2s ease;
    }
    .button:hover { background: #ffb83e; transform: translateY(-2px); }
    .button.dark { background: var(--navy); color: white; box-shadow: none; }
    .button.dark:hover { background: var(--navy-2); }
    .button svg { width: 19px; height: 19px; }

    .hero {
      padding: 52px 0 32px;
      background:
        radial-gradient(circle at 9% 18%, rgba(245,166,35,.17), transparent 21rem),
        linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      align-items: center;
      gap: 46px;
    }
    .local-pill {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      padding: 8px 12px;
      border: 1px solid #ced9e1;
      border-radius: 99px;
      background: white;
      color: #3b4d5d;
      font-size: .88rem;
      font-weight: 750;
    }
    .local-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
    h1 {
      margin: 0;
      max-width: 670px;
      color: var(--navy);
      font-size: clamp(2.55rem, 5vw, 4.75rem);
      line-height: .98;
      letter-spacing: -.065em;
    }
    h1 em { color: var(--orange-deep); font-style: normal; }
    .hero-copy > p {
      max-width: 610px;
      margin: 23px 0 26px;
      color: var(--muted);
      font-size: 1.12rem;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-note { margin-top: 17px; color: #6f7b84; font-size: .9rem; }
    .hero-card {
      position: relative;
      overflow: hidden;
      min-height: 540px;
      border-radius: 30px;
      background: var(--navy);
      box-shadow: var(--shadow);
    }
    .hero-card { height: 580px; }
    .hero-card img { width: 100%; height: 100%; object-fit: cover; }
    .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
    .hero-slide.active { opacity: 1; visibility: visible; }
    .hero-slide.contain img { object-fit: contain; }
    .hero-card::after { z-index: 1; }
    .carousel-controls { position: absolute; z-index: 3; top: 18px; left: 18px; right: 18px; display: flex; align-items: center; gap: 8px; }
    .carousel-controls button { width: 44px; height: 44px; border: 1px solid #ffffff80; border-radius: 50%; background: #10243ded; color: white; cursor: pointer; font-size: 1.25rem; }
    .carousel-controls .carousel-pause { width: auto; padding-inline: 14px; border-radius: 24px; font-size: .88rem; margin-left: auto; }
    .carousel-controls button:hover { background: var(--navy-2); }
    .carousel-controls[hidden] { display: none; }
    button:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
    .carousel-count { font-size: .88rem; padding: 7px 11px; border-radius: 20px; color: white; background: #10243ded; }
    .service-photo { margin: -29px -29px 25px; position: relative; }
    .service-photo img { width: 100%; height: 205px; object-fit: cover; border-radius: 21px 21px 0 0; }
    .service-photo small { position: absolute; bottom: 10px; right: 12px; padding: 3px 9px; border-radius: 12px; color: white; background: #10243de6; font-size: .75rem; }
    .photo-credits { margin: 18px 0 0; font-size: .85rem; color: var(--muted); }
    .hero-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 56%, rgba(8, 24, 39, .78));
      pointer-events: none;
    }
    .image-label {
      position: absolute;
      z-index: 2;
      left: 24px;
      right: 24px;
      bottom: 23px;
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      color: white;
    }
    .image-label strong { display: block; font-size: 1.15rem; }
    .image-label span { font-size: .88rem; color: #e4edf3; }
    .round-icon {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--navy);
      background: var(--orange);
    }
    .round-icon svg { width: 22px; }

    .trust-strip { padding: 22px 0; }
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: white;
      box-shadow: 0 10px 28px rgba(16,36,61,.06);
    }
    .trust-item { padding: 20px 22px; border-right: 1px solid var(--line); }
    .trust-item:last-child { border: 0; }
    .trust-item strong { display: block; color: var(--navy); }
    .trust-item span { color: var(--muted); font-size: .88rem; }

    section { padding: 86px 0; }
    .section-head {
      display: grid;
      grid-template-columns: 1fr .82fr;
      gap: 40px;
      align-items: end;
      margin-bottom: 34px;
    }
    h2 {
      margin: 0;
      color: var(--navy);
      font-size: clamp(2rem, 4vw, 3.25rem);
      line-height: 1.05;
      letter-spacing: -.05em;
    }
    .section-head > p { margin: 0; color: var(--muted); }

    .services { background: var(--pale); }
    .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .service-card {
      min-height: 280px;
      display: flex;
      flex-direction: column;
      padding: 29px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
    }
    .service-card.featured {
      color: white;
      border-color: var(--navy);
      background: var(--navy);
      box-shadow: var(--shadow);
    }
    .service-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      margin-bottom: 34px;
      border-radius: 14px;
      color: var(--navy);
      background: #fff3df;
    }
    .featured .service-icon { color: var(--navy); background: var(--orange); }
    .service-icon svg { width: 25px; height: 25px; }
    .service-card h3 { margin: 0 0 9px; color: var(--navy); font-size: 1.22rem; }
    .service-card.featured h3 { color: white; }
    .service-card p { margin: 0 0 18px; color: var(--muted); }
    .service-card.featured p { color: #d4e0e9; }
    .service-card ul { margin: auto 0 0; padding: 0; list-style: none; }
    .service-card li { position: relative; margin-top: 8px; padding-left: 19px; font-size: .94rem; }
    .service-card li::before { content: "•"; position: absolute; left: 0; color: var(--orange-deep); font-weight: 900; }
    .featured li::before { color: var(--orange); }

    .work { background: white; }
    .work-subheading { margin: 0 0 20px; color: var(--navy); font-size: 1.35rem; }
    .video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 42px; }
    .video-card { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: white; }
    .video-card video { display: block; width: 100%; height: 360px; object-fit: contain; background: #081827; }
    .video-card figcaption { padding: 20px; }
    .video-card strong { display: block; margin-bottom: 7px; font-size: 1.07rem; }
    .video-card p { margin: 0 0 10px; color: #dce7ee; font-size: .94rem; }
    .video-card span { display: block; color: #dce7ee; font-size: .875rem; }
    .video-card a { color: inherit; }
    .work-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 18px; }
    .work-card {
      position: relative;
      height: 390px;
      min-height: 330px;
      margin: 0;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--navy);
      box-shadow: 0 12px 30px rgba(16,36,61,.1);
    }
    .work-card:first-child { grid-column: span 2; }
    .work-card img { width: 100%; height: 100%; object-fit: cover; }
    .work-card.portrait img { object-fit: contain; }
    .work-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(8,24,39,.83));
    }
    .work-caption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; color: white; }
    .work-caption strong { display: block; font-size: 1.07rem; }
    .work-caption span { color: #dce7ee; font-size: .86rem; }

    .process-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 68px; align-items: start; }
    .process-intro { position: sticky; top: 120px; }
    .process-intro p { color: var(--muted); }
    .steps { border-top: 1px solid var(--line); }
    .step {
      display: grid;
      grid-template-columns: 66px 1fr;
      gap: 18px;
      padding: 27px 0;
      border-bottom: 1px solid var(--line);
    }
    .step-number {
      color: var(--orange-deep);
      font-size: 1.1rem;
      font-weight: 900;
      letter-spacing: .08em;
    }
    .step h3 { margin: 0 0 5px; color: var(--navy); }
    .step p { margin: 0; color: var(--muted); }

    .scope { padding-top: 0; }
    .scope-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
      border-radius: 28px;
      background: var(--navy);
      color: white;
    }
    .scope-copy { padding: 48px; }
    .scope-copy h2 { color: white; }
    .scope-copy p { color: #cddae4; }
    .scope-list { display: grid; gap: 12px; margin-top: 25px; }
    .scope-list div { display: flex; gap: 11px; align-items: flex-start; }
    .scope-list svg { flex: 0 0 auto; width: 20px; margin-top: 2px; color: var(--orange); }
    .boundary {
      display: grid;
      place-items: center;
      padding: 48px;
      background: #173753;
    }
    .boundary-card {
      max-width: 430px;
      padding: 29px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 20px;
      background: rgba(255,255,255,.07);
    }
    .boundary-card strong { display: block; margin-bottom: 8px; color: var(--orange); font-size: 1.15rem; }
    .boundary-card p { margin: 0; color: #d6e2ea; }

    .quote { background: #f2f6f8; }
    .quote-panel {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 52px;
      padding: 48px;
      border-radius: 28px;
      background: white;
      box-shadow: var(--shadow);
    }
    .quote-copy p { color: var(--muted); }
    .areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
    .areas span { padding: 7px 11px; border-radius: 99px; background: var(--pale); color: #435565; font-size: .87rem; font-weight: 700; }
    form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    label { display: grid; gap: 7px; color: #314251; font-size: .9rem; font-weight: 750; }
    label.full { grid-column: 1 / -1; }
    input, select, textarea {
      width: 100%;
      min-height: 49px;
      padding: 12px 13px;
      border: 1px solid #cbd6de;
      border-radius: 11px;
      color: var(--ink);
      background: white;
    }
    textarea { min-height: 100px; resize: vertical; }
    input:focus, select:focus, textarea:focus { outline: 3px solid rgba(245,166,35,.25); border-color: var(--orange-deep); }
    .form-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
    .form-note { color: #687681; font-size: .84rem; }
    .demo-message {
      display: none;
      grid-column: 1 / -1;
      padding: 12px 14px;
      border-radius: 10px;
      color: #145a3f;
      background: #e8f6ef;
      font-weight: 700;
    }
    .demo-message.show { display: block; }

    footer { padding: 31px 0; color: #d1dce4; background: #0b1c2e; }
    .footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
    .footer-grid p { margin: 0; font-size: .9rem; }
    .footer-brand { color: white; font-weight: 900; font-size: 1.1rem; }

    @media (max-width: 900px) {
      nav a:not(.button) { display: none; }
      .hero-grid, .section-head, .process-grid, .quote-panel { grid-template-columns: 1fr; }
      .hero { padding-top: 34px; }
      .hero-card { height: 490px; min-height: 410px; }
      .trust-grid { grid-template-columns: 1fr 1fr; }
      .trust-item:nth-child(2) { border-right: 0; }
      .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .service-grid { grid-template-columns: 1fr 1fr; }
      .work-grid { grid-template-columns: 1fr 1fr; }
      .work-card:first-child { min-height: 410px; }
      .process-intro { position: static; }
      .scope-panel { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .wrap { width: min(calc(100% - 28px), var(--max)); }
      .nav { min-height: 68px; }
      .nav .button { padding-inline: 13px; font-size: .88rem; }
      .hero-grid { gap: 28px; }
      .hero-card { height: 440px; min-height: 330px; }
      section { padding: 66px 0; }
      .trust-grid, .service-grid { grid-template-columns: 1fr; }
      .trust-item { border-right: 0; border-bottom: 1px solid var(--line); }
      .trust-item:nth-child(3) { border-bottom: 1px solid var(--line); }
      .work-grid, .video-grid { grid-template-columns: 1fr; }
      .video-card video { height: 400px; }
      .work-card, .work-card:first-child { min-height: 360px; }
      .work-card:first-child { grid-column: auto; }
      .scope-copy, .boundary, .quote-panel { padding: 30px 23px; }
      form { grid-template-columns: 1fr; }
      label.full, .form-footer, .demo-message { grid-column: auto; }
      .footer-grid { align-items: flex-start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }
  
.service-detail{max-width:860px;margin:auto}.service-detail h1{font-size:clamp(2.2rem,5vw,3.5rem)}.service-detail h2{font-size:1.7rem;margin:2rem 0 .8rem}.service-detail p,.service-detail li{font-size:1.05rem;line-height:1.8}.service-detail img{width:100%;max-height:460px;object-fit:contain;background:#f4f7fa;border-radius:18px;margin:24px 0}.service-detail details{padding:18px 0;border-bottom:1px solid #dce4ea}.service-detail summary{font-weight:700;cursor:pointer}.service-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding-left:20px}.service-links a{text-decoration:underline;text-underline-offset:4px}.breadcrumb{margin-bottom:24px;font-size:.95rem}.service-detail .hero-actions{margin:24px 0}