/* ============================================================
 * A.D. Litigation & Estate Planning — Theme styles
 * Ported from the design handoff (index.html inline CSS + legal.css + article.html CSS)
 * ============================================================ */

:root{
  --pink-300: oklch(0.82 0.095 6);
  --pink-400: oklch(0.72 0.135 5);
  --pink-500: oklch(0.60 0.190 3);
  --pink-600: oklch(0.53 0.205 2);
  --pink-700: oklch(0.44 0.175 2);
  --pink-900: oklch(0.28 0.090 5);

  --gold:   oklch(0.82 0.115 82);
  --gold-2: oklch(0.74 0.120 72);

  --white-90: color-mix(in oklch, white 90%, var(--pink-300));
  --white-70: color-mix(in oklch, white 72%, var(--pink-300));
  --white-55: color-mix(in oklch, white 58%, var(--pink-300));

  --serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --r-md: 12px;
  --r-lg: 22px;
}

*{box-sizing:border-box}
html{scroll-behavior: smooth; scroll-padding-top: 90px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior: auto} }
html,body{margin:0;padding:0}
html{overflow-x: clip}
body{overflow-x: clip; max-width: 100vw}
:target{scroll-margin-top: 90px}
section[id], h1[id], h2[id], h3[id], h4[id]{scroll-margin-top: 90px}
body{
  font-family: var(--sans);
  color: white;
  background: var(--pink-600);
  background-image:
    radial-gradient(1400px 900px at 85% 0%, color-mix(in oklch, var(--pink-500) 70%, white) 0%, transparent 60%),
    linear-gradient(180deg, var(--pink-600), var(--pink-700) 70%, var(--pink-900));
  background-attachment: fixed;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family: var(--serif); font-weight:500; letter-spacing:-0.01em; line-height:1.1; margin:0; text-wrap: balance}
p{text-wrap: pretty; color: var(--white-90)}

.container{max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad)}
.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--gold) 85%, white);
  font-weight: 500;
}

/* ========== NAV ========== */
.nav{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  background: color-mix(in oklch, var(--pink-700) 65%, transparent);
  border-bottom: 1px solid color-mix(in oklch, white 18%, transparent);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 74px;
  max-width: var(--maxw); margin:0 auto; padding-inline: var(--pad);
  gap: 20px;
}
.brand{display:flex; align-items:center; gap:12px; color: white}
.brand img{height:44px; width:44px; border-radius:50%; border: 2px solid color-mix(in oklch, var(--gold) 70%, white); flex-shrink: 0}
.brand .wordmark{font-family: var(--serif); font-size:18px; line-height:1.1; font-weight:500; white-space: nowrap}
.brand .wordmark em{font-style:italic; color: color-mix(in oklch, var(--gold) 85%, white)}
.brand .sub{font-family: var(--mono); font-size:10.5px; letter-spacing:0.15em; text-transform:uppercase; color: var(--white-70); margin-top:3px; white-space: nowrap}
@media (max-width: 1100px){ .brand .wordmark{font-size: 16px} }
@media (max-width: 720px){
  .brand .wordmark .short{display:inline}
  .brand .wordmark .full{display:none}
  .brand .sub{display:none}
}
@media (min-width: 721px){
  .brand .wordmark .short{display:none}
  .brand .wordmark .full{display:inline}
}
.nav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0}
.nav ul a{font-size:14.5px; color: var(--white-90); font-weight:450; transition: color .2s}
.nav ul a:hover{color: color-mix(in oklch, var(--gold) 85%, white)}
.nav-menu-cta{display:none}
.nav-toggle-state{position: absolute; opacity: 0; pointer-events: none}
.nav-burger{display:none}
.nav-cta{
  display:inline-flex; align-items:center; gap:10px;
  background: white; color: var(--pink-700);
  padding: 12px 20px; border-radius: 100px;
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; line-height: 1;
  transition: transform .15s ease, background .2s, color .2s;
  flex-shrink: 0;
}
.nav-cta:hover{background: color-mix(in oklch, var(--gold) 80%, white); color: var(--pink-900); transform: translateY(-1px)}
.nav-cta svg{width:14px; height:14px}
.nav-back{font-size: 14px; color: var(--white-90); display:inline-flex; align-items:center; gap:8px}
.nav-back:hover{color: color-mix(in oklch, var(--gold) 90%, white)}
.nav-back svg{width:14px; height:14px}
@media (max-width: 960px){
  .nav-inner{position: relative}
  .nav-cta{display:none}
  .nav-burger{
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    background: color-mix(in oklch, white 10%, transparent);
    border: 1px solid color-mix(in oklch, white 25%, transparent);
    padding: 0 12px;
    transition: background .2s;
  }
  .nav-burger:hover{background: color-mix(in oklch, white 16%, transparent)}
  .nav-burger span{display:block; height: 2px; background: white; border-radius: 2px; transition: transform .25s, opacity .2s}
  .nav-toggle-state:checked ~ .nav-burger span:nth-child(1){transform: translateY(7px) rotate(45deg)}
  .nav-toggle-state:checked ~ .nav-burger span:nth-child(2){opacity: 0}
  .nav-toggle-state:checked ~ .nav-burger span:nth-child(3){transform: translateY(-7px) rotate(-45deg)}
  .nav-menu{
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: color-mix(in oklch, var(--pink-900) 94%, black);
    border-bottom: 1px solid color-mix(in oklch, white 18%, transparent);
    padding: 18px var(--pad) 24px;
    max-height: calc(100vh - 74px); overflow: auto;
  }
  .nav-toggle-state:checked ~ .nav-menu{display: block}
  .nav-menu ul{flex-direction: column; gap: 0; align-items: stretch}
  .nav-menu ul li{border-bottom: 1px solid color-mix(in oklch, white 12%, transparent)}
  .nav-menu ul li:last-child{border-bottom: none}
  .nav-menu ul a{display: block; padding: 14px 2px; font-size: 16px; color: white}
  .nav-menu-cta{display:block; margin-top: 10px}
  .nav-menu-cta a{
    display:block !important; text-align: center;
    background: white; color: var(--pink-700) !important;
    padding: 14px 18px !important; border-radius: 100px;
    font-weight: 600;
  }
}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 26px; border-radius: 100px;
  font-size: 14.5px; font-weight:500; border:none; cursor:pointer;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
  font-family: var(--sans);
  white-space: nowrap; line-height: 1;
  text-decoration: none;
}
.btn svg{width:14px; height:14px}
.btn-primary{
  background: white; color: var(--pink-700);
  font-weight: 600;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.35);
}
.btn-primary:hover{background: color-mix(in oklch, var(--gold) 80%, white); color: var(--pink-900); transform: translateY(-2px)}
.btn-ghost{
  background: transparent; color: white;
  border: 1px solid color-mix(in oklch, white 55%, transparent);
}
.btn-ghost:hover{background: color-mix(in oklch, white 12%, transparent); border-color: white}

