:root{--tw-accent:#3a8058;--tw-accent-hover:#2c6344;--tw-accent-2:#5fadc2;--tw-gold:#f2c14e;--tw-stage-1:#1b2820;--tw-stage-2:#141d18;--tw-stage-text:#f3f1e9;--tw-radius-panel:26px;--tw-radius-card:16px;--tw-blur:28px;--tw-scale:1;--tw-dim:rgba(12,18,16,0.28);--tw-backdrop:url('https://images.unsplash.com/photo-1628881092867-b0d64c819b59?q=80&w=1600&auto=format&fit=crop')}
main{zoom:var(--tw-scale)}
:root{--tw-canvas:#e9edec;--tw-paper:#f4f6f5;--tw-ink:#1a2320;--tw-ink-2:#54605b;--tw-ink-3:#8b938f;--tw-line:rgba(26,35,32,0.12);--tw-line-soft:rgba(26,35,32,0.07);--tw-hover:rgba(26,35,32,0.05);--tw-frame:rgba(247,246,241,0.62);--tw-glass-50:rgba(255,255,255,0.5);--tw-side:rgba(255,255,255,0.28);--tw-chip:rgba(255,255,255,0.55);--tw-glass-strong:rgba(255,255,255,0.72)}
html[data-resolved-theme="dark"]{--tw-canvas:#0d1210;--tw-paper:#161d19;--tw-ink:#eef1ee;--tw-ink-2:#a7b1ac;--tw-ink-3:#6f7873;--tw-line:rgba(255,255,255,0.13);--tw-line-soft:rgba(255,255,255,0.07);--tw-hover:rgba(255,255,255,0.07);--tw-frame:rgba(16,22,19,0.58);--tw-glass-50:rgba(255,255,255,0.10);--tw-side:rgba(255,255,255,0.04);--tw-chip:rgba(255,255,255,0.06);--tw-glass-strong:rgba(22,29,25,0.72)}
html[data-resolved-theme="dark"] body::after{background:rgba(8,12,10,0.5)}
html,body{margin:0}
body{background:var(--tw-canvas);font-family:var(--font-body);color:var(--tw-ink);-webkit-font-smoothing:antialiased;padding:48px 24px;}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--tw-backdrop) center/cover no-repeat fixed}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--tw-dim)}
body[data-backdrop="flat"]::before,body[data-backdrop="flat"]::after{display:none}
a{color:var(--tw-accent);text-decoration:none}
a:hover{color:var(--tw-accent-hover)}

/* one-page nav: breathing room above each anchored section so its heading
   doesn't land flush against the viewport edge when jumped to */
main section[id]{scroll-margin-top:24px}

/* hover treatments (design-canvas "style-hover" shorthand, made real for static export) */
.hov-nav:hover{background:var(--tw-hover);color:var(--tw-ink)}
.hov-green:hover{color:var(--tw-accent)}
.hov-btn:hover{background:var(--tw-accent-hover)}
.hov-ghost:hover{background:var(--tw-hover)}
.hov-card:hover{border-color:color-mix(in srgb, var(--tw-accent) 40%, transparent);box-shadow:0 10px 30px rgba(26,35,32,0.08);transform:translateY(-2px)}
.hov-card-static:hover{border-color:color-mix(in srgb, var(--tw-accent) 40%, transparent);box-shadow:0 10px 30px rgba(26,35,32,0.08)}
.hov-border:hover{border-color:color-mix(in srgb, var(--tw-accent) 35%, transparent)}
.hov-gold:hover{color:var(--tw-stage-text)}

/* image-slot placeholders (static export has no drag-and-drop image runtime) */
.img-slot{width:100%;height:100%;background:var(--tw-chip);border:1px solid var(--tw-line);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;box-sizing:border-box}
.img-slot span{font-family:var(--font-mono);font-size:10px;letter-spacing:0.05em;color:var(--tw-ink-3);line-height:1.4;text-transform:lowercase}

/* ---- mobile (<=720px) ----
   The page content below was authored as fixed-width inline styles for a
   1180px desktop canvas. site-chrome.js collapses the sidebar/main grid and
   turns the sidebar into a drawer; these rules handle everything inside
   <main> — card grids, split layouts, headline sizes, gutters. !important is
   required throughout since inline styles otherwise always win the cascade. */
@media (max-width:720px){
  main section, main > div{padding-left:18px !important;padding-right:18px !important}
  main section[style*="margin"]{margin-left:14px !important;margin-right:14px !important}

  /* collapse every inline grid (card grids, image+copy split layouts, label+value rows) to one column */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* ...except the dense tools/clients grids, which read better as 2 columns than 1 */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr) !important}

  /* the industry cards (work.html) place children by explicit grid-column/grid-row,
     which breaks once the grid above is forced to one column — reset placement so
     icon, heading, copy and tag stack in natural order */
  [style*="grid-template-columns:118px 1fr"] > [style*="grid-column:1"],
  [style*="grid-template-columns:118px 1fr"] > [style*="grid-column:2"]{
    grid-column:1 !important;grid-row:auto !important;
  }

  /* about.html portrait slot has a fixed 300px width that overflows narrow phones */
  [style*="width:300px;height:360px"]{width:100% !important;height:260px !important}

  /* dark radial-gradient feature/CTA boxes (home, services, about, contact) */
  [style*="radial-gradient(120% 90% at 15% 0%"]{padding:26px 20px !important}

  h1[style*="font-size:34px"]{font-size:25px !important;line-height:1.3 !important}
  h2[style*="font-size:40px"]{font-size:26px !important}
  h2[style*="font-size:34px"]{font-size:23px !important}
  h2[style*="font-size:28px"]{font-size:20px !important}

  /* clear the fixed mobile top bar (burger/wordmark/toggle) when jumping to an anchor */
  main section[id]{scroll-margin-top:90px}
}