/* ============================================================
   GrL'Ca Theme — Main Stylesheet
   Design system: warm editorial, DM Serif Display + DM Sans
   Accent: #c8453a (red) | Paper: #f5f2ec | Ink: #0d0d0d
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:    #0d0d0d;
  --paper:  #f5f2ec;
  --accent: #c8453a;
  --accent2:#e8823c;
  --muted:  #7a7570;
  --border: rgba(13,13,13,0.1);
  --serif:  'DM Serif Display', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.6; overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--accent); }

/* ── LOGO ANIMATIONS ────────────────────────────────────────── */
.bird-silhouette { animation: birdSlideIn 0.7s cubic-bezier(0.34,1.4,0.64,1) both; }
@keyframes birdSlideIn {
  0%   { opacity:0; transform: translateX(-12px) scaleX(0.8); }
  100% { opacity:1; transform: translateX(0) scaleX(1); }
}
.hero-logo .bird-silhouette { animation: birdSlideIn 0.9s 0.1s cubic-bezier(0.34,1.4,0.64,1) both; }
.hero-logo .bird-silhouette.settled { animation: birdBob 3.5s ease-in-out infinite; }
@keyframes birdBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.5px)} }

.logo-box-rect { animation: boxPop 0.5s cubic-bezier(0.34,1.6,0.64,1) both; transform-origin: center center; }
.hero-logo .logo-box-rect { animation-duration: 0.7s; }
@keyframes boxPop { 0%{opacity:0;transform:scale(0.6)} 100%{opacity:1;transform:scale(1)} }

