:root{
  --flour: #F7F1E4;
  --flour-deep: #EFE6D3;
  --roast: #2A231C;
  --roast-soft: #55493c;
  --cinnamon: #9C4A2B;
  --apple: #7A1F1F;
  --yolk: #C99A3E;
  --sage: #5C6B4C;
  --kraft: rgba(131,112,80,0.35);
  --kraft-solid: #6b5a3f;
  --tape: rgba(201,154,62,0.55);
  --tape-cinnamon: rgba(156,74,43,0.4);
  --ink-fixed: #2A231C;
  --ink-fixed-soft: #4A4038;
  --dot-color: rgba(107,90,63,0.09);
}

html[data-theme="dark"]{
  --flour: #1E1B18;
  --flour-deep: #2A2521;
  --roast: #F3ECE0;
  --roast-soft: #C9BFAF;
  --cinnamon: #D98462;
  --apple: #D4726B;
  --yolk: #E4BB6E;
  --sage: #93AE81;
  --kraft: rgba(201,186,160,0.16);
  --kraft-solid: #93866D;
  --tape: rgba(228,187,110,0.3);
  --tape-cinnamon: rgba(217,132,98,0.35);
  --dot-color: rgba(228,187,110,0.045);
}

html{ transition:background-color .25s ease; }
body{ transition:background-color .25s ease, color .25s ease; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }

body{
  margin:0;
  background:var(--flour);
  background-image:radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size:16px 16px;
  color:var(--roast);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

a{ color:inherit; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--cinnamon);
  outline-offset: 3px;
}

.hand{ font-family:'Caveat', cursive; }

/* ============ NAV (mobile first) ============ */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  position:relative; z-index:40;
}
.brand{
  font-family:'Fraunces', serif;
  font-size:19px; font-weight:600;
  letter-spacing:-0.01em;
  text-decoration:none;
  display:flex; align-items:center; gap:9px;
}
.brand svg{ width:24px; height:24px; flex-shrink:0; color:var(--cinnamon); }
.brand img{ width:22px; height:22px; flex-shrink:0; }
.nav-right{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .2s ease;
}
.icon-btn:hover{ background:var(--flour-deep); }
.icon-btn svg{ width:19px; height:19px; }