/* ========== HERO ========== */
.hero{position: relative; padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); overflow: hidden}
.hero::before{
  content:""; position:absolute; inset: -30% -10% auto auto;
  width: 55%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--gold) 45%, transparent), transparent 70%);
  filter: blur(10px); z-index: 0; pointer-events:none; opacity:.4;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: center; position: relative; z-index:1;
}
@media (max-width: 960px){ .hero-grid{grid-template-columns: 1fr} }

.hero h1{
  font-size: clamp(44px, 6.4vw, 86px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: white;
  margin-top: 18px;
}
.hero h1 em{font-style: italic; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:500}
.hero .lead{margin-top: 22px; font-size: clamp(16.5px, 1.3vw, 19px); color: var(--white-90); max-width: 54ch}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top: 28px; font-size: 13.5px; color: var(--white-70)}
.hero-meta p, .hero-meta span{display:inline-flex; align-items:center; gap:10px; margin:0; line-height:1.3}
.hero-meta .dot{width:6px; height:6px; border-radius:50%; background: color-mix(in oklch, var(--gold) 80%, white); flex-shrink:0; display:inline-block}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top: 36px}

.hero-portrait-wrap{position: relative}
.hero-portrait{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 180px 180px 18px 18px;
  overflow: hidden;
  box-shadow: 0 50px 80px -40px rgba(0,0,0,0.6), 0 0 0 2px color-mix(in oklch, var(--gold) 55%, white);
}
.hero-portrait img{width:100%; height:100%; object-fit: cover; object-position: center top}
.hero-portrait::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in oklch, var(--pink-900) 45%, transparent));
  pointer-events:none;
}
.portrait-badge{
  position:absolute; left:-18px; bottom: 34px;
  background: color-mix(in oklch, var(--pink-900) 65%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: white;
  padding: 16px 20px; border-radius: 14px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
  font-size: 12.5px; line-height:1.5; max-width: 280px;
  border-left: 3px solid color-mix(in oklch, var(--gold) 80%, white);
  border-top: 1px solid color-mix(in oklch, white 15%, transparent);
}
.portrait-badge strong{display:block; font-family: var(--serif); font-size:16px; font-weight:600; margin-bottom: 6px; color: white; line-height: 1.2}

/* decorative marquee */
.marquee-wrap{
  margin-top: clamp(48px, 7vw, 90px); padding: 22px 0;
  border-top: 1px solid color-mix(in oklch, white 20%, transparent);
  border-bottom: 1px solid color-mix(in oklch, white 20%, transparent);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee{
  font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 26px);
  color: var(--white-90);
  display:flex; gap: 56px; white-space:nowrap; width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover{animation-play-state: paused}
.marquee span{display:inline-flex; align-items:center; gap:36px}
.marquee .sep{color: color-mix(in oklch, var(--gold) 85%, white)}
@keyframes marquee-scroll{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}

/* ========== SECTIONS ========== */
.section,
body > section:not(.hero):not(.page-head):not(.art-head),
body > main > section:not(.hero):not(.page-head):not(.art-head){padding: clamp(35px, 5vw, 65px) 0; position: relative}
.section-head{display:grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items:end; margin-bottom: 56px}
.section-head > *{min-width: 0}
.section-head h2{font-size: clamp(38px, 5vw, 62px); font-weight:400; letter-spacing:-0.025em; color: white; margin-top:18px; line-height: 1.05; text-wrap: balance}
.section-head h2 em{font-style: italic; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:500}
.section-head .desc{color: var(--white-90); font-size: 17px; max-width: 60ch}
@media (max-width: 860px){ .section-head{grid-template-columns:1fr; gap:20px} }

/* Glass card base */
.glass{
  background: color-mix(in oklch, white 10%, transparent);
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ========== ABOUT ========== */
.about-grid{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items:start}
@media (max-width: 960px){ .about-grid{grid-template-columns:1fr} }
.about-copy > p{color: var(--white-90); font-size: 17px; line-height: 1.75; margin: 0 0 20px}
.about-copy > p:first-of-type::first-letter{
  font-family: var(--serif); font-size: 64px; float:left; line-height: 0.9;
  padding: 6px 12px 0 0; color: color-mix(in oklch, var(--gold) 90%, white); font-weight: 500;
}
.pillars{margin-top: 34px; display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px}
.pillar{
  background: color-mix(in oklch, white 8%, transparent);
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  border-radius: var(--r-md); padding: 18px 18px 16px;
}
.pillar .k{font-family: var(--serif); font-size: 34px; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:500; line-height:1}
.pillar .l{font-size: 13px; color: var(--white-90); margin-top: 6px; line-height:1.4}

.credentials{
  position: sticky; top: 100px;
  padding: 36px 34px;
}
.credentials h3{font-size: 26px; margin-bottom: 6px; color: white}
.credentials .muted{color: var(--white-70); font-size:13px; margin-bottom: 24px}
.cred-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 18px}
.cred-list li{display:grid; grid-template-columns: 30px 1fr; gap: 14px; align-items:start; font-size:14.5px; color: var(--white-90)}
.cred-list .ico{
  width: 30px; height:30px; border-radius:50%;
  background: color-mix(in oklch, var(--gold) 30%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 55%, white);
  color: white;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size: 11px; font-weight:600;
}
.cred-list strong{display:block; font-weight: 600; color: white; margin-bottom: 2px}
.partner{
  margin-top: 26px; padding-top: 22px; border-top: 1px dashed color-mix(in oklch, white 30%, transparent);
  display:flex; align-items:center; gap: 12px;
  font-size: 13px; color: var(--white-90);
}
.partner .sigil{
  width:36px; height:36px; border-radius:50%;
  background: conic-gradient(from 30deg, var(--gold), white, var(--gold));
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--serif); color: var(--pink-700); font-weight:700; font-size:14px;
}

/* ========== SERVICES ========== */
.svc-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px}
@media (max-width: 960px){ .svc-grid{grid-template-columns:1fr} }
.svc{
  position: relative;
  padding: 34px 32px 32px;
  display:flex; flex-direction:column;
  transition: transform .2s, box-shadow .25s, border-color .2s, background .2s;
  overflow:hidden;
}
.svc:hover{
  transform: translateY(-4px);
  box-shadow: 0 40px 60px -40px rgba(0,0,0,0.5);
  background: color-mix(in oklch, white 14%, transparent);
  border-color: color-mix(in oklch, var(--gold) 60%, white);
}
.svc-num{font-family: var(--mono); font-size: 12px; color: color-mix(in oklch, var(--gold) 85%, white); letter-spacing: 0.15em}
.svc h3{font-size: 26px; margin: 14px 0 12px; font-weight: 500; line-height:1.15; color: white}
.svc p{color: var(--white-90); font-size: 15px; line-height:1.65; margin: 0 0 22px}
.svc ul{list-style:none; padding:0; margin: 0 0 26px; display:flex; flex-direction:column; gap: 8px}
.svc ul li{font-size: 13.5px; color: var(--white-90); padding-left: 18px; position:relative}
.svc ul li::before{content:""; position:absolute; left:0; top: 9px; width: 8px; height: 1px; background: color-mix(in oklch, var(--gold) 80%, white)}
.svc-foot{
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid color-mix(in oklch, white 20%, transparent);
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--white-70);
}
.svc-foot p{margin:0}
.svc-foot .tag{
  padding: 5px 10px; border-radius: 100px;
  background: color-mix(in oklch, var(--gold) 30%, transparent);
  color: white; font-weight:500; font-size: 12px;
  border: 1px solid color-mix(in oklch, var(--gold) 50%, white);
}
.svc .glyph{
  position:absolute; top: 28px; right: 28px;
  width: 42px; height: 42px; border-radius: 12px;
  background: color-mix(in oklch, white 12%, transparent);
  border: 1px solid color-mix(in oklch, white 24%, transparent);
  color: color-mix(in oklch, var(--gold) 90%, white);
  display:flex; align-items:center; justify-content:center;
}
.svc .glyph svg{width:20px; height:20px}

