/* Golos Text (SIL OFL, see fonts/golos/OFL.txt): the site's one typeface, self-hosted,
   variable 400-900. latin-ext covers Serbian Latin (š ž č ć đ). */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/golos/golos-text-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/golos/golos-text-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Roboto Italic (SIL OFL, see fonts/roboto/OFL.txt): used only for the quote on
   the home page. Variable weight. */
@font-face{font-family:'Roboto';font-style:italic;font-weight:100 900;font-display:swap;src:url('../fonts/roboto/roboto-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:italic;font-weight:100 900;font-display:swap;src:url('../fonts/roboto/roboto-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Animatable custom properties for the header logo mask (see "Header logo"). */
@property --logo-keep{syntax:'<length>';inherits:false;initial-value:0px}
@property --logo-feather{syntax:'<length>';inherits:false;initial-value:0px}

/* Animatable light for the project cards (see "Moja kompanija i projekti"). */
@property --venture-glow{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --venture-x{syntax:'<percentage>';inherits:true;initial-value:100%}
@property --venture-y{syntax:'<percentage>';inherits:true;initial-value:0%}

/* x-height of the line a .chip--xh sits on, resolved there and inherited as px. */
@property --line-xh{syntax:'<length>';inherits:true;initial-value:0px}

:root{
/* Design tokens. Every color, font, font size, radius and shadow in site.css and
   hover-card.css comes from here; don't add raw values outside :root.
   Breakpoints can't be custom properties (var() doesn't work in @media), so they
   are fixed values, reused exactly:
     --bp-tablet: 900px  (site.css layout collapse, mobile nav)
     --bp-mobile: 600px  (hover-card.css inline panels; MOBILE_QUERY in hover-card.js) */

/* Primitive palette */
--neutral-0:#fff;--neutral-25:#fafaf7;--neutral-50:#f6f6f2;--neutral-75:#efefe9;--neutral-100:#ecece6;--neutral-125:#e7e7df;--neutral-150:#e4e4dc;--neutral-200:#d9d9d2;--neutral-300:#bbb;--neutral-350:#aaa;--neutral-400:#999;--neutral-450:#888;--neutral-500:#777;--neutral-550:#666;--neutral-600:#555;--neutral-700:#444;--neutral-750:#353535;--neutral-775:#333;--neutral-800:#2c2c2c;--neutral-900:#161616;--red-700:#b3261e;

/* Dark-theme primitives: new, introduced for the header + home hero redesign.
   This is the start of a sitewide dark theme; more of the site will move onto
   these as each section gets redesigned. */
--ink-900:#0d0f16;--ink-950:#06070c;--slate-400:#98a0b8;--blue-600:#3068f0;
/* Rim light primitives. --black is the portrait's own backdrop (pure black), so the
   photo sits on the page with no visible edge. --rim-* is sampled from the blue rim
   light in the portrait and is used for actions and focus only. */
--black:#000;--graphite-900:#0c0d10;--graphite-850:#131419;--graphite-700:#24262d;--graphite-600:#33363f;--mist-50:#f1f2f5;--mist-200:#d3d6de;--mist-300:#b0b5c2;--mist-400:#8c93a3;--mist-500:#6b7282;--rim-400:#22aaff;--rim-300:#5cc2ff;

/* Semantic colors (prefer these over primitives) */
--bg:var(--canvas);--bg-header:rgba(0,0,0,.8);--paper:var(--panel);--soft:var(--panel-raised);--line:var(--hairline-strong);--line-strong:rgba(255,255,255,.2);--text:var(--text-1);--text-strong:var(--mist-200);--text-secondary:var(--text-2);--text-on-dark:var(--mist-50);--text-on-accent:var(--black);--muted:var(--text-3);--muted-soft:var(--mist-500);--accent:var(--rim-300);--placeholder-a:var(--graphite-900);--placeholder-b:var(--graphite-850);--placeholder-border:var(--graphite-600);
/* Dark-theme semantic colors (new; see primitives comment above) */
--bg-dark:var(--black);--surface-dark:var(--graphite-900);--line-on-dark:var(--graphite-700);--muted-on-dark:var(--mist-400);--accent-blue:var(--rim-400);--accent-blue-hover:var(--rim-300);

/* Typography */
--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--font-display:'Golos Text',var(--font-sans);--line-height-base:1.6;
/* Type scale (rim light). Body 17px; headings on a fluid scale. */
--fs-display:clamp(46px,6.4vw,98px);--fs-hero:clamp(40px,min(4.6vw,7.2vh),84px);--fs-hero-lead:clamp(17px,min(1.35vw,2.3vh),21px);--header-height:73px;--header-height-scrolled:56px;--nav-fs:17px;--nav-scale-scrolled:.88;--cta-box-inset-scrolled:5px 7px;--nav-gap:24px;--nav-dim:.72;--cta-pad-y:10px;--cta-pad-x:16px;--hero-photo-ratio:.77;--fs-page-title:clamp(40px,5.2vw,80px);--fs-h2:clamp(30px,3.4vw,50px);--fs-h3-lg:clamp(24px,2.2vw,32px);--fs-h3:21px;--fs-lead:clamp(19px,1.6vw,23px);--fs-body:17px;--fs-small:14px;--fs-label:15px;--fs-stat:clamp(36px,3.6vw,54px);--fs-logo-placeholder:11px;
--eyebrow-gap:24px;
--pillar-height:440px;--fs-pillar-label:clamp(19px,1.5vw,23px);
/* Mesh gradient behind the open pillar: blues and whites from the rim light,
   kept dark at the bottom-left where the text and button sit. */
--mesh-base:#07142e;--mesh-deep:rgba(18,60,170,.6);--mesh-blue:rgba(34,140,255,.5);--mesh-sky:rgba(110,200,255,.5);--mesh-white:rgba(240,248,255,.38);--dur-mesh:900ms;--dur-nudge:1100ms;
/* Header logo: "milomir.rs" retracts into the "m", then the dot slides in.
   One unit = 1/203 of the logo height (the wordmark SVG is 203 units tall). */
--logo-h:1.5em;--dur-logo:900ms;--dur-logo-dot:600ms;--ease-logo:cubic-bezier(.77,0,.18,1);--logo-feather-wide:40px;--logo-feather-tight:3px;
/* "Ukratko" quote band: dark-blue mesh that drifts slowly, an italic quote
   whose lines rise into view one by one. */
--font-quote:'Roboto',var(--font-sans);--fs-quote:clamp(16px,1.25vw,18px);--band-base:#030a1d;--band-1:rgba(22,70,190,.6);--band-2:rgba(34,120,255,.3);--band-3:rgba(6,26,90,.75);--band-4:rgba(110,200,255,.16);--summary-portrait-opacity:.12;--summary-portrait-height:94%;--dur-band-drift:26s;--dur-line:900ms;--line-stagger:110ms;
/* "Kako razmišljam": principle cards. Hover background is a much darker,
   quieter version of the pillar mesh. */
/* "Moja kompanija i projekti": one colour per project, used only as light,
   in the tag, the link arrow and a thin line on the top edge. --project-portal
   is the red of the Taraba logo; Taraba itself is blue (Marija's choice). All pass 4.5:1 on --paper. */
--project-taraba:#3D8BFF;--project-portal:#EF5C55;--project-knjige:#34C08B;--project-notion:#D9DCE3;--project-bolt:#FF8A3D;
--radius-card:12px;--venture-border:rgba(255,255,255,.06);--venture-glow-rest:13%;--venture-glow-hover:22%;--venture-glow-lead-rest:24%;--venture-glow-lead-hover:34%;--dur-venture:600ms;--venture-logo-h:44px;--venture-logo-h-lead:72px;--venture-logo-rest:.45;--venture-dim:.42;--dur-thumb:500ms;
/* ---- Lit panels (home redesign, 30 Oct 2026) ------------------------------
   Dark rounded panels lit by soft coloured light, laid out as a bento grid.
   Three kinds of light only: fluted glass (.fx-fluted), horizon (.fx-horizon)
   and the corner light on cards (projects, active pillar, principle hover). */
--canvas:#050607;--panel:#0E0F12;--panel-raised:#15171B;--chip:#000;
--hairline:rgba(255,255,255,.07);--hairline-strong:rgba(255,255,255,.12);
--text-1:#F2F3F5;--text-2:#B4B8C2;--text-3:#7D8494;
--light-blue:#2F6BFF;--light-rim:#22AAFF;--light-cyan:#6FE3D8;--light-ember:#FF7A3D;--light-deep:#0F2E8A;
--r-panel:28px;--r-inner:16px;--r-chip:10px;--r-control:999px;
--bento-gap:16px;--panel-pad:clamp(28px,3vw,48px);--section-gap:clamp(96px,10vw,152px);
--w-display:420;--track-display:-.04em;--lh-display:1.02;--label-dot:6px;--fs-meta:13px;
--dur-reveal:700ms;--stagger:80ms;--dur-drift:28s;--dur-light-on:1400ms;
/* Hover-card panel: light mode so the story stands out from the dark page */
--popover-bg:var(--neutral-100);--popover-text:var(--neutral-900);--popover-border:rgba(0,0,0,.08);--dur-popover-in:520ms;--dur-popover-out:180ms;
--proof-photo-opacity:.25;--dur-proof-photo:700ms;--wordmark-glass:rgba(255,255,255,.3);--proof-bleed:clamp(64px,8vw,120px);
--fluted-period:24px;--fluted-blur:40px;--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--noise-strength:.035;
--fluted-hi:rgba(255,255,255,.10);--fluted-hi-soft:rgba(255,255,255,.02);--fluted-lo:rgba(0,0,0,.18);--fluted-lo-deep:rgba(0,0,0,.55);
--wordmark-edge:rgba(255,255,255,.7);--wordmark-glow:rgba(160,220,255,.18);--wordmark-mask-fade:rgba(0,0,0,.6);
--horizon-strength:1;--horizon-strength-faint:.32;--talk-play-size:64px;--talk-play-bg:rgba(0,0,0,.55);--talk-thumb-dim:.82;
/* Footer panel. --footer-wordmark-crop is a share of the panel width (margin %
   is width-based): 6.6% hides the lower third of the wordmark letters. */
--footer-panel-bg:var(--graphite-900);--footer-panel-radius:clamp(24px,3.2vw,48px);--footer-panel-inset:clamp(8px,1.6vw,24px);--fs-footer-intro:clamp(22px,1.9vw,30px);--fs-footer-action:clamp(22px,1.9vw,30px);--footer-wordmark-crop:6.6%;--footer-profile-bg:var(--graphite-850);--venture-glow-dim:5%;--dur-venture-reveal:700ms;--venture-stagger:80ms;
--principle-pad:28px;--principle-pad-mobile:16px;--principle-mesh-base:#040a1a;--principle-mesh-1:rgba(22,70,190,.26);--principle-mesh-2:rgba(34,120,255,.1);--principle-mesh-3:rgba(110,200,255,.06);--dur-principle-reveal:1000ms;--principle-col-delay:140ms;--nudge-distance:6px;--ease-in-out:cubic-bezier(.65,0,.35,1);--pillar-grow-active:2.6;--pillar-body-width:440px;--dur-pillar:600ms;
--font-size-3xs:10px;--font-size-2xs:12px;--font-size-xs:13px;--font-size-sm:14px;--font-size-md:15px;--font-size-base:16px;--font-size-lg:17px;--font-size-xl:18px;--font-size-2xl:19px;--font-size-3xl:20px;--font-size-4xl:23px;--font-size-5xl:25px;--font-size-6xl:27px;
--font-size-h1:var(--fs-page-title);--font-size-h1-projects:var(--fs-page-title);--font-size-h1-texts:var(--fs-page-title);--font-size-h2:var(--fs-h2);--font-size-category-title:var(--fs-h2);--font-size-section-title:var(--fs-h2);--font-size-section-title-lg:var(--fs-h2);--font-size-texts-title:var(--fs-h2);--font-size-newsletter-title:var(--fs-h3-lg);--font-size-stat:var(--fs-stat);--font-size-lead:var(--fs-lead);--font-size-lead-compact:var(--fs-lead);

/* Radii */
--radius-2xs:4px;--radius-xs:8px;--radius-sm:9px;--radius-md:10px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:16px;--radius-3xl:18px;--radius-4xl:20px;--radius-pill:999px;
--radius-control:4px;--radius-media:3px;--radius-panel:8px;

/* Shadows */
--shadow-menu:0 24px 40px -20px rgba(0,0,0,.9);--shadow-popover:0 24px 48px -16px rgba(0,0,0,.9);

/* Motion */
--ease-out:cubic-bezier(.16,1,.3,1);--dur-fast:160ms;--dur-base:280ms;--dur-hero:1100ms;--dur-light:1600ms;

/* Layout */
--container:var(--container-wide);--container-wide:1360px;--gutter:28px;--gutter-mobile:20px;--section-space:clamp(72px,9vw,128px)}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:var(--font-size-base)/var(--line-height-base) var(--font-sans)}
a{color:inherit}
.shell{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.top{position:sticky;top:0;z-index:20;background:var(--bg-header);color:var(--text-on-dark);font-family:var(--font-display);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-on-dark)}
.nav{min-height:72px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;height:2.75em;margin-right:auto;cursor:pointer}.brand-wordmark,.brand-mark{display:block;height:100%;overflow:hidden;transition:max-width .25s ease,opacity .2s ease}.brand-wordmark svg,.brand-mark svg{display:block;height:100%;width:auto}.brand-wordmark{max-width:260px;opacity:1}.brand-mark{max-width:0;opacity:0}.top.is-scrolled .brand-wordmark{max-width:0;opacity:0}.top.is-scrolled .brand-mark{max-width:70px;opacity:1}.nav>a{appearance:none;border:0;background:none;font:inherit;cursor:pointer;padding:8px 0;text-decoration:none}.nav-links>a{text-decoration:none}.nav-links>a:not(.cta){color:var(--muted-on-dark);border-bottom:2px solid transparent}.nav-links>a:not(.cta):hover{color:var(--text-on-dark)}.nav-links>a.is-current{color:var(--text-on-dark);border-bottom-color:var(--accent-blue)}.cta{border:1px solid var(--accent-blue)!important;background:var(--accent-blue)!important;color:var(--text-on-dark)!important;padding:10px 15px!important;border-radius:var(--radius-pill);font-weight:650}
.nav-toggle-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-on-dark);border-radius:var(--radius-md);background:var(--surface-dark);cursor:pointer;font-size:var(--font-size-xl);line-height:1;flex:0 0 auto}.nav-toggle-input:checked~.nav-toggle{background:var(--accent-blue);color:var(--text-on-dark);border-color:var(--accent-blue)}.nav-links{display:contents}
main{min-height:80vh}.page{display:none;padding:72px 0 100px}.page.active{display:block}.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:var(--font-size-xs);color:var(--text-strong);font-weight:800;border-bottom:2px solid var(--muted-soft);padding-bottom:4px}.hero{padding-top:var(--section-space);padding-bottom:56px;border-bottom:1px solid var(--line)}
h1{font-size:var(--font-size-h1);line-height:1;letter-spacing:-.05em;margin:12px 0 28px;max-width:900px}h2{font-size:var(--font-size-h2);line-height:1.05;letter-spacing:-.035em;margin:0 0 28px}h3{font-size:var(--font-size-4xl);line-height:1.2;margin:0 0 12px}.lead{font-size:var(--font-size-lead);line-height:1.35;max-width:860px;color:var(--text-strong)}.sublead{font-size:var(--font-size-2xl);max-width:800px;color:var(--text-strong)}.intro-note{font-size:var(--font-size-xl);max-width:850px;color:var(--text-secondary)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.btn{display:inline-block;border:1px solid var(--text);background:var(--text);color:var(--text-on-dark);border-radius:var(--radius-pill);padding:11px 17px;text-decoration:none;font-weight:650}.btn.secondary{border-color:var(--line);background:var(--paper);color:var(--text)}
.section{padding-top:var(--section-space);padding-bottom:var(--section-space);border-bottom:1px solid var(--line)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:42px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-3xl);padding:24px;min-height:180px}.card.big{grid-column:span 2;min-height:320px}.meta{font-size:var(--font-size-xs);color:var(--muted);margin-bottom:12px}.placeholder{height:120px;background:repeating-linear-gradient(135deg,var(--placeholder-a),var(--placeholder-a) 14px,var(--placeholder-b) 14px,var(--placeholder-b) 28px);border:1px dashed var(--placeholder-border);border-radius:var(--radius-lg);margin-bottom:18px;display:flex;align-items:center;justify-content:center;color:var(--muted-soft);font-size:var(--font-size-xs)}.principle{padding:24px 0;border-top:1px solid var(--line)}.principle:first-child{border-top:0}.principle p{margin:7px 0 0;color:var(--text-secondary);max-width:800px}.principles2{display:grid;grid-template-columns:1fr 1fr;gap:0 42px}.principles2 .principle:nth-child(-n+2){border-top:0}
.project-row{display:grid;grid-template-columns:150px 1.4fr 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--line);align-items:start}.project-row:first-of-type{border-top:0}.status{display:inline-block;border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 9px;font-size:var(--font-size-2xs);color:var(--muted)}.timeline{border-left:2px solid var(--line);padding-left:28px}.timeline-item{position:relative;padding:0 0 28px}.timeline-item:before{content:"";position:absolute;left:-35px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--text)}.timeline-item strong{display:block}.chips{display:flex;flex-wrap:wrap;gap:9px}.chip{border:1px solid var(--line);background:var(--paper);padding:8px 11px;border-radius:var(--radius-pill);font-size:var(--font-size-sm)}.work{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding:34px 0;border-top:1px solid var(--line)}.work:first-of-type{border-top:0}.work-detail-rows{margin-top:24px}.work-detail-row{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:20px 0;border-top:1px solid var(--line)}.work-detail-row:first-child{border-top:0}.work-detail-row p{margin:0 0 10px;color:var(--text-secondary);font-size:var(--font-size-md)}.work-detail-row p:last-child{margin-bottom:0}.note{background:var(--soft);padding:16px 18px;border-radius:var(--radius-xl);margin-top:18px}.community-group{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-3xl);padding:22px}.community-list{display:grid;gap:12px}.community{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)}.community:first-child{border-top:0;padding-top:0}.logo-mark{width:38px;height:38px;border:1px dashed var(--placeholder-border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-3xs);color:var(--muted-soft);flex:0 0 auto}.lesson-list{display:grid;gap:12px;margin-top:20px}.lesson{border-left:3px solid var(--placeholder-border);padding-left:14px}.footer{padding:44px 0 58px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}.footer-links{display:grid;gap:8px}.small{font-size:var(--font-size-xs);color:var(--muted)}.purpose{font-size:var(--font-size-lg);max-width:500px;margin-top:8px;color:var(--text-strong)}
.entrepreneurship-header{max-width:840px;margin-bottom:38px}.entrepreneurship-header p{max-width:760px}.experience-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:64px}.experience-block>h3{margin-bottom:22px}.experience-block .lesson-list{margin-top:0}
#about .story-step h2{margin-bottom:0}#about .timeline-item:last-child{padding-bottom:0}
#projects .hero{padding:64px 0 50px}#projects .hero h1{font-size:var(--font-size-h1-projects);max-width:950px;margin-bottom:22px}#projects .hero .lead{font-size:var(--font-size-lead-compact);max-width:900px}#projects .project-category{padding:46px 0}#projects .project-category-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;font-size:var(--font-size-category-title);margin-bottom:18px}#projects .project-category-title span{font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}#projects .project-row{grid-template-columns:130px minmax(0,1fr) auto;align-items:center;padding:17px 0}#projects .project-row .status{display:none}#projects .project-row h3{font-size:var(--font-size-5xl);margin-bottom:4px}#projects .project-row p{margin:0;color:var(--text-secondary);max-width:700px}#projects .project-row>div:last-child{text-align:right;min-width:120px}
#texts .hero{padding:64px 0 50px}#texts .hero h1{font-size:var(--font-size-h1-texts);max-width:950px;margin-bottom:22px}#texts .hero .lead{font-size:var(--font-size-lead-compact);max-width:820px}#texts .texts-section{padding:48px 0}#texts .texts-section h2{font-size:var(--font-size-texts-title);margin-bottom:0}#texts .text-card{display:flex;flex-direction:column}#texts .text-card .text-body{display:flex;flex:1;flex-direction:column}#texts .text-card .text-body p{margin-bottom:0;color:var(--text-secondary)}
#work .work-primary{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-4xl);margin:0 0 24px;padding:34px}#work .work-primary h3{font-size:var(--font-size-section-title)}#work .work-secondary{padding-top:42px}#work .work-secondary h3{font-size:var(--font-size-6xl)}#work .work-context{margin-top:22px;border-left:3px solid var(--placeholder-border);padding:4px 0 4px 16px;color:var(--text-secondary)}
@media(max-width:900px){.principles2{grid-template-columns:1fr}.principles2 .principle:nth-child(2){border-top:1px solid var(--line)}.grid2,.grid3,.grid4,.footer-grid,.experience-grid{grid-template-columns:1fr}.experience-grid{gap:42px}.card.big{grid-column:auto}.project-row,.work,.work-detail-row,#projects .project-row{grid-template-columns:1fr}.nav{gap:13px;position:relative}.nav-toggle{display:inline-flex}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:4px;background:var(--bg-dark);border-bottom:1px solid var(--line-on-dark);padding:16px 20px 24px;box-shadow:var(--shadow-menu)}.nav-toggle-input:checked~.nav-links{display:flex}.nav-links .cta{margin-top:8px}.page{padding-top:36px}.hero{padding-top:58px}#projects .project-row{gap:5px;padding:18px 0;align-items:start}#projects .project-row>div:last-child{text-align:left;min-width:0}#projects .project-category-title{align-items:end}}

.shell-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter)}
.summary-copy p{font-size:var(--font-size-xl);line-height:1.58;color:var(--text-strong);margin-top:0}
/* Home hero: dark theme, start of the sitewide dark redesign (see :root comment). */
.hero-dark{background:var(--bg-dark);font-family:var(--font-display)}
.home-hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);min-height:620px}
.home-hero-photo{margin:0;overflow:hidden;background:var(--ink-950)}.home-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.home-hero-content{display:flex;flex-direction:column;justify-content:center;max-width:720px;padding:var(--section-space) var(--gutter) var(--section-space) var(--gutter)}
.home-hero-content .eyebrow{text-transform:none;letter-spacing:normal;border-bottom:0;padding-bottom:0;font-weight:500;color:var(--muted-on-dark)}
.home-hero-content h1{color:var(--text-on-dark)}
.home-hero-content .lead{color:var(--muted-on-dark)}
.home-hero-content .actions .btn{background:var(--accent-blue);border-color:var(--accent-blue);color:var(--text-on-dark)}
.home-hero-content .actions .btn.secondary{background:none;border:0;padding:11px 0;color:var(--text-on-dark)}
.principles2{counter-reset:principle;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column}.principle{position:relative;padding-left:56px;counter-increment:principle}.principle:before{content:counter(principle,decimal-leading-zero);position:absolute;left:0;top:25px;font-size:var(--font-size-xs);letter-spacing:.12em;color:var(--muted);font-weight:800}.principles2 .principle:nth-child(2){border-top:1px solid var(--line)}.principles2 .principle:nth-child(5){border-top:0}
.project-featured{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:stretch;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-4xl);padding:28px;margin-top:28px;text-decoration:none}
.project-featured:hover,.project-card-link:hover,.talk-card:hover,.text-card:hover{border-color:var(--line-strong)}
.project-logo{height:110px;border:1px dashed var(--placeholder-border);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;color:var(--muted-soft);font-size:var(--font-size-xs);background:var(--soft)}
.project-featured .project-logo{height:140px}
.project-content{display:flex;flex-direction:column}.project-details{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-top:auto;padding-top:18px}.project-featured .meta{margin:0}.project-featured .link-cue,.project-card-link .link-cue,.talk-card .link-cue{font-size:var(--font-size-xs);color:var(--muted);text-align:right}.project-card-link{position:relative;display:flex!important;flex-direction:column}.project-card-link .link-cue{margin-top:auto;padding-top:14px}
.projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.project-card-link{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-3xl);padding:20px;text-decoration:none;min-height:275px}
.project-card-link .project-logo{height:82px;margin-bottom:18px}
.project-card-link h3{font-size:var(--font-size-3xl)}
.project-tag{display:block;font-size:var(--font-size-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}.project-featured .project-tag{font-size:var(--font-size-xs);margin-bottom:10px}
.text-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.text-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-3xl);overflow:hidden;text-decoration:none}
.text-card .text-img{height:175px;background:repeating-linear-gradient(135deg,var(--placeholder-a),var(--placeholder-a) 14px,var(--placeholder-b) 14px,var(--placeholder-b) 28px);border-bottom:1px dashed var(--placeholder-border);display:flex;align-items:center;justify-content:center;color:var(--muted-soft);font-size:var(--font-size-xs)}
.text-card .text-body{padding:20px}
.talk-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.talk-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-3xl);padding:20px;text-decoration:none}
.talk-card .placeholder{height:180px}
.footer{border-top:1px solid var(--line)}
.footer-grid-v2{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer-title{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;font-weight:700}
.footer-links a{text-decoration:none}.footer-links a:hover{text-decoration:underline}
.footer-social{display:flex;gap:6px;margin-top:14px}.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--muted);border-radius:var(--radius-md);text-decoration:none}.footer-social a:hover{color:var(--text);background:var(--soft)}.footer-social a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.footer-social svg{width:20px;height:20px}
.copyright{border-top:1px solid var(--line);margin-top:34px;padding-top:20px;font-size:var(--font-size-xs);color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.proof-section{padding-top:48px;padding-bottom:48px}.proof-section h2{font-size:var(--font-size-section-title);max-width:760px;margin-top:14px}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.proof-item{padding:24px 22px;border-left:1px solid var(--line)}.proof-item:first-child{border-left:0}.proof-value{display:block;font-size:var(--font-size-stat);line-height:1;font-weight:800;letter-spacing:-.04em;margin-bottom:9px}.proof-label{font-weight:750;margin-bottom:5px}.proof-item p{font-size:var(--font-size-sm);line-height:1.45;color:var(--muted);margin:0}
.overview-section h2{font-size:var(--font-size-section-title);max-width:760px;margin-top:14px}.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:32px}.overview-item{padding:28px 24px}.overview-item:first-child{padding-left:0}.overview-item:not(:first-child){border-left:1px solid var(--line)}.overview-item h3{margin-top:6px}.overview-item p{color:var(--text-secondary);margin-bottom:0}.overview-link{display:inline-block;margin-top:20px;font-weight:700;color:var(--text);text-decoration:none}.overview-link:hover{text-decoration:underline}
.education-bridge{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-4xl);padding:28px}.education-bridge h2{font-size:var(--font-size-section-title-lg);max-width:760px}.education-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.education-fact{border-top:1px solid var(--line);padding-top:16px}.education-fact strong{display:block;font-size:var(--font-size-2xl);margin-bottom:5px}
.project-evidence{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:7px;font-size:var(--font-size-xs);color:var(--muted)}.project-evidence strong{color:var(--text)}
.consulting-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.consulting-step{border-top:2px solid var(--text);padding-top:14px}.consulting-step span{display:block;font-size:var(--font-size-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:750;margin-bottom:7px}.consulting-step p{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:0}
.consulting-subtitle{font-size:var(--font-size-base);font-weight:600;color:var(--muted);margin-left:6px}
.consulting-columns{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin:28px 0}.consulting-col{border-top:2px solid var(--text);padding-top:14px}.consulting-col span{display:block;font-size:var(--font-size-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:750;margin-bottom:7px}.consulting-col p{font-size:var(--font-size-md);color:var(--text-secondary);margin:0}
.consulting-offer{background:var(--soft);border-radius:var(--radius-2xl);padding:28px;margin-top:28px}.consulting-offer h4{font-size:var(--font-size-2xl);margin:0 0 8px}.consulting-offer p{margin:0 0 18px;color:var(--text-secondary);font-size:var(--font-size-md)}.consulting-offer.no-bg{background:none;padding:0}.consulting-offer.no-bg p{margin-bottom:0}
.newsletter{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);gap:48px;align-items:end;padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid var(--line)}.newsletter h2{font-size:var(--font-size-newsletter-title);margin:8px 0 10px}.newsletter p{max-width:620px;margin:0;color:var(--text-secondary)}.newsletter-form{display:flex;gap:10px;flex-wrap:wrap}.newsletter-form input{min-width:250px;flex:1;border:1px solid var(--line);background:var(--paper);border-radius:var(--radius-pill);padding:12px 16px;font:inherit}.newsletter-form button{border:1px solid var(--text);background:var(--text);color:var(--text-on-dark);border-radius:var(--radius-pill);padding:12px 18px;font:inherit;font-weight:700;cursor:pointer}.newsletter-consent{font-size:var(--font-size-2xs);color:var(--muted);margin-top:9px!important}
@media(max-width:900px){.shell-wide{padding:0 var(--gutter-mobile)}.project-featured{grid-template-columns:1fr}.home-hero-split{grid-template-columns:1fr}.home-hero-photo{min-height:260px}.home-hero-content{padding:40px var(--gutter-mobile)}.project-details{align-items:start}.project-featured .link-cue{text-align:left}.principles2{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.principles2 .principle:nth-child(5){border-top:1px solid var(--line)}.projects-grid,.text-cards,.talk-grid,.footer-grid-v2,.proof-grid,.overview-grid,.education-facts,.consulting-flow,.consulting-columns,.newsletter{grid-template-columns:1fr}.proof-item{border-left:0;border-top:1px solid var(--line)}.proof-item:first-child{border-top:0}.overview-item{padding-left:0;border-left:0!important;border-top:1px solid var(--line)}.overview-item:first-child{border-top:0}.project-featured .project-logo{height:110px}.newsletter{gap:24px}.newsletter-form input{min-width:0;width:100%}}
#projects .project-row--featured{background:var(--soft);border-radius:var(--radius-xl);padding:17px 20px;margin:0 -20px}
.consulting-faq{margin-top:28px}.consulting-faq h4{font-size:var(--font-size-2xl);margin:0 0 4px}.consulting-faq details{border-top:1px solid var(--line);padding:14px 0}.consulting-faq details:last-child{padding-bottom:0}.consulting-faq summary{cursor:pointer;font-weight:650;font-size:var(--font-size-base);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text)}.consulting-faq summary::-webkit-details-marker{display:none}.consulting-faq summary:after{content:"+";font-weight:400;font-size:var(--font-size-3xl);line-height:1;color:var(--muted);flex:0 0 auto;transition:transform .15s ease}.consulting-faq details[open] summary:after{transform:rotate(45deg)}.consulting-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-2xs)}.consulting-faq details p{margin:10px 0 0;color:var(--text-secondary);font-size:var(--font-size-md);max-width:700px}

