/* ── Variables ── */
      :root {
        --ink: #f7f1e6;
        --muted: #c6bda9;
        --line: rgba(214, 162, 69, 0.32);
        --paper: #f3eadb;
        --surface: #fffaf0;
        --navy: #081326;
        --navy-2: #0f2038;
        --gold: #d6a245;
        --gold-2: #f1c36a;
        --bronze: #8f5b24;
        --green: #2f6f52;
        --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
      }
 
      *, *::before, *::after { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
 
      body {
        margin: 0;
        background: var(--navy);
        color: var(--ink);
        font-family: Arial, Helvetica, sans-serif;
      }
 
      a { color: inherit; text-decoration: none; }
      button, input, select { font: inherit; }
      h1, h2, h3, p { margin-top: 0; }
      h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
 
      svg {
        width: 20px; height: 20px;
        fill: none; stroke: currentColor;
        stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;
      }
 
      /* ── Topbar ── */
      .topbar {
        position: fixed;
        top: 0; z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        width: 100%;
        min-height: 86px;
        padding: 14px clamp(22px, 4vw, 64px);
        background: linear-gradient(180deg, rgba(3,9,20,0.94), rgba(3,9,20,0.74));
        border-bottom: 1px solid rgba(214,162,69,0.16);
        backdrop-filter: blur(12px);
      }
 
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        min-width: 240px;
        color: var(--gold-2);
      }
 
      .brand-mark {
        display: grid;
        width: 74px; height: 74px;
        place-items: center;
        overflow: hidden;
        border-radius: 6px;
        background: transparent;
      }
 
      .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
 
      .brand-name {
        display: grid;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 22px;
        line-height: 0.94;
        text-transform: uppercase;
      }
 
      .brand-name small {
        margin-top: 6px;
        color: #fff7df;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        letter-spacing: 0.42em;
      }
 
      .nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(14px, 2vw, 34px);
        color: #fff8ec;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
 
      .nav a { position: relative; padding: 8px 0; }
 
      .nav a::after {
        position: absolute;
        left: 0; bottom: -5px;
        width: 0; height: 2px;
        content: "";
        background: var(--gold);
        transition: width 160ms ease;
      }
 
      .nav a:hover,
      .nav a.active { color: var(--gold-2); }
 
      .nav a:hover::after,
      .nav a.active::after { width: 100%; }
 
      .header-actions { display: flex; align-items: center; gap: 12px; }
 
      .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        place-items: center;
        gap: 5px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: rgba(255,255,255,0.05);
        color: var(--gold-2);
        cursor: pointer;
      }
 
      .menu-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        transition: transform 160ms ease, opacity 160ms ease;
      }
 
      .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
      .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 
      .whatsapp-header {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 22px;
        border: 1px solid #f4c772;
        border-radius: 5px;
        background: linear-gradient(180deg, #f4c56c, #b87824);
        color: #14100a;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        box-shadow: inset 0 1px rgba(255,255,255,0.42), 0 12px 24px rgba(0,0,0,0.24);
        transition: filter 160ms ease;
      }
 
      .whatsapp-header:hover { filter: brightness(1.08); }
 
      /* ── Inner page wrapper ── */
      .inner-page { padding-top: 86px; }
 
      /* ── Eyebrow ── */
      .eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 12px;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }
 
      .eyebrow::before,
      .eyebrow::after {
        width: 48px; height: 1px;
        content: "";
      }
 
      /* ── Hero ── */
      .service-detail-hero {
        padding: 72px clamp(22px, 5vw, 80px) 80px;
        background:
          radial-gradient(ellipse at 80% 0%, rgba(214,162,69,0.22) 0%, transparent 55%),
          radial-gradient(ellipse at 5% 100%, rgba(139,82,20,0.18) 0%, transparent 40%),
          linear-gradient(160deg, #0b1828 0%, #0f2038 55%, #071020 100%);
        color: var(--ink);
        position: relative;
        overflow: hidden;
      }
 
      .service-detail-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          radial-gradient(circle, rgba(255,220,140,0.06) 1px, transparent 1px);
        background-size: 44px 44px;
        pointer-events: none;
      }
 
      .service-detail-hero .eyebrow {
        color: var(--gold-2);
        position: relative;
        z-index: 1;
      }
 
      .service-detail-hero .eyebrow::before,
      .service-detail-hero .eyebrow::after { background: var(--gold); }
 
      .service-detail-hero h1 {
        font-size: clamp(46px, 6.5vw, 90px);
        line-height: 0.93;
        color: #fffaf1;
        text-shadow: 0 12px 32px rgba(0,0,0,0.4);
        margin-bottom: 24px;
        position: relative; z-index: 1;
      }
 
      .service-detail-hero h1 span { color: var(--gold); }
 
      .hero-lead {
        max-width: 660px;
        font-size: 18px;
        line-height: 1.7;
        color: #e8ddc8;
        position: relative; z-index: 1;
        margin-bottom: 36px;
      }
 
      .hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 0 28px;
        border: 1px solid #f4ca78;
        border-radius: 5px;
        background: linear-gradient(180deg, #f3c86f, #a86717);
        color: #17100a;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        position: relative; z-index: 1;
        transition: filter 160ms ease;
      }
 
      .hero-cta:hover { filter: brightness(1.08); }
 
      /* ── Pill ── */
      .pill {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(214,162,69,0.15);
        border: 1px solid rgba(214,162,69,0.4);
        color: var(--gold-2);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
 
      /* ── Pricing ── */
      .pricing-section {
        padding: 72px clamp(22px, 5vw, 80px) 80px;
        background: var(--navy-2);
      }
 
      .section-header {
        text-align: center;
        margin-bottom: 52px;
      }
 
      .section-header .eyebrow {
        justify-content: center;
        color: var(--gold-2);
      }
 
      .section-header .eyebrow::before,
      .section-header .eyebrow::after { background: var(--gold); }
 
      .section-header h2 {
        color: #fffaf1;
        font-size: clamp(32px, 4vw, 52px);
        margin-bottom: 12px;
      }
 
      .section-header p {
        color: var(--muted);
        font-size: 15px;
        max-width: 520px;
        margin: 0 auto;
        line-height: 1.65;
      }
 
      .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }
 
      .pricing-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 32px 28px;
        border: 1px solid rgba(214,162,69,0.18);
        border-top: 4px solid var(--gold);
        border-radius: 4px;
        background: #0b192e;
        position: relative;
        transition: transform 200ms ease, border-color 200ms ease;
      }
 
      .pricing-card:hover {
        transform: translateY(-4px);
        border-color: rgba(214,162,69,0.5);
      }
 
      .pricing-card.featured {
        border-top-color: var(--gold-2);
        background: linear-gradient(160deg, #0f2038, #15284a);
        box-shadow: 0 0 0 1px rgba(241,195,106,0.28), var(--shadow);
      }
 
      .featured-badge {
        position: absolute;
        top: -1px; right: 24px;
        padding: 4px 12px;
        background: linear-gradient(180deg, #f3c86f, #a86717);
        color: #17100a;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        border-radius: 0 0 6px 6px;
      }
 
      .pricing-card h2 {
        color: #fffaf1;
        font-size: clamp(22px, 2.5vw, 30px);
        margin-bottom: 0;
        line-height: 1.1;
      }
 
      .pricing-card .price {
        font-family: Georgia, serif;
        font-size: 36px;
        font-weight: 900;
        color: var(--gold-2);
        line-height: 1;
      }
 
      .pricing-card .price-note {
        font-size: 13px;
        color: var(--muted);
        margin: -8px 0 0;
      }
 
      .pricing-card .desc {
        color: #c6bda9;
        font-size: 14px;
        line-height: 1.65;
        flex: 1;
      }
 
      .pricing-divider {
        border: 0;
        border-top: 1px solid rgba(214,162,69,0.15);
        margin: 0;
      }
 
      .pricing-includes {
        list-style: none;
        margin: 0; padding: 0;
        display: grid;
        gap: 10px;
      }
 
      .pricing-includes li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #d8cfc2;
        font-size: 14px;
        line-height: 1.45;
      }
 
      .pricing-includes li svg {
        flex-shrink: 0;
        margin-top: 1px;
        width: 16px; height: 16px;
        color: var(--gold);
      }
 
      .pricing-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 0 20px;
        border: 1px solid var(--gold);
        border-radius: 5px;
        background: transparent;
        color: var(--gold-2);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 160ms ease, color 160ms ease;
        text-align: center;
      }
 
      .pricing-cta:hover,
      .pricing-card.featured .pricing-cta {
        background: linear-gradient(180deg, #f3c86f, #a86717);
        border-color: #f4ca78;
        color: #17100a;
      }
 
      /* ── Process ── */
      .process-section {
        padding: 72px clamp(22px, 5vw, 80px) 80px;
        background: #f4ecdd;
        color: #172033;
      }
 
      .process-section .section-header .eyebrow {
        color: #9a621f;
      }
 
      .process-section .section-header .eyebrow::before,
      .process-section .section-header .eyebrow::after { background: #c58c35; }
 
      .process-section .section-header h2 { color: #0d172a; }
      .process-section .section-header p { color: #5d5548; }
 
      .process-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        counter-reset: step;
      }
 
      .process-card {
        padding: 28px 22px;
        border-top: 4px solid var(--gold);
        background: #fffaf0;
        box-shadow: 0 8px 24px rgba(40,31,20,0.09);
        counter-increment: step;
        position: relative;
      }
 
      .process-card::before {
        content: "0" counter(step);
        display: block;
        font-family: Georgia, serif;
        font-size: 48px;
        font-weight: 900;
        color: rgba(143, 91, 36, 0.14);
        line-height: 1;
        margin-bottom: 12px;
      }
 
      .process-card h3 {
        color: #0d172a;
        font-size: 18px;
        font-family: Georgia, serif;
        margin-bottom: 10px;
      }
 
      .process-card p {
        color: #5e5a51;
        font-size: 14px;
        line-height: 1.65;
        margin: 0;
      }
 
      .process-icon {
        width: 40px; height: 40px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(214,162,69,0.12);
        margin-bottom: 14px;
        color: var(--bronze);
      }
 
      .process-icon svg { width: 20px; height: 20px; }
 
      /* ── Quote band ── */
      .quote-band {
        padding: 52px clamp(22px, 5vw, 80px);
        background: #071225;
        text-align: center;
      }
 
      .quote-band blockquote {
        margin: 0;
        border: 0;
        padding: 0;
        background: transparent;
      }
 
      .quote-band p {
        margin: 0 auto 16px;
        max-width: 780px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(22px, 3vw, 38px);
        line-height: 1.4;
        color: #fffaf1;
        text-shadow: 0 0 28px rgba(214,162,69,0.22);
      }
 
      .quote-attr {
        color: var(--gold);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
 
      /* ── Footer ── */
      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 28px clamp(22px, 5vw, 80px);
        border-top: 1px solid rgba(214,162,69,0.28);
        background: #071225;
        color: #fff;
      }
 
      .footer strong { font-family: Georgia, serif; color: var(--surface); }
 
      .footer p {
        margin: 6px 0 0;
        color: rgba(255,255,255,0.6);
        font-size: 13px;
      }
 
      .footer-contact {
        color: var(--gold-2);
        font-weight: 800;
      }
 
      .footer-links {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
      }
 
      .footer-links a:hover { color: var(--surface); }
 
      /* ── Responsive ── */
      @media (max-width: 1100px) {
        .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
 
      @media (max-width: 900px) {
        .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
      }
 
      @media (max-width: 820px) {
        .topbar {
          flex-wrap: wrap;
          min-height: 74px;
          padding: 10px 18px;
        }
        .menu-toggle { display: inline-grid; margin-left: auto; }
        .header-actions { display: none; }
        .nav {
          display: none;
          order: 4;
          width: 100%;
          padding: 8px 0 2px;
          border-top: 1px solid rgba(214, 162, 69, 0.18);
        }
        .topbar.menu-open .nav {
          display: grid;
          gap: 0;
        }
        .nav a {
          padding: 13px 2px;
          border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .nav a::after {
          display: none;
        }
        .process-grid { grid-template-columns: 1fr; }
        .footer { flex-direction: column; align-items: flex-start; gap: 14px; }
      }
 
      @media (max-width: 560px) {
        .brand-name { display: none; }
      }