.theme-toggle{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:none; border:none; cursor:pointer; color:var(--roast);
  transition:background .2s ease;
}
.theme-toggle:hover{ background:var(--flour-deep); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
.mobile-menu .theme-toggle{ width:auto; height:auto; border-radius:0; justify-content:flex-start; gap:8px; padding:14px 4px; font-size:16px; color:var(--roast-soft); font-family:'Work Sans', sans-serif; }
.mobile-menu .theme-toggle:hover{ background:none; color:var(--cinnamon); }

.menu-btn{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:none; border:none; cursor:pointer;
  padding:0;
}
.menu-btn span{
  display:block; width:22px; height:2px; background:var(--roast); margin:0 auto;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  max-height:0; overflow:hidden; background:var(--flour-deep);
  transition:max-height .3s ease;
  border-bottom:1px solid var(--kraft);
}
.mobile-menu.open{ max-height:480px; overflow-y:auto; }
.mobile-menu ul{ list-style:none; margin:0; padding:8px 20px 20px; }
.mobile-menu li{ border-top:1px dashed var(--kraft); }
.mobile-menu a{
  display:block; padding:14px 4px; text-decoration:none; font-size:16px;
  color:var(--roast-soft);
}
.mobile-menu a.current{ color:var(--cinnamon); font-weight:500; }

.desktop-nav{ display:none; }

@media (min-width:760px){
  nav{ padding:26px 40px; }
  .menu-btn, .mobile-menu{ display:none; }
  .desktop-nav{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
  .desktop-nav a{
    text-decoration:none; font-size:14px; color:var(--roast-soft);
    padding-bottom:3px; border-bottom:1px solid transparent;
    transition:border-color .2s ease, color .2s ease;
  }
  .desktop-nav a:hover, .desktop-nav a.current{ color:var(--roast); border-color:var(--cinnamon); }
  .desktop-nav .cta{
    color:var(--flour); background:var(--roast); padding:9px 16px;
    border-radius:2px; border-bottom:none;
  }
  .desktop-nav .cta:hover{ background:var(--cinnamon); }
}

/* ============ PAGE HERO (interior pages) ============ */
header.page-hero{ padding:24px 20px 40px; max-width:1100px; margin:0 auto; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--cinnamon); margin-bottom:16px; display:block;
}
header.page-hero h1{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(30px, 7vw, 54px); line-height:1.06; letter-spacing:-0.02em;
  margin:0 0 18px; max-width:16ch;
}
header.page-hero .lede{
  font-size:16px; line-height:1.65; color:var(--roast-soft); max-width:58ch; margin:0;
}
@media (min-width:900px){ header.page-hero{ padding:44px 40px 56px; } }

/* ============ HOME HERO ============ */
header.hero{ padding:20px 20px 48px; max-width:1100px; margin:0 auto; position:relative; }
.hero-art{
  position:absolute; top:-30px; right:-70px; width:420px; height:420px;
  opacity:0.09; pointer-events:none; z-index:0; color:var(--cinnamon);
}
header.hero .hero-text, header.hero .polaroid{ position:relative; z-index:1; }
@media (max-width:899px){ .hero-art{ width:280px; height:280px; top:-15px; right:-80px; } }
.polaroid{
  width:260px; background:#fff; padding:12px 12px 30px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 12px 22px rgba(42,35,28,0.16);
  transform:rotate(-4deg);
  margin:0 auto 24px;
  position:relative;
}
.polaroid .photo{
  width:100%; aspect-ratio:1/1; background:#EFE6D3;
  border:1px dashed #93866D;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:10px; color:#6b5a3f;
  text-align:center; padding:8px;
  object-fit:cover; object-position:top center;
}
.polaroid .cap{
  font-family:'Caveat', cursive; font-size:18px; color:#2A231C;
  text-align:center; margin-top:8px; line-height:1.3;
}
.polaroid .tape{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:52px; height:20px; background:var(--tape);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.polaroid .arrow-note{
  position:absolute; right:-58px; top:30%; width:70px; display:none;
}

header.hero h1{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:26px; line-height:1.12; letter-spacing:-0.02em;
  margin:0 0 22px;
}
@media (min-width:480px){
  header.hero h1{ font-size:clamp(30px, 7vw, 64px); line-height:1.08; }
}
header.hero h1 .accent{ font-style:italic; font-weight:500; color:var(--cinnamon); position:relative; display:inline-block; }
.wobble-underline{ position:absolute; left:0; bottom:-10px; width:min(230px,85%); }
.wobble-underline svg{ width:100%; height:auto; display:block; }
.hero-sub{ font-size:16.5px; line-height:1.65; color:var(--roast-soft); max-width:56ch; margin:0 0 30px; }

.cta-row{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; width:100%; }
.btn{
  font-family:'Work Sans', sans-serif; font-size:15px; font-weight:500;
  padding:15px 24px; border-radius:2px; text-decoration:none;
  display:inline-block; border:1px solid var(--roast);
  transition:all .2s ease; cursor:pointer; text-align:center;
}
.btn-solid{ background:var(--roast); color:var(--flour); }
.btn-solid:hover{ background:var(--cinnamon); border-color:var(--cinnamon); }
.btn-outline{ background:transparent; color:var(--roast); }
.btn-outline:hover{ background:var(--flour-deep); }

.doodle-note{ display:flex; align-items:center; gap:6px; font-family:'Caveat', cursive; font-size:20px; color:var(--cinnamon); margin-left:4px; }
.doodle-note svg{ width:46px; height:34px; flex-shrink:0; }

@media (min-width:640px){ .hero-ctas{ width:auto; } .btn{ padding:15px 30px; } }

@media (min-width:900px){
  header.hero{ padding:40px 40px 72px; display:flex; gap:48px; align-items:flex-start; }
  .hero-text{ flex:1; }
  .polaroid{ width:360px; margin-top:20px; margin-left:auto; margin-right:0; flex-shrink:0; order:2; }
  .polaroid .photo{ font-size:12px; }
  .polaroid .cap{ font-size:22px; }
  .polaroid .arrow-note{ display:block; }
  .cta-row{ flex-direction:row; align-items:center; }
}

.squiggle{ display:block; width:100%; max-width:1100px; margin:0 auto; padding:0 20px; }
.squiggle svg{ width:100%; height:16px; display:block; }

/* ============ STRIP ============ */
.strip{ border-top:1px solid var(--kraft); border-bottom:1px solid var(--kraft); }
.strip-inner{ max-width:1100px; margin:0 auto; padding:30px 20px; display:grid; grid-template-columns:1fr; gap:22px; }
.strip-item .tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cinnamon); display:block; margin-bottom:6px; }
.strip-item p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--roast-soft); }
@media (min-width:760px){ .strip-inner{ grid-template-columns:repeat(3,1fr); padding:36px 40px; gap:36px; } }

