/* Local test font — relies on "PP Editorial New" being installed on this Mac.
   Not a web font: won't render for visitors who don't have it installed. */
@font-face{
  font-family:"PP Editorial New";
  src:local("PP Editorial New"),
      local("PPEditorialNew-Regular"),
      local("PP Editorial New Regular");
  font-weight:400;
}
@font-face{
  font-family:"PP Editorial New";
  src:local("PP Editorial New Ultralight"),
      local("PPEditorialNew-Ultralight"),
      local("PP Editorial New Light"),
      local("PPEditorialNew-Light");
  font-weight:300;
}
/* Söhne (Klim Type Foundry) — licensed web files, Leicht (300) and Buch (400) only: the two weights the site uses. */
@font-face{font-family:"Söhne";src:url("fonts/soehne-leicht.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("fonts/soehne-buch.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ==========================================================
   enricoporro.com — v2 "editorial pastel" homepage
   Structure inspired by big-type editorial studio sites.
   Original code & content. Design tokens below.
   ========================================================== */
:root{
  /* ---------- palette ---------- */
  --white:#ffffff;
  --g1:#f5f5f7;                 /* light ground, banded sections */
  --g2:#86868b;                 /* secondary text                */
  --black:#1d1d1f;              /* text                          */
  --yellow:#ffef71;             /* highlight                     */
  --accent:#7f0799;             /* accent, links, hover          */
  --pink:#ff60dd;               /* highlight text on black (home line, services list) */
  --blue:#2259ec;               /* header bar, blue sections     */

  --page:#fafafa;               /* page ground, homepage and case studies */

  /* beige study — still wired to the homepage, see the .home block below */
  --bei1:#fafae6;
  --bei2:#f0f0dc;
  --bei3:#e6e6d2;
  --p1:#001847;
  --p2:#4a36e0;
  --ora1:#e35c4f;

  --line:#1d1d1f;
  --sans:"Söhne","Geist","Manrope",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
  --gutter:clamp(16px,4vw,64px);
}
@media(min-width:1024px){:root{--gutter:160px}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip} /* nothing may widen the page sideways; clip keeps sticky working */
/* ---------- accessibility utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 20px;border-radius:999px;background:#0f0f0f;color:#fff;font-size:16px;text-decoration:none;transition:top .15s ease}
.skip:focus{top:16px}
/* one visible focus ring everywhere, in the site accent */
:focus-visible{outline:2px solid #fe7140;outline-offset:3px;border-radius:2px}
.obtn:focus-visible{outline-offset:4px}
.case:focus-visible{outline-offset:6px}

body{background:var(--page);color:var(--black);font-family:var(--sans);font-size:clamp(18px,1.6vw,23px);line-height:1.45;font-weight:300;letter-spacing:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- top bar — nickclement.com's nav: sticky, logo left, "Contact" right,
   1px hairline underneath (theirs rgb(31,31,31) on black; ours a light grey on white),
   link fades to grey on hover in .4s. Logo 28px (theirs 26×27). ---------- */
:root{--hdr-h:68px}
.nb{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--hdr-h);padding:20px var(--gutter);background:transparent;mix-blend-mode:difference}   /* "negative": everything in the bar is white, and difference turns it black on light grounds, white on dark ones */
.nb-logo{display:inline-flex;color:var(--white)}
.nb-logo svg{height:28px;width:auto;display:block}
.nb-link{font-family:var(--sans);font-size:16px;font-weight:300;line-height:1;letter-spacing:0;color:var(--white);text-decoration:none;transition:color .4s cubic-bezier(.44,0,.56,1)}
.nb-link:hover,.nb-link:focus-visible{color:#8c8c8c}   /* reads #737373 on white, #8c8c8c on black */
.nb-link:focus-visible{outline-offset:4px}
@media(max-width:809px){.nb{padding:16px var(--gutter)}}

/* ---------- opening (nickclement.com hero, our type) ----------
   Their numbers: hero padding 170px 0 100px, two columns gap 20px, left flex .5 / right flex 2,
   name/role 14px lh 170%, h1 30px lh 100% tracking -1px, sub 14px grey, title→ticker gap 90px,
   tiles 150×100 radius 6 gap 10, ticker clipped with rounded corners. Scaled to our type. ---------- */
.nk{display:flex;align-items:flex-start;gap:20px;padding:170px var(--gutter) 100px;overflow:hidden}
.nk-who{flex:.5 0 0;min-width:0;padding-top:13px;display:flex;flex-direction:column}
.nk-main{flex:2 0 0;min-width:0;display:flex;flex-direction:column;gap:80px}
.nk-name,.nk-role{margin:0;font-size:16px;font-weight:300;line-height:1.7;letter-spacing:0;color:var(--black)}
/* the small label is centred on the title to its right: same line box (24px × 1.2 = 28.8px), same 13px top inset,
   so the two texts share a vertical centre whatever their sizes */
.nk-name{line-height:28.8px;font-weight:400}   /* Buch */
.nk-role{color:#767676;font-weight:400}   /* 4.54:1 on white; Buch */
.nk-title-wrap{display:flex;flex-direction:column;gap:4px;padding-top:13px}   /* the case-study label/title pair */
.nk-title{margin:0;font-size:24px;font-weight:400;line-height:1.2;letter-spacing:0;color:#858585;max-width:760px}   /* = .cs-story .label */
.nk-sub{margin:0;font-size:28px;font-weight:400;line-height:1.2;letter-spacing:0;color:#0f0f0f}
#top .nk-sub{font-weight:300}       /* hero description: Leicht… */
#top .nk-sub .buch{font-weight:400} /* …except the first sentence, in Buch */   /* runs the full column: no forced wraps before the <br>s */   /* = .cs-story .title */
/* intro: appear = fade up; letters = blur in, one after the other (JS sets the delays) */
[data-appear]{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.44,0,.56,1),transform .6s cubic-bezier(.44,0,.56,1)}
[data-appear].is-in{opacity:1;transform:none}
[data-letters] .ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(10px);transition:opacity .5s cubic-bezier(.44,0,.56,1),filter .5s cubic-bezier(.44,0,.56,1),transform .5s cubic-bezier(.44,0,.56,1);transition-delay:var(--d,0s)}
[data-letters].is-in .ch{opacity:1;filter:blur(0);transform:none}
[data-letters] .w{white-space:nowrap}
/* the services block on black, like Selected Work: white text, label in the AA grey */
.nk--text{background:#000000;color:var(--white);padding-top:40px;padding-bottom:200px}
.nk--text .nk-name,.nk--text .nk-sub{color:var(--white)}
.nk--text .nk-title{color:#9a9a9a}
/* the groups sit side by side, each as wide as the "Services" column (220px at 1440), 20px apart —
   so Design & Strategy → Education repeats the Services → Design & Strategy step. A group never wraps:
   if its longest line needs more than 220px the column grows to fit it. */
.nk--text .nk-main{display:flex;flex-direction:column;gap:80px}   /* lead, then the groups: 80px, the site's standard step */
.nk--text .nk-lead{max-width:760px}
/* the groups are their own grid, sized only on the lists — the headline above no longer widens the columns */
.nk--text .nk-groups{display:grid;grid-template-columns:repeat(3,max-content);column-gap:120px;align-items:start}   /* three groups on one row, 120px apart */
.nk--text .nk-groups .nk-title-wrap{padding-top:0}
/* the groups: 18px heading, 16px items (the lead above keeps the 24/28 pair) */
.nk--text .nk-title-wrap:not(.nk-lead) .nk-title{font-size:16px}
.nk--text .nk-list{font-size:16px;line-height:1.5}
.nk--text .nk-lead .nk-list{font-size:28px;line-height:1.2}   /* a list used as the lead reads at headline size */
/* the white space between the end of "Services" and the start of "Design & Strategy" is ~180px at 1440
   (220px column − the word + 20px gap); the same 180px now separates the two groups, scaling down on narrower screens */
.nk--text .nk-list li{white-space:nowrap}
@media(max-width:1279px){.nk--text .nk-groups{grid-template-columns:1fr;row-gap:24px}}   /* below desktop the right column is too narrow for three: groups stack, 24px apart */
.nk-list{list-style:none;padding:0}
.nk-list li{margin:0}   /* the services list reads like the description: same size, one item per line */
/* ticker */
.nk-ticker{position:relative;width:100%;overflow:hidden;border-radius:10px;opacity:0;transition:opacity .6s ease .2s;user-select:none;touch-action:pan-y}
.nk-ticker.is-in{opacity:1}
.nk-track{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;width:max-content;will-change:transform;animation:nk-scroll var(--nk-dur,40s) linear infinite}
.nk-tile{flex:none;width:150px;height:100px;border-radius:6px;background:var(--g1);display:flex;align-items:center;justify-content:center}
.nk-tile img{width:auto;height:auto;max-width:126px;max-height:64px;object-fit:contain}   /* bigger mark, tile stays 150×100 (12–18px of air) */
.nk-tile img.mono{filter:brightness(0)}
@keyframes nk-scroll{to{transform:translateX(calc(-1 * var(--nk-half,50%)))}}
/* the same ticker used inside a case study (Boolean, strategic partnerships): grey ground like the section above it */
.cs-logos{background:#f0f0f0;padding:0 var(--gutter) clamp(72px,12vh,150px)}
@media (prefers-reduced-motion:reduce){
  [data-appear],[data-letters] .ch,.nk-ticker{opacity:1;transform:none;filter:none;transition:none}
  .nk-track{animation:none}
}
@media(max-width:1279px){.nk{padding-top:128px}.nk-main{flex:1 0 0;gap:50px}}
@media(max-width:809px){.nk{flex-direction:column;align-items:stretch;gap:80px;padding:30px var(--gutter) 40px}.nk-who,.nk-main{flex:none;width:100%}.nk-title{font-size:22px}.nk-sub{font-size:22px}}
.nk-role--phone{display:none}
/* line breaks that exist on one breakpoint only */
.br-phone{display:none}
@media(max-width:809px){.br-phone{display:inline}.br-desk{display:none}}
/* phones: the hero title reads under "User Experience" in the role's style; the real <h1> stays for screen readers, visually hidden */
@media(max-width:809px){.nk-role--phone{display:block}#top .nk-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}}
/* phone: Services and About space their left text from the right texts like Selected Work does (20px gap + the 13px wrap inset), not like the hero (80px) */
@media(max-width:809px){.nk--text{gap:20px}.nk--text .nk-who{padding-top:0}}

/* ---------- generic color section ---------- */
.band{padding:clamp(72px,12vh,150px) var(--gutter)}
.band .kicker{font-size:clamp(.95rem,1.3vw,1.1rem);font-weight:300;margin-bottom:26px}
.band .cols{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(24px,4vw,72px)}
@media(max-width:860px){.band .cols{grid-template-columns:1fr}}
.band .big{font-size:clamp(1.35rem,2.6vw,2.15rem);font-weight:300;line-height:1.3;letter-spacing:0}
.band .big + .big{margin-top:1.2em}
.myshort{background:transparent;border-top:none}
.myshort + .band{border-top:none}

/* outline pill button */
.obtn{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--black);border-radius:999px;padding:16px 30px;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:300;margin-top:44px;transition:background .2s,color .2s}
.obtn:hover{background:var(--black);color:var(--white)}
.obtn .arr{font-family:var(--mono)}

/* ---------- video case studies ----------
   Replica of stateofaidesign.com "Video Case Studies" carousel.
   Card: 460px → 580px on hover; thumb ratio 1.37976 (the 16px accent bar was removed);
   description slides out from beneath the white title block; spring 0.6s, bounce 0. */
.cases{
  --ease-spring:cubic-bezier(.22,1,.36,1);
  --dur:.6s;
  background:transparent;border-top:none;padding:clamp(72px,12vh,150px) 0;letter-spacing:0;
}
@supports (animation-timing-function:linear(0,1)){
  .cases{--ease-spring:linear(0,.0575,.1803,.3208,.4551,.5729,.6711,.7501,.8122,.8601,.8966,.924,.9445,.9596,.9708,.9789,.9848,.9891,.9922,.9944,.996,.9972,.998,.9986,1)}
}
/* head laid out like the opening: small column left, label + headline right, arrows at the end */
.cases-head{display:flex;align-items:flex-start;gap:20px;padding:0 var(--gutter) 80px}
.cases-who{flex:.5 0 0;min-width:0;padding-top:13px}
.cases-main{flex:2 0 0;min-width:0}
.cases-head .cases-arrows{flex:none;margin-left:auto;align-self:flex-start;padding-top:13px}
@media(max-width:809px){.cases-head{flex-wrap:wrap}.cases-who,.cases-main{flex:none;width:100%}.cases-who{padding-top:0}}
.cases-arrows{display:flex;gap:16px;flex-shrink:0}
.cases-arrow{width:32px;height:32px;padding:4px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000;transition:opacity .2s ease}
.cases-arrow svg{width:21px;height:21px;display:block}
.cases-arrow.is-inactive{opacity:.5;cursor:default;pointer-events:none}
.cases-track{position:relative;display:flex;align-items:flex-start;gap:16px;padding:0 var(--gutter);overflow-x:auto;overflow-y:hidden;min-height:calc(.42*(100vw - 2*var(--gutter) - 32px)/1.37976 + 200px);cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.cases-track::-webkit-scrollbar{display:none}
.cases-track.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.case{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:40px;text-decoration:none;color:inherit;transition:flex-grow var(--dur) var(--ease-spring)}
/* cards that take the intro keep their hover spring and add the fade-up */
.case[data-appear]{transition:flex-grow var(--dur) var(--ease-spring),opacity .6s cubic-bezier(.44,0,.56,1),transform .6s cubic-bezier(.44,0,.56,1)}
.case-thumb{position:relative;width:100%;aspect-ratio:1.37976} /* was 1.33028 = image + 16px bar; the bar is gone */
.case-img{position:absolute;top:0;left:0;width:100%;aspect-ratio:1.37976;background:#e9e9e9;overflow:hidden;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:filter var(--dur) var(--ease-spring)}
.case-img img,.case-img video{width:100%;height:100%;object-fit:cover;display:block}
.case-img .glyph{font-size:56px;color:#c9c9c9;line-height:1}
.case-info{display:flex;flex-direction:column;gap:16px;width:100%}
.case-desc-wrap{position:relative;width:100%}
.case-title-block{position:relative;z-index:3;background:var(--page);display:flex;flex-direction:column;gap:8px;padding:0 0 24px}
.case-name{font-size:24px;font-weight:300;line-height:1.2;letter-spacing:0;white-space:pre}
.case-sub{font-size:14px;font-weight:300;line-height:1.4;letter-spacing:0;opacity:.6}   /* no cap, no balancing: the line runs the card width */
.case-desc{position:relative;z-index:1;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease-spring)}
.case-desc>div{align-self:end;min-height:0;padding:0 0 24px}
.case-desc p{font-size:15px;font-weight:300;line-height:1.2;letter-spacing:0}
@media (hover:hover){
  .cases-track:hover .case{flex-grow:.87}
  .cases-track:hover .case:hover{flex-grow:1.26}
  .case:hover .case-desc{grid-template-rows:1fr}
}
.cases-track:has(.is-open) .case{flex-grow:.87}
.cases-track:has(.is-open) .case.is-open{flex-grow:1.26}
.case.is-open .case-desc{grid-template-rows:1fr}
/* partial track (current case removed): same geometry as the homepage —
   thirds at rest, .42 / .29 of the row on hover — never filling the missing card's space */
.cases-track--partial .case{flex:0 0 calc((100% - 32px)/3);transition:flex-basis var(--dur) var(--ease-spring)}
.cases-track--partial:hover .case{flex:0 0 calc((100% - 32px)/3)}
@media (hover:hover){
  .cases-track--partial:has(.case:hover) .case{flex:0 0 calc((100% - 32px)*.29)}
  .cases-track--partial:has(.case:hover) .case:hover{flex:0 0 calc((100% - 32px)*.42)}
}
.cases-track--partial:has(.is-open) .case{flex:0 0 calc((100% - 32px)*.29)}
.cases-track--partial:has(.is-open) .case.is-open{flex:0 0 calc((100% - 32px)*.42)}

@media (max-width:767px){
  /* phone: no carousel — the cards stack as a list, full width, in flow */
  .cases-track{flex-direction:column;align-items:stretch;gap:40px;min-height:0;overflow:visible;cursor:default}
  .case,.case:hover,.case.is-open,
  .cases-track--partial .case,.cases-track--partial:hover .case,.cases-track--partial:has(.case:hover) .case,.cases-track--partial:has(.case:hover) .case:hover,.cases-track--partial:has(.is-open) .case,.cases-track--partial:has(.is-open) .case.is-open{flex:none;width:100%;gap:24px}
  .case-thumb{aspect-ratio:1.37976;height:auto}
  .case-desc-wrap{max-width:none}
  .case-desc{grid-template-rows:1fr}   /* description always open: the card is ready to be tapped */
  .cases-arrows{display:none}
}
}
@media (prefers-reduced-motion:reduce){.case,.case-desc,.case-img{transition:none}}

/* ---------- "what's an enrico" rotator ---------- */
.whatis .name{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:300;letter-spacing:0}
.whatis .rot{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:300;line-height:1.25;min-height:3.2em;margin-top:10px}
.whatis .rot span{opacity:0;animation:fadein .5s forwards}
@keyframes fadein{to{opacity:1}}


/* ---------- footer ---------- */
.ftr{padding:clamp(48px,8vh,80px) var(--gutter) 32px;background:var(--g1)}   /* grey on every page */
.ftr .top{display:flex;flex-direction:column;align-items:flex-start;gap:32px}   /* description, then contact underneath */
.ftr .top .ftr-title,.ftr .top .ftr-text,.ftr .top .ftr-links{margin:0;font-size:20px;font-weight:300;line-height:1.5}
.ftr .bottom .ftr-sign{display:flex;flex-direction:column}   /* signature = the hero's name/role block (.nk-name / .nk-role), bottom-left */
.ftr .top .ftr-title{font-size:32px;font-weight:400;line-height:1.2;color:#858585}   /* salutation = section label (.nk-title) */
.ftr .top .ftr-text{font-size:40px;font-weight:400;line-height:1.2;color:#0f0f0f;margin-top:-28px}   /* letter = section title (.nk-sub), 4px under the label like .nk-title-wrap */
.ftr .top .ftr-links{list-style:none;padding:0}
.ftr .top .ftr-echo{margin:0;font-size:20px;font-weight:400;line-height:1.5;color:#767676}   /* the hero line again, same Buch weight; the 32px column gap spaces it like the links */
.ftr .top .ftr-links a{color:#767676;font-weight:400;text-decoration:none}   /* the question in grey… */
.ftr .top .ftr-link-word{color:var(--black);font-weight:400;text-decoration:underline}   /* …the answer in black, always underlined to read as the click target */
.ftr .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:64px;font-size:.8rem;font-weight:300;color:#444}
.ftr .bottom a{text-decoration:underline}
@media(max-width:809px){.ftr .top .ftr-title,.ftr .top .ftr-text{font-size:22px}}   /* phone: salutation and letter at the sections' 22px, Buch as on desktop */
@media(max-width:720px){.ftr .top{grid-template-columns:1fr}.ftr .top .contatti{text-align:left}}

/* ---------- case study page ---------- */
body.cs-page{background:var(--page)}

/* ---------- case study: feedback card ----------
   Replica of brandonhook.co: 1136px card, 500px tall, quote 44px/110%, avatar 48px, attribution 18px. */
.cs-feedback{padding:clamp(72px,12vh,150px) var(--gutter)}
.cs-feedback .fb{display:flex;align-items:center;gap:16px}
.cs-feedback .fb-static .card{min-height:0;padding:80px 32px}
.cs-feedback .fb-nav{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:none;color:#0f0f0f;cursor:pointer;transition:color .2s ease}
.cs-feedback .fb-nav:hover,.cs-feedback .fb-nav:focus-visible{color:#fe7140}
.cs-feedback .fb-nav svg{width:24px;height:24px;display:block}
.cs-feedback .card{flex:1 1 auto;min-width:0;min-height:500px;padding:64px 32px;border-radius:16px;background:#fafafa;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px}
.cs-feedback .eyebrow{font-family:"Atkinson Hyperlegible Mono",var(--mono);font-size:14px;font-weight:300;line-height:1.4;letter-spacing:0;text-transform:uppercase;color:#858585;margin:0}
.cs-feedback .fb-track{display:grid;width:100%}
.cs-feedback .quote{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px;width:100%}
.cs-feedback .fb-slide{opacity:0;visibility:hidden;transition:opacity .4s ease}
.cs-feedback .fb-slide.is-active{opacity:1;visibility:visible}
.cs-feedback blockquote{width:70%;margin:0;font-size:24px;font-weight:300;line-height:1.3;letter-spacing:-.01em;color:#0f0f0f;text-align:center;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.cs-feedback .who{display:flex;align-items:center;gap:10px}
.cs-feedback .avatar{width:48px;height:48px;border-radius:50%;border:1px solid #666;background:#ddd;overflow:hidden;flex:none}
.cs-feedback .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cs-feedback .name{font-size:18px;font-weight:300;line-height:1.4;letter-spacing:-.01em;color:#6f6f6f;margin:0}
.cs-feedback .fb-progress{display:flex;justify-content:center;gap:8px;margin-top:32px}
.cs-feedback .fb-progress span{position:relative;width:64px;height:3px;border-radius:999px;background:#dcdcdc;overflow:hidden}
.cs-feedback .fb-progress i{position:absolute;inset:0 auto 0 0;width:0;background:#fe7140;border-radius:inherit}
.cs-feedback--dark .card{background:transparent;border-radius:0;padding:0}
.cs-feedback--dark blockquote{color:#fff;font-size:40px;line-height:1.15}
@media(max-width:767px){.cs-feedback--dark blockquote{font-size:26px}}
.cs-feedback--dark .name{color:rgba(255,255,255,.7)}
.cs-feedback--dark .avatar{border-color:rgba(255,255,255,.4);background:#2a2a2a}
/* student feedback on black: the card stays light, chevrons turn white.
   Placed AFTER the base .cs-feedback rules: same specificity, so source order decides. */
.cs-feedback--black{background:#111111}   /* a touch lighter than the hero black; the #1d1d1f card still lifts off it */
/* controls in negative: white on black. Track #6b6b6b = 3.9:1 on black, above the 3:1 WCAG floor for UI parts;
   fill and chevrons white (21:1); focus ring white; hover dims to #a3a3a3 (8.3:1) */
.cs-feedback--black .fb-nav{color:var(--white)}
.cs-feedback--black .fb-nav:hover,.cs-feedback--black .fb-nav:focus-visible{color:#a3a3a3}
.cs-feedback--black .fb-nav:focus-visible{outline-color:var(--white)}
.cs-feedback--black .fb-progress span{background:#6b6b6b}
.cs-feedback--black .fb-progress i{background:var(--white)}
/* the card itself: near-black ground, white text; eyebrow and name in the AA grey (8.3:1 on #1d1d1f) */
.cs-feedback--black .card{background:#1d1d1f}
.cs-feedback--black blockquote{color:var(--white)}
.cs-feedback--black .name{color:#a3a3a3}
.cs-feedback--black .eyebrow{color:#f494bf}   /* the "Good design pays" pink from the homepage statement */
.cs-feedback--black .name{font-size:16px}
/* eyebrow like the section labels ("Impact"): Söhne, 400, 24px, no caps; the quote at 18px */
.cs-feedback--black .eyebrow{font-family:var(--sans);font-size:24px;font-weight:400;line-height:1.2;letter-spacing:0;text-transform:none}
.cs-feedback--black blockquote{font-size:18px;line-height:1.4}
.cs-feedback--black .avatar{border-color:#6b6b6b;background:#2a2a2a}
@media(max-width:767px){.cs-feedback{padding:64px 16px}.cs-feedback .fb{gap:4px}.cs-feedback .fb-nav{width:32px;height:32px}.cs-feedback .card{min-height:0;padding:48px 8px;gap:32px}.cs-feedback blockquote{width:100%;font-size:20px}.cs-feedback .quote{gap:32px}.cs-feedback .fb-progress span{width:40px}}
@media(max-width:767px){.cs-feedback--black .eyebrow{font-size:18px}.cs-feedback--black blockquote{font-size:16px}}
@media(max-width:767px){.cs-feedback .who{flex-direction:column;align-items:center;gap:12px;text-align:center}}   /* phone: avatar centred, name centred beneath it */   /* phone sizes; placed after the generic mobile rule so it wins */

/* ---------- case study: story sections (Role & scope / Problem / Solution) ----------
   Replica of brandonhook.co/now-playing: centred 580px column, label+title 28px/500, body 18px/1.5,
   360px hairline divider, 350px quote column with 32px avatar, section padding 120px. */
.cs-story{display:flex;justify-content:center;width:100%;padding:120px 32px}
.cs-story .inner{width:100%;max-width:580px;display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.cs-story .block{display:flex;flex-direction:column;gap:24px;width:100%}
.cs-story .head{display:flex;flex-direction:column;gap:4px}
.cs-story .label,.cs-story .title{font-size:24px;font-weight:300;line-height:1.2;letter-spacing:0;margin:0}
.cs-story .label,.cs-story .title{font-weight:400}   /* section labels and titles in Buch */
.cs-story .title{font-size:28px}
.cs-story .label{color:#858585;height:29px}
.cs-story .title{color:#0f0f0f}
.cs-story .body{display:flex;flex-direction:column;gap:20px}
.cs-story .text{font-size:16px;font-weight:300;line-height:1.5;letter-spacing:0;color:#666}   /* 4.9:1 on #f0f0f0 too (was #6f6f6f, 4.41) */
.cs-story .text-dark{color:#0f0f0f}   /* a lead line in black, e.g. "Companies that brought a brief" */
.cs-story .text-echo{margin-top:40px}   /* the hero question, echoed: extra space to set it apart */
.cs-story .cs-steps{display:flex;flex-direction:column;gap:20px;margin:0}   /* the Solution's four steps, same rhythm as .body */
.cs-story .cs-step{display:flex;flex-direction:column;gap:4px}
.cs-story .cs-step dt{margin:0;font-size:16px;font-weight:400;line-height:1.5;color:#0f0f0f}   /* "medium" — Buch stands in, Leicht + Buch only */
.cs-story .cs-step dd{margin:0;font-size:16px;font-weight:300;line-height:1.5;color:#666}
.cs-story .divider{width:360px;max-width:100%;height:1px;background:#d9d9d9}
.cs-story .cquote{display:flex;gap:16px;width:500px;max-width:100%}
.cs-story .cquote .q{max-width:350px;display:flex;flex-direction:column;gap:12px}
.cs-story .qtext{font-size:16px;font-weight:300;line-height:1.4;letter-spacing:-.01em;color:#666}
.cs-story .who{display:flex;align-items:center;gap:10px;width:100%}
.cs-story .avatar{width:32px;height:32px;border-radius:50%;border:1px solid #6f6f6f;background:#ddd;overflow:hidden;flex:none}
.cs-story .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cs-story .name{font-size:14px;font-weight:300;line-height:1.4;letter-spacing:-.01em;color:#6f6f6f;margin:0}
.cs-story .contrib{display:flex;flex-direction:column;gap:16px;width:500px;max-width:100%}
.cs-story .contrib .contrib-h{font-family:"Atkinson Hyperlegible Mono",var(--mono);font-size:14px;font-weight:300;line-height:1.4;letter-spacing:0;color:#878787;margin:0}
.cs-story .contrib .contrib-h.plain{font-family:var(--sans);font-size:24px;font-weight:400;line-height:1.2;letter-spacing:0;color:#858585}
.cs-story .contrib p{font-size:16px;font-weight:300;line-height:1.5;color:#666;margin:0}
.cs-story .contrib .links{line-height:1.6;margin:0}
.cs-story .contrib .links a{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:300;line-height:1.4;letter-spacing:0;color:#0f0f0f;transition:color .2s ease,font-size .2s ease,font-weight .2s ease}
.cs-story .contrib .links a svg{width:1em;height:1em;flex:none}
.cs-story .contrib .links a:hover span,.cs-story .contrib .links a:focus-visible span{text-decoration:underline;text-underline-offset:6px}
.cs-story .contrib .links a:hover,.cs-story .contrib .links a:focus-visible{color:var(--blue);font-size:22px;font-weight:300}
@media (prefers-reduced-motion:reduce){.cs-story .contrib .links a{transition:none}}
.cs-story .cs-metrics{margin-top:0;width:100%;gap:24px}
.cs-story .cs-metrics>div{padding-top:0}
.cs-story .cs-metrics .lbl{font-size:14px;color:#858585;margin-bottom:12px}
.cs-story .cs-metrics .num{font-size:clamp(2.5rem,4.5vw,4rem);font-weight:300;color:#0f0f0f;letter-spacing:0}
.cs-story .cs-metrics .desc{font-size:16px;font-weight:300;line-height:1.4;color:#6f6f6f;margin-top:8px;max-width:none}
/* CTA inside a story block: the column gap already spaces it */
.cs-story .obtn{margin-top:0}

/* homepage story blocks: anchored to the left gutter */
.cs-story.hstory{justify-content:flex-start;padding-left:var(--gutter);padding-right:var(--gutter)}
/* homepage: one vertical rhythm for every section after the hero */
.home .cases,.cs-page .cases,.home .cs-story.hstory{padding-top:200px;padding-bottom:200px}
/* palette: white ground, g1 for the banded sections */
.home{--page:var(--white)}
/* case studies on black; text white, secondary text in greys that pass AA on #000002
   (#9a9a9a 7.5:1 at 24px, #a3a3a3 8.3:1 at 14–15px) */
.home .cases,.cs-page .cases{background:#000002;color:var(--white)}
.home .cases{background:#000000}   /* the home runs #000000 from Selected Work down to the portrait */
.home .cases .nk-name,.home .cases .nk-sub,.home .cases .case-name,.home .cases .case-desc p,.cs-page .cases .nk-name,.cs-page .cases .nk-sub,.cs-page .cases .case-name,.cs-page .cases .case-desc p{color:var(--white)}
.home .cases .nk-title,.cs-page .cases .nk-title{color:#9a9a9a}
.home .cases .nk-name,.home .nk--text .nk-name{color:#9a9a9a}   /* "Selected Work" / "Services" mini labels in grey; the hero stays black */
.home .cases #cases-label,.home .nk--text .nk-lead .nk-title{color:#f494bf}   /* "What you get" / "How I can help" in pink; Design/Direction/Education stay grey */
.home .cases #cases-title,.home .nk--text .nk-lead .nk-sub{color:var(--white)}   /* the two headlines in white */
.home .cases .case-sub,.cs-page .cases .case-sub{color:#a3a3a3;opacity:1}
.home .cases .cases-arrow,.cs-page .cases .cases-arrow{color:var(--white)}
.home .cases .cases-arrow.is-inactive,.cs-page .cases .cases-arrow.is-inactive{opacity:.4}
.home .cases .case:focus-visible,.cs-page .cases .case:focus-visible{outline-color:var(--white)}
/* homepage feedback: black card, pink text inside */
.home .cases,.cs-page .cases{--page:#000002}
.home .cases{--page:#000000}   /* the card title mask follows the section */
.home .cs-story .label{color:var(--p1)}
.home .cs-story .title{color:#000002}

/* "My work, in short": near-black ground, pale blue text, centred */
.home .cs-story.myshort{background:#000000;justify-content:flex-start}
.home .cs-story.myshort .label,.home .cs-story.myshort .title,.home .cs-story.myshort .text{color:#f494bf}   /* same pink as the labels */
.home .cs-story.myshort .title .costs{color:#d61f1e}   /* the second line, in red */
.home .cs-story.myshort .title{font-size:128px}
@media(max-width:767px){.home .cs-story.myshort .title{font-size:40px}}
.home .cs-story.myshort{padding-top:40px;padding-bottom:200px}
.home .cs-story.myshort .obtn{border-color:var(--pink);color:var(--pink)}
.home .cs-story.myshort .obtn:hover{background:var(--pink);color:var(--white)}

.home .cases,.cs-page .cases{padding-bottom:120px}
.cs-page .cases{padding-top:120px}   /* case pages: Selected Work at 120/120 */

@media(max-width:767px){.home .cases,.home .cs-story.hstory{padding-top:96px;padding-bottom:96px}}
/* the column spans the content width so the title breaks as little as possible;
   body copy and CTA keep their 580px measure (no 100vw: it includes the scrollbar and overflows) */
.cs-story.hstory .inner{max-width:none}
.cs-story.hstory .body{max-width:580px}
@media(max-width:767px){.cs-story{padding:64px 16px}.cs-story .label,.cs-story .title,.cs-story .contrib .contrib-h.plain{font-size:22px}.cs-story .label{height:27px}}

/* case-study hero — the homepage opening's two-column structure, on black:
   one column: client name (grey, letter reveal) and title.
   The black starts at the very top: the hero slides under the transparent sticky bar, which the "negative" turns white. */
.cs-hero.nk{margin-top:calc(-1 * var(--hdr-h));padding:calc(var(--hdr-h) + 40px) var(--gutter) clamp(48px,8vh,96px);background:#000002;color:var(--white)}
.cs-hero .nk-main{flex:1 1 auto}   /* single column: logo, client name, title */
.cs-hero .nk-name,.cs-hero .nk-sub{color:var(--white)}
.cs-hero .nk-role{color:#a3a3a3}
.cs-hero .nk-title{color:#9a9a9a}
.cs-details{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;padding:28px 0}
.cs-details .lbl,.cs-sub,.cs-metrics .lbl,.cs-quote cite,.cs-bigquote cite{font-size:14px;letter-spacing:0;color:#666}
.cs-details .lbl{margin-bottom:8px}
.cs-details .val{font-size:clamp(1.05rem,1.4vw,1.25rem)}
@media(max-width:860px){.cs-details{grid-template-columns:1fr 1fr}}
.cs-figure{padding:0 var(--gutter)}
.cs-img{position:relative;width:100%;background:#e9e9e9;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px}   /* same radius as the logo tiles and the cards */
.cs-figure[style*="padding:0"] .cs-img{border-radius:0}   /* the full-bleed hero image runs edge to edge: no corners to round */
.cs-img.wide{aspect-ratio:16/9}
.cs-img.card{aspect-ratio:4/3}
.cs-img img,.cs-img video{width:100%;height:100%;object-fit:cover;display:block}
.cs-img .glyph{font-size:56px;color:#c9c9c9;line-height:1}
.cs-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-section{padding:clamp(72px,12vh,150px) var(--gutter)}
.cs-section .cols{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(24px,4vw,72px)}
@media(max-width:860px){.cs-section .cols{grid-template-columns:1fr}}
.cs-section .kicker{font-size:16px;letter-spacing:0}
.cs-section .headline{font-size:40px;font-weight:300;line-height:1.2;letter-spacing:0;text-wrap:balance}
@media(max-width:860px){.cs-section .headline{font-size:clamp(1.6rem,6vw,2.2rem)}}
.cs-section .body{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.45;margin-top:28px;max-width:60ch}
.cs-section .body + .body{margin-top:1em}
.cs-sub{margin-top:48px;margin-bottom:12px}
.cs-list{list-style:none}
.cs-list li{padding:8px 0;font-size:clamp(1.05rem,1.4vw,1.25rem)}
.cs-quote{margin-top:56px}
.cs-quote p{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.25;letter-spacing:0;text-wrap:balance}
.cs-quote cite,.cs-bigquote cite{display:block;margin-top:16px;font-style:normal}
.cs-grid{display:grid;gap:clamp(24px,3vw,48px) clamp(16px,2vw,28px);margin-top:64px}
.cs-grid.two{grid-template-columns:1fr 1fr}
.cs-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.cs-grid.two,.cs-grid.three{grid-template-columns:1fr}}
.cs-card h4{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:300;letter-spacing:0;margin-top:20px}
.cs-card p{font-size:clamp(1rem,1.3vw,1.15rem);color:#444;margin-top:8px;max-width:44ch}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.cs-metrics>div{padding-top:24px}
.cs-metrics .lbl{display:block;margin-bottom:16px}
.cs-metrics .num{font-size:clamp(3.5rem,7vw,7rem);line-height:1;letter-spacing:0}
.cs-metrics .desc{margin-top:12px;font-size:clamp(1rem,1.3vw,1.15rem);color:#444;max-width:22ch}
@media(max-width:860px){.cs-metrics{grid-template-columns:1fr}}
.cs-quoteband{background:var(--black);color:var(--white);padding:clamp(120px,20vh,240px) var(--gutter)}
.cs-bigquote{margin:0 auto;max-width:26ch;text-align:center}
.cs-quoteband .cs-bigquote cite{color:rgba(255,255,255,.6)}
.cs-bigquote p{font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.15;letter-spacing:0;text-wrap:balance}
.cs-more .row{display:grid;grid-template-columns:.8fr 1.4fr auto;gap:24px;align-items:baseline;padding:20px 0;color:inherit}
.cs-more .row .name{font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:0}
.cs-more .row .desc{font-size:clamp(1rem,1.3vw,1.15rem);color:#444}
.cs-more .row .arr{font-family:var(--mono)}
.cs-more .row:hover .name{text-decoration:underline;text-underline-offset:6px}
@media(max-width:860px){.cs-more .row{grid-template-columns:1fr auto}.cs-more .row .desc{grid-column:1/-1}}

}

/* ---------- scroll-fill text (tresmarescapital.com "title --fill"):
   split into words and chars; each char fades .05 → 1, linear, stagger .02 / duration .2,
   scrubbed between "top 90%" and "bottom 60%" of the viewport. JS in cases.js. ---------- */
[data-fill] .word{white-space:nowrap}
[data-fill].is-split .char{opacity:.05;will-change:opacity}

/* ---------- password gate (client-side deterrent — not real security: the page itself still ships in the HTML) ---------- */
html.gated:not(.unlocked) #main{display:none}
.case-gate{display:none;position:fixed;inset:0;z-index:200;background:var(--white);flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
html.gated:not(.unlocked) .case-gate{display:flex}
html.unlocked .case-gate{display:none}
.case-gate form{display:flex;flex-direction:column;gap:12px;width:280px;max-width:100%}
.case-gate p{margin:0;font-size:16px;font-weight:300;line-height:1.5;color:#666}
.case-gate .case-gate-title{font-size:24px;line-height:1.2;color:var(--black)}   /* the prompt in black, 24px */
.case-gate p a{color:var(--black);font-weight:400;text-decoration:underline}
.case-gate p a:hover,.case-gate p a:focus-visible{color:#767676}
.case-gate input{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #d9d9d9;border-radius:6px;background:var(--white);color:var(--black)}
.case-gate input:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.case-gate button{font:inherit;font-size:16px;font-weight:400;padding:12px 14px;border:1px solid var(--black);border-radius:6px;background:var(--black);color:var(--white);cursor:pointer}
.case-gate button:hover{background:#333}
.case-gate .case-gate-error{color:#c0392b;font-size:14px;min-height:20px}
.case-gate .case-gate-back{position:absolute;top:22px;right:120px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--black);text-decoration:none}   /* the X: centred on the bar's Contact line (20px + 44px/2 = 42px), 120px in from the right */
.case-gate .case-gate-back svg{display:block}
.case-gate .case-gate-back:hover,.case-gate .case-gate-back:focus-visible{color:#767676}
@media(max-width:809px){.case-gate .case-gate-back{top:18px;right:16px}}   /* phone bar padding is 16px */