/* ═══════════════════════════════════════════
   TOTUMIM CONSULTS — styles.css v4
   Big 4 typography · Magnific UI aesthetic
   ═══════════════════════════════════════════ */

/* ── TOKENS ──
   Brand colors are derived directly from the Totumim logo:
   plum/magenta  #7A007A  and  teal  #006A7A
   Gold is gone — every accent below is a tint, shade, or
   desaturated step of those two logo hues. */
:root {
  /* Brand — plum (primary, from logo) */
  --plum:    #6B1768;
  --plum-d:  #4A0F49;
  --plum-l:  #8C3789;
  --plum-tint: #F3E9F2;

  /* Brand — teal (secondary, from logo) */
  --teal-a:   #0B5965;
  --teal-a-d: #053A42;
  --teal-a-l: #2C7A87;
  --teal-tint: #E7F0F1;

  /* Legacy alias so any leftover references keep working */
  --gold:   var(--plum);
  --gold-d: var(--plum-d);
  --gold-l: var(--plum-l);
  --navy:   #14101B;

  /* Light theme */
  --bg:    #FAF8F7;
  --bg2:   #F2EEF0;
  --bg3:   #E9E3E6;
  --surf:  #FFFFFF;
  --surf2: #F6F1F3;
  --ink:   #1B1620;
  --ink2:  #2B2330;
  --mu:    #6E6670;
  --mu2:   #9D959E;
  --bd:    rgba(27,22,32,.09);
  --bd2:   rgba(27,22,32,.04);
  --sh:    0 2px 24px rgba(27,22,32,.07);
  --sh2:   0 8px 40px rgba(27,22,32,.10);

  /* Type */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;

  /* Radius */
  --r:  3px;
  --rl: 8px;
}

