/* Hunter Boorn — shared stylesheet.
   Page layout lives in inline styles (generated from the design source).
   This file carries only what inline styles cannot do: fonts, resets,
   link/focus states, responsive overrides and print rules. */

@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/open-sans-400.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/open-sans-600.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/open-sans-700.woff2') format('woff2')}

:root{
  --red-earth:#381220;
  --kakadu:#BA4552;
  --clay:#E58A7D;
  --paper:#FAF8F5;
  --wattle:#E3FEDF;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--red-earth);font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-wrap:pretty}
img,video{max-width:100%}
a{color:var(--red-earth);text-decoration:none}
a:hover{color:var(--kakadu)}
:focus-visible{outline:2px solid var(--kakadu);outline-offset:3px}
::selection{background:var(--wattle);color:var(--red-earth)}
input,textarea,button{font:inherit}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--kakadu)!important}
h1,h2,h3{text-wrap:balance}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red-earth);color:var(--wattle);padding:12px 18px;font-size:14px;font-weight:700}
.skip:focus{left:8px;top:8px;color:var(--wattle)}

/* Header nav — scrollable on narrow viewports rather than wrapping */
@media (max-width:1080px){
  /* The logo keeps its intrinsic width and the nav takes whatever is left,
     scrolling inside itself. A fixed max-width on the nav used to squeeze the
     logo link while the SVG kept its natural size, so the two collided. */
  header{gap:20px}
  header > a{flex:none}
  header nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:0 1 auto;min-width:0;max-width:none}
  header nav::-webkit-scrollbar{display:none}
  header nav a{white-space:nowrap}
}
/* Contact form outcome notes, revealed by the #sent / #not-sent fragment the
   form endpoint redirects to when the form was posted without scripting. */
[data-form-note]{display:none}
[data-form-note]:target{display:block}

/* Compact menu.
   Below 800px the seven links no longer fit beside the logo, so they fold
   behind a button. The button is in each page's markup and this rule hides the
   links from first paint; a <noscript> style after the stylesheet link restores
   the scrolling row above when scripting is off. site.js toggles data-menu. */