/* ========== PROCESS ========== */
.steps{display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: color-mix(in oklch, white 20%, transparent); border-radius: var(--r-lg); overflow:hidden; border: 1px solid color-mix(in oklch, white 25%, transparent)}
@media (max-width: 860px){ .steps{grid-template-columns:1fr} }
.step{padding: 34px 28px; background: color-mix(in oklch, var(--pink-700) 85%, black); display:flex; flex-direction:column; gap: 12px; min-height: 220px}
.step .num{font-family: var(--serif); font-size: 46px; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:400; line-height:1; font-style:italic}
.step h4{font-size: 22px; font-weight:500; color: white}
.step p{color: var(--white-90); font-size: 14px; margin:0; line-height: 1.6}

/* ========== FEATURE / CTA BAR ========== */
.feat-card{
  display:grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 5vw, 64px); align-items:center;
  border-radius: var(--r-lg); overflow:hidden;
  padding: clamp(40px, 6vw, 72px);
  position:relative;
  background: color-mix(in oklch, var(--pink-900) 45%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 40%, white);
}
.feat-card::before{
  content:""; position:absolute; inset: auto -20% -80% auto; width: 70%; aspect-ratio:1;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--gold) 60%, transparent), transparent 70%);
  opacity: .35;
}
.feat-card h2{font-size: clamp(32px, 4.2vw, 50px); color: white; font-weight:400; letter-spacing:-0.02em; margin-top: 14px}
.feat-card h2 em{font-style:italic; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:500}
.feat-card p{color: var(--white-90); font-size: 16px; margin: 18px 0 28px; max-width: 46ch}
.news-kicker{
  position:relative; z-index:1;
  background: color-mix(in oklch, white 10%, transparent);
  border: 1px solid color-mix(in oklch, white 28%, transparent);
  border-radius: var(--r-md);
  padding: 22px 24px;
  backdrop-filter: blur(4px);
}
.news-kicker .label{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: color-mix(in oklch, var(--gold) 90%, white);
  margin-bottom: 10px;
}
.news-kicker .label .pulse{width:8px; height:8px; border-radius:50%; background: color-mix(in oklch, var(--gold) 85%, white); animation: pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5; transform:scale(.9)} 50%{opacity:1; transform:scale(1.15)}}
.news-kicker h4{font-family: var(--serif); font-size: 22px; color: white; font-weight:500; margin-bottom:6px; line-height:1.2}
.news-kicker p{color: var(--white-90); font-size: 13.5px; margin: 0 0 14px}
.news-kicker-video{padding: 10px; background: color-mix(in oklch, white 6%, transparent)}
.news-kicker-video .fox-video{margin-top: 0}
.fox-video{
  position: relative; margin-top: 6px;
  border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid color-mix(in oklch, white 24%, transparent);
  background: color-mix(in oklch, var(--pink-900) 50%, black);
  box-shadow: 0 24px 40px -28px rgba(0,0,0,0.55);
}
.fox-video iframe, .fox-video .wp-block-embed__wrapper iframe, .fox-video > *{
  width: 100% !important; height: 100% !important; border:0; display:block;
}
.fox-video .wp-block-embed, .fox-video figure, .fox-video .wp-block-embed__wrapper{
  margin:0; width:100%; height:100%;
}
@media (max-width: 860px){ .feat-card{grid-template-columns:1fr} }

/* ========== VIDEO EMBED ========== */
.video-embed{
  position: relative; margin-top: 32px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  aspect-ratio: 16 / 9;
  background: color-mix(in oklch, var(--pink-900) 50%, black);
}
.video-embed iframe{width:100%; height:100%; border:0; display:block}

/* ========== PUBLICATIONS ========== */
.pub-grid{display:grid; grid-template-columns: 1.3fr 1fr; gap: 40px}
@media (max-width: 960px){ .pub-grid{grid-template-columns: 1fr} }
.pub-list{border-top: 1px solid color-mix(in oklch, white 22%, transparent)}
.pub{
  display:grid; grid-template-columns: 90px 1fr auto; gap: 28px;
  padding: 26px 0; border-bottom: 1px solid color-mix(in oklch, white 18%, transparent);
  align-items:baseline;
}
.pub:hover .pub-title{color: color-mix(in oklch, var(--gold) 90%, white)}
.pub .date{font-family: var(--mono); font-size: 12px; color: var(--white-70); letter-spacing: 0.08em}
.pub-title{font-family: var(--serif); font-size: 22px; font-weight:500; line-height: 1.2; color: white; transition: color .2s}
.pub-meta{font-size: 13px; color: var(--white-70); margin-top: 6px}
.pub-type{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  color: white; background: color-mix(in oklch, var(--gold) 35%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 60%, white);
  align-self:center;
}
@media (max-width: 720px){ .pub{grid-template-columns: 1fr; gap: 8px} .pub-type{justify-self:start} }

@media (min-width: 961px){
  .downloads{position: sticky; top: 100px}
}
.downloads{
  padding: 34px 32px;
  background: linear-gradient(180deg, color-mix(in oklch, white 14%, transparent), color-mix(in oklch, var(--pink-900) 30%, transparent));
  border: 1px solid color-mix(in oklch, var(--gold) 40%, white);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.5);
}
.downloads::before{
  content:"Downloads"; display:inline-block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: color-mix(in oklch, var(--gold) 92%, white);
  padding: 5px 10px; border-radius: 100px;
  background: color-mix(in oklch, var(--gold) 28%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 55%, white);
  margin-bottom: 16px;
}
.downloads h4{font-family: var(--serif); font-size: 24px; margin-bottom: 6px; color: white; font-weight:500}
.downloads .sub{font-size: 13.5px; color: var(--white-90); margin-bottom: 22px; line-height:1.55}
.dl-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 2px}
.dl-list li{margin:0}
.dl-list li a{
  display:grid; grid-template-columns: 36px 1fr auto; align-items:center; gap: 14px;
  padding: 14px 14px; border-radius: 12px;
  font-size: 14.5px; color: white;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, transform .15s;
}
.dl-list li a::before{
  content:""; width: 36px; height:36px; border-radius: 10px;
  background: color-mix(in oklch, white 12%, transparent);
  border: 1px solid color-mix(in oklch, white 26%, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12M6 11l6 6 6-6M4 21h16'/></svg>");
  background-repeat: no-repeat; background-position: center;
  background-size: 18px 18px;
}
.dl-list li a::after{
  content:"\2197"; font-family: var(--mono); font-size: 14px;
  color: color-mix(in oklch, var(--gold) 90%, white);
  transition: transform .2s;
}
.dl-list li a:hover{
  background: color-mix(in oklch, var(--gold) 14%, transparent);
  border-color: color-mix(in oklch, var(--gold) 55%, white);
}
.dl-list li a:hover::after{transform: translate(3px,-3px)}

/* ========== POLICIES ========== */
.pol-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px}
@media (max-width: 860px){ .pol-grid{grid-template-columns:1fr} }
.pol{padding: 26px 28px; border-left: 4px solid color-mix(in oklch, var(--gold) 75%, white)}
.pol h4{font-family: var(--serif); font-size: 22px; margin-bottom: 10px; font-weight:500; color: white}
.pol p{font-size: 14.5px; color: var(--white-90); line-height: 1.65; margin:0}

