/* marcinlukowicz.com — Paper polarity of the brand system.
   The design system has two polarities on a shared token set:
   PAPER polarity (light ground, this site) — Ink #000000 primary text, Ink-2 #767676
   secondary text (4.54:1 AA), Fog #D1D1D1 hairlines only, yellow marker-behind-Ink only.
   INK polarity (dark ground, the .band-ink section) — Paper #FFFFFF primary text,
   Paper-2 #A9A9A9 secondary text (8.93:1), yellow free as label/accent.
   Tokens per visual-directive FINAL v2; spec: website-design-spec-2026-07-28. */

:root{
  --paper:#FFFFFF;
  --ink:#000000;
  --yellow:#FFDF00;
  --fog:#D1D1D1;
  --ink-2:#767676;
  --paper-2:#A9A9A9;
  --serif:'EB Garamond', Garamond, Georgia, serif;
  --sans:'Inter', 'Segoe UI', system-ui, sans-serif;
  --max:1080px;
  --pad:24px;
}

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

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:8px 16px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 6px var(--yellow)}

/* ---------- wordmark + the Ł slash device ---------- */
.wordmark{font-family:var(--serif);font-weight:450;letter-spacing:.005em;color:var(--ink)}
.lmark{position:relative;display:inline-block;line-height:1}
.slash{
  position:absolute; pointer-events:none;
  /* logo-exact geometry, derived from measured EB Garamond metrics (capH .655em,
     stem centre .1675em, baseline .1475em above the line-height:1 box bottom) and
     the logo mask ratios (bbox 1.211x1.0 capH, left edge .608 capH left of stem) */
  height:.655em; width:.793em; left:-.231em; bottom:.1475em;
}
.slash polygon{fill:var(--yellow)}
.wordmark--hero{font-size:clamp(44px,7.5vw,84px);line-height:1.05}
.wordmark--nav{font-size:24px}
.wordmark--footer{font-size:30px}

/* ---------- marker device ---------- */
mark, .mark{
  background:linear-gradient(0deg, var(--yellow), var(--yellow));
  background-repeat:no-repeat; background-size:100% 100%;
  color:var(--ink); padding:.02em .1em; margin:0 -.02em;
  border-radius:2px;
}
.js .reveal mark, .js .reveal .mark{background-size:0% 100%}
.js .reveal.in mark, .js .reveal.in .mark{background-size:100% 100%; transition:background-size .45s ease-out .25s}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:10; background:var(--paper);
}
.nav.scrolled{border-bottom:1px solid var(--fog)}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max); margin:0 auto; padding:18px var(--pad);
}
.nav-mark{text-decoration:none}
.nav nav{display:flex; align-items:center; gap:28px}
.nav nav a{font-size:15px; text-decoration:none; color:var(--ink)}
.nav nav a:hover:not(.btn){text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--yellow); text-decoration-thickness:2px}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-family:var(--sans); font-size:16px; font-weight:600;
  padding:13px 26px; text-decoration:none; border:2px solid var(--ink); transition:background .15s,color .15s}
.btn--solid{background:var(--ink); color:var(--paper)}
.btn--solid:hover{background:var(--paper); color:var(--ink)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}
.btn--sm{padding:8px 16px; font-size:14px; border-width:1.5px}

/* ---------- layout ---------- */
.section{max-width:var(--max); margin:0 auto; padding:88px var(--pad) 0}
.section--tight{padding-top:64px}
/* B5 — a breather before the footer / a form */
.section--loose{padding-bottom:40px}
/* B5 — lede: a real intro size, primary ink (not fog) */
.lede{font-size:clamp(19px,2vw,22px); line-height:1.5; color:var(--ink)}
.label{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); margin-bottom:20px}
h2.label{font-family:var(--sans); font-size:13px; font-weight:600; line-height:1.6; position:relative; padding-bottom:12px}
/* B4a — thin yellow rule under every section label, one consistent treatment */
h2.label::after{content:""; position:absolute; left:0; bottom:0; width:28px; height:3px; background:var(--yellow)}
/* small utilities (moved from inline style attributes) */
.u-mt-l{margin-top:34px}
.u-mt-m{margin-top:26px}
.u-hide{display:none}
.section-sub{color:var(--ink-2); margin:-10px 0 28px}
.section-cta{margin-top:30px}
.measure{max-width:68ch}
.h2{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,38px); line-height:1.2; margin-bottom:14px; text-wrap:balance}
.arrowlink{font-weight:600; font-size:16px; text-decoration:none; border-bottom:2px solid var(--yellow); padding-bottom:2px}
.arrowlink:hover{border-bottom-color:var(--ink)}