/* ============ ABOUT ============ */
section.about{ padding:56px 20px; max-width:1100px; margin:0 auto; }
.about-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
.about h2{ font-family:'Fraunces', serif; font-weight:500; font-size:28px; letter-spacing:-0.01em; margin:12px 0 24px; }
blockquote{ margin:0 0 24px; padding:0 0 0 18px; border-left:3px solid var(--cinnamon); font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:18px; line-height:1.5; color:var(--roast); }
.about p{ font-size:15px; line-height:1.75; color:var(--roast-soft); margin:0 0 16px; }

.capability-cards{ display:flex; flex-direction:column; gap:14px; }
.capability-card{ border:1px solid var(--kraft); border-radius:3px; padding:16px 18px; background:var(--flour-deep); position:relative; }
.capability-card .cap-tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--apple); display:flex; align-items:center; gap:6px; margin-bottom:8px; font-weight:500; }
.capability-card .cap-tag svg{ width:14px; height:14px; flex-shrink:0; }
.capability-card p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--roast-soft); }

@media (min-width:900px){
  section.about{ padding:80px 40px; }
  .about-grid{ grid-template-columns:1.3fr 1fr; gap:56px; }
  .about h2{ font-size:34px; }
}

/* ============ TEASER LINKS (home page, to portfolio/blog) ============ */
section.teasers{ padding:8px 20px 64px; max-width:1100px; margin:0 auto; }
.teaser-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:760px){ .teaser-grid{ grid-template-columns:1fr 1fr; } }
.spotlight-grid{ grid-template-columns:1fr; }
@media (min-width:760px){ .spotlight-grid{ grid-template-columns:1fr 1fr; } }
.teaser-card{
  border:1.5px dashed var(--kraft-solid); border-radius:3px; padding:26px 22px;
  display:flex; flex-direction:column; text-decoration:none; color:var(--roast);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
}
.teaser-card .tape-corner{ position:absolute; top:-9px; left:22px; transform:rotate(-3deg); width:46px; height:18px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.teaser-card.cinnamon-tape .tape-corner{ background:var(--tape-cinnamon); }
@media (hover:hover){ .teaser-card:hover{ transform:rotate(-0.4deg) translateY(-3px); box-shadow:0 14px 28px rgba(42,35,28,0.08); border-color:var(--cinnamon); } }
.teaser-card .t-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cinnamon); margin-bottom:10px; }
.teaser-card h3{ font-family:'Fraunces', serif; font-weight:500; font-size:24px; margin:0 0 10px; }
.teaser-card p{ font-size:14px; line-height:1.6; color:var(--roast-soft); margin:0 0 18px; flex-grow:1; }
.teaser-card .go{ font-family:'Caveat', cursive; font-size:19px; color:var(--cinnamon); }

/* ============ WORK / PORTFOLIO CARDS ============ */
section.index{ padding:16px 20px 72px; max-width:1100px; margin:0 auto; }
.index-head{ margin-bottom:34px; max-width:60ch; }
.index-head h2{ font-family:'Fraunces', serif; font-weight:500; font-size:28px; letter-spacing:-0.01em; margin:12px 0 0; }