/* ------------------------------------------------------------------
   Rim light redesign (sitewide)
   The page is the portrait's black. Type carries the design; blue
   (sampled from the portrait's rim light) marks actions and focus only.
   No cards for lists, no decoration, one orchestrated hero moment
   (css/motion.css).
   ------------------------------------------------------------------ */
html{color-scheme:dark;background:var(--bg)}
body{font-family:var(--font-display);font-size:var(--fs-body);line-height:var(--line-height-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--accent-blue);color:var(--text-on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{color:var(--text);text-wrap:balance}
h1{font-weight:620;letter-spacing:-.045em;line-height:.98}
h2{font-weight:560;letter-spacing:-.032em;line-height:1.05;max-width:20ch}
h3{font-size:var(--fs-h3);font-weight:560;letter-spacing:-.012em;line-height:1.25}
p{text-wrap:pretty}
.lead{color:var(--text-secondary);line-height:1.45;max-width:34em}
.intro-note,.summary-copy p,.sublead{color:var(--text-secondary);max-width:62ch}
.sublead{font-size:var(--fs-lead);line-height:1.45}
.meta,.small{color:var(--muted)}

/* Labels: plain sentence case, never tracked capitals */
.eyebrow,.project-tag,.footer-title,.consulting-step span,.consulting-col span,#projects .project-category-title span{display:block;text-transform:none;letter-spacing:0;border:0;padding:0;font-weight:500;color:var(--muted)}
/* Eyebrow: always on its own line directly above the heading, never beside it,
   with the same 24px gap everywhere (every page and section). */
.eyebrow{display:block;font-size:var(--fs-label);margin:0 0 var(--eyebrow-gap)}
.eyebrow+:is(h1,h2,h3){margin-top:0}
.project-tag,.footer-title,.consulting-step span,.consulting-col span,#projects .project-category-title span{font-size:var(--fs-small)}

.section{padding-top:var(--section-space);padding-bottom:var(--section-space);border-bottom:1px solid var(--line)}

/* Header: the page's black, frosted only once the page moves */
.top{background:var(--bg);border-bottom:1px solid transparent;transition:background-color var(--dur-base) ease,border-color var(--dur-base) ease}
.top.is-scrolled{background:var(--bg-header);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav-links>a:not(.cta){color:var(--muted);border-bottom:1px solid transparent;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.nav-links>a:not(.cta):hover{color:var(--text)}
.nav-links>a.is-current{color:var(--text);border-bottom-color:var(--text)}
.cta{background:var(--accent-blue)!important;border-color:var(--accent-blue)!important;color:var(--text-on-accent)!important;border-radius:var(--radius-control);font-weight:600;transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.cta:hover{background:var(--accent-blue-hover)!important;border-color:var(--accent-blue-hover)!important}
.nav-toggle{color:var(--text);background:none;border-radius:var(--radius-control)}

/* Buttons and links */
.btn{background:var(--accent-blue);border-color:var(--accent-blue);color:var(--text-on-accent);border-radius:var(--radius-control);padding:13px 22px;font-weight:600;transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease}
.btn:hover{background:var(--accent-blue-hover);border-color:var(--accent-blue-hover)}
.btn.secondary{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn.secondary:hover{background:transparent;border-color:var(--text)}
.home-hero-content .actions .btn{background:var(--accent-blue);border-color:var(--accent-blue);color:var(--text-on-accent)}
.home-hero-content .actions .btn:hover{background:var(--accent-blue-hover);border-color:var(--accent-blue-hover)}
.home-hero-content .actions .btn.secondary{background:none;border-color:transparent;padding:13px 6px;color:var(--text)}
.home-hero-content .actions .btn.secondary:hover{color:var(--accent)}
.overview-link,.footer-links a,main p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:5px;transition:color var(--dur-fast) ease,text-decoration-color var(--dur-fast) ease}
.overview-link:hover,.footer-links a:hover,main p a:hover{color:var(--text);text-decoration-color:var(--accent)}
.footer-links a{color:var(--muted);text-decoration-color:transparent}
.footer-links a:hover{color:var(--text)}

/* Home hero: the portrait stands on the page's own black, no frame */
.hero-dark{background:var(--bg)}
.home-hero-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:min(86vh,880px)}
.home-hero-photo{background:var(--bg)}
.home-hero-photo img{object-position:center top;-webkit-mask-image:linear-gradient(180deg,black 72%,transparent);mask-image:linear-gradient(180deg,black 72%,transparent)}
.home-hero-content{max-width:none;padding-right:clamp(20px,5vw,80px)}
.home-hero-content .eyebrow{color:var(--muted)}
.home-hero-content h1{font-size:var(--fs-display);max-width:12ch;margin:0 0 32px}
.home-hero-content .lead{color:var(--text-secondary)}

/* Page heroes (about, projects, texts, work) */
.hero{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(48px,6vw,88px);border-bottom:1px solid var(--line)}
.hero h1,#projects .hero h1,#texts .hero h1{font-size:var(--fs-page-title);max-width:16ch;margin:0 0 28px}
.hero .lead,#projects .hero .lead,#texts .hero .lead{font-size:var(--fs-lead)}

/* Principles: a list, not a numbered sequence */
.principle{padding-left:0}
.principle:before{content:none}
.principle p{color:var(--text-secondary)}

/* Projects: the company first, the rest as an index */
.project-featured{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:36px 0;margin-top:40px;grid-template-columns:140px minmax(0,1fr)}
.project-featured h3{font-size:var(--fs-h3-lg);margin-bottom:12px}
.project-featured p{color:var(--text-secondary);max-width:58ch}
.project-logo,.logo-mark{background:none;border:1px dashed var(--placeholder-border);border-radius:var(--radius-media);color:var(--muted-soft);font-size:var(--fs-logo-placeholder);text-align:center;padding:4px}
.projects-grid{grid-template-columns:1fr;gap:0;margin-top:0}
.project-card-link{display:grid!important;grid-template-columns:72px minmax(0,1fr) minmax(0,1.3fr) auto;column-gap:24px;align-items:start;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0;min-height:0}
.project-card-link .project-logo{grid-column:1;grid-row:1/4;height:56px;margin:0}
.project-card-link .project-tag{grid-column:2;grid-row:1;margin:0 0 4px}
.project-card-link h3{grid-column:2;grid-row:2;font-size:var(--fs-h3);margin:0;transition:color var(--dur-fast) ease}
.project-card-link .meta{grid-column:2;grid-row:3;margin:4px 0 0}
.project-card-link p{grid-column:3;grid-row:1/4;margin:0;color:var(--text-secondary)}
.project-card-link .link-cue{grid-column:4;grid-row:1;margin:0;padding:0;white-space:nowrap}
.project-featured:hover h3,.project-card-link:hover h3,.talk-card:hover h3,.text-card:hover h3{color:var(--accent)}
.link-cue{color:var(--muted);transition:color var(--dur-fast) ease}
.project-featured:hover .link-cue,.project-card-link:hover .link-cue,.talk-card:hover .link-cue{color:var(--text)}

/* Talks and texts: led by the image, no box around them */
.talk-card,.text-card{background:none;border:0;border-radius:0;padding:0;overflow:visible}
.talk-card .placeholder,.text-card .text-img,.placeholder{border:1px dashed var(--placeholder-border);border-radius:var(--radius-media);margin-bottom:18px;transition:border-color var(--dur-fast) ease}
.text-card .text-body{padding:0}
.text-card:hover .text-img,.talk-card:hover .placeholder{border-color:var(--muted-soft)}
.talk-card .link-cue{text-align:left}
.talk-grid,.text-cards{gap:40px 28px;margin-top:40px}
.text-card h3,.talk-card h3{transition:color var(--dur-fast) ease}

/* Facts */
.proof-grid{border-color:var(--line);margin-top:40px}
.proof-item{border-color:var(--line);padding:28px 24px 28px 0}
.proof-item+.proof-item{padding-left:24px}
.proof-value{color:var(--text);font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.proof-label{font-weight:600}

/* Panels that are one thing (offer, primary service, education) */
.card,.education-bridge,#work .work-primary,.community-group{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-panel)}
.consulting-offer{background:var(--paper);border-radius:var(--radius-panel)}
.consulting-step,.consulting-col{border-top:1px solid var(--line-strong)}
#projects .project-row--featured{background:var(--paper);border-radius:var(--radius-panel)}
.chip,.status{background:none;border:1px solid var(--line-strong);border-radius:var(--radius-control);color:var(--text-strong)}
.timeline{border-left:1px solid var(--line)}
.timeline-item:before{background:var(--accent-blue);width:9px;height:9px;left:-33px;top:9px}
.lesson,#work .work-context{border-left:1px solid var(--line-strong)}

/* Newsletter and footer */
.newsletter-form input{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-control);color:var(--text);transition:border-color var(--dur-fast) ease}
.newsletter-form input::placeholder{color:var(--muted-soft)}
.newsletter-form input:focus{outline:0;border-color:var(--accent)}
.newsletter-form button{background:var(--accent-blue);border-color:var(--accent-blue);color:var(--text-on-accent);border-radius:var(--radius-control);font-weight:600;transition:background-color var(--dur-fast) ease}
.newsletter-form button:hover{background:var(--accent-blue-hover)}
.footer{border-top:1px solid var(--line)}
.footer-social a{border-radius:var(--radius-control);transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.footer-social a:hover{background:var(--paper)}

@media(max-width:900px){
  .home-hero-split{grid-template-columns:1fr;min-height:0}
  .home-hero-photo{min-height:0;height:58vh}
  .home-hero-content{padding-top:8px}
  .home-hero-content h1{max-width:none}
  .project-featured{grid-template-columns:1fr}
  .project-card-link{grid-template-columns:56px minmax(0,1fr);row-gap:0}
  .project-card-link .project-logo{grid-row:1/4;height:44px}
  .project-card-link p{grid-column:2;grid-row:auto;margin-top:12px}
  .project-card-link .link-cue{grid-column:2;grid-row:auto;margin-top:10px}
  .proof-item,.proof-item+.proof-item{padding:22px 0}
}

/* "Čime se bavim": the three pillars in one panel. One pillar is open at a
   time: Savetovanje by default, then whichever one the visitor hovers or tabs
   into (its CTA receives focus, :focus-within opens it). CSS only. On touch
   screens and narrow viewports all three are open and stacked. */
.pillars{display:flex;margin-top:48px;border:1px solid var(--line);border-radius:var(--radius-panel);overflow:hidden;background:var(--bg)}
.pillar{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:32px;flex:1 1 0;min-width:0;min-height:var(--pillar-height);padding:32px;overflow:hidden;border-left:1px solid var(--line);background:var(--bg);transition:flex-grow var(--dur-pillar) var(--ease-out),background-color var(--dur-base) ease}
.pillar:first-child{border-left:0}
.pillar:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent-blue);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-pillar) var(--ease-out)}
.pillar-label{font-size:var(--fs-pillar-label);font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--text-strong);transition:color var(--dur-base) ease}
.pillar:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transform:scale(1.12);transform-origin:85% 10%;transition:opacity var(--dur-mesh) ease,transform var(--dur-mesh) var(--ease-out);background:radial-gradient(55% 45% at 88% 8%,var(--mesh-white),transparent 70%),radial-gradient(65% 60% at 100% 45%,var(--mesh-sky),transparent 70%),radial-gradient(75% 65% at 45% 0%,var(--mesh-blue),transparent 72%),radial-gradient(90% 80% at 0% 100%,var(--mesh-deep),transparent 70%),var(--mesh-base)}
.pillar h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.015em;margin:0;max-width:16ch;color:var(--text-secondary);hyphens:manual;overflow-wrap:normal;transition:color var(--dur-base) ease,font-size var(--dur-pillar) var(--ease-out)}
.pillar-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-pillar) var(--ease-out)}
.pillar-body-inner{min-height:0;overflow:hidden;width:var(--pillar-body-width);max-width:100%;opacity:0;transition:opacity var(--dur-base) ease}
.pillar-body p{margin:16px 0 28px;color:var(--text-strong);max-width:44ch}
/* CTA link: white text, no button or outline. On hover (of the link, or of
   the pillar it sits in) or keyboard focus, the arrow nudges left-right. */
