:root{
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:#171717;
  background:#f4f4f3;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#f4f4f3;color:#171717}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #333;outline-offset:5px;border-radius:4px}

.site-shell{
  max-width:1560px;
  margin:0 auto;
  padding:62px 36px 34px;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:44px;
  min-height:100vh;
}
.sidebar{
  position:sticky;
  top:62px;
  align-self:start;
  height:auto;
  display:flex;
  flex-direction:column;
}
.sidebar-main{min-height:0}
.name{display:inline-block;font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.03em}
.intro{margin:12px 0 48px;color:#858585;font-size:20px;line-height:1.28;letter-spacing:-.01em}
.main-nav{max-width:100%}
.menu-section{margin:0 0 30px}
.menu-heading{display:flex;align-items:center;gap:7px}
.menu-title{font-size:20px;line-height:1.3;font-weight:500;color:#171717;letter-spacing:-.01em}
.menu-title:hover,.name:hover{opacity:.68}
.menu-text-button{padding:0;background:none;border:0;cursor:pointer}
.chevron-button{border:0;background:none;padding:3px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.chevron-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.chevron-button[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-children{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:12px}
.menu-children[hidden]{display:none}
.menu-children a,.external-link{display:block;color:#a5a5a5;font-size:19px;line-height:1.38;letter-spacing:-.01em;transition:color .15s ease}
.menu-children a:hover,.menu-children a.active,.external-link:hover{color:#171717}
.interaction-section{margin-top:34px}
.about-section{margin-top:62px;margin-bottom:0}
.sidebar-bottom{margin-top:auto;padding-top:36px}
.external-links{display:grid;gap:12px;margin-bottom:0}
.external-link{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:max-content}
.external-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round;flex:none;transform:translateY(.5px)}
.copyright{color:#898989;font-size:19px;line-height:1.35;white-space:nowrap}

.content{min-width:0;padding-top:3px}
.content-wrap{width:min(100%,1060px)}
.section-heading{font-size:20px;line-height:1.35;font-weight:500;margin:0 0 24px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.project-card{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:#ddd;isolation:isolate}
.card-visual{position:absolute;inset:0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .card-visual,.project-card:focus-visible .card-visual{transform:scale(1.025)}
.project-card::after{content:"";position:absolute;inset:46% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.62));z-index:2;pointer-events:none}
.card-title{position:absolute;bottom:22px;left:24px;right:18px;color:#fff;font-size:20px;line-height:1.22;font-weight:400;z-index:3;text-shadow:0 1px 6px rgba(0,0,0,.18)}
.project-video,.project-image,.composite-bg,.detail-image,.detail-video{width:100%;height:100%;display:block}
.project-video,.project-image,.composite-bg,.detail-image,.detail-video{object-fit:cover}
.card-visual--video .project-video{filter:saturate(.98) contrast(1.02)}
.card-visual--composite .composite-bg{position:absolute;inset:0}
.screen-frame{position:absolute;overflow:hidden;background:#000;border-radius:2px;z-index:1}
.project-card--vision-composite .screen-frame--vision{left:10.25%;top:8.55%;width:80.05%;height:62.2%;border:1px solid rgba(255,255,255,.34);box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
.project-card--vision-composite .project-video--screen{object-fit:cover;object-position:center center}
.card-visual--security .screen-frame--security{left:22.58%;top:12.43%;width:54.90%;height:40.05%;border:1px solid rgba(255,255,255,.24);box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.project-image--search-detail{object-fit:cover !important;object-position:center center !important;background:transparent !important;}

.detail{max-width:1100px}
.eyebrow{font-size:14px;color:#898989;margin:0 0 14px}
.detail h1,.simple-page h1{font-size:clamp(34px,4vw,55px);line-height:1.08;letter-spacing:-.035em;font-weight:500;margin:0 0 19px}
.detail-description{color:#858585;font-size:18px;line-height:1.55;margin:0 0 35px}
.detail-media,.detail-image{display:block;width:100%;aspect-ratio:4/3;border-radius:15px;background:#111;overflow:hidden}
.detail-body{max-width:680px;margin:52px 0 80px}
.detail-body h2{font-size:23px;font-weight:500;margin:0 0 14px}
.detail-body p,.simple-page p{color:#777;font-size:18px;line-height:1.65;margin:0 0 30px}
.back-link{font-size:15px;color:#777;display:inline-flex;margin:3px 0 28px}
.back-link:hover{color:#111}
.simple-page{max-width:720px}
.simple-page p{margin-top:24px}
.preview-note{border-top:1px solid #e6e6e6;margin-top:45px;padding-top:22px;color:#999;font-size:14px;line-height:1.6}
.placeholder{padding:70px 30px;background:#fff;color:#777;border-radius:14px;text-align:center}
.detail-nav{display:flex;justify-content:space-between;gap:12px;margin-top:55px;font-size:15px;color:#777}
.detail-nav a:hover{color:#111}

@media(max-width:1180px){
  .site-shell{grid-template-columns:280px minmax(0,1fr);gap:34px;padding-inline:24px}
  .intro{font-size:18px}
  .menu-title,.section-heading{font-size:18px}
  .menu-children a,.external-link{font-size:17px}
  .copyright{font-size:15px}
  .card-title{font-size:17px;left:18px;bottom:18px}
}
@media(max-width:840px){
  .site-shell{display:block;padding:24px 20px 30px}
  .sidebar{position:relative;top:auto;height:auto !important;display:block;margin-bottom:26px}
  .intro{font-size:16px;margin:10px 0 28px}
  .menu-section{margin-bottom:20px}
  .interaction-section,.about-section{margin-top:0}
  .menu-children{gap:9px}
  .menu-children a,.external-link{font-size:16px}
  .sidebar-bottom{padding-top:10px}
  .external-links{display:flex;gap:22px;margin:22px 0 14px}
  .copyright{font-size:14px}
  .content-wrap{width:100%}
  .project-grid{gap:14px}
  .project-card{border-radius:12px}
  .card-title{font-size:15px;left:14px;bottom:14px}
  .detail h1,.simple-page h1{letter-spacing:-.02em}
  .detail-description{font-size:16px}
}
@media(max-width:520px){
  .project-grid{grid-template-columns:1fr}
  .external-links{flex-direction:column;gap:10px}
}

/* Responsive refinement: keep a 2x2 gallery within shorter desktop viewports. */
@media (min-width: 841px) {
  .content-wrap { width: min(100%, 1060px, calc((100dvh - 185px) * 4 / 3 + 20px)); }
  .sidebar { height: calc(100dvh - 115px) !important; min-height: 0; }
  .sidebar-bottom { flex-shrink: 0; padding-top: 14px; }
  .external-links { margin-bottom: 0; }
}
@media (min-width: 841px) and (max-height: 850px) {
  .site-shell { padding-top: 36px; }
  .sidebar { top: 36px; height: calc(100dvh - 70px) !important; }
  .intro { margin-bottom: 26px; }
  .menu-section { margin-bottom: 18px; }
  .interaction-section { margin-top: 18px; }
  .about-section { margin-top: 18px; }
  .menu-children { gap: 8px; }
  .external-links { gap: 8px; }
  .section-heading { margin-bottom: 16px; }
  .project-grid { gap: 14px; }
}
@media (min-width: 841px) and (max-height: 650px) {
  .sidebar { overflow-y: auto; padding-bottom: 8px; }
  .sidebar-bottom { margin-top: 22px; }
}
@media (max-width: 840px) {
  .content-wrap { width: 100%; }
  .external-links { margin-top: 20px; margin-bottom: 16px; }
}

/* Typography and centered desktop composition */
@media (min-width: 841px) {
  .site-shell { max-width: 1390px; }
  .intro, .menu-title, .menu-children a, .external-link, .section-heading { font-size: 18px; }
  .content-wrap { margin-left: auto; margin-right: auto; }
}
@media (max-width: 840px) {
  .intro, .menu-title, .menu-children a, .external-link, .section-heading { font-size: 16px; }
}

/* Consistent 16px navigation and intro typography across desktop and mobile. */
.intro, .menu-title, .menu-children a, .external-link, .section-heading { font-size: 16px; }

/* Detail page, typography and video thumbnail refinements */
.intro, .section-heading {color:#171717;}
.detail h1 {font-size:clamp(27px,2.65vw,38px);letter-spacing:-.025em;line-height:1.15;}
.detail-media--thumbnail {position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:15px;isolation:isolate;}
.detail-media--thumbnail .card-title {z-index:3;}
.detail-media--thumbnail::after {content:"";position:absolute;inset:46% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.62));z-index:2;pointer-events:none;}
.detail-media--thumbnail .card-visual {position:absolute;inset:0;}

/* Detail pages: wide media, without the home-card title or gradient */
.detail-media--thumbnail { aspect-ratio:16/9; }
.detail-media--thumbnail::after { display:none; }
.detail-media--thumbnail .card-title { display:none; }
.detail-media--thumbnail .card-visual { transition:none; }
.detail-media--thumbnail .project-image,
.detail-media--thumbnail .project-video { object-fit:contain; background:#111; }
/* Keep the living-room TV geometry consistent instead of stretching the screen overlay. */
.detail-media--thumbnail.project-card--vision-composite .card-visual {
  height:auto; aspect-ratio:4/3; top:50%; bottom:auto; transform:translateY(-50%);
}
.detail-media--thumbnail.project-card--vision-composite .composite-bg { object-fit:cover; }
.detail-media--thumbnail.project-card--vision-composite .project-video--screen { object-fit:cover; }

/* Detail media: center the image rather than anchoring it to the top. */
.detail-media--thumbnail.project-card--static-image .project-image {
  object-fit:cover;
  object-position:50% 50%;
  background:transparent;
}
.detail-media--thumbnail.project-card--vision-composite .card-visual {
  top:50%; bottom:auto;
  /* Bias slightly toward the top of the source so the TV's upper bezel stays visible. */
  transform:translateY(-43%);
}
.detail-media--thumbnail.project-card--vision-composite .composite-bg,
.detail-media--thumbnail.project-card--vision-composite .project-video--screen {
  object-position:50% 50%;
}

/* Project headings and summary */
.detail-company { margin:0 0 22px; font-family:Inter,Arial,sans-serif; font-size:16px; font-weight:700; line-height:1.4; color:#171717; }
.detail-description { white-space:normal; max-width:840px; }
/* Search hero: crop from left so the TV's right edge remains visible. */
.detail-media--thumbnail.project-card--static-image .project-image { object-fit:cover; object-position:100% 50%; }

/* Detail pages: wide media, without the home-card title or gradient */
.detail-media--thumbnail { aspect-ratio:16/9; }
.detail-media--thumbnail::after { display:none; }
.detail-media--thumbnail .card-title { display:none; }
.detail-media--thumbnail .card-visual { transition:none; }
.detail-media--thumbnail .project-image,
.detail-media--thumbnail .project-video { object-fit:contain; background:#111; }
/* Keep the living-room TV geometry consistent instead of stretching the screen overlay. */
.detail-media--thumbnail.project-card--vision-composite .card-visual {
  height:auto; aspect-ratio:4/3; top:50%; bottom:auto; transform:translateY(-50%);
}
.detail-media--thumbnail.project-card--vision-composite .composite-bg { object-fit:cover; }
.detail-media--thumbnail.project-card--vision-composite .project-video--screen { object-fit:cover; }

/* Detail media: center the image rather than anchoring it to the top. */
.detail-media--thumbnail.project-card--static-image .project-image {
  object-fit:cover;
  object-position:50% 50%;
  background:transparent;
}
.detail-media--thumbnail.project-card--vision-composite .card-visual {
  top:50%; bottom:auto;
  /* Bias slightly toward the top of the source so the TV's upper bezel stays visible. */
  transform:translateY(-43%);
}
.detail-media--thumbnail.project-card--vision-composite .composite-bg,
.detail-media--thumbnail.project-card--vision-composite .project-video--screen {
  object-position:50% 50%;
}

.detail-description { font-size:16px !important; line-height:1.6; color:#858585; }
.detail-description br + br { display:none; }
.project-facts {display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:40px;padding:28px 0 34px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;}
.project-facts h2 {font-size:13px;font-weight:500;color:#888;margin:0 0 10px;}
.project-facts p,.project-facts ul {font-size:15px;line-height:1.65;color:#242424;margin:0;padding:0;list-style:none;}
.project-facts li+li{margin-top:3px;}
@media(max-width:600px){.project-facts{grid-template-columns:1fr;gap:22px;margin-top:28px;}}

/* Sidebar hierarchy: thin dividers and right-aligned toggle arrows */
.main-nav { margin-top: 8px; }
.menu-section, .interaction-section, .about-section { margin: 0; }
.menu-heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(23,23,23,.12);
}
.menu-heading .menu-title { flex: 1; text-align: left; }
.chevron-button {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 2px;
  color: #858585;
}
.menu-children { margin: 0; padding: 0 0 18px; gap: 10px; }
.menu-children a { color: #b1b1b1; }
.menu-children a.active { color: #171717; font-weight: 500; }
.about-section { border-top: 1px solid rgba(23,23,23,.12); padding: 16px 0; }
.about-section .menu-title { display:block; }
@media (max-width: 840px) {
  .menu-heading { padding: 14px 0; }
  .about-section { padding: 14px 0; }
  .menu-children { padding-bottom: 14px; }
}

/* Navigation hierarchy revisions */
.menu-children a.active { color:#626262; font-weight:600; }
.about-section { border-bottom:1px solid rgba(23,23,23,.12); }
/* Compact project fact grid above hero */
.detail .project-facts {
  margin:26px 0 32px;
  padding:24px 0 26px;
  border-top:1px solid #dedede;
  border-bottom:1px solid #dedede;
}
.detail .detail-company { margin-bottom:16px; }
.detail h1 { margin-bottom:0; }
/* Outcomes use light tiles to separate results from navigation and case-study copy. */
.outcomes { margin-top:34px; }
.outcomes h2 { font-size:17px; font-weight:600; margin:0 0 18px; }
.outcome-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.outcome-card {background:#ececec;border-radius:18px;padding:22px 24px;min-height:115px;display:flex;flex-direction:column;gap:12px;}
.outcome-card span {font-size:14px;color:#858585;}
.outcome-card strong {font-size:25px;font-weight:500;}
.outcomes-note {font-size:12px;color:#999;margin:12px 0 0;}
@media(max-width:640px){.outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.outcome-card{min-height:100px;padding:18px;}}


/* Wide project overview: four horizontal columns, as in the supplied reference. */
.detail .project-facts {
  display:grid;
  grid-template-columns: 1.04fr .92fr 1.7fr 1.2fr;
  gap:26px;
  margin:38px 0 42px;
  padding:0;
  border:0;
  align-items:start;
}
.detail .project-facts .fact {min-width:0;}
.detail .project-facts .fact h2 {
  color:#929292;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.07em;
  line-height:1.5;
  font-weight:600;
  margin:0 0 12px;
}
.detail .project-facts .fact p,
.detail .project-facts .fact ul {
  font-size:14px;
  line-height:1.75;
  color:#292929;
}
.detail .project-facts .fact li+li {margin-top:2px;}

/* Spacious divider and editorial case-study section below impact tiles. */
.detail .detail-body {
  max-width:none;
  margin:52px 0 110px;
  padding-top:105px;
  border-top:1px solid #dadada;
}
.detail .detail-body h2 {
  text-transform:uppercase;
  color:#929292;
  letter-spacing:.075em;
  font-size:13px;
  font-weight:500;
  margin:0 0 20px;
}
.detail .detail-body p {
  max-width:760px;
  font-size:18px;
  line-height:1.65;
  margin:0 0 74px;
}
.detail .detail-body .preview-note {font-size:13px;}
@media (max-width: 1100px) {
  .detail .project-facts {gap:16px;grid-template-columns:.9fr .8fr 1.6fr 1.1fr;}
  .detail .project-facts .fact p,.detail .project-facts .fact ul{font-size:13px;}
}
@media (max-width: 760px) {
  .detail .project-facts {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;margin:30px 0;}
  .detail .detail-body {padding-top:64px;margin-top:40px;}
}
@media (max-width: 480px) {
  .detail .project-facts {grid-template-columns:1fr 1fr;gap:22px 12px;}
  .detail .project-facts .fact p,.detail .project-facts .fact ul{font-size:12px;}
  .detail .detail-body{padding-top:50px;}
}

/* Consistent menu emphasis: active is distinguished only by color, not by weight. */
.menu-children a.active,
.menu-children a[aria-current="page"] {color:#626262 !important;font-weight:400 !important;}
/* Four equal-width columns: consistent alignment of timeline, role, tasks, team. */
@media (min-width:761px){
 .detail .project-facts{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:20px !important;}
}
.outcome-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:760px){.outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* v-next: evenly-spaced information columns, softened palette, left-anchored navigation. */
:root { color:#333333; }
body { color:#333333; }
.name, .menu-title, .section-heading, .detail .detail-company,
.detail h1, .simple-page h1, .detail .project-facts .fact p,
.detail .project-facts .fact ul { color:#333333 !important; }

/* Keep layout bounded on ultrawide displays, while placing navigation near left edge. */
@media (min-width: 841px) {
  .site-shell {
    box-sizing:border-box;
    width:calc(100% - 80px);
    max-width:1560px;
    margin-inline:auto;
    grid-template-columns: minmax(240px, 270px) minmax(0,1fr);
    column-gap:clamp(48px,4.5vw,82px);
    padding-left:0;
    padding-right:0;
  }
  .detail .project-facts {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:24px !important;
  }
}
@media (min-width: 841px) and (max-width: 1100px) {
  .site-shell { width:calc(100% - 48px); grid-template-columns:240px minmax(0,1fr); column-gap:40px; }
}

/* Outcome metrics: consistent cards and equal 16px regular-weight typography. */
.outcome-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.outcome-card {background:#F2F2F2 !important;min-width:0;}
.outcome-card span,
.outcome-card strong {
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.45;
}
.outcome-card span {color:#777;}
.outcome-card strong {color:#333333;}
@media (max-width:760px) { .outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px) { .outcome-card{padding:16px 14px;} }

/* Final editorial alignment and color refinements */
@media(min-width:1101px) {
  .detail .project-facts {
    display:grid !important;
    grid-template-columns:max-content max-content max-content max-content !important;
    justify-content:space-between !important;
    column-gap:20px !important;
  }
}
@media(min-width:761px) and (max-width:1100px){
  .detail .project-facts {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:25px 30px !important;
  }
}
.detail .detail-media--thumbnail,.detail .detail-media,.detail .detail-image{border-radius:20px !important;}
.outcome-card{background:#F5F5F5 !important;}
.outcome-card span {color:#929292 !important;}
.detail .project-facts .fact h2 {font-weight:400 !important; color:#929292 !important;}
.external-icon {display:none !important;}
.external-arrow {font-size:1em;font-weight:400;line-height:1;vertical-align:baseline;}
.detail .detail-body p {color:#333333 !important;}

/* Visibility and alignment corrections */
.outcome-card {background:#E7E7E7 !important;}
/* The case-study copy spans the same full column as the divider. */
.detail .detail-body p {max-width:none !important;width:100%;}
/* Compact diagonal external-link arrow, with a visibly wider arrow head. */
.external-link {gap:8px !important;justify-content:flex-start;}
.external-arrow {font-size:0 !important;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;line-height:1;vertical-align:middle;}
.external-arrow svg {width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;}

/* Requested detail polish */
.outcome-card { background: #F7F7F7 !important; }
.external-arrow, .external-arrow svg { width:12px !important; height:12px !important; }
.external-arrow { font-size:12px !important; }
.challenge-illustration { margin: -35px 0 70px; padding:20px 16px; background:#080808; border-radius:20px; overflow:hidden; }
.challenge-illustration img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:600px) {.challenge-illustration {margin: -32px 0 48px; padding:12px 8px; border-radius:12px;}}

/* Exact user-requested colors for the page and outcomes */
:root,html,body{background-color:#FFFFFF !important;}
.outcome-card{background-color:#F7F7F7 !important;}
.challenge-illustration{background:#FFFFFF !important; padding:0 !important; border-radius:0 !important;}

/* About: portrait and personal introduction */
.about-layout {
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1fr);
  align-items:start;
  gap:clamp(28px, 4vw, 72px);
  width:100%;
  padding-top:4px;
}
.about-portrait {width:100%;overflow:hidden;border-radius:0;}
.about-portrait img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 4 / 5;
  object-fit:cover;
  object-position:center 40%;
}
.about-copy {padding-top:clamp(0px, 1.8vw, 24px);max-width:520px;}
.about-copy h1 {font-size:clamp(27px,3vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.2;color:#333;margin:0 0 28px;}
.about-copy p {font-size:16px;line-height:1.85;color:#333;margin:0 0 22px;}
@media(max-width:750px) {
  .about-layout {grid-template-columns:1fr;gap:26px;}
  .about-portrait{max-width:480px;}
  .about-copy{padding-top:0;}
}

/* About body copy */
.about-copy p {font-size:16px;}

/* Compact About portrait aligned with the sidebar heading, and a full-width divider */
.about-layout {
  grid-template-columns: minmax(190px, 255px) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 58px);
  row-gap: 0;
  padding-top: 0;
  align-items:start;
}
.about-portrait {width:100%;border-radius:0;}
.about-portrait img {width:100%;height:250px;aspect-ratio:auto;object-fit:cover;object-position:center 35%;}
.about-copy {padding-top:0;}
.about-copy p:last-child {margin-bottom:0;}
.about-layout::after {content:"";display:block;grid-column:1 / -1;border-top:1px solid #dedede;margin-top:42px;}
@media (max-width:750px) {
  .about-layout {grid-template-columns:1fr;gap:26px;}
  .about-portrait {max-width:260px;}
  .about-portrait img {height:250px;}
  .about-layout::after {margin-top:12px;}
}

/* About portrait: smaller, aligned grayscale/color crossfade */
.about-layout{grid-template-columns:minmax(170px, 210px) minmax(0,1fr);column-gap:clamp(28px,4vw,58px);}
.about-portrait{position:relative;width:100%;height:210px;overflow:hidden;}
.about-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.about-portrait .portrait-color{opacity:0;transition:opacity .35s ease;}
.about-portrait:hover .portrait-color{opacity:1;}
@media (max-width:750px){.about-layout{grid-template-columns:1fr;}.about-portrait{max-width:210px;height:210px;}}
@media (prefers-reduced-motion:reduce){.about-portrait .portrait-color{transition:none;}}

.about-page{padding-top:8px;}

/* About sections: content and layout */
.about-page { max-width:1060px; margin-top:-8px; }
.about-page .about-layout::after {margin-top:46px;}
.about-section-content {margin-top:38px; padding-bottom:46px; border-bottom:1px solid #DEDEDE;}
.about-section-content h2 {font-family:Inter,Arial,sans-serif;font-size:17px;line-height:1.4;font-weight:500;color:#333;margin:0 0 28px;}
.experience-list {display:grid;gap:0;}
.experience-row {display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:baseline;gap:22px;padding:13px 0;border-bottom:1px solid #F0F0F0;font-size:15px;line-height:1.55;color:#333;}
.experience-row:last-child{border-bottom:0;}
.experience-role {font-weight:400;color:#666;}
.experience-dates{font-size:14px;color:#969696;text-align:right;white-space:nowrap;}
.life-section {border-bottom:0;padding-bottom:80px;}
.life-intro {font-size:16px;line-height:1.65;color:#8b8b8b;margin:-12px 0 32px;}
.life-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px;align-items:start;}
.life-image-placeholder {display:flex;align-items:center;justify-content:center;background:#F3F3F3;border-radius:0;color:#B6B6B6;font-size:11px;letter-spacing:.12em;aspect-ratio:4/5;}
.life-item--short .life-image-placeholder{aspect-ratio:5/4;}
.life-placeholder-label{font-size:13px;color:#949494;margin:10px 0 0;}
@media(max-width:1050px){.experience-row{grid-template-columns:1fr;gap:4px;}.experience-dates{text-align:left;}}
@media(max-width:650px){.life-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;}.about-section-content{margin-top:30px;}.experience-row{font-size:14px;}}

/* Life Lately photography gallery */
.about-section-content h2{font-size:25px;line-height:1.25;letter-spacing:-.03em;font-weight:500;}
.life-item{margin:0;min-width:0;}
.life-image-placeholder{overflow:hidden;display:block;background:#F7F7F7;}
.life-image-placeholder img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease;}
.life-item:hover .life-image-placeholder img{transform:scale(1.025);}
.life-placeholder-label{line-height:1.5;color:#777;}
.life-placeholder-label strong{color:#333;font-weight:500;}
@media(prefers-reduced-motion:reduce){.life-image-placeholder img{transition:none;}}

/* Life Lately: uniformly aligned 3 × 2 photo grid. */
.life-grid{align-items:stretch;grid-auto-rows:auto;row-gap:26px;}
.life-item{display:flex;flex-direction:column;min-width:0;}
.life-image-placeholder,
.life-item--short .life-image-placeholder,
.life-item--tall .life-image-placeholder{aspect-ratio:4 / 5;flex:none;}
.life-placeholder-label{margin-top:10px;min-height:20px;}

/* Interaction is a standalone destination, not an accordion. */
.interaction-section .menu-heading{justify-content:flex-start;}
.interaction-section .menu-title.active{color:#626262;}
.interaction-page .section-heading{margin:0 0 16px;font-weight:500;}
.interaction-intro{color:#858585;font-size:16px;line-height:1.65;margin:0 0 30px;}
.interaction-gallery{border-top:1px solid #e5e5e5;padding-top:30px;}
.interaction-empty{border:1px dashed #e3e3e3;border-radius:16px;color:#999;font-size:15px;padding:75px 20px;text-align:center;}
/* Editorial two-photo columns: a tall and a short card per column. */
.life-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
.life-column{display:flex;flex-direction:column;gap:28px;min-width:0;}
.life-item{margin:0;display:block;}
.life-item--tall .life-image-placeholder{aspect-ratio:4 / 5;}
.life-item--short .life-image-placeholder{aspect-ratio:5 / 4;}
.life-image-placeholder{flex:none;}
@media(max-width:650px){.life-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.life-column{gap:22px}}
@media(max-width:440px){.life-grid{grid-template-columns:1fr}.life-column{gap:22px}}

/* About section rhythm: balanced divider spacing with a tighter Experience heading. */
.about-page .about-layout::after { margin-top:52px; }
.about-section-content { margin-top:52px; padding-bottom:52px; }
.about-section-content:not(.life-section) h2 { margin-bottom:12px; }
@media (max-width:650px) {
  .about-page .about-layout::after { margin-top:38px; }
  .about-section-content { margin-top:38px; padding-bottom:38px; }
}

@media (max-width: 750px) { .about-page { margin-top: 0; } }

/* Quiet scroll reveal — sections appear once, navigation stays stable. */
.reveal-pending { opacity:0; transform:translate3d(0, 18px, 0); }
.reveal-visible { animation:softReveal .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes softReveal {
  from {opacity:0; transform:translate3d(0,18px,0);}
  to {opacity:1; transform:translate3d(0,0,0);}
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending,.reveal-visible {opacity:1 !important;transform:none !important;animation:none !important;}
}

/* Home thumbnails only: square corners. Detail hero stays 20px. */
.project-card { border-radius: 0 !important; }

/* Square corners on all project detail hero media */
.detail .detail-media--thumbnail, .detail .detail-media, .detail .detail-image { border-radius:0 !important; }

/* External resources for project case studies */
.detail-title-row {display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.detail-title-row h1 {margin-bottom:0;}
.detail-resource-link {display:inline-flex;gap:7px;align-items:center;flex-shrink:0;color:#555;font-family:Inter,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-decoration:none;border-bottom:1px solid #aaa;padding-bottom:3px;transition:color .2s,border-color .2s;}
.detail-resource-link:hover,.detail-resource-link:focus-visible {color:#222;border-color:#333;}
.detail-resource-link span {font-size:14px;font-weight:500;}
.patent-resource-row {display:flex;align-items:end;justify-content:space-between;gap:22px;margin-top:30px;padding:21px 0 8px;border-top:1px solid #dedede;}
.patent-resource-row > div {display:flex;flex-direction:column;gap:8px;}
.patent-resource-caption {font-size:12px;color:#929292;letter-spacing:.07em;line-height:1.4;font-weight:400;}
.patent-resource-number {font-size:16px;color:#333;font-weight:400;}
@media(max-width:600px){.detail-title-row{align-items:start;gap:12px;}.patent-resource-row{align-items:start;}.detail-resource-link{font-size:13px;}}


/* Project award and showcase logos below the detail hero, preserving aspect ratios. */
.project-awards {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  column-gap:clamp(20px,3.2vw,42px);
  row-gap:18px;
  margin:28px 0 8px;
  min-height:52px;
}
.project-award-logo {
  display:block;
  width:auto;
  height:auto;
  max-width:min(150px,28vw);
  max-height:54px;
  object-fit:contain;
  flex:0 0 auto;
}
@media(max-width:600px){
  .project-awards{gap:15px 22px;margin-top:20px;}
  .project-award-logo{max-height:42px;max-width:110px;}
}

/* Compact award marks beside title links, never beneath hero media. */
.detail-title-row { align-items:center; }
.detail-title-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; min-width:0; }
.detail-title-actions .project-awards { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0; min-height:0; }
.detail-title-actions .project-award-logo { width:auto; height:auto; max-height:32px; max-width:74px; object-fit:contain; }
.detail-title-actions .detail-resource-link {white-space:nowrap;}
.outcome-patent-link { font:400 16px/1.45 Inter,Arial,sans-serif; color:#333; text-decoration:underline; text-decoration-color:#999; text-underline-offset:3px; overflow-wrap:anywhere; }
.outcome-patent-link:hover { text-decoration-color:#333; }
.outcome-patent-link span { font-size:12px!important; color:inherit!important; }
/* Link row removed: preserve the same spacing below metrics as other projects. */
.detail .detail-body {margin-top:52px;}
@media(max-width:760px){
 .detail-title-actions {width:100%;justify-content:flex-start;}
 .detail-title-actions .project-award-logo {max-height:27px;max-width:64px;}
}

/* Patent and award detail refinement */
.outcome-patent-link, .outcome-patent-link:hover, .outcome-patent-link:focus-visible { text-decoration: none !important; border-bottom:0 !important; }
.outcome-patent-link:hover, .outcome-patent-link:focus-visible { color:#555; }
.patent-arrow {display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;margin-left:3px;vertical-align:middle;}
.patent-arrow svg {width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;}
.detail-title-actions {gap:clamp(26px,3.5vw,48px) !important;}
.detail-title-actions .project-awards {column-gap:clamp(16px,2vw,28px) !important;row-gap:14px !important;}
.detail-title-actions .detail-resource-link {border-bottom:0 !important;padding-bottom:0 !important;}
@media(max-width:760px){.detail-title-actions {gap:20px !important;}}

/* Ballie storytelling panel: editable Work Sans text, accessible artwork */
.ballie-story {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);
  align-items:center;
  gap:clamp(16px,2.5vw,36px);
  width:100%;
  min-height:410px;
  margin:35px 0 90px;
  padding:clamp(32px,5vw,60px) clamp(30px,4vw,55px);
  box-sizing:border-box;
  border-radius:20px;
  background:#222222;
  color:#ffffff;
}
.ballie-story::before {
  content:""; position:absolute; width:30px; height:30px;
  background:#ffffff; top:-1px; left:50%;
  transform:translateX(-50%) rotate(45deg) translateY(-21px);
}
.ballie-story-copy {
  position:relative; z-index:1;
  min-width:0;
  max-width:550px;
  font-family:'Work Sans',sans-serif;
  font-size:clamp(30px,3vw,40px);
  font-weight:400;
  font-style:normal;
  letter-spacing:-.04em;
  line-height:1.2;
  overflow-wrap:normal;
}
.ballie-story-copy span{color:#ffcb83;}
.ballie-story-art {width:100%;max-width:480px;height:auto;object-fit:contain;display:block;justify-self:center;}
@media (max-width:720px) {
 .ballie-story {grid-template-columns:1fr;gap:32px;min-height:0;padding:56px 40px 60px;}
 .ballie-story-copy {width:100%;max-width:none;font-size:clamp(30px,7vw,40px);}
 .ballie-story-art {max-width:380px;}
}
@media (max-width:420px){.ballie-story{padding:54px 26px 50px;}.ballie-story-copy{font-size:clamp(28px,7.8vw,36px);}}


/* Ballie case study — Figma 1:2. Hero and outcomes remain untouched. */
.ballie-figma{width:min(100%,760px);margin:clamp(80px,9vw,138px) auto 100px;color:#333;font-family:Inter,sans-serif}
.ballie-figma *{box-sizing:border-box}
.bf-section{display:flex;flex-direction:column;gap:24px;margin:0 0 100px}
.ballie-figma h2{margin:0;font-size:16px;line-height:1.35;font-weight:400;letter-spacing:0;color:#8a8a8a}
/* Keep each body heading visible until the next section pushes it away.
   Internal spacing keeps the sticky boundary continuous between sections. */
.ballie-figma > .bf-section{margin-bottom:0}
.ballie-figma > .bf-section > :last-child{margin-bottom:100px}
.ballie-figma > .bf-section > h2{
 position:sticky;
 top:0;
 z-index:2;
 flex-shrink:0;
 padding-block:12px;
 margin-block:-12px;
 background:#fff;
}
.ballie-figma p{margin:0;font-size:16px;line-height:1.6;font-weight:400;color:#333}
.ballie-figma em{font-style:italic}
.bf-problem{display:block;width:100%;max-width:690px;height:auto;object-fit:contain;margin:25px auto 12px}
.bf-call{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:48px 42px;min-height:330px;background:#333;border-radius:20px;overflow:hidden}
.bf-call:before{content:"";position:absolute;left:50%;top:-18px;width:30px;height:30px;background:#fff;transform:rotate(45deg)}
.ballie-figma .bf-call p{font-family:"Work Sans",sans-serif;color:#fff;font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em}
.ballie-figma .bf-call em{color:#ffce80;font-style:normal}
.bf-call img{display:block;width:100%;height:auto;object-fit:contain}
.bf-step{display:flex;flex-direction:column;gap:28px;margin-top:35px}
.bf-step h3{display:flex;gap:12px;align-items:center;margin:0;padding-bottom:10px;border-bottom:0;font-size:16px;font-weight:400;color:#feb33c}
.bf-step h3 span{color:#ffce80}
.bf-identify{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.bf-identify>div{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#f9f9fb;border-radius:14px}
.bf-identify strong{font-size:16px;font-weight:600}
.ballie-figma .bf-artwork{display:block;width:auto;max-width:100%;height:auto;align-self:flex-start}
.bf-identify>div{padding:24px 16px}
.bf-identify img{display:block;width:auto;max-width:100%;height:auto}
.ballie-figma .bf-identify p{font-size:13px;color:#888;text-align:center}
.bf-reach{background:#fbf9f3;border-radius:18px;padding:25px;display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}
.bf-reach img{width:100%;max-height:290px;object-fit:contain}
.ballie-figma .bf-reach p{font-size:15px;line-height:2;color:#8e740d}
.bf-limitation{background:#333;color:#fff;border-radius:20px;padding:50px 60px;display:flex;flex-direction:column;gap:12px;margin-top:36px}
.bf-limitation strong{font-size:16px;font-weight:400}
.ballie-figma .bf-limitation p{color:#b0b0b0;font-size:16px}
.bf-gestures{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.bf-gestures span{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;min-height:100px;border:1px solid #777;border-radius:12px;text-align:center;font-size:14px}
.bf-gestures small{font-size:12px;color:#bcbcbc}
.bf-gallery{margin-top:28px;min-width:0}
.bf-gallery-track{display:flex;align-items:flex-start;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain}
.bf-gallery-track::-webkit-scrollbar{display:none}
.bf-gallery-track figure{margin:0;flex:0 0 auto;width:max-content;max-width:100%;scroll-snap-align:start;border-radius:16px;overflow:hidden}
.bf-gallery-track img,.bf-gallery-track video{display:block;width:auto;max-width:100%;height:auto}
.bf-gallery-buttons{display:flex;gap:22px;align-items:center;margin-top:22px}
.bf-gallery-buttons button{font:400 34px/1 Inter,sans-serif;color:#171717;background:transparent;border:0;cursor:pointer;padding:8px 12px}
.bf-gallery-buttons button:disabled{color:#b8b8b8;cursor:default}
.bf-counter{margin-left:auto;color:#999;font-size:13px}
.bf-section>.bf-step>p{max-width:690px}
@media(max-width:700px){
 .ballie-figma{width:100%;margin:65px auto 70px}
 .ballie-figma > .bf-section > :last-child{margin-bottom:75px}
 .bf-call{grid-template-columns:1fr;padding:50px 32px 42px;gap:35px}
 .bf-call img{max-width:350px;margin:auto}
 .bf-identify{gap:12px}
 .bf-identify>div{min-height:160px;padding:12px}
 .bf-reach{grid-template-columns:1fr;text-align:center}
 .bf-limitation{padding:30px 24px}
 .bf-gestures{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Shared maximum width for project detail header, hero, metrics and body.
   Keep the homepage gallery and sidebar layout unchanged. */
.detail {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}
.detail > .ballie-figma {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Divider below project outcome cards, or below the hero when no outcome cards. */
.detail-content-divider{height:1px;width:100%;background:#e8e8e8;margin-top:72px;margin-bottom:72px;}
.detail-content-divider + .ballie-figma{margin-top:0;}
.detail-content-divider + .detail-body{margin-top:0;}
@media(max-width:840px){.detail-content-divider{margin-top:48px;margin-bottom:48px;}}

/* Ballie artwork uses the design's display dimensions, not export resolution. */
.detail > .ballie-figma{max-width:760px;margin-inline:0;text-align:left}
.ballie-figma > .bf-section{gap:24px}
.bf-challenge-row{display:grid;grid-template-columns:278.5px 16px minmax(0,1fr);gap:60px;align-items:center;margin-top:36px}
.bf-challenge-row .bf-problem{width:278.5px;max-width:100%;height:auto;margin:0}
.bf-solution-arrow{color:#999;font-size:20px;line-height:1}
.ballie-figma .bf-solution-copy{font-family:"Work Sans",sans-serif;font-size:32px;line-height:1.2;letter-spacing:-.02em}
.ballie-figma .bf-solution-copy em{color:#feb43c;font-style:normal}
.ballie-figma > .bf-section > .bf-step{margin-top:56px;gap:20px}
.bf-identify{grid-template-columns:minmax(0,270px) minmax(0,269px);gap:102px;align-items:start}
.bf-identify > div{position:relative;min-height:0;padding:0;gap:0;background:none;border-radius:0}
.bf-identify strong{position:absolute;top:0;left:0;font-size:12px;line-height:20px;letter-spacing:-.02em;font-weight:700}
.bf-identify img{width:100%;max-width:100%;height:auto}
.ballie-figma .bf-artwork[src$="connect-phone-call.png"]{width:480px;max-width:100%;align-self:flex-start}
.bf-limitation{margin-top:56px;gap:12px}
.bf-limitation-row{display:grid;grid-template-columns:minmax(0,310px) minmax(0,308px);gap:22px;align-items:center;margin-top:18px}
.ballie-figma .bf-limitation-row .bf-artwork{width:310px;max-width:100%;height:auto}
.ballie-figma .bf-limitation .bf-limitation-question{width:308px;max-width:100%;font-family:"Work Sans",sans-serif;font-weight:400;font-size:40px;line-height:47px;letter-spacing:-.02em;color:#fff}
.ballie-figma .bf-limitation-question em{font-style:normal;color:#ffd085}
.bf-foot-row{display:flex;justify-content:space-between;align-items:center;gap:30px}
.ballie-figma .bf-foot-row .bf-artwork[src$="touch-by-foot.png"]{width:260px;max-width:100%;flex:0 1 260px;min-width:0}
.ballie-figma .bf-foot-row .bf-artwork[src$="foot-interaction.png"]{width:422.5px;max-width:100%;flex:0 1 422.5px;min-width:0}
@media(max-width:700px){
 .bf-challenge-row{grid-template-columns:minmax(0,278.5px) 16px;gap:24px}
 .bf-challenge-row .bf-solution-copy{grid-column:1 / -1}
 .bf-identify{gap:clamp(16px,6vw,40px)}
 .bf-limitation-row{grid-template-columns:1fr;gap:24px}
 .ballie-figma .bf-limitation .bf-limitation-question{font-size:32px;line-height:38px}
 .bf-foot-row{flex-direction:column;align-items:flex-start;gap:32px}
 .ballie-figma .bf-foot-row .bf-artwork{flex:none}
}

/* Takeaway caption groups: 19px title, 10px gaps, 15px description. */
.ballie-figma > .bf-section > .bf-takeaway-item{gap:10px}
.ballie-figma .bf-takeaway-item h3{order:0;display:block;margin:0;padding:0;border:0;font:400 16px/19px Inter,sans-serif;color:#feb33c}
.ballie-figma .bf-takeaway-item::before{content:none}
.ballie-figma .bf-takeaway-item p{order:2;max-width:none;font:400 12px/15px Inter,sans-serif;color:#bcbcbc}
/* Sticky headings share progress through the full page. */
.ballie-figma > .bf-section > h2::after{
 content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
 background:#000;transform:scaleX(var(--page-progress,0));
 transform-origin:left;opacity:0;pointer-events:none;
}
.ballie-figma > .bf-section > h2.bf-heading-stuck::after{opacity:1}

/* More space before each main section, contained within the sticky boundary. */
.detail-content-divider + .ballie-figma{margin-top:32px}
.ballie-figma > .bf-section > :last-child{margin-bottom:160px}
.ballie-figma > .bf-section > h2{min-height:80px;padding:28px 0 0;margin:0;display:flex;align-items:flex-end}
.bf-takeaway-art{display:block;width:100%;max-width:760px;height:auto;margin-top:16px}
/* Equal media heights with natural widths: no fixed-aspect-ratio frames. */
.bf-gallery-track figure{width:max-content;max-width:none;border-radius:12px}
.bf-gallery-track img,.bf-gallery-track video{height:220px;width:auto;max-width:none}
.bf-gallery-buttons{gap:12px;margin-top:14px}
.bf-gallery-buttons button{font-size:24px;padding:6px 10px}
@media(max-width:700px){
 .detail-content-divider + .ballie-figma{margin-top:20px}
 .ballie-figma > .bf-section > :last-child{margin-bottom:120px}
 .bf-gallery-track img,.bf-gallery-track video{height:160px}
}

.bf-gallery-track::after{content:"";flex:0 0 var(--gallery-tail,0px)}

/* Align Ballie content with the detail divider rather than centering its column. */
.ballie-figma .bf-identify > div{align-items:flex-start}
.ballie-figma .bf-gallery,.ballie-figma .bf-takeaway-art{align-self:flex-start}
.ballie-figma .bf-gallery{width:100%}
.ballie-figma .bf-foot-row{justify-content:flex-start}
.ballie-figma .bf-counter{margin-left:0}

/* Center the pinned label above the bar without changing the 80px box.
   Unpinned headings retain their 24px gap to the description. */
.ballie-figma > .bf-section > h2.bf-heading-stuck{
 padding:28px 0;
 align-items:center;
}

/* Front and side call demonstrations below Touch by foot. */
.ballie-figma .bf-foot-demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;width:100%;max-width:760px;min-width:0;align-items:start}
.ballie-figma .bf-foot-demos > video{display:block;width:100%;max-width:100%;min-width:0;height:auto;aspect-ratio:16 / 9;object-fit:contain;border-radius:14px}
@media(max-width:700px){.ballie-figma .bf-foot-demos{gap:16px}.ballie-figma .bf-foot-demos > video{border-radius:10px}}

/* In the stacked mobile layout, desktop flex widths must not become heights. */
@media(max-width:700px){
 .ballie-figma .bf-foot-row > .bf-artwork[src]{flex:none;height:auto;max-width:100%;align-self:flex-start}
}

/* Challenge heading accent. */
.ballie-figma > .bf-section:first-child > h2{color:#FF6666}

/* Daily Board Goal uses the shared divider once. */
.detail .daily-board-body{max-width:none;border-top:0;padding-top:0;margin-top:0}
.detail .daily-board-body h2{font-size:16px;font-weight:400;color:#8a8a8a;line-height:1.35;margin:0 0 24px}
.detail .daily-board-body > p{font-size:16px;line-height:1.6;margin:0 0 40px}
.db-compare{position:relative;width:100%;overflow:hidden;border-radius:20px;touch-action:pan-y;cursor:ew-resize;isolation:isolate}
.db-compare > img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.db-compare > .db-compare-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--compare))}
.db-compare-line{position:absolute;top:0;bottom:0;left:var(--compare);width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 3px #0005}
.db-compare-line > span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;color:#333;display:grid;place-items:center;font:24px/1 Arial,sans-serif;box-shadow:0 1px 6px #0003}
.db-compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.db-compare:focus-within{outline:2px solid #333;outline-offset:4px}
@media(max-width:700px){.db-compare{border-radius:12px}.db-compare-line > span{width:28px;height:28px}}

/* Daily Board research: scoped to avoid changing Ballie or the Goal slider. */
.db-story{width:100%;max-width:760px;margin:160px 0 0;font-family:Inter,Arial,sans-serif}
.db-section{display:flex;flex-direction:column;gap:60px}
.detail .db-story h2{margin:0;font-size:16px;font-weight:400;line-height:1.35;color:#8a8a8a}
.db-research-step{display:flex;flex-direction:column;gap:40px}
.db-research-step + .db-research-step{margin-top:20px}
.detail .db-story h3{font-size:16px;font-weight:400;line-height:1.35;margin:0}
.detail .db-step-copy h3{color:#dd326b;margin-bottom:16px}
.db-step-copy h3 > span{color:#e07599;margin-right:6px}
.detail .db-story p{font-size:16px;line-height:1.4;margin:0;color:#333}
.detail .db-story .db-caption{font-size:12px;line-height:1.4;color:#bcbcbc !important;margin-top:6px}
.db-survey-graph{display:block;width:100%;height:auto}
.db-interviews{display:grid;grid-template-columns:263px minmax(0,1fr);gap:50px;align-items:start}
.db-findings{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:30px}
.db-findings li{padding:0;font-size:16px;line-height:1.6;color:#000}
.db-findings strong{font-size:16px;font-weight:700}
.detail .db-findings li p{font-size:14px;line-height:1.6;letter-spacing:-.01em;color:#6d6d6d !important}
.db-interview-photos{display:flex;flex-direction:column;gap:10px;min-width:0}
.db-photo{position:relative;width:324px;max-width:100%;aspect-ratio:324 / 180;overflow:hidden;border-radius:16px}
.db-photo-two{aspect-ratio:324 / 181}
.db-photo-source{position:absolute;max-width:none}
.db-photo-one > .db-photo-source{width:191.42%;height:257.31%;left:-49.58%;top:-65.97%}
.db-photo-two > .db-photo-source{width:118.11%;height:158.02%;left:-13.76%;top:-18.83%}
.db-photo-dot{position:absolute}
.db-dot-one{left:71.605%;top:19.444%}
.db-dot-two{left:0;top:42.541%}
.db-dot-three{left:13.58%;top:34.807%}
.db-dot-four{left:93.21%;top:38.122%}
.db-dot-five{left:23.457%;top:34.807%}
.db-dot-six{left:85.802%;top:35.359%}
.db-dot-seven{left:78.395%;top:30.387%}
.db-insight{background:#333;border-radius:20px;padding:50px 60px}
.detail .db-insight h3{color:#fff;margin-bottom:12px}
.detail .db-insight > p{color:#b0b0b0 !important}
.db-insight-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px}
.db-keywords{display:flex;align-items:center;flex:none}
.db-keyword{position:relative;flex:none;width:140px;height:140px;margin-right:-10px}
.db-keyword:last-child{margin-right:0}
.db-keyword > img{display:block}
.db-keyword > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font:500 18px/1.5 "Work Sans",sans-serif;color:#eb6793}
.db-insight-arrow{flex:none;transform:rotate(90deg)}
.db-insight-question{font:400 160px/1.05 Inter,sans-serif;letter-spacing:-.02em;color:rgba(235,103,147,.8);width:117px;text-align:center;flex:none}
@media(max-width:700px){
 .db-story{margin-top:120px}
 .db-interviews{grid-template-columns:1fr;gap:32px}
 .db-insight{padding:30px 24px}
 .db-insight-row{flex-wrap:wrap;justify-content:flex-start}
 .db-keywords{flex-wrap:wrap;max-width:100%;row-gap:12px}
 .db-insight-question{font-size:100px;width:auto}
}


/* Shared sticky section labels for every project detail body. */
.detail .detail-body .case-study-heading{
 position:sticky;top:0;z-index:2;min-height:80px;box-sizing:border-box;
 display:flex;align-items:flex-end;flex-shrink:0;
 margin:0;padding:28px 0 0;background:#fff;color:#8a8a8a;
 font:400 16px/1.35 Inter,Arial,sans-serif;
}
.detail .detail-body .case-study-heading.bf-heading-stuck{padding:28px 0;align-items:center}
.detail .detail-body .case-study-heading::after{
 content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
 background:#000;transform:scaleX(var(--page-progress,0));transform-origin:left;
 opacity:0;pointer-events:none;
}
.detail .detail-body .case-study-heading.bf-heading-stuck::after{opacity:1}
.detail-body > .case-study-section{display:flex;flex-direction:column;gap:24px}
.detail .detail-body > .case-study-section > p{margin:0}
.detail .detail-body > .case-study-section > :last-child{margin-bottom:160px}
.detail .daily-board-body > .case-study-section > p{font-size:16px;line-height:1.6;margin-bottom:16px}
.daily-board-body > .db-story{margin-top:0}
@media(max-width:700px){.detail .detail-body > .case-study-section > :last-child{margin-bottom:120px}}

/* Square media and panels throughout the Ballie case-study body. */
.ballie-figma img,
.ballie-figma video,
.ballie-figma .bf-gallery-track figure,
.ballie-figma .bf-call,
.ballie-figma .bf-reach,
.ballie-figma .bf-limitation{border-radius:0}
.ballie-figma .bf-artwork[src$="the-limitation.png"]{background:#fff}
.ballie-figma .bf-artwork[src$="connect-phone-call.png"]{background:#fffbf3}

/* Override the demo-specific desktop and mobile corner rules. */
.ballie-figma .bf-foot-demos > video{border-radius:0}
/* Remove the rounded export edge without stretching the underlying artwork. */
.bf-connect-art{width:480px;max-width:100%;overflow:hidden;align-self:flex-start}
.ballie-figma .bf-connect-art > .bf-artwork{display:block;width:100%;max-width:100%;height:auto;margin-block:-3.34%;background:transparent;border-radius:0}
/* Numbered step titles have exactly 20px to their artwork. */
.ballie-figma > .bf-section > .bf-step > h3{padding-bottom:0}

/* Updated Figma sections use flow text and independently scaled artwork canvases. */
.db-updated-section{margin-top:160px}
.db-updated-steps{display:flex;flex-direction:column;gap:80px;width:100%}
.db-updated-step{display:flex;flex-direction:column;gap:40px;width:100%;min-width:0}
.db-import-copy{width:100%;font:400 16px/normal Inter,sans-serif}
.db-import-copy > div{max-width:100%}
.db-art-viewport{position:relative;width:100%;min-width:0}
.db-art-canvas{width:760px;transform-origin:top left;display:flow-root;font:400 16px/normal Inter,sans-serif}
.db-art-canvas *{box-sizing:border-box}
.db-art-canvas p{margin:0}
.db-takeaway-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;width:100%}
.db-takeaway-card{display:flex;flex-direction:column;gap:8px;min-width:0;font:400 12px/normal Inter,sans-serif}
.db-takeaway-card > *{max-width:100%}
.db-photo,.db-insight{border-radius:0}
@media(max-width:700px){
 .db-updated-section{margin-top:120px}
 .db-updated-steps{gap:60px}
 .db-takeaway-grid{grid-template-columns:1fr;gap:40px}
}

/* Preserve Figma's mixed-case italic section variants. */
.detail .detail-body .db-updated-section > h2{text-transform:none;letter-spacing:0;column-gap:.25em}

/* Preserve visible space between STEP numbers and their titles. */
.db-import-copy p > span + span{margin-left:.35em}
.db-import-copy p > span:empty{display:none}

/* User-provided Daily Board artwork replaces matching prototype canvases. */
.db-provided-visual{width:100%;min-width:0;margin:0}
.db-provided-art{display:block;width:100%;max-width:100%;height:auto}
.db-iteration-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;align-items:start}
.db-iteration-images figcaption{font:400 12px/1.5 Inter,sans-serif;color:#bcbcbc;margin-top:12px}
.db-takeaway-video{display:block;width:100%;max-width:100%;height:auto;border-radius:0}
@media(max-width:600px){.db-iteration-images{grid-template-columns:1fr;gap:32px}}

/* Final Design 01–02 artwork at 80%, centered within the existing column. */
.db-provided-art[src*="/basic-system.png"],
.db-provided-art[src*="/cross-device-flow.png"],
.db-provided-art[src$="/cross-device-examples.png"]{width:80%;margin-inline:auto}
.db-patent-link{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;color:#333;line-height:1.5;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Interaction: a full-width single-column motion gallery. */
.interaction-page{max-width:1060px}
.interaction-page .section-heading{margin-bottom:12px}
.interaction-intro{margin:0 0 40px;font-size:15px;line-height:1.6;color:#929292}
.interaction-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:64px;padding-top:0;border-top:0}
.interaction-item{margin:0;min-width:0}
.interaction-thumbnail{position:relative;display:grid;place-items:center;aspect-ratio:4 / 3;overflow:hidden;background:#f7f7f7}
.interaction-preview-label{position:absolute;top:18px;left:20px;font:400 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#aaa}
.interaction-item figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px}
.interaction-item-title{font:400 14px/1.5 Inter,Arial,sans-serif;color:#555}
.interaction-item-index{font:400 11px/1.5 Inter,Arial,sans-serif;color:#b5b5b5}
@media(max-width:700px){
 .interaction-gallery{grid-template-columns:1fr;gap:30px}
 .interaction-intro{margin-bottom:28px}
}

/* Original loop videos, uncropped, with concise captions and inventor credits. */
.interaction-thumbnail{aspect-ratio:16 / 9;background:#f7f7f7}
.interaction-thumbnail > video{display:block;width:100%;height:auto;max-width:100%}
.interaction-item figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
.interaction-item-title{font-size:15px;color:#333}
.interaction-item-description{font:400 13px/1.6 Inter,Arial,sans-serif;color:#888;max-width:440px}
.interaction-item-credit{font:400 11px/1.5 Inter,Arial,sans-serif;color:#aaa;margin-top:4px}

/* Match the About Experience heading. */
.interaction-page .section-heading{font-family:Inter,Arial,sans-serif;font-size:25px;font-weight:500;line-height:1.25;letter-spacing:-.03em;color:#333}

/* Space each video and caption as a single gallery entry. */
.interaction-intro{max-width:600px}
.interaction-gallery{row-gap:64px;align-items:start}
.interaction-item:nth-child(even){margin-top:0}
.interaction-thumbnail{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.interaction-thumbnail > video{transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-origin:center}
.interaction-item-title{color:#555;transition:color .3s ease}
.interaction-item-description{transition:color .3s ease}
@media(hover:hover) and (pointer:fine){
 .interaction-item:hover .interaction-thumbnail{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.055)}
 .interaction-item:hover .interaction-thumbnail > video{transform:scale(1.018)}
 .interaction-item:hover .interaction-item-title{color:#111}
 .interaction-item:hover .interaction-item-description{color:#666}
}
@media(max-width:700px){
 .interaction-gallery{row-gap:36px}
 .interaction-item:nth-child(even){margin-top:0}
}
@media(prefers-reduced-motion:reduce){
 .interaction-thumbnail,.interaction-thumbnail > video,.interaction-item-title,.interaction-item-description{transition:none}
 .interaction-item:hover .interaction-thumbnail,.interaction-item:hover .interaction-thumbnail > video{transform:none}
}

/* Dark presentation is scoped to the Interaction route. */
html.interaction-dark,body.interaction-dark{background:#000 !important;color:#ededed;color-scheme:dark}
.interaction-dark .site-shell,.interaction-dark .sidebar,.interaction-dark .content{background:transparent}
.interaction-dark .name,.interaction-dark .menu-title,.interaction-dark .chevron-button{color:#dedede !important}
.interaction-dark .intro{color:#a0a0a0}
.interaction-dark .menu-children a,.interaction-dark .external-link{color:#888}
.interaction-dark .menu-children a:hover,.interaction-dark .external-link:hover,.interaction-dark .menu-children a.active,.interaction-dark #interaction-heading.active{color:#fff !important}
.interaction-dark .interaction-page .section-heading{color:#f2f2f2 !important}
.interaction-dark .interaction-intro{color:#aaa}
.interaction-dark .interaction-item-title{color:#e0e0e0}
.interaction-dark .interaction-item-description{color:#aaa}
.interaction-dark .interaction-item-credit{color:#858585}
.interaction-dark .interaction-thumbnail{background:#111}
.interaction-dark button:focus-visible,.interaction-dark a:focus-visible{outline-color:#eee}
@media(hover:hover) and (pointer:fine){
 .interaction-dark .interaction-item:hover .interaction-item-title{color:#fff}
 .interaction-dark .interaction-item:hover .interaction-item-description{color:#ccc}
}

/* Flat numbered project navigation. */
.sidebar .intro{margin-bottom:14px}
.sidebar-about{display:inline-block;color:#777;font-size:16px;line-height:1.4;margin-bottom:40px}
.sidebar-about:hover,.sidebar-about.active{color:#171717}
.numbered-nav{margin-top:0}
.numbered-projects{list-style:none;margin:0;padding:0}
.numbered-projects li{margin:0;border-bottom:1px solid #e3e3e3}
.numbered-projects a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:17px 0;color:#333;font:400 15px/1.45 Inter,Arial,sans-serif;letter-spacing:.015em}
.nav-project-number{font-variant-numeric:tabular-nums}
.numbered-projects a:hover,.numbered-projects a.active{color:#000}
.numbered-projects a.active > span:last-child{text-decoration:underline;text-underline-offset:4px}
.numbered-interaction{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e3e3e3;padding:17px 0;color:#333;font:400 15px/1.45 Inter,Arial,sans-serif;letter-spacing:.015em}
.interaction-status-dot{display:block;flex:none;width:1em;height:1em;border-radius:50%;background:#000;border:0;animation:interaction-pulse 2.4s ease-in-out infinite}
@keyframes interaction-pulse{0%,100%{background:#000}50%{background:#fff}}
.interaction-dark .sidebar-about{color:#aaa}
.interaction-dark .sidebar-about:hover,.interaction-dark .sidebar-about.active{color:#fff}
.interaction-dark .numbered-projects li,.interaction-dark .numbered-interaction{border-color:#303030}
.interaction-dark .numbered-projects a,.interaction-dark .numbered-interaction{color:#aaa}
.interaction-dark .numbered-projects a:hover,.interaction-dark .numbered-projects a.active,.interaction-dark .numbered-interaction.active{color:#fff}
@media(max-width:840px){.sidebar-about{margin-bottom:28px}.numbered-projects a,.numbered-interaction{padding:13px 0}}
@media(prefers-reduced-motion:reduce){.interaction-status-dot{animation:none;background:#777}}

/* Unified numbered navigation, including About and Interaction. */
.sidebar .intro{margin-bottom:40px}
.numbered-interaction{display:grid;grid-template-columns:24px auto 1em;justify-content:start;gap:12px}
.numbered-projects a.active > span:last-child{text-decoration:none}
.numbered-projects a,.numbered-interaction{transition:color .18s ease}
.numbered-nav a:is(:hover,:focus-visible),
.interaction-dark .numbered-nav a:is(:hover,:focus-visible){color:#888 !important}
.numbered-nav a.active,
.interaction-dark .numbered-nav a.active,
.interaction-dark #interaction-heading.active{color:#F94C35 !important}
.numbered-nav a:is(:hover,:focus-visible,.active,.is-project-hover) .nav-project-number{font-size:0}
.numbered-nav a:is(:hover,:focus-visible,.active,.is-project-hover) .nav-project-number::after{content:'';display:block;width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}

/* A single left-to-right ripple on each pointer entry. */
.nav-wave-char{display:inline-block}
@keyframes nav-text-wave{
  0%{opacity:0;transform:translateY(7px)}
  55%{opacity:1;transform:translateY(-3px)}
  100%{opacity:1;transform:translateY(0)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .numbered-nav a:hover .nav-wave-char{animation:nav-text-wave .4s cubic-bezier(.22,.7,.3,1) both;animation-delay:calc(var(--char-index) * 16ms)}
}

/* Lab provides a focused exit instead of the project navigation. */
.lab-back{display:none;align-items:center;gap:9px;width:max-content;font:400 16px/1.45 Inter,Arial,sans-serif;color:#aaa}
.lab-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.interaction-dark .numbered-nav,.interaction-dark .sidebar-bottom{display:none}
.interaction-dark .lab-back{display:inline-flex}
.lab-back:hover,.lab-back:focus-visible{color:#F94C35}
.interaction-dark .content{transform-origin:center top}

/* Replace the personal introduction only while viewing Lab. */
.lab-identity{display:none}
.interaction-dark .sidebar-main > .name,.interaction-dark .sidebar-main > .intro{display:none}
.interaction-dark .lab-identity{display:block;margin-bottom:36px}
.lab-identity h1{margin:0 0 16px;font:500 25px/1.25 Inter,Arial,sans-serif;letter-spacing:-.03em;color:#f2f2f2}
.lab-identity p{margin:0;max-width:270px;font:400 15px/1.65 Inter,Arial,sans-serif;color:#aaa}
@media(max-width:840px){.lab-identity p{max-width:520px}.interaction-dark .lab-identity{margin-bottom:24px}}

/* Lab retains the personal sidebar, with its own ordered exploration menu. */
.lab-project-nav{display:none}
.interaction-dark .sidebar-main > .name{display:inline-block}
.interaction-dark .sidebar-main > .intro{display:block}
.interaction-dark .lab-identity{display:none}
.interaction-dark .lab-project-nav{display:block}
.interaction-dark .lab-back{margin-top:28px}
.interaction-dark,.interaction-dark .name,.interaction-dark .intro,
.interaction-dark .lab-project-nav a,.interaction-dark .lab-back,
.interaction-dark .interaction-item-title,.interaction-dark .interaction-item-description,
.interaction-dark .interaction-item-credit{
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
 color:#9DFF8C !important;
}
.interaction-dark .lab-project-nav a{font-size:14px;letter-spacing:0}
.interaction-dark .lab-project-nav li{border-color:#9dff8c33}
.interaction-dark .lab-project-nav a:is(:hover,:focus-visible,.active),
.interaction-dark .lab-back:is(:hover,:focus-visible),
.interaction-dark .interaction-item:hover .interaction-item-title,
.interaction-dark .interaction-item:hover .interaction-item-description{color:#9DFF8C !important}
.interaction-dark .lab-project-nav a.active > .nav-wave-label{text-decoration:underline;text-underline-offset:4px}
.interaction-dark .interaction-item{scroll-margin-top:36px}
.interaction-dark .lab-project-nav .nav-project-number{min-width:24px}

/* Editor-inspired Lab palette: pale text with lavender accents. */
.interaction-dark .name{font-size:23px;color:#9DFF8C !important}
.interaction-dark .intro{font-size:13px;line-height:1.5;letter-spacing:-.015em;color:#e6e6eb !important}
.interaction-dark .intro-history{white-space:nowrap}
.interaction-dark .lab-project-nav a{color:#ededf1 !important}
.interaction-dark .lab-project-nav .nav-project-number{color:#f2f2f2}
.interaction-dark .lab-back{color:#e6e6eb !important}
.interaction-dark .interaction-item-title{font-size:14px;color:#9DFF8C !important}
.interaction-dark .interaction-item-description{font-size:12px;color:#ededf1 !important}
.interaction-dark .interaction-item-credit{color:#a6a2b0 !important}
.interaction-dark .lab-project-nav a:is(:hover,:focus-visible,.active),
.interaction-dark .lab-back:is(:hover,:focus-visible){color:#9DFF8C !important}
.interaction-dark .interaction-item:hover .interaction-item-description{color:#ededf1 !important}

/* Keep Lab numbers white, and state arrows green. */
.interaction-dark .lab-project-nav a:is(:hover,:focus-visible,.active) .nav-project-number::after{background:#9DFF8C}

/* Let Lab captions use the same full width as their videos. */
.interaction-item figcaption{width:100%;min-width:0}
.interaction-item-title,.interaction-item-description,.interaction-item-credit{width:100%;max-width:100%}

/* Lab videos and their captions share the full column with flush titles. */
.interaction-page .interaction-item{width:100%}
.interaction-page .interaction-item figcaption{margin-top:0}

/* Lab entries float into view individually as the page scrolls. */
@keyframes labFloatReveal{
 from{opacity:0;transform:translate3d(0,36px,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:no-preference){
 .interaction-page .interaction-item.reveal-pending{opacity:0;transform:translate3d(0,36px,0)}
 .interaction-page .interaction-item.reveal-visible{animation:labFloatReveal .8s cubic-bezier(.16,1,.3,1) both}
}

/* Give each Lab exploration a little more breathing room. */
.interaction-page .interaction-gallery{row-gap:84px}
@media(max-width:700px){.interaction-page .interaction-gallery{row-gap:52px}}

/* Connect the home index and the project gallery in both directions. */
.project-grid .project-card{transition:scale .35s cubic-bezier(.2,.7,.2,1)}

.project-grid .project-card.is-project-focus{scale:1.025;z-index:4}
.numbered-nav a.is-project-hover{color:#888 !important}
.numbered-nav a.is-project-hover.active{color:#F94C35 !important}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .numbered-nav a.is-project-hover .nav-wave-char{animation:nav-text-wave .4s cubic-bezier(.22,.7,.3,1) both;animation-delay:calc(var(--char-index) * 16ms)}
}
@media(prefers-reduced-motion:reduce){
 .project-grid .project-card{transition:none}
 .project-grid .project-card.is-project-focus{scale:1}
}

/* Unavailable Amazon case study: visible preview, no detail navigation. */
.numbered-projects a[data-locked]{grid-template-columns:24px auto 14px;justify-content:start}
.nav-lock{display:inline-flex;align-self:center;width:14px;height:14px;color:#929292}
.nav-lock svg,.project-lock-badge svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.project-lock-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:64px;height:64px;padding:20px;border-radius:50%;background:#000;color:#fff;z-index:5;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s ease}
.project-card[data-locked]:is(:hover,:focus-visible,.is-project-focus) .project-lock-badge{opacity:1;transform:translate(-50%,-50%) scale(1)}
[data-locked]{cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.project-lock-badge{transition:none}}

/* Dim only the locked Amazon artwork, keeping the lock crisp. */
.project-card[data-locked] .card-visual{transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.project-card[data-locked]:is(:hover,:focus-visible,.is-project-focus) .card-visual{opacity:.45}
@media(prefers-reduced-motion:reduce){.project-card[data-locked] .card-visual{transition:none}}

/* Project index hover matches the orange selection accent. */
body:not(.interaction-dark) #project-children a[data-project]:is(:hover,:focus-visible,.is-project-hover){color:#F94C35 !important}

/* Center captions and retain inventor typography. */
.interaction-page .interaction-item figcaption{align-items:center;text-align:center}
.interaction-caption-heading{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:0 7px;width:100%}
.interaction-caption-heading .interaction-item-title,.interaction-caption-heading .interaction-item-credit{width:auto;max-width:100%;margin-top:0}
@media(min-width:841px){.interaction-page .interaction-gallery{position:relative;left:16px}}

/* A hovered Lab video highlights its matching index entry. */
.interaction-dark .lab-project-nav a.is-project-hover{color:#9DFF8C !important}
.interaction-dark .lab-project-nav a.is-project-hover .nav-project-number::after{background:#9DFF8C}
.interaction-dark .lab-project-nav.has-preview-hover a.active:not(.is-project-hover){color:#ededf1 !important}
.interaction-dark .lab-project-nav.has-preview-hover a.active:not(.is-project-hover) .nav-project-number{font-size:14px}
.interaction-dark .lab-project-nav.has-preview-hover a.active:not(.is-project-hover) .nav-project-number::after{display:none}
.interaction-dark .lab-project-nav.has-preview-hover a.active:not(.is-project-hover) > .nav-wave-label{text-decoration:none}

/* Show the requested description only in Lab. */
.intro-lab{display:none}
.interaction-dark .intro-default{display:none}
.interaction-dark .intro-lab{display:inline}

/* Company sits above the unchanged project title on home thumbnails. */
.project-grid .card-title{display:flex;flex-direction:column;gap:5px}
.card-company{font-size:.62em;font-weight:400;line-height:1.4;color:rgba(255,255,255,.65)}
.card-project-name{font:inherit;color:inherit}

/* Room below the final Lab project and a mobile return-to-top control. */
.interaction-page{padding-bottom:160px}
.interaction-page .interaction-thumbnail{transition:scale .35s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.interaction-item.is-lab-preview-focus .interaction-thumbnail{scale:1.018}
.mobile-top{display:none}
.video-play-cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#000c;color:#fff;z-index:6;font-size:20px;cursor:pointer}
@media(max-width:840px){
 .interaction-page{padding-bottom:120px}
 .mobile-top:not([hidden]){display:block;position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:100;border:1px solid #ddd;border-radius:24px;padding:11px 16px;background:#fff;color:#333;font:500 13px/1.2 Inter,Arial,sans-serif;box-shadow:0 3px 16px #0001}
 .interaction-dark .mobile-top:not([hidden]){background:#111;color:#9DFF8C;border-color:#9dff8c55}
}
@media(prefers-reduced-motion:reduce){.interaction-item.is-lab-preview-focus .interaction-thumbnail{scale:1}}

/* Search case study: Figma copy and sections, with media to follow. */
.detail .search-body{max-width:none;margin-top:0;padding-top:0;border-top:0}
.search-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.search-timeline li{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid #ddd;text-align:center}
.search-timeline strong{font-size:16px;font-weight:500;color:#333}
.search-timeline li > span{color:#a4a4a4;font-size:16px}
.search-impact,.search-goal-row,.search-survey-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;width:100%}
.search-impact > div{display:flex;flex-direction:column;gap:18px}
.search-metric-label{font-size:14px;color:#b0b0b0}
.search-impact strong{font-size:30px;line-height:1.2;color:#50ad83}
.search-impact strong > span{font-size:20px;color:#aaa}
.search-impact small{font-size:12px;line-height:1.6;color:#999}
.search-copy-group{display:flex;flex-direction:column;gap:10px}
.detail .search-body h3,.detail .search-body h4{margin:0;font-size:16px;line-height:1.45;font-weight:400}
.detail .search-body .search-copy-group > p{margin:0;font-size:12px;line-height:1.6;color:#bcbcbc !important}
.search-eyebrow{display:block;margin-bottom:6px;color:#a1a1a1;font-size:12px;line-height:1.45}
.search-goal-row > :first-child h3{color:#e18060}
.search-goal-row > :last-child h3,.search-final-copy > h3{color:#50ad83}
.search-step{display:flex;flex-direction:column;gap:24px;width:100%}
.search-step + .search-step{margin-top:40px}
.detail .search-body .search-step-title{color:#50ad83}
.search-step-title > span{color:#92c3ad;margin-right:8px}
.search-survey-metrics{margin:0;display:flex;flex-direction:column;gap:14px}
.search-survey-metrics > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.search-survey-metrics dt{font-size:12px;line-height:1.5;color:#888}
.search-survey-metrics dd{margin:0;color:#50ad83;font-size:24px}
.detail .search-body .search-finding{font-size:14px;line-height:1.5;margin:20px 0 0}
.search-observations{display:flex;flex-direction:column;gap:32px}
.search-observation{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:24px}
.search-observation blockquote{margin:0}
.detail .search-body .search-observation p{font-size:12px;line-height:1.6;margin:0}
.search-insight{display:flex;flex-direction:column;gap:16px;padding:50px 60px;background:#333;color:#fff;margin-top:40px}
.detail .search-body .search-insight > p{margin:0;color:#b0b0b0 !important;font-size:16px;line-height:1.6}
.search-insight-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;font-size:14px;line-height:1.5}
.search-insight-summary > div{display:flex;flex-direction:column;gap:8px}
.search-insight-summary small{color:#9b9b9b;font-size:10px}
.search-insight-summary > :last-child{color:#50ad83}
@media(max-width:700px){
 .search-impact,.search-goal-row,.search-survey-row{grid-template-columns:1fr;gap:28px}
 .search-timeline{gap:10px}
 .search-timeline strong,.search-timeline li > span{font-size:12px}
 .search-insight{padding:28px 22px}
 .search-insight-summary{flex-direction:column;align-items:flex-start}
 .search-insight-summary > span{transform:rotate(90deg)}
 .search-observation{grid-template-columns:1fr;gap:18px}
}

/* Supplied Search figures retain intrinsic proportions and transparent backgrounds. */
.search-art{display:block;width:100%;min-width:0;margin:0}
.search-body .search-art img,.search-body .search-art video{display:block;width:100%;max-width:100%;height:auto;border-radius:0}
.search-observation{grid-template-columns:1fr 1fr 1.2fr;align-items:center}
.search-insight-art-row{display:grid;grid-template-columns:1fr 2.2fr .6fr;align-items:center;gap:24px;width:100%;margin-top:14px}
.search-insight-art-row figure{margin:0;min-width:0}
.search-insight-art-row img{display:block;width:100%;height:auto}
.search-insight-art-row figcaption{font-size:10px;color:#9b9b9b;text-align:center;margin-top:14px}
.search-insight-art-row > span{font-size:12px;color:#50ad83}
.search-layout-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.search-layout-comparison figcaption{font-size:12px;color:#bcbcbc;text-align:center;margin-top:10px}
@media(max-width:700px){.search-observation,.search-layout-comparison{grid-template-columns:1fr}.search-insight-art-row{grid-template-columns:1fr 2fr;gap:14px}.search-insight-art-row>span{grid-column:1/-1;text-align:center}}


/* Search-only media sizing and Figma observation flow. */
.search-body .search-impact-art{width:80%;margin-inline:auto}
.search-body .search-goal-card{min-width:0;display:flex;flex-direction:column;gap:20px}
.search-body .search-goal-card h3{color:#333}
.search-body .search-goal-card .search-copy-group{gap:4px}
.search-body .search-goal-card .search-eyebrow{margin-bottom:2px}
.search-body .search-goal-card:first-child .search-eyebrow{color:#e18060}
.search-body .search-goal-card:last-child .search-eyebrow{color:#50ad83}
.search-body .search-observation{grid-template-columns:minmax(0,230fr) 10px minmax(0,230fr) minmax(0,240fr);gap:0;justify-content:space-between;column-gap:clamp(8px,2.19vw,16.67px);padding-top:0;text-align:center}
.search-body .search-observations{gap:30px}
.search-body .search-observation-arrow{display:flex;align-items:center;justify-content:center;width:10px;height:10px}
.search-body .search-observation-arrow img{display:block;transform:rotate(90deg)}
.search-body .search-insight-art{margin-top:14px}
.search-body .search-final-art{width:80%;max-width:760px;margin-inline:auto}
.search-body .search-layout-comparison{width:100%;max-width:880px;margin-inline:auto}
@media(max-width:700px){
 .search-body .search-observation{grid-template-columns:1fr;gap:18px}
 .search-body .search-observation-arrow{justify-self:center;transform:rotate(90deg)}
 .search-body .search-observation .search-art{width:100%;max-width:360px;justify-self:center}
 .search-body .search-final-art{width:100%}
}

/* A continuous Search progress header does not slide away at section boundaries. */
.search-body > .search-progress{position:sticky;top:0;height:0;z-index:3;align-self:stretch}
.search-body > .search-progress[hidden]{display:none}
.search-body .search-progress-heading{position:absolute;top:0;left:0;width:100%;height:80px;box-sizing:border-box;display:flex;align-items:center;padding:28px 0;background:#fff;color:#929292;letter-spacing:.075em;font:500 13px/1.35 Inter,Arial,sans-serif}
.search-body .search-progress-heading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#000;transform:scaleX(var(--page-progress,0));transform-origin:left}
.detail .search-body .case-study-heading{position:relative}
.detail .search-body .case-study-heading::after{display:none}
.search-body .search-survey-art,.search-body .search-insight-art{width:80%;margin-inline:auto}

/* Vision AI Companion: case study from the supplied Figma frame. */
.vision-story{width:100%;max-width:760px;color:#333;font:400 16px/normal Inter,sans-serif}
.vision-section{display:flex;flex-direction:column;gap:60px;margin-top:120px;scroll-margin-top:32px}
.vision-section:first-child{margin-top:0;gap:24px}
.vision-section h2{margin:0;color:#8a8a8a;font-size:16px;font-weight:400;line-height:normal}
.vision-section p{margin:0}
.vision-section:first-child .vision-art{margin-top:36px}
.vision-section:nth-child(2){gap:80px}
.vision-step{display:flex;flex-direction:column;gap:40px;min-width:0}
.vision-copy h3{margin:0 0 16px;color:#114efe;font-size:16px;font-weight:400;line-height:normal}
.vision-copy h3>span{color:#8ba9ff;margin-right:8px}
.vision-copy .vision-caption{margin-top:6px;color:#bcbcbc;font-size:12px;line-height:normal}
.vision-art-canvas{line-height:normal}
.vision-art-canvas img{display:block}
.vision-art-canvas p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.vision-art-canvas span{font-size:inherit}
.vision-templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vision-templates figure{min-width:0;margin:0}
.vision-templates img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.vision-small-talk{position:relative}
.vision-small-talk>span{position:absolute;bottom:2px;left:0;width:100%;text-align:center;font-size:6px;line-height:1.32;color:white}
.vision-templates figcaption{margin-top:10px;text-align:center;font-size:12px;line-height:normal;color:#bcbcbc}
.vision-articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.vision-article{display:flex;flex-direction:column;color:#333;text-decoration:none}
.vision-article-image{aspect-ratio:16/9;overflow:hidden;background:#eee}
.vision-article-image img{width:100%;height:100%;object-fit:cover;transition:transform 200ms ease}
.vision-article:hover .vision-article-image img{transform:scale(1.025)}
.vision-article-source{margin-top:18px;color:#8a8a8a;font-size:12px}
.vision-article h3{margin:10px 0 18px;font-size:18px;line-height:1.4;font-weight:500}
.vision-article-read{margin-top:auto;display:flex;justify-content:space-between;font-size:13px;color:#888}
.vision-article:focus-visible{outline:2px solid #316bff;outline-offset:6px}
@media(max-width:840px){.vision-section{margin-top:80px}.vision-section:nth-child(2){gap:60px}}
@media(max-width:520px){.vision-section{margin-top:64px}.vision-templates{gap:10px}.vision-templates figcaption{font-size:10px}.vision-articles{grid-template-columns:1fr}.vision-step{gap:28px}}
@media(prefers-reduced-motion:reduce){.vision-article-image img{transition:none}}

.vision-articles{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.vision-article-image{position:relative}.vision-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.6);color:white;font-size:15px;padding-left:3px}.vision-article h3{font-size:16px}.vision-article-source{font-size:11px;line-height:1.4}@media(max-width:700px){.vision-articles{grid-template-columns:1fr;gap:36px}}

/* Featured media uses the same item-by-item browsing as Ballie. */
.vision-featured .vision-articles{position:relative;display:flex;gap:28px;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;padding:6px;margin:-6px}
.vision-articles::-webkit-scrollbar{display:none}
.vision-featured .vision-article{flex:0 0 calc((100% - 44px)/2.125);min-width:0;scroll-snap-align:start}
.vision-articles::after{content:"";flex:0 0 var(--articles-tail,0px)}
.vision-featured .vision-article-source{margin-top:12px}
.vision-featured .vision-article h3{display:flex;align-items:baseline;gap:7px;margin:4px 0 0;font-size:16px;line-height:1.4;font-weight:500}
.vision-title-arrow{flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:baseline}
.vision-article-controls{display:flex;align-items:center;gap:22px;margin-top:-38px}
.vision-article-controls button{font:400 34px/1 Inter,sans-serif;color:#171717;background:transparent;border:0;cursor:pointer;padding:8px 12px}
.vision-article-controls button:disabled{color:#b8b8b8;cursor:default}
.vision-article-counter{color:#999;font-size:13px}
.vision-article-controls button:focus-visible,.vision-articles:focus-visible{outline:2px solid #316bff;outline-offset:3px}
@media(max-width:700px){.vision-featured .vision-article{flex-basis:85%}.vision-article-controls{gap:12px}.vision-article-controls button{font-size:24px;padding:6px 10px}}

.vision-fgi{margin:0}.vision-fgi img{display:block;width:100%;height:auto}.vision-templates video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}

/* Match homepage and Lab vertical spacing; detail pages keep their layout. */
@media(min-width:841px){.site-shell:has(.home-page,.interaction-page){padding-top:82px;padding-bottom:74px}}
@media(min-width:841px) and (max-height:850px){.site-shell:has(.home-page,.interaction-page){padding-top:56px}}
@media(max-width:840px){.site-shell:has(.home-page,.interaction-page){padding-top:36px;padding-bottom:54px}}

.interaction-page{padding-bottom:0}


/* Mobile case-study pacing: more breathing room BETWEEN major sections.
   Keep the heading-to-content spacing and desktop layout unchanged. */
@media (max-width: 700px) {
  .detail .detail-body > .case-study-section > :last-child {
    margin-bottom: 176px;
  }
  .ballie-figma > .bf-section > :last-child {
    margin-bottom: 176px;
  }
  .vision-story > .vision-section + .vision-section {
    margin-top: 112px;
  }
}

/* Ballie challenge: two columns without the removed arrow. */
@media (min-width: 701px) {
  .bf-challenge-row { grid-template-columns: minmax(0, 278.5px) minmax(0, 1fr); }
  .bf-challenge-row .bf-solution-copy { grid-column: auto; }
}


/* Ballie mobile polish: tighten the Connect phone call to limitation panel transition. */
@media (max-width:700px) {
  .ballie-figma > .bf-section > .bf-step:has(.bf-connect-art) {
    gap:12px;
  }
  .ballie-figma > .bf-section > .bf-step:has(.bf-connect-art) + .bf-limitation {
    margin-top:0;
  }
  .ballie-figma .bf-connect-art > .bf-artwork {
    margin-block:0;
  }
}

/* Daily Board: keep Research Insight linear on mobile, like desktop. */
@media (max-width:700px) {
  .daily-board-body .db-insight { padding: 30px clamp(14px, 4vw, 24px); }
  .daily-board-body .db-insight-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: clamp(6px, 1.8vw, 14px);
    width: 100%;
    min-width: 0;
  }
  .daily-board-body .db-keywords {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-wrap: nowrap;
    row-gap: 0;
  }
  .daily-board-body .db-keyword {
    width: clamp(58px, 20vw, 112px);
    height: auto;
    aspect-ratio: 1;
    margin-right: -8px;
  }
  .daily-board-body .db-keyword:last-child { margin-right: 0; }
  .daily-board-body .db-keyword > img { width: 100%; height: 100%; object-fit: contain; }
  .daily-board-body .db-keyword > span { font-size: clamp(9px, 2.65vw, 16px); line-height: 1.35; }
  .daily-board-body .db-insight-arrow { flex: 0 0 16px; width: 16px; height: auto; transform: rotate(90deg); }
  .daily-board-body .db-insight-question {
    flex: 0 0 auto;
    width: auto;
    font-size: clamp(48px, 15vw, 90px);
    line-height: 1;
  }
}

/* Mobile Search: clearly separate consecutive observational findings. */
@media (max-width:700px) {
  .search-body .search-observations { gap: 76px; }
  .search-body .search-observation + .search-observation {
    padding-top: 22px;
  }
}

/* Lab mobile: give each project item more separation without changing desktop or other pages. */
@media (max-width:700px) {
  .interaction-dark .interaction-page .interaction-gallery { row-gap: 88px; }
}