.sc-placeholder{background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:rgba(0,0,0,.7);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:rgba(0,0,0,.5);background:rgba(0,0,0,.05);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }

x-dc{display:none!important}



html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}

/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
* { box-sizing: border-box; }
  html, body { margin: 0; }
  ::selection { background: #1c6b48; color: #f0ead8; }
  @keyframes glr-spin { to { transform: rotate(360deg); } }
  @keyframes glr-pulse { 0%,100% { opacity: .3; } 50% { opacity: .9; } }
  @keyframes glr-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .glr-gfoot > div { min-width: 0; }
  .glr-gfoot a { overflow-wrap: anywhere; }

  /* Hamburger toggle (CSS-only, no JS). Base = hidden on desktop; the mobile
     reveal lives in the max-width:860px block below. These MUST sit before that
     media query, since equal-specificity rules are resolved by source order. */
  .glr-navtoggle { display:none; }
  .glr-burger { display:none; }

  @media (max-width: 860px) {
    .glr-nav { padding-left:20px!important; padding-right:20px!important; position:relative; }

    /* ── Mobile nav: hamburger opens a full-width dropdown panel ── */
    .glr-navtoggle { display:block; position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; margin:0; }
    .glr-burger { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; padding:6px; cursor:pointer; }
    .glr-burger span { display:block; height:2px; width:100%; background:#16170f; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
    .glr-navtoggle:checked ~ .glr-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .glr-navtoggle:checked ~ .glr-burger span:nth-child(2) { opacity:0; }
    .glr-navtoggle:checked ~ .glr-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .glr-navtoggle:focus-visible ~ .glr-burger { outline:2px solid #1c6b48; outline-offset:3px; }

    .glr-navlinks {
      display:none!important; position:absolute; top:100%; left:0; right:0;
      flex-direction:column!important; align-items:stretch!important; gap:0!important;
      padding:6px 0!important; background:#f3ecda;
      border-bottom:1px solid rgba(22,23,15,.12); box-shadow:0 16px 30px rgba(22,23,15,.16);
    }
    .glr-navtoggle:checked ~ .glr-navlinks { display:flex!important; }
    .glr-navlinks > a { display:block; padding:14px 24px; font-size:13px; }
    /* Services: heading + inline, indented sub-pages (no hover on touch).
       The .glr-nav prefix raises specificity above the base .glr-submenu rules
       (which are defined later in the file) so these win regardless of order. */
    .glr-nav .glr-hasmenu { position:static; display:block; }
    .glr-nav .glr-hasmenu > a { display:block; padding:14px 24px; font-size:13px; }
    .glr-nav .glr-hasmenu > a::after { display:none; }
    .glr-nav .glr-submenu { position:static; opacity:1; visibility:visible; transform:none; min-width:0; margin:0; border:0; box-shadow:none; background:transparent; }
    .glr-nav .glr-submenu::before { display:none; }
    .glr-nav .glr-submenu a { padding:12px 24px 12px 40px; border-bottom:0; color:#4f4f43; }
    /* Contact stays a distinct filled CTA at the bottom of the panel */
    .glr-navlinks > a[href*="contact"] { margin:8px 24px 10px!important; padding:14px 18px!important; text-align:center; background:#16170f!important; color:#efe8d8!important; letter-spacing:1.5px!important; }

    .glr-hero { grid-template-columns:1fr!important; min-height:auto!important; }
    .glr-herocontent { padding:88px 22px 56px!important; }
    .glr-herocontent h1 { font-size:clamp(40px,12vw,62px)!important; letter-spacing:-1.8px!important; }
    .glr-heropanel { min-height:440px!important; }
    .glr-sec { padding:74px 22px!important; }
    .glr-foot { padding-left:22px!important; padding-right:22px!important; }
    .glr-g3 { grid-template-columns:1fr!important; }
    .glr-g2 { grid-template-columns:1fr!important; gap:40px!important; }
    .glr-gfoot { grid-template-columns:1fr 1fr!important; gap:28px!important; }
    .glr-cell { border-right:none!important; padding-left:0!important; padding-right:0!important; }
  }
  @media (max-width: 520px) {
    .glr-gfoot { grid-template-columns:1fr!important; gap:30px!important; }
  }

  /* ── Content pages (services, case studies, blog posts) ──────────────
     Used by any hand-authored subpage built from templates/page-template.html.
     Keeps the page files clean: set the wrapper classes and write plain HTML. */
  .glr-page { background:#efe8d8; color:#16170f; font-family:Sora,sans-serif; -webkit-font-smoothing:antialiased; }
  .glr-page-inner { max-width:760px; margin:0 auto; padding:72px 24px 100px; }
  .glr-eyebrow { font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:2px; color:#1c6b48; margin-bottom:20px; }
  .glr-crumbs { font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:1px; color:#6a6a5a; margin-bottom:36px; }
  .glr-crumbs a { color:#6a6a5a; text-decoration:none; }
  .glr-crumbs a:hover { color:#16170f; }
  .glr-crumbs span { color:#a9863a; margin:0 8px; }
  .glr-prose h1 { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(34px,5.2vw,54px); line-height:1.02; letter-spacing:-1.8px; color:#16170f; margin:0 0 18px; }
  .glr-prose h2 { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(24px,3vw,32px); line-height:1.1; letter-spacing:-0.8px; color:#16170f; margin:54px 0 16px; }
  .glr-prose h3 { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:20px; letter-spacing:-0.3px; color:#16170f; margin:34px 0 12px; }
  .glr-prose p { font-weight:300; font-size:17px; line-height:1.66; color:#3c3d30; margin:0 0 20px; }
  .glr-prose .lead { font-size:19px; color:#4f4f43; }
  .glr-prose ul, .glr-prose ol { margin:0 0 24px; padding-left:0; list-style:none; }
  .glr-prose li { position:relative; font-weight:300; font-size:16px; line-height:1.62; color:#3c3d30; padding-left:24px; margin-bottom:10px; }
  .glr-prose li::before { content:"\21B3"; position:absolute; left:0; color:#1c6b48; }
  .glr-prose a { color:#1c6b48; text-decoration:underline; text-underline-offset:2px; }
  .glr-prose a:hover { color:#16170f; }
  .glr-prose strong { font-weight:500; color:#16170f; }
  .glr-prose em { font-style:italic; color:#1c6b48; }
  .glr-prose hr { border:0; border-top:1px solid rgba(22,23,15,.14); margin:46px 0; }
  .glr-cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:44px; }
  /* Scoped under .glr-prose so these beat the `.glr-prose a` link styling above
     (otherwise the buttons render as green underlined text). */
  .glr-prose .glr-btn { text-decoration:none; display:inline-flex; align-items:center; gap:10px; padding:15px 26px; background:#16170f; color:#efe8d8; font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:1.5px; transition:background .15s ease, color .15s ease; }
  .glr-prose .glr-btn:hover { color:#efe8d8; text-decoration:none; background:#26271a; }
  .glr-prose .glr-btn-ghost { background:transparent; border:1px solid rgba(22,23,15,.45); color:#16170f; }
  .glr-prose .glr-btn-ghost:hover { color:#16170f; text-decoration:none; background:rgba(22,23,15,.06); }
  @media (max-width: 860px) {
    .glr-page-inner { padding:56px 22px 72px; }
  }

  /* ── Nav dropdown (Services) ─────────────────────────────────────────
     Pure-CSS hover/focus menu. The SERVICES link itself stays clickable
     (jumps to the #services section); the submenu lists the service pages. */
  .glr-hasmenu { position:relative; }
  .glr-hasmenu > a::after { content:"\25BE"; margin-left:6px; font-size:8px; opacity:.55; vertical-align:middle; }
  .glr-submenu {
    position:absolute; top:100%; left:-16px; margin-top:15px; min-width:216px;
    display:flex; flex-direction:column;
    background:#f3ecda; border:1px solid rgba(22,23,15,.12);
    box-shadow:0 14px 34px rgba(22,23,15,.16);
    opacity:0; visibility:hidden; transform:translateY(-5px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  /* invisible bridge across the gap so the menu stays open while the cursor
     travels from the link down to the panel */
  .glr-submenu::before { content:""; position:absolute; left:0; right:0; top:-15px; height:15px; }
  .glr-hasmenu:hover > .glr-submenu,
  .glr-hasmenu:focus-within > .glr-submenu { opacity:1; visibility:visible; transform:translateY(0); }
  .glr-submenu a {
    padding:13px 18px; text-decoration:none; color:#3c3d30; white-space:nowrap;
    border-bottom:1px solid rgba(22,23,15,.08);
    font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.5px;
    transition:background .15s ease, color .15s ease;
  }
  .glr-submenu a:last-child { border-bottom:0; }
  .glr-submenu a:hover { background:#e9e0cc; color:#16170f; }

  /* "View service" link inside the front-page service cards */
  .glr-cardlink { display:inline-flex; align-items:center; gap:8px; transition:gap .15s ease, color .15s ease; }
  .glr-cardlink:hover { gap:12px; color:#16170f !important; }