/*
Theme Name: C Square Digital
Theme URI: https://csquaredigital.com
Author: C Square Digital
Author URI: https://csquaredigital.com
Description: Minimal, performance-focused theme for C Square Digital — a full-stack digital marketing agency. Features pill-shaped navigation, violet accent system, dashboard mockups, and conversion-first page templates. Includes Case Study custom post type with industry/service taxonomies.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: csquare-digital
Tags: business, agency, marketing, portfolio, custom-colors, custom-menu, featured-images, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
*/

/* =============== TOKENS =============== */
:root{
  --bg:        #faf9f6;
  --surface:   #ffffff;
  --ink:       #0e0d0c;
  --ink-2:     #2a2825;
  --muted:     #6b6962;
  --line:      #ebe7dd;
  --line-2:    #d9d4c6;
  --accent:    #5b3dff;
  --accent-2:  #4a2feb;
  --accent-soft: #ece7ff;
  --tint:      #f3f1ea;
  --green:     #18a957;
  --red:       #ef4444;
  --display:   'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --sans:      'DM Sans', -apple-system, system-ui, sans-serif;
  --max:       1200px;
  --pad:       clamp(20px, 4vw, 40px);
  --r-sm:      10px;
  --r-md:      16px;
  --r-lg:      24px;
  --r-pill:    999px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 1px 2px rgba(14,13,12,.04), 0 1px 1px rgba(14,13,12,.03);
  --shadow-md: 0 4px 16px -4px rgba(14,13,12,.06), 0 2px 6px rgba(14,13,12,.04);
  --shadow-lg: 0 24px 48px -12px rgba(14,13,12,.08), 0 8px 24px -8px rgba(14,13,12,.05);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  font-weight: 400; overflow-x: hidden;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14,13,12,.04) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
}
a{ color: inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background: var(--accent); color: #fff; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position:relative; z-index: 2; }

/* HEADER */
.header{ position: sticky; top: 16px; z-index: 50; margin: 16px auto 0; max-width: calc(var(--max) - 40px); padding: 0 var(--pad); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; background: rgba(255,255,255,.8); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 8px 8px 22px; box-shadow: var(--shadow-sm); }
.logo{ display:flex; align-items:center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.logo-mark{ width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: #fff; display:grid; place-items:center; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: -.04em; position: relative; }
.logo-mark::after{ content:''; position:absolute; bottom:5px; right:5px; width: 5px; height: 5px; border-radius: 1.5px; background: var(--accent); }
.nav{ display:flex; align-items:center; gap: 4px; }
.nav-links{ display:flex; align-items:center; gap: 4px; list-style: none; }
.nav-links a{ font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 8px 14px; border-radius: var(--r-pill); transition: background .2s var(--ease), color .2s var(--ease); }
.nav-links a:hover, .nav-links a.current, .nav-links li.current-menu-item a, .nav-links li.current_page_item a { background: var(--tint); color: var(--ink); }

.btn{ display:inline-flex; align-items:center; gap: 8px; padding: 12px 20px; border-radius: var(--r-pill); font-weight: 500; font-size: 14.5px; font-family: var(--sans); letter-spacing: -.005em; transition: transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; cursor: pointer; border: 0; }
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--ink); color: #fff; padding-right: 8px; }
.btn-primary .arr{ width: 26px; height: 26px; background: var(--accent); border-radius: var(--r-pill); display:grid; place-items:center; transition: background .2s var(--ease); }
.btn-primary:hover{ background: var(--accent); }
.btn-primary:hover .arr{ background: #fff; }
.btn-primary:hover .arr svg{ color: var(--accent); }
.btn-ghost{ background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover{ background: var(--tint); border-color: var(--line-2); }
.btn-ghost .arr-mini{ transition: transform .2s var(--ease); }
.btn-ghost:hover .arr-mini{ transform: translateX(3px); }
.btn-link{ color: var(--ink); font-size: 14px; font-weight: 500; padding: 10px 14px; }
.btn-link:hover{ background: var(--tint); border-radius: var(--r-pill); }
.btn-sm{ padding: 9px 16px; font-size: 13.5px; }
.btn-sm .arr{ width: 22px; height: 22px; }
.btn-block{ width: 100%; justify-content: center; }
.menu-toggle{ display: none; }
@media (max-width: 880px){
  .nav-links{ display:none; }
  .menu-toggle{ display: inline-flex; align-items:center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); background: var(--tint); font-size: 13px; font-weight: 500; border: 0; }
  .header .btn-link{ display:none; }
}

/* HERO */
.hero{ padding: 80px 0 60px; text-align: center; position: relative; }
.hero-glow{ position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(ellipse, rgba(91,61,255,.18), rgba(91,61,255,0) 60%); filter: blur(60px); z-index: -1; }
.eyebrow{ display:inline-flex; align-items:center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px 6px 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.eyebrow .pill{ background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; border-radius: var(--r-pill); text-transform: uppercase; }
.h1{ font-family: var(--display); font-weight: 500; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.038em; font-variation-settings: "opsz" 96; margin: 0 auto 24px; max-width: 14ch; color: var(--ink); }
.h1 .hl{ color: var(--accent); position: relative; display: inline-block; }
.h1 .hl::after{ content:''; position: absolute; left: -2%; right: -2%; bottom: 0; height: 36%; background: var(--accent-soft); border-radius: 6px; z-index: -1; }
.hero-sub{ font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--muted); max-width: 56ch; margin: 0 auto 36px; font-weight: 400; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap: 12px; justify-content: center; margin-bottom: 32px; }
.page-hero{ padding: 120px 0 60px; text-align: center; position: relative; }
.page-hero .h1{ font-size: clamp(36px, 5.5vw, 64px); }

.social-proof{ display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); margin-bottom: 60px; }
.avatars{ display:flex; }
.avatars .av{ width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -8px; background: linear-gradient(135deg, var(--accent), #b794ff); display:grid; place-items:center; font-size: 11px; font-weight: 700; color: #fff; font-family: var(--display); }
.avatars .av:first-child{ margin-left: 0; }
.avatars .av:nth-child(2){ background: linear-gradient(135deg, #ff8a4c, #ff5a7a); }
.avatars .av:nth-child(3){ background: linear-gradient(135deg, #18a957, #2dd4bf); }
.avatars .av:nth-child(4){ background: linear-gradient(135deg, #f59e0b, #ef4444); }
.avatars .av:nth-child(5){ background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.social-proof .stars{ display:flex; gap: 1px; color: #fbbf24; font-size: 13px; }
.social-proof .text{ font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.social-proof .text strong{ color: var(--ink); font-weight: 700; }

/* HERO DASHBOARD */
.hero-vis{ margin: 0 auto; max-width: 1080px; position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 18px; overflow: hidden; }
.hero-vis::before{ content:''; position:absolute; top:0; left:50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .4; }
.dash-bar{ display:flex; align-items:center; gap: 10px; border-bottom: 1px solid var(--line); margin: -18px -18px 18px; padding: 12px 18px; }
.dot-row{ display:flex; gap: 6px; }
.dot-row .d{ width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.dot-row .d:nth-child(1){ background: #ff5f57; }
.dot-row .d:nth-child(2){ background: #febc2e; }
.dot-row .d:nth-child(3){ background: #28c840; }
.dash-url{ flex: 1; max-width: 380px; margin: 0 auto; background: var(--tint); border-radius: var(--r-pill); padding: 6px 14px; font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; display:flex; align-items:center; justify-content:center; gap: 6px; }
.dash-url::before{ content:'🔒'; font-size: 10px; opacity: .5; }
.dash-grid{ display:grid; grid-template-columns: 1.4fr 2fr; gap: 18px; }
.kpi-stack{ display:flex; flex-direction:column; gap: 12px; }
.kpi{ background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.kpi .label{ font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.kpi .num{ font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -.02em; color: var(--ink); display:flex; align-items: baseline; gap: 8px; }
.kpi .num .delta{ font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--green); background: rgba(24,169,87,.1); padding: 2px 7px; border-radius: var(--r-pill); }
.kpi .num .delta.down{ color: #ef4444; background: rgba(239,68,68,.1); }
.kpi .spark{ margin-top: 12px; }
.chart-card{ background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; }
.chart-head{ display:flex; justify-content:space-between; align-items: flex-start; margin-bottom: 18px; }
.chart-title{ font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.chart-meta{ font-size: 12px; color: var(--muted); margin-top: 4px; }
.tab-row{ display:flex; gap: 4px; background: var(--tint); padding: 3px; border-radius: var(--r-pill); }
.tab{ font-size: 11.5px; font-weight: 500; padding: 5px 12px; border-radius: var(--r-pill); color: var(--muted); }
.tab.on{ background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
@media (max-width: 760px){ .dash-grid{ grid-template-columns: 1fr; } }

/* STATS BAND */
.stats-band{ margin: 80px 0; padding: 56px var(--pad); background: var(--ink); color: #fff; border-radius: var(--r-lg); position: relative; overflow: hidden; }
.stats-band::before{ content:''; position:absolute; top:0; right:0; width: 50%; height: 100%; background: radial-gradient(circle at 80% 50%, rgba(91,61,255,.4), transparent 60%); pointer-events:none; }
.stats-band-inner{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.sb-stat{ text-align: left; }
.sb-stat .num{ font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.5vw, 72px); line-height: 1; letter-spacing: -.035em; margin-bottom: 8px; }
.sb-stat .num span{ color: var(--accent); }
.sb-stat .label{ color: rgba(255,255,255,.6); font-size: 14px; }
@media (max-width: 760px){ .stats-band-inner{ grid-template-columns: 1fr; gap: 32px; } }

/* SECTION SCAFFOLD */
section{ padding: clamp(40px, 9vw, 40px) 0; position: relative; }
.section-tag{ display:inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.section-title{ font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -.03em; font-variation-settings: "opsz" 96; margin-bottom: 18px; max-width: 18ch; }
.section-title em{ font-style: italic; color: var(--accent); font-weight: 400; }
.section-lede{ color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 56ch; }
.section-head-center{ text-align: center; max-width: 700px; margin: 0 auto 64px; }
.section-head-center .section-title{ margin-left: auto; margin-right: auto; max-width: 22ch; }
.section-head-center .section-lede{ margin-left: auto; margin-right: auto; }

/* PROBLEM/SOLUTION */
.ps-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ps-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; position: relative; }
.ps-card.problem{ background: var(--tint); border-color: var(--line-2); }
.ps-card .head{ display:flex; align-items:center; gap: 12px; margin-bottom: 24px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ps-card.problem .head{ color: #b85a3e; }
.ps-card.solution .head{ color: var(--accent); }
.ps-card .head .icn{ width: 22px; height: 22px; border-radius: 6px; display:grid; place-items:center; background: rgba(184,90,62,.12); color: #b85a3e; }
.ps-card.solution .head .icn{ background: var(--accent-soft); color: var(--accent); }
.ps-card h3{ font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -.018em; margin-bottom: 24px; }
.ps-list{ list-style: none; display:flex; flex-direction: column; gap: 14px; }
.ps-list li{ display:flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.ps-list .check, .ps-list .x{ flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%; display:grid; place-items: center; font-size: 11px; font-weight: 700; }
.ps-list .check{ background: var(--accent); color: #fff; }
.ps-list .x{ background: rgba(184,90,62,.15); color: #b85a3e; }
@media (max-width: 800px){ .ps-grid{ grid-template-columns: 1fr; } }

/* STEPS */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.step:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-vis{ background: var(--tint); border-radius: var(--r-md); height: 200px; margin-bottom: 24px; position: relative; overflow: hidden; display:grid; place-items: center; }
.step-num{ display:inline-flex; align-items:center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .04em; margin-bottom: 12px; text-transform: uppercase; }
.step-num .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.step h4{ font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 10px; }
.step p{ font-size: 14.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr; } }

/* FEATURES */
.feature{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 60px 0; }
.feature.flip .f-text{ order: 2; }
.feature.flip .f-vis{ order: 1; }
.f-tag{ display:inline-flex; align-items:center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 20px; }
.f-text h3{ font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 18px; max-width: 18ch; }
.f-text p{ color: var(--muted); font-size: 16.5px; line-height: 1.6; max-width: 48ch; margin-bottom: 24px; }
.f-checks{ list-style:none; display:flex; flex-direction:column; gap: 10px; margin-bottom: 28px; }
.f-checks li{ display:flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.f-checks .ck{ width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display:grid; place-items:center; font-size: 11px; font-weight: 700; }
.f-vis{ position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-md); min-height: 320px; }
@media (max-width: 900px){
  .feature{ grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
  .feature.flip .f-text{ order: 0; }
  .feature.flip .f-vis{ order: 1; }
}

/* CASE CARDS */
.cases{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.case-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-vis{ height: 200px; background: linear-gradient(135deg, var(--tint), var(--bg)); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.case-body{ padding: 28px; display:flex; flex-direction:column; flex:1; }
.case-tag{ display: inline-flex; align-items:center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--r-pill); align-self: flex-start; margin-bottom: 14px; }
.case-body h4{ font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -.012em; margin-bottom: 18px; flex-grow: 1; }
.case-author{ display:flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
.case-author .av{ width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #b794ff); display:grid; place-items:center; color:#fff; font-weight: 700; font-size: 12px; font-family: var(--display); }
.case-author .name{ font-weight: 600; color: var(--ink); }
.case-author .role{ font-size: 12px; color: var(--muted); }
@media (max-width: 900px){ .cases{ grid-template-columns: 1fr; } }

/* PRICING */
.pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 32px; display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tier:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier.featured{ background: var(--ink); color: #fff; border-color: var(--ink); position: relative; transform: scale(1.02); box-shadow: var(--shadow-lg); }
.tier.featured::before{ content:'Most Popular'; position: absolute; top: -12px; right: 24px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); }
.tier h3{ font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -.012em; margin-bottom: 6px; }
.tier .blurb{ font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.tier.featured .blurb{ color: rgba(255,255,255,.55); }
.tier .price{ font-family: var(--display); font-weight: 500; font-size: 48px; letter-spacing: -.03em; line-height: 1; margin-bottom: 6px; display:flex; align-items: baseline; gap: 8px; }
.tier .price .mo{ font-size: 14px; color: var(--muted); font-family: var(--sans); font-weight: 400; }
.tier.featured .price .mo{ color: rgba(255,255,255,.55); }
.tier .price .from{ font-size: 12px; color: var(--muted); font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; align-self:center; }
.tier.featured .price .from{ color: rgba(255,255,255,.55); }
.tier .for{ font-size: 13px; color: var(--muted); margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tier.featured .for{ color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.1); }
.tier ul{ list-style:none; display:flex; flex-direction:column; gap: 12px; margin-bottom: 32px; flex-grow: 1; }
.tier li{ display:flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.tier li .ck{ flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display:grid; place-items:center; font-size: 11px; font-weight: 700; }
.tier.featured li .ck{ background: rgba(91,61,255,.25); color: #b794ff; }
.tier .btn{ width: 100%; justify-content: center; }
.tier:not(.featured) .btn-primary{ background: var(--ink); }
.tier.featured .btn-primary{ background: var(--accent); }
.tier.featured .btn-primary .arr{ background: #fff; }
.tier.featured .btn-primary .arr svg{ color: var(--accent); }
.tier.featured .btn-primary:hover{ background: #fff; color: var(--ink); }
.tier.featured .btn-primary:hover .arr{ background: var(--accent); color: #fff; }
@media (max-width: 900px){ .pricing{ grid-template-columns: 1fr; } .tier.featured{ transform: none; } }

/* FAQ */
.faq{ max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.q{ border-bottom: 1px solid var(--line); padding: 0; }
.q:last-child{ border-bottom: 0; }
.q-head{ width: 100%; display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 22px 28px; text-align: left; cursor: pointer; transition: background .15s var(--ease); border: 0; background: none; }
.q-head:hover{ background: var(--tint); }
.q-title{ font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.4; letter-spacing: -.01em; }
.q-icon{ flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--ink); display:grid; place-items:center; transition: all .25s var(--ease); font-size: 14px; font-weight: 600; }
.q.open .q-icon{ background: var(--accent); color: #fff; transform: rotate(45deg); }
.q-body{ max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.q.open .q-body{ max-height: 400px; }
.q-body p{ padding: 0 28px 24px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 65ch; }

/* FINAL CTA */
.final-cta{ padding: 100px 0 120px; text-align: center; position: relative; }
.final-cta-card{ background: var(--ink); border-radius: var(--r-lg); padding: 80px 40px; position: relative; overflow: hidden; }
.final-cta-card::before{ content:''; position:absolute; inset:0; background: radial-gradient(600px 300px at 30% 0%, rgba(91,61,255,.5), transparent 60%), radial-gradient(500px 300px at 80% 100%, rgba(91,61,255,.3), transparent 60%); pointer-events:none; }
.final-cta-card *{ position: relative; z-index: 1; }
.final-cta-card h2{ font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -.03em; color: #fff; margin-bottom: 20px; max-width: 22ch; margin-left: auto; margin-right: auto; }
.final-cta-card h2 em{ font-style: italic; color: #b794ff; font-weight: 400; }
.final-cta-card p{ color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.55; max-width: 56ch; margin: 0 auto 36px; }
.final-cta-card .btn-primary{ background: var(--accent); }
.final-cta-card .btn-primary .arr{ background: #fff; }
.final-cta-card .btn-primary .arr svg{ color: var(--accent); }
.final-cta-card .btn-primary:hover{ background: #fff; color: var(--ink); }
.final-cta-card .btn-primary:hover .arr{ background: var(--accent); }
.final-cta-card .btn-primary:hover .arr svg{ color: #fff; }
.final-cta-card .btn-ghost{ background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.final-cta-card .btn-ghost:hover{ background: rgba(255,255,255,.14); }

/* FOOTER */
footer{ border-top: 1px solid var(--line); padding: 64px 0 32px; background: var(--bg); }
.foot-top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.foot-brand h4{ font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; max-width: 24ch; margin-bottom: 18px; }
.foot-brand p{ color: var(--muted); font-size: 14px; max-width: 32ch; margin-bottom: 24px; }
.foot-brand .socials{ display:flex; gap: 8px; }
.foot-brand .socials a{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display:grid; place-items:center; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all .2s var(--ease); }
.foot-brand .socials a:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }
.foot-col h5{ font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap: 10px; }
.foot-col a{ color: var(--ink-2); font-size: 14px; transition: color .2s; }
.foot-col a:hover{ color: var(--accent); }
.foot-bot{ display:flex; align-items:center; justify-content:space-between; gap: 16px; font-size: 13px; color: var(--muted); }
.foot-bot a{ color: var(--muted); transition: color .2s; }
.foot-bot a:hover{ color: var(--ink-2); }
@media (max-width: 900px){ .foot-top{ grid-template-columns: 1fr 1fr; } .foot-bot{ flex-direction: column; align-items: flex-start; } }

/* UTILITIES */
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; }
.reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; }
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--muted); }

/* ABOUT PAGE */
.story-block{ max-width: 760px; margin: 0 auto; }
.story-block p{ font-size: 19px; line-height: 1.7; color: var(--ink-2); margin-bottom: 22px; }
.story-block p:first-child::first-letter{ font-family: var(--display); font-weight: 500; font-size: 64px; float: left; line-height: 1; margin-right: 14px; margin-top: 4px; color: var(--accent); }
.story-block strong{ color: var(--ink); font-weight: 600; }
.mission-card{ max-width: 880px; margin: 0 auto; padding: 56px 48px; background: var(--ink); color: #fff; border-radius: var(--r-lg); position: relative; overflow: hidden; text-align: center; }
.mission-card::before{ content:''; position:absolute; inset:0; background: radial-gradient(600px 300px at 50% 0%, rgba(91,61,255,.4), transparent 60%); }
.mission-card .label{ position: relative; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; display: block; }
.mission-card p{ position: relative; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 36px); line-height: 1.3; letter-spacing: -.018em; max-width: 28ch; margin: 0 auto; }
.mission-card p em{ color: var(--accent); font-style: italic; }
.values-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.value-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value-icon{ width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); display:grid; place-items:center; margin-bottom: 20px; font-family: var(--display); font-weight: 700; font-size: 18px; }
.value-card h4{ font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.012em; line-height: 1.25; margin-bottom: 10px; }
.value-card p{ font-size: 14.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px){ .values-grid{ grid-template-columns: 1fr; } }
.team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; text-align: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.team-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-avatar{ width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 18px; display:grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 600; font-size: 32px; background: linear-gradient(135deg, var(--accent), #b794ff); }
.team-card.t2 .team-avatar{ background: linear-gradient(135deg, #ff8a4c, #ff5a7a); }
.team-card.t3 .team-avatar{ background: linear-gradient(135deg, #18a957, #2dd4bf); }
.team-card.t4 .team-avatar{ background: linear-gradient(135deg, #f59e0b, #ef4444); }
.team-card.t5 .team-avatar{ background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.team-card.t6 .team-avatar{ background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.team-card.t7 .team-avatar{ background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.team-card.t8 .team-avatar{ background: linear-gradient(135deg, #a855f7, #ec4899); }
.team-card h4{ font-family: var(--display); font-weight: 500; font-size: 17px; margin-bottom: 4px; }
.team-card .role{ font-size: 13px; color: var(--accent); margin-bottom: 12px; font-weight: 500; }
.team-card p{ font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1000px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px){ .team-grid{ grid-template-columns: 1fr; } }

/* BOOK PAGE */
.book-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
/* Contact Form 7 Compatibility */
.wpcf7{
    width:100%;
}

.wpcf7 form{
    width:100%;
}

.wpcf7-form-control-wrap{
    display:block;
    width:100%;
}

.wpcf7-not-valid-tip{
    margin-top:6px;
    font-size:12px;
    color:#ff4d4f;
}

.wpcf7-response-output{
    margin:20px 0 0 !important;
    padding:14px 16px !important;
    border-radius:var(--r-sm);
    font-size:14px;
}

/* Inputs */
.form-field .wpcf7-form-control{
    width:100%;
}
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-checkboxes .wpcf7-checkbox{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } 
.form-check{ display:flex; align-items:center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; transition: all .2s; font-size: 13.5px; } 
.form-check:hover{ border-color: var(--line-2); background: var(--surface); } 
.form-check input{ accent-color: var(--accent); }
.form-checkboxes .wpcf7-list-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    background:var(--bg);
    cursor:pointer;
    transition:all .2s;
    font-size:13.5px;
    width:100%;
}
.wpcf7-list-item {
	display: inline-block;
	margin: 0 !important;
}
.form-checkboxes input{
	width:20% !important;
}
/* Submit Button */
.wpcf7 button.btn{
    width:100%;
    border:none;
    cursor:pointer;
}

/* Mobile */
@media (max-width: 767px){

    .form-row.cols-2{
        grid-template-columns:1fr;
    }

    .form-checkboxes .wpcf7-checkbox{
        grid-template-columns:1fr;
    }

    .form-card{
        padding:24px;
    }
}
.form-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; }
.form-card h3{ font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -.012em; margin-bottom: 6px; }
.form-card .sub{ color: var(--muted); font-size: 14.5px; margin-bottom: 28px; }
.form-row{ display:grid; gap: 18px; margin-bottom: 18px; }
.form-row.cols-2{ grid-template-columns: 1fr 1fr; }
.form-field{ display:flex; flex-direction:column; gap: 6px; }
.form-field label{ font-size: 13px; font-weight: 500; color: var(--ink-2); }
.form-field label .req{ color: var(--accent); }
.form-field input, .form-field select, .form-field textarea{ width: 100%; padding: 13px 14px; font: inherit; font-size: 15px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .2s, background .2s, box-shadow .2s; color: var(--ink); font-family: var(--sans); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(91,61,255,.1); }
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-check{ display:flex; align-items:center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; transition: all .2s; font-size: 13.5px; }
.form-check:hover{ border-color: var(--line-2); background: var(--surface); }
.form-check input{ accent-color: var(--accent); }
.book-side{ display:flex; flex-direction:column; gap: 20px; position: sticky; top: 100px; }
.calendar-card{ background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 32px; position: relative; overflow: hidden; }
.calendar-card::before{ content:''; position:absolute; inset:0; background: radial-gradient(400px 200px at 80% 0%, rgba(91,61,255,.4), transparent 60%); }
.calendar-card *{ position: relative; z-index: 1; }
.calendar-card .label{ font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.calendar-card h3{ font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 14px; }
.calendar-card p{ color: rgba(255,255,255,.65); font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; }
.cal-mock{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 18px; margin-bottom: 18px; }
.cal-mock-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; font-size: 13px; font-weight: 500; }
.cal-mock-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; text-align: center; }
.cal-mock-grid .d{ padding: 6px 0; color: rgba(255,255,255,.45); }
.cal-mock-grid .num{ padding: 8px 0; color: rgba(255,255,255,.7); border-radius: 6px; cursor: pointer; }
.cal-mock-grid .num:hover{ background: rgba(255,255,255,.08); }
.cal-mock-grid .num.on{ background: var(--accent); color: #fff; font-weight: 600; }
.cal-mock-grid .num.dim{ color: rgba(255,255,255,.25); }
.trust-row{ display:flex; flex-direction:column; gap: 12px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.trust-row .item{ display:flex; align-items:center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.trust-row .item .ck{ width: 22px; height: 22px; border-radius: 50%; background: rgba(24,169,87,.12); color: var(--green); display:grid; place-items:center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.contact-info{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.contact-item{ display:flex; align-items:flex-start; gap: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.contact-item .icon{ width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); display:grid; place-items:center; flex-shrink: 0; font-size: 16px; }
.contact-item .label{ font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.contact-item .value{ font-size: 14.5px; color: var(--ink); font-weight: 500; }
@media (max-width: 900px){ .book-grid{ grid-template-columns: 1fr; } .book-side{ position: static; } .form-row.cols-2{ grid-template-columns: 1fr; } .form-checkboxes{ grid-template-columns: 1fr; } .contact-info{ grid-template-columns: 1fr; } }

/* CASE STUDIES */
.filter-row{ display:flex; gap: 8px; flex-wrap:wrap; justify-content: center; margin-bottom: 48px; }
.filter-pill{ padding: 9px 18px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease); text-decoration: none; }
.filter-pill:hover{ border-color: var(--line-2); }
.filter-pill.active{ background: var(--ink); color: #fff; border-color: var(--ink); }

/* CASE DETAIL */
.case-hero{ padding: 100px 0 40px; text-align: center; }
.case-hero .tags{ display:inline-flex; gap: 8px; flex-wrap:wrap; justify-content: center; margin-bottom: 20px; }
.case-hero .tag{ font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 12px; border-radius: var(--r-pill); }
.case-hero h1{ font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; margin: 0 auto 18px; }
.case-hero h1 em{ font-style: italic; color: var(--accent); font-weight: 400; }
.case-hero .lede{ color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 56ch; margin: 0 auto; }
.results-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--ink); border-radius: var(--r-lg); padding: 40px 24px; color: #fff; position: relative; overflow: hidden; }
.results-grid::before{ content:''; position:absolute; inset:0; background: radial-gradient(500px 250px at 50% 100%, rgba(91,61,255,.35), transparent 60%); pointer-events: none; }
.result-item{ padding: 0 24px; border-left: 1px solid rgba(255,255,255,.1); position: relative; }
.result-item:first-child{ border-left: 0; }
.result-item .num{ font-family: var(--display); font-weight: 500; font-size: 44px; letter-spacing: -.03em; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.result-item .label{ font-size: 13px; color: rgba(255,255,255,.65); }
@media (max-width: 760px){ .results-grid{ grid-template-columns: 1fr 1fr; gap: 32px 0; padding: 32px 16px; } .result-item:nth-child(odd){ border-left: 0; } }
.prose{ max-width: 720px; margin: 0 auto; }
.prose h2{ font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -.022em; margin: 56px 0 18px; }
.prose h3{ font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -.012em; margin: 36px 0 12px; }
.prose p{ font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: 18px; }
.prose strong{ color: var(--ink); font-weight: 600; }
.prose ul{ margin-bottom: 18px; padding-left: 0; list-style: none; }
.prose ul li{ font-size: 17px; line-height: 1.7; color: var(--ink-2); padding-left: 28px; position: relative; margin-bottom: 8px; }
.prose ul li::before{ content: ''; position: absolute; left: 0; top: 14px; width: 16px; height: 1px; background: var(--accent); }
.prose a{ color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose img{ border-radius: var(--r-md); margin: 28px 0; }
.big-quote{ border-left: 3px solid var(--accent); padding: 16px 0 16px 24px; margin: 40px 0; }
.big-quote p{ font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: -.015em; color: var(--ink); margin-bottom: 14px; }
.big-quote .who{ font-size: 14px; color: var(--muted); }
.big-quote .who strong{ color: var(--ink-2); }
.img-placeholder{ background: linear-gradient(135deg, var(--tint), var(--accent-soft)); border-radius: var(--r-md); aspect-ratio: 16/9; display:grid; place-items: center; color: var(--accent); font-family: var(--display); font-size: 14px; font-weight: 500; margin: 28px 0; border: 1px dashed var(--line-2); }

/* WP-specific overrides */
body.admin-bar .header{ top: 48px; }
@media (max-width: 782px){ body.admin-bar .header{ top: 62px; } }
.alignwide{ max-width: 1000px; margin-left: auto; margin-right: auto; }
.alignfull{ max-width: 100vw; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
.wp-block-image img{ height: auto; max-width: 100%; }

/* Comments / default content area (fallback styling for blog posts) */
.entry-content{ max-width: 720px; margin: 60px auto; padding: 0 var(--pad); }
.entry-content h1, .entry-content h2{ font-family: var(--display); font-weight: 500; letter-spacing: -.02em; margin: 36px 0 16px; }
.entry-content h1{ font-size: 40px; line-height: 1.1; }
.entry-content h2{ font-size: 28px; line-height: 1.2; }
.entry-content h3{ font-family: var(--display); font-size: 22px; margin: 24px 0 12px; }
.entry-content p{ font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: 18px; }
.entry-content a{ color: var(--accent); text-decoration: underline; }

/* =============== BLOG =============== */
.post-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); text-decoration: none; color: inherit; }
.post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-img{ aspect-ratio: 16/10; background: linear-gradient(135deg, var(--tint), var(--accent-soft)); position: relative; overflow: hidden; display:grid; place-items:center; }
.post-img.v1{ background: linear-gradient(135deg, var(--tint), var(--accent-soft)); }
.post-img.v2{ background: linear-gradient(135deg, #fff2e6, #ffd8b3); }
.post-img.v3{ background: linear-gradient(135deg, #e6f5ec, #b8e5c8); }
.post-img.v4{ background: linear-gradient(135deg, var(--accent-soft), #d4c5ff); }
.post-img.v5{ background: linear-gradient(135deg, #ffe9e9, #ffc0c0); }
.post-img.v6{ background: linear-gradient(135deg, #e0f0ff, #b0d8ff); }
.post-img.v7{ background: linear-gradient(135deg, var(--ink), #2a2825); }
.post-img.v8{ background: linear-gradient(135deg, #fff9d6, #ffe680); }
.post-img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset:0; }
.post-img .placeholder{ color: rgba(0,0,0,.4); font-family: var(--display); font-size: 12px; font-weight: 500; position: relative; z-index: 1; }
.post-img.v7 .placeholder{ color: rgba(255,255,255,.6); }
.post-body{ padding: 24px 28px 26px; display:flex; flex-direction:column; flex:1; }
.post-cat, .post-cat-tag{ display: inline-flex; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--r-pill); align-self: flex-start; margin-bottom: 14px; }
.post-cat a, .post-cat-tag a{ color: inherit; text-decoration: none; }
.post-card h3{ font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.013em; margin-bottom: 12px; }
.post-excerpt{ font-size: 14.5px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; flex-grow: 1; }
.post-meta{ display:flex; align-items:center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.post-meta .av{ width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #b794ff); display:grid; place-items:center; color:#fff; font-weight: 700; font-size: 11px; font-family: var(--display); flex-shrink: 0; }
.post-meta .av.av1{ background: linear-gradient(135deg, var(--accent), #b794ff); }
.post-meta .av.av2{ background: linear-gradient(135deg, #ff8a4c, #ff5a7a); }
.post-meta .av.av3{ background: linear-gradient(135deg, #18a957, #2dd4bf); }
.post-meta .av.av4{ background: linear-gradient(135deg, #f59e0b, #ef4444); }
.post-meta .author{ color: var(--ink); font-weight: 500; }
.post-meta .sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }

.post-featured{ display:grid; grid-template-columns: 1.05fr 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 32px; text-decoration: none; color: inherit; transition: box-shadow .25s var(--ease); }
.post-featured:hover{ box-shadow: var(--shadow-md); }
.post-featured .post-img{ aspect-ratio: auto; min-height: 360px; }
.post-featured .post-body{ padding: 48px; justify-content: center; }
.post-featured h3{ font-size: 32px; line-height: 1.15; margin-bottom: 14px; }
.post-featured .post-excerpt{ font-size: 16.5px; }
.post-featured .featured-label{ font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
@media (max-width: 900px){ .post-featured{ grid-template-columns: 1fr; } .post-featured .post-img{ min-height: 240px; } .post-featured .post-body{ padding: 32px; } .post-featured h3{ font-size: 26px; } }

.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr; } }

/* Single post styles */
.single-post-hero{ padding: 100px 0 40px; text-align: center; position: relative; }
.single-post-hero .post-cat{ display: inline-block; margin-bottom: 18px; }
.single-post-hero h1{ font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; margin: 0 auto 18px; }
.single-post-hero .lede{ color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 58ch; margin: 0 auto; }
.single-post-meta{ display:flex; align-items:center; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.single-post-meta .av{ width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #b794ff); display:grid; place-items:center; color:#fff; font-weight: 700; font-size: 14px; font-family: var(--display); }
.single-post-meta .author{ color: var(--ink); font-weight: 600; }
.single-post-meta .sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }

.author-bio{ display:flex; gap: 24px; align-items: flex-start; padding: 32px; margin-top: 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.author-bio .av{ width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #b794ff); display:grid; place-items:center; color:#fff; font-weight: 700; font-size: 32px; font-family: var(--display); flex-shrink: 0; }
.author-bio .label{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
.author-bio h4{ font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -.015em; margin-bottom: 6px; }
.author-bio .role{ font-size: 13px; color: var(--accent); margin-bottom: 14px; font-weight: 500; }
.author-bio p{ font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }
.author-bio .social{ display:flex; gap: 8px; }
.author-bio .social a{ width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); display:grid; place-items:center; font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: all .2s var(--ease); }
.author-bio .social a:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }
@media(max-width:680px){ .author-bio{ flex-direction: column; align-items: stretch; text-align: center; } .author-bio .av{ margin: 0 auto; } .author-bio .social{ justify-content: center; } }

.share-row{ display:flex; align-items:center; gap: 14px; justify-content: center; margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.share-row .label{ font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.share-row .btns{ display:flex; gap: 6px; }
.share-row .btns a{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display:grid; place-items:center; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all .2s var(--ease); text-decoration: none; }
.share-row .btns a:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }

.newsletter-card{ background: linear-gradient(135deg, var(--tint), var(--accent-soft)); border-radius: var(--r-lg); padding: 48px; display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 0 auto; max-width: 920px; border: 1px solid var(--line); }
.newsletter-card h3{ font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.newsletter-card h3 em{ font-style: italic; color: var(--accent); font-weight: 400; }
.newsletter-card p{ color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.newsletter-form{ display:flex; gap: 8px; }
.newsletter-form input{ flex: 1; padding: 13px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font: inherit; font-size: 14px; color: var(--ink); font-family: var(--sans); }
.newsletter-form input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,61,255,.1); }
@media(max-width:760px){ .newsletter-card{ grid-template-columns: 1fr; padding: 32px; } }

.pagination-row{ display:flex; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.pagination-row a, .pagination-row span{ min-width: 40px; height: 40px; display:grid; place-items:center; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: all .2s var(--ease); }
.pagination-row a:hover{ background: var(--tint); border-color: var(--line-2); }
.pagination-row .current{ background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination-row .dots{ background: transparent; border: 0; color: var(--muted); }

/* Prose numbered list */
.prose ol{ counter-reset: item; list-style: none; padding-left: 0; margin-bottom: 18px; }
.prose ol li{ counter-increment: item; padding-left: 36px; position: relative; font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: 12px; }
.prose ol li::before{ content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 5px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--accent); }
/* Default (Desktop) */
.logo-text {
  display: inline;
}

/* Mobile */
@media (max-width: 768px) {
  .logo-text {
    display: none;
  }
}