/* ==========================================================================
   Timo Ilola — portfolio site styles
   Single source of truth for Projects.html + all case study pages.
   Linked via <link rel="stylesheet" href="/styles.css">.

   Scoping convention: page-wide differences between the listing page and
   case study pages are handled via a body class —
     body.page--listing   → Projects.html
     body.page--case       → every case study page
   Add new shared components here rather than inlining <style> per page.

   Per-case-study background: add a second body class named after the
   case (e.g. class="page--case page--wolt") and override --bg for it
   below. Everything else (type, components) stays identical across
   case studies — only the page background is meant to vary.
   ========================================================================== */

:root{
  --bg:#FAF9F6;
  --ink:#26251e;
  --muted:#807d72;
  --muted2:#958d88;
  --muted3:#5a5852;
  --line:rgba(0,0,0,0.08);
  --font:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --col:620px;
  --page:860px;
}
body.page--wolt{--bg:#ebf7fd;}
/* Wolt hero has a transparent background — drop the site-wide #eeece8
   image-loading fallback, and show it uncropped at its own aspect
   ratio rather than force-cropping to 16:9. */
body.page--wolt img.hero{
  background:transparent;
}
body.page--starship{--bg:#d4d4d4;}
/* Starship's source PNGs have transparent backgrounds — drop the
   site-wide #eeece8 image-loading fallback so the page background
   shows through instead of a mismatched beige box. */
body.page--starship img.hero,
body.page--starship .figure img,
body.page--starship .text-figure-image img{
  background:transparent;
}
/* Starship hero: match the width of the wide figures below it and
   show the full image uncropped, left-aligned to the same edge as
   the body copy (no auto-centering, unlike the .hero.tall pattern). */
body.page--starship img.hero{
  margin:0 0 40px;
}
/* All images on this page line up on the same left edge as the text. */
body.page--starship img.hero,
body.page--starship .figure,
body.page--starship .text-figure-image{
  margin-left:0;
  margin-right:0;
}
/* Polar: full dark theme — invert ink/muted/line so lines stay lighter
   than the black background, and text keeps the same relative hierarchy
   (ink brightest, muted2 dimmest) just flipped in lightness. */
body.page--taxfix-web{--bg:#efebe7;}
body.page--polar{
  --bg:#000000;
  --ink:#f2f1ee;
  --muted:#928d84;
  --muted2:#6b6760;
  --muted3:#b8b4ac;
  --line:rgba(255,255,255,0.14);
}
body.page--polar img.hero,
body.page--polar video.hero.hero-video,
body.page--polar .figure img,
body.page--polar .text-figure-image img{
  background:transparent;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Homepage matches the original design exactly, which never set
   antialiased smoothing — restoring the browser default here keeps
   the text weight identical to the backup instead of rendering
   thinner. */
body.page--home{-webkit-font-smoothing:auto;}

/* --- Shared site header --- */
header.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:64px;
  padding:0 48px;
  border-bottom:1px solid var(--line);
}
header.site-header .logo{
  font-size:13px;
  font-weight:500;
  letter-spacing:0.26px;
  color:var(--ink);
  text-decoration:none;
}
header.site-header nav{display:flex;gap:24px;}
header.site-header nav a{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
}
header.site-header nav a.current{color:var(--ink);}
header.site-header nav a:hover{color:var(--ink);}

/* --- Page shell + typography --- */
.page{
  max-width:var(--page);
  margin:0 auto;
  padding:72px 24px 120px;
}
.eyebrow{
  max-width:var(--col);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.88px;
  color:var(--muted);
  margin:0 0 12px;
}
h1{
  max-width:var(--col);
  font-size:42px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.84px;
  color:var(--ink);
  margin:0 0 20px;
}
h2.section-title{
  max-width:var(--col);
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.3px;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 14px;
}
/* When a title follows an image (e.g. numbered sub-sections stacked
   inside one section), give it real breathing room instead of sitting
   flush against the figure above it. */
.figure + h2.section-title,
.figure-row + h2.section-title,
.carousel + h2.section-title{
  margin-top:40px;
}
.intro{
  max-width:var(--col);
  font-size:22px;
  font-weight:400;
  letter-spacing:-0.11px;
  line-height:34px;
  color:var(--ink);
  margin:0 0 40px;
}
body.page--listing .intro{margin-bottom:64px;}
body.page--listing h1{margin-bottom:48px;}

p{max-width:var(--col);margin:0 0 18px;font-size:16px;line-height:1.7;color:var(--ink);}
ul{max-width:var(--col);margin:0 0 18px;padding-left:20px;}
li{margin-bottom:10px;font-size:16px;line-height:1.7;color:var(--ink);}
section{margin-bottom:56px;}
section p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--muted2);text-underline-offset:3px;}
section p a:hover{text-decoration-color:var(--ink);}

.summary{max-width:var(--col);}
.summary p{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 18px;max-width:none;}
.summary p:last-child{margin-bottom:0;}

/* --- Case study meta grid --- */
.meta{
  max-width:var(--page);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}
.meta div{font-size:16px;color:var(--ink);}
.meta .label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.88px;
  color:var(--muted);
  margin-bottom:6px;
}

