/* Lynkup hero doodle: the homepage hero illustration (includes/hero-doodle.php, js/hero-doodle.js).
   Everything is scoped to .hd / hd- names. The stage is two inline SVGs (670 x 500 units: the laptop,
   then the doodle) on a transparent background inside a fixed aspect-ratio box, so it scales with
   the column and never shifts the layout. The speech bubbles are HTML over the art, sized from the
   box width with a readable minimum, so they stay legible on phones. */
.hd{position:relative;width:100%;max-width:660px;margin:0 auto;container-type:inline-size;color:#1a1a2e;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.hd-stage{position:relative;aspect-ratio:670/500}
.hd-svg{position:absolute;left:0;top:0;display:block;width:100%;height:100%;overflow:visible}

/* screen UI type: system UI faces only (no font downloads), DM fonts for the cafe's own site */
.hd-r{font-family:Roboto,Arial,sans-serif}
.hd-dm{font-family:'DM Sans',Arial,sans-serif}
.hd-se{font-family:'DM Serif Display',Georgia,serif}
.hd-w5{font-weight:500}
.hd-w7{font-weight:700}
.hd-fx path{fill:none;stroke:#1a1a2e;stroke-width:4.5;stroke-linecap:round}

/* the doodle: the same rig and line styles as the guide further down the page */
.hd-guy path,.hd-guy circle,.hd-guy ellipse{fill:none;stroke:#1a1a2e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hd-guy .hd-co{stroke-width:15}
.hd-guy .hd-ci{stroke:#F0EAE2;stroke-width:12}
.hd-guy .hd-ao{stroke-width:12}
.hd-guy .hd-ai{stroke:#F0EAE2;stroke-width:9}
.hd-guy .hd-to{stroke-width:6.6}
.hd-guy .hd-ti{stroke:#F0EAE2;stroke-width:3.6}
.hd-guy .hd-no{stroke-width:11}
.hd-guy .hd-ni{stroke:#F0EAE2;stroke-width:8}
.hd-guy .hd-pf{fill:#F0EAE2}
.hd-guy .hd-dt{stroke-width:1.55}
.hd-guy .hd-bt{fill:#F5CB6E;stroke-width:1.55}
.hd-guy .hd-ey,.hd-guy .hd-jo{fill:#1a1a2e;stroke:none}
.hd-guy .hd-ji{fill:#F0EAE2;stroke:none}
.hd-guy .hd-bl{stroke:#E8785E;stroke-width:1.8}
.hd-guy .hd-gl{fill:#F5CB6E;stroke-width:.9}
.hd-guy .hd-mo{fill:#F0EAE2;stroke-width:1.55}
.hd-guy .hd-er{fill:#FDFCF7;stroke-width:1.2}
.hd-guy .hd-sh{fill:url(#hd-gs);stroke:none}
.hd-guy .hd-sp{fill:#FDFCF7}
.hd-guy .hd-spb{fill:#F5CB6E;stroke-width:1.33}
.hd-guy .hd-tl{stroke-width:1.5}

/* what he says: a speech bubble anchored above his cap, growing up and to the right. Its tail is drawn
   in the art's own units (a third SVG over the bubbles), so it always reaches his head at any size */
.hd-says{position:absolute;left:14.925%;bottom:72.8%;width:0;height:0}
.hd-bub{position:absolute;left:0;bottom:0;margin:0;width:max-content;max-width:min(84cqw,330px);box-sizing:border-box;
  padding:.42em .8em .48em;border:2px solid #1a1a2e;border-radius:16px 18px 15px 17px;background:#FDFCF7;
  font:600 clamp(16px,3.6cqw,21px)/1.25 'DM Sans',system-ui,sans-serif;letter-spacing:normal;color:#1a1a2e;text-align:left;text-wrap:balance;
  transform-origin:0 100%;visibility:hidden;opacity:0;pointer-events:none}
.hd-tln{fill:none;stroke:#1a1a2e;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* story-style progress under the art: one segment per scene (current fills, done stay full, upcoming empty).
   Equal columns that only grow to fit a label, so the three labels always stay on one row */
.hd-prog{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));column-gap:clamp(5px,1.8cqw,12px);width:70%;margin:8px auto 0;
  font:600 clamp(12px,2.8cqw,14.5px)/1.3 'DM Sans',system-ui,sans-serif;color:#1a1a2e;letter-spacing:normal}
.hd-seg{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.hd-trk{position:relative;display:block;width:100%;height:4px;border-radius:2px;overflow:hidden;background:rgba(26,26,46,.16)}
.hd-bar{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:2px;background:#1a1a2e;transform-origin:0 50%;transform:scaleX(0)}
.hd-lab{white-space:nowrap}
/* scrolled away: while he walks off (and back), the laptop is drawn over him */
.hd.hd-behind .hd-lsvg{z-index:1}
/* the illustration is aria-hidden: this is its text alternative */
.hd-sr{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}

/* the hero stacks into one column at 960px: keep the illustration a sensible size */
@media (max-width:960px){.hd{max-width:540px}}
/* phones: 70% is too narrow for the three labels on one row, so use the full width */
@media (max-width:600px){.hd{max-width:440px}.hd-prog{width:auto;margin:8px 1.5% 0}.hd-trk{height:3px}.hd-seg{gap:5px}}
/* reduced motion shows the build still: its segment full, the others empty */
@media (prefers-reduced-motion:reduce){.hd-bar[data-hd="p0"]{transform:none!important}}
/* on phones the longest line (two or three lines) rises above the art: give the bubble a band of room */
@media (max-width:440px){.hd{padding-top:14px}}
@media (max-width:380px){.hd{padding-top:26px}}