/* ============================================================
   The Negotiation Experts — Site Design System
   Single source of truth for the redesigned site.
   Palette + type per TEMPLATE-GUIDE. Hand-editable, crawlable.
   ============================================================ */

:root{
  --white:#FFFFFF;
  --grey:#F4F4F2;
  --ink:#16140f;
  --accent:#FFC400;
  --body:#34302a;
  --muted:#5a5446;
  --faint:#9a917d;
  --line:rgba(22,20,15,.12);
  --serif:'Bodoni Moda', Georgia, serif;
  --sans:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--ink); color:var(--white);}
img{max-width:100%; display:block;}
a{color:inherit;}

/* ---------- shared section primitives ---------- */
.eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
.eyebrow.center{justify-content:center;}
.eyebrow .rule{width:42px; height:1px; background:var(--accent);}
.eyebrow .label{font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); font-weight:600;}

h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.015em;}
.italic-accent{font-style:italic; color:var(--accent);}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; background:transparent;
  transition:background .5s ease, padding .5s ease, box-shadow .5s ease;
}
.nav.solid{
  background:rgba(243,236,221,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(22,20,15,.08);
  padding:14px 40px;
}
/* sticky white variant for inner pages (blog/article) */
.nav--sticky{
  position:sticky;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(22,20,15,.08);
  padding:20px 40px;
}
.nav__brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink);}
.nav__brand span{font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:.01em;}
.nav__links{display:flex; align-items:center; gap:34px;}
.nav__link{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:#3c372d; font-weight:500;
}
.nav__link.active{color:var(--ink); font-weight:700; border-bottom:2px solid var(--accent); padding-bottom:3px;}
.nav__btn{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); font-weight:700;
  background:var(--accent); padding:11px 20px; border-radius:2px;
}

