/* Corporate skin shared by index, booking and workflow pages. Loaded last so it overrides each page's own tokens.
   Palette: cool paper, deep navy, champagne gold. Type: Newsreader (headings) + Hanken Grotesk (body). */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');
:root{--bg:#f2f4f8;--card:#fff;--ink:#0a1322;--green:#0b1f3a;--green2:#0f2a4f;--orange:#8a5f17;--mute:#46526a;--line:#dbe2ec;--tint:#edf1f7;--chip:#e7edf6;--field:#fbfcfe;
--sage:#dfe7f1;--pink:#ece4d4;--blue:#cfdaeb;--yellow:#e0bb72}
:root[data-theme=dark]{--bg:#070d18;--card:#0f1828;--ink:#eef2f8;--green:#e6edf8;--green2:#3b6aa8;--orange:#e0bb72;--mute:#a7b3c7;--line:#1f2d45;--tint:#14203a;--chip:#1a2a47}
:root[data-theme=dark] .btn.p{background:#d9b36a;border-color:#d9b36a;color:#0a1a33}
:root[data-theme=dark] .feature{background:#10203d}
body{font-family:'Hanken Grotesk',system-ui,sans-serif}
h1,h2,.c h3,.step h3,.proj h3,.step em,.stat b,.stage b{font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.02em}
.eyebrow{color:var(--orange)!important}
:root[data-theme=dark] .t-sage,:root[data-theme=dark] .t-pink,:root[data-theme=dark] .t-blue,:root[data-theme=dark] .t-yellow{color:#0a1322}
.t-pink{color:#3b2a10!important}
/* shape: restrained corners, hairline borders */
.btn{border-radius:10px}.btn.p{background:#0f2a4f;border-color:#0f2a4f;color:#fff}.btn.p:hover{background:#17396a}
.badge{border-radius:6px}.pills span{border-radius:8px}.logo i{border-radius:8px;background:#0b1f3a}
.panel,.tile,.stat,.note,.ib,.ic,.cat{border-radius:12px}
.c,.step{border-radius:14px;box-shadow:0 1px 2px rgba(10,19,34,.05)}
.proj{border-radius:18px}.feature,.cta{border-radius:24px}
.c h3,.step h3{font-size:22px;font-weight:600}
h2{font-size:clamp(30px,4.4vw,46px);font-weight:500;line-height:1.1}
.step em{color:var(--orange);font-size:40px}
/* hero: navy panel with a faint grid */
header.hero{background:linear-gradient(135deg,#091a33 0%,#0f2748 55%,#16335e 100%);border-radius:22px;position:relative;overflow:hidden;box-shadow:0 30px 70px -40px rgba(9,26,51,.8)}
header.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent,#000 70%)}
header.hero>*{position:relative}
header.hero h1{font-size:clamp(42px,6.6vw,72px);line-height:1.02;font-weight:500;color:#fff;letter-spacing:-.025em}
header.hero h1 span{color:#e0bb72}
header.hero .lead{color:#e8eef8}
header.hero .sub{color:#b7c4d9}header.hero .sub b{color:#fff}
header.hero .badge{background:rgba(224,187,114,.12);color:#e6c47e;border:1px solid rgba(224,187,114,.35)}
header.hero .badge b{background:#e0bb72}
header.hero .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
header.hero .btn:hover{background:rgba(255,255,255,.08)}
header.hero .btn.p{background:#d9b36a;border-color:#d9b36a;color:#0a1a33}
header.hero .btn.p:hover{background:#e6c47e}
/* dark feature band */
.feature .btn.p{background:#d9b36a;border-color:#d9b36a;color:#0a1a33}
.feature h2{color:#fff}.feature .eyebrow{color:#e0bb72!important}.cat b{color:#e0bb72}
.cta{border:1px solid var(--line)}
footer{border-top:1px solid var(--line);margin-top:70px}
/* booking pages */
.card{border-radius:18px}.go{border-radius:10px;background:#0f2a4f}.go:hover{background:#17396a}
.day[aria-pressed=true]{background:#0f2a4f;border-color:#0f2a4f}.slot[aria-pressed=true]{background:#8a5f17;border-color:#8a5f17}
.done .tick{background:#0f2a4f}.link{color:#0f2a4f}
/* hero service tiles: centred label, one colour each, pop-up on hover */
.g2 .tile{padding:20px 18px;align-items:center;justify-content:center;text-align:center;min-height:120px;cursor:default;color:#0a1322;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.g2 .tile strong{font-size:18px;line-height:1.2;font-weight:700}
.k-n8n{background:#f7c9bd}.k-funnel{background:#e6c77f}.k-crm{background:#bde3da}.k-ai{background:#cfd2f6}
.g2 .tile:hover,.g2 .tile:focus-within{transform:translateY(-10px) scale(1.05);box-shadow:0 18px 30px -12px rgba(10,19,34,.45)}
@media(prefers-reduced-motion:reduce){.g2 .tile{transition:none}.g2 .tile:hover{transform:none}}
/* skill pills: staggered entrance, floating idle, gold pop on hover */
.pills span{cursor:default;animation:pillIn .6s cubic-bezier(.34,1.56,.64,1) both,pillFloat 4s ease-in-out infinite;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s,border-color .25s,box-shadow .3s}
.pills span:nth-child(1){animation-delay:0s,.6s}.pills span:nth-child(2){animation-delay:.07s,1s}.pills span:nth-child(3){animation-delay:.14s,.8s}.pills span:nth-child(4){animation-delay:.21s,1.3s}.pills span:nth-child(5){animation-delay:.28s,.5s}.pills span:nth-child(6){animation-delay:.35s,1.1s}.pills span:nth-child(7){animation-delay:.42s,.9s}
.pills span:hover{animation-play-state:running,paused;transform:translateY(-8px) scale(1.1);background:#0f2a4f;color:#e6c47e;border-color:#d9b36a;box-shadow:0 14px 24px -10px rgba(10,19,34,.5)}
.pills span:active{transform:translateY(-2px) scale(.97)}
@keyframes pillIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes pillFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(prefers-reduced-motion:reduce){.pills span{animation:none;transition:none}.pills span:hover{transform:none}}