/* Template's placeholder hero div (before it's swapped for a real
   img.hero) — same bottom margin as the real thing, so the gap below
   the hero matches the gap above it (the .intro's own margin-bottom)
   even before an image is dropped in. */
.hero{margin-bottom:40px;}

/* --- Hero image (real <img>, case study pages) --- */
/* Standard hero treatment, site-wide: full image, no cropping. Height
   follows the image's own aspect ratio rather than forcing 16:9, so a
   portrait or unusually-shaped hero never loses content to a crop. */
img.hero{
  max-width:var(--page);
  width:100%;
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  margin-bottom:40px;
  display:block;
  background:#eeece8;
}
/* Video hero: same treatment as img.hero, but sized up to the wider
   page column — a video merits a bigger stage than a static shot. */
video.hero.hero-video{
  max-width:var(--page);
  width:100%;
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  margin-bottom:40px;
  display:block;
  background:#eeece8;
}
.caption{
  max-width:var(--col);
  font-size:13px;
  color:var(--muted);
  margin:0 0 56px;
}
/* Small bold lead-in above a .caption, for an image+caption pair that
   needs a named headline rather than just descriptive text. */
.caption-headline{
  max-width:var(--col);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin:12px 0 0;
}
.figure .caption-headline + .caption{margin-top:0;}