.cards{ display:grid; grid-template-columns:1fr; gap:22px; }
.card{
  background:var(--flour-deep); color:var(--roast);
  border:1.5px dashed var(--kraft-solid); border-radius:3px;
  padding:24px 20px 20px; display:flex; flex-direction:column; position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease;
}
.card .tape-corner{ position:absolute; top:-9px; left:22px; transform:rotate(-3deg); width:46px; height:18px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.card:nth-child(2n) .tape-corner{ background:rgba(122,31,31,0.35); }
.card:nth-child(3n) .tape-corner{ background:rgba(92,107,76,0.4); }
@media (hover:hover){ .card:hover{ transform:rotate(-0.4deg) translateY(-3px); box-shadow:0 14px 28px rgba(42,35,28,0.08); border-color:var(--cinnamon); } }
.card .kicker{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cinnamon); margin-bottom:10px; display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.status-note{ font-family:'Caveat', cursive; font-size:16px; color:#2A231C; background:var(--yolk); padding:2px 10px 4px; border-radius:2px; transform:rotate(-3deg); display:inline-block; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,0.1); margin-bottom:8px; }
.card h3{ font-family:'Fraunces', serif; font-weight:500; font-size:19px; margin:0 0 10px; line-height:1.25; }
.card p{ font-size:13.5px; line-height:1.6; color:var(--roast-soft); margin:0 0 16px; flex-grow:1; }
.card .ingredients-label{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cinnamon); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.card .ingredients-label svg{ width:12px; height:12px; flex-shrink:0; color:var(--cinnamon); }
.card .tag-row span{ font-size:11.5px; padding:4px 9px; border:1px solid var(--kraft-solid); border-radius:20px; color:var(--roast-soft); }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-row span{ font-size:11.5px; padding:4px 9px; border:1px solid var(--kraft); border-radius:20px; color:var(--roast-soft); }

@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){
  section.index{ padding:20px 40px 100px; }
  .index-head h2{ font-size:34px; }
  .cards{ grid-template-columns:repeat(3,1fr); gap:24px; }
}

/* ============ SKILLS ============ */
section.skills{ background:var(--flour-deep); color:var(--roast); padding:56px 20px; }
.skills-inner{ max-width:1100px; margin:0 auto; }
.skills .eyebrow{ color:var(--cinnamon); }
.skills h2{ font-family:'Fraunces', serif; font-weight:500; font-size:28px; margin:12px 0 8px; letter-spacing:-0.01em; }
.skills .subcap{ font-family:'Caveat', cursive; font-size:19px; color:var(--cinnamon); margin:0 0 32px; }
.skills-grid{ display:grid; grid-template-columns:1fr; gap:30px; }
.skills-col .col-tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--kraft); display:flex; align-items:center; gap:9px; color:var(--sage); }
.skills-col .col-tag svg{ width:17px; height:17px; flex-shrink:0; }
.skills-col ul{ list-style:none; margin:0; padding:0; }
.skills-col li{ font-size:14px; line-height:2; color:var(--roast-soft); }
.skills-col li.tool-item{ display:flex; align-items:center; gap:8px; }
.skills-col li.tool-item svg{ width:14px; height:14px; flex-shrink:0; opacity:0.85; }
@media (min-width:900px){
  section.skills{ padding:80px 40px; } .skills h2{ font-size:34px; }
  .skills-grid{ grid-template-columns:1fr 1.7fr 1fr; gap:40px; }
  .skills-col:nth-child(2) ul{ column-count:2; column-gap:24px; }
  .skills-col:nth-child(2) li{ break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:4px; }
}

/* ============ BLOG ============ */
section.blog-list{ padding:16px 20px 90px; max-width:1100px; margin:0 auto; }
.blog-cards{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:760px){ .blog-cards{ grid-template-columns:1fr 1fr; } }

.empty-card{
  border:1.5px dashed var(--kraft-solid); border-radius:3px;
  padding:28px 24px; text-align:center; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.empty-card .tape-corner{ position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg); width:52px; height:18px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.empty-card svg.utensil{ width:34px; height:34px; margin:0 auto 16px; display:block; }
.chef-illustration{
  width:100%; max-width:200px; height:auto; border-radius:4px;
  margin:0 auto 16px; display:block;
}
.illustration-dark{ display:none; }
html[data-theme="dark"] .illustration-light{ display:none; }
html[data-theme="dark"] .illustration-dark{ display:block; }
.empty-card h3{ font-family:'Caveat', cursive; font-size:28px; color:var(--roast); margin:0 0 10px; font-weight:600; }
.empty-card p{ font-size:14.5px; line-height:1.6; color:var(--roast-soft); max-width:44ch; margin:0 auto; }

.post-card{
  border:1px solid var(--kraft); border-radius:3px; padding:22px 20px; opacity:0.65;
}
.post-card .p-date{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--kraft-solid); margin-bottom:10px; display:block; }
.post-card h4{ font-family:'Fraunces', serif; font-weight:500; font-size:18px; margin:0 0 8px; }
.post-card p.excerpt{ font-size:13.5px; line-height:1.6; color:var(--roast-soft); margin:0; }
.example-flag{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cinnamon); display:block; margin-bottom:12px; }