/* ========== CONTACT ========== */
.contact-grid{display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items:start}
@media (max-width: 960px){ .contact-grid{grid-template-columns:1fr} }
.contact-info{margin-top: 32px; display:flex; flex-direction:column; gap: 0}
.info{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 20px; align-items:baseline;
  padding: 18px 0;
  border-top: 1px solid color-mix(in oklch, white 18%, transparent);
}
.info:last-child{border-bottom: 1px solid color-mix(in oklch, white 18%, transparent)}
.info .label{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--white-70);
  margin: 0;
}
.info .value{font-size: 15.5px; color: white; margin:0; line-height:1.5}
.info .value a{color: white; border-bottom: 1px solid color-mix(in oklch, var(--gold) 50%, transparent); transition: border-color .2s, color .2s}
.info .value a:hover{color: color-mix(in oklch, var(--gold) 90%, white); border-color: color-mix(in oklch, var(--gold) 90%, white)}
@media (max-width: 520px){ .info{grid-template-columns: 1fr; gap:4px} }

form.adl-form, form.adlep-contact-form{padding: clamp(28px, 3.5vw, 44px)}
.form-head{margin-bottom: 24px}
.form-head h3{font-family: var(--serif); font-size: 24px; font-weight:500; color: white}
.form-head p{font-size: 13.5px; color: var(--white-70); margin-top: 6px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom: 16px}
.field label{font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform:uppercase; color: var(--white-70)}
.field label .req{color: color-mix(in oklch, var(--gold) 90%, white)}
.field input, .field select, .field textarea{
  font: 15px/1.5 var(--sans);
  color: white;
  padding: 13px 14px; border-radius: 10px;
  background: color-mix(in oklch, white 8%, transparent);
  border: 1px solid color-mix(in oklch, white 25%, transparent);
  outline: none; transition: border .15s, background .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder{color: var(--white-55)}
.field textarea{min-height: 100px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: color-mix(in oklch, var(--gold) 80%, white);
  background: color-mix(in oklch, white 14%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--gold) 20%, transparent);
}
.field select option{background: var(--pink-700); color: white}
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
@media (max-width: 560px){ .grid-2{grid-template-columns: 1fr} }
.form-actions{display:flex; align-items:center; justify-content:space-between; margin-top: 20px; gap:14px; flex-wrap:wrap}
.form-actions .fine{font-size: 11.5px; color: var(--white-70); max-width: 50ch; line-height: 1.4}

/* ========== TESTIMONIALS ========== */
.tst-intro{max-width: 70ch; color: var(--white-90); font-size: 17px; margin-top: 22px}
.tst-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px}
@media (max-width: 960px){ .tst-grid{grid-template-columns: 1fr} }
.tst{
  padding: 36px 32px 30px; display:flex; flex-direction:column; gap: 20px;
  position: relative;
}
.tst .mark{
  position: absolute; top: 18px; right: 24px;
  font-family: var(--serif); font-style: italic;
  font-size: 88px; line-height: 1; color: color-mix(in oklch, var(--gold) 55%, white);
  opacity: 0.55;
}
.tst .stars{display:flex; gap: 3px; color: color-mix(in oklch, var(--gold) 90%, white)}
.tst .stars svg{width:14px; height:14px; fill: currentColor}
.tst blockquote{
  margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.45;
  color: white; font-weight: 400; letter-spacing: -0.005em;
  text-wrap: pretty;
}
.tst cite{
  font-style: normal; display:flex; align-items:center; gap: 14px;
  padding-top: 18px; margin-top: auto;
  border-top: 1px solid color-mix(in oklch, white 18%, transparent);
}
.tst .avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in oklch, var(--gold) 40%, white);
  color: var(--pink-900); font-family: var(--serif); font-weight: 600; font-size: 16px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.tst cite strong{display:block; font-family: var(--sans); font-weight:600; color: white; font-size: 14.5px; letter-spacing: 0}
.tst cite .sub{font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-70); margin-top: 2px}

/* ========== SOCIAL ROW ========== */
.socialrow{display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
@media (max-width: 720px){ .socialrow{grid-template-columns: 1fr} }
.socbox{
  padding: 26px 28px; display:block;
  transition: background .2s, transform .15s, border-color .2s;
}
.socbox a{color: inherit; text-decoration: none}
.socbox:hover{border-color: color-mix(in oklch, var(--gold) 55%, white)}
.socbox:hover{background: color-mix(in oklch, white 14%, transparent); transform: translateY(-2px)}
.socbox .icn{
  width: 48px; height:48px; border-radius: 14px; flex-shrink:0;
  background: color-mix(in oklch, var(--gold) 28%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 55%, white);
  color: white;
  display:flex; align-items:center; justify-content:center;
}
.socbox .icn svg{width:22px; height:22px}
.socbox h5{font-family: var(--serif); font-size: 20px; color: white; font-weight:500; margin-bottom:2px}
.socbox .handle{font-family: var(--mono); font-size: 13px; color: var(--white-90)}

/* ========== FOOTER ========== */
.site-footer{padding: 70px 0 28px; border-top: 1px solid color-mix(in oklch, white 20%, transparent); background: color-mix(in oklch, var(--pink-900) 40%, transparent)}
.foot-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px}
@media (max-width: 860px){ .foot-grid{grid-template-columns: 1fr 1fr; gap: 30px} }
.site-footer h5{font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform:uppercase; color: color-mix(in oklch, var(--gold) 90%, white); margin-bottom: 16px; font-weight:500}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; font-size: 14px; color: var(--white-90)}
.site-footer ul a{color: var(--white-90)}
.site-footer ul a:hover{color: color-mix(in oklch, var(--gold) 90%, white)}
.foot-about{font-size: 13.5px; line-height:1.65; margin-top: 18px; max-width: 38ch; color: var(--white-90)}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap: 20px; flex-wrap:wrap;
  padding-top: 26px; border-top: 1px solid color-mix(in oklch, white 15%, transparent);
  font-size: 12.5px; color: var(--white-70);
}
.foot-bottom a{color: var(--white-90)}
.foot-bottom .disclaimer{max-width: 80ch}
.socials{display:flex; gap: 10px; margin-top: 18px}
.sc{
  width: 36px; height:36px; border-radius: 50%;
  background: color-mix(in oklch, white 12%, transparent);
  border: 1px solid color-mix(in oklch, white 25%, transparent);
  display:inline-flex; align-items:center; justify-content:center; color: white;
  transition: background .2s, transform .15s;
}
.sc:hover{background: color-mix(in oklch, var(--gold) 35%, transparent); transform: translateY(-2px)}
.sc svg{width: 16px; height:16px}

