/* ==========================================================================
   PM Portfolio — Oguzhan Gok
   Tokens transcribed from guidelines/color-guidelines.md
   and guidelines/typography-guidelines.md. Don't improvise values here.
   ========================================================================== */

:root {
  /* Palette */
  --color-accent:     #F47024; /* Pumpkin Spice */
  --color-text:       #313131; /* Graphite */
  --color-bg:         #FAFAFA; /* Bright Snow */
  --color-blue:       #4A77FF; /* Crayola Blue */

  /* Derived */
  --color-text-muted: #31313180;
  --color-accent-bg:  #F4702412;
  --color-border:     #31313120;
  --color-surface:    #FFFFFF;

  /* Type */
  --font-accent: 'Fraunces', serif;
  --font-body:   'DM Sans', sans-serif;
  --font-ui:     'Inter', sans-serif;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Elevation — tinted with graphite, never pure black */
  --shadow-sm: 0 1px 2px #3131310a, 0 2px 6px #3131310a;
  --shadow-md: 0 2px 4px #3131310d, 0 8px 24px #31313114;
  --shadow-lg: 0 4px 8px #3131310d, 0 18px 48px #3131311f;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --measure: 1120px;
}

/* --------------------------------------------------------------- reset --- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-8);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto is load-bearing — without it the width/height HTML attributes
   count as specified dimensions and override aspect-ratio. */
img, svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent-bg); color: var(--color-text); }

/* ------------------------------------------------------------ typography --- */
/* Class names and values from guidelines/typography-guidelines.md */

.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.hero {
  font-family: var(--font-body);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
}

.body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
}

.stat-val {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* never break "52% → 65%" across the arrow */
}

.stat-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--space-1);
}

.section-title {
  font-family: var(--font-body);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.meta {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
}

.lede {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  max-width: 58ch;
}

/* ---------------------------------------------------------------- layout --- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.page { padding-bottom: var(--space-9); }

/* ------------------------------------------------------------------- nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FAFAFAe6;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out);
}

.nav.is-stuck { border-bottom-color: var(--color-border); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 64px;
}

.nav__mark {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: 14px;
  font-weight: 400;
}

.nav__links a {
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease-out);
}

.nav__links a:hover { color: var(--color-text); }

.nav__links a[aria-current='page'] { color: var(--color-accent); }

/* ------------------------------------------------------------------ hero --- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
  align-items: center;
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

/* Portrait card ----------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  will-change: transform;
}

.card:hover {
  transform: rotate(0deg) translateY(-6px);
}

.card__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  background: #EFEDE9;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2) var(--space-2);
}

.card__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.card__avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  object-position: center 15%;
  flex-shrink: 0;
}

.card__handle {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.card__net {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Hero copy --------------------------------------------------------------- */

.hero-copy > * + * { margin-top: var(--space-5); }

.hero-copy h1 { font-weight: 400; }

/* The hero subheader runs a size up from the global .lede. Scoped on purpose —
   .lede is shared with resume.html and about.html, which should not change. */
.hero-copy .lede { font-size: clamp(17px, 1.6vw, 22px); }

/* Rotating word in the h1 — "Product Manager / Maker / Enthusiast".
   Deliberately NOT a fixed width: it sizes to whichever word is showing, so the
   trailing "." stays glued to the word instead of leaving a gap after "Maker".
   The word ends its own line, so the reflow reads as natural. */

.word-cycle {
  display: inline-block;
  position: relative;
}

.word-cycle__w {
  display: inline-block;
  transition: opacity .35s ease, transform .35s ease;
}

/* Leaving, upward. */
.word-cycle__w.is-out {
  opacity: 0;
  transform: translateY(-0.35em);
}

/* Pre-entry state, from below. Removing the class lets it settle to rest. */
.word-cycle__w.is-in {
  opacity: 0;
  transform: translateY(0.35em);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-top: var(--space-2);
  max-width: 620px;
}

.stats > div { min-width: 0; }

/* ---------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.btn--accent {
  background: var(--color-accent);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--dark {
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 14px;
  padding: 11px 18px;
}

.btn--dark:hover { transform: translateY(-1px); }

.btn--sm { font-size: 13px; padding: 9px 16px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

/* Headroom so the fan has somewhere to open into without hitting the stats. */
.hero-copy .cta-row { margin-top: 108px; }

/* ============================================================
   The logo fan — hovering Resume spreads past-employer tiles
   out from behind the button. Pure CSS; --i drives the stagger.
   ============================================================ */

.cta-resume {
  position: relative;
  /* Room on the left for the resting stack to peek out. */
  padding-left: 58px;
  isolation: isolate;
}

.cta-resume .cta-label { position: relative; z-index: 30; }

.fan {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  pointer-events: none;
  z-index: 1;
}

.fan-tile {
  position: absolute;
  inset: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--color-surface);
  /* No padding — the logo fills the squircle edge to edge. All four sources
     are square and already app-icon shaped, so cover can't distort them. */
  object-fit: cover;
  padding: 0;
  box-shadow: 0 1px 2px #31313114, 0 6px 16px #3131311f;
  /* Resting: stacked, fanned by only a couple of degrees. */
  transform: rotate(calc(var(--i) * -2.2deg)) translate(calc(var(--i) * -1px), 0);
  z-index: calc(20 - var(--i));
  transition: transform 0.55s var(--ease-spring);
  transition-delay: calc(var(--i) * 30ms);
  will-change: transform;
}