.post-card.live{
  opacity:1; text-decoration:none; color:inherit; display:block;
  border:1.5px dashed var(--kraft-solid); position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card.live .tape-corner{ position:absolute; top:-9px; left:22px; transform:rotate(-3deg); width:46px; height:18px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,0.08); }
@media (hover:hover){ .post-card.live:hover{ transform:rotate(-0.3deg) translateY(-3px); box-shadow:0 14px 28px rgba(42,35,28,0.08); border-color:var(--cinnamon); } }
.post-card.live h4{ font-size:20px; }
.post-card.live .read-tag{ font-family:'Caveat', cursive; font-size:17px; color:var(--cinnamon); display:inline-block; margin-top:12px; }

/* ============ BLOG ARTICLE ============ */
.article-body{ max-width:680px; margin:0 auto; padding:8px 20px 30px; }
.article-body p{ font-size:15.5px; line-height:1.8; color:var(--roast-soft); margin:0 0 20px; }
.article-body blockquote{
  margin:32px 0; padding:4px 0 4px 20px; border-left:3px solid var(--cinnamon);
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:21px; line-height:1.5; color:var(--roast);
}
.article-meta{ max-width:680px; margin:0 auto; padding:0 20px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.article-meta .p-date{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--kraft-solid); }
.article-tags{ max-width:680px; margin:8px auto 0; padding:24px 20px 40px; border-top:1px dashed var(--kraft); display:flex; flex-wrap:wrap; gap:8px; }
.article-tags span{ font-size:12px; padding:5px 11px; border:1px solid var(--kraft); border-radius:20px; color:var(--roast-soft); }
@media (min-width:760px){ .article-body p{ font-size:16px; } }
/* ============ TESTIMONIAL CAROUSEL ============ */
section.testimonials{ padding:8px 20px 64px; max-width:1100px; margin:0 auto; }
.testimonial-carousel{ max-width:640px; margin:0 auto; overflow:hidden; }
.tc-track{ display:flex; transition:transform .4s ease; }
.tc-slide{
  flex:0 0 100%; box-sizing:border-box;
  border:1.5px dashed var(--kraft-solid); border-radius:3px;
  padding:32px 28px; text-align:center; background:var(--flour-deep);
  transition:background-color .25s ease, border-color .25s ease;
}
.tc-slide blockquote{ margin:0 0 14px; font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:21px; line-height:1.5; color:var(--roast); }
.tc-slide cite{ font-family:'IBM Plex Mono', monospace; font-style:normal; font-size:12px; letter-spacing:0.04em; color:var(--roast-soft); }
.tc-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.tc-arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--kraft);
  background:none; color:var(--roast); cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.tc-arrow:hover{ background:var(--flour-deep); }
.tc-dots{ display:flex; gap:8px; }
.tc-dot{ width:8px; height:8px; border-radius:50%; border:none; background:var(--kraft); cursor:pointer; padding:0; }
.tc-dot.active{ background:var(--cinnamon); }