/* Legal footer row (used on article/privacy/terms) */
.foot-legal{
  max-width: 1280px; margin: 0 auto; padding-inline: var(--pad);
  display:flex; justify-content:space-between; align-items:center; gap: 20px; flex-wrap:wrap;
  padding-top: 26px; padding-bottom: 0;
  font-size: 12.5px; color: var(--white-70);
}
.foot-legal a{color: var(--white-90)}
.foot-legal a:hover{color: color-mix(in oklch, var(--gold) 90%, white)}

/* ========== DRAFT BANNER ========== */
.draft-banner{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 26px;
  margin-bottom: 40px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--gold) 22%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 55%, white);
  box-shadow: 0 1px 0 color-mix(in oklch, white 20%, transparent) inset;
}
.draft-icon{
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in oklch, var(--gold) 55%, white);
  color: var(--pink-900);
  display: inline-flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.draft-icon svg{width:22px; height:22px; stroke-width: 1.8}
.draft-kicker{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in oklch, var(--gold) 95%, white);
  margin-bottom: 6px;
}
.draft-body p{
  margin: 0; font-size: 14.5px; line-height: 1.6;
  color: color-mix(in oklch, white 96%, var(--gold));
}
.draft-body p strong{color: white}
.draft-chip{
  display: inline-flex; align-items:center;
  padding: 4px 10px; border-radius: 100px;
  background: color-mix(in oklch, var(--gold) 40%, white);
  color: var(--pink-900) !important;
  font-weight: 700;
  letter-spacing: 0.15em !important;
}

/* ========== LEGAL (PRIVACY / TERMS) PAGES ========== */
.page-head{padding: clamp(60px, 8vw, 110px) 0 clamp(36px, 5vw, 60px)}
.page-head h1{font-size: clamp(44px, 5.5vw, 74px); font-weight:400; letter-spacing:-0.025em; color: white; margin-top: 18px}
.page-head h1 em{font-style: italic; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:500}
.page-head .lead{margin-top: 22px; font-size: 17px; color: var(--white-90); max-width: 68ch}
.page-head .meta{display:flex; gap:28px; flex-wrap:wrap; margin-top: 26px; font-size: 13px; color: var(--white-70); font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase}

.layout{
  display:grid; grid-template-columns: 240px 1fr; gap: 60px;
  padding-bottom: clamp(60px, 8vw, 120px);
}
@media (max-width: 960px){ .layout{grid-template-columns: 1fr} }
.toc{
  position: sticky; top: 100px; align-self: start;
  font-size: 13.5px;
  padding: 22px 0;
  border-top: 1px solid color-mix(in oklch, white 20%, transparent);
  border-bottom: 1px solid color-mix(in oklch, white 20%, transparent);
}
@media (max-width: 960px){ .toc{position: static; margin-bottom: 30px} }
.toc h4{font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:500; margin-bottom: 14px}
.toc ol{list-style: none; padding:0; margin:0; display:flex; flex-direction:column; gap: 9px; counter-reset: sec}
.toc li{counter-increment: sec; color: var(--white-90); line-height: 1.4; padding-left: 26px; position: relative}
.toc li::before{content: counter(sec, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11px; color: color-mix(in oklch, var(--gold) 85%, white); letter-spacing: 0.05em}
.toc a{color: var(--white-90); transition: color .15s}
.toc a:hover{color: color-mix(in oklch, var(--gold) 90%, white)}

.doc{max-width: 68ch}
.doc section + section{margin-top: 44px}
.doc h2{font-size: clamp(26px, 3vw, 34px); color: white; margin-bottom: 14px; font-weight:500; scroll-margin-top: 100px}
.doc h2 .n{font-family: var(--mono); font-size: 13px; color: color-mix(in oklch, var(--gold) 85%, white); letter-spacing: 0.1em; margin-right: 12px; vertical-align: middle; font-weight: 500}
.doc h3{font-size: 19px; color: white; font-family: var(--sans); font-weight: 600; letter-spacing: 0; margin: 22px 0 8px}
.doc p{color: var(--white-90); font-size: 16px; line-height: 1.75; margin: 0 0 14px}
.doc p + p{margin-top: 0}
.doc ul{padding-left: 22px; margin: 10px 0 16px}
.doc ul li{color: var(--white-90); font-size: 16px; line-height: 1.75; margin-bottom: 6px}
.doc ul li::marker{color: color-mix(in oklch, var(--gold) 85%, white)}
.doc strong{color: white; font-weight: 600}
.doc a.link, .doc a{color: color-mix(in oklch, var(--gold) 90%, white); border-bottom: 1px solid color-mix(in oklch, var(--gold) 55%, transparent)}
.doc a:hover{border-bottom-color: color-mix(in oklch, var(--gold) 95%, white)}

.doc .callout{
  background: color-mix(in oklch, white 10%, transparent);
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  border-left: 4px solid color-mix(in oklch, var(--gold) 75%, white);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 20px 0;
  font-size: 15.5px;
  color: var(--white-90);
}
.doc .callout strong{color: white}

/* ========== ARTICLE / SINGLE POST (article.html) ========== */
.art-wrap .container{max-width: 1280px}
.art-head{padding: clamp(56px, 8vw, 100px) 0 clamp(30px, 4vw, 50px)}
.breadcrumb{
  display:flex; gap:10px; align-items:center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--white-70); margin-bottom: 26px;
}
.breadcrumb a{color: color-mix(in oklch, var(--gold) 90%, white)}
.breadcrumb a:hover{color: white}
.breadcrumb .sep{opacity: 0.5}
.art-head .kicker{display:inline-flex; gap: 14px; align-items:center; color: color-mix(in oklch, var(--gold) 90%, white); font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500}
.art-head .kicker .pill{padding: 5px 12px; border-radius: 100px; border: 1px solid color-mix(in oklch, var(--gold) 55%, white); background: color-mix(in oklch, var(--gold) 15%, transparent); color: color-mix(in oklch, var(--gold) 95%, white)}
.art-head h1{
  font-family: var(--serif);
  font-size: clamp(40px, 5.4vw, 70px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: white; margin-top: 24px;
  max-width: 24ch;
}
.art-head h1 em{font-style: italic; color: color-mix(in oklch, var(--gold) 90%, white); font-weight:500}
.art-head .deck{margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); color: var(--white-90); max-width: 56ch; line-height: 1.5}

