/* ==========================================================================
   uplift.css: the shared visual layer for Mashman Publishing, Mashman
   Properties, and Mashman Investments. Loaded after property.css on every
   page; byte-identical in all three repos (change it in one, copy it to the
   other two). It adds depth to the MASHMAN design system without changing
   its palette or type: Ink, Platinum, and White only.
   Motion animates transform and opacity only, is off under
   prefers-reduced-motion, and nothing here prints.
   ========================================================================== */

/* ---------------------------------------------------- site-wide touches */

/* Headlines never leave one light word alone on its last line: the light
   phrase moves to the next line as a whole when it does not fit, and lines
   are balanced. A phrase too long for one line still wraps inside itself. */
h1,h2,.u-display{text-wrap:balance;}
h1 em,h2 em{display:inline-block; text-wrap:balance;}

/* Eyebrow rules draw in as their section reveals. */
.js .rv .eyebrow::before,.js .eyebrow.rv::before{transform:scaleX(0); transform-origin:left center; transition:transform 1.1s var(--ease) .25s;}
.js .rv.in .eyebrow::before,.js .eyebrow.rv.in::before{transform:none;}
.cta .eyebrow::before{transform-origin:center;}

/* Grid cells answer the pointer: a platinum rule runs along the top. */
.grid > .cell{position:relative; transition:background .5s var(--ease);}
.grid > .cell::after{
  content:""; position:absolute; left:0; top:0; height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--platinum), transparent);
  transform:scaleX(0); transition:transform .7s var(--ease); pointer-events:none;
}
.grid > .cell:hover{background:var(--panel);}
.s-white .grid > .cell:hover{background:var(--white);}
.grid > .cell:hover::after{transform:scaleX(1);}
a.cell:hover{background:var(--panel);}

/* White buttons stay white on hover: no platinum or sepia tint. */
.btn-light:hover,.btn-light:focus-visible,.btn-light:active,
.header-cta:hover,.header-cta:focus-visible,
.subscribe button:hover{background:var(--white); color:var(--ink); border-color:var(--white);}

