/* Portfolio V3 · Person & Proof. Editorial layer only: author first, working tools, visible evidence.
   Product interfaces (.product-app) keep their own styles; only their home-page framing changes here. */
:root{--pp-serif:'Source Serif 4',Georgia,serif;--pp-work:#356b48;--pp-real:#8a6420;--pp-offer:#8b8f86;--pp-rule:#1c1d1b}

/* Header: opaque, so content never ghosts underneath. */
.header{background:var(--bg)}

/* Hero: the author and the role precede the approved H1. */
.hero-copy>.hero-author{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;max-width:none;font-size:17px;line-height:1.4;color:var(--ink);font-weight:400;letter-spacing:-.01em}
.hero-author b{font-weight:600;letter-spacing:-.02em}
.hero-author span{color:var(--muted)}
.hero-author span:before{content:'';display:inline-block;width:30px;height:1px;margin:0 14px;vertical-align:.32em;background:#b9bcb4}
.hero-facts dd{font-variant-numeric:tabular-nums}

/* 01 · Team value: a quiet pause after the hero, now an index of evidence on the page. */
.team-value{padding-block:96px 100px}
.team-value .value-head h2{max-width:none;margin-top:18px;font-size:clamp(40px,4.1vw,58px);line-height:1.04;letter-spacing:-.052em;font-weight:500}
.team-value h2 em,.about h2 em,.contact h2 em{display:block;font-family:var(--pp-serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.035em}
.value-rail{list-style:none;margin:62px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px;position:relative}
.value-rail:before{content:'';position:absolute;left:0;right:0;top:6px;height:1px;background:var(--pp-rule)}
.value-rail>li{position:relative;padding-top:38px;min-width:0}
.value-rail>li:before{content:'';position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;border:1px solid var(--pp-rule);background:var(--bg);box-shadow:0 0 0 5px var(--bg)}
.value-rail>li:first-child:before{background:var(--amber);border-color:var(--amber)}
.value-rail .value-number{display:block;font-family:var(--pp-serif);font-style:italic;font-size:22px;line-height:1;color:#8b8f86}
.value-rail h3{margin:13px 0 15px;font-size:30px;line-height:1.1;letter-spacing:-.042em;font-weight:500}
.value-rail>li>p{max-width:34ch;font-size:16.5px;line-height:1.6;color:var(--muted)}
.value-proof{margin-top:28px;border-top:1px dotted #b6b8b0}
.value-proof>p{padding-top:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8b8f86}
.value-proof a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;padding:12px 0 13px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15.5px;line-height:1.38;letter-spacing:-.008em}
.value-proof a:after{content:'↓';grid-column:2;grid-row:1/3;align-self:center;color:var(--muted);transition:transform .22s}
.value-proof a[href="#contact"]:after{content:'→'}
.value-proof a:hover:after{transform:translateY(2px)}
.value-proof a[href="#contact"]:hover:after{transform:translateX(3px)}
.value-proof a:hover span{text-decoration:underline;text-decoration-color:#b6b8b0;text-underline-offset:4px}
.value-proof small,.proof-state,.about-ledger dt{font-size:13px}
.value-proof small{color:var(--muted)}
.value-proof small:before,.proof-state:before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;vertical-align:.12em;background:currentColor}
.value-proof small[data-state="work"]{color:var(--pp-work)}
.value-proof small[data-state="real"]{color:var(--pp-real)}
.value-proof small[data-state="offer"]{color:var(--pp-offer)}

/* 02 · Products: Executive Intelligence leads, so the first entry carries no top rule. */
.projects .product-story-bg{border-top:1px solid var(--line);margin-top:64px;padding-top:45px}
.projects .projects-heading+.product-story{border-top:0;margin-top:0;padding-top:0}

/* Ledger: task → what works → Alexander's role. One hairline system, three reading weights. */
.product-story-heading{grid-template-columns:1fr 1.08fr!important;gap:72px!important;align-items:start!important;margin-bottom:34px!important}
.story-task{max-width:40ch;margin-top:24px;font-size:17px!important;line-height:1.6!important;color:var(--muted)}
.proof-ledger p{display:grid;grid-template-columns:128px minmax(0,1fr);gap:18px;padding:13px 0 14px;border-top:1px solid var(--line);font-size:15.5px!important;line-height:1.58!important;color:var(--muted)!important}
.proof-ledger p+p{margin-top:0!important}
.proof-ledger p:last-child{border-bottom:1px solid var(--line)}
.proof-ledger{padding-top:6px}
.proof-ledger p>span{margin:2px 0 0!important;font-size:11.5px!important;letter-spacing:.085em!important;text-transform:uppercase;color:#8b8f86!important}
.proof-ledger .ledger-works{color:var(--ink)!important;font-size:16.5px!important}
.proof-ledger .ledger-works>span{color:var(--pp-work)!important}

/* Status above each interface and evidence below it. */
.showcase-caption.proof-status{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;font-size:14px}
.proof-state{display:inline-flex;align-items:baseline;gap:0;color:var(--pp-work);font-weight:550;letter-spacing:-.005em}
.proof-state:before{box-shadow:0 0 0 4px #356b481f;vertical-align:.08em}
.proof-state small{margin-left:10px;padding-left:10px;border-left:1px solid #cfd5cb;font-size:14px;font-weight:400;color:var(--muted)}
.showcase-caption.proof-status>a{min-height:44px;display:inline-flex;align-items:center;gap:14px;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;border:0;margin:0;padding:0}
.showcase-caption.proof-status>a:hover{text-decoration:underline;text-underline-offset:5px}
.product-evidence.proof-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;margin-top:22px;font-size:14.5px;color:#41474a}
.proof-try{max-width:64ch;font-size:14.5px!important;line-height:1.55!important;margin:0!important}
.proof-try small{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.product-evidence.proof-bar .proof-material{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;min-height:0;margin:0;padding:8px 18px 8px 8px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;line-height:1.3;transition:border-color .2s,box-shadow .2s}
.proof-material:hover{border-color:#c6c9c0;box-shadow:0 10px 26px -18px #1a221b55}
.proof-material img{display:block;width:112px;height:70px;object-fit:cover;object-position:left top;border-radius:5px;background:#e9ebe6}
.proof-material small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--muted)}
.proof-material b{font-weight:400;color:var(--muted)}
.product-story-analytics .proof-material img{width:168px;height:104px}

/* Executive Intelligence on the home page: KPI, chart and the management brief. Structure and team stay in the full panel. */
.product-story-analytics .exec-lower{display:none}

/* 04 · About: what Alexander owns, how the tools are built, why it helps a team. */
.about{align-items:start}
.about h2{font-size:clamp(40px,4.2vw,58px);line-height:1.04;letter-spacing:-.052em}
.about-text>p:first-child{color:var(--ink);font-size:21px;line-height:1.55;letter-spacing:-.012em}
.about-ledger{margin:34px 0 0;border-top:1px solid var(--pp-rule)}
.about-ledger>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;padding:17px 0 18px;border-bottom:1px solid var(--line)}
.about-ledger dt{padding-top:3px;letter-spacing:.06em;text-transform:uppercase;color:#8b8f86;font-size:12px}
.about-ledger dd{margin:0;font-size:16.5px;line-height:1.6;color:#3b4043}

/* Contact: the invitation on the left, three formats and the channels on the right. */
.contact-inner{grid-template-rows:auto auto 1fr auto}
.contact h2{grid-column:1;grid-row:2/4;align-self:start;max-width:14ch}
.contact h2 em{font-size:1.04em}
.contact-person{grid-column:1;grid-row:4;align-self:end;margin-top:40px;font-size:15px;line-height:1.5;color:var(--muted)}
.contact-person b{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.contact-intro{grid-column:2;grid-row:2;font-size:18px!important;color:var(--ink)}
.contact-offers{grid-column:2;grid-row:3;counter-reset:offer;align-self:start}
.contact-offers li{counter-increment:offer;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:8px}
.contact-offers li:before{content:counter(offer,decimal-leading-zero);grid-row:1/3;padding-top:3px;font-family:var(--pp-serif);font-style:italic;font-size:17px;color:#8b8f86}
.contact-offers b{grid-column:2}
.contact-links{grid-column:2;grid-row:4;margin-top:30px!important}

/* Mobile product cards: each reflects the colour, structure and tone of its real interface. */
@media(max-width:760px){
 .mobile-shot{border:0;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -26px #1a221b66,0 0 0 1px #1a221b14}
 .mobile-shot .shot-top{margin:-20px -20px 18px;padding:14px 20px;align-items:center}
 .mobile-open{border-radius:10px}
 .mobile-material{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;min-height:48px;margin-top:10px;padding:10px 2px 11px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
 .mobile-material small{grid-column:1;font-size:13px;font-weight:400;color:var(--muted)}
 .mobile-material b{grid-column:2;grid-row:1/3;font-weight:400;color:var(--muted)}
 .mobile-demo-note{font-size:13px!important;margin-top:12px!important}

 /* Executive Intelligence: night header, cool canvas, amber brief. */
 .shot-analytics{background:#eff2f4;color:#13202a}
 .shot-analytics .shot-top{background:#111c24;color:#e6edf2}
 .shot-analytics .shot-top span:last-child{color:#9fb3c2}
 .shot-analytics p,.shot-analytics dt{color:#55646e}
 .shot-analytics .shot-plan{background:#d7dfe5}.shot-analytics .shot-plan i{background:#245d8f}
 .shot-analytics .shot-insight{margin:14px -20px -20px;padding:13px 20px 15px;background:#111c24;color:#e8b26a;font-family:var(--pp-serif);font-style:italic;font-size:18px}
 .product-story-analytics .mobile-open{background:#13202a}

 /* BG Assistant: deep green operator rail, pale workspace, amber discrepancy. */
 .shot-bg{background:#f6f8f3;color:#172923}
 .shot-bg .shot-top{background:#1f3a2d;color:#e6eee2}
 .shot-bg .shot-state{background:#f5dfae;color:#7a4f12}
 .shot-bg .shot-callout{background:#fbf2e0;border-left-color:#a1691a;color:#7a4f12}
 .product-story-bg .mobile-open{background:#244635}

 /* Import Cost Engine: petrol header and the dark result column. */
 .shot-import{background:#20353e;color:#edf2eb}
 .shot-import .shot-top{background:#1e3037;color:#e9eee7;border-bottom:1px solid #2f4952}
 .shot-import p,.shot-import dt{color:#a9bab4}
 .shot-import dd{color:#edf2eb}
 .shot-import .shot-costbar i{background:#789b8b}.shot-import .shot-costbar i+i{background:#b7c783}.shot-import .shot-costbar i:last-child{background:#d3b778}
 .shot-import dl>div+div{border-top:1px solid #2f4952}
 .product-story-import .mobile-open{background:#1e3037}

 /* SUMMIT Assist: night bar over warm paper, copper accents. */
 .shot-summit{background:#f4f0e8;color:#1d2427}
 .shot-summit .shot-top{background:#1e2729;color:#efe7da}
 .shot-summit .shot-state{background:#2b3538;color:#e3bf9f}
 .shot-summit p,.shot-summit dt{color:#686d69}
 .shot-summit blockquote{font-family:var(--pp-serif);font-style:italic;color:#1d2427}
 .shot-summit .shot-next{border-top-color:#e6dfd3;color:#8b4e25}
 .product-story-summit .mobile-open{background:#1e2729}
 .product-story-summit .mobile-open span{color:#e3bf9f}

}

@media(max-width:1100px){
 .product-story-heading{gap:40px!important}
 .proof-ledger p{grid-template-columns:110px minmax(0,1fr)}
 .value-rail{gap:30px}
 .value-rail h3{font-size:26px}
 .about-ledger>div{grid-template-columns:130px minmax(0,1fr)}
}
@media(max-width:1100px) and (min-width:761px){
 .projects .product-story-bg{margin-top:44px;padding-top:29px}
 .product-evidence.proof-bar{grid-template-columns:1fr}
 .product-evidence.proof-bar .proof-material{justify-self:start}
}
@media(max-width:760px){
 .hero-copy>.hero-author{display:block;font-size:16px}
 .hero-author b,.hero-author span{display:block}
 .hero-author span{margin-top:3px}
 .hero-author span:before{display:none}
 .team-value{padding-block:52px 56px}
 .team-value .value-head h2{font-size:34px;margin-top:14px}
 .value-rail{grid-template-columns:1fr;gap:0;margin-top:34px}
 .value-rail:before{left:6px;right:auto;top:6px;bottom:24px;width:1px;height:auto}
 .value-rail>li{padding:0 0 34px 34px}
 .value-rail>li:last-child{padding-bottom:0}
 .value-rail h3{font-size:24px;margin:8px 0 10px}
 .value-rail h3 br{display:none}
 .value-rail>li>p{font-size:16px}
 .value-proof{margin-top:18px}
 .value-proof a{min-height:48px}
 .projects .product-story-bg{margin-top:35px;padding-top:29px}
 .about h2{font-size:36px}
 .about-text>p:first-child{font-size:19px}
 .about-ledger>div{grid-template-columns:1fr;gap:6px;padding:15px 0}
 .about-ledger dd{font-size:16px}
 .contact-inner{display:flex!important;flex-direction:column}
 .contact h2{max-width:15ch}
 .contact-person{order:9;margin-top:30px}
 .contact-offers li{grid-template-columns:32px minmax(0,1fr)}
}
@media(max-width:359px){
 .team-value .value-head h2{font-size:30px}
 .value-rail>li{padding-left:28px}
 .about h2{font-size:32px}
}

/* Published sites: two cases side by side on desktop; a framed first screen on phones. */
@media(min-width:761px){
 .web-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
 .web-showcase>.websites-heading{grid-column:1/-1}
 .web-showcase .web-case,.web-showcase .web-case+.web-case{margin-top:44px}
 .web-case-body,.web-case-polishing .web-case-body{display:block}
 .web-case-polishing .web-case-copy,.web-case-polishing .web-case-media{grid-column:auto;grid-row:auto}
 .web-case-copy{padding-top:28px}
 .web-case-copy h5{font-size:25px;max-width:none;margin-bottom:20px}
 .web-case-copy dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .web-case-copy dl>div+div{margin-top:0}
 .web-case-copy dd{font-size:15px}
}
@media(max-width:760px){
 .web-case-media[data-view=mobile] .web-case-stage{max-height:520px}
}

/* Phones, last so it wins over the tablet ledger: what works and the role replace the teaser line. */
@media(max-width:760px){
 .hero-author b{display:none!important}
 .hero-author span{margin-top:0}
 .product-story-heading>.product-story-copy.proof-ledger{display:block!important;margin-top:18px;padding-top:0}
 .story-task,.mobile-benefit,.mobile-try{display:none}
 .mobile-open{margin-top:20px}
 .proof-ledger p{grid-template-columns:1fr;gap:3px;padding:11px 0 12px;font-size:15px!important}
 .proof-ledger .ledger-works{font-size:15.5px!important}
 .product-story-heading{margin-bottom:22px!important}
}