/* Sarah Haas portfolio — design system
   Approved direction: warm butter background, Newsreader serif headlines,
   Public Sans body/UI type, teal accent used for labels/links/emphasis,
   editorial hairline-separated lists, no card-grid boxes on list pages.
   Literal values matched to the approved design-direction spec + reference. */

/* ============ Design tokens ============ */
:root{
  --bg:#f2ede4;
  --ink:#181818;
  --body:#3a3630;
  --muted:#5a5650;
  --faint:#78736b;
  --faint-2:#a89e8f;
  --teal:#0a6b74;
  --teal-hover:#0a5f67;
  --tint-bg:#eaf3f3;
  --tint-border:#d3e6e6;
  --tint-ink:#2c4444;
  --tint-muted:#4d6b6b;
  --hairline:rgba(0,0,0,.08);
  --hairline-strong:rgba(0,0,0,.1);
  --card-border:rgba(0,0,0,.12);
  --dark-fill:#1a2a2a;
  --max:1080px;
  --max-narrow:680px;
  --max-case:860px;
  --radius:8px;
  --radius-sm:6px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ============ Base / reset ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);font-size:14px;line-height:1.6;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-hover)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
p{margin:0 0 1rem;color:var(--body);line-height:1.6}
.eyebrow{margin:0 0 12px;color:var(--teal);text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:11px}
.section{max-width:var(--max);margin:0 auto;padding:36px 32px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============ Skip link ============ */
.skip-link{position:absolute;left:-999px;top:0;background:var(--teal);color:#fff;padding:.75rem 1rem;z-index:100}
.skip-link:focus{left:1rem;top:1rem}

/* ============ Header & navigation ============ */
.site-header{position:sticky;top:0;z-index:40;background:var(--bg);height:52px;display:flex;align-items:center;border-bottom:1px solid var(--hairline);transition:box-shadow .15s ease}
.site-header.is-scrolled{box-shadow:0 1px 8px rgba(0,0,0,.06)}
.header-inner{max-width:var(--max);margin:0 auto;padding:0 32px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink)}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-size:12.5px;font-weight:600;color:var(--body);padding-bottom:3px;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--teal)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--teal)}