.menu-btn{display:none}
@media (max-width:800px){
  .menu-btn{display:block;flex:none;position:relative;width:40px;height:40px;margin-right:-10px;padding:0;background:transparent;border:0;cursor:pointer}
  .menu-btn span{position:absolute;top:19px;left:11px;width:18px;height:1.5px;background:var(--red-earth);transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .menu-btn span:first-child{transform:translateY(-3.5px)}
  .menu-btn span:last-child{transform:translateY(3.5px)}
  header[data-menu="open"] .menu-btn span:first-child{transform:rotate(45deg)}
  header[data-menu="open"] .menu-btn span:last-child{transform:rotate(-45deg)}
  header nav{display:none!important}
  header[data-menu="open"] nav{display:flex!important;flex-direction:column;align-items:stretch!important;gap:0!important;position:absolute;top:100%;left:0;right:0;overflow:visible;padding:4px clamp(20px,4vw,64px) 24px;background:var(--paper);border-bottom:1px solid rgba(56,18,32,0.14)}
  header[data-menu="open"] nav a{font-size:17px!important;padding:13px 0!important;border-bottom:1px solid rgba(56,18,32,0.1)}
  /* The last link is the Start a conversation call to action: keep its own
     underline and set it apart from the list. */
  header[data-menu="open"] nav a:last-child{align-self:flex-start;margin-top:18px;padding:0 0 4px!important}
}
@media (max-width:640px){
  header{height:64px!important;gap:16px}
  header > a img{height:16px!important}
  header nav{gap:16px!important}
  header nav a{font-size:12.5px!important}
}

/* Responsive layout overrides.
   Inline styles win on specificity, so these need !important. */
@media (max-width:1000px){
  [data-l~="rail"]{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  [data-l~="featured"],[data-l~="story"],[data-l~="cap-body"]{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  [data-l~="bio"]{grid-template-columns:minmax(0,220px) minmax(0,1fr)!important;gap:28px!important}
  /* Three children (number, title, +/- sign): keep the number inline rather
     than dropping a column and wrapping the sign onto its own row. */
  [data-l~="cap-head"]{grid-template-columns:auto minmax(0,1fr) 40px!important;gap:20px!important}
  /* Case studies carry a three-line status block where capabilities have a
     number, so give it its own row above the title and sign. */
  [data-l~="case-head"]{grid-template-columns:minmax(0,1fr) 24px!important;gap:12px 20px!important}
  [data-l~="case-head"] > :first-child{grid-column:1 / -1}
  [data-l~="cols-6"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:26px!important}
  [data-l~="cols-4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:30px!important}
  [data-l~="eco"]{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  [data-l~="eco"] > *{justify-self:start!important;text-align:left!important}
  [data-l~="rail"] > [data-spacer]{display:none!important}
}
@media (max-width:760px){
  [data-l~="cols-3"],[data-l~="cols-2"],[data-l~="foot"],[data-l~="bio"]{grid-template-columns:minmax(0,1fr)!important;row-gap:24px!important}
  [data-l~="cols-6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-l~="cap-row"]{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
  [data-l~="bio"] img{max-width:320px}
  footer [style*="text-align:right"]{text-align:left!important}
  footer [style*="justify-content:space-between"]{flex-direction:column!important;gap:24px!important}
}

/* Ultra-wide displays.
   The rail layout is drawn for roughly 1400-1900px. Past that the content
   column keeps stretching: body copy ran past 300 characters a line and a
   project's status drifted most of a screen away from its title. Grow the
   gutters instead, so the measure stays put and backgrounds, borders and the
   full-bleed band still span the viewport. Every top-level block shares the
   same clamp(20px,4vw,64px) gutter, and max() keeps it identical below about
   1848px, where the calculated gutter is still the smaller of the two. */
header,
footer,
main > section,
main > nav,
main > div:not([data-bleed]){
  padding-left:max(clamp(20px,4vw,64px),calc((100% - 1720px) / 2))!important;
  padding-right:max(clamp(20px,4vw,64px),calc((100% - 1720px) / 2))!important;
}

/* Past the crossover the gutters grow but a few paragraphs still have no
   measure of their own, so they filled the whole 1720px column. A ch cap
   holds them to a readable line. Anything carrying its own inline max-width
   keeps it, since an inline value beats this rule; and because ch scales with
   font-size, display-sized text is never affected. */
@media (min-width:1849px){
  main p{max-width:min(100%,72ch)}
}

/* Ecosystem graph — the home hero.
   Height is reserved here so the section causes no layout shift. Taller than
   the image band it replaced: the graph was using 92% of the old box, so the
   room had to come from the stage rather than from internal slack, and a
   taller box also cuts the horizontal stretch the engine applies (1.78x to
   1.45x at 1440). Below 640px the graph is width-constrained, so extra height
   there is only slack — 480px is about what it can fill. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.eco-graph__stage{position:relative;height:clamp(400px,56vw,760px)}
#eco-graph{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
#eco-graph.is-hit{cursor:grab}
#eco-graph.is-dragging{cursor:grabbing}

.eco-graph__legend{position:absolute;top:8px;right:0;display:flex;flex-wrap:wrap;gap:16px;font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(56,18,32,0.68);pointer-events:none}
.eco-graph__legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.eco-graph__legend .k-company{background:var(--red-earth)}
.eco-graph__legend .k-stage{width:10px;height:10px;border:2px solid var(--kakadu);background:var(--paper)}
.eco-graph__legend .k-service{background:rgba(186,69,82,0.62)}
.eco-graph__legend .k-trade{width:7px;height:7px;background:rgba(56,18,32,0.34)}

/* No canvas, either because the engine threw or because scripting is off:
   drop the furniture and show the outline as ordinary content instead. */
.eco-graph[data-failed] .eco-graph__stage,
.eco-graph--plain .eco-graph__stage{display:none}
.eco-graph[data-failed] .visually-hidden,
.eco-graph--plain .visually-hidden{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
.eco-graph--plain .visually-hidden p{font-size:15px;line-height:1.7;color:rgba(56,18,32,0.72);margin:0 0 18px;max-width:740px}
.eco-graph--plain .visually-hidden ul{font-size:14px;line-height:1.7;color:rgba(56,18,32,0.7);margin:0;padding-left:20px}

@media (max-width:640px){
  .eco-graph__stage{height:480px}
  .eco-graph__legend{gap:9px;font-size:9.5px}
  .eco-graph__legend i{margin-right:5px}
}

/* Motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* Print */
@media print{
  header,footer nav,[data-hero-src] video{display:none}
  body{background:#fff}
  [data-l]{grid-template-columns:minmax(0,1fr)!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666}
}