:root{
  --ink:#17130f;
  --paper:#fffaf3;
  --paper2:#fff4d6;
  --cream:#fff4d6;
  --rust:#ff595e;
  --blue:#1982c4;
  --lime:#8ac926;
  --acid:#8ac926;
  --yellow:#ffca3a;
  --purple:#6a4c93;
  --orange:#ff595e;
  --green:#8ac926;
  --muted:#5f5962;
}

/* Colorful boxed-heading system */
.headline-box{
  display:inline-block;
  border:2px solid var(--ink);
  padding:.01em .12em .08em;
  box-shadow:.07em .07em 0 var(--ink);
  line-height:.92;
}
.box-yellow{background:var(--yellow);transform:rotate(-1.2deg)}
.box-coral{background:var(--rust);color:#fff!important;transform:rotate(1deg)}
.box-green{background:var(--lime);color:var(--ink)!important;transform:rotate(-.8deg)}
.box-purple{background:var(--purple);color:#fff!important;transform:rotate(.8deg)}
.head h2 .headline-box,
.scrap-intro h2 .headline-box,
.contact h2 .headline-box{
  padding:.02em .13em .09em;
  box-shadow:.08em .08em 0 var(--ink);
}

/* Homepage color and portrait refresh */
.wordmark i{color:var(--purple)}
.hero-portrait{
  background:
    radial-gradient(circle at 104% 12%,var(--yellow) 0 27%,transparent 27.5%),
    radial-gradient(circle at 0 100%,var(--purple) 0 25%,transparent 25.5%),
    #e9f5fb;
  box-shadow:12px 12px 0 var(--blue);
}
.hero-portrait:after{z-index:3;background:var(--yellow)}
.hero-portrait img{
  position:relative;
  z-index:1;
  aspect-ratio:4/5;
  object-fit:contain;
  object-position:center bottom;
}
.button{background:var(--blue);border-color:var(--ink);box-shadow:5px 5px 0 var(--yellow)}
.button.alt{background:transparent;color:var(--ink);box-shadow:none}
.case:nth-child(1){box-shadow:8px 8px 0 var(--blue)}
.case:nth-child(2){box-shadow:8px 8px 0 var(--yellow)}
.case:nth-child(3){box-shadow:8px 8px 0 var(--lime)}
.case:nth-child(4){box-shadow:8px 8px 0 var(--rust)}
.scrapbook-section{background:#fff4d6}
.result-note.violet{background:#e3d8ee}
.result-note.orange{background:#ffb1b4}
.contact,.next-work{background:var(--purple)}
.contact .button{background:var(--rust);color:#fff;box-shadow:6px 6px 0 var(--yellow)}
.next-work em,.next-work .kicker{color:var(--yellow)}

/* Shared-page color consistency */
.brand-mark,.side-note,.note-card{background:var(--lime)}
.nav-cta{background:var(--blue)}
.work-cover,.project-stage,.case-study-page{box-shadow-color:var(--blue)}
main[style]{--accent:#8ac926!important}

@media(max-width:520px){
  .headline-box{box-shadow:.055em .055em 0 var(--ink)}
}


/* ===== Aug 31 polish pass: palette + compact hero ===== */
:root{
  --ink:#17130f;
  --paper:#fffaf3;
  --paper2:#fff4d6;
  --cream:#fff4d6;
  --rust:#ff595e;
  --blue:#1982c4;
  --lime:#8ac926;
  --acid:#8ac926;
  --yellow:#ffca3a;
  --purple:#6a4c93;
  --orange:#ff595e;
  --green:#8ac926;
  --muted:#5f5962;
}

/* Smaller homepage hero, with a compact animated click tag. */
.hero{padding:44px 0 50px!important}
.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)!important;
  gap:44px!important;
  align-items:center!important;
}
.hero h1{font-size:clamp(50px,6.3vw,82px)!important;max-width:10ch!important}
.hero .intro{font-size:clamp(17px,1.55vw,20px)!important;margin:21px 0!important;max-width:40ch}
.hero-portrait{width:min(100%,440px);justify-self:end}
.hero-portrait img{
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center 38%!important;
}
.hero-last-line{display:inline-flex!important;align-items:baseline;gap:.08em;white-space:nowrap}
.hero-last-line .click-wrap{
  width:5.35ch!important;
  font-size:.68em!important;
  padding:.02em .10em .08em!important;
  vertical-align:.08em!important;
  top:-.02em;
}
.hero-last-line .typed-click{font-size:1em}

/* The palette is the decoration. Ink stays for type, borders, and shadows only. */
.company-strip,
footer,
.footer,
.metrics-band,
.experience{background:var(--purple)!important;color:#fff!important}
.nav-cta,
.btn:not(.alt),
.button:not(.alt){background:var(--blue)!important;color:#fff!important}
.prompt-card,
.pcos-demo-tabs,
.confidential-note,
.viewer{background:var(--purple)!important;color:#fff!important}
.video-frame,
.motion-card{background:var(--purple)!important;color:#fff!important;border-color:var(--ink)!important}
.video-frame video,
.motion-card video{background:var(--purple)!important}
.scrap-intro h2 em,
.marker-line{background:var(--purple)!important;color:#fff!important}
.toolmark{background:var(--purple)!important}
.toolmark.adobe,.toolmark.hoot{background:var(--rust)!important}
.toolmark.canva{background:var(--blue)!important}
.toolmark.filmora,.toolmark.sprout{background:var(--lime)!important}
.toolmark.davinci,.toolmark.capcut{background:var(--purple)!important}
.hero:after{background:var(--yellow)!important;color:var(--purple)!important}
.skip:focus,.skip{background:var(--blue)!important;color:#fff!important}

/* AI + tools homepage teaser */
.ai-teaser{background:var(--paper);border-top:2px solid var(--ink);padding:72px 0}
.ai-teaser-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.ai-teaser h2{font-size:clamp(42px,5.5vw,70px);max-width:10ch}
.ai-teaser-copy>p{font-size:18px;color:var(--muted);max-width:48ch;margin:18px 0 24px}
.ai-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-mini-card{border:2px solid var(--ink);padding:22px;background:#fff;box-shadow:6px 6px 0 var(--yellow)}
.ai-mini-card:nth-child(2){box-shadow-color:var(--lime)}
.ai-mini-card strong{display:block;font:800 17px Sora;margin-bottom:7px}
.ai-mini-card span{font-size:13px;color:var(--muted);line-height:1.5}

@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.72fr)!important;gap:34px!important}
  .hero h1{font-size:clamp(48px,7vw,72px)!important}
  .hero-portrait{max-width:390px}
}
@media(max-width:720px){
  .hero{padding:38px 0 46px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:28px!important}
  .hero h1{font-size:clamp(46px,13vw,64px)!important}
  .hero-portrait{justify-self:start;max-width:380px}
  .ai-teaser-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:520px){
  .hero-last-line .click-wrap{font-size:.64em!important}
  .ai-mini-grid{grid-template-columns:1fr}
  .ai-teaser{padding:56px 0}
}


/* ===== Aug 31 round 2: click tag hugs the text ===== */
.hero-last-line .click-wrap{
  width:auto!important;
  min-width:0!important;
  padding:.02em .075em .08em!important;
}
.hero-last-line .typed-click{
  width:auto!important;
  overflow:visible!important;
  clip-path:inset(0 100% 0 0);
  animation:click-reveal-loop 4s steps(6,end) .4s infinite!important;
  letter-spacing:-.035em;
}
@keyframes click-reveal-loop{
  0%,12%{clip-path:inset(0 100% 0 0)}
  45%,72%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 100% 0 0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-last-line .typed-click{clip-path:none!important;animation:none!important;width:auto!important}
}
\n\n/* ===== Aug 31 direct source fix: compact static click tag ===== */\n.hero-last-line{display:inline-flex!important;align-items:baseline;gap:.055em;white-space:nowrap}\n.hero-last-line .click-static{\n  display:inline-block!important;\n  width:auto!important;\n  min-width:0!important;\n  padding:.012em .05em .065em!important;\n  margin-left:.015em;\n  font-size:.67em!important;\n  line-height:.92!important;\n  color:var(--blue)!important;\n  vertical-align:.08em;\n}\n