/* ---------- hero ---------- */
.hero{
  max-width:var(--max); margin:0 auto; padding:64px var(--pad) 8px;
  display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center;
}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:14px}
.hero-line{font-size:clamp(19px,2.1vw,23px); line-height:1.55; max-width:56ch; margin:26px 0 34px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap}
.hero-photo img{width:380px; height:auto; border-radius:50%}

/* ---------- pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.pillar{border-top:1px solid var(--fog); padding-top:22px}
.pillar h2{font-family:var(--serif); font-weight:500; font-size:26px; margin-bottom:10px;
  display:inline-block; position:relative}
/* B4c — persistent 40% yellow underline that grows to full on hover */
.pillar h2::after{content:""; position:absolute; left:0; bottom:-4px; height:3px; width:40%; background:var(--yellow); transition:width .3s ease-out}
.pillar:hover h2::after{width:100%}
.pillar p{font-size:16.5px}

/* ---------- essays (B2 — article cards with compact branded cover thumbnails) ---------- */
.essays{display:flex; flex-direction:column}
/* compact leading image (~192x128, 3:2) vertically centred; row height driven by the text */
.essay{display:grid; grid-template-columns:192px 1fr; gap:26px; align-items:center;
  text-decoration:none; padding:18px 0; border-top:1px solid var(--fog); position:relative}
.essay:last-of-type{border-bottom:1px solid var(--fog)}
.essay-thumb{width:192px; aspect-ratio:3/2; overflow:hidden; background:var(--ink)}
.essay-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.essay-body{min-width:0}
.essay-pillar{font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.essay h3{font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,30px); line-height:1.25; margin:6px 0 6px; text-wrap:balance}
.essay:hover h3{text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--yellow); text-decoration-thickness:3px}
.essay p{color:var(--ink-2); font-size:16px}
/* B6c — essay-card hover: growing yellow left edge + content shift (pointer devices only) */
@media (hover:hover){
  .essay-body{transition:transform .18s ease-out}
  .essay::before{content:""; position:absolute; left:-18px; top:0; bottom:0; width:4px;
    background:var(--yellow); transform:scaleY(0); transform-origin:top; transition:transform .18s ease-out}
  .essay:hover::before{transform:scaleY(1)}
  .essay:hover .essay-body{transform:translateX(4px)}
}
@media (max-width:640px){
  .essay{grid-template-columns:1fr; gap:16px}
}

/* ---------- trust (static grey logo strip) ---------- */
.label--trust{margin-top:44px}
.logo-strip{display:flex; flex-wrap:wrap; align-items:center; gap:20px 44px; margin-top:6px}
.logo-strip img{height:34px; width:auto; filter:grayscale(1) opacity(.55); transition:filter .2s}
.logo-strip img.logo-tall{height:44px}
.logo-strip img:hover{filter:grayscale(0) opacity(1)}
/* per-logo visual-weight normalisation (trimmed to alpha bbox; heights equalise apparent letter-height) */
.logo-strip img[alt="Northumbrian Water"]{height:34px}
.logo-strip img[alt="Hyve"]{height:40px}
.logo-strip img[alt="QinetiQ"]{height:24px}
.logo-strip img[alt="Scottish Water"]{height:34px}
.logo-strip img[alt="Virgin Media O2"]{height:30px}
.logo-strip img[alt="LSEG"]{height:32px}
.logo-strip img[alt="Innovate UK"]{height:46px}
.logo-strip img[alt="Universal Quantum"]{height:30px}