/* --- Inline supporting figure (real <img> inside) --- */
.figure{max-width:var(--col);width:100%;margin:24px 0 8px;}
.figure img{width:100%;display:block;border-radius:8px;background:#eeece8;}
.figure .caption{max-width:none;margin:8px 0 0;}
.figure.wide{max-width:var(--page);}

.figure-row{
  max-width:var(--page);
  display:flex;
  gap:20px;
  margin:24px 0 8px;
  flex-wrap:wrap;
}
.figure-row .figure{flex:1 1 260px;margin:0;}

/* Force an even N-up row (e.g. three tiers side by side) instead of
   letting individual 260px flex-basis items wrap. */
.figure-row.thirds .figure{flex:1 1 0;}

/* Uneven pair — first image narrower, second wider (e.g. a compact
   MVP shot next to a fuller proposal screen). */
.figure-row.split-40-60 .figure:first-child{flex:0 1 calc(40% - 10px);min-width:0;}
.figure-row.split-40-60 .figure:last-child{flex:0 1 calc(60% - 10px);min-width:0;}

/* Two vertical images shown as one pair (e.g. two views of the same
   screen) — tight gap, single shared caption below the pair rather
   than one per image. General pattern for the whole site. */
.figure-row.paired{gap:24px;max-width:var(--col);}
.figure-row.paired + .caption{max-width:var(--page);}

/* Landscape diagram + caption units (e.g. Polar's visual-language
   row) — a top divider per item, like every other grouped-item list
   on the site (.phase, .timeline-item, .exp-item), and a fixed-height
   image box so captions of different-aspect-ratio images all start
   at the same vertical position instead of trailing each image's own
   natural height. */
.figure-row.carousel-row .figure{
  flex:1 1 0;
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.figure-row.carousel-row .figure img{
  height:130px;
  width:100%;
  object-fit:contain;
  border-radius:0;
  margin-top:14px;
}
/* Text now leads each item (headline, then caption, then image) —
   drop caption-headline's own top margin, which assumed it followed
   an image, since the row's border-top + padding-top already spaces
   it from the item above. */
.figure-row.carousel-row .figure .caption-headline{margin-top:0;}

/* Small secondary image beside body copy — for supporting images that
   aren't the main craft/subject of a section (e.g. borrowed context,
   another team's screen), so it reads as subordinate to the text. */
.text-figure{
  max-width:var(--page);
  display:flex;
  gap:32px;
  align-items:flex-start;
  margin:24px 0 8px;
}
.text-figure-copy{flex:1 1 auto;min-width:0;}
.text-figure-copy p{max-width:none;}
.text-figure-image{flex:0 0 200px;}
.text-figure-image img{width:100%;display:block;border-radius:8px;background:#eeece8;}
.text-figure-image .caption{max-width:none;margin:8px 0 0;}

/* Prominent image(s) to the left of body copy — for a section's main
   craft image(s), paired with the paragraph that explains them. */
.figure-text{
  max-width:var(--page);
  display:flex;
  gap:32px;
  align-items:flex-start;
  margin:24px 0 8px;
}
.figure-text-images{flex:0 0 auto;}
.figure-text-copy{flex:1 1 auto;min-width:0;}
.figure-text-copy p{max-width:none;}

.figure.placeholder{
  aspect-ratio:16/9;
  border:1px dashed #c9c5bd;
  background:repeating-linear-gradient(45deg,#eeece8,#eeece8 10px,#e6e3de 10px,#e6e3de 20px);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  padding:16px;
}

/* --- Large vertical images: responsive height cap.
   Target ~80% of viewport height so a tall phone screenshot never
   dominates the page, with a floor so it stays legible on short
   mobile viewports. Width follows automatically to keep aspect ratio. --- */
.figure.tall{display:flex;flex-direction:column;align-items:flex-start;}
.figure.tall img{
  width:auto;
  max-width:100%;
  max-height:80vh;
  min-height:320px;
  border-radius:8px;
  background:#eeece8;
}
.figure.placeholder.tall{
  aspect-ratio:600/1297;
  width:auto;
  max-height:80vh;
  min-height:320px;
  margin:0;
}
.placeholder-box{
  aspect-ratio:600/1297;
  width:auto;
  max-width:100%;
  max-height:80vh;
  min-height:320px;
  border:1px dashed #c9c5bd;
  background:repeating-linear-gradient(45deg,#eeece8,#eeece8 10px,#e6e3de 10px,#e6e3de 20px);
  border-radius:8px;
}
img.hero.tall{
  aspect-ratio:auto;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:80vh;
  min-height:320px;
  object-fit:contain;
  display:block;
  margin:0 0 8px;
}

/* --- Two-column text (sub-topics side by side) --- */
.col-2{
  max-width:var(--page);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  margin:24px 0 8px;
}
.col-2 p{max-width:none;}

.figure-tag{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.88px;
  color:var(--muted);
  margin:0 0 8px;
  max-width:none;
}

/* --- Multi-image: carousel (sequence) --- */
.carousel{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:12px;
  margin:24px 0 6px;
  -webkit-overflow-scrolling:touch;
  width:100vw;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  padding-left:max(24px, calc((100vw - var(--page)) / 2 + 24px));
  padding-right:24px;
  scroll-padding-left:max(24px, calc((100vw - var(--page)) / 2 + 24px));
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{display:none;}
.carousel .slide{
  flex:0 0 32%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.carousel .slide img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:8px;
  background:#eeece8;
  display:block;
}
.carousel .slide .cap{
  font-size:13px;
  color:var(--muted);
  margin-top:8px;
}

/* Large variant — one big image per slide (same size as a .figure.wide
   image) instead of a strip of thumbnails. Standard pattern site-wide
   for "a few full-size screens to page through": left edge lines up
   with the paragraph column, right edge bleeds to the viewport so the
   next slide peeks in as an affordance to scroll. */
.carousel.large .slide{
  /* Match the effective width of a .figure.wide image exactly: the
     carousel bleeds past .page's own 24px+24px padding, so subtract
     that back out rather than using var(--page) directly. */
  flex:0 0 min(calc(var(--page) - 48px), calc(100vw - 48px));
}
.carousel.large .slide img{
  aspect-ratio:auto;
  object-fit:contain;
}
.carousel-controls{
  max-width:var(--col);
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.carousel-controls button{
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  font-size:14px;
  color:var(--ink);
}
.carousel-controls button:hover{border-color:var(--muted2);}

/* --- Simplified timeline (chronological history) --- */
.timeline{
  max-width:var(--page);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:24px 0 8px;
}
.timeline-item{
  position:relative;
  padding-top:20px;
  border-top:2px solid var(--line);
}
.timeline-item::before{
  content:"";
  position:absolute;
  top:-5px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink);
}
.timeline-year{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.88px;
  color:var(--muted);
  margin:0 0 8px;
}
.timeline-phase{
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 4px;
}
.timeline-desc{
  font-size:14px;
  line-height:1.5;
  color:var(--muted3);
  max-width:none;
  margin:0;
}

/* --- Numbered scope overview (4-up) --- */
.scope-grid{
  max-width:var(--page);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin:24px 0 40px;
}
.scope-item{
  border-top:1px solid var(--line);
  padding-top:14px;
}
.scope-number{
  font-size:20px;
  font-weight:600;
  color:var(--muted2);
  margin:0 0 8px;
}
.scope-title{
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  margin:0;
}

/* --- Phases (shared pattern for any staged/roadmap display — MVP/Baseline/Optimised, Phase 1/2/3, etc.) --- */
.phases{
  max-width:var(--page);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:24px 0 8px;
}
.phase{
  border-top:1px solid var(--line);
  padding-top:16px;
}
.phase .phase-tag{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.88px;
  color:var(--muted);
  margin:0 0 8px;
}
.phase .phase-title{
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.2px;
  color:var(--ink);
  margin:0 0 8px;
}
.phase .phase-desc{
  font-size:14px;
  line-height:1.6;
  color:var(--muted3);
  max-width:none;
  margin:0;
}
.phase--current{border-top:2px solid var(--ink);}
.phase--current .phase-tag{color:var(--ink);}

/* --- Element grid (design system components, short label per item) --- */
.element-grid{
  max-width:var(--page);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin:24px 0 8px;
}
.element-item{
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:14px;
}
/* An image can sit as a direct grid child alongside the text items —
   e.g. one image per column, placed after all the text items so grid
   row-tracking lines every image up at the same vertical start,
   regardless of how tall each text block above it is. */
.element-grid > img{
  min-width:0;
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  background:#eeece8;
  margin-top:14px;
}
.element-title{
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.1px;
  color:var(--ink);
  margin:0 0 8px;
}
.element-desc{
  font-size:14px;
  line-height:1.6;
  color:var(--muted3);
  max-width:none;
  margin:0;
}
.element-grid.cols-3{grid-template-columns:repeat(3,1fr);max-width:var(--col);gap:12px;}

/* --- Tier grid: illustration in a left column, a succinct description
   in a right column, repeated per row. Grid (not per-row flex) so the
   illustration column and copy column each stay a single continuous
   column, in line row to row. --- */
.tier-grid{
  max-width:var(--col);
  display:grid;
  grid-template-columns:40% 60%;
  column-gap:24px;
  row-gap:32px;
  align-items:start;
  margin:24px 0 8px;
}
.tier-grid picture{display:block;min-width:0;}
.tier-grid img{
  width:100%;
  height:auto;
  display:block;
  background:transparent;
  opacity:0.8;
}
.tier-copy{min-width:0;}
.tier-copy p:not(.tier-label){
  max-width:none;
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted3);
}
.tier-label{
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.1px;
  color:#fff;
  margin:0 0 8px;
}
.tier-followup{margin-top:24px;}

/* --- Metrics --- */
.stats{
  max-width:var(--col);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
  margin:8px 0 32px;
}
.stat{
  border-top:1px solid var(--line);
  padding-top:16px;
}
.stat .number{
  font-size:44px;
  font-weight:500;
  color:var(--ink);
  line-height:1;
  letter-spacing:-0.5px;
  margin-bottom:8px;
}
.stat .label{
  font-size:13px;
  color:var(--muted);
}

/* --- Homepage — values match the original design exactly (extracted
   from a saved snapshot), not the case-study component scale, so this
   is deliberately its own set of rules rather than reusing h1/section-title/p. --- */
.home-hero{
  max-width:720px;
  margin:0 auto;
  padding:96px 48px 70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:28px;
}
.home-photo{position:relative;width:148px;height:148px;}
.home-photo-shadow{
  position:absolute;
  inset:10px;
  border-radius:50%;
  box-shadow:rgba(38,37,30,0.32) 0 28px 42px -10px, rgba(38,37,30,0.2) 0 10px 18px -8px;
}
.home-photo-mask{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  mask-image:radial-gradient(circle, black 58%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle, black 58%, transparent 100%);
}
.home-photo-mask img{width:100%;height:100%;object-fit:cover;display:block;}
.home-hero h1{
  max-width:560px;
  font-size:36px;
  font-weight:400;
  letter-spacing:-0.72px;
  line-height:1.25;
  margin:0;
  color:var(--ink);
}
.home-hero .role{
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
  max-width:460px;
}
.home-bio{max-width:var(--col);margin:0 auto;padding:0 48px 77px;}
.home-bio p{
  max-width:none;
  font-size:22px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-0.11px;
  color:var(--ink);
  text-align:center;
  margin:0;
}
.home-section{
  max-width:var(--col);
  margin:0 auto;
  padding:56px 48px 96px;
  border-top:1px solid var(--line);
}
.home-section.last{padding-bottom:120px;text-align:center;}
.home-section h2{
  font-size:11px;
  letter-spacing:0.88px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  margin:0 0 28px;
}
.home-section.last h2{margin-bottom:20px;}
.exp-list{display:flex;flex-direction:column;gap:20px;}
.exp-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  font-size:16px;
  line-height:1.5;
}
.exp-item span{color:var(--ink);}
.exp-item.past span{color:var(--muted2);}
/* Focus areas — home-section rhythm (spacing, dividers) stays
   consistent with the rest of the page, but title/description sizes
   borrow from the case-study type scale (.card h2 / .element-desc)
   rather than the home page's own larger hero scale, since these
   read as compact entries, not a second hero. Three columns side by
   side on desktop (wider than home's usual --col so three fit
   comfortably); becomes a carousel on mobile, same mechanics as
   .phases/.timeline. */
.home-section.focus-section{max-width:var(--page);border-top:none;padding-top:0;}
.focus-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.focus-item{
  display:block;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.focus-icon{
  width:42px;
  height:42px;
  color:var(--ink);
  display:block;
  margin:0 0 16px;
  transition:color 0.2s ease;
}
.focus-title{
  font-size:20px;
  font-weight:500;
  letter-spacing:-0.2px;
  color:var(--ink);
  margin:0 0 8px;
  transition:color 0.2s ease;
}
a.focus-item:hover .focus-icon,
a.focus-item:hover .focus-title{color:color-mix(in srgb, var(--muted3), var(--muted));}
.focus-desc{
  font-size:15px;
  line-height:1.6;
  color:var(--muted3);
  margin:0;
}
.focus-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  font-size:14px;
  font-weight:500;
  color:var(--muted3);
  transition:color 0.2s ease;
}
a.focus-item:hover .focus-cta{color:var(--ink);}
.focus-cta span{display:inline-block;transition:transform 0.2s ease;}
a.focus-item:hover .focus-cta span{transform:translateX(3px);}
.home-section .contact-intro{
  font-size:18px;
  line-height:1.5;
  color:var(--muted3);
  margin:0 0 20px;
}
.home-contact-links{display:flex;align-items:center;justify-content:center;gap:20px;}
.home-contact-links a{
  font-size:14px;
  font-weight:500;
  color:var(--muted3);
  text-decoration:none;
  transition:color 0.2s ease;
}
.home-contact-links a:hover{color:var(--ink);}

/* Award logos — sized to a shared height rather than a shared width,
   since badge marks come in very different aspect ratios and forcing
   equal widths leaves some looking empty and others cramped. */
.awards-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:32px;
  margin-top:32px;
}
.awards-row img{
  height:90px;
  width:auto;
  display:block;
}

/* --- Dividers + footer --- */
.divider{
  max-width:var(--col);
  border:none;
  border-top:1px solid var(--line);
  margin:56px 0;
}
.divider.wide{max-width:var(--page);}

footer.page-footer{
  font-size:14px;
  color:var(--muted);
}
body.page--case footer.page-footer{
  max-width:var(--col);
  margin-top:80px;
}
body.page--listing footer.page-footer{
  margin-top:96px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* --- Previous/next project navigation (case study pages) ---
   Populated at runtime by /project-nav.js from a single shared
   project order, so it never needs updating by hand per page. */
.project-nav{
  max-width:var(--page);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.project-nav-link{
  display:flex;
  align-items:flex-start;
  gap:16px;
  flex:1 1 0;
  min-width:0;
  text-decoration:none;
  color:inherit;
}
.project-nav-next{justify-content:flex-end;text-align:right;}
.project-nav-arrow{
  flex:0 0 auto;
  font-size:22px;
  line-height:1;
  color:var(--muted2);
  transition:color 0.2s ease;
  /* Sit next to the title's first line, not the label above it —
     offset down by roughly the label's own line-height + margin. */
  margin-top:22px;
}
.project-nav-link:hover .project-nav-arrow{color:var(--ink);}
.project-nav-copy{min-width:0;}
.project-nav-label{
  display:block;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.88px;
  color:var(--muted);
  margin:0 0 4px;
}
.project-nav-title{
  display:block;
  font-size:18px;
  font-weight:500;
  letter-spacing:-0.2px;
  color:var(--ink);
  transition:color 0.2s ease;
}
.project-nav-link:hover .project-nav-title{color:var(--muted3);}
@media (max-width:700px) and (pointer:coarse){
  .project-nav-title{font-size:16px;}
}

/* --- Projects listing grid --- */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:40px;
  row-gap:56px;
}
.card{
  display:block;
  text-decoration:none;
  color:inherit;
}
.card .thumb{
  width:100%;
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:16px;
  background:#eeece8;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:rgba(38,37,30,0) 0 0 0 0;
}
.card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity 0.2s ease;
}
.card:hover .thumb{
  transform:scale(1.018);
  box-shadow:rgba(38,37,30,0.32) 0 28px 42px -10px, rgba(38,37,30,0.2) 0 10px 18px -8px;
}
.card:hover .thumb img{opacity:0.85;}
.card h2{
  font-size:20px;
  font-weight:500;
  letter-spacing:-0.2px;
  color:var(--ink);
  margin:0 0 6px;
}
.card-meta{
  font-size:14px;
  color:var(--muted);
  margin:0;
}
.card.placeholder .thumb{
  border:1px dashed #c9c5bd;
  background:repeating-linear-gradient(45deg,#eeece8,#eeece8 10px,#e6e3de 10px,#e6e3de 20px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  padding:16px;
}
.card.placeholder h2{color:var(--muted2);font-weight:400;}
.card.placeholder .card-meta{color:var(--muted2);}

/* A card's thumb can be a placeholder on its own — for a real project
   that's just missing its dedicated listing image — without dimming
   the title/meta the way a fully placeholder card does. */
.card .thumb.placeholder{
  border:1px dashed #c9c5bd;
  background:repeating-linear-gradient(45deg,#eeece8,#eeece8 10px,#e6e3de 10px,#e6e3de 20px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  padding:16px;
}

/* Hero project card: spans both grid columns, same thumb ratio as the
   other cards (just wider), larger title. */
.card--hero{grid-column:1 / -1;}
.card--hero h2{font-size:26px;}

.card .thumb.logo-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15% 20%;
}
.card .thumb.logo-mark img{width:100%;height:auto;object-fit:contain;}

/* --- Responsive --- */
@media (max-width:700px) and (pointer:coarse){
  header.site-header{padding:0 24px;}
  .page{padding:56px 24px 96px;}
  h1{font-size:32px;line-height:1.2;}
  .grid{grid-template-columns:1fr;row-gap:48px;}
  .meta{grid-template-columns:repeat(2,1fr);}
  .figure-row{flex-direction:column;}
  /* Any figure-row wrapping vertical (tall/portrait) images becomes a
     carousel on mobile, whether it's a paired pair or a longer strip
     — the shared convention for vertical-image carousels site-wide.
     .carousel-row opts a row of landscape/diagram images into the same
     treatment without triggering .tall's portrait-oriented sizing. */
  .figure-row:has(.figure.tall),
  .figure-row.carousel-row{
    flex-direction:row;
    flex-wrap:nowrap;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    width:100vw;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    padding-left:24px;
    padding-right:24px;
    scroll-padding-left:24px;
  }
  .figure-row:has(.figure.tall)::-webkit-scrollbar,
  .figure-row.carousel-row::-webkit-scrollbar{display:none;}
  .figure-row:has(.figure.tall) .figure,
  .figure-row.carousel-row .figure{
    flex:0 0 80%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .carousel .slide{flex-basis:82%;}
  /* Same 20px gutter as the vertical-image carousels above, so every
     mobile carousel on the site reads as one consistent pattern. */
  .phases,
  .timeline,
  .focus-list{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:4px;
    width:100vw;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    padding-left:24px;
    padding-right:24px;
    scroll-padding-left:24px;
  }
  .phases::-webkit-scrollbar,
  .timeline::-webkit-scrollbar,
  .focus-list::-webkit-scrollbar{display:none;}
  /* overflow-x:auto forces overflow-y to auto too (per spec, since it
     can no longer be visible), which clips the timeline dot poking
     above the item at top:-5px — pad the container to give it room. */
  .timeline{padding-top:8px;}
  .phase,
  .timeline-item,
  .focus-item{
    flex:0 0 60%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  /* Wider column for phases illustrated with their own image per
     card (e.g. Sequencing) — the plain text-only .phases stays at
     60%, this variant gets more room for the image at 70%. */
  .phases.illustrated .phase{flex:0 0 70%;}
  .scope-grid{grid-template-columns:repeat(2,1fr);}
  .element-grid,
  .element-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .col-2{grid-template-columns:1fr;gap:32px;}
  .text-figure{flex-direction:column;}
  .text-figure-image{flex-basis:auto;max-width:240px;}
  .intro,
  .home-bio p{font-size:19px;line-height:1.55;}
  /* Matches the case-study mobile h1 size exactly (see the plain h1
     rule above) — .home-hero h1's own desktop-only weight/letter-
     spacing override otherwise wins at every width and never wraps
     "Design leadership" onto one line below ~700px. */
  .home-hero h1{font-size:32px;}
  /* Polar's hero is a 16:9 landscape video — on a narrow phone
     viewport that letterboxes down to a thin strip, so crop it to
     square instead, which better fills a mobile screen. */
  body.page--polar video.hero.hero-video{
    aspect-ratio:1/1;
    height:auto;
    object-fit:cover;
  }
}