[data-theme="dark"] {
  --plum:      #B968B5;
  --plum-d:    #8C3789;
  --plum-l:    #D596D2;
  --plum-tint: rgba(185,104,181,.08);

  --teal-a:    #4FA3AF;
  --teal-a-d:  #2C7A87;
  --teal-a-l:  #79C1CB;
  --teal-tint: rgba(79,163,175,.08);

  --gold:   var(--plum);
  --gold-d: var(--plum-d);
  --gold-l: var(--plum-l);

  --bg:    #0E0C12;
  --bg2:   #16131B;
  --bg3:   #201C26;
  --surf:  #1A1620;
  --surf2: #221D28;
  --ink:   #F2EEF1;
  --ink2:  #D2CAD3;
  --mu:    #968E99;
  --mu2:   #564E5A;
  --bd:    rgba(255,255,255,.08);
  --bd2:   rgba(255,255,255,.03);
  --sh:    0 2px 24px rgba(0,0,0,.45);
  --sh2:   0 8px 40px rgba(0,0,0,.55);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.con {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

/* ── SCROLL REVEAL ── */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }
.rv.d4 { transition-delay: .4s; }

/* ══════════════════════════════════════
   ADMIN GATE & PANEL
══════════════════════════════════════ */
#ag {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,15,28,.96); backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
}
#ag.sh { display: flex; }
.ag-box {
  background: #141C2E; border: 1px solid rgba(107,23,104,.2);
  border-radius: var(--rl); padding: 2.5rem 2rem; width: 100%; max-width: 400px;
  text-align: center;
}
.ag-logo { height: 48px; margin: 0 auto 1.5rem; object-fit: contain; }
.ag-t { font-family: var(--serif); font-size: 1.4rem; color: #EDF0F5; margin-bottom: .4rem; }
.ag-s { font-size: .82rem; color: #7A8298; margin-bottom: 1.5rem; }
#agpw, .ag-btn, .ag-skip, .ag-err { display: block; width: 100%; }
#agpw {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); color: #EDF0F5; font-size: .9rem;
  padding: .7rem 1rem; margin-bottom: .75rem; text-align: center;
  letter-spacing: .1em;
}
.ag-btn {
  background: var(--gold); color: #FBF6FA; border: none; border-radius: var(--r);
  padding: .75rem; font-size: .85rem; font-weight: 600; cursor: pointer;
  letter-spacing: .06em; transition: background .2s;
}
.ag-btn:hover { background: var(--gold-l); }
.ag-err { display: none; color: #F87171; font-size: .78rem; margin-top: .5rem; }
.ag-skip { background: none; border: none; color: #7A8298; font-size: .78rem; cursor: pointer; }
.ag-skip:hover { color: #EDF0F5; }

#adm { display: none; position: fixed; inset: 0; z-index: 9998; background: #0B0F1A; flex-direction: column; }
#adm.sh { display: flex; overflow: hidden; }
.adm-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem; background: #141C2E;
  border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.adm-navl { display: flex; align-items: center; gap: 1rem; }
.adm-navl img { height: 32px; object-fit: contain; }
.adm-nt { font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.6); }
.adm-navr { display: flex; align-items: center; gap: .75rem; }
.adm-sv, .adm-cl { padding: .5rem 1rem; border-radius: var(--r); font-size: .78rem; font-weight: 600; cursor: pointer; border: none; transition: .2s; }
.adm-sv { background: var(--gold); color: #FBF6FA; }
.adm-sv:hover { background: var(--gold-l); }
.adm-sv.ok { background: #10B981; color: #fff; }
.adm-cl { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); }
.adm-cl:hover { background: rgba(255,255,255,.12); }
.adm-body { display: flex; flex: 1; overflow: hidden; }
.adm-side { width: 200px; background: #111825; border-right: 1px solid rgba(255,255,255,.05); padding: 1rem 0; flex-shrink: 0; overflow-y: auto; }
.adm-me button {
  display: block; width: 100%; text-align: left; padding: .65rem 1.25rem;
  background: none; border: none; color: rgba(255,255,255,.5); font-size: .82rem; cursor: pointer;
  transition: .2s; border-left: 2px solid transparent;
}
.adm-me button:hover { color: #fff; background: rgba(255,255,255,.04); }
.adm-me button.ac { color: var(--gold); border-left-color: var(--gold); background: rgba(107,23,104,.06); }
.adm-main { flex: 1; overflow-y: auto; padding: 2rem; }
.adm-sec { display: none; }
.adm-sec.ac { display: block; }
.adm-sec h2 { font-family: var(--serif); font-size: 1.3rem; color: #EDF0F5; margin-bottom: 1.5rem; }
.adm-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: var(--rl); padding: 1.25rem; margin-bottom: 1rem; }
.fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.fg_, .fg { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.fg_ label, .fg label { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.fg_ input, .fg_ textarea, .fg_ select,
.fg input, .fg textarea, .fg select {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); color: #EDF0F5; font-size: .86rem; padding: .6rem .85rem;
  font-family: var(--sans); resize: vertical; transition: border .2s;
}
.fg_ input:focus, .fg_ textarea:focus, .fg input:focus, .fg textarea:focus, .fg select:focus {
  outline: none; border-color: var(--gold);
}
.add-b {
  padding: .55rem 1.1rem; background: rgba(107,23,104,.1); border: 1px solid rgba(107,23,104,.3);
  border-radius: var(--r); color: var(--gold); font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: .2s; letter-spacing: .05em;
}
.add-b:hover { background: rgba(107,23,104,.2); }
.del-b {
  padding: .35rem .75rem; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25);
  border-radius: var(--r); color: #F87171; font-size: .72rem; cursor: pointer; transition: .2s;
}
.del-b:hover { background: rgba(248,113,113,.2); }
.adm-bdg { padding: .2rem .6rem; border-radius: 20px; font-size: .68rem; font-weight: 600; }
.adm-bdg.pub { background: rgba(16,185,129,.15); color: #10B981; }
.adm-bdg.drft { background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); }
.jb-status { display: flex; align-items: center; gap: .4rem; font-size: .72rem; padding: .25rem .7rem; border-radius: 20px; }
.jb-status.ok { background: rgba(16,185,129,.15); color: #10B981; }
.jb-status.err { background: rgba(248,113,113,.12); color: #F87171; }
.jb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ══════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════ */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(249,247,244,.96);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--bd);
  transition: background .3s, box-shadow .3s;
}
[data-theme="dark"] #site-header {
  background: rgba(11,15,26,.96);
}
#site-header.scrolled { box-shadow: var(--sh); }

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 72px;
  gap: 2rem;
}

.logo-link { display: flex; align-items: center; }
.logo-img { height: 52px; width: auto; transition: opacity .2s; }
.logo-link:hover .logo-img { opacity: .85; }

.main-nav ul {
  display: flex; align-items: center; gap: 0; list-style: none;
  justify-content: center;
}
.main-nav a {
  display: block; padding: .5rem 1.1rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  color: var(--mu); position: relative; transition: color .2s;
}
.main-nav a::after {
  content: ''; position: absolute; bottom: -2px; left: 1.1rem; right: 1.1rem;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-right { display: flex; align-items: center; gap: .75rem; }

.theme-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surf2); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .2s, transform .3s;
}
.theme-btn:hover { border-color: var(--gold); transform: rotate(20deg); }
.theme-btn svg { width: 15px; height: 15px; stroke: var(--ink); }
.icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: block; }

.nav-cta {
  padding: .5rem 1.25rem;
  background: var(--gold); color: #FBF6FA;
  border-radius: var(--r);
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  transition: background .2s, transform .15s;
}
.nav-cta:hover { background: var(--gold-l); transform: translateY(-1px); }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); border-radius: 2px; transition: .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 4.5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -4.5px); }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Subtle geometric grid background */
.hero-bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--bd) 1px, transparent 1px),
    linear-gradient(90deg, var(--bd) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .5;
}
.hero-bg-grid::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 60% 40%, transparent 40%, var(--bg) 100%);
}

