/* Home hero (visual refresh V3, option B from https://claude.ai/artifact/JAc7QWAi2WvWzsBk5HcTw4).
   Replaces the Framer Profile component: the page module and the home HTML both render
   <div class="cs-hero"> in its two containers (Tablet, and Desktop/Large/Phone).
   The markup comes from scripts/apply-hero.py. Linked from every page's <head> because
   Framer navigates to home client-side. Behavior (bubble swap, smooth scroll, tap doodles)
   lives in site-fixes.js. */

/* The containers were fixed-size frames for the old animated scene. */
#main .framer-yevdml-container,
#main .framer-1f08ef-container {
  width: 100% !important;
  height: auto !important;
}
#work { scroll-margin-top: 72px; }

.cs-hero {
  --hero-ink: #10201f;
  --hero-mute: #4d605e;
  --hero-teal: #007f80;
  --hero-bubble: rgb(223, 234, 248);
  --hero-tan: #e3c7bf;
  --hero-ice: #aee7e5;
  width: 100%;
  display: flex;
  justify-content: center;
  color: var(--hero-ink);
  font-family: "Inter", "Inter Placeholder", sans-serif;
}
.cs-hero-in {
  width: 100%;
  max-width: 1360px;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 780px);
  justify-content: center;
  align-items: center;
  gap: 44px;
  padding: 104px 60px 56px;
}

/* ---------- Doodle and its speech bubbles ----------
   The art box is wider than the doodle: the doodle sits on the right and the bubbles
   use the space to its left and above its head. Positions follow the original Framer
   scene (measured from the last commit): Product Designer above the head with a long
   tail down to it, Creative Technologist further left at head height, tail into the
   side of the head. Both are anchored by their right edge so the tails stay on the head
   whatever the text length. Tops are % of the doodle's height. */
.cs-hero-art {
  all: unset;
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cs-hero-art:focus-visible { outline: 2px dashed var(--hero-teal); outline-offset: 6px; border-radius: 16px; }
.cs-hero-art img { display: block; width: 58%; height: auto; margin-left: auto; }

/* Rounded body in CSS (grows with its text) plus an SVG tail, drawn like the original
   PNG bubbles: 2px ink outline, straight tail with a curved inner edge, soft offset shadow. */
.cs-say {
  position: absolute;
  border: 2px solid #000;
  border-radius: 16px;
  padding: 10px 22px 11px;
  font-family: "National Park", "National Park Placeholder", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.22));
  transition: transform 120ms ease, opacity 120ms ease;
}
.cs-tail { position: absolute; top: 100%; overflow: visible; }
/* top: 100% is the inner edge of the bubble's bottom border (offsets are measured inside
   the border), so the tail's y=0–2 is the border itself: the fill covers it at the opening
   and the outline (drawn at y=1) joins it in one continuous line. */