/* dropdown menus */
.nav-menu{position:relative;}
.nav-menu__trigger{
  display:flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:#3c372d; font-weight:500; padding:8px 0;
}
.nav-caret{font-size:9px; transition:transform .3s ease; display:inline-block;}
.nav-panel{
  position:absolute; top:calc(100% + 14px); left:0;
  background:var(--white); border:1px solid rgba(22,20,15,.10);
  box-shadow:0 30px 70px rgba(22,20,15,.16); border-radius:4px;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
.nav-menu:hover .nav-panel, .nav-menu:focus-within .nav-panel{opacity:1; visibility:visible; transform:none; pointer-events:auto;}
.nav-menu:hover .nav-caret, .nav-menu:focus-within .nav-caret{transform:rotate(180deg);}
.nav-panel--mega{padding:30px 34px; display:grid; grid-template-columns:1fr 1fr; gap:38px; width:620px;}
.nav-panel--list{padding:24px 26px; width:300px;}
.nav-panel__head{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:18px;}
.nav-feature{display:block; text-decoration:none; margin-bottom:16px;}
.nav-feature__title{font-family:var(--serif); font-size:17px; color:var(--ink); margin-bottom:3px;}
.nav-feature__desc{font-size:12.5px; color:#6b6457; line-height:1.45;}
.nav-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px 20px;}
.nav-grid a{text-decoration:none; font-size:13.5px; color:#3c372d;}
.nav-panel__cta{margin-top:24px; padding-top:18px; border-top:1px solid rgba(22,20,15,.10);}
.nav-panel__cta a{text-decoration:none; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink);}
.nav-reslink{display:flex; gap:14px; text-decoration:none; padding:12px 10px; border-radius:3px; transition:background .2s ease;}
.nav-reslink:hover{background:var(--grey);}
.nav-reslink__num{font-family:var(--serif); color:var(--accent); font-size:15px;}
.nav-reslink__title{display:block; font-family:var(--serif); font-size:16px; color:var(--ink);}
.nav-reslink__desc{display:block; font-size:12.5px; color:#6b6457; line-height:1.45; margin-top:2px;}

/* ============================================================
   HERO (boardroom scene)
   ============================================================ */
@keyframes lightDrift{0%{transform:translateX(-4%) skewX(-13deg);opacity:.42;}50%{transform:translateX(5%) skewX(-13deg);opacity:.62;}100%{transform:translateX(-4%) skewX(-13deg);opacity:.42;}}
@keyframes sheen{0%{transform:translateX(-40%);opacity:0;}35%{opacity:.9;}65%{opacity:.9;}100%{transform:translateX(60%);opacity:0;}}
@keyframes floatMote{0%{transform:translateY(0) translateX(0);}50%{transform:translateY(-46px) translateX(12px);}100%{transform:translateY(0) translateX(0);}}
@keyframes cuePulse{0%{transform:scaleY(0);transform-origin:top;}40%{transform:scaleY(1);transform-origin:top;}60%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

.hero{position:relative; height:100vh; min-height:680px; overflow:hidden;}
.hero__base{position:absolute; inset:0; background:radial-gradient(120% 80% at 72% 8%, #FFFFFF 0%, #FFFFFF 42%, #F4F4F2 100%);}
.hero__layer{position:absolute; inset:0; will-change:transform;}
.hero__glow{position:absolute; top:-10%; right:-6%; width:55%; height:90%; background:radial-gradient(closest-side, rgba(255,244,222,.9), rgba(255,244,222,0) 70%); filter:blur(8px);}
.hero__table{position:absolute; left:50%; bottom:-16vh; width:170vw; height:78vh; transform:translateX(-50%) perspective(1500px) rotateX(64deg); transform-origin:bottom center; border-radius:46% 46% 12% 12% / 30% 30% 8% 8%; overflow:hidden; background:linear-gradient(180deg,#241c15 0%,#5c4836 100%); box-shadow:0 -1px 0 rgba(255,238,210,.35) inset, 0 60px 120px rgba(40,28,16,.35);}
.hero__grain{position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,.05) 7px 8px); opacity:.5;}
.hero__edgelight{position:absolute; top:0; left:0; right:0; height:42%; background:linear-gradient(180deg, rgba(255,240,214,.5), rgba(255,240,214,0)); mix-blend-mode:screen;}
.hero__pool{position:absolute; top:6%; right:8%; width:60%; height:80%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, #ffe9c2), rgba(255,233,194,0) 72%); mix-blend-mode:screen; opacity:.55;}
.hero__sheen{position:absolute; top:0; bottom:0; left:18%; width:34%; background:linear-gradient(90deg, rgba(255,247,228,0), rgba(255,247,228,.85), rgba(255,247,228,0)); filter:blur(14px); animation:sheen 11s ease-in-out infinite;}
.hero__chair{position:absolute; bottom:30vh; width:120px; height:230px; border-radius:60px 60px 18px 18px; background:linear-gradient(180deg, rgba(36,26,18,.20), rgba(36,26,18,.06)); filter:blur(7px);}
.hero__chair--l{left:18%;} .hero__chair--r{right:18%;}
.hero__shaft{position:absolute; inset:0; will-change:transform; pointer-events:none;}
.hero__shaft-a{position:absolute; top:-20%; right:14%; width:30%; height:150%; background:linear-gradient(90deg, rgba(255,246,226,0), rgba(255,246,226,.7) 45%, rgba(255,246,226,0)); mix-blend-mode:soft-light; animation:lightDrift 14s ease-in-out infinite;}
.hero__shaft-b{position:absolute; top:-20%; right:26%; width:8%; height:150%; background:linear-gradient(90deg, rgba(255,248,231,0), rgba(255,248,231,.55), rgba(255,248,231,0)); mix-blend-mode:soft-light; transform:skewX(-13deg);}
.hero__mote{position:absolute; border-radius:50%; background:rgba(255,244,224,1); box-shadow:0 0 6px 1px rgba(255,236,200,.8); animation:floatMote 9s ease-in-out infinite;}
.hero__content{position:absolute; inset:0; will-change:transform; display:flex; flex-direction:column; justify-content:center; padding:0 7vw;}
.hero__inner{max-width:1100px;}
.hero__h1{font-family:var(--serif); font-weight:500; font-size:clamp(58px,11vw,178px); line-height:.92; letter-spacing:-.015em; margin:0; color:var(--ink);}
.hero__h1 .line{display:block; overflow:hidden; padding-bottom:.04em;}
.hero__h1 .word{display:inline-block;}
.hero__lede{max-width:540px; margin:34px 0 0; font-size:clamp(16px,1.5vw,20px); line-height:1.6; color:#4a443a;}
.hero__cta{display:flex; align-items:center; gap:26px; margin-top:42px; flex-wrap:wrap;}
.btn-dark{font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-decoration:none; color:#FFFFFF; background:var(--ink); padding:16px 30px; border-radius:2px;}
.btn-ghost{font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:10px;}
.btn-accent{display:inline-block; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; text-decoration:none; color:var(--ink); background:var(--accent); padding:16px 30px; border-radius:2px;}
.hero__cue{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px;}
.hero__cue span:first-child{font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#7a7263;}
.hero__cue-line{display:block; width:1px; height:46px; background:var(--ink); animation:cuePulse 2.6s ease-in-out infinite;}

/* ============================================================
   GENERIC SECTIONS
   ============================================================ */
.section{position:relative; padding:clamp(110px,16vh,200px) 7vw;}
.section--grey{background:var(--grey);}
.section--ink{background:var(--ink); color:#FFFFFF; overflow:hidden;}
.section--white{background:var(--white);}
.wrap{max-width:1320px; margin:0 auto;}
.wrap--narrow{max-width:1180px;}

.lead-statement{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.4vw,68px); line-height:1.14; letter-spacing:-.01em; margin:0; color:var(--ink);}
.lead-statement .dim{color:#b3a98f;}

.three-up{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:48px; margin-top:96px;}
.three-up__num{font-family:var(--serif); font-size:28px; color:var(--accent); margin-bottom:14px;}
.three-up h3{font-size:22px; margin:0 0 12px;}
.three-up p{margin:0; color:var(--muted); line-height:1.65; font-size:15px;}

/* method / contract */
.method{display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:center; max-width:1320px; margin:0 auto;}
.method h2{font-size:clamp(38px,5vw,72px); line-height:1.02; margin:0 0 26px;}
.method p{max-width:440px; margin:0; color:var(--muted); line-height:1.7; font-size:16px;}
.contract{position:relative; background:var(--white); border:1px solid rgba(22,20,15,.10); box-shadow:0 40px 80px rgba(40,28,16,.16); padding:48px 44px 40px; border-radius:3px;}
.contract__head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:8px;}
.contract__head b{font-family:var(--serif); font-size:19px; font-weight:600;}
.contract__head span{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);}
.clause{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(22,20,15,.07);}
.clause:last-of-type{border-bottom:none;}
.clause__num{font-family:var(--serif); color:var(--accent); font-size:15px; min-width:26px;}
.clause__text{color:#3c372d; font-size:15.5px; line-height:1.5;}
.contract__sign{display:flex; justify-content:space-between; align-items:flex-end; margin-top:26px; padding-top:22px; border-top:1px solid var(--line);}
.contract__sign small{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);}

/* convergence */
.conv__head{text-align:center; max-width:760px; margin:0 auto 80px;}
.conv__head h2{font-weight:400; font-size:clamp(34px,5vw,68px); line-height:1.06; margin:0;}
.conv__track{position:relative; height:2px; background:rgba(243,236,221,.18); margin:0 6%;}
.conv__marker{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); transition:left 1.6s cubic-bezier(.4,0,.1,1);}
.conv__marker--l{left:0; background:#FFFFFF;}
.conv__marker--r{left:100%; background:var(--accent);}
.conv__grid{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:24px; align-items:center; margin-top:54px; text-align:center;}
.conv__label{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#8f8773; margin-bottom:14px;}
.conv__label.accent{color:var(--accent);}
.conv__fig{font-family:var(--serif); font-size:clamp(34px,5vw,62px); color:#b8b09a;}
.conv__fig--mid{font-weight:600; font-size:clamp(54px,9vw,116px); line-height:1; letter-spacing:-.02em; color:#FFFFFF;}
.conv__note{text-align:center; max-width:520px; margin:56px auto 0; color:#a59d89; line-height:1.7; font-size:15px;}

/* services grid */
.svc-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:70px; max-width:1320px;}
.svc-head h2{font-size:clamp(34px,5vw,64px); line-height:1.02; margin:0;}
.svc-head p{max-width:360px; color:var(--muted); line-height:1.65; font-size:15px; margin:0;}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); max-width:1320px;}
.svc-card{background:var(--white); padding:44px 36px 40px; transition:background .4s ease; text-decoration:none; color:inherit; display:block;}
.svc-card__num{font-family:var(--serif); font-size:24px; color:var(--accent); margin-bottom:30px;}
.svc-card h3{font-size:26px; margin:0 0 14px;}
.svc-card p{margin:0 0 26px; color:var(--muted); line-height:1.6; font-size:14.5px;}
.svc-card__link{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); font-weight:600;}

/* results counters */
.results-head{text-align:center; margin-bottom:90px;}
.results-head h2{font-weight:400; font-size:clamp(32px,4.6vw,60px); line-height:1.06; margin:0;}
.results-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:48px; max-width:1240px; margin:0 auto; text-align:center;}
.results-grid .num{font-family:var(--serif); font-weight:500; font-size:clamp(48px,6vw,82px); line-height:1; color:var(--ink);}
.results-grid .cap{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#7a7263; margin-top:16px;}

/* contact band */
.contact{text-align:center;}
.contact h2{font-weight:400; font-size:clamp(44px,8vw,128px); line-height:.98; letter-spacing:-.02em; margin:0;}
.contact__actions{display:flex; gap:30px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:48px;}
.contact__phone{font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-decoration:none; color:#FFFFFF; border-bottom:1px solid rgba(243,236,221,.4); padding-bottom:4px;}

/* footer */
.footer{background:var(--ink); color:#FFFFFF; padding:0 7vw 50px;}
.footer--home{background:var(--ink); padding:0 7vw 0;}
.footer__inner{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; padding-top:40px; border-top:1px solid rgba(255,255,255,.16); max-width:1240px; margin:0 auto;}
.footer__logo{font-family:var(--serif); font-size:22px; font-weight:600; margin-bottom:8px;}
.footer__desc{font-size:13px; color:#8f8773;}
.footer__links{display:flex; gap:30px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.footer__links a{color:#a59d89; text-decoration:none;}
.footer__copy{font-size:12px; color:#6f6857;}

/* ============================================================
   BLOG / JOURNAL
   ============================================================ */
.masthead{padding:clamp(60px,9vh,110px) 7vw clamp(40px,6vh,64px);}
.masthead__row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px;}
.masthead h1{font-size:clamp(46px,8vw,108px); line-height:.96; letter-spacing:-.02em; margin:0; max-width:13ch;}
.masthead__intro{max-width:360px; margin:0; color:var(--muted); line-height:1.7; font-size:16px;}
.filter{display:flex; flex-wrap:wrap; gap:10px; margin-top:48px;}
.chip{font-family:inherit; cursor:pointer; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:9px 18px; border-radius:40px; border:1px solid var(--line); background:transparent; color:#3c372d; transition:all .3s ease;}
.chip.active{background:var(--ink); color:#FFFFFF; border-color:var(--ink);}

.feat{display:grid; grid-template-columns:1.15fr 1fr; gap:0; text-decoration:none; border:1px solid var(--line); overflow:hidden; border-radius:4px; color:inherit;}
.feat__media{position:relative; overflow:hidden; min-height:420px; background:linear-gradient(135deg,#1d1812,#4a3a2b);}
.feat__media .pattern{position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 15%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 9px, rgba(0,0,0,.05) 9px 10px); transition:transform .6s ease;}
.feat:hover .pattern{transform:scale(1.05);}
.feat__tag{position:absolute; top:24px; left:24px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); background:var(--accent); padding:7px 14px; border-radius:40px; font-weight:700;}
.feat__body{padding:clamp(34px,4vw,64px); display:flex; flex-direction:column; justify-content:center; background:var(--white);}
.feat__meta{display:flex; align-items:center; gap:14px; margin-bottom:22px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);}
.feat__meta .cat{color:var(--accent); font-weight:700;}
.feat__body h2{font-size:clamp(28px,3.4vw,46px); line-height:1.08; margin:0 0 20px; color:var(--ink); transition:color .3s ease;}
.feat:hover .feat__body h2{color:#6b5a16;}
.feat__body p{margin:0 0 28px; color:var(--muted); line-height:1.7; font-size:16px;}
.byline{display:flex; align-items:center; gap:14px;}
.byline .avatar{width:38px; height:38px; border-radius:50%; background:var(--ink); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:15px;}
.byline .who{font-size:13px; color:var(--muted);}
.byline .who b{font-weight:600; color:var(--ink);}

.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:48px 40px;}
.post-card{display:block; text-decoration:none; color:inherit;}
.post-card__media{position:relative; overflow:hidden; border-radius:4px; aspect-ratio:3/2; background:linear-gradient(135deg,#222,#4a3a2b);}
.post-card__media .pattern{position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 15%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 55%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 9px, rgba(0,0,0,.05) 9px 10px); transition:transform .6s ease;}
.post-card:hover .post-card__media .pattern{transform:scale(1.06);}
.post-card__meta{display:flex; align-items:center; gap:12px; margin:22px 0 12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);}
.post-card__meta .cat{color:var(--accent); font-weight:700;}
.post-card h3{font-size:23px; line-height:1.16; letter-spacing:-.005em; margin:0 0 12px; color:#2a261d; transition:color .3s ease;}
.post-card:hover h3{color:#6b5a16;}
.post-card p{margin:0 0 16px; color:#6b6457; line-height:1.6; font-size:14.5px;}
.post-card__link{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); font-weight:600;}
.no-posts{padding:80px 0; text-align:center; color:var(--faint); font-family:var(--serif); font-style:italic; font-size:20px;}

/* newsletter strip */
.brief{display:grid; grid-template-columns:1.2fr 1fr; gap:7vw; align-items:center; max-width:1240px; margin:0 auto;}
.brief h2{font-weight:400; font-size:clamp(30px,4vw,54px); line-height:1.06; margin:0;}
.brief form{display:flex; flex-direction:column; gap:14px;}
.brief input{background:transparent; border:1px solid rgba(255,255,255,.28); color:#FFFFFF; padding:16px 18px; font-family:inherit; font-size:15px; border-radius:2px; outline:none;}
.brief input::placeholder{color:rgba(255,255,255,.5);}
.brief button{font-family:inherit; cursor:pointer; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink); background:var(--accent); border:none; padding:16px 24px; border-radius:2px;}
.brief__msg{font-size:12.5px; color:#a59d89; min-height:16px;}

/* ============================================================
   ARTICLE (long-form read)
   ============================================================ */
.read-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--accent); z-index:80; transition:width .1s linear;}
.article__header{padding:clamp(60px,9vh,110px) 7vw clamp(36px,5vh,56px); max-width:840px; margin:0 auto;}
.article__kicker{display:flex; align-items:center; gap:14px; margin-bottom:26px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);}
.article__kicker .cat{color:var(--accent); font-weight:700;}
.article__header h1{font-size:clamp(38px,6vw,72px); line-height:1.02; margin:0 0 26px;}
.article__standfirst{margin:0 0 32px; font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--muted);}
.article__byline{display:flex; align-items:center; gap:14px; padding-top:24px; border-top:1px solid var(--line);}
.article__byline .avatar{width:44px; height:44px; border-radius:50%; background:var(--ink); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:17px;}
.article__byline .who{font-size:13.5px; color:var(--muted);}
.article__byline .who b{font-weight:600; color:var(--ink);}
.article__byline .who .date{color:var(--faint);}
.article__cover{max-width:1080px; margin:0 auto clamp(40px,6vh,72px); padding:0 7vw;}
.article__cover-inner{position:relative; aspect-ratio:21/9; border-radius:5px; overflow:hidden; background:linear-gradient(135deg,#1d1812,#4a3a2b);}
.article__cover-inner .pattern{position:absolute; inset:0; background:radial-gradient(120% 90% at 72% 12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 10px, rgba(0,0,0,.05) 10px 11px);}

.wp-body{max-width:720px; margin:0 auto; padding:0 7vw clamp(60px,9vh,100px);}
.wp-body > p:first-of-type, .wp-body .lead{font-size:21px; color:var(--ink);}
.wp-body p{margin:0 0 22px; color:var(--body); line-height:1.75; font-size:18px;}
.wp-body h2{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.01em; margin:56px 0 20px; color:var(--ink);}
.wp-body h3{font-family:var(--serif); font-weight:500; font-size:22px; margin:38px 0 12px; color:var(--ink);}
.wp-body strong{color:var(--ink); font-weight:600;}
.wp-body a{color:#8a7a2c;}
.wp-body blockquote{margin:40px 0; padding:4px 0 4px 28px; border-left:3px solid var(--accent); font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.6vw,30px); line-height:1.3; color:var(--ink);}
.wp-body ul, .wp-body ol{margin:0 0 22px; padding:0; list-style:none;}
.wp-body li{position:relative; padding-left:30px; margin-bottom:14px; color:var(--body); line-height:1.65; font-size:17px;}
.wp-body li::before{content:''; position:absolute; left:0; top:11px; width:8px; height:8px; background:var(--accent); border-radius:50%;}
.wp-cta{margin-top:64px; padding:40px; background:var(--grey); border-radius:5px; text-align:center;}
.wp-cta__title{font-family:var(--serif); font-size:26px; margin-bottom:12px;}
.wp-cta p{margin:0 0 24px; color:var(--muted); font-size:16px; line-height:1.6;}

/* article extras: ordered lists, table of contents, data tables, callouts, FAQ */
.wp-body ol{counter-reset:wpol; list-style:none;}
.wp-body ol li{counter-increment:wpol;}
.wp-body ol li::before{content:counter(wpol); top:0; width:auto; height:auto; background:none; color:var(--accent); font-family:var(--serif); font-size:15px; left:2px;}
.wp-toc{background:var(--grey); border-left:3px solid var(--accent); padding:24px 28px; border-radius:0 5px 5px 0; margin:0 0 40px;}
.wp-toc__label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:14px;}
.wp-toc ol{margin:0; padding:0;}
.wp-toc ol li{margin-bottom:8px; font-size:15.5px;}
.wp-toc a{color:#8a7a2c; text-decoration:none;}
.wp-table-wrap{overflow-x:auto; margin:0 0 26px;}
.data-table{width:100%; border-collapse:collapse; font-size:15px;}
.data-table th, .data-table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5;}
.data-table th{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700;}
.data-table tr:last-child td{border-bottom:none;}
.callout-box{background:var(--grey); border-left:3px solid var(--accent); padding:22px 26px; border-radius:0 5px 5px 0; margin:32px 0;}
.callout-box p{margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.2vw,22px); line-height:1.4; color:var(--ink);}
.faq-section{max-width:720px; margin:0 auto; padding:0 7vw clamp(70px,10vh,110px);}
.faq-label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:14px;}
.faq-heading{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,38px); margin:0 0 36px; color:var(--ink);}
.faq-item{border-top:1px solid var(--line); padding:24px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{font-family:var(--serif); font-weight:500; font-size:20px; margin:0 0 10px; color:var(--ink);}
.faq-a{margin:0; color:var(--body); line-height:1.7; font-size:16px;}

/* related reading (from converted article sidebars) */
.related{background:var(--grey); padding:clamp(56px,9vh,90px) 7vw;}
.related__inner{max-width:1080px; margin:0 auto;}
.related__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; margin-top:36px;}
.related__col h3{font-family:var(--serif); font-weight:500; font-size:20px; margin:0 0 16px; color:var(--ink);}
.related__col ul{list-style:none; margin:0; padding:0;}
.related__col li{margin-bottom:11px; line-height:1.45;}
.related__col a{color:#5a5446; text-decoration:none; font-size:15px; transition:color .2s ease;}
.related__col a:hover{color:#8a7a2c;}

/* ============================================================
   GATED LANDING
   ============================================================ */
.gate{position:relative; min-height:100vh; background:var(--ink); color:#FFFFFF; font-family:var(--sans); display:flex; flex-direction:column;}
.gate__nav{display:flex; align-items:center; justify-content:space-between; padding:24px 40px;}
.gate__nav a{text-decoration:none;}
.gate__nav .brand{font-family:var(--serif); font-weight:600; font-size:21px; color:#FFFFFF;}
.gate__nav .back{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#a59d89; font-weight:500;}
.gate__body{flex:1; display:grid; grid-template-columns:1.1fr .9fr; gap:0; align-items:stretch;}
.gate__pitch{padding:clamp(40px,7vh,90px) clamp(40px,5vw,90px); display:flex; flex-direction:column; justify-content:center; max-width:680px;}
.gate__pitch h1{font-size:clamp(38px,5.5vw,76px); line-height:1.0; margin:0 0 26px;}
.gate__pitch .lede{max-width:520px; margin:0 0 40px; font-size:clamp(16px,1.7vw,19px); line-height:1.65; color:#c9c1b0;}
.gate__takeaway-head{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#8f8773; font-weight:700; margin-bottom:20px;}
.gate__takeaways{display:flex; flex-direction:column; gap:18px; max-width:520px;}
.gate__takeaway{display:flex; gap:16px;}
.gate__takeaway .num{font-family:var(--serif); color:var(--accent); font-size:16px; min-width:24px;}
.gate__takeaway .txt{color:#d8d1c1; font-size:16px; line-height:1.5;}
.gate__author{display:flex; align-items:center; gap:14px; margin-top:48px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14);}
.gate__author .avatar{width:44px; height:44px; border-radius:50%; background:#FFFFFF; color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:17px;}
.gate__author .who{font-size:13.5px; color:#a59d89;}
.gate__author .who b{font-weight:600; color:#FFFFFF;}
.gate__form-panel{background:#FFFFFF; color:var(--ink); padding:clamp(40px,6vh,80px) clamp(36px,4vw,68px); display:flex; flex-direction:column; justify-content:center;}
.gate__form-panel h2{font-size:clamp(26px,3vw,36px); line-height:1.08; margin:0 0 10px;}
.gate__form-panel .sub{margin:0 0 32px; color:#6b6457; font-size:15px; line-height:1.6;}
.gate__form{display:flex; flex-direction:column; gap:16px;}
.gate__label{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:8px;}
.gate-input{width:100%; box-sizing:border-box; background:#FFFFFF; border:1px solid rgba(22,20,15,.16); color:var(--ink); padding:15px 16px; font-family:var(--sans); font-size:15px; border-radius:3px; outline:none; transition:border-color .25s ease, box-shadow .25s ease;}
.gate-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);}
.gate-input::placeholder{color:var(--faint);}
.gate__err{font-size:13px; color:#c0392b; min-height:17px; line-height:1.4;}
.gate__submit{font-family:inherit; cursor:pointer; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink); background:var(--accent); border:none; padding:17px 24px; border-radius:3px; transition:opacity .25s ease;}
.gate__fineprint{margin:6px 0 0; font-size:12px; color:var(--faint); line-height:1.5; text-align:center;}
.gate__done{display:none; text-align:center; padding:20px 0;}
.gate__done .check{width:64px; height:64px; border-radius:50%; background:color-mix(in srgb, var(--accent) 22%, transparent); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; font-size:30px; color:var(--ink);}
.gate__done h2{font-size:30px; margin:0 0 12px;}
.gate__done p{margin:0; color:#6b6457; font-size:15px; line-height:1.6;}
.gate__done .manual{display:inline-block; margin-top:22px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink); border-bottom:2px solid var(--accent); text-decoration:none; padding-bottom:3px;}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
[data-reveal].in{opacity:1; transform:none;}
.hero__h1 .word{opacity:0; transform:translateY(110%); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.hero__h1 .word.in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;}
  [data-reveal]{opacity:1; transform:none; transition:none;}
  .hero__h1 .word{opacity:1; transform:none; transition:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav, .nav--sticky{padding:16px 20px;}
  .nav__links{gap:18px;}
  .nav-menu, .nav__link:not(.nav__link--keep){display:none;}
  .nav__btn{display:inline-block;}
  .method, .conv__grid, .svc-head, .brief, .gate__body{grid-template-columns:1fr;}
  .gate__body{display:flex; flex-direction:column;}
  .feat{grid-template-columns:1fr;}
  .feat__media{min-height:240px;}
  .three-up{margin-top:56px; gap:36px;}
  .conv__fig--mid{font-size:clamp(48px,16vw,90px);}
}