.hero-deco {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 50%; height: 100%;
  pointer-events: none; z-index: 0;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 5rem;
  align-items: center;
  position: relative; z-index: 1;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 24px; height: 1px; background: var(--gold);
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 700; line-height: 1.12;
  color: var(--ink); margin-bottom: 1.5rem;
}
.hero-headline em {
  font-style: italic; color: var(--gold);
  position: relative;
}

.hero-sub {
  font-size: 1.05rem; line-height: 1.75; color: var(--mu);
  max-width: 520px; margin-bottom: 2.25rem;
}

.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.btn-primary {
  display: inline-flex; align-items: center;
  padding: .75rem 1.75rem;
  background: var(--gold); color: #FBF6FA;
  border-radius: var(--r);
  font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(107,23,104,.25);
}
.btn-primary:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(107,23,104,.3); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .75rem 1.5rem;
  border: 1px solid var(--bd); border-radius: var(--r);
  font-size: .85rem; font-weight: 500; color: var(--mu);
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost::after { content: '→'; transition: transform .2s; }
.btn-ghost:hover::after { transform: translateX(3px); }

.hero-trust { display: flex; gap: .75rem; flex-wrap: wrap; }
.trust-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .85rem;
  background: var(--surf2); border: 1px solid var(--bd);
  border-radius: 20px;
  font-size: .72rem; font-weight: 500; color: var(--mu); letter-spacing: .02em;
}
.trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* Hero Panel */
.hero-panel {
  background: var(--surf);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 2rem;
  box-shadow: var(--sh2);
  animation: panelFloat 6s ease-in-out infinite;
}
@keyframes panelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.panel-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mu2); margin-bottom: 1.25rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--bd);
}
.panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.pstat { }
.pstat-v {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  color: var(--gold); line-height: 1;
}
.pstat-l { font-size: .72rem; color: var(--mu2); margin-top: .2rem; line-height: 1.3; }
.panel-divider { height: 1px; background: var(--bd); margin-bottom: 1.25rem; }
.panel-checks { display: flex; flex-direction: column; gap: .75rem; }
.panel-check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .82rem; color: var(--mu); line-height: 1.4;
}
.panel-check svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 1px; }

/* Scroll cue */
.hero-scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mu2);
}
.scroll-line {
  width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(.7); transform-origin: top; }
}

/* ══════════════════════════════════════
   MARQUEE STRIP
══════════════════════════════════════ */
.marquee-strip {
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  background: var(--surf2);
  overflow: hidden; padding: .9rem 0;
}
.marquee-track {
  display: flex; align-items: center; gap: 2rem;
  animation: marqueeScroll 28s linear infinite;
  white-space: nowrap; width: max-content;
}
.marquee-track span {
  font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mu); white-space: nowrap;
}
.marquee-dot { color: var(--gold) !important; }
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════
   SECTION TYPOGRAPHY
══════════════════════════════════════ */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }

.section-label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.section-label::before { content: ''; width: 20px; height: 1px; background: var(--gold); }

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700; line-height: 1.18; color: var(--ink); margin-bottom: 1rem;
}

.section-desc { font-size: 1rem; line-height: 1.75; color: var(--mu); max-width: 600px; }

.section-header { margin-bottom: 4rem; }