.logo-letter { fill: transparent; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.logo-dark .logo-letter  { stroke: #0d0d0d; }
.logo-dark .logo-letter-accent { stroke: #c8453a; }
.hero-logo .logo-letter  { stroke: #0d0d0d; }
.hero-logo .logo-letter-accent { stroke: #c8453a; }
.logo-light .logo-letter { stroke: rgba(245,242,236,0.65); }
.logo-light .logo-letter-accent { stroke: #c8453a; }

@keyframes strokeDraw {
  0%   { stroke-dashoffset: var(--len); fill: transparent; }
  70%  { stroke-dashoffset: 0; fill: transparent; }
  100% { stroke-dashoffset: 0; fill: var(--fill-color); stroke: transparent; }
}
.logo-dark .logo-letter, .logo-dark .logo-letter-accent {
  animation: strokeDraw 0.55s ease-out both; --fill-color: #0d0d0d;
}
.logo-dark .logo-letter-accent { --fill-color: #c8453a; }
.logo-dark .l-G  { animation-delay: 0.15s; }
.logo-dark .l-r  { animation-delay: 0.23s; }
.logo-dark .l-L  { animation-delay: 0.30s; }
.logo-dark .l-ap { animation-delay: 0.36s; }
.logo-dark .l-C  { animation-delay: 0.41s; }
.logo-dark .l-a  { animation-delay: 0.48s; }

.hero-logo .logo-letter, .hero-logo .logo-letter-accent {
  animation: strokeDraw 0.75s ease-out both; --fill-color: #0d0d0d;
}
.hero-logo .logo-letter-accent { --fill-color: #c8453a; }
.hero-logo .l-G  { animation-delay: 0.35s; }
.hero-logo .l-r  { animation-delay: 0.50s; }
.hero-logo .l-L  { animation-delay: 0.63s; }
.hero-logo .l-ap { animation-delay: 0.73s; }
.hero-logo .l-C  { animation-delay: 0.81s; }
.hero-logo .l-a  { animation-delay: 0.91s; }

.logo-light .logo-letter, .logo-light .logo-letter-accent {
  fill: rgba(245,242,236,0.55); stroke: none; animation: none;
}
.logo-light .logo-letter-accent { fill: #c8453a; }
.logo-light .logo-box-rect  { animation: none; opacity: 1; }
.logo-light .bird-silhouette { animation: none; opacity: 1; }

/* ── NAV ─────────────────────────────────────────────────────── */
#site-header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 5vw;
  background: rgba(245,242,236,.93); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); transition: box-shadow .3s;
}
#site-header.scrolled { box-shadow: 0 2px 24px rgba(13,13,13,.09); }
.site-logo-link { text-decoration: none; display: flex; align-items: center; }
.main-nav ul   { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
.main-nav a    { font-size:.875rem; font-weight:500; color:var(--ink); text-decoration:none; letter-spacing:.02em; opacity:.65; transition:opacity .2s; }
.main-nav a:hover { opacity:1; }
.nav-cta { background:var(--accent)!important; color:#fff!important; opacity:1!important; padding:.5rem 1.2rem; border-radius:2rem; font-weight:600!important; transition:background .2s!important; }
.nav-cta:hover { background:#a33530!important; }

/* ── GLOBAL SECTION DEFAULTS ─────────────────────────────────── */
.section-pad { padding: 6rem 5vw; }
.section-pad > div { width:100%; box-sizing:border-box; }
.sl  { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.85rem; }
h1, h2.section-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem,3.2vw,2.75rem);
  letter-spacing: -.03em; line-height:1.1; margin-bottom:1.05rem;
}
h1 { font-size: clamp(2.6rem,4.5vw,4.2rem); line-height:1.05; }
h1 em { color: var(--accent); font-style: italic; }
.ssub { color:var(--muted); font-size:1rem; max-width:530px; line-height:1.72; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary {
  background:var(--ink); color:var(--paper); padding:.9rem 2rem; border-radius:3rem;
  font-weight:600; font-size:.95rem; text-decoration:none;
  transition:transform .2s,box-shadow .2s; box-shadow:0 4px 20px rgba(13,13,13,.2); display:inline-block;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(13,13,13,.25); color:var(--paper); }
.btn-sec { color:var(--ink); font-weight:500; font-size:.95rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; opacity:.65; transition:opacity .2s; }
.btn-sec:hover { opacity:1; color:var(--ink); }
.btn-sec .arr, .blog-read-more .arr { display:inline-block; transition:transform .2s; }
.btn-sec:hover .arr, .blog-read-more:hover .arr { transform:translateX(4px); }
.btn-outline {
  border:1.5px solid var(--ink); color:var(--ink); padding:.68rem 1.7rem; border-radius:3rem;
  font-weight:600; font-size:.88rem; text-decoration:none; transition:background .2s,color .2s; display:inline-block;
}
.btn-outline:hover { background:var(--ink); color:var(--paper); }
.btn-cta {
  background:var(--accent); color:#fff; padding:1.05rem 2.6rem; border-radius:3rem;
  font-weight:700; font-size:.97rem; text-decoration:none;
  transition:transform .2s,box-shadow .2s; box-shadow:0 4px 24px rgba(200,69,58,.32);
  display:inline-block; position:relative; z-index:999; isolation:isolate;
  cursor:pointer;
}
.btn-cta:hover { transform:translateY(-3px); box-shadow:0 8px 36px rgba(200,69,58,.44); color:#fff; }

/* ── HERO ─────────────────────────────────────────────────────── */
#hero {
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  align-items:center; padding:7rem 5vw 4rem; gap:4rem; position:relative;
  /* overflow:hidden removed — was creating stacking context blocking clicks on elements below */
}
.hero-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 85% 30%,rgba(200,69,58,.07) 0%,transparent 70%),
             radial-gradient(ellipse 40% 50% at 10% 80%,rgba(232,130,60,.06) 0%,transparent 70%);
}
.hero-grid-lines {
  position:absolute; inset:0; z-index:0; opacity:.03; pointer-events:none;
  background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);
  background-size:48px 48px;
}
.hero-content    { position:relative; z-index:1; }
.hero-logo-wrap  { margin-bottom:1.75rem; }
.hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(200,69,58,.1); color:var(--accent); font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:.35rem 1rem; border-radius:2rem;
  margin-bottom:1.1rem; border:1px solid rgba(200,69,58,.2);
}
.pulse { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:blink 2s infinite; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero-sub { font-size:1.08rem; color:var(--muted); max-width:480px; margin-bottom:2.25rem; line-height:1.75; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-stats { display:flex; gap:2.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); }
.stat-num { font-family:var(--serif); font-size:2rem; letter-spacing:-.04em; line-height:1; }
.stat-num span { color:var(--accent); }
.stat-label { font-size:.78rem; color:var(--muted); margin-top:.2rem; }
.hero-visual { position:relative; z-index:1; }

.mock-browser {
  background:#fff; border-radius:12px;
  box-shadow:0 20px 60px rgba(13,13,13,.12),0 2px 8px rgba(13,13,13,.06);
  overflow:hidden; border:1px solid var(--border);
  animation:float 6s ease-in-out infinite; position:relative;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.browser-bar { background:#f0ede8; padding:.65rem 1rem; display:flex; align-items:center; gap:.45rem; border-bottom:1px solid var(--border); }
.b-dot { width:9px; height:9px; border-radius:50%; }
.b-dot-r{background:#ff5f57} .b-dot-y{background:#ffbd2e} .b-dot-g{background:#28c840}
.url-bar { flex:1; background:#fff; border-radius:4px; padding:.22rem .6rem; font-size:.67rem; color:var(--muted); margin-left:.5rem; }
.mock-content { padding:1.2rem; }
.mock-hero-img {
  width:100%; height:128px; background:linear-gradient(135deg,#0d0d0d,#2d2d2d);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--serif); font-size:1.15rem; position:relative; overflow:hidden;
}
.mock-hero-img::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 70% 40%,rgba(200,69,58,.35) 0%,transparent 60%); pointer-events:none; }
.mock-hero-img span { position:relative; z-index:1; }
.mock-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.45rem; margin-top:.6rem; }
.mock-cs { height:44px; border-radius:6px; background:var(--paper); }
.mock-cs:first-child { background:linear-gradient(90deg,rgba(200,69,58,.12),rgba(232,130,60,.08)); }
.fbadge {
  position:absolute; background:#fff; border-radius:10px; padding:.5rem .85rem;
  box-shadow:0 8px 24px rgba(0,0,0,.1); display:flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:600; border:1px solid var(--border);
}
.fb1 { right:-1.5rem; top:18%; animation:floatB 5s ease-in-out infinite; }
.fb2 { left:-1rem; bottom:14%; animation:floatB 5s ease-in-out -2.5s infinite; }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── MARQUEE ─────────────────────────────────────────────────── */
.mq-wrap {
  padding:1.2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden; background:var(--ink);
}
.mq-track { display:flex; gap:3rem; align-items:center; animation:mq 28s linear infinite; white-space:nowrap; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq-item { font-size:.77rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,242,236,.43); display:flex; align-items:center; gap:1rem; }
.mq-item span { color:var(--accent); font-size:.9rem; }

/* ── SERVICES ────────────────────────────────────────────────── */
#services { background:var(--ink); color:var(--paper); }
#services .sl    { color:var(--accent2); }
#services h2     { color:var(--paper); }
#services .ssub  { color:rgba(245,242,236,.58); }
.svc-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5px; margin-top:2.75rem; border:1.5px solid rgba(255,255,255,.07); border-radius:14px; overflow:hidden;
}
.svc-card { background:rgba(255,255,255,.03); padding:2.2rem; transition:background .3s; border-right:1.5px solid rgba(255,255,255,.05); }
.svc-card:last-child { border-right:none; }
.svc-card:hover { background:rgba(255,255,255,.07); }
.svc-icon { width:46px; height:46px; background:rgba(200,69,58,.14); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; }
.svc-card h3 { font-family:var(--serif); font-size:1.28rem; margin-bottom:.6rem; letter-spacing:-.02em; }
.svc-card p  { font-size:.86rem; color:rgba(245,242,236,.5); line-height:1.7; margin-bottom:1.2rem; }
.tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.tag  { font-size:.69rem; font-weight:600; padding:.2rem .55rem; border-radius:100px; background:rgba(255,255,255,.06); color:rgba(245,242,236,.46); letter-spacing:.04em; }
.tag-h { background:rgba(200,69,58,.18); color:#e8823c; }

/* ── PORTFOLIO ───────────────────────────────────────────────── */
#portfolio { background:var(--paper); }
.pg { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:220px 220px 220px; gap:1.1rem; margin-top:2.75rem; }
.pi { border-radius:11px; overflow:hidden; cursor:pointer; height:100%; transition:transform .25s, box-shadow .25s; }
.pi:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(0,0,0,.35); }
.pi:nth-child(1){ grid-column:1; grid-row:1; }
.pi:nth-child(2){ grid-column:2; grid-row:1; }
.pi:nth-child(3){ grid-column:3; grid-row:1; }
.pi:nth-child(4){ grid-column:1 / 3; grid-row:2; }
.pi:nth-child(5){ grid-column:3; grid-row:2; }
.pi:nth-child(6){ grid-column:1 / 4; grid-row:3; }
.pbg { width:100%; height:100%; display:flex; align-items:flex-end; padding:1.4rem; position:relative; transition:transform .4s ease; overflow:hidden; }
.pi:hover .pbg { transform:scale(1.04); }
.pbg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(13,13,13,.92) 0%,rgba(13,13,13,.5) 30%,transparent 55%); pointer-events:none; z-index:2; }
.pinfo { position:relative; z-index:3; }
.pname { font-family:var(--serif); font-size:1.02rem; color:#fff; line-height:1.2; }
.ptype { font-size:.68rem; color:rgba(255,255,255,.56); margin-top:.18rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.bg-p  { background:linear-gradient(135deg,#1a3a5c,#0d2640); }

/* ── Portfolio card mockups ── */
.pmock {
  position: absolute;
  top: .75rem; left: .85rem; right: .85rem;
  bottom: 3.6rem;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pmock > div {
  font-size: clamp(8px, 1vw, 13px);
}


.bg-pos{ background:linear-gradient(135deg,#2d1a0d,#4a2e1a); }
.bg-r  { background:linear-gradient(135deg,#0d3d1a,#1a5c30); }
.bg-c  { background:linear-gradient(135deg,#1a0d3d,#2d1a5c); }
.bg-f  { background:linear-gradient(135deg,#3d1a0d,#5c2d1a); }
.bg-mg { background:linear-gradient(135deg,#0d0d12,#1a1a2e); }
.port-note { text-align:center; margin-top:2rem; font-size:.86rem; color:var(--muted); }
.port-note a { color:var(--accent); text-decoration:none; font-weight:600; }

/* ── PROCESS ─────────────────────────────────────────────────── */
#process { background:#fff; }
.proc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); margin-top:2.75rem; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.proc-step { padding:2.2rem; border-right:1px solid var(--border); position:relative; }
.proc-step:last-child { border-right:none; }
.step-n { font-family:var(--serif); font-size:2.6rem; color:rgba(13,13,13,.05); line-height:1; margin-bottom:.6rem; }
.step-t { font-family:var(--serif); font-size:1.12rem; margin-bottom:.5rem; }
.step-d { font-size:.84rem; color:var(--muted); line-height:1.65; }
.step-dot { position:absolute; right:-8px; top:50%; transform:translateY(-50%); width:14px; height:14px; background:var(--accent); border-radius:50%; z-index:1; border:3px solid #fff; }
.proc-step:last-child .step-dot { display:none; }

/* ── SEO/AIO ─────────────────────────────────────────────────── */
#seo-aio { background:var(--paper); display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; padding:6rem 5vw; }
.seo-vis { background:var(--ink); border-radius:14px; padding:2rem; position:relative; overflow:hidden; }
.seo-vis::before { content:''; position:absolute; top:-40%; right:-20%; width:260px; height:260px; background:radial-gradient(circle,rgba(200,69,58,.22) 0%,transparent 70%); pointer-events:none; }
.spill { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:100px; padding:.52rem 1.1rem; font-size:.8rem; color:rgba(245,242,236,.76); display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; position:relative; z-index:1; transition:transform .25s; }
.spill:hover { transform:translateX(6px); }
.pill-r { margin-left:auto; background:var(--accent); color:#fff; font-size:.6rem; font-weight:700; padding:.1rem .4rem; border-radius:4px; }
.ai-bdg { display:inline-flex; align-items:center; gap:.3rem; background:linear-gradient(90deg,rgba(200,69,58,.17),rgba(232,130,60,.17)); border:1px solid rgba(232,130,60,.27); color:var(--accent2); font-size:.67rem; font-weight:700; letter-spacing:.06em; padding:.17rem .52rem; border-radius:4px; text-transform:uppercase; }
.seo-hdr { display:flex; align-items:center; gap:.6rem; margin-bottom:1.3rem; position:relative; z-index:1; }
.seo-hdr-lbl { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,242,236,.42); }
.seo-ms { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.07); position:relative; z-index:1; }
.ms-box { background:rgba(255,255,255,.04); border-radius:8px; padding:.6rem; text-align:center; }
.ms-box.hot { background:rgba(200,69,58,.13); border:1px solid rgba(200,69,58,.2); }
.ms-n { font-family:var(--serif); font-size:1.35rem; color:#fff; line-height:1; }
.ms-box.hot .ms-n { color:#e8823c; }
.ms-l { font-size:.65rem; color:rgba(245,242,236,.35); margin-top:.12rem; }
.seo-list { list-style:none; margin-top:1.4rem; }
.seo-list li { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.seo-list li:last-child { border-bottom:none; }
.ck { width:19px; height:19px; background:rgba(200,69,58,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:.63rem; flex-shrink:0; margin-top:2px; }

/* ── BLOG CARDS (homepage + archive) ────────────────────────── */
.blog-section { background:#fff; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.4rem; margin-top:2.75rem; }
.blog-card { border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--paper); transition:transform .3s,box-shadow .3s; }
.blog-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(13,13,13,.1); }
.bcard-img { height:220px; overflow:hidden; position:relative; }
.bcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .bcard-img img { transform:scale(1.04); }
.bcard-img .bimg-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.bi1{background:linear-gradient(135deg,#0d2640,#1a3a5c)} .bi2{background:linear-gradient(135deg,#2d1a0d,#4a2e1a)} .bi3{background:linear-gradient(135deg,#0d3d1a,#1a5c30)}
.bcard-body { padding:1.4rem; }
.blog-meta { font-size:.7rem; color:var(--muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.55rem; display:flex; gap:.65rem; align-items:center; flex-wrap:wrap; }
.bdot { width:3px; height:3px; border-radius:50%; background:var(--muted); }
.btag { background:rgba(200,69,58,.1); color:var(--accent); font-size:.66rem; font-weight:700; padding:.13rem .48rem; border-radius:100px; }
.blog-card h3 { font-family:var(--serif); font-size:1.12rem; line-height:1.3; margin-bottom:.55rem; letter-spacing:-.02em; }
.blog-card h3 a { color:var(--ink); text-decoration:none; transition:color .2s; }
.blog-card h3 a:hover { color:var(--accent); }
.bex { font-size:.84rem; color:var(--muted); line-height:1.65; margin-bottom:.9rem; }
.blog-read-more { font-size:.78rem; font-weight:600; color:var(--accent); text-decoration:none; display:inline-flex; align-items:center; gap:.28rem; }
.blog-cta-row { display:flex; justify-content:center; margin-top:2.5rem; }

/* ── BLOG ARCHIVE PAGE ───────────────────────────────────────── */
.archive-hero { padding:8rem 5vw 4rem; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.archive-hero::before { content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(200,69,58,.14) 0%,transparent 70%); pointer-events:none; }
.archive-hero .sl { color:var(--accent2); }
.archive-hero h1 { color:var(--paper); font-size:clamp(2.2rem,4vw,3.5rem); position:relative; z-index:1; }
.archive-hero p  { color:rgba(245,242,236,.58); max-width:560px; position:relative; z-index:1; margin-top:.75rem; }
.archive-filter { padding:2rem 5vw; background:#fff; border-bottom:1px solid var(--border); display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.filter-label   { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:.4rem; }
.filter-btn     { font-size:.75rem; font-weight:600; padding:.3rem .8rem; border-radius:100px; border:1.5px solid var(--border); background:transparent; cursor:pointer; transition:all .2s; color:var(--muted); }
.filter-btn.active, .filter-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.archive-grid   { padding:4rem 5vw; }
.blog-grid-full { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.6rem; }

/* Pagination */
.grlca-pagination { display:flex; justify-content:center; gap:.5rem; padding:3rem 5vw; }
.grlca-pagination a, .grlca-pagination span {
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:600; text-decoration:none; color:var(--ink); border:1.5px solid var(--border); transition:all .2s;
}
.grlca-pagination a:hover { border-color:var(--accent); color:var(--accent); }
.grlca-pagination .current { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── SINGLE POST ─────────────────────────────────────────────── */
.single-hero { padding:8rem 5vw 0; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.single-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(200,69,58,.15) 0%,transparent 60%); pointer-events:none; }
.single-hero-inner { position:relative; z-index:1; max-width:860px; }
.post-cats { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.post-cat  { background:rgba(200,69,58,.15); color:var(--accent2); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .65rem; border-radius:100px; text-decoration:none; transition:background .2s; }
.post-cat:hover { background:rgba(200,69,58,.3); }
.single-hero h1 { font-family:var(--serif); font-size:clamp(2rem,4.5vw,3.5rem); line-height:1.1; letter-spacing:-.03em; color:var(--paper); margin-bottom:1.2rem; }
.post-meta-bar  { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; font-size:.8rem; color:rgba(245,242,236,.55); padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.08); }
.post-meta-bar strong { color:rgba(245,242,236,.8); }
.post-meta-bar .sep { opacity:.3; }
.post-feat-img  { width:100%; max-height:480px; object-fit:cover; display:block; border-radius:14px 14px 0 0; margin-top:2.5rem; position:relative; z-index:1; }

.single-body { display:grid; grid-template-columns:1fr 280px; gap:4rem; padding:4rem 5vw; align-items:start; max-width:1200px; margin:0 auto; }

/* Article content */
.post-content { max-width:720px; }
.post-content h2 { font-family:var(--serif); font-size:1.75rem; letter-spacing:-.02em; margin:2.5rem 0 1rem; }
.post-content h3 { font-family:var(--serif); font-size:1.3rem; margin:2rem 0 .75rem; }
.post-content h4 { font-weight:700; font-size:1rem; margin:1.5rem 0 .5rem; }
.post-content p  { font-size:1.05rem; line-height:1.8; margin-bottom:1.4rem; color:#1a1a1a; }
.post-content ul, .post-content ol { margin:1rem 0 1.4rem 1.5rem; }
.post-content li { font-size:1.05rem; line-height:1.75; margin-bottom:.4rem; }
.post-content a  { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(200,69,58,.3); }
.post-content a:hover { text-decoration-color:var(--accent); }
.post-content blockquote {
  border-left:3px solid var(--accent); margin:2rem 0; padding:.8rem 1.4rem;
  background:rgba(200,69,58,.04); border-radius:0 8px 8px 0;
  font-family:var(--serif); font-size:1.15rem; font-style:italic; color:var(--muted);
}
.post-content blockquote p { margin-bottom:0; font-size:1.15rem; }
.post-content img { border-radius:10px; margin:1.5rem 0; }
.post-content pre { background:var(--ink); color:var(--paper); padding:1.2rem; border-radius:8px; overflow-x:auto; margin:1.4rem 0; font-size:.85rem; }
.post-content code { font-size:.88em; background:rgba(13,13,13,.06); padding:.1em .35em; border-radius:4px; }
.post-content pre code { background:none; padding:0; font-size:inherit; }
.post-content table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9rem; }
.post-content th { background:var(--ink); color:var(--paper); padding:.6rem 1rem; text-align:left; font-weight:600; }
.post-content td { padding:.6rem 1rem; border-bottom:1px solid var(--border); }
.post-content tr:nth-child(even) td { background:rgba(13,13,13,.02); }

/* Post tags */
.post-tags { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.post-tags-label { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.post-tag { font-size:.72rem; font-weight:600; padding:.22rem .65rem; border-radius:100px; background:rgba(13,13,13,.06); color:var(--muted); text-decoration:none; transition:all .2s; }
.post-tag:hover { background:var(--accent); color:#fff; }

/* Author box */
.author-box { margin-top:2.5rem; background:#fff; border-radius:12px; padding:1.5rem; border:1px solid var(--border); display:flex; gap:1.2rem; align-items:flex-start; }
.author-av   { width:56px; height:56px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.2rem; }
.author-name { font-weight:700; font-size:.95rem; margin-bottom:.2rem; }
.author-bio  { font-size:.85rem; color:var(--muted); line-height:1.6; }

/* Sidebar */
.post-sidebar { position:sticky; top:7rem; }
.sidebar-widget { background:#fff; border-radius:12px; padding:1.4rem; border:1px solid var(--border); margin-bottom:1.4rem; }
.widget-title { font-family:var(--serif); font-size:1rem; margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); }
.toc-list { list-style:none; }
.toc-list li { padding:.3rem 0; border-bottom:1px solid rgba(13,13,13,.04); }
.toc-list li:last-child { border-bottom:none; }
.toc-list a { font-size:.82rem; color:var(--muted); text-decoration:none; transition:color .2s; display:flex; gap:.5rem; }
.toc-list a:hover { color:var(--accent); }
.toc-list .toc-num { color:var(--accent); font-weight:700; flex-shrink:0; }
.sidebar-recent-post { display:flex; gap:.8rem; padding:.6rem 0; border-bottom:1px solid rgba(13,13,13,.05); }
.sidebar-recent-post:last-child { border-bottom:none; }
.srp-thumb { width:52px; height:52px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--paper); }
.srp-title { font-size:.8rem; font-weight:600; line-height:1.3; }
.srp-title a { color:var(--ink); text-decoration:none; }
.srp-title a:hover { color:var(--accent); }
.srp-date { font-size:.68rem; color:var(--muted); margin-top:.2rem; }
.sidebar-cats a { display:flex; justify-content:space-between; padding:.35rem 0; font-size:.84rem; color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(13,13,13,.04); transition:color .2s; }
.sidebar-cats a:hover { color:var(--accent); }
.sidebar-cats span { font-size:.7rem; background:rgba(13,13,13,.06); padding:.1rem .4rem; border-radius:100px; }

/* Related posts */
.related-posts { padding:4rem 5vw; background:var(--paper); border-top:1px solid var(--border); }
.related-posts .sl { color:var(--accent); }
.related-posts h2 { font-size:clamp(1.5rem,2.5vw,2rem); }

/* Share bar */
.share-bar { margin-top:2rem; padding:1rem 1.4rem; background:rgba(200,69,58,.05); border-radius:10px; border:1px solid rgba(200,69,58,.12); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.share-label { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.share-btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; padding:.4rem .9rem; border-radius:100px; text-decoration:none; transition:all .2s; }
.share-btn-fb  { background:#1877f2; color:#fff; }
.share-btn-li  { background:#0a66c2; color:#fff; }
.share-btn-tw  { background:#000; color:#fff; }
.share-btn-cp  { background:var(--paper); color:var(--ink); border:1.5px solid var(--border); cursor:pointer; font-family:var(--sans); }
.share-btn:hover { opacity:.85; }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
#testimonials { background:var(--paper); }
.tgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:1.2rem; margin-top:2.75rem; }
.tc { background:#fff; border-radius:12px; padding:1.7rem; border:1px solid var(--border); position:relative; }
.tc::before { content:'\201C'; font-family:var(--serif); font-size:4.5rem; color:rgba(200,69,58,.11); position:absolute; top:.35rem; left:1.05rem; line-height:1; }
.ttext  { font-size:.87rem; line-height:1.72; margin-bottom:1.2rem; padding-top:1.35rem; }
.tauthor{ display:flex; align-items:center; gap:.6rem; }
.tav    { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.8rem; }
.tname  { font-weight:600; font-size:.84rem; }
.trole  { font-size:.7rem; color:var(--muted); }
.stars  { color:#f59e0b; font-size:.7rem; margin-bottom:.12rem; }

/* ── FAQ ─────────────────────────────────────────────────────── */
#faq  { background:#fff; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-top:2.6rem; }
.fi   { background:var(--paper); border-radius:11px; padding:1.35rem; border:1px solid var(--border); cursor:pointer; transition:border-color .2s; }
.fi.open { border-color:rgba(200,69,58,.25); }
.fq  { font-weight:600; font-size:.9rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.ftog{ width:21px; height:21px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:.88rem; flex-shrink:0; transition:transform .3s,background .2s; border:1px solid var(--border); }
.fi.open .ftog { transform:rotate(45deg); background:var(--accent); color:#fff; border-color:var(--accent); }
.fa  { font-size:.84rem; color:var(--muted); line-height:1.68; max-height:0; overflow:hidden; transition:max-height .35s ease,margin-top .3s; }
.fi.open .fa { max-height:250px; margin-top:.65rem; }

/* ── CTA ─────────────────────────────────────────────────────── */
/* overflow:hidden removed — was creating stacking context trapping button below fixed overlays */
.cta-section { background:var(--ink); text-align:center; padding:7rem 5vw; }
.cta-section h2 { color:var(--paper); max-width:670px; margin:0 auto 1.3rem; font-size:clamp(1.9rem,3.2vw,2.75rem); }
.cta-section p  { color:rgba(245,242,236,.56); font-size:1.04rem; max-width:470px; margin:0 auto 2.2rem; }
.cta-section a, .cta-section button { display:inline-block; }

/* ── FOOTER ──────────────────────────────────────────────────── */
#site-footer { background:#080808; color:rgba(245,242,236,.36); padding:2.6rem 5vw; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; }
.footer-logo-row { margin-bottom:.45rem; display:flex; }
.footer-copy     { font-size:.76rem; }
.footer-links    { display:flex; gap:1.4rem; list-style:none; }
.footer-links a  { color:rgba(245,242,236,.36); text-decoration:none; font-size:.8rem; transition:color .2s; }
.footer-links a:hover { color:var(--paper); }

/* ── REVEAL ANIMATION ────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; pointer-events:none; }
.reveal.visible { opacity:1; transform:none; pointer-events:auto; }

/* ── WORDPRESS CORE ──────────────────────────────────────────── */
.wp-caption { max-width:100%; }
.wp-caption-text { font-size:.8rem; color:var(--muted); text-align:center; margin-top:.4rem; }
.aligncenter { display:block; margin:1.5rem auto; }
.alignleft   { float:left; margin:0 1.5rem 1rem 0; }
.alignright  { float:right; margin:0 0 1rem 1.5rem; }
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px) {
  .single-body { grid-template-columns:1fr; }
  .post-sidebar { position:static; }
  #seo-aio { grid-template-columns:1fr; gap:3rem; }
}
@media(max-width:900px) {
  #hero { grid-template-columns:1fr; padding:6rem 5vw 3rem; }
  .hero-visual { display:none; }
  .pg { display:flex; flex-direction:column; }
  .fgrid { grid-template-columns:1fr; }
  #site-footer { grid-template-columns:1fr; }
  .main-nav { display:none; }
  .proc-grid { grid-template-columns:1fr 1fr; }
  .single-hero { padding:7rem 5vw 0; }
}
@media(max-width:600px) {
  .svc-grid, .tgrid, .blog-grid, .blog-grid-full { grid-template-columns:1fr; }
  .proc-grid { grid-template-columns:1fr; }
  .hero-stats { gap:1.4rem; }
  .archive-hero, .single-hero { padding-top:6rem; }
  .footer-links { flex-wrap:wrap; gap:.8rem; }
}

/* ── PRICING ─────────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:2.75rem; }
.pricing-card { border-radius:14px; padding:2.2rem; border:1px solid var(--border); background:#fff; position:relative; transition:transform .3s,box-shadow .3s; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(13,13,13,.1); }
.pricing-card.featured { background:var(--ink); color:var(--paper); border-color:transparent; }
.pricing-card.featured .pricing-desc { color:rgba(245,242,236,.55); }
.pricing-card.featured .pricing-item { color:rgba(245,242,236,.75); border-color:rgba(255,255,255,.07); }
.pricing-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .8rem; border-radius:100px; white-space:nowrap; }
.pricing-tier { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.pricing-card.featured .pricing-tier { color:var(--accent2); }
.pricing-price { font-family:var(--serif); font-size:2.6rem; letter-spacing:-.04em; line-height:1; margin-bottom:.3rem; }
.pricing-price span { font-size:1rem; font-weight:400; opacity:.55; font-family:var(--sans); }
.pricing-name { font-family:var(--serif); font-size:1.18rem; margin-bottom:.5rem; }
.pricing-desc { font-size:.84rem; color:var(--muted); line-height:1.65; margin-bottom:1.4rem; }
.pricing-items { list-style:none; margin-bottom:1.6rem; }
.pricing-item { display:flex; gap:.55rem; padding:.42rem 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.pricing-item:last-child { border-bottom:none; }
.pricing-check { color:var(--accent); font-weight:700; flex-shrink:0; }

/* ── PAGE TEMPLATES responsive ───────────────────────────────── */
@media(max-width:900px) {
  .page-two-col { grid-template-columns:1fr !important; gap:2.5rem !important; }
}

/* ── THIRD-PARTY WIDGET Z-INDEX FIXES ────────────────────────── */
/* SupportCandy and similar chat widgets should not block CTA buttons */
#wpsc-btn-container,
.wpsc-btn-container,
[id*="supportcandy"],
[class*="supportcandy"],
[id*="live-chat"],
[class*="live-chat"],
[id*="chat-widget"],
[class*="chat-widget"] {
  z-index: 9 !important;
}

.plink { display:inline-block; margin-top:.55rem; font-size:.72rem; font-weight:600; color:rgba(245,242,236,.65); text-decoration:none; }