/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{box-sizing:border-box}
  html,body{margin:0;padding:0}
  :root{
    --ink:#16232D;--ink-2:#40525E;--muted:#6B7A83;
    --bg:#F6F7F4;--surface:#FFFFFF;--line:#E4E7E2;
    --accent:#2E7D8A;--accent-2:#8FB9BF;--accent-wash:#E7F0F1;
  }
  body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  a{color:var(--accent);text-decoration:none}
  a:hover{color:var(--ink)}
  input,select,textarea,button{font-family:inherit}
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  @media (max-width:860px){
    [data-headshot]{width:100%!important;max-width:380px!important;margin-left:auto!important;margin-right:auto!important}
    [data-cta]{padding:34px 24px!important}
    [data-cta-title]{font-size:26px!important}
    [data-carousel-wrap]{max-width:100%!important}
    [data-carousel-btn]{display:none!important}
    [data-hero-card]{padding:32px 24px!important}
    [data-hero]{grid-template-columns:1fr!important}
    [data-hero-art]{display:none!important}
    [data-grid3]{grid-template-columns:1fr!important}
    [data-grid2]{grid-template-columns:1fr!important}
    [data-nav-links]{display:none!important}
    [data-sec]{padding-left:22px!important;padding-right:22px!important}
    [data-h1]{font-size:42px!important}
    [data-split]{grid-template-columns:1fr!important}
  }

/* ---------- multi-page additions ---------- */
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.prose{font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-family:'Bricolage Grotesque';font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-0.02em;color:var(--ink);margin:38px 0 14px}
.prose h3{font-family:'Bricolage Grotesque';font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-0.015em;color:var(--ink);margin:30px 0 12px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
/* Inset inline article images and never upscale them past their natural size. */
.prose img{max-width:min(100%,555px);height:auto;border-radius:14px;display:block;margin:26px auto}
.prose figure{margin:24px 0}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent-2);color:var(--ink-2);font-style:italic}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose code{font-family:'IBM Plex Mono',monospace;font-size:.9em;background:var(--accent-wash);padding:2px 6px;border-radius:5px}
.prose pre{background:var(--ink);color:#fff;padding:18px;border-radius:14px;overflow-x:auto}
.prose pre code{background:none;color:inherit;padding:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
/* ---- mobile fixes ---- */
@media (max-width:860px){
  /* Nav links were hidden here with no menu to replace them, so Services, Blog
     and About were only reachable by scrolling to the footer. They wrap onto a
     second header row instead, which needs no JavaScript. */
  header [data-sec]{flex-wrap:wrap;padding:12px 22px!important;gap:12px!important}
  header [data-sec] > a:last-of-type{margin-left:auto!important}
  [data-nav-links]{display:flex!important;order:3;width:100%;margin-left:0!important;
    justify-content:center;gap:26px!important;padding-top:10px;border-top:1px solid var(--line)}
  [data-nav-links] a{padding:9px 0!important;font-size:15px!important}
  /* Logo and CTA missed sharing a row by 11px, which pushed the header to three
     rows and 21% of a phone screen while sticky. Trimmed to fit on two. */
  header [data-sec] > a:first-of-type span{font-size:15px!important}
  header [data-sec] > a:first-of-type img{width:32px!important;height:32px!important}
  header [data-sec] > a:last-of-type{padding:9px 16px!important;font-size:13.5px!important}
  /* iOS Safari zooms the whole page when a focused field is under 16px. */
  input,textarea,select{font-size:16px!important}
}
/* Carousel controls. The dots are 8px visually but carry a 40px invisible hit
   area, since an 8px tap target is unusable on a phone. */
.sc-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer}
.sc-dot.is-active{background:var(--ink)}
.sc-dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px}
@media (max-width:860px){
  /* Arrows were hidden here on the assumption that swiping would do, but a
     swipe has no affordance and the dots alone are too small to hit. They come
     back overlaid on the card so the layout does not lose width to them. */
  [data-carousel-btn]{display:flex!important;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px!important;height:40px!important;background:color-mix(in srgb,var(--surface) 92%,transparent)!important;box-shadow:0 1px 6px rgba(0,0,0,.14)}
  [data-carousel-grid]{position:relative}
  #sc-prev{left:-4px}
  #sc-next{right:-4px}
  #sc-dots{gap:18px!important}
}
/* Announcement bar. Cool, on-palette background so it does not compete with
   the hero card beneath it; the single yellow accent is confined to the badge,
   which is what carries the "new" signal. */
