/* ============================================================
   Autometa AI, Service Pages stylesheet
   Shared across /services/core, /services/ai, /services/custom
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-alt:#F5F6F7;
  --ink:#0E1116;
  --ink-soft:#3E4855;
  --ink-mute:#8A94A2;
  --primary:#0B4A3A;
  --primary-hover:#083327;
  --accent:#D4623E;
  --accent-soft:#FAD9CA;
  --success:#2E7D5B;
  --border:#E5E9ED;
  --shadow: 0 1px 2px rgba(14,17,22,0.04), 0 6px 18px rgba(14,17,22,0.05);
  --shadow-lg: 0 2px 4px rgba(14,17,22,0.04), 0 18px 44px rgba(14,17,22,0.08);

  /* Default category palette, overridden per page via body.cat-* */
  --cat:#0B4A3A;
  --cat-soft:#CFE3DA;
  --cat-tint:#F0F6F3;
  --cat-name:"Core Services";
  --cat-num:"01";
}

/* Category theming */
body.cat-core   { --cat:#0B4A3A; --cat-soft:#CFE3DA; --cat-tint:#F0F6F3; }
body.cat-ai     { --cat:#D4623E; --cat-soft:#FAD9CA; --cat-tint:#FDF0EA; }
body.cat-custom { --cat:#1E4DA1; --cat-soft:#D3DEF2; --cat-tint:#EEF2FA; }

*{box-sizing:border-box}
html,body{margin:0;padding:0; scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em; line-height:1.05; margin:0}
h1{font-size:clamp(44px, 5.4vw, 64px)}
h2{font-size:clamp(30px, 3.6vw, 44px)}
h3{font-size:clamp(22px, 2.2vw, 28px)}
h4{font-size:22px}
h5{font-size:18px}
p{margin:0}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-hover)}

.container{max-width:1240px; margin:0 auto; padding:0 28px}
section{padding:96px 0}
@media (max-width:900px){ section{padding:64px 0} }

/* ===== Eyebrow ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  font-size:13px; font-weight:500; color:var(--ink-soft); letter-spacing:0.01em;
}
.eyebrow .d{width:6px; height:6px; border-radius:50%; background:var(--cat)}

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:50; height:72px;
  background:rgba(255,255,255,0.88); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color 200ms;
}
.nav.scrolled{border-bottom-color:var(--border); background:rgba(255,255,255,0.94)}
.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between}
.wordmark{
  font-family:'Fraunces',serif; font-weight:500; font-size:22px; letter-spacing:-0.02em;
  color:var(--ink); display:inline-flex; align-items:center; gap:8px;
}
.wordmark .dot{width:8px; height:8px; border-radius:50%; background:var(--cat)}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font-size:15px; color:var(--ink-soft); padding:10px 14px; border-radius:8px;
  display:inline-flex; align-items:center; gap:4px; font-weight:500;
  transition:color 150ms, background 150ms;
}
.nav-links a:hover{color:var(--ink); background:var(--surface-alt)}
.nav-links a.active{color:var(--ink); background:var(--cat-tint)}
.nav-cta{
  margin-left:14px; background:var(--primary); color:#fff !important;
  padding:10px 18px !important; border-radius:999px; font-weight:600; font-size:15px;
}
.nav-cta:hover{background:var(--primary-hover) !important; color:#fff !important}
@media (max-width:900px){ .nav-links a:not(.nav-cta):not(.back-link){display:none} }

.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--ink-mute) !important; font-size:14px !important}
.back-link:hover{color:var(--ink) !important; background:transparent !important}

/* ===== Mega menu =====
   Selectors are scoped under .nav-links to beat the generic `.nav-links a`
   rule above (which otherwise forces inline-flex/padding onto mega-card). */
.nav-links .services-wrap{position:relative; display:inline-flex; align-items:center}
.nav-links .services-wrap > a{
  /* The trigger link keeps the standard nav-link look */
  cursor:pointer;
}
.nav-links .mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  width:780px; max-width:min(780px, 92vw);
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:20px;
  display:grid !important; grid-template-columns:1fr 1fr 1fr; gap:10px;
  box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity 180ms, transform 180ms;
  margin-top:8px;
  z-index:60;
}
.nav-links .mega::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.nav-links .services-wrap:hover .mega,
.nav-links .services-wrap:focus-within .mega{
  opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;
}
.nav-links .mega-card{
  display:flex !important; flex-direction:row; align-items:flex-start;
  gap:12px; padding:14px !important; border-radius:12px;
  transition:background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  border:1px solid transparent;
  color:var(--ink) !important;
  background:transparent;
  text-decoration:none;
}
.nav-links .mega-card:hover{
  background:var(--surface-alt); transform:translateY(-2px) scale(1.02);
  border-color:var(--accent-soft);
  box-shadow:0 4px 14px rgba(14,17,22,0.06);
  color:var(--ink) !important;
}
.nav-links .mega-card:hover .icn{background:var(--accent-soft); color:var(--accent)}
.nav-links .mega-card .icn{
  width:40px; height:40px; border-radius:10px; background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  color:var(--primary); transition:background 180ms ease, color 180ms ease;
}
.nav-links .mega-card h5{
  font-family:'Fraunces',serif; font-weight:500; font-size:17px; margin:0 0 2px; color:var(--ink);
  letter-spacing:-0.01em; transition:color 180ms ease; line-height:1.15;
}
.nav-links .mega-card:hover h5{color:var(--primary)}
.nav-links .mega-card p{font-size:13px; color:var(--ink-soft); line-height:1.4; margin:0}
/* Current page gets a subtle highlight */
.nav-links .mega-card.current{background:var(--cat-tint); border-color:var(--cat-soft)}
.nav-links .mega-card.current h5{color:var(--cat)}
.nav-links .mega-card.current .icn{background:var(--cat-soft); color:var(--cat)}
@media (max-width:900px){
  .nav-links .mega{display:none !important}
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:16px;
  padding:14px 22px; border-radius:12px; border:1.5px solid transparent;
  cursor:pointer; transition:all 180ms ease; text-decoration:none;
}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-hover); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,74,58,0.22)}
.btn-cat{background:var(--cat); color:#fff}
.btn-cat:hover{filter:brightness(0.92); color:#fff; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{background:var(--surface); border-color:var(--ink); color:var(--ink)}

/* ===== HERO ===== */
.svc-hero{
  padding:56px 0 80px;
  position:relative; overflow:hidden;
}
.svc-hero::before{
  content:""; position:absolute; top:-30%; right:-20%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle, var(--cat-soft) 0%, transparent 65%);
  opacity:0.7; z-index:0; filter:blur(20px); pointer-events:none;
}
.svc-hero .container{position:relative; z-index:1}
.breadcrumb{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--ink-mute); margin-bottom:20px;
}
.breadcrumb a{color:var(--ink-mute); font-weight:500}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:var(--ink-mute); opacity:0.5}
.breadcrumb .current{color:var(--cat); font-weight:500}

