/* ---------- Theme tokens ---------- */
/* White page, dark gray ink. The three accents come from the original Wix site and are
   too light to read as text on white, so use them only for small marks (dots, punctuation, rules). */
:root {
  --bg: #ffffff;
  --surface: #f6f7f8;
  --surface-2: #eef0f2;
  --ink: #1f2328;
  --ink-soft: #5d6470;
  --faint: #9aa0a9;
  --rule: #e9eaed;
  --line: #1f2328;
  --cyan: #0ee5ee;
  --amber: #edb202;
  --green: #02ed88;
  --tbd-bg: rgba(237, 178, 2, 0.16);
  /* Hero layout, shared with the desktop header so the menu lines up with the photo. */
  --lede-size: clamp(1.25rem, 2.2vw, 1.6rem);
  --hero-text-col: calc(24.5 * var(--lede-size));
  --photo-max: min(420px, 58vh);
  --photo-ring: 7px; /* 5px gap + 2px outline */
  color-scheme: light;
}

/* Decorative accent for dots and bullets; project cards cycle through the three. */
[data-accent="cyan"] { --accent: var(--cyan); }
[data-accent="amber"] { --accent: var(--amber); }
[data-accent="green"] { --accent: var(--green); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px;
}
.skip:focus { top: 16px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tbd {
  background: var(--tbd-bg);
  color: var(--ink-soft);
  border-radius: 4px;
  padding: 0 0.2em;
  font-style: italic;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--rule)); }

/* Accent punctuation, as in "Design, Strategy, People." */
.p-c, .p-a, .p-g { font-weight: 800; }
.p-c { color: var(--cyan); }
.p-a { color: var(--amber); }
.p-g { color: var(--green); }

/* ---------- Header ---------- */
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.logo { display: block; flex: none; width: 40px; height: 40px; }