/* ══════════════════════════════════════
   SERVICES
══════════════════════════════════════ */
.services-section { background: var(--bg); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.service-card {
  background: var(--surf);
  padding: 2.5rem 2rem;
  transition: background .25s;
}
.service-card:hover { background: var(--surf2); }

.sc-num {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--mu2);
  margin-bottom: 1.5rem;
}
.sc-icon {
  width: 48px; height: 48px;
  background: rgba(107,23,104,.1); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--gold);
}
.sc-icon.teal-ic { background: rgba(79,163,175,.12); color: var(--teal-a); }
[data-theme="dark"] .sc-icon.teal-ic { color: var(--teal-a); }
.sc-icon svg { width: 22px; height: 22px; }
.sc-name {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); margin-bottom: .75rem; line-height: 1.3;
}
.sc-desc { font-size: .88rem; line-height: 1.7; color: var(--mu); margin-bottom: 1.25rem; }
.sc-list { list-style: none; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: .45rem; }
.sc-list li {
  font-size: .82rem; color: var(--mu); display: flex; align-items: flex-start; gap: .5rem;
}
.sc-list li::before { content: '—'; color: var(--gold); font-size: .7rem; margin-top: 2px; flex-shrink: 0; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; border-top: 1px solid var(--bd); }
.sc-price { font-size: .78rem; font-weight: 600; color: var(--gold); }
.sc-link {
  font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mu); transition: color .2s;
}
.sc-link:hover { color: var(--gold); }

.services-note {
  text-align: center; font-size: .88rem; color: var(--mu);
}
.services-note a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color .2s; }
.services-note a:hover { border-color: var(--gold); }

/* ══════════════════════════════════════
   NUMBERS BAND
══════════════════════════════════════ */
.numbers-band {
  background: var(--navy);
  padding: 3.5rem 0;
}
[data-theme="dark"] .numbers-band { background: var(--surf2); }
.numbers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; text-align: center;
}
.num-val {
  font-family: var(--serif); font-size: 2.2rem; font-weight: 700;
  color: var(--gold); line-height: 1;
}
.num-lbl { font-size: .75rem; color: rgba(255,255,255,.5); margin-top: .4rem; letter-spacing: .04em; }
[data-theme="dark"] .num-lbl { color: var(--mu); }