.cta-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--text);text-decoration:none}
.cta-link-arrow{display:inline-block}
.cta-link:hover .cta-link-arrow,.cta-link:focus-visible .cta-link-arrow,.pillar:hover .cta-link-arrow{animation:cta-nudge var(--dur-nudge) var(--ease-in-out) infinite}
@keyframes cta-nudge{0%,100%{translate:0 0}50%{translate:var(--nudge-distance) 0}}

/* Open pillar: the first one by default, or the one being hovered / focused */
.pillars:not(:hover):not(:focus-within) .pillar:first-child,.pillar:hover,.pillar:focus-within{flex-grow:var(--pillar-grow-active)}
.pillars:not(:hover):not(:focus-within) .pillar:first-child:before,.pillar:hover:before,.pillar:focus-within:before{transform:scaleX(1)}
.pillars:not(:hover):not(:focus-within) .pillar:first-child:after,.pillar:hover:after,.pillar:focus-within:after{opacity:1;transform:scale(1)}
.pillars:not(:hover):not(:focus-within) .pillar:first-child :is(.pillar-label,h3),.pillar:hover :is(.pillar-label,h3),.pillar:focus-within :is(.pillar-label,h3){color:var(--text)}
.pillars:not(:hover):not(:focus-within) .pillar:first-child h3,.pillar:hover h3,.pillar:focus-within h3{font-size:var(--fs-h3-lg)}
.pillars:not(:hover):not(:focus-within) .pillar:first-child .pillar-body,.pillar:hover .pillar-body,.pillar:focus-within .pillar-body{grid-template-rows:1fr}
.pillars:not(:hover):not(:focus-within) .pillar:first-child .pillar-body-inner,.pillar:hover .pillar-body-inner,.pillar:focus-within .pillar-body-inner{opacity:1;transition-delay:120ms}