/* Stats: numerals in the same sheen as the headlines. */
.s-ink .stat-big{
  background:linear-gradient(180deg, #FFFFFF 0%, var(--platinum) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.u-statband .stats{border-top:0;}
.u-statband .stat{position:relative;}
.u-statband .stat-big{font-size:clamp(38px, 4.6vw, 64px); font-weight:800;}

/* Headings that stay in view beside long content, on wide screens. */
@media (min-width:881px){ .u-sticky{position:sticky; top:120px; align-self:start;} }

/* ---------------------------------------------------- marquee */
.u-marquee-band{padding:0 !important; border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);}
.u-marquee{
  overflow:hidden; white-space:nowrap; padding:clamp(18px, 2.4vw, 30px) 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.u-marquee-track{display:inline-flex; gap:0; animation:u-marquee 48s linear infinite; will-change:transform;}
.u-marquee-track span{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(22px, 3.2vw, 44px); letter-spacing:-0.01em; line-height:1;
  color:rgba(200,197,190,0.26);
  padding:0 clamp(18px, 2.2vw, 34px); display:inline-flex; align-items:center;
}
.u-marquee-track span:nth-child(3n+1){color:var(--white);}
.u-marquee-track span::after{
  content:""; width:8px; height:8px; margin-left:clamp(36px, 4.4vw, 68px);
  background:var(--platinum); transform:rotate(45deg); flex:0 0 8px; opacity:.7;
}
.u-marquee:hover .u-marquee-track{animation-play-state:paused;}
@keyframes u-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------------------------------------------------- the 360 orbit */
.u-orbit{position:relative; margin:0 auto; width:min(100%, 440px); aspect-ratio:1/1;}
.u-orbit svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.u-orbit-ring{fill:none; stroke:var(--rule-light); stroke-width:1;}
.u-orbit-dash{fill:none; stroke:var(--ink); stroke-width:1.4; stroke-dasharray:6 10; opacity:.35; transform-origin:200px 200px; animation:u-spin 60s linear infinite;}
.u-orbit-inner{fill:var(--ink);}
.u-orbit-spin{transform-origin:200px 200px; animation:u-spin 14s linear infinite;}
.u-orbit-dot{fill:var(--ink);}
.u-orbit-core{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--white); pointer-events:none;
}
.u-orbit-core b{font-family:var(--display); font-weight:800; font-size:clamp(40px, 6vw, 64px); letter-spacing:-0.04em; line-height:1;
  background:linear-gradient(180deg, #FFFFFF, var(--platinum)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.u-orbit-core span{margin-top:8px; font-family:var(--display); font-size:9.5px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--platinum);}
.u-orbit-node{
  position:absolute; transform:translate(-50%, -50%);
  font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); background:var(--white); border:1px solid var(--ink); padding:10px 14px; white-space:nowrap;
  box-shadow:0 14px 30px -18px rgba(10,10,10,0.5);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.u-orbit-node:hover{background:var(--ink); color:var(--white);}
.u-orbit-node.n1{left:50%; top:12.5%;}
.u-orbit-node.n2{left:87.5%; top:50%;}
.u-orbit-node.n3{left:50%; top:87.5%;}
.u-orbit-node.n4{left:12.5%; top:50%;}
@media (max-width:520px){ .u-orbit-node{font-size:9px; padding:8px 10px; letter-spacing:0.14em;} }
.s-ink .u-orbit-ring{stroke:var(--rule-dark);}
.s-ink .u-orbit-dash{stroke:var(--platinum);}
.s-ink .u-orbit-inner{fill:var(--panel); stroke:var(--rule-dark);}
.s-ink .u-orbit-dot{fill:var(--platinum);}
.s-ink .u-orbit-node{color:var(--white); background:var(--ink); border-color:var(--rule-dark);}
@keyframes u-spin{ to{transform:rotate(360deg);} }

/* ---------------------------------------------------- glass cards */
.u-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:clamp(14px, 1.6vw, 22px);}
.u-card{
  --mx:50%; --my:0%;
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px) clamp(30px, 3vw, 40px);
  background:linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  border:1px solid var(--rule-dark);
  transition:transform .6s var(--ease), border-color .6s var(--ease);
}
.u-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(200,197,190,0.14), transparent 60%);
  transition:opacity .5s var(--ease);
}
.u-card:hover{transform:translateY(-4px); border-color:rgba(200,197,190,0.45);}
.u-card:hover::before{opacity:1;}
.u-card-n{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--platinum); margin-bottom:22px; display:flex; align-items:center; gap:12px;}
.u-card-n::after{content:""; height:1px; flex:1 1 auto; background:linear-gradient(90deg, var(--rule-dark), transparent);}
.u-card h3{margin-bottom:14px;}
.u-card p{font-size:15px; line-height:1.75; color:var(--steel); margin-bottom:0;}
.u-card p + p{margin-top:14px;}
.u-card .u-card-foot{margin-top:22px; padding-top:16px; border-top:1px solid var(--rule-dark); font-size:12.5px; color:var(--platinum); letter-spacing:0.01em;}
.s-white .u-card,.u-cards-light .u-card{background:var(--white); border-color:var(--rule-light);}
.s-white .u-card::before,.u-cards-light .u-card::before{display:none;}
.s-white .u-card:hover{border-color:var(--ink);}
.s-white .u-card-n{color:var(--ink-label);}
.s-white .u-card-n::after{background:linear-gradient(90deg, var(--rule-light), transparent);}
.s-white .u-card h3{color:var(--ink);}
.s-white .u-card p{color:var(--ink-body);}
.s-white .u-card .u-card-foot{border-color:var(--rule-light); color:var(--ink-label);}

/* ---------------------------------------------------- steps with a drawn line */
.u-steps{position:relative;}
.u-steps .step{position:relative;}
.u-steps .step-n{position:relative;}
.u-steps .step-n::before{
  content:""; display:block; width:9px; height:9px; margin-bottom:14px;
  border:1px solid var(--platinum); transform:rotate(45deg); transition:background .5s var(--ease);
}
.s-white .u-steps .step-n::before{border-color:var(--ink);}
.u-steps .step:hover .step-n::before{background:var(--platinum);}
.s-white .u-steps .step:hover .step-n::before{background:var(--ink);}
.u-steps .step h3{transition:transform .5s var(--ease);}
.u-steps .step:hover h3{transform:translateX(6px);}

