/* === CARNATION TECH BRAND SYSTEM — shared by index.html + services.html ===
   Only rules common to BOTH pages live here. Page-specific CSS (hero variants,
   reveal-on-scroll, triage console, pains/ownership/process/quiz/commitments,
   pricing/matrix/tiers/add-ons/onboarding, final CTA) stays inline in each page.
   Load order: this file is linked in <head> BEFORE each page's inline <style>,
   so page rules can override where intended (e.g. body overflow-x). */

/* === brand tokens === */
:root{
  --ct-pine:#0F2E3D; --ct-electric:#C8E94A; --ct-mist:#F4F5F7; --ct-ink:#1A1A1A;
  --ct-pine-50:#E8EEF1; --ct-pine-100:#C5D5DC; --ct-pine-200:#94B0BB; --ct-pine-400:#5C8090; --ct-pine-600:#2F5667; --ct-pine-700:#0F2E3D; --ct-pine-800:#0A2030; --ct-pine-900:#051522;
  --ct-electric-50:#F7FBE3; --ct-electric-100:#EDF5BA; --ct-electric-400:#C8E94A; --ct-electric-600:#9CC123; --ct-electric-900:#173404;
  --ct-neutral-50:#FAFAF8; --ct-neutral-100:#F4F5F7; --ct-neutral-200:#E5E6E9; --ct-neutral-400:#B8B9BE; --ct-neutral-600:#6B6D74; --ct-neutral-900:#1A1A1A;
  --ct-success:#1D9E75; --ct-warning:#E59B1C; --ct-danger:#D14343; --ct-info:#3A78D4;
}

/* === base / reset / typography ===
   body's overflow-x differs per page (index: hidden, services: clip) and is set
   inline in each page; everything else here is identical across both. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Sora',sans-serif;font-size:15px;line-height:1.65;color:var(--ct-ink);background:var(--ct-neutral-50)}
.mono{font-family:'JetBrains Mono',monospace}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--ct-electric-600);outline-offset:2px}
::selection{background:var(--ct-electric);color:var(--ct-pine-900)}

/* === buttons === */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-size:15px;font-weight:500;padding:15px 30px;border-radius:10px;text-decoration:none;cursor:pointer;border:none;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-electric{background:var(--ct-electric);color:var(--ct-pine-900);box-shadow:0 0 0 0 rgba(200,233,74,0)}
.btn-electric:hover{background:var(--ct-electric-600);box-shadow:0 10px 30px -8px rgba(200,233,74,.55)}
.btn-ghost{background:transparent;color:var(--ct-mist);border:1px solid var(--ct-pine-400)}
.btn-ghost:hover{border-color:var(--ct-electric);color:var(--ct-electric)}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(4px)}

/* === nav === */
nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(250,250,248,.94);backdrop-filter:blur(12px);border-color:var(--ct-neutral-200)}
nav.on-dark:not(.scrolled){color:var(--ct-mist)}
.nav-inner{display:flex;align-items:center;gap:32px;height:72px}
.logo{font-weight:700;font-size:19px;text-decoration:none;letter-spacing:-.02em}
.logo .ai{color:var(--ct-electric-600);font-size:13px;font-weight:500}
nav.on-dark:not(.scrolled) .logo .ai{color:var(--ct-electric)}
/* nav logo icon — swaps with the nav dark/scrolled state (mirrors the burger colour swap) */
.ct-logo-icon{ height:1.6em; width:auto; vertical-align:middle; margin-right:.5em; display:inline-block; }
.ct-logo-icon--dark{ display:none; }
#nav.scrolled .ct-logo-icon--light{ display:none; }
#nav.scrolled .ct-logo-icon--dark{ display:inline-block; }
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto;list-style:none}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;opacity:.92}
.nav-links a:hover{opacity:1;color:var(--ct-electric-600)}
nav.on-dark:not(.scrolled) .nav-links a:hover{color:var(--ct-electric)}
.nav-phone{font-family:'JetBrains Mono',monospace;font-size:13px}
.nav-cta{background:var(--ct-electric);color:var(--ct-pine-900)!important;padding:11px 20px;border-radius:9px;font-weight:500;white-space:nowrap}
.nav-cta .cta-short{display:none}
.nav-cta:hover{background:var(--ct-electric-600);color:var(--ct-pine-900)!important}

/* === shared primitives === */
.gridlines{position:absolute;inset:0;background-image:linear-gradient(rgba(196,213,220,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(196,213,220,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,transparent,black 18%,black 80%,transparent)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,233,74,.5)}50%{box-shadow:0 0 0 8px rgba(200,233,74,0)}}

/* === tools ticker / marquee === */
.tools{background:var(--ct-pine-900);border-top:1px solid rgba(196,213,220,.1);padding:18px 0;overflow:hidden;position:relative;z-index:2}
.marquee{display:flex;gap:56px;white-space:nowrap;animation:scrollx 30s linear infinite;width:max-content}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ct-pine-400);letter-spacing:.08em}
.marquee b{color:var(--ct-pine-100);font-weight:500}

/* === section heads === */
section{padding:104px 0}
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head .eyebrow{color:var(--ct-electric-600)}
.sec-head h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.025em;line-height:1.08;margin-top:14px;color:var(--ct-pine);font-weight:700}
.sec-head p{margin-top:16px;color:var(--ct-neutral-600);font-size:16px}