/* Touch screens and narrow viewports: stacked, everything visible */
@media(hover:none),(max-width:900px){
  .pillars{flex-direction:column}
  .pillar,.pillar:hover,.pillar:focus-within,.pillars:not(:hover):not(:focus-within) .pillar:first-child{flex:none;min-height:0;padding:28px 24px;gap:16px;border-left:0;border-top:1px solid var(--line);background:var(--bg)}
  .pillar:first-child{border-top:0}
  .pillar:before{display:none}
  .pillar:after{display:none}
  .pillar :is(.pillar-label,h3){color:var(--text)!important}
  .pillar h3{font-size:var(--fs-h3-lg)!important}
  .pillar-body{grid-template-rows:1fr!important}
  .pillar-body-inner{opacity:1!important;width:auto}
}

/* "Ukratko": a full-width band in moving dark blue, everything centred. The
   heading's second sentence is blue; the two paragraphs are one quote in Roboto
   Italic. Milomir's portrait sits
   faintly in the background (milomir-portrait-arms.webp, very low opacity). motion.js lets the quote's lines
   rise into view one by one; without it (or with reduced motion) it simply shows. */
.summary-band{position:relative;isolation:isolate;overflow:hidden;background:var(--band-base)}
.summary-band:before{content:"";position:absolute;inset:-25%;z-index:-2;pointer-events:none;background:radial-gradient(40% 35% at 22% 30%,var(--band-1),transparent 70%),radial-gradient(35% 40% at 80% 22%,var(--band-2),transparent 70%),radial-gradient(45% 45% at 62% 80%,var(--band-3),transparent 70%),radial-gradient(30% 30% at 28% 85%,var(--band-4),transparent 70%)}
.summary-band:after{content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:-1;height:var(--summary-portrait-height);aspect-ratio:1100/1423;pointer-events:none;background:url('../img/milomir-portrait-arms.webp') center bottom/contain no-repeat;opacity:var(--summary-portrait-opacity);filter:grayscale(1);mix-blend-mode:luminosity;-webkit-mask-image:linear-gradient(180deg,black 65%,transparent);mask-image:linear-gradient(180deg,black 65%,transparent)}
.summary-section{position:relative;text-align:center;border-bottom:0;padding-top:clamp(96px,12vw,176px);padding-bottom:clamp(96px,12vw,176px)}
.summary-section h2{max-width:none;margin:0 auto;text-wrap:wrap}
.summary-section h2 em{display:block;font-style:normal;color:var(--accent-blue)}
.summary-quote{position:relative;margin:48px auto 0;max-width:38em;font-family:var(--font-quote);font-style:italic;font-weight:400;font-size:var(--fs-quote);line-height:1.6;letter-spacing:0;color:var(--text)}
.summary-quote p{margin:0 0 .75em;text-wrap:balance}
.summary-quote p:last-child{margin-bottom:0}
.summary-section .actions{justify-content:center;margin-top:56px}
@media(max-width:900px){
  .summary-section{padding-top:88px;padding-bottom:88px}
  .summary-quote{margin-top:40px}
}