.nav-links { display: flex; gap: 32px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-links a { text-decoration: none; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .nav-links { gap: 20px; font-size: 13px; }
}
/* On desktop the header shares the hero's columns, so the menu centers over the photo. */
@media (min-width: 901px) {
  .site-nav { display: grid; grid-template-columns: var(--hero-text-col) minmax(0, 1fr); gap: 0; }
  .nav-links { justify-self: center; }
}
@media (max-width: 560px) {
  .brand-name { display: none; }
}

/* ---------- Segmented control (case study step buttons) ---------- */
.segmented {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.segmented button {
  position: relative;
  z-index: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
}


/* ---------- Hero ---------- */
/* Sized against viewport height too, so the headline, intro and buttons fit above the fold. */
.hero { display: grid; grid-template-columns: var(--hero-text-col) minmax(0, 1fr); align-items: center; padding: clamp(12px, 3vh, 40px) 0 clamp(40px, 7vh, 72px); }

.hero h1 { font-weight: 300; font-size: clamp(44px, min(6.4vw, 9.5vh), 88px); line-height: 1; letter-spacing: -0.02em; }
.hero h1 b { font-weight: 800; }

.hero-lede { margin-top: clamp(16px, 3vh, 28px); max-width: 24.5em; font-size: var(--lede-size); line-height: 1.5; color: var(--ink-soft); }
.hero-lede strong { color: var(--ink); font-weight: 600; }

.hero .actions { margin-top: clamp(20px, 3.5vh, 32px); }

/* Centered in the space between the intro and the right gutter, keeping at least 32px clear on each side. */
.hero-photo {
  justify-self: center;
  width: calc(100% - 64px);
  max-width: var(--photo-max);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
  outline: 2px solid var(--ink);
  outline-offset: calc(var(--photo-ring) - 2px);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 59.6% 50%; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 24px 0 72px; }
  .hero-photo { justify-self: start; width: 100%; max-width: 240px; }
}

.clients { --visible: 6; --logo-gap: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.clients small { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.client-logos { overflow: hidden; }
.logo-track { display: flex; align-items: center; min-height: 40px; }
.logo-track.is-sliding { transition: transform 0.9s cubic-bezier(0.65, 0, 0.25, 1); }
/* Slots have no padding here: site.js spreads the logos so the first sits flush left and the last flush right. */
.logo-track.is-carousel img { padding: 0; }
.logo-track.is-sliding img { transition: object-position 0.9s cubic-bezier(0.65, 0, 0.25, 1); }
.logo-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.logo-toggle:hover { color: var(--ink); border-color: var(--faint); }
@media (max-width: 1100px) {
  .clients { --visible: 5; }
}
@media (max-width: 900px) {
  .clients { --visible: 4; grid-template-columns: minmax(0, 1fr) auto; }
  .clients small { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .clients { --visible: 3; }
}
@media (max-width: 480px) {
  .clients { --visible: 2; --logo-gap: 16px; }
}
/* With a mouse, the button floats over the row so the logos can reach the right edge. It appears when hovering
   the section or on keyboard focus. Touch screens can't hover, so they keep it visible in its own column. */
@media (hover: hover) {
  .clients { position: relative; grid-template-columns: auto minmax(0, 1fr); }
  .logo-toggle { position: absolute; right: 0; bottom: 26px; background: var(--bg); opacity: 0; transition: opacity 0.2s ease; }
  .clients:hover .logo-toggle, .logo-toggle:focus-visible { opacity: 1; }
}
@media (hover: hover) and (max-width: 900px) {
  .clients { grid-template-columns: minmax(0, 1fr); }
}
/* Without motion, show every logo at once instead of rotating them. */
@media (prefers-reduced-motion: reduce) {
  .logo-track { flex-wrap: wrap; row-gap: 20px; }
  .logo-toggle { display: none; }
}
/* Brand logos shown in grayscale so they sit quietly in the white theme. Heights are tuned per logo for even visual weight. */
.clients img { display: block; flex: 0 0 calc(100% / var(--visible)); width: calc(100% / var(--visible)); height: 28px; padding: 0 var(--logo-gap) 0 2px; object-fit: contain; object-position: left center; filter: grayscale(1) contrast(1.2); opacity: 0.6; }
.clients .logo-recyclops { height: 22px; }
.clients .logo-cortex { height: 28px; }
.clients .logo-usana { height: 20px; }
.clients .logo-wcf { height: 22px; }
.clients .logo-upkid { height: 28px; }
.clients .logo-hilton { height: 24px; }
.clients .logo-marriott { height: 40px; }
.clients .logo-legrand { height: 24px; }
.clients .logo-capital-one { height: 30px; }
.clients .logo-udot { height: 28px; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--surface-2); }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: #3a4048; }
.btn--solid .tbd { color: #fff; background: rgba(255, 255, 255, 0.16); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0 0; scroll-margin-top: 16px; }

.section-head { display: grid; gap: 16px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 300; }
.section-head h2 b { font-weight: 700; }
.section-head p { color: var(--ink-soft); max-width: 640px; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 56px 40px; }
.cards--small { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

.card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.card .ill { margin-bottom: 12px; transition: transform 0.25s ease; }
a.card:hover .ill { transform: translateY(-3px); }
.card h3 { font-size: 1.6rem; }
.card-summary { color: var(--ink-soft); }
.card-link { align-self: start; margin-top: 4px; font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }

.card--featured { margin-bottom: 56px; }
@media (min-width: 900px) {
  .card--featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px 40px; align-items: center; }
  .card--featured .ill { grid-row: 1 / span 5; margin: 0; }
  .card--featured h3 { font-size: 2.3rem; }
}

/* Placeholder illustration: abstract interface, never a real screen (NDA). */
.ill { position: relative; background: var(--surface); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.ill::before { content: ""; position: absolute; left: 12%; right: 12%; top: 16%; bottom: 0; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 1px 0 var(--rule), 0 10px 30px rgba(20, 25, 35, 0.06); }
.ill i { position: absolute; left: 18%; height: 7px; border-radius: 4px; background: #e3e5e9; }
.ill i:nth-child(1) { top: 26%; width: 30%; height: 10px; background: #d5d8dd; }
.ill i:nth-child(2) { top: 40%; width: 58%; }
.ill i:nth-child(3) { top: 50%; width: 50%; }
.ill i:nth-child(4) { top: 64%; width: 26%; height: 22%; border-radius: 8px; }
.ill i:nth-child(5) { top: 64%; left: 48%; width: 26%; height: 22%; border-radius: 8px; }
.ill .dot { position: absolute; top: 27%; right: 18%; width: 10px; height: 10px; }
.ill--phone::before { left: 34%; right: 34%; top: 12%; border-radius: 18px 18px 0 0; }
.ill--phone i { left: 39%; }
.ill--phone i:nth-child(2) { width: 22%; }
.ill--phone i:nth-child(3) { width: 18%; }
.ill--phone i:nth-child(4) { width: 22%; height: 26%; }
.ill--phone i:nth-child(5) { display: none; }
.ill--phone .dot { right: 39%; }

/* ---------- Principles ---------- */
.grid-3 { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.tile { border-top: 1px solid var(--rule); padding-top: 20px; display: grid; gap: 8px; align-content: start; }
.tile h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 700; }
.tile p { color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px; margin-top: clamp(80px, 11vw, 120px); padding: 72px 0; border-top: 1px solid var(--rule); scroll-margin-top: 16px; }
.contact h2 { font-size: clamp(2.4rem, 5vw, 3rem); font-weight: 300; }
.contact h2 b { font-weight: 700; }
.contact p { margin-top: 12px; color: var(--ink-soft); max-width: 46ch; }

.site-footer { padding: 28px 0 48px; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Résumé page ---------- */
.nav-links a[aria-current="page"] { color: var(--ink); }

.resume-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; padding: clamp(24px, 5vw, 56px) 0 32px; border-bottom: 1px solid var(--rule); }
.resume-head h1 { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 300; letter-spacing: -0.02em; }
.resume-head h1 b { font-weight: 800; }
.resume-head p { margin-top: 8px; font-size: 1.15rem; color: var(--ink-soft); }

.resume-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 72px; padding: 48px 0 72px; }
@media (max-width: 900px) {
  .resume-body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

.resume-body h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

.resume-side { display: grid; gap: 36px; align-content: start; font-size: 0.95rem; }
.resume-side section { display: grid; gap: 10px; }
.resume-side strong { font-weight: 600; }
.resume-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.resume-side a { overflow-wrap: anywhere; }
.resume-note { font-style: italic; color: var(--ink-soft); }

.resume-main { display: grid; gap: 48px; align-content: start; min-width: 0; }
.resume-main > h2 { margin-bottom: -24px; }

.resume-job { display: grid; gap: 32px; }
.resume-job > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.resume-job h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.resume-job h3 span { font-weight: 400; color: var(--ink-soft); }
.resume-job > header p { color: var(--ink-soft); font-size: 0.95rem; }

.resume-role { display: grid; gap: 12px; }
.resume-role h4 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.resume-role h4 span { font-weight: 400; color: var(--ink-soft); }
.resume-role dl { margin: 0; display: grid; gap: 8px; font-size: 0.97rem; }
.resume-role dt { display: inline; font-weight: 600; }
.resume-role dd { display: inline; margin: 0; color: var(--ink-soft); }

/* =========================================================
   Case study: horizontal slides
   ========================================================= */
body.cs {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 4vw, 40px) 8px;
}

.back-link { text-decoration: none; font-weight: 600; white-space: nowrap; color: var(--ink-soft); }
.back-link:hover { color: var(--ink); }

.cs-steps button { font-size: 14px; padding: 6px 14px; }
.cs-steps button .num { opacity: 0.6; margin-right: 0.35em; }
.cs-steps button[aria-current="step"] { background: var(--ink); color: #fff; }

.cs-top-end { width: 42px; flex: none; }

@media (max-width: 860px) {
  .cs-steps button .label { display: none; }
  .cs-steps button .num { opacity: 1; margin: 0; }
  .cs-steps button { padding: 6px 10px; }
  .cs-top-end { display: none; }
}

.icon-btn {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color 0.2s ease;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }

.slides {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.slides::-webkit-scrollbar { display: none; }
.slides:focus { outline: none; }

/* Mouse wheels and trackpads don't change slides; touch screens keep swiping. */
@media (hover: hover) and (pointer: fine) {
  .slides { overflow-x: hidden; }
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 7vw, 112px);
}

@media (max-width: 860px) {
  .slide { grid-template-columns: 1fr; align-content: start; }
}
.slide--solo { grid-template-columns: minmax(0, 1fr); }
.slide--solo .slide-copy { max-width: 760px; }

.slide-copy { display: grid; gap: 20px; max-width: 620px; }
.slide-copy h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 700; letter-spacing: -0.02em; }
.slide-copy h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 300; letter-spacing: -0.015em; }
.slide-copy .lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.slide-copy > p:not(.eyebrow):not(.lede) { color: var(--ink-soft); }

.slide-num { font-variant-numeric: tabular-nums; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.points li { position: relative; padding-left: 26px; }
.points li::before {
  content: ""; position: absolute; left: 4px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, var(--ink));
}

.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 4px 0 0; }
.meta div { border-top: 1px solid var(--rule); padding-top: 10px; }
.meta dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.meta dd { margin: 4px 0 0; font-weight: 600; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.metric { border-top: 2px solid var(--accent, var(--ink)); padding-top: 12px; }
.metric strong { display: block; font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; }
.metric span { font-size: 0.92rem; color: var(--ink-soft); }

.visual {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}
.visual figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  font-size: 0.85rem; color: var(--ink-soft);
}

.next-card {
  display: grid; gap: 10px; align-content: end;
  min-height: 260px; padding: 32px;
  border-radius: 22px; border: 1px solid var(--rule); background: var(--bg);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.next-card:hover { border-color: #d2d5da; box-shadow: 0 12px 32px rgba(20, 25, 35, 0.07); }
.next-card h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.next-card p:not(.eyebrow) { color: var(--ink-soft); }

/* Slide content eases in when its slide becomes active. */
.slide .slide-copy > *, .slide .slide-visual {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide.is-active .slide-copy > *, .slide.is-active .slide-visual { opacity: 1; transform: none; }
.slide.is-active .slide-copy > *:nth-child(2) { transition-delay: 0.06s; }
.slide.is-active .slide-copy > *:nth-child(3) { transition-delay: 0.12s; }
.slide.is-active .slide-copy > *:nth-child(n+4) { transition-delay: 0.18s; }
.slide.is-active .slide-visual { transition-delay: 0.15s; }

.cs-controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 40px) 20px;
}
.progress { flex: 1; height: 2px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 20%; background: var(--ink); transition: width 0.5s ease; }
.counter { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--ink-soft); min-width: 4.5ch; text-align: center; }

.not-found { margin: auto; text-align: center; display: grid; gap: 16px; justify-items: center; padding: 24px; }

@media (prefers-reduced-motion: reduce) {
  html, .slides { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slide .slide-copy > *, .slide .slide-visual { opacity: 1; transform: none; }
}