/* === Four Jobs service cards (.svc) — identical on both pages.
   .svc ul (margin differs) and .svc a (index-only) stay inline per page. */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--ct-neutral-200);border-radius:16px;padding:34px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .25s,transform .2s}
.svc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ct-electric);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.svc:hover{border-color:var(--ct-pine-100);box-shadow:0 22px 50px -18px rgba(15,46,61,.2);transform:translateY(-4px)}
.svc:hover::before{transform:scaleX(1)}
.svc .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ct-electric-600);margin-bottom:14px}
.svc h3{font-size:23px;font-weight:600;color:var(--ct-pine);margin-bottom:10px;letter-spacing:-.015em}
.svc>p{color:var(--ct-neutral-600);font-size:14px;margin-bottom:20px}
.svc li{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ct-pine);background:var(--ct-pine-50);padding:6px 12px;border-radius:999px;transition:background .15s,color .15s}
.svc:hover li{background:var(--ct-electric-50)}

/* === footer ===
   .foot-grid a's shared base is here; services adds overflow-wrap:anywhere inline. */
footer{background:var(--ct-pine-900);color:var(--ct-pine-100);padding:64px 0 36px;border-top:1px solid rgba(196,213,220,.1)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot-grid h4{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ct-pine-400);margin-bottom:16px}
.foot-grid a{display:block;font-size:14px;color:var(--ct-pine-100);text-decoration:none;margin-bottom:10px;transition:color .15s}
.foot-grid a:hover{color:var(--ct-electric)}
.foot-logo{font-weight:700;font-size:19px;color:var(--ct-mist)}
.foot-logo .ai{color:var(--ct-electric);font-size:13px;font-weight:500}
.foot-tag{font-size:13px;margin-top:14px;max-width:300px;color:var(--ct-pine-400)}
.foot-bottom{border-top:1px solid rgba(196,213,220,.12);padding-top:26px;display:flex;justify-content:space-between;font-size:12px;color:var(--ct-pine-400);flex-wrap:wrap;gap:12px}
.foot-bottom .mono{font-size:11px}

/* === shared responsive overrides (shared selectors only) === */
@media(max-width:880px){
  .nav-links{display:none}
  .svc-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  section{padding:72px 0}
  .nav-inner{gap:14px}
  .logo{font-size:17px}
  .nav-cta{padding:10px 16px;font-size:14px}
  .nav-cta .cta-long{display:none}
  .nav-cta .cta-short{display:inline}
}

/* === mobile hamburger + full-screen overlay menu === */
.ct-burger{ display:none; }
@media (max-width:880px){
  .ct-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; background:transparent; border:0; cursor:pointer; margin-left:auto; }
  .ct-burger span{ display:block; height:2px; width:100%; background:var(--ct-electric); border-radius:2px; }
}
/* scrolled nav: burger bars flip to pine to match the darkened logo on the frosted bar */
nav.scrolled .ct-burger span{ background:var(--ct-pine); }
.ct-mobile-menu{ position:fixed; inset:0; z-index:1000; background:linear-gradient(180deg,var(--ct-pine-900) 0%,var(--ct-pine) 55%,var(--ct-pine) 100%); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease, visibility .25s; }
.ct-mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; }
/* textured pine to match the hero: gridlines + corner glow as a faint layer behind the content */
.ct-mobile-menu::after{ content:''; position:absolute; width:720px; height:720px; border-radius:50%; right:-260px; top:-200px; background:radial-gradient(circle,rgba(200,233,74,.13),transparent 62%); pointer-events:none; z-index:-1; }
.ct-mobile-menu .gridlines{ z-index:-1; }
.ct-mobile-menu__top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:20px 24px; }
.ct-mobile-menu__close{ width:44px; height:44px; border:0; background:transparent; cursor:pointer; color:#fff; font-size:28px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.ct-mobile-menu__links{ display:flex; flex-direction:column; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.ct-mobile-menu__links a{ font-family:'Sora',sans-serif; font-size:24px; font-weight:600; color:#fff; text-decoration:none; }
.ct-mobile-menu__links a:hover, .ct-mobile-menu__links a:focus{ color:var(--ct-electric); }
.ct-mobile-menu__phone{ font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--ct-pine-400); margin-top:18px; text-decoration:none; }
.ct-mobile-menu__cta{ margin-top:16px; display:inline-block; font-family:'Sora',sans-serif; font-weight:600; font-size:16px; color:var(--ct-electric); text-decoration:none; border:2px solid var(--ct-electric); border-radius:8px; padding:14px 28px; }
.ct-mobile-menu__cta:hover{ background:var(--ct-electric); color:var(--ct-pine); }
/* reused header logo: keep it legible on the pine overlay */
.ct-mobile-menu__top .logo{ color:#fff; }
.ct-mobile-menu__top .logo .ai{ color:var(--ct-electric); }
body.ct-menu-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .ct-mobile-menu{ transition:none; } }

/* Contact page — on phones the Bookings embed is swapped for a direct-link CTA
   (the booking flow grows as users progress; an embedded frame risks trapping
   the Book button off-screen on small viewports) */
.ct-book-mobile{ display:none; }
@media (max-width:640px){
  /* !important: must beat the iframe's inline display:block */
  .ct-embed-desktop{ display:none !important; }
  .ct-book-mobile{ display:block; text-align:center; padding:8px 0 4px; }
  .ct-book-mobile .btn{ justify-content:center; }
  .ct-book-mobile__sub{ margin-top:14px; font-size:13px; color:var(--ct-pine-100); }
}