/* "Kako razmišljam": eight principles in two columns. Each is a card that
   shows only a hairline at rest; on hover (or keyboard focus inside it) a
   dark, quiet mesh fades in behind it and its hover-card term gets a frame.
   motion.js reveals each card out of a blur as it scrolls into view. */
.principles2{gap:0 16px;margin-left:calc(var(--principle-pad) * -1);margin-right:calc(var(--principle-pad) * -1)}
.principles2>.principle:nth-child(n){position:relative;isolation:isolate;padding:var(--principle-pad);border-top:0;border-radius:var(--radius-panel)}
.principles2>.principle:nth-child(n):before{content:"";position:absolute;left:var(--principle-pad);right:var(--principle-pad);top:0;height:1px;background:var(--line);transition:opacity var(--dur-base) ease}
.principles2>.principle:nth-child(1):before,.principles2>.principle:nth-child(5):before{display:none}
.principle:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(70% 90% at 100% 0%,var(--principle-mesh-2),transparent 70%),radial-gradient(80% 100% at 0% 100%,var(--principle-mesh-1),transparent 70%),radial-gradient(50% 60% at 80% 100%,var(--principle-mesh-3),transparent 70%),var(--principle-mesh-base);box-shadow:inset 0 0 0 1px var(--line);transition:opacity var(--dur-mesh) ease}
.principle:hover,.principle:focus-within,.principle:has(.hover-card-panel.is-open){z-index:2}
.principle:hover:after,.principle:focus-within:after{opacity:1}
.principle:hover:before,.principle:focus-within:before,.principle:hover+.principle:before,.principle:focus-within+.principle:before{opacity:0}
.principle h3{color:var(--text)}
/* The underlined term gets a framed background inside a hovered card */
.principle:hover .hover-card,.principle:focus-within .hover-card{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
@media(max-width:900px){
  .principles2{margin-left:calc(var(--principle-pad-mobile) * -1);margin-right:calc(var(--principle-pad-mobile) * -1)}
  .principles2>.principle:nth-child(n){padding:24px var(--principle-pad-mobile)}
  .principles2>.principle:nth-child(n):before{left:var(--principle-pad-mobile);right:var(--principle-pad-mobile)}
  .principles2>.principle:nth-child(5):before{display:block}
}

/* Home hero on desktop: the whole hero (photo, headline, lead, buttons) fits
   in the first screen. The hero is exactly one viewport tall minus the header,
   the portrait column is narrower and sits next to the text, and the headline
   and lead scale with the viewport height as well as its width. */
@media(min-width:901px){
  .home-hero-split{height:calc(100svh - var(--header-height));min-height:560px;max-height:960px;max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter);grid-template-columns:min(calc(min(100svh - var(--header-height),960px) * var(--hero-photo-ratio)),42%) minmax(0,1fr);column-gap:clamp(24px,4vw,72px)}
  .home-hero-photo{height:100%;min-height:0}
  .home-hero-photo img{object-fit:contain;object-position:right bottom}
  .home-hero-content{padding:clamp(24px,4vh,56px) 0}
  .home-hero-content h1{font-size:var(--fs-hero);margin-bottom:clamp(16px,3vh,28px)}
  .home-hero-content .lead{font-size:var(--fs-hero-lead);margin:0}
  .home-hero-content .actions{margin-top:clamp(20px,3.5vh,32px)}
}

/* Content width follows the header and footer: every .shell uses the same
   --container-wide max-width and the same side gutters as .shell-wide. */
@media(max-width:900px){.shell{padding:0 var(--gutter-mobile)}}

/* Header logo. Both SVGs share the same "m" glyph, so they are stacked on
   the same baseline. Scrolling down: a soft-edged mask sweeps right-to-left
   and "ilomir.rs" retracts into the "m"; then the dot of the mark slides in
   next to it. Scrolling back up reverses it: the dot leaves first, then the
   name unrolls. Measurements are in SVG units (--logo-u). */
.brand{--logo-u:calc(var(--logo-h) / 203);position:relative;display:block;flex:0 0 auto;height:var(--logo-h);width:calc(var(--logo-u) * 1004);margin-right:auto;transition:width var(--dur-logo) var(--ease-logo) 120ms}
.top.is-scrolled .brand{width:calc(var(--logo-u) * 243);transition-delay:0ms}
.brand .brand-wordmark,.brand .brand-mark{position:absolute;left:0;max-width:none;opacity:1;overflow:visible}
.brand .brand-wordmark{top:0;height:100%;width:calc(var(--logo-u) * 1004);--logo-keep:calc(var(--logo-u) * 1004);--logo-feather:var(--logo-feather-wide);-webkit-mask-image:linear-gradient(90deg,black var(--logo-keep),transparent calc(var(--logo-keep) + var(--logo-feather)));mask-image:linear-gradient(90deg,black var(--logo-keep),transparent calc(var(--logo-keep) + var(--logo-feather)));transition:--logo-keep var(--dur-logo) var(--ease-logo) 120ms,--logo-feather var(--dur-logo) var(--ease-logo) 120ms}
.top.is-scrolled .brand .brand-wordmark,.top.is-scrolled .brand .brand-mark{max-width:none;opacity:1}
.top.is-scrolled .brand .brand-wordmark{--logo-keep:calc(var(--logo-u) * 172);--logo-feather:var(--logo-feather-tight);transition-delay:0ms}
.brand .brand-mark{top:calc(var(--logo-u) * 5);height:calc(var(--logo-u) * 198);width:calc(var(--logo-u) * 243);pointer-events:none}
.brand .brand-mark svg g[clip-path]>g:first-child{opacity:0}
.brand .brand-mark svg g[clip-path]>g:last-child{opacity:0;transform:translateX(70px);transition:opacity 260ms ease,transform 260ms ease}
.top.is-scrolled .brand .brand-mark svg g[clip-path]>g:last-child{opacity:1;transform:none;transition:opacity var(--dur-logo-dot) ease 520ms,transform var(--dur-logo-dot) var(--ease-out) 520ms}