/* ---------------------------------------------------- org chart */
.u-tree{display:flex; flex-direction:column; align-items:center; gap:0;}
.u-tree b{display:block; font-family:var(--display); font-weight:700; font-size:clamp(16px, 1.5vw, 19px); letter-spacing:-0.01em; color:var(--white);}
.u-tree b a{color:inherit; text-decoration:none; border-bottom:1px solid var(--rule-dark);}
.u-tree b a:hover{border-color:var(--platinum);}
.u-tree-label{display:block; margin-bottom:8px; font-family:var(--display); font-size:9.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--graphite);}
.u-tree-top{position:relative; padding:20px 30px; border:1px solid var(--platinum); text-align:center; background:var(--ink);}
.u-tree-row{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 26px); width:100%; margin-top:56px;}
.u-tree-row::before{content:""; position:absolute; top:-56px; left:50%; width:1px; height:28px; background:var(--platinum);}
.u-tree-row::after{content:""; position:absolute; top:-28px; left:calc(100% / 6); right:calc(100% / 6); height:1px; background:var(--platinum);}
.u-tree-node{position:relative; padding:22px 22px 24px; border:1px solid var(--rule-dark); background:linear-gradient(160deg, rgba(255,255,255,0.04), transparent); text-align:center;}
.u-tree-node::before{content:""; position:absolute; top:-29px; left:50%; width:1px; height:28px; background:var(--platinum);}
.u-tree-node.is-on{border-color:var(--platinum);}
.u-tree-child{position:relative; margin:42px -6px -6px; padding:18px; background:var(--white); text-align:center;}
.u-tree-child::before{content:""; position:absolute; top:-36px; left:50%; width:1px; height:30px; background:var(--platinum);}
.u-tree-child b{color:var(--ink);}
.u-tree-child .u-tree-label{color:var(--ink-label);}
@media (max-width:880px){
  .u-tree-row{grid-template-columns:1fr; margin-top:28px; gap:28px;}
  .u-tree-row::before{top:-28px; height:28px;}
  .u-tree-row::after{display:none;}
  .u-tree-node::before{top:-29px;}
}

/* ---------------------------------------------------- founder and portrait */
.u-founder{display:grid; grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:clamp(36px, 6vw, 90px); align-items:center;}
.u-portrait{position:relative; margin:0; max-width:460px;}
.u-portrait::before{content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--platinum); z-index:0; transition:transform .8s var(--ease);}
.s-white .u-portrait::before{border-color:var(--ink);}
.u-portrait:hover::before{transform:translate(-8px, -8px);}
.u-portrait img{position:relative; z-index:1; display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%; filter:grayscale(1) contrast(1.04);}
.u-portrait figcaption{position:relative; z-index:2; margin:-1px 0 0; padding:14px 18px; background:var(--ink); color:var(--platinum); font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;}
.role-line{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite); margin:-10px 0 24px; line-height:1.6;}
.s-white .role-line{color:var(--ink-label);}
.u-founder h2{margin-bottom:22px;}
@media (max-width:880px){
  .u-founder{grid-template-columns:1fr;}
  .u-portrait{max-width:min(360px, 82vw); margin-right:18px;}
}

/* ---------------------------------------------------- people */
.u-people{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); border-top:1px solid var(--rule-light);}
.u-person{padding:28px 26px 30px 0; border-bottom:1px solid var(--rule-light);}
.u-person + .u-person{padding-left:26px; border-left:1px solid var(--rule-light);}
.u-person h3{font-size:19px; margin-bottom:10px; color:var(--ink);}
.u-person h3 a{color:inherit;}
.u-person p{font-size:14.5px; line-height:1.7; color:var(--ink-body);}
.u-person .u-card-n{color:var(--ink-label); margin-bottom:14px;}
.u-person .u-card-n::after{background:linear-gradient(90deg, var(--rule-light), transparent);}
.s-ink .u-people,.s-ink .u-person{border-color:var(--rule-dark);}
.s-ink .u-person h3{color:var(--white);}
.s-ink .u-person p{color:var(--steel);}
@media (max-width:620px){ .u-person + .u-person{padding-left:0; border-left:0;} }