.byline{
  display:flex; align-items:center; gap: 18px;
  padding: 22px 0; margin-top: 38px;
  border-top: 1px solid color-mix(in oklch, white 20%, transparent);
  border-bottom: 1px solid color-mix(in oklch, white 20%, transparent);
  flex-wrap: wrap;
}
.byline .avatar{
  width: 50px; height: 50px; border-radius: 50%;
  background-size: cover; background-position: center top;
  border: 2px solid color-mix(in oklch, var(--gold) 70%, white);
  flex-shrink: 0;
}
.byline .who strong{display:block; font-family: var(--serif); font-size: 17px; font-weight: 500; color: white}
.byline .who .role{font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white-70); margin-top: 3px}
.byline .spacer{flex:1}
.byline .meta-right{display:flex; gap: 22px; align-items:center; flex-wrap: wrap}
.byline .meta-right span{font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-70); display:inline-flex; align-items:center; gap: 8px}
.byline .meta-right svg{width: 13px; height: 13px}
.share{display:inline-flex; gap:8px}
.share a{
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in oklch, white 10%, transparent);
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  display:inline-flex; align-items:center; justify-content:center; color: white;
  transition: background .2s, transform .15s;
}
.share a:hover{background: color-mix(in oklch, var(--gold) 30%, transparent); transform: translateY(-1px)}
.share svg{width:14px; height:14px}

.art-hero{
  margin: 0 0 clamp(40px, 5vw, 60px);
  aspect-ratio: 2.4/1;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse at 20% 30%, color-mix(in oklch, var(--gold) 45%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in oklch, var(--pink-900) 80%, black), var(--pink-700) 70%, color-mix(in oklch, var(--pink-500) 90%, white));
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  display:flex; align-items:flex-end;
}
.art-hero::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 22px,
      color-mix(in oklch, var(--gold) 10%, transparent) 22px 23px
    );
  opacity: 0.6;
}
.art-hero .cap{
  position: relative; padding: 28px 32px;
  color: var(--white-90); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.art-hero .badge{
  position: absolute; top: 24px; left: 32px;
  padding: 8px 14px; border-radius: 100px;
  background: color-mix(in oklch, white 94%, var(--gold));
  color: var(--pink-900);
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.art-hero .volume{
  position: absolute; right: 36px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(80px, 12vw, 160px); line-height: 0.85;
  color: color-mix(in oklch, white 90%, var(--gold)); font-weight: 300;
  letter-spacing: -0.04em;
}

.art-layout{
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(60px, 8vw, 120px);
  align-items: start;
}
@media (max-width: 1020px){ .art-layout{grid-template-columns: 1fr} }

.side-toc{
  position: sticky; top: 100px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 20px 0;
  border-top: 1px solid color-mix(in oklch, white 20%, transparent);
  border-bottom: 1px solid color-mix(in oklch, white 20%, transparent);
}
@media (max-width: 1020px){ .side-toc{position: static; margin-bottom: 20px} }
.side-toc h5{font-family: var(--mono); font-size: 10.5px; color: color-mix(in oklch, var(--gold) 90%, white); margin: 0 0 14px; font-weight: 500; letter-spacing: 0.2em}
.side-toc ol{list-style: none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; counter-reset: atoc}
.side-toc li{counter-increment: atoc; position:relative; padding-left: 24px; color: var(--white-90); line-height: 1.4}
.side-toc li::before{content: counter(atoc, decimal-leading-zero); position:absolute; left:0; top:0; color: color-mix(in oklch, var(--gold) 85%, white); font-weight: 500}
.side-toc a{color: var(--white-90); display:block; transition: color .15s}
.side-toc a:hover{color: white}

.art-body{max-width: 70ch; margin: 0 auto; width: 100%}
.art-body .lede{
  font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); font-weight: 400;
  line-height: 1.55; color: white; margin: 0 0 32px;
}
.art-body .lede::first-letter{
  font-family: var(--serif); font-style: italic; font-weight: 500;
  float: left; font-size: 74px; line-height: 0.85; padding: 6px 12px 0 0;
  color: color-mix(in oklch, var(--gold) 90%, white);
}
.art-body h2{
  font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); color: white;
  font-weight: 500; letter-spacing: -0.015em; margin: 44px 0 14px;
  scroll-margin-top: 100px;
}
.art-body h2 .n{
  font-family: var(--mono); font-size: 12px;
  color: color-mix(in oklch, var(--gold) 85%, white); letter-spacing: 0.12em;
  margin-right: 12px; font-weight: 500; display: inline-block; vertical-align: middle;
}
.art-body h3{
  font-family: var(--sans); font-size: 18px; color: white; font-weight: 600;
  margin: 26px 0 10px; letter-spacing: 0;
}
.art-body p{color: var(--white-90); font-size: 17px; line-height: 1.78; margin: 0 0 16px}
.art-body a.link, .art-body a{color: color-mix(in oklch, var(--gold) 90%, white); border-bottom: 1px solid color-mix(in oklch, var(--gold) 55%, transparent)}
.art-body ul{padding-left: 22px; margin: 10px 0 20px}
.art-body ul li{color: var(--white-90); font-size: 17px; line-height: 1.75; margin-bottom: 8px}
.art-body ul li::marker{color: color-mix(in oklch, var(--gold) 85%, white)}
.art-body strong{color: white; font-weight: 600}

.pullquote{
  margin: 36px -10px;
  padding: 30px 34px;
  border-left: 4px solid color-mix(in oklch, var(--gold) 80%, white);
  background: color-mix(in oklch, white 7%, transparent);
  border-radius: 0 16px 16px 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35; color: white;
  position: relative;
}
.pullquote::before{
  content: "\201C"; position: absolute; top: -6px; left: 16px;
  font-family: var(--serif); font-size: 64px; line-height: 1;
  color: color-mix(in oklch, var(--gold) 80%, white);
}

.art-body .callout{
  background: color-mix(in oklch, var(--gold) 18%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 50%, white);
  border-radius: 16px;
  padding: 24px 26px;
  margin: 30px 0;
  font-size: 15.5px;
  color: color-mix(in oklch, white 96%, var(--gold));
}
.art-body .callout .label{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in oklch, var(--gold) 95%, white); font-weight: 600; margin-bottom: 8px; display:block;
}

.side-right{
  position: sticky; top: 100px;
  display:flex; flex-direction:column; gap: 18px;
}
@media (max-width: 1020px){ .side-right{position: static} }
.side-card{
  padding: 20px 22px; border-radius: 14px;
  background: color-mix(in oklch, white 10%, transparent);
  border: 1px solid color-mix(in oklch, white 22%, transparent);
}
.side-card h6{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in oklch, var(--gold) 90%, white); font-weight: 500; margin: 0 0 12px;
}
.side-card p{font-size: 13.5px; line-height: 1.55; color: var(--white-90); margin: 0 0 10px}
.side-card ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 8px; font-size: 13.5px; color: var(--white-90)}
.side-card a{color: color-mix(in oklch, var(--gold) 90%, white)}
.side-card a:hover{color: white}
.side-cta{
  padding: 24px 22px; border-radius: 14px;
  background: color-mix(in oklch, var(--gold) 22%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 55%, white);
}
.side-cta h5{font-family: var(--serif); font-size: 20px; color: white; margin: 0 0 8px; font-weight: 500}
.side-cta p{font-size: 13.5px; color: color-mix(in oklch, white 94%, var(--gold)); margin: 0 0 14px; line-height: 1.5}
.side-cta .btn{
  width: 100%; justify-content: center;
  background: white; color: var(--pink-700);
  padding: 12px 18px; border-radius: 100px;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  display:inline-flex; align-items:center; gap: 8px;
}
.side-cta .btn:hover{background: color-mix(in oklch, var(--gold) 65%, white); color: var(--pink-900)}
.side-cta .btn svg{width:14px; height:14px}