/* "Moja kompanija i projekti": Taraba as one large card across the full width,
   then four equal cards. Every card is near-black (--paper) with a hairline
   border; its project colour lives only as a soft light in the top-right
   corner, in the tag, the link arrow and a thin line on the top edge. On hover
   (or keyboard focus) the light grows and drifts toward the centre and the
   border takes the project colour. No lift, no scale, no shadow. */
.ventures{display:grid;gap:16px;margin-top:48px}
.ventures-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.venture{--c:var(--muted);--venture-glow:var(--venture-glow-rest);--venture-x:100%;--venture-y:0%;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:28px;min-height:360px;padding:32px 28px 28px;background:var(--paper);border:1px solid var(--venture-border);border-radius:var(--radius-card);color:var(--text);text-decoration:none;transition:--venture-glow var(--dur-venture) var(--ease-out),--venture-x var(--dur-venture) var(--ease-out),--venture-y var(--dur-venture) var(--ease-out),border-color var(--dur-venture) var(--ease-out)}
.venture:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(75% 95% at var(--venture-x) var(--venture-y),color-mix(in srgb,var(--c) var(--venture-glow),transparent),transparent 70%),radial-gradient(55% 60% at 0% 100%,color-mix(in srgb,var(--c) calc(var(--venture-glow) * .35),transparent),transparent 70%)}
.venture:after{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 80%,transparent) 50%,transparent);opacity:.5;transition:opacity var(--dur-venture) ease}
.venture:hover,.venture:focus-visible{--venture-glow:var(--venture-glow-hover);--venture-x:72%;--venture-y:28%;border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.venture:hover:after,.venture:focus-visible:after{opacity:1}
.venture:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.venture--taraba{--c:var(--project-taraba)}
.venture--portal{--c:var(--project-portal)}
.venture--knjige{--c:var(--project-knjige)}
.venture--notion{--c:var(--project-notion)}
.venture--bolt{--c:var(--project-bolt)}

.venture-logo{display:flex;align-items:center;justify-content:center;width:112px;height:56px;padding:6px;border:1px dashed var(--placeholder-border);border-radius:var(--radius-media);color:var(--muted-soft);font-size:var(--fs-logo-placeholder);line-height:1.3;text-align:center}
/* Real logos: muted (grey, low opacity) at rest, full colour on hover/focus. */
.venture-logo--image{width:auto;height:var(--venture-logo-h);padding:0;border:0;justify-content:flex-start}
.venture-logo--image img{display:block;height:100%;width:auto;max-width:160px;object-fit:contain;opacity:var(--venture-logo-rest);filter:grayscale(1);transition:opacity var(--dur-venture) var(--ease-out),filter var(--dur-venture) var(--ease-out)}
.venture:hover .venture-logo--image img,.venture:focus-visible .venture-logo--image img{opacity:1;filter:none}
.venture-body{display:flex;flex-direction:column}
.venture-tag{font-size:var(--fs-small);font-weight:500;color:var(--c);margin-bottom:10px}
.venture-name{font-size:var(--fs-h3);font-weight:560;letter-spacing:-.015em;line-height:1.2;margin:0 0 12px;color:var(--text)}
.venture-text{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--text-secondary)}
.venture-role{margin:16px 0 0;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.venture-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:20px;border-top:1px solid var(--venture-border)}
.venture-meta{font-size:var(--fs-small);color:var(--muted)}
.venture-link{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-small);font-weight:600;color:var(--text)}
.venture-link .cta-link-arrow{color:var(--c)}
.venture:hover .cta-link-arrow,.venture:focus-visible .cta-link-arrow{animation:cta-nudge var(--dur-nudge) var(--ease-in-out) infinite}

/* Taraba: the lead card. Bigger name, stronger light, logo on the right. */
.venture--lead{--venture-glow:var(--venture-glow-lead-rest);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body logo" "foot foot";column-gap:48px;row-gap:40px;min-height:380px;padding:40px}
.venture--lead:hover,.venture--lead:focus-visible{--venture-glow:var(--venture-glow-lead-hover)}
.venture--lead:after{opacity:.8;left:40px;right:40px}
.venture--lead .venture-logo{grid-area:logo;width:176px;height:96px}
.venture--lead .venture-logo--image{width:auto;height:var(--venture-logo-h-lead);justify-content:flex-end}
.venture--lead .venture-body{grid-area:body;max-width:62ch}
.venture--lead .venture-name{font-size:var(--fs-h2);font-weight:560;letter-spacing:-.03em;line-height:1.05;margin-bottom:20px}
.venture--lead .venture-text{font-size:var(--fs-body);color:var(--text-strong)}
.venture--lead .venture-foot{grid-area:foot;flex-direction:row;align-items:center;justify-content:space-between;align-self:end;padding-top:24px}
.venture--lead .venture-link{font-size:var(--fs-body)}
.ventures-actions{margin-top:40px}

@media(max-width:1100px){.ventures-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .ventures-grid{grid-template-columns:1fr}
  .venture,.venture--lead{min-height:0;padding:28px 24px 24px}
  .venture--lead{grid-template-columns:1fr;grid-template-areas:"logo" "body" "foot";row-gap:28px}
  .venture--lead .venture-logo{width:140px;height:72px}
  .venture--lead .venture-logo--image{width:auto;height:56px;justify-content:flex-start}
  .venture--lead .venture-foot{flex-direction:column;align-items:flex-start}
}

/* The four smaller project cards stay dimmed until hovered or focused: their
   content fades back, their light drops and their top line is hidden. Taraba
   (the lead card) is always at full strength. Applied to the card's children,
   not the card itself, so it doesn't clash with the scroll reveal. On touch
   screens (no hover) the cards are shown at full strength. */
@media(hover:hover){
  .ventures-grid .venture{--venture-glow:var(--venture-glow-dim)}
  .ventures-grid .venture>*{opacity:var(--venture-dim);transition:opacity var(--dur-venture) var(--ease-out)}
  .ventures-grid .venture:after{opacity:0}
  .ventures-grid .venture:hover,.ventures-grid .venture:focus-visible{--venture-glow:var(--venture-glow-hover)}
  .ventures-grid .venture:hover>*,.ventures-grid .venture:focus-visible>*{opacity:1}
  .ventures-grid .venture:hover:after,.ventures-grid .venture:focus-visible:after{opacity:1}
}

/* "Nastupi i razgovori": the YouTube thumbnail as a clean 16:9 image, no
   player and no YouTube UI. object-fit:cover also crops the black bars of
   the 4:3 fallback (hqdefault). On hover/focus the image dims slightly and a
   play icon fades in at the centre. */
.talk-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;margin-bottom:18px;border-radius:var(--radius-media);background:var(--paper)}
.talk-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(1);transition:filter var(--dur-thumb) var(--ease-out)}
.talk-play{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:var(--talk-play-size);height:var(--talk-play-size);border-radius:50%;background:var(--talk-play-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);opacity:0;translate:-50% -50%;scale:.88;transition:opacity var(--dur-thumb) var(--ease-out),scale var(--dur-thumb) var(--ease-out)}
.talk-play svg{margin-left:3px}
.talk-card:hover .talk-thumb img,.talk-card:focus-visible .talk-thumb img{filter:brightness(var(--talk-thumb-dim))}
.talk-card:hover .talk-play,.talk-card:focus-visible .talk-play{opacity:1;scale:1}
.talk-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Footer: newsletter, then one rounded panel (intro / navigation / profiles /
   two contact actions) that ends in a huge "milomir.rs" wordmark cropped by the
   panel's bottom edge. Copyright and legal links sit below the panel. */
.footer{border-top:0;padding:0 0 28px}
.footer .newsletter{border-bottom:0;margin-bottom:0;padding:var(--section-space) 0 56px}
.footer-panel{position:relative;overflow:hidden;margin:0 var(--footer-panel-inset);background:var(--footer-panel-bg);border:1px solid var(--line);border-radius:var(--footer-panel-radius)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1.3fr);column-gap:40px;align-items:start;padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(40px,5vw,80px)}
.footer-intro{margin:0;max-width:16em;font-size:var(--fs-footer-intro);font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--muted)}
.footer-intro span{color:var(--text)}
.footer-col-title{margin-bottom:16px;font-size:var(--fs-label);font-weight:500;color:var(--text)}
.footer-nav{display:grid;gap:10px;justify-items:start}
.footer-nav a,.footer-legal a{color:var(--muted);text-decoration:none;transition:color var(--dur-fast) ease}
.footer-nav a:hover,.footer-legal a:hover{color:var(--text)}
.footer-profiles{display:flex;flex-wrap:wrap;gap:8px}
.footer-profile{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:var(--radius-pill);background:var(--footer-profile-bg);border:1px solid var(--line);color:var(--text-secondary);font-size:var(--fs-small);text-decoration:none;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.footer-profile svg{width:16px;height:16px;flex:0 0 auto}
.footer-profile:hover{color:var(--text);border-color:var(--line-strong)}
.footer-actions{display:grid;justify-self:end}
.footer-action{display:grid;gap:4px;padding:0 0 22px;color:var(--text);text-decoration:none}
.footer-action+.footer-action{padding:22px 0 0;border-top:1px solid var(--line)}
.footer-action-title{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-footer-action);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.footer-action--primary .footer-action-title{color:var(--accent-blue)}
.footer-action-sub{font-size:var(--fs-small);color:var(--muted)}
.footer-action-icon{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;border-radius:50%;background:var(--text);color:var(--black);transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-fast) ease}
.footer-action--primary .footer-action-icon{background:var(--accent-blue)}
.footer-action-icon svg{width:62%;height:62%}
.footer-action:hover .footer-action-icon,.footer-action:focus-visible .footer-action-icon{transform:rotate(45deg)}
.footer-action--primary:hover .footer-action-title{color:var(--accent-blue-hover)}
.footer-wordmark svg{display:block;width:100%;height:auto}
.footer-bottom{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-top:24px;font-size:var(--fs-small);color:var(--muted)}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap}
@media(max-width:1100px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}.footer-actions{justify-self:start}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr;row-gap:40px}}


/* =====================================================================
   LIT PANELS: home page redesign. Everything below uses the Lit panels
   tokens. Content and behaviour are unchanged; only the look is new.
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Base */
html,body{background:var(--canvas)}
body{color:var(--text-1)}
h1,h2{font-weight:var(--w-display);letter-spacing:var(--track-display);line-height:var(--lh-display)}
h1 em,h2 em{font-style:normal}
.lead,.intro-note,.summary-copy p,.sublead,#home .section>p{color:var(--text-2)}

/* Section label: rim-blue, sentence case, small dot in front; 24px above the heading */
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--light-rim);font-size:14px;font-weight:500}
.eyebrow:before{content:"";width:var(--label-dot);height:var(--label-dot);border-radius:50%;background:currentColor;flex:0 0 auto}