/* ---------------------------------------------------- compare */
.u-compare{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--rule-dark);}
.u-compare > div{padding:clamp(28px, 3.4vw, 46px);}
.u-compare > div + div{border-left:1px solid var(--rule-dark);}
.u-compare h3{margin-bottom:20px;}
.u-compare ul{list-style:none; margin:0; padding:0;}
.u-compare li{position:relative; padding:12px 0 12px 30px; border-top:1px solid var(--rule-dark); font-size:15px; line-height:1.6; color:var(--steel);}
.u-compare li::before{content:""; position:absolute; left:2px; top:19px; width:12px; height:6px; border-left:1.5px solid var(--platinum); border-bottom:1.5px solid var(--platinum); transform:rotate(-45deg);}
.u-compare .is-not{background:var(--panel-deep);}
.u-compare .is-not li::before{width:12px; height:0; top:22px; border-left:0; border-bottom:1.5px solid var(--graphite); transform:none;}
@media (max-width:760px){ .u-compare{grid-template-columns:1fr;} .u-compare > div + div{border-left:0; border-top:1px solid var(--rule-dark);} }

/* ---------------------------------------------------- display statement */
.u-display{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-0.03em; line-height:0.95; font-size:clamp(44px, 9vw, 132px); margin:0; color:var(--white);}
.u-display .o{color:rgba(200,197,190,0.32);}
.u-display .arrow{display:inline-block; font-weight:300; color:var(--platinum); transform:translateY(-0.06em);}

/* ---------------------------------------------------- media kit, one founder */
.kit-people.kit-solo{grid-template-columns:1fr;}
.kit-solo .kit-person{grid-template-columns:minmax(160px, 0.36fr) 1fr; align-items:start;}
.kit-solo .kit-copy{margin-top:18px;}
@media (max-width:620px){ .kit-solo .kit-person{grid-template-columns:1fr;} }

@media (prefers-reduced-motion: reduce){
  .u-marquee-track,.u-orbit-dash,.u-orbit-spin{animation:none;}
  .u-card,.u-card::before,.u-portrait::before,.grid > .cell::after,.u-steps .step h3{transition:none;}
  .js .rv .eyebrow::before,.js .eyebrow.rv::before{transform:none; transition:none;}
}
@media print{
  .u-marquee-band{display:none;}
}

/* ---------------------------------------------------- press and link cards */
.u-press-link{color:inherit; text-decoration:none; background-image:linear-gradient(currentColor, currentColor); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .6s var(--ease);}
.u-press-link:hover,.u-press-link:focus-visible{background-size:100% 1px;}
.u-press .u-card h3{font-size:clamp(17px, 1.5vw, 20px); line-height:1.35;}
/* Five or six cards sit three to a row on wide screens, so no row is left half empty. */
@media (min-width:881px){
  .u-cards:has(> :nth-child(5)):not(:has(> :nth-child(7))){grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/* ---------------------------------------------------- kit and book text on Ink */
.s-ink .kit-copy{border-top-color:var(--platinum);}
.s-ink .kit-copy + .kit-copy{border-top-color:var(--rule-dark);}
.s-ink .kit-copy-head span{color:var(--graphite);}
.s-ink .kit-copy p,.s-ink .kit-person p{color:var(--steel);}
.s-ink .kit-copy p em,.s-ink .kit-person p em{color:var(--platinum);}
.s-ink .copy-btn{color:var(--white); border-color:var(--rule-dark); background:transparent;}
.s-ink .copy-btn:hover,.s-ink .copy-btn:focus-visible{background:var(--white); color:var(--ink);}
.s-ink .copy-btn:focus-visible{outline-color:var(--white);}
.s-ink .book-description p,.s-ink .book-description li{color:var(--steel);}
.s-ink .book-description em{color:var(--platinum);}

/* ---------------------------------------------------- the Identity Positioning green
   On a page with <body class="ip-theme"> (ip-theme.css, copied from mashmancg.com),
   the uplift components take the same green as identitypositioning.com. */
.ip-theme .s-ink .stat-big{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--ip-green);}
.ip-theme .u-card-n{color:var(--ip-green);}
.ip-theme .s-white .u-card-n{color:var(--ip-green-deep);}
.ip-theme .u-card:hover{border-color:var(--ip-green);}
.ip-theme .s-white .u-card:hover{border-color:var(--ip-green-deep);}
.ip-theme .u-steps .step-n::before{border-color:var(--ip-green);}
.ip-theme .u-steps .step:hover .step-n::before{background:var(--ip-green);}
.ip-theme .grid > .cell::after{background:linear-gradient(90deg, transparent, var(--ip-green), transparent);}