/* ==========================================================================
   hi babe — production stylesheet
   Design tokens + base + component/animation rules, ported 1:1 from the
   Claude Design export (see /project for the original handoff bundle).
   Fonts are loaded via <link> in <head> (faster than @import); everything
   else lives here as a single stylesheet to keep requests to a minimum.
   ========================================================================== */

/* --- tokens: base neutrals + brand accent (Tailwind zinc + single emerald accent) --- */
:root{
--zinc-50:#fafafa;--zinc-100:#f4f4f5;--zinc-200:#e4e4e7;--zinc-300:#d4d4d8;--zinc-400:#a1a1aa;--zinc-500:#71717a;--zinc-600:#52525b;--zinc-700:#3f3f46;--zinc-800:#27272a;--zinc-900:#18181b;--zinc-950:#09090b;
--white:#ffffff;--black:#000000;
--emerald-50:#ecfdf5;--emerald-100:#d1fae5;--emerald-500:#10b981;--emerald-600:#059669;--emerald-800:#065f46;--emerald-900:#064e3b;
--red-50:#fef2f2;--red-500:#ef4444;--red-600:#dc2626;

--text-body:var(--zinc-900);
--text-muted:var(--zinc-600);
--text-meta:var(--zinc-400);
--text-faint:var(--zinc-300);
--text-inverse:var(--white);
--text-accent:var(--emerald-600);
--text-danger:var(--red-500);

--surface-page:var(--white);
--surface-alt:var(--zinc-50);
--surface-card:var(--white);
--surface-input:var(--zinc-50);
--surface-chip:var(--zinc-50);
--surface-dark:var(--zinc-900);
--surface-accent-soft:var(--emerald-50);
--surface-scrim:rgba(0,0,0,.95);
--surface-glass:rgba(255,255,255,.8);
--surface-glass-soft:rgba(255,255,255,.5);

--border-hairline:var(--zinc-100);
--border-field:var(--zinc-200);
--border-strong:var(--zinc-900);
--border-accent-soft:var(--emerald-100);

--action-fill:var(--zinc-900);
--action-fill-hover:var(--emerald-600);
--action-fill-inverse:var(--white);
--selection-bg:var(--emerald-100);
--selection-fg:var(--emerald-900);
--icon-accent:var(--emerald-500);

--rainbow-0:hsl(0,70%,50%);--rainbow-1:hsl(60,70%,50%);--rainbow-2:hsl(120,70%,50%);--rainbow-3:hsl(180,70%,50%);--rainbow-4:hsl(240,70%,50%);--rainbow-5:hsl(300,70%,50%);--rainbow-6:hsl(360,70%,50%);

/* --- fonts --- */
--font-serif:"Playfair Display",serif;
--font-sans:"Lexend Deca",ui-sans-serif,system-ui,sans-serif;
--font-nav:"Quicksand",sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

--weight-body:225;
--weight-nav:445;
--weight-semibold:600;
--weight-bold:700;
--weight-black:900;

--display-hero:8vw;
--display-hero-mobile:12vw;
--display-1:6rem;
--display-2:4.5rem;
--display-3:3rem;
--display-4:2.25rem;
--display-5:1.5rem;
--display-6:1.25rem;

--text-lg:1.125rem;
--text-base:1rem;
--text-sm:.875rem;
--text-xs:.75rem;
--text-2xs:.625rem;

--leading-display:.9;
--leading-tight:1.25;
--leading-relaxed:1.625;

--tracking-tighter:-.05em;
--tracking-tight:-.025em;
--tracking-widest:.1em;
--tracking-eyebrow:.2em;
--tracking-hero-eyebrow:.3em;

/* --- spacing / layout --- */
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
--gutter:var(--space-6);
--section-y:var(--space-32);
--section-y-tight:var(--space-24);
--container:80rem;
--container-prose:56rem;
--container-narrow:48rem;
--navbar-y:var(--space-8);
--navbar-y-scrolled:var(--space-4);

/* --- radii --- */
--radius-none:0;
--radius-lg:.5rem;
--radius-xl:.75rem;
--radius-2xl:1rem;
--radius-3xl:1.5rem;
--radius-full:9999px;

/* --- shadows / blur / motion / overlays --- */
--shadow-sm:0 1px 2px 0 rgb(0 0 0/.05);
--shadow-md:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
--shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
--shadow-2xl:0 25px 50px -12px rgb(0 0 0/.25);
--shadow-accent:0 10px 15px -3px rgb(16 185 129/.2);
--blur-nav:12px;
--blur-soft:4px;
--dur-fast:200ms;
--dur-base:300ms;
--dur-slow:600ms;
--dur-entrance:800ms;
--dur-image:700ms;
--dur-rainbow:4000ms;
--ease-out:cubic-bezier(0,0,.2,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
--overlay-hover:rgba(0,0,0,.2);
--scrim-top:linear-gradient(to bottom,rgba(255,255,255,.2),transparent,#fff);
--scrim-video:linear-gradient(to bottom,rgba(0,0,0,.8),transparent,rgba(0,0,0,.8));
--fade-left:linear-gradient(to right,#fff,transparent);
--fade-right:linear-gradient(to left,#fff,transparent);
--opacity-hero-image:.4;
--opacity-video:.6;
--opacity-logo:.85;
--opacity-hover:.7;
}

/* --- base --- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--surface-alt)}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
a{color:inherit;text-decoration:none;transition:color var(--dur-base) var(--ease-in-out)}
a:hover{color:var(--text-accent)}
button{font:inherit}
img,video{max-width:100%}
#heroImg{max-width:none}

@keyframes hb-rainbow{0%{color:var(--rainbow-0)}16.6%{color:var(--rainbow-1)}33.3%{color:var(--rainbow-2)}50%{color:var(--rainbow-3)}66.6%{color:var(--rainbow-4)}83.3%{color:var(--rainbow-5)}100%{color:var(--rainbow-6)}}
.hb-rainbow{font-style:italic;animation:hb-rainbow var(--dur-rainbow) linear infinite}
.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}
.scrollbar-none::-webkit-scrollbar{display:none}

/* ==========================================================================
   Component + animation rules (ported verbatim from the design export)
   ========================================================================== */
@keyframes hb-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes hb-rainbow-bg{0%{background-color:var(--rainbow-0)}16.6%{background-color:var(--rainbow-1)}33.3%{background-color:var(--rainbow-2)}50%{background-color:var(--rainbow-3)}66.6%{background-color:var(--rainbow-4)}83.3%{background-color:var(--rainbow-5)}100%{background-color:var(--rainbow-6)}}
.hb-mark{display:inline-block;vertical-align:-.06em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.hb-mark-hi{-webkit-mask-image:url("assets/wordmark-hi.png");mask-image:url("assets/wordmark-hi.png");width:.8365em;height:1em}
.hb-mark-babe{-webkit-mask-image:url("assets/wordmark-babe.png");mask-image:url("assets/wordmark-babe.png");width:2.5894em;height:1em}
.hb-in .hb-w.hb-mark-babe,.hb-mark-babe{animation:hb-rainbow-bg 4000ms linear infinite}
.hb-in .hb-w.hb-mark-babe{animation:hb-rise .82s cubic-bezier(0,0,.2,1) both,hb-rainbow-bg 4000ms linear infinite}
@keyframes hb-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.hb-typewrap{position:relative;display:inline-block;text-align:left;padding-left:.14em;margin-left:-.14em}
.hb-typeghost{visibility:hidden}
.hb-typed{position:absolute;left:.14em;top:0;white-space:nowrap}
.hb-caret{display:inline-block;margin-left:.04em;font-style:normal;color:var(--text-muted);animation:hb-caret 1s steps(1,end) infinite}
@keyframes hb-drift{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.hb-sheet{position:relative;border-radius:var(--radius-3xl);background:var(--surface-card);border:1px solid var(--border-hairline);box-sizing:border-box;will-change:transform,box-shadow;transform-origin:center top;box-shadow:0 -12px 40px -20px rgba(24,24,27,.06)}
.hb-w{display:inline-block;opacity:0;transform:translateY(24px)}
.hb-in .hb-w{animation:hb-rise .82s cubic-bezier(0,0,.2,1) both}
.hb-card{opacity:0;transform:scale(.96)}
.hb-in.hb-card{animation:hb-rise .8s cubic-bezier(.22,1,.36,1) both;transform:none;opacity:1}
.hb-in .hb-w.hb-rainbow{animation:hb-rise .82s cubic-bezier(0,0,.2,1) both,hb-rainbow 4000ms linear infinite}
.hb-barnav a{white-space:nowrap}
.hb-marquee{animation:hb-drift 68s linear infinite}
.hb-logo{height:2.9rem;width:auto;flex:none;opacity:.4;transition:opacity 320ms cubic-bezier(0,0,.2,1),scale 320ms cubic-bezier(0,0,.2,1)}
.hb-logo:hover{opacity:1;scale:1.06}
@media (max-width:720px){.hb-logo{height:2.2rem}.hb-marquee{animation-duration:26s!important;gap:var(--space-6)!important;padding-right:var(--space-6)!important}.hb-marquee-mask{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)!important;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)!important}}
.hb-nav{position:relative;display:inline-block;transform-origin:left bottom;transition:color 250ms cubic-bezier(0,0,.2,1),transform 250ms cubic-bezier(0,0,.2,1)}
.hb-nav:hover{color:var(--text-body);transform:translateY(-1px) skewX(-11deg);animation:hb-rainbow 1600ms linear infinite}
.hb-nav::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--rainbow-0),var(--rainbow-1),var(--rainbow-2),var(--rainbow-3),var(--rainbow-4),var(--rainbow-5));scale:0 1;transform-origin:left center;transition:scale 300ms cubic-bezier(0,0,.2,1)}
.hb-nav:hover::after{scale:1 1}
.hb-cta{transition:gap 300ms cubic-bezier(0,0,.2,1),background 300ms,scale 150ms}
.hb-cta:hover{gap:18px}
.hb-cta:active{scale:.96}
.hb-cta:hover .hb-cta-dot{transform:scale(1.1)}
.hb-cta-dot{transition:transform 300ms cubic-bezier(0,0,.2,1)}
.hb-more{transition:gap 250ms cubic-bezier(0,0,.2,1),color 250ms}
.hb-more:hover{gap:12px;color:var(--text-accent)}
.hb-noise{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxmaWx0ZXIgaWQ9J24nPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjg1JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
.hb-heromark{will-change:transform;transform-origin:top left}
.hb-chrome{will-change:width}
@media (max-width:1024px){.hb-hero-grid{grid-template-columns:1fr!important}.hb-grid4{grid-template-columns:repeat(2,1fr)!important}}
@media (max-height:700px){.hb-heroframe{min-height:0!important}}
@media (max-width:720px){.hb-grid4{grid-template-columns:1fr!important}.hb-barnav{gap:var(--space-4)!important;padding:var(--space-3) var(--space-5)!important}.hb-barnav a{font-size:var(--text-xs)!important}.hb-hero-grid{padding:var(--space-6) var(--space-5) var(--space-6)!important}.hb-copy-hero{font-size:.825rem!important;text-wrap:balance!important}.hb-copy-card{font-size:.8rem!important;text-wrap:balance!important}}
@keyframes hb-heart-rise{0%{opacity:0;transform:translate(5%,30%) scale(.5)}16%{opacity:1}52%{transform:translate(1%,4%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-3%,-22%) scale(1.05)}}
@keyframes hb-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}12%{opacity:1;transform:scale(1.15) rotate(8deg)}26%{opacity:.9;transform:scale(1) rotate(0deg)}44%{opacity:0;transform:scale(.5) rotate(-6deg)}}
@keyframes hb-cursor-click{0%,44%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,4%) scale(.72)}56%{transform:translate(-1%,-1%) scale(1.16)}62%{transform:translate(0,0) scale(.96)}68%,100%{transform:translate(0,0) scale(1)}}
@keyframes hb-spark-burst{0%,52%{opacity:0;transform:translate(0,0) scale(.1) rotate(-30deg)}58%{opacity:1;transform:translate(calc(var(--bx) * .55),calc(var(--by) * .55)) scale(1.5) rotate(10deg)}70%{opacity:1;transform:translate(var(--bx),var(--by)) scale(1) rotate(0deg)}82%,100%{opacity:0;transform:translate(calc(var(--bx) * 1.35),calc(var(--by) * 1.35)) scale(.35) rotate(20deg)}}
@keyframes hb-book-open{0%,100%{transform:perspective(700px) rotateX(22deg) scaleX(.8) scaleY(.94)}50%{transform:perspective(700px) rotateX(-4deg) scaleX(1.04) scaleY(1.01)}}
.hb-lay{position:relative;display:block}
@keyframes hb-gbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hb-bob-wrap{animation:hb-gbob 4.8s ease-in-out infinite;display:flex;align-items:center;justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.hb-bob-wrap{animation:none}}
.hb-lay>img.hb-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hb-lay .hb-sp{position:absolute;object-fit:contain}
@media (prefers-reduced-motion:reduce){.hb-lay .hb-sp,.hb-page,.hb-booksway{animation:none!important;opacity:1!important;transform:none!important}}
.hb-anim svg{overflow:visible}
@keyframes hb-fun-phone{0%{transform:translate(-26%,118%) rotate(-6deg);opacity:0}18%{opacity:1}34%,44%{transform:translate(-26%,0) rotate(-3deg);opacity:1}100%{transform:translate(0,0) rotate(-2deg);opacity:1}}
@keyframes hb-fun-text{0%,44%{transform:translateX(101%)}100%{transform:translateX(0)}}
.hb-funphone{opacity:0;transform:translate(-26%,118%)}
.hb-funtext{transform:translateX(101%)}
.hb-in .hb-funphone{animation:hb-fun-phone 2.3s cubic-bezier(.22,1,.36,1) both}
.hb-in .hb-funtext{animation:hb-fun-text 2.3s cubic-bezier(.22,1,.36,1) both}
@media (max-width:900px){.hb-fun-grid{grid-template-columns:1fr!important;justify-items:center!important}.hb-fun-copy{clip-path:none!important;text-align:center!important}.hb-funphone{justify-self:center!important}.hb-funtext{transform:none!important}.hb-in .hb-funtext{animation:hb-rise .82s cubic-bezier(0,0,.2,1) both!important}.hb-funphone{transform:translateY(26px)!important}.hb-in .hb-funphone{animation:hb-rise .82s cubic-bezier(0,0,.2,1) .12s both!important}}
@media (prefers-reduced-motion:reduce){.hb-funphone,.hb-funtext{opacity:1!important;transform:none!important;animation:none!important}}
.hb-anim [class^="hb-"]{transform-box:fill-box;transform-origin:center}
@media (max-width:720px){.hb-biogrid{grid-template-columns:1fr!important}.hb-formgrid{grid-template-columns:1fr!important}}
@keyframes hb-modal-fade{from{opacity:0}to{opacity:1}}
@keyframes hb-modal-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hb-i-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(-1.5deg)}}
@keyframes hb-i-sway{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-4px)}}
@keyframes hb-i-breathe{0%,100%{transform:perspective(700px) rotateY(-7deg) scale(1)}50%{transform:perspective(700px) rotateY(7deg) scale(1.025)}}
@keyframes hb-i-tap{0%,72%,100%{transform:scale(1) translate(0,0)}78%{transform:scale(.975) translate(1px,1px)}86%{transform:scale(1.008) translate(0,0)}}
.hb-i-float{animation:hb-i-float 5.4s ease-in-out infinite;transform-origin:50% 60%}
.hb-i-sway{animation:hb-i-sway 6.2s ease-in-out infinite;transform-origin:50% 100%}
.hb-i-breathe{animation:hb-i-breathe 7s ease-in-out infinite;transform-origin:50% 50%}
.hb-i-tap{animation:hb-i-tap 4.6s cubic-bezier(.3,0,.2,1) infinite;transform-origin:78% 82%}
@media (prefers-reduced-motion:reduce){.hb-i-float,.hb-i-sway,.hb-i-breathe,.hb-i-tap{animation:none}}
@media (prefers-reduced-motion:reduce){.hb-anim *{animation:none!important}.hb-sheet{transform:none!important;box-shadow:0 10px 30px -18px rgba(24,24,27,.14)!important}.hb-w,.hb-card{opacity:1!important;transform:none!important;animation:none!important}.hb-marquee,.hb-rainbow{animation:none!important}.hb-nav:hover{transform:none;animation:none}.hb-nav::after{transition:none}}

