/* ============================================================
   Julie Manzi — Portfolio Design System
   Warm & natural palette · subtle bird motif
   ============================================================ */

:root {
  /* Palette */
  --cream: #FAF6F0;
  --ink: #2B2724;
  --ink-soft: #5C544D;
  --terracotta: #C4674A;        /* accent: graphics, large text, borders */
  --terracotta-deep: #9C4A2E;   /* links & small text — AA on cream */
  --sage: #8A9B7E;
  --sage-deep: #5F7053;
  --ochre: #D9A441;
  --sand: #EDE4D6;
  --white: #FFFFFF;

  /* Type */
  --font-serif: "Lora", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
  --space-xl: 7rem;
  --radius: 14px;
  --maxw: 1160px;
  --maxw-prose: 46rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 550; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: var(--space-s); }
h3 { font-size: 1.35rem; margin-bottom: var(--space-xs); }
p + p { margin-top: 1em; }

a { color: var(--terracotta-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--terracotta-deep); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  display: block;
  margin-bottom: var(--space-s);
}

.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: var(--maxw-prose); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
section { padding: var(--space-xl) 0; }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand);
}
.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
.brand:hover { text-decoration: none; }
.brand .mark { color: var(--terracotta); }
.nav-links { display: flex; gap: clamp(1rem, 3vw, 2.25rem); list-style: none; }
.nav-links a {
  color: var(--ink); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.nav-links a[aria-current="page"] { color: var(--terracotta-deep); border-bottom: 2px solid var(--terracotta); padding-bottom: 2px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; position: relative; overflow: hidden; min-height: calc(100svh - 92px); display: flex; flex-direction: column; align-items: stretch; }
.hero > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.hero-foot { margin-top: auto; padding-bottom: 0.5rem; }
.hero-foot .flight-wrap { padding-top: 6px; }
.hero-foot .scroll-hint { position: static; margin: 6px auto 0; transform: none; animation-name: scroll-bob-y; color: var(--terracotta); }
.hero-foot .scroll-hint:hover { color: var(--terracotta-deep); }
@keyframes scroll-bob-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.scroll-hint {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ink-soft); animation: scroll-bob 2s ease-in-out infinite;
  transition: color 0.2s ease, opacity 0.4s ease;
}
.scroll-hint:hover { color: var(--terracotta-deep); }
.scroll-hint svg { width: 26px; height: 26px; }
.scroll-hint.gone { opacity: 0; pointer-events: none; }
@keyframes scroll-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }
.hero h1 { max-width: 30ch; }
.hero .lede { margin-top: var(--space-s); }
.hero-cta { margin-top: var(--space-s); display: flex; gap: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  border: 1.5px solid var(--ink);
  color: var(--ink); background: transparent;
  cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.btn-primary:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }

/* ---------- Flight-path divider (bird motif touchpoint #3) ---------- */
.flight-divider { display: block; width: 100%; height: 70px; overflow: visible; }
.flight-divider path {
  fill: none; stroke: var(--terracotta); stroke-width: 1.5;
  stroke-dasharray: 6 8; stroke-linecap: round; opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .flight-divider.animate path {
    stroke-dashoffset: 400;
    animation: flight 2.2s ease-out forwards;
  }
  @keyframes flight { to { stroke-dashoffset: 0; } }
}