/* ---------- ink band (the page's one dark moment) ---------- */
.band-ink{background:var(--ink); color:var(--paper); margin-top:88px}
.band-ink .section{padding-top:64px; padding-bottom:72px; margin-top:0}
.band-ink .label{color:var(--yellow)}
.band-ink .section-sub{color:var(--paper-2)}
.band-ink .pricing td{border-color:#333}
.band-ink .pricing tr:last-child td{border-bottom-color:#333}
.band-ink .p-desc{color:var(--paper-2)}
.band-ink + .section{padding-top:72px}

/* ---------- footer ---------- */
.footer{max-width:var(--max); margin:96px auto 0; padding:56px var(--pad) 64px; border-top:1px solid var(--ink)}
.footer-pillars{font-family:var(--serif); color:var(--ink-2); margin:10px 0 26px}
.footer-links{display:flex; flex-wrap:wrap; gap:30px; margin-bottom:26px}
.footer-links a{font-size:15px; text-decoration:none}
.footer-links a:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--yellow); text-decoration-thickness:2px}
.social-ic{width:18px; height:18px; vertical-align:-4px; margin-left:5px; margin-right:0}
.footer-meta{color:var(--ink-2); font-size:14px}

/* ---------- motion: "the marker draws" (JS-gated so no-JS shows everything) ---------- */
.js .reveal>*{opacity:0; transform:translateY(12px)}
.reveal.in>*{opacity:1; transform:none; transition:opacity .4s ease-out, transform .4s ease-out}
.reveal.in>*:nth-child(2){transition-delay:.06s}
.reveal.in>*:nth-child(3){transition-delay:.12s}
.reveal.in>*:nth-child(4){transition-delay:.18s}

.js .slash--draw{transform:scale(0); transform-origin:0% 100%}
.fonts-in .slash--draw{transform:scale(1); transition:transform .5s cubic-bezier(.2,.8,.2,1) .15s}

/* B6a — orchestrated hero entrance (Home only): eyebrow → wordmark → line → CTAs → photo.
   JS-gated (.js) and revealed by .hero-in (added on fonts-ready); no-JS = all visible. */
.js .hero-copy>*, .js .hero-photo{opacity:0; transform:translateY(8px)}
.hero-in .hero-copy>*, .hero-in .hero-photo{opacity:1; transform:none;
  transition:opacity .45s ease-out, transform .45s ease-out}
.hero-in .hero-copy>*:nth-child(2){transition-delay:.09s}
.hero-in .hero-copy>*:nth-child(3){transition-delay:.18s}
.hero-in .hero-copy>*:nth-child(4){transition-delay:.27s}
.hero-in .hero-photo{transition-delay:.36s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal>*, .slash--draw, .hero-copy>*, .hero-photo{opacity:1 !important; transform:none !important; transition:none !important}
  .reveal mark, .reveal .mark{background-size:100% 100% !important; transition:none !important}
  .essay-body, .essay::before{transition:none !important}
  .disc-toggle{transition:none !important}
}

/* ---------- subpage header ---------- */
.page-hero{max-width:var(--max); margin:0 auto; padding:56px var(--pad) 0}
.page-hero .h1{font-family:var(--serif); font-weight:500; font-size:clamp(34px,5vw,58px); line-height:1.1; margin:10px 0 16px; text-wrap:balance}
.page-hero .sub{font-size:clamp(18px,1.9vw,21px); color:var(--ink); max-width:60ch}
.firmmark{font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); margin-bottom:22px}

/* ---------- disciplines (row accordion — valid summaries, JS-gated collapse) ---------- */
.disc{border-top:1px solid var(--fog)}
.disc:last-of-type{border-bottom:1px solid var(--fog)}
.disc summary{display:flex; gap:16px; align-items:baseline; cursor:pointer; padding:20px 0; list-style:none}
.disc summary::-webkit-details-marker{display:none}
.disc-icon{flex:none; width:30px; height:30px; align-self:center}
.disc-icon .yl{fill:var(--yellow); stroke:none}
.disc-icon .st{fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* .disc-title — styled exactly like the old .disc h3 */
.disc-title{font-family:var(--serif); font-weight:500; font-size:24px}
.disc-desc{color:var(--ink-2); font-size:16px; flex:1}
.disc-toggle{font-size:22px; color:var(--ink-2); line-height:1; transition:transform .15s}
.disc[open] .disc-toggle{transform:rotate(45deg)}
/* no-JS: details are forced open, so the non-functional "+" control is hidden */
html:not(.js) .disc-toggle{display:none}

/* the expanded content: four steps as a horizontal, left-to-right visual row
   (adapts the .steps counter device; no divider — the steps belong to the theme) */
.disc-steps-row{counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr);
  gap:36px; padding:2px 0 34px}