.related{
  margin-top: clamp(60px, 8vw, 100px);
  padding: clamp(50px, 7vw, 80px) 0;
  border-top: 1px solid color-mix(in oklch, white 20%, transparent);
}
.related h3{font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); font-weight: 500; color: white; letter-spacing: -0.02em; margin: 0 0 6px}
.related .lead{color: var(--white-90); margin-bottom: 36px; max-width: 50ch}
.rel-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
@media (max-width: 860px){ .rel-grid{grid-template-columns: 1fr} }
.rel-card{
  padding: 24px 24px 22px; border-radius: 14px;
  background: color-mix(in oklch, white 8%, transparent);
  border: 1px solid color-mix(in oklch, white 20%, transparent);
  display:flex; flex-direction:column; gap: 10px;
  transition: transform .15s, background .2s, border-color .2s;
}
.rel-card:hover{transform: translateY(-3px); background: color-mix(in oklch, white 14%, transparent); border-color: color-mix(in oklch, var(--gold) 55%, white)}
.rel-card .date{font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in oklch, var(--gold) 90%, white)}
.rel-card h4{font-family: var(--serif); font-size: 20px; color: white; font-weight: 500; margin: 0; line-height: 1.25; letter-spacing: -0.01em}
.rel-card p{font-size: 13.5px; color: var(--white-90); margin: 0; line-height: 1.5}
.rel-card .arr{margin-top: auto; font-family: var(--mono); font-size: 12px; color: color-mix(in oklch, var(--gold) 90%, white); letter-spacing: 0.1em; padding-top: 10px}

.tags{
  display:flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 10px;
}
.tag{
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid color-mix(in oklch, white 25%, transparent);
  background: color-mix(in oklch, white 8%, transparent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white-90);
}

/* ========== WP EDITOR / ADMIN GUTTERS ========== */
/* Reset a few core block quirks inside our sections */
.wp-block-group.section,
.wp-block-group.hero,
.wp-block-group.page-head,
.wp-block-group.art-head{ padding-left:0; padding-right:0 }
.editor-styles-wrapper{ background: var(--pink-600) }

/* ========== NATIVE BLOCK STYLING ========== */
/* Style core button blocks to match .btn design — so clients can edit them natively */
.wp-block-buttons{display:flex; flex-wrap:wrap; gap:12px; margin:0}
.wp-block-buttons.hero-cta{margin-top:36px}
.wp-block-button__link{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 24px !important; border-radius: 100px !important;
  font-size: 14.5px; font-weight:500; border:none;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
  font-family: var(--sans);
}
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.btn-primary .wp-block-button__link{
  background: white !important; color: var(--pink-700) !important;
  font-weight: 600;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.35);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-block-button__link:hover{
  background: color-mix(in oklch, var(--gold) 80%, white) !important;
  color: var(--pink-900) !important;
  transform: translateY(-2px);
}
.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-block-button.btn-ghost .wp-block-button__link{
  background: transparent !important; color: white !important;
  border: 1px solid color-mix(in oklch, white 55%, transparent) !important;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.btn-ghost .wp-block-button__link:hover{
  background: color-mix(in oklch, white 12%, transparent) !important;
  border-color: white !important;
}

/* Native list inside .svc card */
.svc ul.wp-block-list{list-style:none; padding:0; margin: 0 0 26px; display:flex; flex-direction:column; gap: 8px}
.svc ul.wp-block-list li{font-size: 13.5px; color: var(--white-90); padding-left: 18px; position:relative}
.svc ul.wp-block-list li::before{content:""; position:absolute; left:0; top: 9px; width: 8px; height: 1px; background: color-mix(in oklch, var(--gold) 80%, white)}

/* Native list inside art-body */
.doc ul.wp-block-list, .art-body ul.wp-block-list{list-style:none; padding: 0; margin: 10px 0 24px; display:flex; flex-direction:column; gap: 10px}
.doc ul.wp-block-list li, .art-body ul.wp-block-list li{
  padding-left: 26px; position: relative; font-size: 16.5px; line-height: 1.7; color: var(--white-90);
}
.doc ul.wp-block-list li::before, .art-body ul.wp-block-list li::before{
  content:""; position:absolute; left:0; top:14px; width: 16px; height:1px;
  background: color-mix(in oklch, var(--gold) 80%, white);
}

/* Native group renders as div.wp-block-group — ensure our layout classes still flex */
.wp-block-group.hero-grid{display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 80px); align-items:center; position:relative; z-index:1}
@media (max-width: 960px){ .wp-block-group.hero-grid{grid-template-columns: 1fr} }
.wp-block-group.about-grid{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items:start}
@media (max-width: 960px){ .wp-block-group.about-grid{grid-template-columns:1fr} }
.wp-block-group.svc-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px}
@media (max-width: 960px){ .wp-block-group.svc-grid{grid-template-columns:1fr} }
.wp-block-group.pol-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px}
@media (max-width: 860px){ .wp-block-group.pol-grid{grid-template-columns:1fr} }
.wp-block-group.contact-grid{display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items:start}
@media (max-width: 960px){ .wp-block-group.contact-grid{grid-template-columns:1fr} }
.wp-block-group.section-head{display:grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items:end; margin-bottom: 56px}
@media (max-width: 860px){ .wp-block-group.section-head{grid-template-columns:1fr; gap:20px} }
.wp-block-group.feat-card{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 5vw, 80px); align-items:center;
  border-radius: var(--r-lg); overflow:hidden; padding: clamp(40px, 6vw, 72px); position:relative;
  background: color-mix(in oklch, var(--pink-900) 45%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 40%, white);
}
.wp-block-group.feat-card::before{
  content:""; position:absolute; inset: auto -20% -80% auto; width: 70%; aspect-ratio:1;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--gold) 60%, transparent), transparent 70%);
  opacity: .35;
}
@media (max-width: 860px){ .wp-block-group.feat-card{grid-template-columns:1fr} }

/* Service card using wp:group */
.wp-block-group.svc{
  position: relative; padding: 34px 32px 32px; display:flex; flex-direction:column;
  transition: transform .2s, box-shadow .25s, border-color .2s, background .2s; overflow:hidden;
}
.wp-block-group.svc:hover{
  transform: translateY(-4px);
  box-shadow: 0 40px 60px -40px rgba(0,0,0,0.5);
  background: color-mix(in oklch, white 14%, transparent);
  border-color: color-mix(in oklch, var(--gold) 60%, white);
}
.wp-block-group.svc h3{font-size: 26px; margin: 14px 0 12px; font-weight: 500; line-height:1.15; color: white}
.wp-block-group.svc p{color: var(--white-90); font-size: 15px; line-height:1.65; margin: 0 0 22px}