/* ══════════════════════════════════════
   BEYOND ACCOUNTING
══════════════════════════════════════ */
.beyond-section { background: var(--bg2); }
.beyond-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.beyond-items { display: flex; flex-direction: column; gap: 1.5rem; margin: 2rem 0; }
.beyond-item { display: flex; gap: 1.25rem; }
.beyond-roman {
  font-family: var(--serif); font-size: .85rem; font-weight: 600;
  color: var(--gold); width: 24px; flex-shrink: 0; padding-top: 2px;
}
.beyond-item-title { font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.beyond-item-desc { font-size: .84rem; line-height: 1.65; color: var(--mu); }
.beyond-note { font-size: .8rem; color: var(--mu2); font-style: italic; line-height: 1.6; }

/* Beyond visual cards */
.beyond-visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; position: relative;
}
.beyond-card {
  background: var(--surf); border: 1px solid var(--bd);
  border-radius: var(--rl); padding: 1.5rem 1.25rem;
  transition: transform .25s, box-shadow .25s;
}
.beyond-card:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.beyond-card.accent { background: var(--teal-a-d); border-color: rgba(79,163,175,.35); }
[data-theme="dark"] .beyond-card.accent { background: rgba(79,163,175,.1); border-color: rgba(79,163,175,.25); }
.bc-icon {
  width: 40px; height: 40px; border-radius: var(--r);
  background: rgba(107,23,104,.1); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; color: var(--gold);
}
.beyond-card.accent .bc-icon { background: rgba(255,255,255,.15); color: #fff; }
.bc-icon svg { width: 20px; height: 20px; }
.bc-title { font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.beyond-card.accent .bc-title { color: #fff; }
.bc-desc { font-size: .78rem; color: var(--mu); line-height: 1.5; }
.beyond-card.accent .bc-desc { color: rgba(255,255,255,.5); }
.beyond-badge {
  grid-column: 1/-1; text-align: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mu2); padding: .5rem;
  border: 1px dashed var(--bd2); border-radius: var(--r);
}

/* ══════════════════════════════════════
   PROCESS
══════════════════════════════════════ */
.process-section { background: var(--bg); }
.process-grid {
  display: flex; align-items: flex-start; gap: 0;
}
.process-step {
  flex: 1; padding: 2rem 1.75rem;
  background: var(--surf); border: 1px solid var(--bd); border-radius: var(--rl);
}
.process-connector {
  width: 40px; flex-shrink: 0;
  margin-top: 2.5rem;
  height: 1px; background: var(--bd); position: relative;
}
.process-connector::after {
  content: ''; position: absolute; right: -4px; top: -4px;
  width: 8px; height: 8px; border-right: 1.5px solid var(--bd); border-top: 1.5px solid var(--bd);
  transform: rotate(45deg);
}
.step-num {
  font-family: var(--serif); font-size: 2rem; font-weight: 700;
  color: var(--gold); opacity: .35; line-height: 1; margin-bottom: .75rem;
}
.step-time {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.step-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.step-desc { font-size: .82rem; line-height: 1.65; color: var(--mu); }

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
.testimonials-section { background: var(--bg2); }
.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px;
  background: var(--bd); border: 1px solid var(--bd); border-radius: var(--rl); overflow: hidden;
}
.testi-card {
  background: var(--surf); padding: 2rem 1.75rem;
}
.tc-stars { color: var(--gold); font-size: .9rem; letter-spacing: .05em; margin-bottom: 1rem; }
.tc-text {
  font-size: .9rem; line-height: 1.75; color: var(--ink2);
  font-style: italic; margin-bottom: 1.5rem;
}
.tc-text::before { content: '"'; color: var(--gold); font-family: var(--serif); font-size: 1.5rem; line-height: 0; vertical-align: -.4rem; margin-right: .15rem; }
.tc-author { display: flex; align-items: center; gap: .75rem; }
.tc-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(107,23,104,.15); border: 1px solid rgba(107,23,104,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: var(--gold);
}
.tc-av.teal-av {
  background: rgba(79,163,175,.15); border-color: rgba(79,163,175,.35); color: var(--teal-a);
}
.tc-name { font-size: .84rem; font-weight: 600; color: var(--ink); }
.tc-role { font-size: .75rem; color: var(--mu2); }

/* ══════════════════════════════════════
   BLOG
══════════════════════════════════════ */
.blog-section { background: var(--bg); }
.blog-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 3rem;
}
.see-all-link {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid transparent; transition: border-color .2s;
  white-space: nowrap; margin-bottom: .3rem;
}
.see-all-link:hover { border-color: var(--gold); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: var(--bd); border: 1px solid var(--bd); border-radius: var(--rl); overflow: hidden; }
.blog-card {
  background: var(--surf); display: flex; flex-direction: column;
  transition: background .2s; text-decoration: none; color: inherit;
}
.blog-card:hover { background: var(--surf2); }
.blog-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg3); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-cat {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .6rem;
}
.blog-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: .6rem; }
.blog-excerpt { font-size: .82rem; line-height: 1.65; color: var(--mu); flex: 1; margin-bottom: 1rem; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--bd); }
.blog-date { font-size: .72rem; color: var(--mu2); }
.blog-read { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
.about-section { background: var(--bg2); }
.about-grid { display: grid; grid-template-columns: 380px 1fr; gap: 5rem; align-items: center; }
.about-frame {
  aspect-ratio: 3/4; max-width: 380px;
  background: linear-gradient(135deg, var(--plum-d) 0%, var(--teal-a-d) 100%);
  border-radius: var(--rl); position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
[data-theme="dark"] .about-frame { background: linear-gradient(135deg, #221428 0%, #122327 100%); }
.about-initials {
  font-family: var(--serif); font-size: 5rem; font-weight: 700;
  color: rgba(255,255,255,.18); letter-spacing: -.05em;
  user-select: none;
}
.about-photo-img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--rl);
}
.about-badge-wrap { position: absolute; bottom: -1rem; right: -1rem; }
.about-badge {
  background: var(--gold); color: #FBF6FA; border-radius: var(--r);
  padding: .75rem 1.1rem; text-align: center; box-shadow: 0 4px 20px rgba(107,23,104,.3);
}
.ab-val { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; line-height: 1; }
.ab-lbl { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: .2rem; opacity: .75; }
.about-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.about-tags .tag {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  padding: .3rem .75rem; border-radius: 20px;
  background: rgba(107,23,104,.1); border: 1px solid rgba(107,23,104,.25); color: var(--gold);
}
.about-p { font-size: .95rem; line-height: 1.8; color: var(--mu); margin-bottom: 1rem; }
.about-quote {
  font-family: var(--serif); font-size: 1.1rem; font-style: italic;
  color: var(--ink); line-height: 1.55;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem;
  border-left: 3px solid var(--gold);
  background: rgba(107,23,104,.05); border-radius: 0 var(--r) var(--r) 0;
}

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.contact-section { background: var(--bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-items { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.contact-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surf); border: 1px solid var(--bd); border-radius: var(--r);
  text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s;
}
.contact-item:hover { border-color: var(--gold); box-shadow: 0 2px 12px rgba(107,23,104,.1); }
.ci-icon {
  width: 38px; height: 38px; border-radius: var(--r); flex-shrink: 0;
  background: rgba(107,23,104,.1); display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.ci-icon svg { width: 16px; height: 16px; }
.ci-lbl { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mu2); }
.ci-val { font-size: .9rem; font-weight: 500; color: var(--ink); margin-top: .1rem; }
.ci-arrow { margin-left: auto; color: var(--mu2); font-size: .85rem; }

/* Form */
.form-card {
  background: var(--surf); border: 1px solid var(--bd);
  border-radius: var(--rl); overflow: hidden;
  box-shadow: var(--sh2);
}
.form-card-header {
  padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--bd);
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink);
}
.form-card form { padding: 1.75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.fg label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mu2);
}
.fg input, .fg textarea, .fg select {
  background: var(--bg); border: 1px solid var(--bd);
  border-radius: var(--r); color: var(--ink); font-size: .88rem;
  padding: .65rem 1rem; font-family: var(--sans); transition: border-color .2s;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  outline: none; border-color: var(--gold);
}
.fg select { cursor: pointer; }
.fg textarea { resize: vertical; min-height: 100px; }
.form-submit {
  width: 100%; padding: .85rem;
  background: var(--gold); color: #FBF6FA; border: none; border-radius: var(--r);
  font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, transform .15s;
  margin-top: .25rem;
}
.form-submit:hover { background: var(--gold-l); transform: translateY(-1px); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer {
  background: var(--navy); padding: 4rem 0 2rem;
}
[data-theme="dark"] .site-footer { background: var(--surf2); border-top: 1px solid var(--bd); }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem;
}
.footer-logo { height: 44px; object-fit: contain; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .75; }
[data-theme="dark"] .footer-logo { filter: none; }
.footer-desc { font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,.35); }
[data-theme="dark"] .footer-desc { color: var(--mu2); }
.footer-col h4 { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 1rem; }
[data-theme="dark"] .footer-col h4 { color: var(--mu2); }
.footer-col a { display: block; font-size: .82rem; color: rgba(255,255,255,.5); margin-bottom: .5rem; transition: color .2s; }
[data-theme="dark"] .footer-col a { color: var(--mu); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.07);
  font-size: .75rem; color: rgba(255,255,255,.25);
}
[data-theme="dark"] .footer-bottom { border-color: var(--bd); color: var(--mu2); }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: rgba(255,255,255,.25); transition: color .2s; }
[data-theme="dark"] .footer-legal a { color: var(--mu2); }
.footer-legal a:hover { color: var(--gold); }