/* ---------- Featured case-study carousel ---------- */
.featured { padding-top: 0; padding-bottom: calc(var(--space-xl) * 2 / 3); }
#values { padding-top: calc(var(--space-xl) * 2 / 3); } /* gap to carousel trimmed by 1/3 */
.carousel-viewport { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--sand); }
.carousel-track { display: flex; transition: transform 0.55s ease; }
.carousel-slide { flex: 0 0 100%; min-width: 0; position: relative; display: block; }
.carousel-slide:hover { text-decoration: none; }
.carousel-slide img { width: 100%; aspect-ratio: 16 / 7; object-fit: contain; background: #fff; display: block; }
@media (max-width: 700px) { .carousel-slide img { aspect-ratio: 4 / 3; } }
.slide-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 3.5rem clamp(1.25rem, 3vw, 2rem) 1.4rem;
  background: linear-gradient(transparent, rgba(43, 39, 36, 0.82));
}
.slide-meta .co { color: var(--ochre); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.slide-meta h3 { color: #fff; margin: 0.25rem 0 0; }
.slide-cta { color: #fff; font-size: 0.9rem; font-weight: 600; white-space: nowrap; opacity: 0.9; }
.carousel-slide:hover .slide-cta { text-decoration: underline; text-underline-offset: 3px; }
.carousel-nav { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; }
.carousel-nav button.car-prev, .carousel-nav button.car-next {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink);
}
.carousel-nav button.car-prev:hover, .carousel-nav button.car-next:hover { background: var(--ink); color: var(--cream); }
.carousel-dots { display: flex; gap: 0.55rem; }
.carousel-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0;
  background: var(--sand); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dots button:hover { background: var(--sage); }
.carousel-dots button.active { background: var(--terracotta); transform: scale(1.25); }

/* ---------- Featured marquee ---------- */
.marquee-section { padding: var(--space-m) 0; border-block: 1px solid var(--sand); overflow: hidden; }
.marquee { display: flex; gap: 3.5rem; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee { animation: scroll 34s linear infinite; }
  .marquee:hover { animation-play-state: paused; }
  @keyframes scroll { to { transform: translateX(-50%); } }
}
.marquee a {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--ink); white-space: nowrap; display: flex; align-items: baseline; gap: 0.8rem;
}
.marquee a:hover { color: var(--terracotta-deep); text-decoration: none; }
.marquee .co { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--sage-deep); text-transform: uppercase; }

/* ---------- Values (design partner) ---------- */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-m); margin-top: var(--space-l); }
.value-card { background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius); padding: var(--space-m); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.value-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(43, 39, 36, 0.08); }
.value-card .icon { width: 68px; height: 68px; color: var(--terracotta); margin-bottom: var(--space-s); }
.value-card p { color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Project grid ---------- */
.filter-bar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: var(--space-m) 0; }
.filter-btn {
  padding: 0.45rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: transparent; border: 1.5px solid var(--sand); color: var(--ink-soft);
  cursor: pointer; font-family: var(--font-sans); transition: all 0.15s ease;
}
.filter-btn:hover { border-color: var(--sage); color: var(--ink); }
.filter-btn.active { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--space-m); }
.project-card {
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(43, 39, 36, 0.1); text-decoration: none; }
.project-card .thumb { aspect-ratio: 16 / 10; background: var(--sand); overflow: hidden; }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card .meta { padding: 1.25rem 1.4rem 1.5rem; }
.project-card .co { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--sage-deep); text-transform: uppercase; }
.project-card h3 { color: var(--ink); margin-top: 0.35rem; }
.project-card .tags { margin-top: 0.6rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); background: var(--sand); border-radius: 999px; padding: 0.2rem 0.7rem; }
.project-card.is-hidden { display: none; }
.badge-soon { font-size: 0.72rem; font-weight: 700; color: var(--ochre); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--sand); border-radius: calc(var(--radius) * 1.6); padding: var(--space-l) clamp(1.5rem, 5vw, 4rem); }
.quote-track { position: relative; min-height: 260px; }
.quote { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.quote.active { opacity: 1; position: relative; pointer-events: auto; }
.quote blockquote { font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5; max-width: 52rem; }
.quote figcaption { margin-top: var(--space-m); display: flex; align-items: center; gap: 1rem; }
.quote .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; color: var(--terracotta); font-weight: 700; }
.quote .who strong { display: block; font-size: 0.95rem; }
.quote .who span { font-size: 0.85rem; color: var(--ink-soft); }
.quote-nav { margin-top: var(--space-m); display: flex; gap: 0.6rem; }
.quote-nav button {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink);
}
.quote-nav button:hover { background: var(--ink); color: var(--cream); }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact h2 { max-width: 24ch; margin-inline: auto; }
.contact .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--sand); padding: var(--space-m) 0 var(--space-l); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
footer p { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Case study pages ---------- */
.case-hero { padding: var(--space-l) 0 var(--space-m); }
.case-hero .eyebrow { margin-bottom: 0.75rem; }
.case-hero .facts { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: var(--space-m); font-size: 0.92rem; }
.case-hero .facts div span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.2rem; }
.case-hero-img { border-radius: var(--radius); overflow: hidden; margin-top: var(--space-m); border: 1px solid var(--sand); }
.case-hero-img img { width: 100%; display: block; }