.hero-body{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:center;
}
@media (max-width:900px){ .hero-body{grid-template-columns:1fr; gap:32px} }

.svc-tag{
  display:inline-flex; align-items:center; gap:10px; padding:6px 12px;
  background:var(--cat-tint); border-radius:999px;
  font-size:13px; font-weight:500; color:var(--cat);
}
.svc-tag .num{font-family:'Fraunces',serif; font-size:13px; letter-spacing:0}
.svc-hero h1{margin-top:18px; max-width:18ch}
.svc-hero h1 .hl{color:var(--cat); font-style:italic}
.svc-hero .sub{margin-top:22px; font-size:20px; color:var(--ink-soft); max-width:52ch}
.svc-hero-ctas{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}

/* Hero visual panel */
.hero-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:28px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.hero-panel-label{
  font-size:12px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--ink-mute); font-weight:600; margin-bottom:16px;
}
.hero-panel-rows{display:flex; flex-direction:column; gap:10px}
.hp-row{
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--surface-alt); border-radius:12px;
  font-size:14px;
}
.hp-row .ava{
  width:36px; height:36px; border-radius:10px; background:var(--cat);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:500; font-size:15px;
  flex:0 0 auto;
}
.hp-row .name{font-weight:600; color:var(--ink); font-size:14px}
.hp-row .meta{font-size:12px; color:var(--ink-mute); margin-top:2px}
.hp-row .badge{
  margin-left:auto; font-size:11px; color:var(--cat); font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em;
}

/* ===== SUB-SERVICES GRID ===== */
.subs{background:var(--surface-alt)}
.subs .intro{max-width:640px; margin-bottom:56px}
.subs-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
@media (max-width:1000px){ .subs-grid{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .subs-grid{grid-template-columns:1fr} }
.sub-card{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:28px; transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  display:flex; flex-direction:column; gap:14px;
}
.sub-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--cat-soft)}
.sub-icn{
  width:48px; height:48px; border-radius:12px; background:var(--cat-tint);
  display:flex; align-items:center; justify-content:center; color:var(--cat);
}
.sub-card h3{font-size:22px}
.sub-card p{font-size:15px; color:var(--ink-soft); line-height:1.55}
.sub-card .sub-more{
  margin-top:auto; padding-top:8px; font-weight:600; font-size:14px;
  color:var(--cat); display:inline-flex; gap:6px;
}
.sub-card:hover .sub-more{gap:10px}