/* Floating CTA */
.floating-cta {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 900;
  padding: .7rem 1.35rem;
  background: var(--gold); color: #FBF6FA;
  border-radius: 50px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(107,23,104,.35);
  transform: translateY(80px); opacity: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s;
}
.floating-cta.visible { transform: none; opacity: 1; }
.floating-cta:hover { background: var(--gold-l); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-deco { display: none; }
  .hero-content { grid-template-columns: 1fr; gap: 3rem; }
  .hero-panel { max-width: 440px; animation: none; }
  .panel-stats { grid-template-columns: repeat(4, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .beyond-grid { grid-template-columns: 1fr; gap: 3rem; }
  .beyond-visual { order: -1; }
  .process-grid { flex-direction: column; }
  .process-connector { width: 1px; height: 32px; margin: 0 auto; }
  .process-connector::after { right: -4px; top: auto; bottom: -4px; border: none; border-bottom: 1.5px solid var(--bd); border-right: 1.5px solid var(--bd); transform: rotate(45deg); }
  .testi-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-frame { max-width: 280px; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surf); border-bottom: 1px solid var(--bd); padding: 1rem 0; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .main-nav a { padding: .85rem 1.5rem; }
  .main-nav a::after { display: none; }
  .hamburger { display: flex; }
  .nav-cta { display: none; }

  .hero { padding: 100px 0 60px; }
  .hero-headline { font-size: clamp(2rem, 8vw, 2.8rem); }
  .panel-stats { grid-template-columns: 1fr 1fr; }

  .blog-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr; }

  /* Admin panel — stack form grids on narrow screens */
  .fr2, .fr3 { grid-template-columns: 1fr; }
  .adm-nav { flex-wrap: wrap; gap: .5rem; }
  .adm-navl { flex-wrap: wrap; }
  .adm-main { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-panel { animation: none; }
  .marquee-track { animation: none; }
}

/* ══════════════════════════════════════
   PAGE HERO (service detail / blog post)
   Photo-first with abstract plum/teal
   fallback when no image is set.
══════════════════════════════════════ */
.page-hero {
  position: relative;
  min-height: 420px;
  display: flex; align-items: flex-end;
  padding: 140px 0 3.5rem;
  overflow: hidden;
  background: var(--navy);
}
.ph-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .55;
}
.ph-bg.ph-fallback {
  background: linear-gradient(135deg, var(--plum-d) 0%, var(--navy) 55%, var(--teal-a-d) 100%);
  opacity: 1;
}
.ph-fallback-deco {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
}
.ph-ov {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,27,.2) 0%, rgba(20,16,27,.88) 100%);
}
.ph-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ph-inner { position: relative; z-index: 1; }
.bread {
  display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; color: rgba(255,255,255,.5); margin-bottom: 1.5rem;
}
.bread a { color: rgba(255,255,255,.65); transition: color .2s; }
.bread a:hover { color: var(--plum-l); }
.ph-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--plum-l); margin-bottom: 1rem;
}
.ph-badge::before { content: ''; width: 20px; height: 1px; background: var(--plum-l); }
.page-hero h1 {
  font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700; line-height: 1.15; color: #fff; margin-bottom: 1rem; max-width: 640px;
}
.page-hero > .con > p, .ph-inner p {
  font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.65); max-width: 560px;
}