.case-section { padding: var(--space-l) 0; border-top: 1px solid var(--sand); }
.case-section .wrap { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: var(--space-m) var(--space-l); }
.case-section .label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta-deep); padding-top: 0.4rem; }
.case-section .content { max-width: var(--maxw-prose); }
.case-section .content.wide { max-width: none; }
@media (max-width: 760px) { .case-section .wrap { grid-template-columns: 1fr; } }

.kpi-list { list-style: none; display: grid; gap: 0.7rem; margin-top: var(--space-s); }
.kpi-list li { background: var(--white); border: 1px solid var(--sand); border-left: 3px solid var(--ochre); border-radius: 8px; padding: 0.8rem 1.1rem; font-size: 0.95rem; }

.img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-s); margin-top: var(--space-s); }
.img-grid figure, .content > figure { margin-top: var(--space-s); }
.img-grid img, .content figure img, .content > img,
.img-grid video, .content figure video, .content > video { width: 100%; border-radius: 10px; border: 1px solid var(--sand); display: block; }
figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; font-style: italic; }

/* Case-study extras (Product Ranking on PDP) */
.content blockquote { margin: var(--space-s) 0 0; background: var(--white); border: 1px solid var(--sand); border-left: 3px solid var(--terracotta); border-radius: 8px; padding: 1.2rem 1.5rem; }
.content blockquote p { font-style: italic; }
.content blockquote cite { display: block; margin-top: 0.6rem; font-size: 0.85rem; font-style: normal; color: var(--ink-soft); }
.caption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; font-style: italic; }
.img-grid.phones { grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); }
.anatomy-grid { display: grid; grid-template-columns: 375px 1fr; gap: 56px; margin-top: var(--space-m); align-items: start; }
.anatomy-phone { margin: 0; }
.anatomy-notes { list-style: none; counter-reset: anote; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; }
.anatomy-notes li { counter-increment: anote; position: relative; padding-left: 44px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.45; }
.anatomy-notes li::before { content: counter(anote); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 1px solid var(--sand); display: grid; place-items: center; font-family: var(--font-sans, Inter, sans-serif); font-weight: 600; font-size: 14px; color: var(--ink); }
.anatomy-notes li strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 0.25rem; }
.anatomy-notes li.highlight::before { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.handoff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-s); margin-top: var(--space-s); align-items: start; }
.component-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.component-stack figure { margin: 0; }
@media (max-width: 900px) { .anatomy-grid { grid-template-columns: 1fr; } .anatomy-phone { max-width: 375px; } }

.pull-quote { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.4; color: var(--terracotta-deep); border-left: 3px solid var(--terracotta); padding-left: 1.5rem; margin: var(--space-s) 0; }

.case-nav { display: flex; justify-content: space-between; gap: 1rem; padding: var(--space-l) 0; border-top: 1px solid var(--sand); }
.case-nav a { display: flex; flex-direction: column; gap: 0.2rem; color: var(--ink); max-width: 45%; }
.case-nav a span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-deep); }
.case-nav a strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 550; }
.case-nav a:hover strong { color: var(--terracotta-deep); }
.case-nav .next { text-align: right; margin-left: auto; }