.disc-step{counter-increment:step; position:relative; padding-left:26px}
.disc-step::before{content:counter(step); position:absolute; left:0; top:-1px;
  font-family:var(--serif); font-size:20px; line-height:1.35; color:var(--ink)}
.disc-step p{font-size:15px; line-height:1.5; color:var(--ink-2)}
@media (max-width:900px){
  .disc summary{flex-wrap:wrap; gap:6px 16px}
  .disc-steps-row{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:600px){
  .disc-steps-row{grid-template-columns:1fr; gap:24px}
}

/* ---------- pricing ---------- */
.pricing{width:100%; border-collapse:collapse; margin-top:8px}
.pricing td{padding:20px 12px 20px 0; border-top:1px solid var(--fog); vertical-align:top}
.pricing tr:last-child td{border-bottom:1px solid var(--fog)}
.pricing .p-name{font-family:var(--serif); font-weight:500; font-size:22px; width:34%}
.pricing .p-desc{color:var(--ink-2); font-size:16px}
.pricing .p-price{font-family:var(--serif); font-size:20px; white-space:nowrap; text-align:right; width:16%}

/* ---------- steps ---------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:8px}
.step{counter-increment:step; border-top:1px solid var(--fog); padding-top:16px}
.step::before{content:counter(step); font-family:var(--serif); font-size:38px; display:block; margin-bottom:6px}
.step b{display:block; margin-bottom:4px}
.step p{font-size:15.5px; color:var(--ink-2)}

/* ---------- journey (stacked narrative timeline) ---------- */
/* one full-width timeline: all four beats uniform, below the intro+photo grid
   (2026-08-17 — beat 1 used to sit in the grid's left column beside the photo and
   was cramped once the lede grew; unified here so width no longer depends on that) */
.journey{counter-reset:beat; margin-top:8px}
.journey-beat{
  counter-increment:beat;
  display:grid; grid-template-columns:220px 1fr; gap:40px;
  border-top:1px solid var(--fog); padding:26px 0;
}
.journey-head{position:relative}
.journey-head b{display:block; font-weight:700; font-size:17px}
.journey-head::before{
  content:counter(beat); font-family:var(--serif); font-weight:500;
  font-size:42px; line-height:1; display:block; margin-bottom:10px;
}
/* B4b — small yellow Ł-slash accent beside each journey numeral */
.journey-head::after{content:""; position:absolute; left:34px; top:5px; width:11px; height:24px;
  background:var(--yellow); clip-path:polygon(80.5% 0, 100% 0, 19.5% 100%, 0 100%)}
@media (max-width:900px){
  .journey-head::after{left:30px; top:4px; height:22px}
}
.journey-body{max-width:62ch}
.journey-body p{font-size:17px}
@media (max-width:900px){
  .journey-beat{grid-template-columns:1fr; gap:14px; padding:22px 0}
  .journey-head::before{font-size:38px}
}

/* ---------- pull quote ---------- */
.pullquote{max-width:60ch; margin:8px 0 0}
.pullquote p{font-family:var(--serif); font-size:clamp(20px,2.3vw,26px); line-height:1.45}
.pullquote footer{margin-top:16px; font-size:15px; color:var(--ink-2)}
.pullquote footer b{color:var(--ink)}
/* B3 — testimonial moment: Melissa a full-width display pull-quote, Louise secondary beneath */
.testimonials{display:block}
.pullquote--lead{max-width:none; margin:0}
.pullquote--lead p{font-size:clamp(26px,3.4vw,34px); line-height:1.4}
.pullquote--sec{max-width:68ch; margin:48px 0 0}
.pullquote--sec p{font-size:clamp(17px,1.6vw,20px); line-height:1.5}

/* ---------- LinkedIn journey — ARCHIVED, currently unused on every page.
   Built 2026-08-02 to replace the contact form, retired the same day when the
   research showed the removal was unnecessary; the form is back. Kept here (about
   1KB) so restoring the journey is a markup-only change. Drawn mock panels: Ink
   line work on Paper, yellow marks the thing to click, no images.
   Full notes + markup: docs/reference/linkedin-journey-v1.md ---------- */
.lj{counter-reset:lj; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:26px}
.lj-step{counter-increment:lj}
.lj-art{display:block; width:100%; height:auto; border:1px solid var(--fog)}
.lj-art .st{fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round}
.lj-art .lb{fill:var(--fog)}
.lj-art .yl{fill:var(--yellow)}
.lj-art .tx{font-family:var(--sans); font-size:11px; font-weight:600; fill:var(--ink)}
.lj-art .txs{font-family:var(--sans); font-size:9px; font-weight:500; fill:var(--ink-2)}
.lj-cap{position:relative; margin-top:15px; padding-left:26px}
.lj-cap::before{content:counter(lj); position:absolute; left:0; top:-2px;
  font-family:var(--serif); font-size:20px; line-height:1.35; color:var(--ink)}
.lj-cap b{display:block; font-size:16px; margin-bottom:4px}
.lj-cap p{font-size:15px; line-height:1.5; color:var(--ink-2)}
.lj-brief{max-width:62ch; margin-top:38px; border-top:1px solid var(--fog); padding-top:20px}
.lj-brief ol{margin:10px 0 0 20px}
.lj-brief li{font-size:15.5px; color:var(--ink-2); margin-bottom:6px}
@media (max-width:900px){
  .lj{grid-template-columns:1fr; gap:30px; max-width:430px}
}

/* ---------- form — LIVE again on /advisory/ (restored 2026-08-02 after the ICO
   research showed the removal was unnecessary; see docs/ico-fee-research-2026-08-02.md).
   Archive of the removed version: docs/reference/contact-form-v1.md ---------- */
.form{max-width:640px}
.form label{display:block; font-size:14px; font-weight:600; margin:20px 0 6px}
.form input, .form textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--ink); background:var(--paper); border-radius:0;
}
.form input:focus, .form textarea:focus{outline:3px solid var(--ink); outline-offset:1px; box-shadow:0 0 0 5px var(--yellow)}
.form .hint{font-size:13.5px; color:var(--ink-2); margin-top:5px}
.form .hint ol{margin:4px 0 0 18px}
.form button{margin-top:26px; cursor:pointer; font-family:var(--sans)}
.form-note{font-size:13.5px; color:var(--ink-2); margin-top:14px}

