/* Shared styles for the portfolio: home page, case studies and the password page. */

@font-face{font-family:"Holdings Numerals";src:url("https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-mono/GeistMono-Medium.woff2") format("woff2");font-weight:400 700;unicode-range:U+0030-0039,U+0024,U+002E,U+002C}

:root{
  --ink:#0F1414;
  --bg:#F7F7F5;
  --line:#EAECF0;
  --line-strong:#D0D5DD;
  --muted:#98A2B3;
  --subtle:#667085;
  --text-2:#475467;
  --text:#344054;
  --green:#1F6B3D;
  --green-soft:#E6F4ED;
  --blue:#1F5BB8;
  --blue-soft:#EEF3FA;
  --lime:#E1FEA1;
  --lime-ink:#2E4B14;
  --on-dark:#CFD7E5;
  --display:'General Sans',sans-serif;
  --sans:'DM Sans',sans-serif;
  --mono:'Geist Mono',monospace;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#1F2937;font-family:"DM Sans",-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--ink)}
p{margin:0}
img.fill{width:100%;height:auto;display:block}
[hidden]{display:none !important}

/* Site header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,247,245,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header__inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.crumbs{display:flex;align-items:center;gap:18px;white-space:nowrap}
.crumbs__back{display:flex;align-items:center;gap:8px;color:var(--subtle);font:500 14px var(--display)}
.crumbs__back:hover{color:var(--ink)}
.crumbs__divider{width:1px;height:18px;background:var(--line)}
.crumbs__current{display:flex;align-items:center;gap:10px;color:var(--ink);font:500 16px var(--display)}
.crumbs__current::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--green)}
.next-link{font:500 14px var(--display);color:var(--text-2);padding:8px 12px;border-radius:999px;white-space:nowrap}
.next-link:hover{background:var(--line);color:var(--ink)}
/* On phones there is only room for the back link and the next link */
@media (max-width:560px){.crumbs__divider,.crumbs__current{display:none}}

/* Case study hero */
.cs-main{display:flex;flex-direction:column;align-items:center;padding:0 24px 120px}
.cs-hero{width:100%;max-width:1200px;padding:64px 0 40px;display:flex;flex-direction:column;gap:28px}
.kicker{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.kicker__tag{background:var(--lime);color:var(--lime-ink);padding:6px 10px;border-radius:999px}
.cs-title{margin:0;font:500 clamp(48px,7vw,96px)/.95 var(--display);letter-spacing:-.03em;color:var(--ink)}
.cs-lede{max-width:760px;font:400 clamp(18px,2vw,24px)/1.4 var(--display);color:var(--text);text-wrap:pretty}
.meta{display:flex;flex-wrap:wrap;gap:12px 48px;border-top:1px solid var(--line);padding-top:20px}
.meta--plain{border-top:0;padding-top:0}
.meta__item{display:flex;flex-direction:column;gap:6px}
.meta__label{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.meta__value{font-size:16px;color:var(--ink)}
.meta--plain .meta__value{font-size:15px}
a.meta__value{color:var(--green);text-decoration:underline;text-underline-offset:3px}
a.meta__value:hover{color:var(--ink)}

.hero-figure{width:100%;max-width:1280px;display:flex;flex-direction:column;gap:14px}
.hero-frame{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(16,24,40,.18),0 4px 12px rgba(16,24,40,.04);line-height:0;background:#fff}
.hero-caption{font:400 12px/1.4 var(--mono);color:var(--muted);text-align:center}

/* Numbered sections */
.sections{width:100%;max-width:1200px;display:flex;flex-direction:column;margin-top:96px}
.section{display:flex;flex-wrap:wrap;gap:20px 48px;padding:56px 0;border-top:1px solid var(--line)}
.section__label{flex:0 0 220px;display:flex;flex-direction:column;gap:8px}
.section__num{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.section__title{margin:0;font:500 22px/1.2 var(--display);color:var(--ink)}
.section__sub{font:400 14px/1.5 var(--sans);color:var(--subtle)}
.section__body{flex:1 1 480px;min-width:0}
.section__body--narrow{max-width:760px}

/* Layout helpers */
.stack{display:flex;flex-direction:column}
.gap-6{gap:6px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-28{gap:28px}.gap-32{gap:32px}.gap-40{gap:40px}.gap-48{gap:48px}
.grid{display:grid;gap:16px}
.grid--240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid--180{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.row-between{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.wrap{display:flex;flex-wrap:wrap;gap:8px}

/* Type */
.text-lead{font:400 clamp(22px,2.4vw,30px)/1.35 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.text-statement{max-width:760px;font:400 clamp(20px,2vw,26px)/1.4 var(--display);color:var(--ink);text-wrap:pretty}
.text-body{max-width:760px;font:400 18px/1.6 var(--sans);color:var(--text);text-wrap:pretty}
.text-note{max-width:760px;font:400 16px/1.6 var(--sans);color:var(--text-2);text-wrap:pretty}
.eyebrow{font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--subtle)}
.eyebrow--muted{color:var(--muted)}
.eyebrow--blue{color:var(--blue)}
.eyebrow--lime{color:var(--lime-ink)}
.badge{font:500 9.5px/1 var(--mono);letter-spacing:.12em;padding:5px 8px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.badge--lime{background:var(--lime);color:var(--lime-ink)}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
.card--lg{padding:24px;gap:12px}
.card__title{font:500 18px var(--display);color:var(--ink)}
.card__text{font:400 15px/1.55 var(--sans);color:var(--text)}
.card--lg .card__text{font-size:16px}
.card__text--sm{font-size:14.5px;color:var(--text-2)}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.split__cell{background:#fff;padding:22px;display:flex;flex-direction:column;gap:8px}
.split__title{font:500 20px var(--display);color:var(--ink)}
.split__text{font:400 13.5px/1.5 var(--sans);color:var(--text-2)}

.callout{background:var(--lime);border-radius:14px;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.callout p{flex:1 1 300px;font:500 16px/1.5 var(--sans);color:var(--lime-ink)}

.chip{border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:7px 13px;font:400 13px var(--sans);color:var(--text)}

/* Outcome stats */
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
.stat--dark{background:var(--ink);border:0;color:#fff}
.stat--dark .eyebrow{color:var(--on-dark)}
.stat__value{font:500 clamp(44px,5vw,64px)/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.stat--dark .stat__value{color:#fff}
.stat__note{font:400 14px/1.5 var(--sans);color:var(--subtle)}
.stat--dark .stat__note{color:var(--on-dark)}

/* Figures */
.figure{margin:0;display:flex;flex-direction:column;gap:12px}
.frame{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;line-height:0;box-shadow:0 12px 30px -16px rgba(16,24,40,.2)}
.frame--flat{box-shadow:none}
.figcaption{font:400 14px/1.5 var(--sans);color:var(--subtle)}
.figcaption b{font-weight:500;color:var(--ink)}

/* Step-by-step flow diagram */
.flow{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.flow__step{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--ink);transition:all .2s;cursor:default}
.flow__step:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(16,24,40,.35)}
.flow__step--dark{background:var(--ink);color:#fff}
.flow__num{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.flow__title{font:500 17px/1.2 var(--display)}
.flow__text{font:400 13px/1.45 var(--sans);color:var(--text-2)}
.flow--compact .flow__title{font-size:16px}
.flow--compact .flow__text{font-size:12.5px}
.flow__step--dark .flow__num,.flow__step--dark .flow__text{color:var(--on-dark)}
.flow__step:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1px solid var(--line-strong);z-index:1;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/10px no-repeat;box-sizing:border-box}

/* Segmented toggle */
.segmented{display:flex;gap:4px;background:var(--line);border:1px solid var(--line);border-radius:999px;padding:4px;align-self:flex-start;flex-wrap:wrap}
.segmented button{border:0;border-radius:999px;padding:8px 14px;font:500 13px var(--sans);cursor:pointer;background:transparent;color:var(--text-2);transition:all .15s;display:flex;gap:8px;align-items:center}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.segmented__num{font:500 10px var(--mono);letter-spacing:.1em}

/* Buttons */
.btn-outline{display:flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:999px;padding:10px 18px 10px 14px;font:500 14px var(--sans);color:var(--ink);transition:all .15s}
.btn-outline:hover{background:var(--ink);color:#fff}
.segmented--wide{flex-wrap:nowrap}
.segmented--wide button{padding:8px 16px}