/* Pillars / policy / testimonial wrapper fixes */
.wp-block-group.pol h4{font-family: var(--serif); font-size: 22px; margin-bottom: 10px; font-weight:500; color: white}
.wp-block-group.pol p{font-size: 14.5px; color: var(--white-90); line-height: 1.65; margin:0}

/* Force wp:group with a className we rely on to drop WP's default padding constraints */
.wp-block-group.container,
.wp-block-group.hero-grid,
.wp-block-group.section-head{ margin-left:auto; margin-right:auto }

/* Paragraph eyebrow/desc/lead modifiers need to keep margins sensible */
p.eyebrow{margin:0}
p.lead{margin-top: 22px; font-size: clamp(16.5px, 1.3vw, 19px); color: var(--white-90); max-width: 54ch}
p.desc{color: var(--white-90); font-size: 17px; max-width: 60ch; margin:0}

/* Native image block inside hero — portrait frame */
.hero-portrait .wp-block-image,
.hero-portrait .wp-block-image img{width:100%; height:100%; margin:0}
.hero-portrait .wp-block-image img{object-fit: cover; object-position: center top}

/* Quote block = testimonial */
.tst-grid .wp-block-quote{
  position: relative; padding: 32px 30px 26px;
  display: flex; flex-direction: column; gap: 18px;
  background: color-mix(in oklch, white 10%, transparent);
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  margin:0;
}
.tst-grid .wp-block-quote p{color: white; font-family: var(--serif); font-size: 19px; line-height: 1.45; font-style: italic; font-weight: 400; margin: 0}
.tst-grid .wp-block-quote cite{display:flex; align-items:center; gap:12px; font-size: 13px; color: var(--white-70); font-style: normal}

/* Core list in hero-meta converted to group */
.hero-meta p{margin:0}

/* ============================================================
 * RESPONSIVE AUDIT — tablet + mobile refinements
 * ============================================================ */

/* Tablet: 2-col grids where we jump too hard from 3 -> 1 */
@media (max-width: 1024px) and (min-width: 721px){
  .svc-grid{grid-template-columns: repeat(2, 1fr)}
  .tst-grid{grid-template-columns: repeat(2, 1fr)}
  .steps{grid-template-columns: repeat(2, 1fr)}
  .socialrow{grid-template-columns: repeat(3, 1fr)}
  .art-layout{grid-template-columns: 1fr}
  .side-toc, .side-right{position: static !important; margin-bottom: 20px}
}

/* Tighten section rhythm and typography below 960 */
@media (max-width: 960px){
  :root{--pad: clamp(18px, 4vw, 32px)}
  .section,
  body > section:not(.hero):not(.page-head):not(.art-head),
  body > main > section:not(.hero):not(.page-head):not(.art-head){padding: clamp(40px, 7vw, 60px) 0}
  .hero{padding: clamp(40px, 8vw, 80px) 0 clamp(30px, 5vw, 50px)}
  .section-head{margin-bottom: 32px; gap: 14px !important}
  .section-head h2{margin-top: 8px}
  .hero h1{font-size: clamp(38px, 8vw, 64px)}
  .hero .lead{font-size: 16px}
  .hero-portrait-wrap{margin-top: 24px; max-width: 480px}
  .portrait-badge{left: 12px; right: 12px; bottom: 16px; max-width: none; font-size: 12px; padding: 14px 16px}
  .portrait-badge strong{font-size: 15px; margin-bottom: 4px}
  .feat-card{padding: clamp(28px, 5vw, 40px)}
  .feat-card h2{font-size: clamp(28px, 5.6vw, 40px)}
  .feat-card::before{inset: auto -40% -90% auto; width: 90%; opacity: .25}
  .news-kicker{padding: 18px 20px}
  .credentials{position: static !important; margin-top: 30px}
  .pub{gap: 16px}
  .pub-title{font-size: 19px}
  .downloads{margin-top: 30px}
  .contact-info{margin-top: 22px}
  form.adl-form, form.adlep-contact-form{padding: 24px}
  .foot-grid{gap: 24px}
}

/* Phone-specific */
@media (max-width: 720px){
  .socialrow{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .pillars{grid-template-columns: 1fr; gap: 10px}
  .marquee{font-size: clamp(16px, 4.2vw, 22px); gap: 40px}
  .hero-meta{gap: 8px 18px; font-size: 12.5px}
  .hero-cta{gap: 10px}
  .hero-cta .btn{padding: 13px 20px; font-size: 14px}
  .section-head h2{font-size: clamp(30px, 8.5vw, 44px); line-height: 1.08}
  .page-head h1{font-size: clamp(34px, 9vw, 54px)}
  .draft-banner{grid-template-columns: 1fr; gap: 12px; padding: 18px 20px}
  .draft-icon{width: 38px; height: 38px}
  .art-head h1{font-size: clamp(32px, 8.5vw, 52px)}
  .art-hero{aspect-ratio: 3/2}
  .art-hero .volume{font-size: clamp(64px, 20vw, 110px); right: 18px}
  .art-hero .cap{padding: 22px 20px; font-size: 10.5px}
  .art-hero .badge{top: 18px; left: 20px; padding: 6px 12px; font-size: 10px}
  .art-body .lede::first-letter{font-size: 56px}
  .byline{gap: 12px}
  .byline .meta-right{gap: 14px; width: 100%}
  .svc{padding: 26px 24px 24px}
  .svc h3{font-size: 22px}
  .svc .glyph{top: 22px; right: 22px; width: 36px; height: 36px}
  .tst{padding: 26px 24px 22px}
  .tst .mark{font-size: 64px; top: 10px; right: 18px}
  .tst blockquote{font-size: 18px}
  .step{padding: 26px 24px; min-height: 0}
  .step .num{font-size: 38px}
  .pol{padding: 22px 24px}
  .pub{padding: 20px 0}
  .pub-title{font-size: 18px; line-height: 1.25}
  .pub .date{order: -1}
  .downloads{padding: 26px 22px}
  .dl-list li a{padding: 12px 10px; font-size: 13.5px; gap: 10px}
  .foot-grid{grid-template-columns: 1fr; gap: 26px; margin-bottom: 32px}
  .foot-bottom{flex-direction: column; align-items: flex-start; gap: 12px}
  .toc{position: static !important}
  .layout{gap: 24px; padding-bottom: 40px}
  .cred-list li{grid-template-columns: 26px 1fr; gap: 12px}
  .cred-list .ico{width: 26px; height: 26px; font-size: 10px}
}

/* Very small phones */
@media (max-width: 420px){
  :root{--pad: 16px}
  .brand .wordmark{font-size: 15px}
  .hero h1{font-size: 34px; letter-spacing: -0.02em}
  .section-head h2{font-size: 28px}
  .hero-cta{flex-direction: column; align-items: stretch}
  .hero-cta .btn{justify-content: center; width: 100%}
  .form-actions{flex-direction: column; align-items: stretch}
  .form-actions .btn{width: 100%; justify-content: center}
  .byline .meta-right{flex-direction: column; align-items: flex-start; gap: 8px}
}

/* Media safety */
img, iframe, video{max-width: 100%; height: auto}
.marquee-wrap{max-width: 100vw; overflow: hidden}