/* ============ Buttons & links ============ */
.btn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(0,0,0,.16);border-radius:var(--radius-sm);padding:11px 20px;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:13px}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--dark-fill);border-color:var(--dark-fill);color:#fff}
.btn.primary:hover{background:#0f1919;color:#fff}
.mini-link{width:fit-content;color:var(--teal);font-weight:700;font-size:13px}
.mini-link:hover{color:var(--teal-hover)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.button-row{display:flex;flex-wrap:wrap;gap:12px}

/* ============ Password gate ============ */
.password-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.2rem;background:rgba(24,24,24,.5);backdrop-filter:blur(6px)}
.password-overlay[hidden]{display:none!important}
.password-card{width:min(440px,100%);background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);padding:28px}
.password-card h2{margin:.3rem 0 .8rem;font-size:1.6rem;line-height:1.15}
.password-card label{display:block;margin:1rem 0 .4rem;font-family:var(--sans);font-weight:600;font-size:13.5px}
.password-card input{width:100%;border:1px solid rgba(0,0,0,.16);border-radius:var(--radius-sm);padding:.75rem;font:inherit;background:#fff;color:var(--ink)}
.password-error{min-height:1.4rem;color:#a3392b;font-size:13px;margin:.5rem 0}
.portfolio-locked .site-header,
.portfolio-locked main,
.portfolio-locked .footer{filter:blur(10px);pointer-events:none;user-select:none}

/* ============ Home: hero ============ */
.final-hero{max-width:820px;margin:0 auto;padding:56px 32px 40px;text-align:left}
.final-hero h1{max-width:700px;margin:0 0 16px;font-size:clamp(2rem,4.6vw,2.75rem);line-height:1.1;letter-spacing:-.015em}
.final-hero .hero-sub{max-width:620px;color:var(--muted);font-size:15.5px;line-height:1.55}

/* ============ Home: pull-quote band ============ */
.confusion-band{background:var(--tint-bg);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.confusion-inner{max-width:var(--max);margin:0 auto;padding:26px 32px;display:grid;grid-template-columns:1fr 1px 1fr;align-items:center}
.confusion-left{padding-right:32px}
.confusion-lead{margin:0;font-family:var(--serif);font-style:italic;font-weight:600;font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.confusion-aside{margin-top:4px}
.confusion-aside span{font-size:13px;color:#5a6f6f}
.confusion-divider{width:1px;height:100%;background:var(--hairline);margin:0 32px}
.confusion-right{padding-left:32px;display:flex;align-items:center}
.confusion-right strong{font-size:18px;font-weight:700;color:var(--teal);font-style:italic;font-family:var(--serif);line-height:1.3}
@media (max-width:760px){
  .confusion-inner{grid-template-columns:1fr}
  .confusion-divider{display:none}
  .confusion-left{padding-right:0}
  .confusion-right{padding-left:0;margin-top:10px}
}

/* ============ Editorial-list rows (Home featured + Portfolio list) ============ */
.selected-work{background:var(--bg);color:var(--ink)}
.selected-inner{max-width:var(--max);margin:0 auto;padding:44px 32px 8px;text-align:left}
.selected-work h2{color:var(--ink);font-size:26px;font-weight:600;margin:0 0 6px}
.selected-lede{max-width:640px;margin:0 0 26px;color:var(--faint);font-size:13.5px}
.selected-grid.editorial{display:flex;flex-direction:column}
.selected-grid.editorial .selected-card{display:flex;align-items:center;gap:20px;padding:18px 4px;border-top:1px solid var(--hairline-strong)}
.selected-grid.editorial .selected-card:last-child{border-bottom:1px solid var(--hairline-strong)}
.selected-card .card-kicker{flex:0 0 150px;margin:0;color:var(--teal);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:700;line-height:1.4}
.selected-card-body{flex:1}
.selected-grid.editorial .card-headline{color:var(--ink);font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.25;margin:0 0 4px}
.selected-grid.editorial .card-summary{margin:0;color:var(--faint);font-size:12.5px;line-height:1.5}
.selected-grid.editorial .selected-button{flex:0 0 auto;color:var(--teal);font-weight:400;font-size:18px;border:0;padding:0;background:none}
.card-thumb{flex:0 0 130px;width:130px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--card-border);border-radius:var(--radius-sm);display:block}
.center-cta{text-align:center;margin:28px 0 44px}
.center-cta .selected-button.large{padding:10px 20px}

/* ============ Home: what I bring strip ============ */
.bring-strip{padding:8px 0 44px;border-top:0}
.bring-strip h2{font-size:22px;font-weight:600;text-align:center;margin:0 0 24px}
.bring-strip-grid.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}
.bring-strip-grid article{border:0;padding:0}
.bring-strip-grid h3{font-family:var(--sans);letter-spacing:0;font-size:13.5px;font-weight:700;line-height:1.3;margin:0 0 5px;color:var(--ink)}
.bring-strip-grid p{margin:0;color:var(--faint);font-size:12.5px;line-height:1.5}

/* ============ Home: about preview ============ */
.about-preview.text-only{display:block;max-width:820px;border-top:1px solid var(--hairline)}
.about-preview.text-only .about-copy{max-width:640px}
.about-copy p{color:var(--muted);max-width:640px}
.about-copy p:nth-of-type(1){font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.about-copy p:nth-of-type(2){font-size:14px;line-height:1.55}

/* ============ Generic page hero (placeholder pages) ============ */
.page-hero{max-width:var(--max);margin:0 auto;padding:44px 32px 20px}
.page-hero h1{max-width:640px;font-size:clamp(1.8rem,4vw,2.25rem);line-height:1.14;margin:.5rem 0 14px}
.lede{max-width:560px;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ============ Contact page ============ */
.contact-hero{max-width:var(--max-narrow);margin:0 auto;padding:56px 32px 28px}
.contact-hero h1{font-size:38px;line-height:1.12;margin:0 0 14px}
.contact-hero .lede{max-width:560px}
.contact-block{max-width:var(--max-narrow);margin:0 auto;padding:28px 32px;border-top:1px solid var(--hairline)}
.contact-block h2{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 12px;color:var(--ink)}
.contact-block>p{font-size:13.5px;line-height:1.55;color:var(--body);margin:0 0 16px}
.contact-list{background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden}
.contact-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hairline)}
.contact-row:last-child{border-bottom:0}
.contact-row .label{display:block;margin:0 0 2px;color:var(--faint-2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:11px}
.contact-row .value{font-size:14px;font-weight:600;color:var(--ink)}
.contact-row .arrow{color:var(--teal);font-weight:700}
@media (max-width:640px){
  .contact-row{flex-wrap:wrap;gap:.35rem}
}

/* ============ About page ============ */
.about-page-intro{padding:44px 32px 8px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:start}
.about-page-intro .about-portrait{width:220px}
.about-page-intro .about-portrait img{width:220px;height:220px;object-fit:cover;object-position:center 22%;border-radius:10px}
.about-page-intro .caption{color:var(--faint);margin:10px 0 0;text-align:left;font-size:11.5px;line-height:1.5}
.about-page-intro .eyebrow{margin-bottom:10px}
.about-name{margin:0 0 14px;font-size:32px;line-height:1.14}
.about-page-intro .about-copy{max-width:640px}
.about-page-intro .about-copy p{max-width:600px;font-size:13.5px;line-height:1.6;margin:0 0 10px}
.about-page-intro .about-copy h2{margin:0 0 8px;font-size:17px;line-height:1.2}

.approach-section{border-top:1px solid var(--hairline);margin-top:36px}
.approach-section>h2,.beyond-work>h2,.about-closing>h2{margin:0 0 12px;font-size:26px;line-height:1.2}
.approach-intro{max-width:640px;margin-top:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.approach-line{color:var(--ink);font-family:var(--serif);font-style:italic;font-weight:600;font-size:18px;line-height:1.3;margin:0 0 12px}
.refined-approach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin-top:0}
.refined-approach article{border:0;padding:0}
.refined-approach article:last-child{grid-column:1/-1;max-width:600px}
.refined-approach span{color:var(--faint-2);font-weight:700;font-size:11px}
.refined-approach h3{margin:0;font-size:16px;line-height:1.2}
.refined-approach article>div{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}
.refined-approach p{color:var(--muted);font-size:12.5px;line-height:1.55;max-width:56ch}

.beyond-work{border-top:1px solid var(--hairline)}
.beyond-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:0;margin-bottom:22px}
.beyond-grid>div{border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:14px;background:#fff}
.beyond-grid p,.why-share p{color:var(--body);font-size:12.5px;line-height:1.55}
.why-share{max-width:none;margin-top:0;padding-top:0;border-top:0}
.why-share h3{margin:0 0 8px;font-size:17px}
.why-share strong{color:var(--ink)}

.about-closing{border-top:1px solid var(--hairline);text-align:center}
.about-closing h2{max-width:600px;margin:0 auto 18px;font-size:22px}
.about-closing .button-row{justify-content:center}

/* ============ Portfolio overview page ============ */
.portfolio-overview-hero{max-width:var(--max);margin:0 auto;padding:44px 32px 20px}
.portfolio-overview-hero h1{max-width:760px;font-size:clamp(1.9rem,4.2vw,2.25rem);line-height:1.14;margin-bottom:14px}
.portfolio-overview-hero .lede{max-width:680px;font-size:14.5px}
.portfolio-featured{max-width:var(--max);margin:0 auto;padding:24px 32px 8px}
.portfolio-featured>.eyebrow{letter-spacing:.08em;font-size:10.5px}
.portfolio-featured>h2{margin:0 0 20px;font-size:22px;line-height:1.2}
.capability-grid{display:flex;flex-direction:column}
.capability-card{display:flex;align-items:center;gap:20px;padding:18px 4px;border-top:1px solid var(--hairline-strong);background:none}
.capability-card:last-child{border-bottom:1px solid var(--hairline-strong)}
.capability-label{flex:0 0 150px;margin:0;color:var(--teal);font-family:var(--sans);letter-spacing:0;font-size:10.5px;font-weight:700}
.capability-body{flex:1}
.capability-card h3{max-width:640px;margin:0 0 4px;font-size:18px;line-height:1.25}
.capability-card p:not(.capability-label){max-width:70ch;margin:0;color:var(--faint);font-size:12.5px;line-height:1.5}
.capability-card .mini-link{margin-top:0}
.additional-work-note{margin:16px 0 40px;color:var(--faint-2);font-size:12.5px}
.portfolio-closing{border-top:1px solid var(--hairline)}
.portfolio-closing h2{max-width:560px;margin:0 0 16px;font-size:22px}
.portfolio-locked .site-header,.portfolio-locked main,.portfolio-locked .footer{filter:blur(10px);pointer-events:none;user-select:none}

/* Reserved for the "Additional selected work" rows (currently commented out in work.html) */
.muted-block{background:var(--tint-bg);max-width:none;padding-left:max(32px,calc((100vw - var(--max))/2 + 32px));padding-right:max(32px,calc((100vw - var(--max))/2 + 32px))}

/* ============ Case-study template ============ */
.case-v2{background:var(--bg);color:var(--body)}
.cs-main{background:var(--bg);position:relative}
.cs-shell{width:min(var(--max-case),calc(100% - 64px));margin:0 auto}
.cs-hero{padding:40px 0 24px}
.cs-hero .cs-shell{width:min(var(--max-case),calc(100% - 64px))}
.cs-capability{margin:0;color:var(--teal);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.cs-section-label,.cs-mini-label,.cs-beat-number{margin:0;color:var(--teal);font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.cs-hero h1{max-width:640px;margin:14px 0 14px;font-family:var(--serif);font-size:clamp(1.7rem,4.2vw,2.125rem);font-weight:600;line-height:1.14;letter-spacing:-.01em}
.cs-overview{max-width:600px;margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* Problem -> Outcome opener */
.cs-opener{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;border-top:1px solid var(--hairline);padding-top:16px;margin-top:18px;font-size:13px;line-height:1.5}
.cs-opener b{color:var(--ink);font-weight:700}
.cs-opener span{color:var(--body)}
.cs-opener .cs-arrow{color:var(--teal);font-weight:700}

.cs-section{padding:8px 0 32px}
.cs-section.cs-soft{background:none}
.cs-section.cs-impact{background:var(--tint-bg);border-top:1px solid var(--tint-border);border-bottom:1px solid var(--tint-border);margin-top:16px;padding:32px 0}
.cs-section.cs-impact .cs-shell{padding:0}
.cs-section.cs-impact .cs-section-label{color:var(--teal)}
.cs-section.cs-impact h2,.cs-section.cs-impact p{color:var(--tint-ink)}
.cs-section h2{max-width:700px;margin:8px 0 14px;font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.005em}
.cs-prose{max-width:75ch}
.cs-prose p,.cs-prose-narrow p{font-size:14px;line-height:1.6}
.cs-prose p{color:var(--body)}
.cs-prose p+p{margin-top:12px}
.cs-featured{padding-top:8px}
.cs-featured h2{margin-bottom:14px;font-size:19px}
.cs-figure{margin:0;background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);padding:18px;overflow:hidden}
.cs-figure img{width:100%;height:auto;object-fit:contain}
.cs-figure figcaption,.cs-caption{margin:8px 1px 0;color:var(--faint-2);font-size:12px;line-height:1.5}
.cs-figure-compact{align-self:start;max-width:420px}
.cs-figure-wide{margin-top:1.4rem}

/* Case-study image lightbox — click/tap a trigger to enlarge. */
body.lightbox-open{overflow:hidden}
.cs-lightbox-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(24,24,24,.82)}
.cs-lightbox-overlay[hidden]{display:none}
.cs-lightbox-dialog{position:relative;max-width:min(92vw,1100px);max-height:92vh}
.cs-lightbox-dialog img{display:block;max-width:100%;max-height:92vh;width:auto;height:auto;border-radius:var(--radius-sm);object-fit:contain}
.cs-lightbox-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.cs-lightbox-close:hover{background:var(--tint-bg)}
.cs-lightbox-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Bordered image "frame" — hugs the image only, so the caption can sit
   outside/below it instead of inside a padded figure footer. Used as a
   plain div for static figures and as a <button> for lightbox triggers. */
.cs-figure-frame{background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);padding:16px;overflow:hidden}
.cs-figure-frame img{width:100%;height:auto;display:block;object-fit:contain}
button.cs-figure-frame{display:block;width:100%;margin:0;font:inherit;text-align:left;cursor:zoom-in}
button.cs-figure-frame:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cs-figure-caption{margin:8px 1px 0;color:var(--faint-2);font-size:12px;line-height:1.5}

/* Featured-artifact visual sized to read as the hero evidence, not a
   thumbnail — left-aligned, not full shell width. margin:0 overrides the
   browser's default figure margin (1em 40px), which would otherwise inset
   it and throw off the intended percentage width. */
.cs-featured-visual{max-width:78%;margin:0}

/* A supporting visual placed below its step's copy, offset toward the
   right rather than centered or full width. */
.cs-step-visual-right{max-width:62%;margin:1.8rem 0 0 auto}

/* Inline text-link variant of a lightbox trigger, for use inside a caption. */
.cs-lightbox-link{background:none;border:0;padding:0;margin:0;color:var(--teal);font:inherit;font-size:inherit;cursor:pointer;text-decoration:none}
.cs-lightbox-link:hover{color:var(--teal-hover);text-decoration:underline}
.cs-lightbox-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Clipped preview of a tall artifact — shows only the top portion, with a
   fade hinting there is more to see in the lightbox. */
.cs-preview-crop{position:relative;display:block;max-height:280px;overflow:hidden;border-radius:var(--radius-sm)}
.cs-preview-crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.cs-preview-crop img{width:100%;height:auto;display:block}

/* Problem/Outcome — restrained two-column summary, no heavy card boxes.
   Shared across all six case studies. */
.cs-opener-cards{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px;padding-top:18px;border-top:1px solid var(--hairline-strong)}
.cs-opener-card{padding:0}
.cs-opener-card+.cs-opener-card{border-left:1px solid var(--hairline-strong);padding-left:32px}
.cs-opener-card .cs-mini-label{margin-bottom:6px}
.cs-opener-card p:last-child{margin:0;color:var(--ink);font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.35;letter-spacing:-.005em}

/* Steps 01-02 beside a clipped preview (desktop), stacked steps-then-preview
   (mobile) — narrowly scoped to this page's Approach section. */
.cs-flip-grid{display:grid;grid-template-columns:0.42fr 0.58fr;gap:28px;align-items:start;margin-top:26px}
.cs-flip-preview{order:-1}
.cs-flip-steps .cs-beat:last-child{margin-bottom:0;padding-bottom:0}
/* Wider modifier for a preview that needs more presence than the
   default 42% (Tabs Step 02). Scoped to .balanced only, so the shared
   .cs-flip-preview used by String Authoring is untouched — this also
   resets the browser's default figure margin (1em 40px), which was
   silently shrinking the preview below its intended grid-column width. */
.cs-flip-grid.balanced{grid-template-columns:0.46fr 0.54fr}
.cs-flip-grid.balanced .cs-flip-preview{margin:0}

/* "Why the diff mattered" copy beside the review-diff artifact (desktop),
   stacked copy-then-image (mobile). */
.cs-diff-grid{display:grid;grid-template-columns:0.35fr 0.65fr;gap:28px;align-items:start;margin-top:26px}

/* Compact pilot-evidence cards inside the unified Impact section. */
.cs-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.cs-proof-card{background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);padding:18px}
.cs-proof-card strong{display:block;font-family:var(--serif);color:var(--teal);font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.cs-proof-card span{display:block;margin-top:5px;color:var(--tint-muted);font-size:12px;line-height:1.4}

.cs-metrics{display:flex;margin-top:10px;background:var(--tint-bg);border:1px solid var(--tint-border);border-radius:var(--radius);padding:14px 16px}
.cs-metrics article{flex:1;padding:0 14px;border-right:1px solid var(--tint-border)}
.cs-metrics article:first-child{padding-left:0}
.cs-metrics article:last-child{border-right:0;padding-right:0}
.cs-metrics strong{display:block;color:var(--teal);font-family:var(--serif);font-size:26px;font-weight:600;line-height:1;letter-spacing:-.01em}
.cs-metrics span{display:block;margin-top:2px;font-weight:400;line-height:1.3;color:var(--tint-muted);font-size:11.5px}
.cs-metrics small{display:block;margin-top:4px;color:var(--tint-muted);font-size:10px;line-height:1.4}

.cs-involvement{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.cs-involvement article{border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:14px}
.cs-involvement p:last-child{margin:6px 0 0;color:var(--body);font-size:12.5px;line-height:1.5}

.cs-approach{padding-top:8px}
.cs-approach>.cs-shell>h2{margin-bottom:20px}
.cs-beat{padding:0 0 26px;margin-bottom:26px;border-bottom:0}
.cs-beat:last-child{padding-bottom:0;margin-bottom:0}
.cs-beat-paired{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.cs-beat-copy{max-width:640px}
.cs-beat-copy h3{margin:0 0 0;font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.2;letter-spacing:0}
.cs-beat-copy p{color:var(--body);font-size:13.5px;line-height:1.55}
.cs-beat-number{font-size:11px}
.cs-flow{display:flex;align-items:center;gap:10px;margin-top:0;border:1px solid var(--card-border);border-radius:var(--radius);background:#fff;padding:14px;flex-wrap:wrap}
.cs-flow span{flex:1;min-width:110px;display:grid;place-items:center;min-height:auto;padding:10px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:none;text-align:center;font-weight:600;font-size:12px;line-height:1.3}
.cs-flow b{align-self:center;color:var(--teal);font-size:1rem;flex:0 0 auto}
.cs-flow-five{font-size:11px}
.cs-question-map{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:14px;border:1px solid var(--card-border);border-radius:var(--radius);background:#fff}
.cs-question-map span,.cs-question-map strong{display:grid;place-items:center;min-height:60px;padding:10px;border:0;border-radius:100px;background:var(--tint-bg);color:var(--teal);text-align:center;font-size:11.5px;line-height:1.3}
.cs-question-map strong{grid-column:2;grid-row:1/span 2;background:var(--teal);color:#fff;border-radius:var(--radius-sm)}
.cs-honesty-note{margin-top:1.4rem;padding:12px 14px;border:1px solid #e8c9a0;background:#fbf1e0;color:#7a5a1e;font-size:13px;line-height:1.55;border-radius:var(--radius-sm)}

/* Bulleted lists inside case-study prose (impact summaries, contribution lists) */
.cs-list{margin:.9rem 0 0;padding:0 0 0 1.1rem;color:var(--body);font-size:14px;line-height:1.6}
.cs-list li{margin-bottom:.5rem}
.cs-list li:last-child{margin-bottom:0}
.cs-prose-narrow .cs-list,.cs-beat-copy .cs-list{font-size:13.5px}

/* Needs / jobs-to-be-done mini-grid (3+ items, label + short description) */
.cs-need-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.cs-need-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-need-grid article{border-top:2px solid var(--teal);padding-top:10px}
.cs-need-grid h4{margin:0 0 4px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.cs-need-grid p{margin:0;color:var(--faint);font-size:12.5px;line-height:1.5}

/* Need -> capability mapping rows */
.cs-capability-map{border:1px solid var(--card-border);border-radius:var(--radius);background:#fff;margin-top:14px;overflow:hidden}
.cs-capability-map .row{display:flex;gap:16px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.cs-capability-map .row:last-child{border-bottom:0}
.cs-capability-map .need{flex:0 0 150px;font-weight:700;font-size:12.5px;color:var(--teal)}
.cs-capability-map .products{flex:1;font-size:12.5px;color:var(--body)}

/* Product spotlight — an embedded case study within a case study */
.cs-spotlight{margin-top:1.8rem;border:1px solid var(--card-border);border-radius:var(--radius);background:#fff;padding:20px}
.cs-spotlight-label{margin:0 0 10px;color:var(--teal);font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.cs-spotlight h3{margin:0 0 10px;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25}
.cs-spotlight p{color:var(--body);font-size:13.5px;line-height:1.6;margin:0 0 10px}
.cs-spotlight h4{margin:1.1rem 0 6px;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.cs-spotlight .cs-list{margin-top:0}

/* Ordered step sequence used for a text-described (non-image) featured artifact */
.cs-step-list{margin:0;padding:0 0 0 1.2rem;color:var(--body);font-size:13.5px;line-height:1.65}
.cs-step-list li{margin-bottom:.4rem}
.cs-reflection h2{max-width:700px}
.cs-reflection>div>p:not(.cs-section-label){max-width:640px;color:var(--body);font-size:13.5px;line-height:1.6}
.cs-reflection blockquote{max-width:700px;margin:16px 0 0;padding-left:16px;border-left:2px solid var(--teal);font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--ink)}
.cs-reflection blockquote p{margin:0}
.cs-reflection blockquote cite{display:block;margin-top:8px;font-style:normal;font-family:var(--sans);font-size:12px;color:var(--faint)}
.cs-case-nav{width:min(var(--max-case),calc(100% - 64px));margin:0 auto;padding:16px 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--hairline);font-size:12.5px;font-weight:600}
.cs-case-nav a{color:var(--teal)}

/* Sticky left-rail table of contents (case studies only) */
.cs-toc{position:fixed;top:140px;left:16px;width:100px;display:flex;flex-direction:column}
.cs-toc .cs-toc-label{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--faint-2);margin-bottom:10px;text-transform:uppercase}
.cs-toc-links{display:flex;flex-direction:column;gap:9px}
.cs-toc a{font-size:12px;font-weight:500;color:#918b81}
.cs-toc a.is-active{color:var(--teal);font-weight:700}
@media (max-width:1179px){.cs-toc{display:none}}

/* ============ Legacy/placeholder pages (Device Help, Advertiser Education) ============ */
.case-layout{max-width:var(--max);margin:0 auto;padding:0 32px clamp(2.2rem,4vw,3.4rem)}
.case-section{display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem;padding:clamp(1.6rem,3vw,2.2rem) 0;border-top:1px solid var(--hairline);align-items:start}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-bottom:.8rem}
.stat{border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:1rem;text-align:center}
.stat strong{display:block;font-family:var(--serif);color:var(--teal);font-size:1.6rem}
.stat span{color:var(--muted);font-size:.8rem}
.placeholder-shot{border:1px dashed var(--hairline-strong);background:#fff;min-height:160px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.82rem;border-radius:var(--radius)}

/* ============ Footer ============ */
.footer{max-width:var(--max);margin:0 auto;padding:18px 32px;color:#86807a;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hairline);gap:2rem;font-size:12px}
.footer strong{color:var(--ink);font-size:12.5px;font-weight:700}

/* ============ Responsive ============ */
@media (max-width:900px){
  .bring-strip-grid.six{grid-template-columns:1fr}
  .capability-card,.capability-label{display:block}
  .capability-card{padding:1.2rem 0}
  .capability-label{margin-bottom:.5rem}
  .selected-grid.editorial .selected-card{flex-direction:column;align-items:flex-start;gap:.5rem}
  .selected-grid.editorial .selected-button{align-self:flex-start}
  .selected-card .card-kicker{flex:0 0 auto}
  .card-thumb{width:100%;max-width:320px}
  .cs-involvement{grid-template-columns:1fr}
  .cs-beat-paired{grid-template-columns:1fr}
  .cs-figure-compact{max-width:none}
  .cs-opener-cards{grid-template-columns:1fr;gap:16px}
  .cs-opener-card+.cs-opener-card{border-left:0;padding-left:0;border-top:1px solid var(--hairline-strong);padding-top:16px}
  .cs-flip-grid{grid-template-columns:1fr}
  .cs-flip-grid.balanced{grid-template-columns:1fr}
  .cs-flip-preview{order:0}
  .cs-diff-grid{grid-template-columns:1fr}
  .cs-proof-grid{grid-template-columns:1fr}
  .cs-featured-visual{max-width:100%}
  .cs-step-visual-right{max-width:100%;margin:1.8rem 0 0}
  .cs-flow{flex-direction:column;align-items:stretch}
  .cs-flow b{transform:rotate(90deg);align-self:center}
  .cs-question-map{grid-template-columns:1fr 1fr}
  .cs-question-map strong{grid-column:1/-1;grid-row:auto;order:-1}
  .cs-need-grid,.cs-need-grid.two-col{grid-template-columns:1fr}
  .cs-capability-map .row{flex-direction:column;gap:.25rem}
  .cs-capability-map .need{flex:0 0 auto}
  .about-page-intro{grid-template-columns:1fr}
  .refined-approach{grid-template-columns:1fr}
  .beyond-grid{grid-template-columns:1fr}
  .case-section{grid-template-columns:1fr}
  .cs-metrics{flex-direction:column;gap:.75rem}
  .cs-metrics article{border-right:0;padding:0!important;border-bottom:1px solid var(--tint-border);padding-bottom:.75rem!important}
  .cs-metrics article:last-child{border-bottom:0}
}
@media (max-width:640px){
  .header-inner{padding:0 20px}
  .final-hero,.page-hero,.section,.confusion-inner,.selected-inner,.contact-hero,.contact-block,.portfolio-overview-hero,.portfolio-featured,.about-page-intro{padding-left:20px;padding-right:20px}
  .footer{padding-left:20px;padding-right:20px;flex-direction:column;gap:.4rem;align-items:flex-start}
  .cs-shell,.cs-hero .cs-shell,.cs-case-nav{width:min(100% - 40px,var(--max-case))}
  .cs-case-nav{flex-direction:column;gap:.5rem}
  .stat-grid{grid-template-columns:1fr}
  .cs-lightbox-overlay{padding:16px}
  .cs-lightbox-close{top:-10px;right:-10px}
}

/* ============ Print ============ */
@media print{
  .site-header,.footer,.password-overlay,.cs-case-nav,.cs-toc,.hero-actions,.selected-button,.mini-link,.btn{display:none!important}
  body{background:#fff!important;color:#000!important}
}

/* ============================================================
   VISUAL DIRECTION EXPERIMENT — scoped to body.redesign-preview
   Restrained editorial system: near-white canvas, crisp dark type,
   wider gutters, hairlines over boxes. Everything below is scoped
   to this class so the other pages (and the other five locked
   case studies) render exactly as before — no shared/global rule
   above this point was modified.
   ============================================================ */
body.redesign-preview{
  --bg:#fefefc;
  --tint-bg:#fefefc;
  --ink:#171c19;
  --body:#2a2f2c;
  --muted:#4a504c;
  --faint:#63685f;
  --faint-2:#7a7f76;
  --hairline:rgba(0,0,0,.08);
  --hairline-strong:rgba(0,0,0,.14);
  --card-border:rgba(0,0,0,.12);
  --max:1200px;
  --max-case:960px;
}
/* Second refinement pass: push the canvas materially closer to true
   white and darken every text tier for higher contrast (round 1 still
   read as visibly warm/cream). No new hues introduced — --teal is
   untouched, so green labels/links keep the same accent, just against
   a whiter ground. */

/* -- Header / footer -- */
body.redesign-preview .site-header{height:68px}
body.redesign-preview .header-inner{max-width:1200px;padding:0 40px}
body.redesign-preview .brand{font-size:17px;white-space:nowrap;flex:0 0 auto}
body.redesign-preview .nav{gap:28px}
body.redesign-preview .nav a{font-size:13px;font-weight:500;white-space:nowrap}
body.redesign-preview .footer{max-width:1200px;padding:26px 40px}
@media (max-width:640px){
  /* Round 3 fix: "Sarah Haas" was wrapping to two lines at 390px because
     the nav's combined width left too little room; nav gets tighter
     here rather than letting the brand shrink or wrap. */
  body.redesign-preview .header-inner{padding:0 16px}
  body.redesign-preview .footer{padding:20px}
  body.redesign-preview .brand{font-size:15px}
  body.redesign-preview .nav{gap:12px}
  body.redesign-preview .nav a{font-size:11.5px}
}

/* -- Long-form reading paragraphs: 17px per spec -- */
body.redesign-preview .cs-prose p,
body.redesign-preview .cs-beat-copy p,
body.redesign-preview .contact-block>p,
body.redesign-preview .lede{font-size:17px;line-height:1.6}
body.redesign-preview .cs-prose{max-width:720px}
body.redesign-preview .cs-beat-copy{max-width:720px}

/* .about-copy is reused on both Home (about-preview) and the About page
   itself, and both already carry an existing, unscoped
   `.about-copy p:nth-of-type(1)/(2)` rule that (on the live, unmodified
   site) collides with `.eyebrow`'s own styling by specificity, so the
   word "About" above each of these sections currently renders in dark
   ink instead of the small teal eyebrow style used everywhere else on
   the site — a pre-existing bug, not something this pass introduced.
   Explicitly restating the eyebrow's intended style here (higher
   specificity than that legacy rule) fixes it consistently in both
   places as part of unifying this paragraph scale; flagged in the
   chat report since it's a real, if small, visual change. */
body.redesign-preview .about-copy .eyebrow{font-size:11px;color:var(--teal);font-weight:700;text-transform:uppercase}
/* Round 3 finding: the legacy nth-of-type(1)/(2) rule this comment
   describes doesn't just affect the eyebrow — nth-of-type resolves per
   actual parent, so it also matches the *first* paragraph inside any
   nested wrapper (e.g. .value-row's first paragraph), leaving that one
   paragraph bold with extra margin while its sibling isn't. This rule
   only neutralized color/size before; adding font-weight and margin
   here removes the last of that leftover asymmetry everywhere in
   .about-copy, not just for the eyebrow. */
body.redesign-preview .about-copy p:not(.eyebrow){font-size:17px;line-height:1.6;font-weight:400;max-width:640px;color:var(--muted);margin:0 0 8px}

/* -- Generic two-column hero split (Portfolio, Contact) -- */
body.redesign-preview .hero-split{max-width:1200px;margin:0 auto;padding:48px 40px 36px;display:grid;grid-template-columns:1.1fr 1.3fr;gap:56px;align-items:start}
body.redesign-preview .hero-split-left,body.redesign-preview .hero-split-right{max-width:none}
body.redesign-preview .hero-split h1{max-width:none}
body.redesign-preview .hero-split .lede{max-width:520px}
@media (max-width:760px){
  body.redesign-preview .hero-split{grid-template-columns:1fr;gap:20px;padding:44px 20px 28px}
}

/* -- Home: combined hero (eyebrow/H1/paragraph left, "Confusion is
   expensive" right) -- built by wrapping the two existing sections
   in a new .hero-combo container; neither section's own markup or
   text changed, only their outer grid placement. -- */
body.redesign-preview .hero-combo{max-width:1200px;margin:0 auto;padding:48px 40px 16px;display:grid;grid-template-columns:1.7fr 1fr;gap:64px;align-items:center}
body.redesign-preview .hero-combo .final-hero{max-width:none;margin:0;padding:0}
body.redesign-preview .hero-combo .final-hero h1{max-width:none;margin-bottom:14px}
body.redesign-preview .hero-combo .final-hero .hero-actions{margin-top:22px}
body.redesign-preview .hero-combo .confusion-band{background:none;border:0;padding:2px 0 0 48px;border-left:1px solid var(--hairline-strong)}
body.redesign-preview .hero-combo .confusion-inner{display:block;padding:0;max-width:none;margin:0}
body.redesign-preview .hero-combo .confusion-left{padding-right:0}
body.redesign-preview .hero-combo .confusion-divider{display:none}
body.redesign-preview .hero-combo .confusion-right{padding-left:0;margin-top:16px;display:block}
@media (max-width:820px){
  body.redesign-preview .hero-combo{grid-template-columns:1fr;gap:0;padding:44px 20px 8px}
  body.redesign-preview .hero-combo .confusion-band{border-left:0;border-top:1px solid var(--hairline-strong);padding:28px 0 0;margin-top:28px}
}

/* -- Home: featured case studies — 3x2 light grid, no boxes -- */
body.redesign-preview .selected-inner{max-width:1200px;padding:40px 40px 8px}
/* "View full portfolio" moved from a centered link below the grid up
   into the section header row, beside the heading/lede (same link,
   same href, same text — only its position changed). */
body.redesign-preview .selected-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
body.redesign-preview .selected-header .selected-lede{margin-bottom:0}
body.redesign-preview .selected-header .selected-button.large{flex:0 0 auto;white-space:nowrap}
body.redesign-preview .selected-grid.editorial{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 32px}
body.redesign-preview .selected-grid.editorial .selected-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:20px 0 28px;border:0;border-top:1px solid var(--hairline)}
body.redesign-preview .selected-grid.editorial .selected-card:last-child{border-bottom:0}
body.redesign-preview .card-thumb{order:-1;flex:none;width:100%;margin:0 0 14px}
body.redesign-preview .selected-card .card-kicker{flex:none;margin-bottom:8px}
body.redesign-preview .selected-card-body{flex:none;width:100%}
body.redesign-preview .selected-grid.editorial .card-headline{font-size:17px;margin-bottom:6px}
body.redesign-preview .selected-grid.editorial .card-summary{margin:0}
body.redesign-preview .selected-grid.editorial .selected-button{flex:none;margin-top:8px;font-size:14px}
@media (max-width:960px){body.redesign-preview .selected-grid.editorial{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  body.redesign-preview .selected-inner{padding:40px 20px 8px}
  body.redesign-preview .selected-header{flex-direction:column;align-items:flex-start;gap:12px}
  body.redesign-preview .selected-grid.editorial{grid-template-columns:1fr}
}

/* -- Home: what I bring — six quiet columns, hairlines not cards -- */
body.redesign-preview .bring-strip{padding-top:4px}
body.redesign-preview .bring-strip-grid.six{grid-template-columns:repeat(6,minmax(0,1fr));gap:0 24px}
body.redesign-preview .bring-strip-grid.six article{border-top:1px solid var(--hairline);padding-top:14px}
body.redesign-preview .bring-strip-grid h3{margin-bottom:4px}
@media (max-width:1100px){body.redesign-preview .bring-strip-grid.six{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (max-width:640px){body.redesign-preview .bring-strip-grid.six{grid-template-columns:1fr;gap:20px}}

/* -- Home: about preview — horizontal text treatment, no card.
   .about-copy-heading/.about-copy-body are new wrapper divs around
   the existing (unchanged) eyebrow/h2 and paragraphs/CTA. -- */
body.redesign-preview .about-preview.text-only{max-width:1200px;padding:36px 40px 40px}
body.redesign-preview .about-preview.text-only .about-copy{display:grid;grid-template-columns:280px 1fr;gap:48px;max-width:none}
body.redesign-preview .about-copy-heading,body.redesign-preview .about-copy-body{max-width:none}
body.redesign-preview .about-copy-body p{max-width:640px}
@media (max-width:760px){
  body.redesign-preview .about-preview.text-only{padding:36px 20px 40px}
  body.redesign-preview .about-preview.text-only .about-copy{grid-template-columns:1fr;gap:14px}
}

/* -- Portfolio: two-column editorial rows, no card boxes -- */
body.redesign-preview .portfolio-featured{max-width:1200px;padding:20px 40px 8px}
body.redesign-preview .capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 48px}
body.redesign-preview .capability-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:24px 0 28px;border:0;border-top:1px solid var(--hairline);background:none}
body.redesign-preview .capability-card:last-child{border-bottom:0}
body.redesign-preview .capability-card .card-thumb{order:-1;width:100%;margin:0 0 14px}
body.redesign-preview .capability-label{flex:none;margin-bottom:8px}
body.redesign-preview .capability-body{flex:none;width:100%}
body.redesign-preview .capability-card h3{font-size:18px;margin-bottom:6px}
body.redesign-preview .capability-card p:not(.capability-label){max-width:none}
@media (max-width:760px){
  body.redesign-preview .portfolio-featured{padding:20px 20px 8px}
  body.redesign-preview .capability-grid{grid-template-columns:1fr}
}

/* -- Contact: merged hero + rows, no card around the list.
   .contact-split is a new wrapper around the two existing
   sections (.contact-hero stays the left column, .contact-block
   the right); nothing inside either section was removed. -- */
body.redesign-preview .contact-split{max-width:1200px;margin:0 auto;padding:56px 40px 56px;display:grid;grid-template-columns:0.95fr 1.2fr;gap:72px;align-items:start}
body.redesign-preview .contact-split .contact-hero{max-width:none;margin:0;padding:0}
body.redesign-preview .contact-split .contact-hero h1{max-width:none;font-size:44px;line-height:1.08;margin-bottom:16px}
body.redesign-preview .contact-split .contact-hero .lede{color:var(--muted);font-size:16px;max-width:440px}
body.redesign-preview .contact-split .contact-block{max-width:none;margin:0;padding:0;border:0}
body.redesign-preview .contact-block h2{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint-2);font-family:var(--sans)}
body.redesign-preview .contact-block>p{font-size:14px;color:var(--muted);margin-bottom:24px}
body.redesign-preview .contact-list{background:none;border:0;border-radius:0;border-top:1px solid var(--hairline)}
body.redesign-preview .contact-row{padding:22px 2px;border-bottom:1px solid var(--hairline)}
body.redesign-preview .contact-row .label{font-size:11px}
body.redesign-preview .contact-row .value{font-size:17px}
@media (max-width:820px){
  body.redesign-preview .contact-split{grid-template-columns:1fr;gap:8px;padding:44px 20px 40px}
  body.redesign-preview .contact-split .contact-block{margin-top:32px}
  body.redesign-preview .contact-split .contact-hero h1{font-size:36px}
}

/* -- About: hero (photo/copy), value paragraphs, approach, beyond-work -- */
body.redesign-preview .about-page-intro{max-width:1200px;padding:48px 40px 8px;grid-template-columns:240px minmax(0,1fr);gap:48px}
body.redesign-preview .about-page-intro .about-portrait,
body.redesign-preview .about-page-intro .about-portrait img{width:240px}
body.redesign-preview .about-page-intro .about-portrait img{height:240px}
body.redesign-preview .about-name{font-size:34px;margin-bottom:10px}
body.redesign-preview .about-page-intro .about-copy p{margin-bottom:8px}
/* Round 3: "Where I bring value" was reading as a stray mid-weight
   line, not a section title, and its two paragraphs looked like one
   emphasized point plus one leftover line (see the nth-of-type fix
   above). Restyled as a small label — matching the same eyebrow/label
   language used for "My approach" and "Beyond the work" below it — so
   it clearly introduces the pair, with a hairline top rule for
   separation and a vertical divider between the two paragraphs,
   consistent with every other paired module on this page (Problem/
   Outcome, Challenge/What I did, Reflection/Quote). Wording unchanged. */
body.redesign-preview .about-page-intro .about-copy h2{margin:32px 0 14px;padding-top:24px;border-top:1px solid var(--hairline);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
body.redesign-preview .value-row{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:0}
body.redesign-preview .value-row p{margin:0}
body.redesign-preview .value-row p:last-child{border-left:1px solid var(--hairline);padding-left:32px}
body.redesign-preview .approach-section{max-width:1200px;padding:0 40px;margin-top:56px}
body.redesign-preview .approach-section>h2{font-size:28px;margin-bottom:8px}
body.redesign-preview .approach-intro{max-width:680px}
body.redesign-preview .refined-approach{gap:22px 40px;margin-top:18px}
body.redesign-preview .refined-approach article{border-top:1px solid var(--hairline);padding-top:12px}
body.redesign-preview .refined-approach article>div{margin-bottom:5px}
body.redesign-preview .refined-approach p{max-width:52ch}
/* Round 3: a sixth principle was added below, making the set even, so
   the old "last item spans full width" treatment (needed for an odd
   count of 5) is no longer appropriate — 05 and 06 now sit side by
   side as a normal third row, closing the dead space that used to sit
   to the right of the lone spanning item. */
body.redesign-preview .refined-approach article:last-child{grid-column:auto;max-width:none}
body.redesign-preview .beyond-work{max-width:1200px;padding:0 40px;margin-top:56px}
body.redesign-preview .beyond-work>h2{font-size:28px;margin-bottom:8px}
body.redesign-preview .beyond-grid{gap:40px;margin-top:16px;margin-bottom:28px}
body.redesign-preview .beyond-grid>div{border:0;border-radius:0;padding:0;background:none}
body.redesign-preview .why-share{max-width:720px}
body.redesign-preview .about-closing{max-width:1200px;padding:0 40px;margin-top:56px}
@media (max-width:760px){
  body.redesign-preview .about-page-intro{grid-template-columns:1fr;padding:40px 20px 8px}
  body.redesign-preview .value-row{grid-template-columns:1fr;gap:14px}
  body.redesign-preview .value-row p:last-child{border-left:0;padding-left:0}
  body.redesign-preview .approach-section,body.redesign-preview .beyond-work,body.redesign-preview .about-closing{padding:0 20px;margin-top:44px}
}

/* -- AI String Authoring case-study template -- */
body.redesign-preview .cs-hero{padding:44px 0 28px}
body.redesign-preview .cs-hero .cs-shell{width:min(var(--max-case),calc(100% - 80px))}
body.redesign-preview .cs-shell{width:min(var(--max-case),calc(100% - 80px))}
body.redesign-preview .cs-overview{margin-top:2px}
body.redesign-preview .cs-opener-cards{margin-top:16px;padding-top:14px}

/* Challenge | What-I-did intro, side by side. .cs-pair-row/.cs-pair-col
   are new wrappers around the existing two sections' existing content;
   no heading, label, or paragraph text was changed, only grouped.
   Round 3 fix: each .cs-pair-col is a full <section> that still
   contains its own inner .cs-shell, and that inner shell was ALSO
   picking up the page-wide `.cs-shell{width:min(...)}` rule — so each
   half independently re-centered and re-inset itself inside its grid
   column, on top of the row's own gap. That double-insetting is what
   made the divider not line up with the Problem/Outcome divider above
   it and created uneven-looking gaps. Fix: the row itself now carries
   the shared shell width/centering, and the nested .cs-shells inside
   each pair-col are reset to fill their column plainly. Gap and
   divider padding now match .cs-opener-cards exactly (32px) so the two
   dividers land at the same x-position down the page. */
body.redesign-preview .cs-pair-row{width:min(var(--max-case),calc(100% - 80px));margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
body.redesign-preview .cs-pair-col{padding:0}
body.redesign-preview .cs-pair-col .cs-shell{width:100%;margin:0}
body.redesign-preview .cs-pair-col+.cs-pair-col{border-left:1px solid var(--hairline);padding-left:32px}
@media (max-width:820px){
  body.redesign-preview .cs-pair-row{grid-template-columns:1fr;gap:28px;width:min(100% - 40px,var(--max-case))}
  body.redesign-preview .cs-pair-col+.cs-pair-col{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:28px}
}

/* Workflow diagram — full shell width, standalone. Round 3: the three
   artifacts now share a consistent hairline rhythm (a top rule + fixed
   padding before each, after the first) instead of relying on margin
   alone, so the sequence reads as one designed set of rows — the same
   visual language used for the card grids and paired columns elsewhere
   on the page — rather than images simply stacked one after another. */
body.redesign-preview .cs-artifact-wide{max-width:100%;margin:0}
body.redesign-preview .cs-approach-artifacts{padding-top:0}
body.redesign-preview .cs-approach-artifacts figure{padding-top:36px;border-top:1px solid var(--hairline)}
body.redesign-preview .cs-approach-artifacts figure:first-child{padding-top:0;border-top:0}
@media (max-width:820px){
  body.redesign-preview .cs-approach-artifacts figure{padding-top:28px}
}

/* Round 2: the review-diff and String Author artifacts now put each
   figure's EXISTING <figcaption> (moved, not duplicated — see chat
   report) in a left column and the existing image in a right column,
   via CSS Grid directly on the <figure>. figcaption is a valid first
   OR last child of figure per the HTML spec, so moving it before the
   image keeps the caption/figure accessibility association intact
   while giving the requested ~30/70 text/image split. Lightbox
   attributes on the image button and the caption's "View full..."
   link are untouched. Round 3: aligned text to the top of the image
   (was vertically centered, which read as floating/inconsistent next
   to a very tall image) and gave the String Author row more width so
   its image isn't visually stranded. */
body.redesign-preview .cs-artifact-row{max-width:100%;margin:0;display:grid;grid-template-columns:0.32fr 0.68fr;gap:40px;align-items:start}
body.redesign-preview .cs-artifact-row .cs-figure-caption{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
body.redesign-preview .cs-artifact-row .cs-figure-frame{margin:0}
body.redesign-preview .cs-artifact-row:last-child{grid-template-columns:0.26fr 0.74fr}
body.redesign-preview .cs-artifact-row .cs-preview-crop{max-height:340px}
@media (max-width:820px){
  body.redesign-preview .cs-artifact-row,
  body.redesign-preview .cs-artifact-row:last-child{grid-template-columns:1fr;gap:16px}
}

/* Round 3: the bottom of the page felt crowded coming out of the
   artifact sequence straight into Resolution. Added class="cs-resolution"
   to that section in the HTML (structural only, no copy touched) so it
   can get its own breathing room here, matching the same generous
   feel already used for Impact/Reflection/nav below it. */
body.redesign-preview .cs-resolution{margin-top:56px}

/* Impact — horizontal numbers, thin separators, no enclosing box */
body.redesign-preview .cs-section.cs-impact{background:none;border:0;margin-top:90px;padding:0}
body.redesign-preview .cs-section.cs-impact h2,body.redesign-preview .cs-section.cs-impact p{color:var(--ink)}
body.redesign-preview .cs-metrics{background:none;border:0;padding:0;gap:0}
body.redesign-preview .cs-metrics article{border-right:1px solid var(--hairline-strong);padding:0 32px}
body.redesign-preview .cs-metrics article:first-child{padding-left:0}
body.redesign-preview .cs-metrics article:last-child{border-right:0;padding-right:0}
body.redesign-preview .cs-metrics span{color:var(--faint)}
@media (max-width:900px){
  body.redesign-preview .cs-metrics article{border-right:0!important;border-bottom:1px solid var(--hairline-strong)!important}
}

/* Reflection | Engineering partner quote, side by side. No new wrapper
   divs here (unlike the pairs above) — the existing paragraph elements
   inside .cs-reflection .cs-shell are placed directly via CSS Grid, so
   the pre-existing .cs-reflection>div>p:not(.cs-section-label) rule
   keeps matching exactly as it already did on the unmodified page (see
   chat report: that rule already overrides the "Engineering partner
   feedback" mini-label's color on the live site today; grid-placing
   these elements in place, rather than re-wrapping them, avoids
   changing that pre-existing behavior any further). */
body.redesign-preview .cs-section.cs-reflection{margin-top:80px}
body.redesign-preview .cs-reflection .cs-shell{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:0;align-items:start}
body.redesign-preview .cs-reflection .cs-shell>.cs-section-label{grid-column:1;grid-row:1}
body.redesign-preview .cs-reflection .cs-shell>h2{grid-column:1;grid-row:2;max-width:none}
body.redesign-preview .cs-reflection .cs-shell>p:not(.cs-section-label):not(.cs-mini-label){grid-column:1;grid-row:3;font-size:15px}
body.redesign-preview .cs-reflection .cs-shell>.cs-mini-label{grid-column:2;grid-row:1}
body.redesign-preview .cs-reflection blockquote{grid-column:2;grid-row:2/4;margin-top:0}
@media (max-width:820px){
  body.redesign-preview .cs-reflection .cs-shell{grid-template-columns:1fr;column-gap:0}
  body.redesign-preview .cs-reflection .cs-shell>*{grid-column:1!important}
  body.redesign-preview .cs-reflection .cs-shell>.cs-mini-label{grid-row:4;margin-top:24px}
  body.redesign-preview .cs-reflection blockquote{grid-row:5}
}

body.redesign-preview .cs-case-nav{margin-top:90px;padding:28px 0}