/* Panels */
.panel{position:relative;isolation:isolate;overflow:hidden;background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-panel)}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-chip);background:var(--chip);color:var(--text-3);font-size:var(--fs-meta);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Home sections: panels on the canvas, no rules between sections */
#home>.section,#home>.summary-band+.section{border-bottom:0;padding-top:0;padding-bottom:0;margin-top:var(--section-gap)}
#home>.section:last-child{margin-bottom:var(--section-gap)}

/* Buttons: pills (primary = full blue, secondary = outline) */
#home .btn,.footer .newsletter-form button{border-radius:var(--r-control);padding:13px 24px}
#home .btn.secondary{background:transparent;border:1px solid var(--hairline-strong);color:var(--text-1)}
#home .btn.secondary:hover{border-color:var(--light-rim);color:var(--text-1);background:transparent}
.home-hero-content .actions .btn.secondary{border:1px solid var(--hairline-strong);padding:13px 24px}
.home-hero-content .actions .btn.secondary:hover{border-color:var(--light-rim);color:var(--text-1)}

/* ---- Light 1: fluted glass ------------------------------------------
   ::before = two blurred light sources; ::after = vertical glass ribs plus a
   little grain. Used only behind the hero portrait and in "Ukratko". */
.fx-fluted{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;--fl-a:var(--light-blue);--fl-b:var(--light-ember);--fl-strength:1}
.fx-fluted:before{content:"";position:absolute;inset:-15%;opacity:var(--fl-strength);filter:blur(var(--fluted-blur));background:radial-gradient(38% 55% at var(--fl-x1,26%) 58%,var(--fl-a),transparent 70%),radial-gradient(40% 50% at var(--fl-x2,78%) 40%,var(--fl-b),transparent 70%),radial-gradient(30% 30% at var(--fl-x3,40%) 30%,color-mix(in srgb,var(--fl-a) 60%,white),transparent 70%)}
.fx-fluted:after{content:"";position:absolute;inset:0;background:var(--noise),repeating-linear-gradient(90deg,var(--fluted-hi) 0 1px,var(--fluted-hi-soft) 1px 6px,transparent 6px calc(var(--fluted-period) - 6px),var(--fluted-lo) calc(var(--fluted-period) - 6px) calc(var(--fluted-period) - 1px),var(--fluted-lo-deep) calc(var(--fluted-period) - 1px) var(--fluted-period)),linear-gradient(180deg,var(--panel) 0%,transparent 28%,transparent 72%,var(--panel) 100%);background-size:160px 160px,auto,auto;opacity:1;mix-blend-mode:overlay}
/* Ukratko: light kept to the sides so the centred text sits on dark glass */
.fx-fluted--deep{--fl-a:var(--light-blue);--fl-b:color-mix(in srgb,var(--light-blue) 70%,var(--light-deep));--fl-strength:.75;--fl-x1:4%;--fl-x2:98%;--fl-x3:-30%}

/* ---- Light 2: horizon -----------------------------------------------
   A wide ellipse of blue -> cyan light rising out of the panel's bottom edge.
   Full strength only in the "Rad sa mnom" panel; faint in the footer. */
.fx-horizon{--hz:var(--horizon-strength)}
.fx-horizon:before{content:"";position:absolute;left:-25%;right:-25%;bottom:-62%;height:100%;z-index:-1;pointer-events:none;opacity:var(--hz);filter:blur(28px);background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--light-cyan) 85%,white) 0%,var(--light-cyan) 14%,var(--light-blue) 38%,color-mix(in srgb,var(--light-blue) 30%,transparent) 58%,transparent 72%)}

/* ---- Hero: one large panel that fits the first screen ---------------- */
.hero-dark{background:var(--canvas);padding:12px var(--gutter) 0}
.hero-dark:before{content:none}
.home-hero-split.panel{max-width:calc(var(--container-wide) - 2 * var(--gutter));margin:0 auto;padding:0}
@media(min-width:901px){
  .home-hero-split.panel{height:calc(100svh - var(--header-height) - 24px);min-height:560px;max-height:920px;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px)}
  .home-hero-content{padding:var(--panel-pad) var(--panel-pad) var(--panel-pad) 0}
}
.home-hero-photo{position:relative;height:100%;background:transparent;overflow:hidden}
.home-hero-photo .fx-fluted{border-radius:0;-webkit-mask-image:linear-gradient(90deg,black 70%,transparent);mask-image:linear-gradient(90deg,black 70%,transparent)}
.home-hero-content .eyebrow{color:var(--light-rim)}
.home-hero-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center bottom;-webkit-mask-image:linear-gradient(180deg,black 82%,transparent);mask-image:linear-gradient(180deg,black 82%,transparent)}
.home-hero-content h1{font-weight:var(--w-display)}
.home-hero-content .lead{color:var(--text-2)}

/* ---- Čime se bavim: the accordion panel ----------------------------- */
.pillars{border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--panel)}
.pillar{background:var(--panel);border-left-color:var(--hairline)}
.pillar:before{display:none}
.pillar:after{background:radial-gradient(80% 70% at 100% 0%,color-mix(in srgb,var(--light-blue) 30%,transparent),transparent 70%),radial-gradient(60% 50% at 0% 100%,color-mix(in srgb,var(--light-blue) 10%,transparent),transparent 70%),var(--panel)}

/* ---- Ukratko: a narrower lit panel (92% of the content width) -------- */
.summary-band{width:calc((min(100vw,var(--container-wide)) - 2 * var(--gutter)) * .92);margin:var(--section-gap) auto 0;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--panel)}
.summary-band:before{content:none}
.summary-band>.fx-fluted{z-index:-2}
.summary-band:after{z-index:-1}
.summary-section{padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(72px,9vw,128px)}

/* ---- Kako razmišljam: 2 x 4 bento of principle panels ---------------- */
.principles2{gap:var(--bento-gap);margin:40px 0 0}
.principles2>.principle:nth-child(n){padding:var(--panel-pad);background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-inner)}
.principles2>.principle:nth-child(n):before{display:none}
.principle:after{box-shadow:none}
.principle:hover,.principle:focus-within{border-color:color-mix(in srgb,var(--light-blue) 35%,transparent)}

/* ---- Projects: Taraba showcase + bento row -------------------------- */
.ventures{gap:var(--bento-gap)}
.ventures-grid{gap:var(--bento-gap)}
.venture{background:var(--panel);border-color:var(--hairline);border-radius:var(--r-panel);padding:var(--panel-pad);gap:24px}
.venture-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.venture--lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head media" "body media" "foot media";column-gap:clamp(32px,4vw,64px);row-gap:28px;min-height:480px}
.venture--lead .venture-head{grid-area:head}
.venture--lead .venture-logo--image{justify-content:flex-start}
.venture--lead .venture-foot{flex-direction:row;align-items:center;justify-content:space-between}
.venture-media{grid-area:media;position:relative;margin:0;min-height:320px;border-radius:var(--r-inner);border:1px solid var(--hairline);overflow:hidden;background:var(--canvas)}
.media-slot-img{position:absolute;inset:0;z-index:1;background-position:center;background-size:cover;background-repeat:no-repeat}
/* Generated images (public/assets/img/generated/, see PROMPTS.md). Until a
   file exists the fluted light underneath shows through. */
.media-slot--taraba .media-slot-img{background-image:url('../img/generated/taraba-showcase.webp')}
.media-slot--preduzetnistvo .media-slot-img{background-image:url('../img/generated/tekst-preduzetnistvo.webp')}
.media-slot--sistemi .media-slot-img{background-image:url('../img/generated/tekst-sistemi.webp')}
.media-slot--liderstvo .media-slot-img{background-image:url('../img/generated/tekst-liderstvo.webp')}
.venture-media .fx-fluted:after{background:var(--noise),repeating-linear-gradient(90deg,var(--fluted-hi) 0 1px,var(--fluted-hi-soft) 1px 6px,transparent 6px calc(var(--fluted-period) - 6px),var(--fluted-lo) calc(var(--fluted-period) - 6px) calc(var(--fluted-period) - 1px),var(--fluted-lo-deep) calc(var(--fluted-period) - 1px) var(--fluted-period));background-size:160px 160px,auto}
.venture--taraba .venture-media .fx-fluted{--fl-a:var(--light-blue);--fl-b:var(--light-cyan);--fl-strength:.8}
.venture-foot{border-top-color:var(--hairline)}

/* ---- Nastupi i razgovori: thumbnail framed inside a panel ------------ */
.talk-grid{gap:var(--bento-gap)}
.talk-card{display:flex!important;flex-direction:column;padding:12px 12px var(--panel-pad);background:var(--panel)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-panel)!important;transition:border-color var(--dur-base) ease}
.talk-card:hover{border-color:var(--hairline-strong)!important}
.talk-card .talk-thumb{border-radius:var(--r-inner);margin-bottom:28px}
.talk-card>:not(.talk-thumb){margin-left:clamp(16px,2vw,36px);margin-right:clamp(16px,2vw,36px)}
.talk-card .link-cue{margin-top:auto;padding-top:16px}

/* ---- Tekstovi: image on top, text below ----------------------------- */
.text-cards{gap:var(--bento-gap)}
.text-card{display:flex!important;flex-direction:column;padding:12px 12px var(--panel-pad)!important;background:var(--panel)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-panel)!important;transition:border-color var(--dur-base) ease}
.text-card:hover{border-color:var(--hairline-strong)!important}
.text-card .text-img{position:relative;height:auto;aspect-ratio:4/3;margin-bottom:24px;border:1px solid var(--hairline);border-radius:var(--r-inner);overflow:hidden;background:var(--canvas)}
.text-card .text-img .fx-fluted{--fl-strength:.35}
.text-card .text-body{padding:0 clamp(16px,1.6vw,28px)}

/* ---- Činjenice: one data panel, four columns ------------------------ */
.proof-grid.panel{grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--hairline);margin-top:40px}
.proof-grid.panel .proof-item{padding:var(--panel-pad);border-left:1px solid var(--hairline);border-top:0}
.proof-grid.panel .proof-item:first-child{border-left:0}
.proof-value{font-weight:var(--w-display);letter-spacing:var(--track-display);margin-bottom:16px}
.proof-label{font-weight:500;color:var(--text-1)}
.proof-item p{color:var(--text-3)}

/* ---- Rad sa mnom: the horizon panel (the one coloured panel) -------- */
.cta-panel.panel{padding:var(--panel-pad) var(--panel-pad) clamp(120px,14vw,200px);gap:clamp(32px,5vw,96px);align-items:start}
.cta-panel .sublead{color:var(--text-1)}