/* --- inquiry modal + form (structure kept, states driven by classes instead of React state) --- */
#inquiryModal{display:none;position:fixed;inset:0;z-index:90;place-items:center;padding:var(--space-6);background:rgba(24,24,27,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#inquiryModal.is-open{display:grid;animation:hb-modal-fade 260ms cubic-bezier(0,0,.2,1) both}
#inquiryModal .hb-dialog{animation:hb-modal-rise 320ms cubic-bezier(0,0,.2,1) both}
#inquirySuccess{display:none}
#inquiryModal.is-sent #inquiryForm{display:none}
#inquiryModal.is-sent #inquirySuccess{display:flex}
#inquiryError{display:none}
#inquiryModal.has-error #inquiryError{display:block}
.hb-budget{display:inline-flex;align-items:center;padding:12px 22px;border:1px solid transparent;border-radius:999px;background:var(--surface-alt);color:var(--text-body);font-family:var(--font-serif);font-size:1.0625rem;cursor:pointer;transition:background 300ms,color 300ms,border-color 300ms}
.hb-budget.is-on{border-color:var(--text-body);background:var(--text-body);color:var(--text-inverse)}
#inquiryClose:hover{background:#e4e4e7}
.hb-field-input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid #e4e4e7;background:transparent;padding:0 0 12px;font-family:var(--font-serif);font-size:1.25rem;color:var(--text-body);outline:none;transition:border-color 300ms}
.hb-field-input:focus{border-bottom-color:var(--text-body)}
.hb-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:22px;border:0;border-radius:var(--radius-full);background:var(--action-fill);color:var(--text-inverse);font-family:var(--font-sans);font-weight:500;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background 300ms,scale 150ms}
.hb-submit:hover{background:#059669}
.hb-submit:active{scale:.99}
.hb-submit:disabled{opacity:.6;cursor:default}
.hb-success-btn{margin-top:var(--space-2);padding:14px 30px;border:0;border-radius:var(--radius-full);background:var(--action-fill);color:var(--text-inverse);font-family:var(--font-nav);font-weight:445;font-size:var(--text-base);cursor:pointer;transition:background 300ms}
.hb-success-btn:hover{background:#059669}