/* HeyHi Studios case study. HeyHi's own colors and type live inside .hh blocks; the rest follows the portfolio. */
.hh-page{--hh-pink:#FF5C93;--hh-ink:#0E2A26;--hh-soft:#FFD6E3;--hh-mint:#B7E6CF;--hh-mist:#ECEDE8;--hh-muted:#4F635D;--hh-sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
.hh-page *{box-sizing:border-box}
.hh-intro-mark{grid-column:1 / span 3;position:relative;display:grid;gap:8px;justify-items:start;width:min(220px,100%);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;color:var(--hh-ink)}
.hh-intro-mark .hh-logo{width:100%;height:auto;display:block;background:var(--hh-pink);border-radius:var(--radius);padding:18% 14%;transform-origin:20% 80%;transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.hh-intro-mark:hover .hh-logo,.hh-intro-mark.on .hh-logo{transform:rotate(-4deg) scale(1.03)}
.hh-bubble{position:absolute;right:-8px;top:-14px;z-index:1;background:#fff;color:var(--hh-ink);font:600 14px/1 var(--hh-sans);padding:9px 12px;border-radius:14px 14px 14px 4px;transform:scale(0);transform-origin:0 100%;transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.hh-intro-mark:hover .hh-bubble,.hh-intro-mark.on .hh-bubble{transform:scale(1)}
.hh-intro-mark .hint{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hh-intro-mark:focus-visible{outline:2px solid var(--hh-ink);outline-offset:6px;border-radius:var(--radius)}
@media (max-width:860px){.hh-intro-mark{grid-column:1 / -1;width:150px;margin-top:24px}}

.hh--contained{margin:clamp(80px,11vw,170px) 0}
.hh-in{background:#fff;color:var(--hh-ink);border-radius:var(--radius);padding:clamp(24px,4.5vw,72px);font-family:var(--hh-sans)}
.hh-in h2,.hh-in h3{font-family:var(--hh-sans)}
.hh-head{display:grid;grid-template-columns:1.1fr 1fr;gap:20px var(--gap);align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.hh-eye{display:flex;gap:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;color:var(--hh-muted)}
.hh-eye b{color:var(--hh-ink)}
.hh-mega{font-size:clamp(36px,5vw,76px);line-height:.98;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.hh-lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;margin:0}
.hh-small{font-size:15px;line-height:1.5;margin:6px 0 0}
.hh-muted{color:var(--hh-muted)}
.hh-sub{margin-top:clamp(40px,5vw,72px)}
.hh-sub>h3{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.01em}
.hh-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.hh-g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);margin-top:20px}
.hh-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.hh-tile{min-width:0}
.hh-well{aspect-ratio:4/3;border-radius:calc(var(--radius) * .7);display:grid;place-items:center;padding:16%}
.hh-well .hh-logo{width:100%;height:auto;display:block}
.hh-well--rise{background:#fff;box-shadow:inset 0 0 0 1px #D9DBD2;padding:10%}
.hh-rise{width:100%;height:auto;display:block;overflow:visible}
.hh-rise-l{stroke-dasharray:215;stroke-dashoffset:215;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1) .2s}
.hh-in.seen .hh-rise-l{stroke-dashoffset:0}
.hh-lbl{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-top:10px;color:var(--hh-muted)}
.hh-lbl span:first-child{color:var(--hh-ink);font-weight:600}
.hh-sw{all:unset;cursor:pointer;display:grid;gap:8px;min-width:0;align-self:start;align-content:start;grid-template-rows:auto auto}
.hh-chip{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1/1;border-radius:calc(var(--radius) * .7);padding:12px;font-weight:700;font-size:15px;transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.hh-chip[style*="background:#FFFFFF"]{box-shadow:inset 0 0 0 1px #D9DBD2}
.hh-chip small{font-weight:500;font-size:12px;opacity:.75}
.hh-sw:hover .hh-chip{transform:translateY(-4px) rotate(-1.5deg)}
.hh-sw:focus-visible .hh-chip{outline:2px solid var(--hh-ink);outline-offset:3px}
.hh-sw.copied small::before{content:"Copied ";}
.hh-sw.copied small{font-size:0}.hh-sw.copied small::before{font-size:12px}
.hh-meta{font-size:13px;line-height:1.4;color:var(--hh-muted)}
.hh-meta code{display:block;font:600 13px/1.4 ui-monospace,Menlo,monospace;color:var(--hh-ink)}
.hh-face{background:var(--hh-mist);border-radius:calc(var(--radius) * .7);padding:clamp(20px,3vw,40px);min-width:0;display:flex;flex-direction:column}
.hh-face--pink{background:var(--hh-pink);color:var(--hh-ink)}
.hh-face--pink .hh-eye,.hh-face--pink .hh-eye b{color:var(--hh-ink)}
.hh-face h3{font-size:20px;font-weight:700;margin:auto 0 0;padding-top:24px}
.hh-words{display:block;width:100%;height:auto;overflow:visible}
.hh-face--pink .hh-words{max-width:460px}
.hh-ring{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1) .4s}
.hh-in.seen .hh-ring{stroke-dashoffset:0}
.hh-aa{font-family:var(--hh-sans);font-weight:600;font-size:clamp(80px,9vw,150px);line-height:1;margin:0;letter-spacing:-.04em}
.hh-clock{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:14px;color:var(--hh-muted)}
.hh-clock .hh-words{width:110px;flex:none;color:var(--hh-ink)}
.hh-in .shot img{border-radius:calc(var(--radius) * .7)}
.hh-status{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#0E2A26;border-radius:999px;padding:8px 14px 8px 12px;font-size:13px}
.hh-status i{width:9px;height:9px;border-radius:50%;background:#FF5C93;animation:hh-blink 1.6s ease-in-out infinite}
@keyframes hh-blink{50%{opacity:.25}}
.hh-gap{margin-top:clamp(16px,2.2vw,32px)}
.hh-voices{background:var(--hh-ink);color:#fff;border-radius:var(--radius);padding:clamp(20px,3.5vw,56px);font-family:var(--hh-sans)}
.hh-vhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(18px,2.4vw,32px)}
.hh-vhead h3{font-family:var(--hh-sans);font-size:clamp(22px,2.4vw,34px);font-weight:700;letter-spacing:-.02em}
.hh-vtabs{display:flex;gap:8px;flex-wrap:wrap}
.hh-vt{font:600 15px/1 var(--hh-sans);border:0;border-radius:10px;padding:12px 18px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s}
.hh-vt[data-v=classic]{font-family:Georgia,"Times New Roman",serif;font-weight:700}
.hh-vt[data-v=loud]{font-family:Impact,"Arial Narrow Bold","Arial Black",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
.hh-vt[aria-selected=true]{background:var(--hh-pink);color:var(--hh-ink)}
.hh-vt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hh-vstage{max-width:760px;margin:0 auto}
.hh-vimg{display:block}
.hh-vimg[hidden]{display:none!important}
.hh-vimg img{width:100%;height:auto!important;border-radius:calc(var(--radius) * .6);animation:hh-in .5s cubic-bezier(.2,1.4,.4,1)}
.hh-vimg figcaption{color:rgba(255,255,255,.72);text-align:center}
@keyframes hh-in{from{opacity:0;transform:translateY(14px) rotate(-1.5deg)}}
.hh-credit{color:var(--mute);font-size:12px;margin:-60px 0 clamp(80px,10vw,150px)}
@media (max-width:1000px){.hh-g6{grid-template-columns:repeat(3,minmax(0,1fr))}.hh-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hh-head,.hh-g2{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.hh-page *{animation:none!important;transition:none!important}.hh-rise-l,.hh-ring{stroke-dashoffset:0}}

/* Curve + Corner: square corners, the studio's grey for small labels */
.hh-page{--radius:0px;--mute:var(--ink-2);--gap:clamp(16px,2.4vw,40px)}
.cs-head .hh-intro-mark{grid-column:auto;align-self:end;width:clamp(150px,15vw,220px)}
.hh-intro-mark .hh-logo{border-radius:0}
.hh-bubble{border-radius:14px 14px 14px 4px}
.hh--cc{padding-block:clamp(40px,6vw,88px)}
.hh-photo{margin:clamp(40px,5vw,72px) 0 0}
.hh-photo img{width:100%;height:auto}
.hh-voices{margin-top:clamp(14px,2vw,28px)}
.hh-vimg{margin:0}
.hh-vimg figcaption{margin-top:12px;font-size:14px}
.cs-stop .hh-status{margin-top:4px}
.hh-credit{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:-24px 0 48px}
@media (max-width:860px){.cs-head .hh-intro-mark{width:150px;margin-top:8px}}
.hh-voices h3{color:#fff}
.hh-in .hh-photo{margin:clamp(40px,5vw,72px) 0 0}
.hh-page .hh-credit{margin:0 0 48px}

/* Safari stretches a square chip to fill a tall row, which makes it wider too. Keep every chip its column width. */
.hh-chip{width:100%;align-self:start;justify-self:stretch}