.cs-tail-f { fill: var(--say-bg); }
.cs-tail-s { fill: none; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Product Designer leads: bigger and on top. Its tail points down toward the head. */
.cs-say-a { --say-bg: var(--hero-tan); background: var(--say-bg); font-size: 19px; right: 34.5%; top: 6%; transform-origin: calc(100% - 4.4em) 230%; }
/* The tail sits 5.8em in from the right edge, so a short line ("Ship it!") still needs a body
   that wide or the tail hangs off its left end. */
.cs-say-a { min-width: 7.2em; text-align: center; }
.cs-say-a .cs-tail { left: calc(100% - 5.8em); width: 1.9em; height: 3.05em; }
/* Creative Technologist sits lower and further left; its tail sweeps right, into the head. */
.cs-say-b { --say-bg: var(--hero-ice); --say-right: 59%; background: var(--say-bg); font-size: 16px; padding: 9px 18px 10px; right: var(--say-right); top: 35%; transform-origin: 100% 190%; }
/* Anchored by its right edge, a long line grew left past the art and got cut off. It now
   wraps once it reaches the space it has (--say-gutter: room left of the art box). */
.cs-say-b {
  --say-gutter: 64px;
  max-width: calc(100% - var(--say-right) + var(--say-gutter));
  width: max-content;
  white-space: normal;
  text-align: center;
}
.cs-say-b .cs-tail { left: calc(100% - 54px); width: 54px; height: 36px; }
.cs-hero-art.is-out .cs-say { transform: scale(0.6); opacity: 0; }

/* Everything holds its first frame until the doodle has loaded (site-fixes.js adds
   .is-ready, with a 1.5s fallback), so on a slow connection the bubbles never pop in next
   to an empty space. The headline text is visible the whole time either way. */
.cs-hero:not(.is-ready) .cs-pop,
.cs-hero:not(.is-ready) .cs-hero-bubble { animation-play-state: paused; }

/* Pops, exaggerated like the original springs: each bubble grows out of its tail with a
   tilt, overshoots, wobbles back and settles. Product Designer first, then Creative
   Technologist; everything is still by about 1.3s. */
.cs-pop { animation: cs-pop 700ms var(--d, 0ms) both; }
.cs-say-a { --d: 350ms; }
.cs-say-b { --d: 600ms; }
@keyframes cs-pop {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  45% { transform: scale(1.14) rotate(3deg); opacity: 1; animation-timing-function: ease-in-out; }
  68% { transform: scale(0.95) rotate(-1.5deg); animation-timing-function: ease-in-out; }
  86% { transform: scale(1.03) rotate(0.5deg); animation-timing-function: ease-in-out; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- Headline bubble ---------- */
.cs-hero-copy { display: grid; gap: 28px; justify-items: start; min-width: 0; }
.cs-hero-bubble {
  width: 100%;
  background: var(--hero-bubble);
  border: 2px solid #222;
  border-radius: 34px 34px 34px 0;
  box-shadow: 4px 4px 0 #00000040;
  padding: 30px 40px 34px;
  display: grid;
  gap: 12px;
  /* A squash-and-settle from the corner nearest the doodle. It only scales, never fades,
     so the headline is readable from the first frame. */
  transform-origin: 0% 100%;
  animation: cs-boing 650ms 60ms both;
}
@keyframes cs-boing {
  0% { transform: scale(0.94); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  40% { transform: scale(1.025); animation-timing-function: ease-in-out; }
  70% { transform: scale(0.995); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); }
}
.cs-hero-h {
  margin: 0;
  font-family: "National Park", "National Park Placeholder", sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.cs-hero-p {
  margin: 0;
  font-family: "National Park", "National Park Placeholder", sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.38;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

/* Hover doodles on two phrases: strokes draw in on hover. Phones get a one-time sequence. */
.cs-dw { position: relative; white-space: nowrap; }
.cs-dw svg { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: var(--hero-teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-dw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms cubic-bezier(.65, 0, .35, 1); }
.cs-dw path:nth-child(2) { transition-delay: 70ms; }
.cs-dw path:nth-child(3) { transition-delay: 140ms; }
.cs-dw:hover path, .cs-dw.is-on path { stroke-dashoffset: 0; }
/* Hidden until drawing starts, so the round line caps don't leave dots at rest. */
.cs-dw svg { opacity: 0; transition: opacity 0s 360ms; }
.cs-dw:hover svg, .cs-dw.is-on svg { opacity: 1; transition-delay: 0s; }
.cs-dw-joy .cs-dw-wave { left: 0; right: 0; bottom: -0.2em; width: 100%; height: 0.32em; }
.cs-dw-joy .cs-dw-burst { right: -1.05em; top: 0.12em; width: 0.8em; height: 0.8em; }
.cs-dw-code .cs-dw-loop { left: -0.4em; right: -0.4em; top: -0.18em; bottom: -0.22em; width: calc(100% + 0.8em); height: calc(100% + 0.4em); stroke-width: 2; }
/* No hover on touch screens. Instead, once after the bubbles land: the loop circles
   "writes the code" and wipes away, then "joyful" gets its underline and keeps it.
   It doesn't repeat (looping motion next to text you're reading is distracting).
   Tapping a phrase replays its doodle (site-fixes.js adds .is-tapped). */
@media (hover: none) {
  .cs-dw-code svg { animation: cs-flash 2000ms 900ms forwards; }
  .cs-dw-code path { animation: cs-wink 2000ms cubic-bezier(.65, 0, .35, 1) 900ms both; }
  .cs-dw-joy svg { animation: cs-show 1ms 1700ms forwards; }
  .cs-dw-joy path { animation: cs-draw 420ms cubic-bezier(.65, 0, .35, 1) 1700ms forwards; }
  .cs-dw-joy path:nth-child(2) { animation-delay: 1770ms; }
  .cs-dw-joy path:nth-child(3) { animation-delay: 1840ms; }
  .cs-dw.is-tapped svg, .cs-dw.is-tapped path { animation: none; }
}
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
@keyframes cs-show { to { opacity: 1; } }
@keyframes cs-flash { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cs-wink { 0% { stroke-dashoffset: 1; } 22%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }

/* ---------- Experience ---------- */
.cs-hero-cv { margin: 0; padding-left: 4px; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
.cs-hero-cv > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.cs-hero-cv dt {
  font-family: "Necto Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-mute);
}
.cs-hero-cv dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
/* One role never breaks across lines; the list wraps between roles instead. */
.cs-role { white-space: nowrap; color: var(--hero-mute); }
.cs-role::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-teal);
  margin-right: 9px;
  vertical-align: 0.15em;
}
.cs-role b { color: var(--hero-ink); font-weight: 600; }
/* Logos sized so their letters match the text's cap height, sitting on the baseline. */
.cs-role img { display: inline-block; width: auto; }
.cs-role img[alt="GoDaddy"] { height: 1.36em; vertical-align: -0.24em; margin-left: -0.08em; }
.cs-role img[alt="Lenovo"] { height: 0.84em; vertical-align: -0.04em; }

/* ---------- The one link ---------- */
.cs-hero-cta {
  margin-left: 4px;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 3px;
  color: var(--hero-teal);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
/* The hover underline is the nav's hand-drawn scribble (the same path as site-fixes.js label()),
   drawn in left to right, so this, "See all work" and the case studies' jump link match. */
.cs-hero-cta::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -5px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C20 2 40 9 60 5S90 3 98 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C20 2 40 9 60 5S90 3 98 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s ease;
}
.cs-hero-cta:hover::after, .cs-hero-cta:focus-visible::after { clip-path: inset(0 0 0 0); }
.cs-cta-a { display: inline-block; transition: transform 160ms ease; }
.cs-hero-cta:hover .cs-cta-a { transform: translateY(3px); }
.cs-hero-cta:focus-visible { outline: 2px solid var(--hero-teal); outline-offset: 4px; border-radius: 4px; }

/* ---------- "See all work" ----------
   Home's tilted sticker button is hidden (site-fixes.js) and replaced by this quiet link, in the
   same voice as "See the work". The scribble comes from label() and the .cs-link-t rules in nav.css. */
#main [data-cs-seeall-old] { display: none !important; }
.cs-seeall {
  align-self: center;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: rgb(0, 127, 128);
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.cs-seeall:is(:hover, :focus-visible) .cs-link-scribble { clip-path: inset(0 0 0 0); }
.cs-seeall-a { display: inline-block; transition: transform 160ms ease; }
.cs-seeall:hover .cs-seeall-a { transform: translateX(3px); }
.cs-seeall:focus-visible { outline: 2px solid rgb(0, 127, 128); outline-offset: 4px; border-radius: 4px; }

/* ---------- Smaller desktops (the Framer frame is 1200px wide here) ---------- */
@media (max-width: 1439.98px) {
  .cs-hero-in { grid-template-columns: minmax(0, 380px) minmax(0, 780px); padding-inline: 48px; }
  .cs-say-a { font-size: 18px; }
  .cs-say-b { font-size: 14.5px; --say-right: 56%; --say-gutter: 24px; top: 39%; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
  .cs-hero-in { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 36px; padding: 96px 40px 48px; }
  .cs-hero-h { font-size: 44px; }
  .cs-hero-p { font-size: 22px; }
  .cs-hero-bubble { padding: 26px 30px 28px; }
  .cs-say-a { font-size: 15px; padding: 8px 16px 9px; }
  .cs-say-b { font-size: 13px; padding: 7px 13px 8px; --say-right: 55%; top: 42%; }
  /* Labels above their roles, so the longest role still fits the narrower column. */
  .cs-hero-cv > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Phone: doodle on top, bubble below with its square corner pointing up ---------- */
@media (max-width: 809.98px) {
  .cs-hero-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 64px 20px 28px; }
  .cs-hero-art { width: 280px; max-width: calc(100% - 24px); justify-self: start; margin-left: 24px; }
  .cs-say-a { font-size: 15px; padding: 8px 16px 9px; top: 2%; }
  .cs-say-b { font-size: 13px; padding: 7px 13px 8px; --say-right: 55%; --say-gutter: 20px; top: 42%; }
  .cs-hero-copy { gap: 20px; width: 100%; }
  .cs-hero-bubble { border-radius: 0 28px 28px 28px; padding: 20px 22px 22px; gap: 8px; transform-origin: 0% 0%; }
  .cs-hero-h { font-size: 34px; }
  .cs-hero-p { font-size: 19px; line-height: 1.4; }
  .cs-hero-cv { font-size: 14px; padding-left: 2px; gap: 12px; }
  .cs-hero-cv > div { grid-template-columns: 1fr; gap: 4px; }
  .cs-hero-cv dd { flex-direction: column; gap: 3px; }
  .cs-hero-cta { margin-left: 2px; }
}
@media (max-width: 359.98px) {
  .cs-hero-h { font-size: 30px; }
  .cs-hero-p { font-size: 17px; }
  .cs-dw { white-space: normal; }
  .cs-role { white-space: normal; }
  .cs-say-a { font-size: 14px; }
  .cs-say-b { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-pop, .cs-hero-bubble, .cs-dw svg, .cs-dw path { animation: none !important; }
  .cs-say, .cs-dw path, .cs-dw svg, .cs-hero-cta::after, .cs-cta-a, .cs-seeall-a { transition: none !important; }
  @media (hover: none) { .cs-dw-joy path { stroke-dashoffset: 0; } .cs-dw-joy svg { opacity: 1; } }
}