/* Each tile gets its own destination — a hand-tuned arc sweeping from the
   lower left, up over the button, and down to the right. Kept above the
   label so "Resume" is never covered. */
.cta-resume:hover  .fan-tile,
.cta-resume:focus-visible .fan-tile { transform: var(--to); }

.fan-tile:nth-child(1) { --to: translate(-30px,  -6px) rotate(-14deg) scale(1.02); }
.fan-tile:nth-child(2) { --to: translate(-52px, -44px) rotate(-25deg) scale(1.00); }
.fan-tile:nth-child(3) { --to: translate(-26px, -86px) rotate( -8deg) scale(0.98); }
.fan-tile:nth-child(4) { --to: translate( 24px, -92px) rotate(  8deg) scale(0.96); }

/* ------------------------------------------------------------ tools strip --- */

.strip {
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.strip__label { margin-bottom: var(--space-5); }

/* Stack list — categorised tools, one .rail per category. Layout, separators
   and the chips are all existing components; only these four rules are new. */

.stack-title {
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: var(--space-6);
}

/* 130px is too narrow for "Delivery & Roadmapping" at 11px uppercase — it
   wraps to two lines. Scoped so the rails on resume.html, which share the
   class, don't move. */
.stack .rail {
  grid-template-columns: 230px 1fr;
  align-items: center;
}

/* The default 48px+48px rail rhythm is built for paragraphs of prose. A row of
   chips is one line tall, so at that spacing the section reads mostly as empty
   gaps. Half it. */
.stack .rail + .rail {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}

/* Opacity rather than a new grey, so no colour is invented. Tabular figures
   keep 01–05 in a straight column. */
.stack-num {
  opacity: 0.55;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}

/* Nested variant, used on resume.html: the same rows one level in, so the
   section's own "Tools" label stays on the page's spine with Experience and
   Certifications instead of being pushed aside by a second label column.
   Same rhythm and separator as .stack .rail + .rail above. */
.stack-group + .stack-group {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.stack-group .rail__label {
  padding-top: 0;
  margin-bottom: var(--space-3);
}

/* Both stack forms, but NOT .stack on the resume section — putting that class
   there would drag the 230px label column onto the section's own "Tools" rail
   and knock it off the page's spine. */
.stack .pill,
.stack-group .pill {
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.stack .pill:hover,
.stack-group .pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tool {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 9px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.tool img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.tool:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tool:hover img { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------- sections --- */

.section {
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
  border-top: 1px solid var(--color-border);
}

/* Half the standard section padding, top and bottom. */
.section--tight { padding-block: clamp(var(--space-5), 3vw, var(--space-7)); }

.section__head { margin-bottom: var(--space-6); }
.section__head .eyebrow { margin-bottom: var(--space-3); }

/* Left-rail label + content grid. Same rhythm as the case-study mocks. */
.rail {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-6);
}

.rail + .rail {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.rail__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1.6;
  padding-top: 3px;
}

/* ------------------------------------------------------------------ pills --- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
}

.pill img { width: 14px; height: 14px; object-fit: contain; }

/* Tools strip — logos only, no pill chrome, at 2x the in-pill size. The hover
   label is absolutely positioned so it can't widen the icons' spacing; the
   strip reserves vertical room for it instead. */
.tool-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: 20px;
}

.tool-logos__item { position: relative; display: block; width: 28px; height: 28px; }

.tool-logos__item img { width: 28px; height: 28px; object-fit: contain; transition: transform .18s ease; }

.tool-logos__name {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity .18s ease;
}

.tool-logos__item:hover img { transform: scale(1.12); }
.tool-logos__item:hover .tool-logos__name { opacity: 1; }

.pill--accent {
  background: var(--color-accent-bg);
  border-color: transparent;
  color: var(--color-accent);
}

/* ------------------------------------------------------------------ entry --- */
/* Resume experience / education rows */

.entry__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Logo fills its square — no padding, no ring. Note several source logos are
   white-ground JPGs, so their own white still reads slightly brighter than the page. */
.logo-tile {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.entry__role {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.entry__org { font-size: 14px; font-weight: 400; }

.entry__when {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.bullets { display: grid; gap: var(--space-3); }

.bullets li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 15px;
  line-height: 1.7;
}

.bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border);
}

.bullets b,
.list__note b {
  font-weight: 500;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-blue);
  font-variant-numeric: tabular-nums;
}

.stack-line {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Simple two-column list — education, certificates, languages */

.list { display: grid; gap: var(--space-4); }

.list__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.list__row .logo-tile { width: 38px; height: 38px; }

.list__main { font-size: 15px; font-weight: 400; line-height: 1.45; }
.list__sub {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.list__note { font-size: 14px; font-weight: 300; line-height: 1.6; margin-top: 4px; max-width: 62ch; }

/* Rows carrying a note are three lines tall — top-align so the date sits with
   the company name rather than floating against the middle line. */
.list--notes .list__row { align-items: flex-start; }

.list__end {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-left: var(--space-3);
}

/* ------------------------------------------------------------------ prose --- */

.prose { max-width: 62ch; }
.prose > * + * { margin-top: var(--space-5); }
.prose p { font-size: 16px; line-height: 1.8; }

/* ------------------------------------------------------- kaizen tooltip --- */
/* About page. The dotted underline is the only at-rest hint that the word is
   interactive, so it has to stay visible. A <button> rather than a <span> so
   it works on touch, where tapping focuses it and tapping away blurs it. */

.about-intro { position: relative; }

.kaizen-wrap { position: relative; display: inline-block; }

.kaizen {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  text-decoration: underline dotted var(--color-text-muted);
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
}

.kaizen-card {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 0;
  z-index: 20;
  display: grid;
  gap: var(--space-2);
  width: min(320px, 78vw);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.22s var(--ease-out),
    transform 0.22s var(--ease-out),
    visibility 0s linear 0.22s;
}

.kaizen-card__term {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.kaizen-card__def {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: normal;
}

/* DM Sans is loaded without an italic axis, so an <em> here would be a
   synthesised oblique. Use Fraunces — the page's second and last italic,
   echoing the headline word. */
.kaizen-card__def em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
}

/* :hover on the wrapper keeps the card open while the pointer travels
   from the word down onto the card itself. */
.kaizen-wrap:hover .kaizen-card,
.kaizen:hover + .kaizen-card,
.kaizen:focus + .kaizen-card,
.kaizen:focus-visible + .kaizen-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

/* Recognition strip — wide logos, not square */

.recognition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.recognition__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.recognition__item img {
  height: 22px;
  width: auto;
  max-width: 92px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
}

.recognition__item span {
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Principles — how I work */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-5);
}

.principle__n {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.principle__t {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.principle__b { font-size: 14px; line-height: 1.7; color: var(--color-text); }

/* ---------------------------------------------------------------- contact --- */

.contact {
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
  border-top: 1px solid var(--color-border);
}

.contact__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.contact__mail {
  font-family: var(--font-body);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  display: inline-block;
  position: relative;
}

.contact__mail::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.contact__mail:hover { color: var(--color-blue); }
.contact__mail:hover::after { transform: scaleX(1); }

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 14px;
}

.contact__links a { color: var(--color-text-muted); transition: color 0.2s var(--ease-out); }
.contact__links a:hover { color: var(--color-text); }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ----------------------------------------------------------------- motion --- */

/* Hero entrance — CSS only, staggered via inline --d */
.rise {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.75s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal — JS toggles .is-visible */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------ responsive --- */

/* Between 861 and 1100px the hero is still two columns but the gap is tight,
   so the fan opens straight up instead of reaching left into the photo card. */
@media (min-width: 861px) and (max-width: 1100px) {
  .stat-val { font-size: 19px; }
  .stats { gap: var(--space-4); }

  .fan-tile:nth-child(1) { --to: translate(-18px,  -8px) rotate(-11deg) scale(1.02); }
  .fan-tile:nth-child(2) { --to: translate(-26px, -46px) rotate(-20deg) scale(1.00); }
  .fan-tile:nth-child(3) { --to: translate( 12px, -86px) rotate( -2deg) scale(0.98); }
  .fan-tile:nth-child(4) { --to: translate( 54px, -66px) rotate( 14deg) scale(0.96); }
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .card { max-width: 360px; }

  .rail { grid-template-columns: 1fr; gap: var(--space-3); }

  /* .stack .rail outranks the line above on specificity, so the stack rows
     need collapsing explicitly or they keep the 230px label column. */
  .stack .rail { grid-template-columns: 1fr; align-items: start; }
  .rail__label { padding-top: 0; }

  .contact__grid { align-items: flex-start; }

  /* Two columns, 2+1. minmax(0,…) not minmax(140px,…) — a px floor would
     become the grid's min-content and widen the whole hero. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* No hover on touch, so the fan is a focus-only nicety here. Keep it
     compact and reclaim the headroom it needed on desktop. */
  .hero-copy .cta-row { margin-top: var(--space-8); }

  .fan-tile:nth-child(1) { --to: translate(-20px,  -4px) rotate(-12deg) scale(1.00); }
  .fan-tile:nth-child(2) { --to: translate(-28px, -36px) rotate(-21deg) scale(0.98); }
  .fan-tile:nth-child(3) { --to: translate(  6px, -56px) rotate( -4deg) scale(0.96); }
  .fan-tile:nth-child(4) { --to: translate( 42px, -44px) rotate( 13deg) scale(0.94); }
}

@media (max-width: 560px) {
  .wrap { padding-inline: var(--space-5); }
  .stats { gap: var(--space-5); }
  .cta-row { gap: var(--space-3); }
  .btn { padding: 13px 22px; }
  .list__end { margin-left: 0; padding-left: 0; width: 100%; }
  .list__row { flex-wrap: wrap; }

  /* The wordmark already links home, so the nav link is redundant here
     and the four links would otherwise overflow. */
  .nav__links { gap: var(--space-4); font-size: 13px; }
  .nav__links a[href='index.html'] { display: none; }

  /* "kaizen" sits near the right edge, so a card anchored to the word would
     hang off screen. Going static hands positioning to .about-intro instead
     (which is why that section is position:relative), and the card spans the
     gutters, sitting in the section's bottom padding just under the headline. */
  .kaizen-wrap { position: static; }

  .kaizen-card {
    top: 100%;
    left: var(--space-5);
    right: var(--space-5);
    width: auto;
  }
}

/* ---------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }

  .rise { opacity: 1; transform: none; }
  /* Belt and braces — js/main.js already skips the cycle entirely. */
  .word-cycle__w { transition: none !important; opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .card:hover { transform: rotate(-2deg); }
  .btn:hover { transform: none; }
  .tool:hover { transform: none; }
  .stack .pill:hover,
  .stack-group .pill:hover { transform: none; }
  .tool-logos__item:hover img { transform: none; }
}