.tb-badge{background:#E6B93C;color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none}
.tb-cta{background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:7px 15px;border-radius:999px;white-space:nowrap;flex:none;transition:background .2s ease}
[data-topbar]:hover .tb-cta{background:var(--ink)}
@media (max-width:860px){
  [data-topbar] > div{padding:10px 22px!important;gap:9px!important;font-size:13.5px!important}
}
/* Hero: inset the card content further on wide screens so the headline sits
   closer to the photo. Below this the text column gets too narrow and the
   headline gains lines, so the default 40px padding stands. */
@media (min-width:1280px){[data-hero-card]{padding:44px 72px 36px!important}}
/* Hero photo: tinted to sit with the palette, going full colour on hover.
   The SPA drove this from React state; CSS alone does it here. */
[data-hero-art] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.55) contrast(1.02);transition:filter .4s ease}
[data-hero-art] .tint,[data-hero-art] .shade{position:absolute;inset:0;opacity:.62;transition:opacity .4s ease;pointer-events:none}
[data-hero-art] .tint{background:var(--accent);mix-blend-mode:color}
[data-hero-art] .shade{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 12%,transparent) 40%,color-mix(in srgb,var(--ink) 70%,transparent))}
[data-hero-art]:hover img{filter:none}
[data-hero-art]:hover .tint,[data-hero-art]:hover .shade{opacity:0}
@media (prefers-reduced-motion:reduce){[data-hero-art] img,[data-hero-art] .tint,[data-hero-art] .shade{transition:none}}
/* Blog archive. Card images ran the full column width, so twenty posts took a
   dozen screens to scroll. The archive is a list with thumbnails instead, and
   the chips above it show at a glance how much sits under each topic. */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0}
.chip{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.chip:hover{border-color:var(--accent-2);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-n{font-size:11px;opacity:.6}
.postrow{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line);color:inherit}
.postrow:first-child{border-top:0}
.postrow[hidden]{display:none}
.postrow:hover{color:inherit}
.postrow:hover .pr-title{color:var(--accent)}
.pr-thumb{flex:none;width:104px;height:78px;border-radius:10px;overflow:hidden;background:var(--accent-wash);display:block}
.pr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pr-body{flex:1 1 auto;min-width:0;display:block}
.pr-meta{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap}
.pr-cat{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-wash);border-radius:999px;padding:3px 9px;line-height:1.5}
.pr-date{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.pr-title{display:block;font-family:'Bricolage Grotesque';font-weight:600;font-size:19px;line-height:1.3;
  letter-spacing:-0.01em;color:var(--ink);margin-bottom:5px;transition:color .15s ease}
.pr-ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){
  .postrow{gap:14px;padding:16px 0}
  .pr-thumb{width:76px;height:57px}
  .pr-title{font-size:16.5px}
  /* One line of excerpt on a phone. Wrapped over six lines the summaries cost
     more scrolling than they saved, which is the problem being fixed here. */
  .pr-ex{font-size:13.5px;-webkit-line-clamp:1}
  /* Six chips wrapped to four rows and pushed the first post off the screen.
     They scroll sideways instead, bleeding to the edge so that reads as
     scrollable rather than clipped. */
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -22px;padding:2px 22px;gap:8px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;font-size:11px;padding:9px 13px}
}
.postcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:inherit}
.postcard:hover{border-color:var(--accent-2);color:inherit}
.postcard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
@media (max-width:860px){
  .wrap{padding:0 22px}
  .prose{font-size:16px}
}