footer{ padding:36px 20px 44px; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
footer .fbrand{ font-family:'Fraunces', serif; font-size:17px; font-weight:500; }
footer .sign-off{ font-family:'Caveat', cursive; font-size:17px; color:var(--kraft-solid); }
footer .flinks{ display:flex; align-items:center; gap:18px; font-family:'IBM Plex Mono', monospace; font-size:12px; }
footer .flinks a{ text-decoration:none; color:var(--roast-soft); display:flex; align-items:center; gap:6px; }
footer .flinks a:hover{ color:var(--cinnamon); }
footer .flinks svg{ width:16px; height:16px; }
@media (min-width:640px){ footer{ flex-direction:row; justify-content:space-between; align-items:center; } }

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.stagger-reveal > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.stagger-reveal.in-view > *{ opacity:1; transform:translateY(0); }
.stagger-reveal.in-view > *:nth-child(2){ transition-delay:.08s; }
.stagger-reveal.in-view > *:nth-child(3){ transition-delay:.14s; }
.stagger-reveal.in-view > *:nth-child(4){ transition-delay:.20s; }
.stagger-reveal.in-view > *:nth-child(5){ transition-delay:.26s; }
.stagger-reveal.in-view > *:nth-child(6){ transition-delay:.32s; }

/* the squiggle "draws itself" in as you scroll to it */
.scroll-draw svg path{
  stroke-dasharray:1500; stroke-dashoffset:1500;
  transition:stroke-dashoffset 1.3s ease;
}
.scroll-draw.in-view svg path{ stroke-dashoffset:0; }

@media (prefers-reduced-motion: reduce){
  .card, .teaser-card, .mobile-menu, .menu-btn span,
  .reveal, .stagger-reveal > *, .scroll-draw svg path{ transition:none !important; }
  .card:hover, .teaser-card:hover{ transform:none; }
  .reveal, .stagger-reveal > *{ opacity:1 !important; transform:none !important; }
  .scroll-draw svg path{ stroke-dashoffset:0 !important; }
}

/* ============ FEATURED SPOTLIGHT (home) ============ */
section.spotlight{ padding:8px 20px 64px; max-width:1100px; margin:0 auto; }
.spotlight-card{
  border:1.5px dashed var(--kraft-solid); border-radius:3px;
  background:var(--flour-deep); color:var(--roast);
  padding:30px 22px; position:relative;
  display:flex; flex-direction:column; gap:18px;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.spotlight-card .tape-corner{ position:absolute; top:-9px; left:28px; transform:rotate(-3deg); width:52px; height:18px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.spotlight-eyebrow{ display:flex; align-items:center; gap:10px; }
.spotlight-eyebrow .pin{
  font-family:'Caveat', cursive; font-size:16px; color:#2A231C;
  background:var(--yolk); padding:2px 10px 4px; border-radius:2px;
  transform:rotate(-2deg); display:inline-block; box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.spotlight-card h3{ font-family:'Fraunces', serif; font-weight:500; font-size:24px; margin:0; line-height:1.2; color:var(--roast); }
.spotlight-card p{ font-size:14.5px; line-height:1.65; color:var(--roast-soft); margin:0; max-width:60ch; }
.spotlight-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:4px; }
.spotlight-card .tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.spotlight-card .tag-row span{ font-size:11.5px; padding:4px 9px; border:1px solid var(--kraft-solid); border-radius:20px; color:var(--roast-soft); background:var(--flour); }
.spotlight-card .go-link{
  font-family:'Caveat', cursive; font-size:19px; color:var(--sage); text-decoration:none;
  white-space:nowrap;
}
@media (min-width:760px){ .spotlight-card{ padding:36px 34px; } .spotlight-card h3{ font-size:28px; } }

/* ============ ACCOLADES RIBBON (home) ============ */
section.accolades{ padding:8px 20px 64px; max-width:1100px; margin:0 auto; }
.accolades .eyebrow{ margin-bottom:4px; }
.accolades h2{
  font-family:'Fraunces', serif; font-weight:500; font-size:24px;
  letter-spacing:-0.01em; margin:8px 0 26px;
}
.ribbon-row{
  display:flex; gap:14px; overflow-x:auto; padding:4px 4px 24px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.ribbon-row::-webkit-scrollbar{ display:none; height:0; }
.ribbon{
  flex:0 0 auto; min-width:168px;
  background:var(--flour); border:1px solid var(--kraft);
  border-radius:3px 3px 0 0; padding:16px 16px 20px; position:relative;
}
.ribbon::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px;
  background:inherit; border-left:1px solid var(--kraft); border-right:1px solid var(--kraft);
  clip-path:polygon(0 0, 100% 0, 100% 0, 50% 100%, 0 0);
}
.ribbon .r-icon{ width:18px; height:18px; color:var(--yolk); margin-bottom:10px; }
.ribbon p{ font-size:12.5px; line-height:1.4; color:var(--roast-soft); margin:0; font-weight:500; }

/* ============ V2: DEVICE THUMBNAILS (portfolio grid cards) ============ */
.device-thumb{
  border:1px solid var(--kraft); border-radius:6px 6px 3px 3px; overflow:hidden;
  margin-bottom:16px; background:#EFE6D3;
}
.device-thumb .chrome{
  display:flex; align-items:center; gap:5px; padding:6px 9px;
  background:#EFE6D3; border-bottom:1px solid var(--kraft);
}
.device-thumb .chrome span{ width:6px; height:6px; border-radius:50%; background:var(--kraft-solid); opacity:.45; }
.device-thumb .screen{
  aspect-ratio:16/10;
  background:#EFE6D3;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--kraft-solid);
  text-align:center; padding:10px; line-height:1.4;
  overflow:hidden;
}
.device-thumb .screen:empty{
  background-image:repeating-linear-gradient(135deg, var(--flour-deep), var(--flour-deep) 9px, var(--flour) 9px, var(--flour) 18px);
}
.device-thumb .screen img{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* ============ V2: CARD HEADER (employer + outcome first) ============ */
.card-head{ margin-bottom:10px; }
.card-head h3{
  font-family:'Fraunces', serif; font-weight:500; font-size:18px;
  margin:0 0 6px; line-height:1.25;
}
.card-head .kicker-sub{
  font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--cinnamon);
  display:block;
}
.card .status-note.small, .card .status-plain{ margin-left:8px; }

/* ============ V2: CALM VARIANT (healthcare / corporate case studies) ============ */
.card.calm{ border-style:solid; border-width:1px; }
.card.calm:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(42,35,28,0.07);
  border-color:var(--cinnamon);
}
.status-plain{
  font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.06em;
  text-transform:uppercase; background:var(--flour-deep); color:var(--roast-soft);
  padding:3px 9px; border-radius:3px; border:1px solid var(--kraft); white-space:nowrap;
}
.status-plain.differentiator{ color:var(--apple); border-color:var(--apple); background:rgba(122,31,31,0.06); }

/* ============ V2: CREDIBILITY BADGES ============ */
.cred-row{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.cred-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  padding:5px 10px; border:1px solid var(--kraft); border-radius:20px;
  color:var(--roast-soft); background:var(--flour-deep);
}
.cred-badge svg{ width:12px; height:12px; color:var(--sage); flex-shrink:0; }

/* ============ V2: FLAGSHIP TEASER CARD (in grid) ============ */
.card.flagship{ border-color:var(--cinnamon); border-style:solid; border-width:1.5px; }
.flagship-tag{
  font-family:'Caveat', cursive; font-size:15px; color:var(--flour);
  background:var(--cinnamon); padding:2px 10px 3px; border-radius:2px;
  display:inline-block; margin-bottom:10px;
}
.read-more-link{
  font-family:'Caveat', cursive; font-size:18px; color:var(--cinnamon);
  text-decoration:none; margin-top:auto;
}

/* ============ V2: FLAGSHIP DEEP-DIVE PAGE ============ */
.flagship-hero{ padding:24px 20px 12px; max-width:900px; margin:0 auto; }
.back-link{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--roast-soft);
  text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom:22px;
}
.back-link:hover{ color:var(--cinnamon); }

.fact-strip{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;
  max-width:900px; margin:0 auto; padding:22px 20px; border-top:1px solid var(--kraft); border-bottom:1px solid var(--kraft);
}
.fact-strip .fact .flabel{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cinnamon); display:block; margin-bottom:4px; }
.fact-strip .fact .fval{ font-size:14px; color:var(--roast-soft); }
@media (min-width:640px){ .fact-strip{ grid-template-columns:repeat(4,1fr); } }