/* ===== TECH STACK ===== */
.stack .intro{max-width:640px; margin-bottom:48px}
.stack-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px;
}
.stack-pill{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; display:flex; align-items:center; gap:12px;
  transition:border-color 180ms, transform 180ms;
}
.stack-pill:hover{border-color:var(--cat-soft); transform:translateY(-2px)}
.stack-logo{
  width:40px; height:40px; border-radius:10px; background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:500; color:var(--cat); font-size:18px;
  flex:0 0 auto;
}
.stack-info .name{font-weight:600; font-size:14px; color:var(--ink)}
.stack-info .role{font-size:12px; color:var(--ink-mute)}

/* ===== PROCESS ===== */
.process{background:var(--cat); color:#fff; position:relative; overflow:hidden}
.process h2{color:#fff}
.process .eyebrow{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.85)}
.process .eyebrow .d{background:#fff}
.process .intro{max-width:640px; margin-bottom:56px}
.process p.lede{color:rgba(255,255,255,0.75); font-size:19px; margin-top:18px}
.process-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
@media (max-width:1000px){ .process-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .process-grid{grid-template-columns:1fr} }
.proc-step{
  padding:28px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:18px; position:relative;
}
.proc-step .num{
  font-family:'Fraunces',serif; font-size:36px; font-weight:500;
  color:#fff; opacity:0.5; letter-spacing:-0.03em;
}
.proc-step h4{margin-top:8px; color:#fff}
.proc-step p{margin-top:10px; font-size:14px; color:rgba(255,255,255,0.75); line-height:1.55}

/* ===== CASE STUDY ===== */
.case{padding:112px 0}
.case-inner{
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  box-shadow:var(--shadow);
}
@media (max-width:900px){ .case-inner{grid-template-columns:1fr; padding:36px} }
.case-label{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--cat); margin-bottom:12px;
}
.case-quote{
  font-family:'Fraunces',serif; font-size:28px; line-height:1.2; font-style:italic;
  color:var(--ink); margin-bottom:24px;
}
.case-by{
  display:flex; align-items:center; gap:14px; margin-bottom:24px;
}
.case-by .ava{width:48px; height:48px; border-radius:50%; background:var(--surface-alt) center/cover}
.case-by .name{font-weight:600; font-size:15px}
.case-by .role{font-size:13px; color:var(--ink-mute)}
.case-metrics{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
}
.case-metric .num{
  font-family:'Fraunces',serif; font-size:40px; font-weight:500;
  color:var(--cat); letter-spacing:-0.02em; line-height:1;
}
.case-metric .lbl{
  margin-top:6px; font-size:13px; color:var(--ink-mute);
  text-transform:uppercase; letter-spacing:0.1em; font-weight:600;
}
.case-visual{
  aspect-ratio:4/3; border-radius:18px; background:var(--surface-alt) center/cover;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.case-badge{
  position:absolute; top:20px; left:20px; padding:6px 12px;
  background:var(--surface); border-radius:999px; font-size:12px; font-weight:600;
  color:var(--cat); letter-spacing:0.04em;
}

/* ===== ENGAGEMENT MODELS ===== */
.engage{background:var(--surface-alt)}
.engage .intro{max-width:640px; margin-bottom:56px}
.engage-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
@media (max-width:900px){ .engage-grid{grid-template-columns:1fr} }
.engage-card{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:32px; display:flex; flex-direction:column; gap:16px;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.engage-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--cat-soft)}
.engage-card.featured{
  background:var(--cat); color:#fff; border-color:var(--cat);
}
.engage-card.featured .engage-name, .engage-card.featured .engage-price{color:#fff}
.engage-card.featured .engage-body, .engage-card.featured .engage-included li{color:rgba(255,255,255,0.85)}
.engage-card.featured .engage-included li::before{background:var(--cat-soft)}
.engage-card.featured .engage-included{border-color:rgba(255,255,255,0.15)}
.engage-card.featured .btn-ghost{color:#fff; border-color:rgba(255,255,255,0.3); background:transparent}
.engage-card.featured .btn-ghost:hover{background:rgba(255,255,255,0.1); border-color:#fff; color:#fff}

.engage-top{display:flex; align-items:baseline; justify-content:space-between}
.engage-name{font-family:'Fraunces',serif; font-size:26px; font-weight:500; letter-spacing:-0.01em}
.engage-tag-pill{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;
  padding:4px 10px; border-radius:999px; background:var(--surface-alt); color:var(--ink-soft);
}
.engage-card.featured .engage-tag-pill{background:rgba(255,255,255,0.15); color:#fff}
.engage-price{font-family:'Fraunces',serif; font-size:38px; line-height:1; font-weight:500; color:var(--ink)}
.engage-price .unit{font-size:15px; color:var(--ink-mute); font-family:'Inter',sans-serif; font-weight:500; margin-left:6px}
.engage-card.featured .engage-price .unit{color:rgba(255,255,255,0.7)}
.engage-body{font-size:15px; color:var(--ink-soft); line-height:1.55}
.engage-included{
  list-style:none; padding:20px 0 0; margin:0;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px;
}
.engage-included li{
  font-size:14px; color:var(--ink); display:flex; align-items:flex-start; gap:10px;
  font-weight:500;
}
.engage-included li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--cat);
  margin-top:7px; flex:0 0 auto;
}
.engage-card .btn{margin-top:auto; justify-content:center}

/* ===== FAQ ===== */
.faq .intro{max-width:640px; margin-bottom:48px}
.faq-list{
  max-width:800px; margin:0 auto;
  border-top:1px solid var(--border);
}
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-q{
  width:100%; padding:24px 0; background:none; border:none; text-align:left;
  font-family:'Fraunces',serif; font-size:22px; font-weight:500; color:var(--ink);
  letter-spacing:-0.01em; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:color 180ms;
}
.faq-q:hover{color:var(--cat)}
.faq-q .faq-icn{
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:transform 280ms ease, border-color 180ms, background 180ms;
  font-family:'Inter',sans-serif; font-size:18px; color:var(--ink-mute); font-weight:500;
}
.faq-item.open .faq-icn{transform:rotate(45deg); background:var(--cat); border-color:var(--cat); color:#fff}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height 280ms ease, padding 280ms ease;
  font-size:16px; color:var(--ink-soft); line-height:1.6;
}
.faq-item.open .faq-a{
  max-height:400px; padding:0 0 24px;
}

/* ===== RELATED ===== */
.related{background:var(--surface-alt)}
.related .intro{max-width:640px; margin-bottom:48px}
.related-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:700px){ .related-grid{grid-template-columns:1fr} }
.related-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:28px; display:flex; gap:20px; align-items:center;
  transition:transform 220ms, box-shadow 220ms, border-color 220ms;
}
.related-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--cat-soft)}
.related-icn{
  width:52px; height:52px; border-radius:14px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.related-icn.core{background:#CFE3DA; color:#0B4A3A}
.related-icn.ai{background:#FAD9CA; color:#D4623E}
.related-icn.custom{background:#D3DEF2; color:#1E4DA1}
.related-card h4{font-size:20px; margin-bottom:4px}
.related-card p{font-size:14px; color:var(--ink-soft)}
.related-card .arrow{margin-left:auto; color:var(--ink-mute); flex:0 0 auto}
.related-card:hover .arrow{color:var(--cat)}

/* ===== FINAL CTA ===== */
.final{background:var(--primary); color:#fff; position:relative; overflow:hidden}
.final .container{position:relative; z-index:2; text-align:center; max-width:760px}
.final h2{color:#fff}
.final h2 em{color:var(--accent-soft); font-style:italic}
.final .sub{color:rgba(255,255,255,0.75); font-size:19px; margin:22px auto 32px; max-width:48ch}
.final .btn-cream{background:#fff; color:var(--primary)}
.final .btn-cream:hover{background:#fff; color:var(--primary); transform:translateY(-2px)}

/* ===== FOOTER ===== */
footer{background:var(--surface-alt); padding:56px 0 0}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px}
@media (max-width:800px){ .foot-grid{grid-template-columns:1fr; gap:32px} }
.foot-brand p{margin-top:14px; color:var(--ink-soft); max-width:30ch; font-size:15px}
footer h6{font-family:'Inter',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-mute); font-weight:600; margin-bottom:16px}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
footer ul a{color:var(--ink); font-size:15px}
footer ul a:hover{color:var(--primary)}
.foot-bar{
  margin-top:48px; padding:24px 0; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13px; color:var(--ink-soft);
}
.foot-bar a{color:var(--ink-soft); margin:0 8px}

/* Utilities */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 700ms ease, transform 700ms ease}
.reveal.in{opacity:1; transform:none}
.no-js .reveal{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* Section intros pattern */
.section-head{max-width:760px; margin-bottom:48px}
.section-head h2{margin-top:16px}
.section-head h2 em{color:var(--cat); font-style:italic}
.section-head .lede{margin-top:18px; font-size:19px; color:var(--ink-soft); max-width:54ch}