/* ---------- about page ---------- */
.about-grid{display:grid; grid-template-columns:1.4fr 1fr;
  grid-template-areas:"intro photo"; gap:0 56px; align-items:start;
  max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.about-intro{grid-area:intro}
.about-photo{grid-area:photo}
.about-photo img{width:100%}
.prose{max-width:66ch; font-size:17.5px}
.prose p{margin-bottom:18px}

/* ---------- legal / privacy ---------- */
.legal{max-width:72ch; margin:0 auto; padding:24px var(--pad) 0; font-size:16px}
.legal h2{font-family:var(--serif); font-weight:500; font-size:23px; margin:44px 0 12px}
.legal h3{font-size:16px; font-weight:700; margin:26px 0 8px}
.legal p{margin-bottom:14px}
.legal ul, .legal ol{margin:0 0 14px 22px}
.legal li{margin-bottom:6px}
.legal .in-short{color:var(--ink-2); font-style:italic}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:32px; padding-top:40px}
  .hero-photo{order:-1}
  .hero-photo img{width:200px}
  .pillars{grid-template-columns:1fr; gap:8px}
  .pillar{padding-top:18px; padding-bottom:14px}
  .section{padding-top:60px}
  .nav nav{gap:16px}
  .nav nav a:not(.btn){display:none}
  .steps{grid-template-columns:1fr 1fr; gap:18px}
  .about-grid{grid-template-columns:1fr; grid-template-areas:"intro" "photo"; gap:32px}
  /* pricing: restack each row into stacked blocks so prices never clip at 390px */
  .pricing, .pricing tbody, .pricing tr, .pricing td{display:block; width:auto}
  .pricing tr{border-top:1px solid var(--fog); padding:16px 0}
  .pricing tr:last-child{border-bottom:1px solid var(--fog)}
  .band-ink .pricing tr{border-top-color:#333}
  .band-ink .pricing tr:last-child{border-bottom-color:#333}
  .pricing td{border:0; padding:0}
  .pricing .p-name{font-size:19px; margin-bottom:4px}
  .pricing .p-desc{margin-bottom:8px}
  .pricing .p-price{text-align:left; font-weight:700; white-space:normal}
}