.deep-section{ max-width:900px; margin:0 auto; padding:48px 20px; }
.deep-section h2{ font-family:'Fraunces', serif; font-weight:500; font-size:26px; margin:0 0 18px; letter-spacing:-0.01em; }
.deep-section p{ font-size:15px; line-height:1.75; color:var(--roast-soft); margin:0 0 16px; max-width:68ch; }
.deep-section + .deep-section{ border-top:1px dashed var(--kraft); }

.process-steps{ list-style:none; margin:0; padding:0; }
.process-steps li{
  position:relative; padding-left:44px; margin-bottom:22px;
}
.step-icon{
  position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%; border:1.5px dashed var(--cinnamon);
  display:flex; align-items:center; justify-content:center; color:var(--cinnamon);
}
.step-icon svg{ width:15px; height:15px; }
.process-steps h4{ font-family:'Fraunces', serif; font-weight:500; font-size:17px; margin:0 0 4px; }
.process-steps p{ margin:0; font-size:14px; }

.decision-cards{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .decision-cards{ grid-template-columns:1fr 1fr; } }
.decision-card{ border:1px solid var(--kraft); border-radius:3px; padding:16px 18px; background:var(--flour-deep); }
.decision-card .d-label{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--apple); margin-bottom:6px; display:block; }
.decision-card p{ margin:0; font-size:13.5px; }