/* ---- Newsletter: compact panel -------------------------------------- */
.footer .newsletter{margin:var(--section-gap) 0 var(--bento-gap);padding:var(--panel-pad);background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-panel);align-items:center}
.footer .newsletter h2{font-size:var(--fs-h3-lg)}
.footer .newsletter-form input{border-radius:var(--r-control);background:var(--canvas);border-color:var(--hairline-strong);padding:13px 20px}
.footer .footer-panel{background:var(--panel);border-color:var(--hairline)}
.footer .footer-panel{isolation:isolate;--hz:var(--horizon-strength-faint)}

/* ---- Tablet & phone ------------------------------------------------- */
@media(max-width:1100px){
  .venture--lead{grid-template-columns:1fr;grid-template-areas:"media" "head" "body" "foot"}
  .venture-media{min-height:0;aspect-ratio:16/9}
  .proof-grid.panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-grid.panel .proof-item:nth-child(3){border-left:0}
  .proof-grid.panel .proof-item:nth-child(n+3){border-top:1px solid var(--hairline)}
}
@media(max-width:900px){
  :root{--bento-gap:12px}
  .hero-dark{padding:8px var(--gutter-mobile) 0}
  .home-hero-split.panel{display:block}
  .home-hero-photo{height:52vh}
  .home-hero-content{padding:28px 24px 32px}
  .summary-band{width:calc(100% - 2 * var(--gutter-mobile))}
  .cta-panel.panel{padding-bottom:140px}
}
@media(max-width:600px){
  .venture--lead .venture-foot{flex-direction:column;align-items:flex-start}
  .proof-grid.panel{grid-template-columns:1fr}
  .proof-grid.panel .proof-item:nth-child(n){border-left:0}
  .proof-grid.panel .proof-item:nth-child(n+2){border-top:1px solid var(--hairline)}
}

/* Header collapse on scroll. Starts at the same scroll step as the logo
   (header-scroll.js, 24px) and uses the same duration and easing (--dur-logo /
   --ease-logo). The links and the button shrink as one group with a transform
   (no font-size or padding animation, so nothing reflows and it stays smooth),
   the inactive links fade back and the bar gets lower. The header is fixed and
   the body reserves its full height, so the page never jumps. */
.top{position:fixed;left:0;right:0;top:0}
body{padding-top:var(--header-height)}
.top .nav{min-height:calc(var(--header-height) - 1px);transition:min-height var(--dur-logo) var(--ease-logo)}
.top.is-scrolled .nav{min-height:calc(var(--header-height-scrolled) - 1px)}
.top .cta{padding:var(--cta-pad-y) var(--cta-pad-x)!important}
.nav-links>a{font-size:var(--nav-fs)}
.nav-links>a:not(.cta){transition:opacity var(--dur-logo) var(--ease-logo),color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.top.is-scrolled .nav-links>a:not(.cta):not(.is-current){opacity:var(--nav-dim)}
.top.is-scrolled .nav-links>a:not(.cta):hover{opacity:1}
@media(min-width:901px){
  .nav-links{display:flex;align-items:center;gap:var(--nav-gap);transform-origin:right center;transition:scale var(--dur-logo) var(--ease-logo);will-change:scale}
  .top.is-scrolled .nav-links{scale:var(--nav-scale-scrolled)}
}

/* "Povežimo se": the blue box itself tightens around the text on scroll. The
   box is drawn by ::before, so only its inset animates (no text reflow). */
.top .cta{position:relative;isolation:isolate;background:transparent!important;border-color:transparent!important}
.top .cta:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius-control);background:var(--accent-blue);transition:inset var(--dur-logo) var(--ease-logo),background-color var(--dur-fast) ease}
.top .cta:hover{background:transparent!important;border-color:transparent!important}
.top .cta:hover:before{background:var(--accent-blue-hover)}
/* translate keeps the box's right edge on the content edge while it tightens */
.top .cta{transition:translate var(--dur-logo) var(--ease-logo)}
@media(min-width:901px){.top.is-scrolled .cta:before{inset:var(--cta-box-inset-scrolled)}.top.is-scrolled .cta{translate:7px 0}}

/* Every button on the site uses the same pill radius as the hero buttons
   (--r-control). Applies to .btn, the header CTA (and its animated box) and
   form buttons on every page. */
.btn,.btn.secondary,.cta,.top .cta:before,button:not(.nav-toggle),.newsletter-form button{border-radius:var(--r-control)!important}

/* Hero: ember on the left, blue on the right, matching the blue rim light on
   the right side of Milomir in the photo. */
.home-hero-photo .fx-fluted{--fl-a:var(--light-ember);--fl-b:var(--light-blue)}

/* Taraba: the years chip sits inline at the end of the name, as tall as the
   name's lowercase letters (x-height): bottom on the baseline, top at the
   x-height. inline-block + overflow:hidden puts the chip's baseline at its
   bottom edge. */
.venture-title{font-size:var(--fs-h2);line-height:1.05;margin-bottom:20px;--line-xh:1ex}
.venture-title .venture-name{display:inline;margin:0}
.chip--xh{display:inline-block;overflow:hidden;vertical-align:baseline;height:var(--line-xh);line-height:var(--line-xh);padding:0 .9em;margin-left:.6em;font-size:clamp(11px,calc(var(--line-xh) * .5),14px);font-weight:400;letter-spacing:0;border:1px solid var(--hairline-strong)}

/* Section labels: no dot in front (Marija, 30 Oct 2026). */
.eyebrow:before{content:none;display:none}

/* "Činjenice": hovering a fact shows its photo across the whole section,
   full viewport width, at 25% opacity, fading in and out at the edges. */
.proof-section{position:relative;isolation:isolate}
.proof-backdrop{position:absolute;z-index:-1;top:calc(var(--proof-bleed) * -1);bottom:calc(var(--proof-bleed) * -1);left:50%;width:100vw;translate:-50% 0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,black 22%,black 78%,transparent);mask-image:linear-gradient(180deg,transparent,black 22%,black 78%,transparent)}
.proof-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.04;transition:opacity var(--dur-proof-photo) var(--ease-out),scale 1600ms var(--ease-out)}
.proof-section:has(.proof-item[data-fact="0"]:hover) .proof-photo[data-fact="0"],
.proof-section:has(.proof-item[data-fact="1"]:hover) .proof-photo[data-fact="1"],
.proof-section:has(.proof-item[data-fact="2"]:hover) .proof-photo[data-fact="2"],
.proof-section:has(.proof-item[data-fact="3"]:hover) .proof-photo[data-fact="3"]{opacity:var(--proof-photo-opacity);scale:1}
/* the data panel turns slightly see-through so the photo reads behind it */
.proof-grid.panel{transition:background-color var(--dur-proof-photo) ease}
.proof-section:has(.proof-item:hover) .proof-grid.panel{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.proof-item{transition:opacity var(--dur-base) ease}
.proof-section:has(.proof-item:hover) .proof-item:not(:hover){opacity:.5}
@media(hover:none){.proof-backdrop{display:none}}

/* Default state: with nothing hovered, the first fact (2019.) is the active
   one, so its photo is already behind the section when it comes into view. */
.proof-section:not(:has(.proof-item:hover)) .proof-photo[data-fact="0"]{opacity:var(--proof-photo-opacity);scale:1}
@media(hover:hover){
  .proof-section:not(:has(.proof-item:hover)) .proof-grid.panel{background:color-mix(in srgb,var(--panel) 70%,transparent)}
  .proof-section:not(:has(.proof-item:hover)) .proof-item:not([data-fact="0"]){opacity:.5}
}

/* "Rad sa mnom": content centred vertically in the panel (equal space above
   and below); the horizon light still rises from the bottom edge. */
.cta-panel.panel{align-items:center;padding:clamp(88px,10vw,160px) var(--panel-pad)}
.cta-panel .actions{margin-bottom:0}
@media(max-width:900px){.cta-panel.panel{padding:72px var(--panel-pad)}}

/* Footer, reorganised (30 Oct 2026): first column = intro, "Pratite me" and
   copyright; then Navigacija, Korisni linkovi and the two contact actions.
   The panel runs to the very bottom of the page: no gap, square bottom
   corners. The big "milomir.rs" reads as frosted glass against a taller
   horizon glow rising from the page's bottom edge (see ".footer-wordmark"
   below for the glass treatment). */
.footer{padding-bottom:0}
.footer .footer-panel{margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
@media(min-width:1101px){.footer-top{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr)}}
.footer-intro span{display:block}
.footer-col--about{display:flex;flex-direction:column;gap:40px}
.footer-copyright{margin:0;font-size:var(--fs-small);color:var(--muted)}
.footer .footer-panel.fx-horizon:before{left:-15%;right:-15%;bottom:-30%;height:90%;opacity:1;filter:blur(36px);background:radial-gradient(50% 55% at 50% 60%,color-mix(in srgb,var(--light-cyan) 80%,white) 0%,var(--light-cyan) 16%,var(--light-blue) 42%,color-mix(in srgb,var(--light-blue) 35%,transparent) 62%,transparent 76%)}
@media(max-width:1100px){.footer-col--about{grid-column:1/-1}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}.footer-actions{justify-self:start}}
@media(max-width:600px){.footer .footer-panel.fx-horizon:before{height:38%;bottom:-12%}}

/* Footer panel: same width as the content above (header / newsletter). */
.footer .footer-panel{max-width:calc(var(--container-wide) - 2 * var(--gutter));margin-left:auto;margin-right:auto}
@media(max-width:1424px){.footer .footer-panel{margin-left:var(--gutter);margin-right:var(--gutter)}}
@media(max-width:900px){.footer .footer-panel{margin-left:var(--gutter-mobile);margin-right:var(--gutter-mobile)}}

/* "milomir.rs" as frosted glass: translucent white letters that lighten the
   glow behind them (screen blend), with a bright top edge and a soft inner
   shine, so they read as glass lit from below. */
.footer-wordmark{display:block;position:relative;z-index:1;margin-bottom:calc(var(--footer-wordmark-crop) * -1);padding:0 clamp(8px,1vw,16px);line-height:0;color:var(--wordmark-glass);mix-blend-mode:screen}
.footer-wordmark svg{filter:drop-shadow(0 -1.5px 0 var(--wordmark-edge)) drop-shadow(0 0 24px var(--wordmark-glow));-webkit-mask-image:linear-gradient(180deg,black 30%,var(--wordmark-mask-fade));mask-image:linear-gradient(180deg,black 30%,var(--wordmark-mask-fade))}

/* Newsletter: no panel; it sits directly on the page, its content aligned to
   the same edges as everything else (the .shell-wide container). */
.footer .newsletter{background:none;border:0;border-radius:0;padding:0;margin:var(--section-gap) 0 calc(var(--section-gap) * .6)}

/* Footer glow: much lower and softer (30 Oct 2026). */
.footer .footer-panel.fx-horizon:before{bottom:-22%;height:48%;opacity:.5}
@media(max-width:600px){.footer .footer-panel.fx-horizon:before{height:26%;bottom:-8%}}