.placeholder-note {
  background: color-mix(in srgb, var(--ochre) 14%, var(--white));
  border: 1px dashed var(--ochre); border-radius: 10px;
  padding: 0.9rem 1.2rem; font-size: 0.9rem; color: var(--ink-soft); margin: var(--space-s) 0;
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-l); align-items: start; }
.about-grid img { width: 100%; border-radius: var(--radius); border: 1px solid var(--sand); }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Resume ---------- */
.resume-block { border-top: 1px solid var(--sand); padding: var(--space-m) 0; display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: var(--space-s) var(--space-l); }
.resume-block h3 { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta-deep); }
.resume-item { margin-bottom: var(--space-m); }
.resume-item h4 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 550; }
.resume-item .when { font-size: 0.85rem; color: var(--sage-deep); font-weight: 600; }
.resume-item p { color: var(--ink-soft); font-size: 0.97rem; margin-top: 0.3rem; }
@media (max-width: 700px) { .resume-block { grid-template-columns: 1fr; } }
@media print {
  .site-nav, footer, .no-print { display: none; }
  body { background: #fff; font-size: 11pt; }
  section { padding: 1rem 0; }
}

/* ---------- Dark mode ----------
   Toggled by html.dark (set pre-paint by the inline head script, persisted
   in localStorage as jm-theme). Every component reads tokens, so the theme
   is a token swap: warm dark browns, cream text, lifted accents for AA. */
html.dark {
  color-scheme: dark;
  --cream: #211D1A;            /* page background */
  --ink: #EDE6DC;              /* text, light surfaces */
  --ink-soft: #B5AA9D;
  --terracotta: #D97E5F;       /* accent: graphics, large text, borders */
  --terracotta-deep: #E5987C;  /* links & small text — AA on dark */
  --sage: #8A9B7E;
  --sage-deep: #A9BA9B;        /* labels, small text — AA on dark */
  --ochre: #E0B25A;
  --sand: #3A332C;             /* cards, dividers, tags */
  --white: #2B2621;            /* card surfaces */
}
html.dark .value-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
html.dark .project-card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
html.dark .btn-primary { color: #211D1A; }
html.dark .filter-btn.active { color: #211D1A; }
html.dark .quote .avatar { background: var(--sand); }
html.dark img, html.dark video { filter: brightness(0.82); transition: filter 0.2s ease; }
html.dark img:hover, html.dark video:hover { filter: brightness(1); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--sand); background: transparent; color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { border-color: var(--terracotta); color: var(--terracotta-deep); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .tt-sun { display: none; }
html.dark .theme-toggle .tt-moon { display: none; }
html.dark .theme-toggle .tt-sun { display: block; }

/* ---------- Values (design partner): post-its on elevated grid paper ---------- */
#values .wrap { position: relative; }
body.flock-quiet .flight-wrap { display: none; }
.grid-paper {
  position: relative; margin-top: var(--space-m);
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--radius);
  background-color: #FDFCF7;
  background-image:
    linear-gradient(rgba(96, 130, 182, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 130, 182, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: 0 2px 6px rgba(43, 39, 36, 0.08), 0 20px 44px rgba(43, 39, 36, 0.16);
}
html.dark .grid-paper {
  background-color: #2E2B28;
  background-image:
    linear-gradient(rgba(140, 165, 205, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 165, 205, 0.12) 1px, transparent 1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 44px rgba(0, 0, 0, 0.5);
}
.postit-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.6rem 2rem; }
.postit {
  --rot: 0deg;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 216px; min-height: 216px; flex: none;
  padding: 1.1rem 1.15rem; color: #2B2724;
  background: var(--postit-1, #E5FFAD);
  box-shadow: 0 6px 14px rgba(43, 39, 36, 0.2);
  transform: rotate(var(--rot));
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transition: scale 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
.postit:hover { scale: 1.07; box-shadow: 0 12px 26px rgba(43, 39, 36, 0.26); }
.postit.dragging:hover { scale: 1; }
.postit h3 { font-family: "Comic Neue", cursive; font-size: 1.25rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.4rem; }
.postit p { font-family: "Comic Neue", cursive; font-size: 0.92rem; font-weight: 400; line-height: 1.3; color: rgba(43, 39, 36, 0.82); }
.postit.p1 { --rot: -2.5deg; margin-top: 0.8rem; }
.postit.p2 { --rot: 2deg; margin-right: 1.4rem; }
.postit.p3 { --rot: -1.5deg; margin-top: 1.6rem; }
.postit.p4 { --rot: 2.5deg; margin-top: 0.4rem; }
.postit.p2 { background: var(--postit-2, #FFADB1); }
.postit.p3 { background: var(--postit-3, #B3F6FF); }
.postit.p4 { background: var(--postit-4, #FFC894); }
.postit.dragging { cursor: grabbing; z-index: 40; box-shadow: 0 14px 30px rgba(43, 39, 36, 0.3); }
.skills-title { font-family: "Shantell Sans", cursive; font-size: 2.1rem; font-weight: 700; color: var(--ink); margin: 2.4rem 0 1.1rem; }
.skill-boxes { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; }
.skill-box {
  font-family: "Shantell Sans", cursive; font-weight: 600; font-size: 1.02rem; letter-spacing: 0.05em;
  color: var(--ink); border: 2.5px solid var(--ink); border-radius: 24px;
  padding: 0.55rem 1.35rem; background: transparent;
}

/* Stamper: hover the paper for a bird preview; click to place a stamp */
.grid-paper.stamping { cursor: crosshair; }
.grid-paper.stamping .postit, .grid-paper.stamping .stamp { cursor: crosshair; }
.grid-paper .postit { position: relative; z-index: 2; }
.stamp-ghost, .stamp { position: absolute; width: 53px; height: 46px; margin: -23px 0 0 -26px; }
.stamp-ghost { z-index: 60; }
.stamp { z-index: 3; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stamp-ghost { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.stamp-ghost.on { opacity: 0.45; }
.stamp { cursor: grab; animation: stamp-in 0.18s ease; }
.stamp-name {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-family: "Comic Neue", cursive; font-size: 0.68rem; font-weight: 700;
  color: #A9A49C; white-space: nowrap; pointer-events: none; line-height: 1;
  padding-top: 2px;
}
.stamp-widget {
  position: absolute; bottom: 0.9rem; right: 0.9rem; z-index: 5;
  display: flex; align-items: center; gap: 0.45rem;
  font-family: "Comic Neue", cursive; font-weight: 700; font-size: 0.85rem; color: var(--ink);
  background: var(--white, #fff); border: 2px solid var(--ink); border-radius: 12px;
  padding: 0.4rem 0.75rem; cursor: pointer;
  box-shadow: 0 3px 0 rgba(43, 39, 36, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stamp-widget:hover { transform: translateY(-1px); }
.stamp-widget.active { background: #FFE24D; transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 39, 36, 0.25); }
.stamp-widget:disabled { opacity: 0.45; cursor: default; transform: none; }
.stamp-widget-icon { width: 26px; height: 26px; display: block; }
.stamp-widget-icon svg { width: 100%; height: 100%; display: block; }
html.dark .stamp-widget { background: #3A3733; color: var(--paper, #EDE9E2); border-color: #6B665F; }
.stamp.dragging { cursor: grabbing; z-index: 40; }
.stamp svg, .stamp-ghost svg { width: 100%; height: 100%; display: block; }
@keyframes stamp-in { from { transform: scale(1.35); opacity: 0.4; } }

/* Sticker hover animations: one signature move per bird
   junco=waddle (body rocks, legs alternate) · wren=tail wag (tail only) · robin=wing flap (wing only)
   downy=double hop · titmouse=peck (tips forward toward the bill) */
.stamp svg { transform-box: fill-box; transform-origin: 50% 80%; }
.stamp .s-tail { transform-box: fill-box; transform-origin: 5% 50%; }
.stamp .s-wing { transform-box: fill-box; transform-origin: 20% 15%; }
.stamp .s-leg-a, .stamp .s-leg-b { transform-box: fill-box; transform-origin: 50% 0%; }
.stamp[data-anim="waddle"] svg { animation: stk-waddle-rock 0.9s ease-in-out; }
.stamp[data-anim="waddle"] .s-leg-a { animation: stk-waddle-step 0.45s ease-in-out 2; }
.stamp[data-anim="waddle"] .s-leg-b { animation: stk-waddle-step 0.45s ease-in-out 2; animation-delay: -0.225s; }
.stamp[data-anim="tailwag"] .s-tail { animation: stk-tailwag 0.55s ease-in-out; }
.stamp[data-anim="flap"] .s-wing { animation: stk-flap 0.55s ease-in-out; }
.stamp[data-anim="doublehop"] svg { animation: stk-doublehop 0.85s ease-out; }
.stamp[data-anim="peck"] svg { animation: stk-peck 0.7s ease-in-out; }
@keyframes stk-waddle-rock { 0%, 100% { transform: rotate(0deg); } 15%, 65% { transform: rotate(-5deg); } 40%, 90% { transform: rotate(5deg); } }
@keyframes stk-waddle-step { 0%, 100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-1.5px); } }
@keyframes stk-tailwag { 0%, 100% { transform: rotate(0deg); } 20%, 60% { transform: rotate(-22deg); } 40%, 80% { transform: rotate(10deg); } }
@keyframes stk-flap { 0%, 100% { transform: rotate(0deg); } 25%, 65% { transform: rotate(-38deg) translateY(-2px); } 45%, 85% { transform: rotate(8deg); } }
@keyframes stk-doublehop { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-8px); } 40% { transform: translateY(0); } 60% { transform: translateY(-5px); } 80% { transform: translateY(0.5px); } }
@keyframes stk-peck { 0%, 100% { transform: rotate(0deg); } 25%, 60% { transform: rotate(-24deg) translateY(3px); } 42%, 78% { transform: rotate(-4deg); } }
.flight-wrap .walker { pointer-events: auto; cursor: help; }

/* ---------- Style guide ---------- */
.swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-s); }
.swatch { border-radius: 10px; border: 1px solid var(--sand); overflow: hidden; background: var(--white); }
.swatch .chip { height: 84px; }
.swatch .info { padding: 0.7rem 0.9rem; font-size: 0.8rem; }
.swatch .info code { color: var(--ink-soft); }
.icon-row { display: flex; gap: var(--space-m); flex-wrap: wrap; align-items: center; }
.icon-demo { text-align: center; font-size: 0.78rem; color: var(--ink-soft); }
.icon-demo svg { width: 48px; height: 48px; color: var(--terracotta); display: block; margin: 0 auto 0.4rem; }

/* ---------- Flight wrap: squiggly dashed divider + junco walking the line ----------
   After the line draws in, the junco fades in at the right end, hops forward
   along the exact curve, shakes its tail, turns around, and hops back.
   Positioning is driven by JS via getPointAtLength, so the curvature is
   never altered and the bird's feet stay on the line. */
.flight-wrap { position: relative; padding-top: 28px; overflow: hidden; }
.walker { position: absolute; width: 53px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.walker.on { opacity: 1; }
.walker-svg { display: block; width: 100%; height: auto; }
.walker.flip .walker-svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .walker.shake .w-tail {
    transform-box: fill-box; transform-origin: left center;
    animation: tail-shake 0.16s ease-in-out 5;
  }
  @keyframes tail-shake {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-24deg); }
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* Puffin waddle: body rocks side to side while the legs step alternately */
  .walker.waddling .w-body {
    transform-box: fill-box; transform-origin: 50% 85%;
    animation: waddle-rock 0.5s ease-in-out infinite;
  }
  .walker.waddling .w-leg-a, .walker.waddling .w-leg-b {
    transform-box: fill-box; transform-origin: 50% 0%;
    animation: waddle-step 0.5s ease-in-out infinite;
  }
  .walker.waddling .w-leg-b { animation-delay: -0.25s; }
  @keyframes waddle-rock {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
  }
  @keyframes waddle-step {
    0%, 100% { transform: rotate(11deg) translateY(0); }
    50% { transform: rotate(-11deg) translateY(-1.5px); }
  }
}
/* Sandpiper run: same waddle gait cranked fast. Legs pivot at the hip
   (origin top of leg group) with a wide swing so the long legs scissor
   and cross mid-stride while staying attached to the body. */
.walker.running .w-body { animation-duration: 0.22s; }
.walker.running.waddling .w-leg-a,
.walker.running.waddling .w-leg-b { transform-origin: 50% 4%; }
.walker.running.waddling .w-leg-a { animation: run-stride-a 0.22s ease-in-out infinite; }
.walker.running.waddling .w-leg-b { animation: run-stride-b 0.22s ease-in-out infinite; }
@keyframes run-stride-a {
  0%, 100% { transform: rotate(24deg); }
  50% { transform: rotate(-24deg) translateY(-1.5px); }
}
@keyframes run-stride-b {
  0%, 100% { transform: rotate(-24deg) translateY(-1.5px); }
  50% { transform: rotate(24deg); }
}
@media (prefers-reduced-motion: reduce) { .walker { display: none; } }

/* ---------- Junco (illustrated nav bird) ---------- */
.junco { overflow: visible; }
.junco #junco-lid { transform: scaleY(0); transform-origin: 23px 24px; }
.junco #junco-tail { transform-origin: 50px 39px; }
.junco #junco-bird { transform-origin: 34px 50px; }

@media (prefers-reduced-motion: no-preference) {
  .junco.anim-blink #junco-lid { animation: junco-blink 0.45s ease-in-out; }
  @keyframes junco-blink {
    0%, 100% { transform: scaleY(0); }
    35%, 65% { transform: scaleY(1); }
  }
  .junco.anim-flick #junco-tail { animation: junco-flick 0.55s ease-in-out; }
  @keyframes junco-flick {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-22deg); }
    60% { transform: rotate(6deg); }
  }
  .junco.anim-hop #junco-bird { animation: junco-hop 0.5s ease-out; }
  @keyframes junco-hop {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    70% { transform: translateY(1px); }
  }
  .junco.anim-tilt #junco-bird { animation: junco-tilt 0.6s ease-in-out; }
  @keyframes junco-tilt {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(-9deg); }
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  section { padding: var(--space-l) 0; }
  .site-nav .wrap { flex-wrap: wrap; row-gap: 0.4rem; }
  .nav-links { gap: 0.9rem; flex-wrap: wrap; }
  .nav-links a { font-size: 0.8rem; }
  .hero { min-height: calc(100svh - 120px); }
  .hero-cta .btn { padding: 0.7rem 1.3rem; font-size: 0.9rem; }
  .postit-row { gap: 1.4rem; justify-content: center; }
  .postit { width: min(240px, 78vw); aspect-ratio: 1; min-height: 0; margin: 0 !important; }
  .grid-paper { padding-bottom: 7.5rem; } /* room for stamping birds + the birdhouse widget */
  .skills-title { font-size: 1.8rem; margin-top: 1.8rem; }
  .skill-box { font-size: 0.9rem; padding: 0.45rem 1.05rem; border-width: 2px; }
  .quote-track { min-height: 0; }
  .testimonials { padding: var(--space-m) 1.25rem; }
  .marquee { gap: 2rem; }
  .case-hero .facts { gap: 1.2rem 1.8rem; }
  .stamp-name { font-size: 0.6rem; }
}

/* ---------- Reveal on scroll ----------
   Hidden state applies ONLY when JS has confirmed it's running (html.js),
   so content is never invisible if scripts are blocked. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
  html.js .reveal.in { opacity: 1; transform: none; }
}