/* ── Service detail body ── */
.svc-detail { background: var(--bg); }
.svc-detail-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 4rem; align-items: start;
}
.svc-main { min-width: 0; }
.svc-section { margin-bottom: 3rem; }
.svc-section .sl {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .75rem;
}
.svc-section .sl::before { content: ''; width: 18px; height: 1px; background: var(--gold); }
.svc-section h2 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); margin-bottom: 1rem; line-height: 1.3;
}
.svc-section p { font-size: .95rem; line-height: 1.8; color: var(--mu); margin-bottom: .9rem; }
.svc-section ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.svc-section ul li {
  font-size: .92rem; line-height: 1.6; color: var(--ink2);
  padding-left: 1.4rem; position: relative;
}
.svc-section ul li::before {
  content: ''; position: absolute; left: 0; top: .55rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.svc-callout {
  background: linear-gradient(135deg, var(--plum-tint) 0%, var(--teal-tint) 100%);
  border: 1px solid var(--bd); border-radius: var(--rl); padding: 2rem;
}
[data-theme="dark"] .svc-callout { background: linear-gradient(135deg, var(--plum-tint) 0%, var(--teal-tint) 100%); }
.svc-callout h2 { margin-bottom: 1rem; }
.svc-callout p { color: var(--ink2); margin-bottom: 0; }
.svc-callout p + p { margin-top: .75rem; }
.svc-img {
  margin-top: 1.5rem; height: 280px; border-radius: var(--rl); overflow: hidden;
  background: var(--surf2); border: 1px solid var(--bd);
}
.svc-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-img.svc-img-fallback {
  display: flex; align-items: center; justify-content: center;
}

/* ── Sidebar ── */
.svc-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 100px; }
.pricing-card {
  background: var(--navy); border-radius: var(--rl); padding: 1.75rem;
  border: 1px solid rgba(255,255,255,.08);
}
.pricing-card h3 { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .75rem; }
.pricing-price { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--gold); margin-bottom: .5rem; }
.pricing-card p { font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.5); }
.sidebar-card {
  background: var(--surf); border: 1px solid var(--bd); border-radius: var(--rl); padding: 1.5rem;
}
.sidebar-card h3 { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mu2); margin-bottom: 1rem; }
.sidebar-card a {
  display: block; font-size: .86rem; color: var(--mu); padding: .5rem 0;
  border-bottom: 1px solid var(--bd); transition: color .2s;
}
.sidebar-card a:last-child { border-bottom: none; }
.sidebar-card a:hover { color: var(--gold); }
.sidebar-card a.active-page { color: var(--gold); font-weight: 600; }
.cta-card {
  background: linear-gradient(135deg, var(--plum-d) 0%, var(--teal-a-d) 100%);
  border-radius: var(--rl); padding: 1.75rem; color: #fff;
}
.cta-card h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; }
.cta-card p { font-size: .84rem; line-height: 1.6; color: rgba(255,255,255,.7); margin-bottom: 1.25rem; }
.cta-card a {
  display: inline-flex; align-items: center; padding: .65rem 1.25rem;
  background: #fff; color: var(--plum-d); border-radius: var(--r);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  transition: transform .15s;
}
.cta-card a:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
  .svc-detail-grid { grid-template-columns: 1fr; gap: 3rem; }
  .svc-sidebar { position: static; }
}