/* device mockups: flagship page */
.mockup-row{ display:flex; flex-direction:column; gap:36px; align-items:center; margin:32px 0 8px; }
@media (min-width:760px){ .mockup-row{ flex-direction:row; align-items:flex-end; justify-content:center; gap:48px; } }

.laptop-mockup{ width:100%; max-width:480px; }
.laptop-screen{ background:var(--ink-fixed); border-radius:10px 10px 4px 4px; padding:10px 10px 14px; }
.laptop-screen .inner{
  background:var(--flour); border-radius:4px; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
  border:1px dashed var(--kraft-solid); text-align:center; padding:16px;
}
.placeholder-watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34%; height:auto; opacity:0.16; color:var(--cinnamon); pointer-events:none;
}
.placeholder-label{
  position:relative; z-index:1;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--kraft-solid);
}
.laptop-screen .inner span{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--kraft-solid); }
.laptop-base{ height:14px; background:linear-gradient(var(--ink-fixed-soft), var(--ink-fixed)); border-radius:0 0 8px 8px; position:relative; margin:0 34px; }
.laptop-base::after{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:64px; height:4px; background:var(--ink-fixed); border-radius:0 0 4px 4px; }

.tablet-mockup{ width:180px; flex-shrink:0; }
.tablet-frame{ background:var(--ink-fixed); border-radius:20px; padding:14px 10px; }
.tablet-frame .inner{
  background:var(--flour); border-radius:5px; aspect-ratio:3/4; border:1px dashed var(--kraft-solid);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; position:relative;
}
.tablet-frame .inner span{ font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--kraft-solid); }
.tablet-frame .home-dot{ width:8px; height:8px; border-radius:50%; background:var(--roast-soft); margin:10px auto 0; }

.mockup-caption{ text-align:center; font-family:'Caveat', cursive; font-size:16px; color:var(--kraft-solid); margin-top:10px; }

.live-link-note{
  border:1px dashed var(--kraft-solid); border-radius:3px; padding:14px 16px;
  font-size:13px; color:var(--roast-soft); margin-top:20px; display:flex; gap:10px; align-items:flex-start;
}
.live-link-note svg{ width:16px; height:16px; flex-shrink:0; color:var(--cinnamon); margin-top:1px; }

.testimonial-empty{
  border:1.5px dashed var(--kraft-solid); border-radius:3px; padding:28px 24px; text-align:center;
}
.testimonial-empty svg{ width:26px; height:26px; margin:0 auto 12px; display:block; color:var(--kraft-solid); }
.testimonial-empty h4{ font-family:'Caveat', cursive; font-size:22px; color:var(--roast); margin:0 0 8px; font-weight:600; }
.testimonial-empty p{ font-size:13.5px; max-width:46ch; margin:0 auto; }

.testimonial-quote{
  border:1.5px dashed var(--kraft-solid); border-radius:3px;
  padding:32px 28px; position:relative; text-align:center;
}
.testimonial-quote .tape-corner{ position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg); width:52px; height:18px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.testimonial-quote blockquote{
  margin:0 0 14px; padding:0; border:none;
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:21px; line-height:1.5; color:var(--roast); max-width:50ch; margin-left:auto; margin-right:auto;
}
.testimonial-quote cite{
  font-family:'IBM Plex Mono', monospace; font-style:normal; font-size:12px;
  letter-spacing:0.04em; color:var(--roast-soft);
}