/* ── Blog post page ── */
.post-hero { min-height: 380px; }
.post-meta { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.25rem; flex-wrap: wrap; }
.post-meta-item { font-size: .82rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: .4rem; }
.post-body { background: var(--bg); padding: 4rem 0; }
.post-wrap { max-width: 700px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--gold); margin-bottom: 2rem;
}
.back-link::before { content: '←'; }
.post-divider { height: 1px; background: var(--bd); margin-bottom: 2.5rem; }
.post-content { font-size: 1.02rem; line-height: 1.85; color: var(--ink2); }
.post-content h2 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); margin: 2.5rem 0 1rem;
}
.post-content p { margin-bottom: 1.25rem; }
.post-content ul { list-style: none; margin: 1.25rem 0; display: flex; flex-direction: column; gap: .6rem; }
.post-content ul li { padding-left: 1.4rem; position: relative; }
.post-content ul li::before {
  content: ''; position: absolute; left: 0; top: .6rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.post-content blockquote {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem;
  color: var(--ink); border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem; margin: 2rem 0; background: var(--plum-tint); border-radius: 0 var(--r) var(--r) 0;
}

/* ── Related posts rail ── */
.post-related-section { background: var(--bg2); padding: 3.5rem 0; }
.post-related-title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--ink);
  margin-bottom: 1.75rem; max-width: 700px; margin-left: auto; margin-right: auto;
}
.post-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  max-width: 900px; margin: 0 auto;
}
.rel-card {
  display: block; background: var(--surf); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.25rem; transition: border-color .2s, transform .2s;
}
.rel-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.rel-cat { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.rel-title { font-family: var(--serif); font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: .5rem; }
.rel-date { font-size: .72rem; color: var(--mu2); }

@media (max-width: 700px) {
  .post-related-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   SPA ROUTING — view container + transitions
   Every "page" is a <section data-view="...">
   inside #app. The router toggles .active and
   plays a fade+rise transition between views.
══════════════════════════════════════ */
#app { position: relative; min-height: 60vh; }
.view {
  display: none;
}
.view.active {
  display: block;
  animation: viewEnter .45s cubic-bezier(.16,1,.3,1);
}
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Brief route-change veil so the outgoing view doesn't pop */
#route-veil {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
#route-veil.show { opacity: .6; pointer-events: all; }

@media (prefers-reduced-motion: reduce) {
  .view.active { animation: none; }
}

/* Top progress bar — a quiet "the app is alive" cue on route change */
#route-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--plum), var(--teal-a));
  z-index: 2000; transition: width .25s ease, opacity .3s ease;
  opacity: 0;
}
#route-progress.running { opacity: 1; }

/* Real image support for the service intro illustration slot —
   used when introImage/heroImage is set via CMS instead of the
   abstract SVG fallback. */
.svc-img img, .ph-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ══════════════════════════════════════
   ADMIN PANEL v2 — every page, every field
══════════════════════════════════════ */
.adm-tabbar {
  display: flex; gap: .3rem; flex-wrap: wrap;
  padding: 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06);
  background: #111825;
}
.adm-tabbar button {
  padding: .7rem 1rem; background: none; border: none; cursor: pointer;
  font-size: .78rem; color: rgba(255,255,255,.45); border-bottom: 2px solid transparent;
  transition: .2s; white-space: nowrap;
}
.adm-tabbar button:hover { color: #fff; }
.adm-tabbar button.ac { color: var(--plum-l); border-bottom-color: var(--plum-l); }

.adm-svc-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.adm-svc-tabs button {
  padding: .45rem .9rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; color: rgba(255,255,255,.55); font-size: .76rem; cursor: pointer; transition: .2s;
}
.adm-svc-tabs button.ac { background: rgba(201,104,181,.15); border-color: rgba(201,104,181,.4); color: var(--plum-l); }

.img-field {
  display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem;
}
.img-field-input { flex: 1; }
.img-preview {
  width: 64px; height: 64px; border-radius: var(--r); flex-shrink: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-preview svg { width: 22px; height: 22px; color: rgba(255,255,255,.25); }
.img-upload-col { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; width: 64px; }

.adm-list-item {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem;
}
.adm-list-item input { flex: 1; }
.list-del {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r);
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25);
  color: #F87171; cursor: pointer; font-size: .85rem; line-height: 1;
}
.list-add {
  margin-top: .4rem; padding: .4rem .8rem; font-size: .74rem;
  background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.15);
  border-radius: var(--r); color: rgba(255,255,255,.55); cursor: pointer;
}
.list-add:hover { color: #fff; border-color: rgba(255,255,255,.3); }

.adm-subhead {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--plum-l); margin: 2rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06);
}
.adm-subhead:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.preview-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; color: rgba(255,255,255,.45); margin-bottom: 1rem;
  padding: .4rem .8rem; background: rgba(255,255,255,.04); border-radius: var(--r);
}
.preview-link a { color: var(--teal-a-l); }