/* home.css: homepage layer, loads after main.css + theme.css and reuses their tokens and classes */

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  background: var(--_theme---text--heading); color: var(--_theme---background--section);
  padding: 10px 16px; border-radius: 8px;
  font-family: var(--_typography---family--mono); font-size: 12px; text-decoration: none;
  transform: translateY(-160%); transition: transform .18s var(--_motion---ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Navbar: photo card + centered floating pill */
.topbar_component {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  border-bottom: 1px solid transparent; background: transparent;
  transition: transform .45s var(--_motion---ease-out-expo), background .3s var(--_motion---ease-out), border-color .3s var(--_motion---ease-out), backdrop-filter .3s var(--_motion---ease-out);
}
.topbar_container {
  max-width: var(--_ui---page--wrap); margin-inline: auto;
  padding: 14px var(--_ui---page--padding, 5%);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.topbar_component[data-state="scrolled"] {
  background: color-mix(in srgb, var(--_theme---background--section) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--_theme---border--default);
}
.topbar_component.is-retracted { transform: translateY(-102%); }

/* photo card */
.topbar_profile { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; }
.topbar_avatar {
  position: relative; width: 44px; height: 44px; border-radius: var(--_ui---radius--base);
  border: 1px solid var(--_theme---border--default); overflow: visible; flex: none;
  background: var(--_theme---background--card);
}
.topbar_avatar img { width: 100%; height: 100%; border-radius: calc(var(--_ui---radius--base) - 1px); object-fit: cover; display: block; }
.topbar_status {
  position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--_theme---badge--dot);
  border: 2.5px solid var(--_theme---background--section);
}
.topbar_status::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--_theme---badge--dot); animation: statusPing 2s var(--_motion---ease-out) infinite;
}
.topbar_id { display: flex; flex-direction: column; line-height: 1.2; }
.topbar_name { font-family: var(--_typography---family--body); font-weight: 600; font-size: 15px; color: var(--_theme---text--heading); letter-spacing: -.01em; }
.topbar_role { font-family: var(--_typography---family--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--_theme---text--muted); }

/* floating center pill */
.topbar_menu {
  justify-self: center; display: flex; gap: 2px; padding: 4px;
  border-radius: var(--_ui---radius--base); border: 1px solid var(--_theme---border--default);
  background: color-mix(in srgb, var(--_theme---background--card) 70%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.topbar_link {
  position: relative; padding: 8px 16px; border-radius: var(--_ui---radius--base); text-decoration: none;
  font-family: var(--_typography---family--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--_theme---text--muted); transition: color .2s ease, background .2s ease;
}
.topbar_link span { position: relative; z-index: 1; }
.topbar_link:hover { color: var(--_theme---text--heading); background: color-mix(in srgb, var(--_theme---text--heading) 6%, transparent); }

.topbar_actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

/* Hero: production tokens, subtle grid */
/* Hero: symmetric nav-safe padding top and bottom so the heading is truly centered */
.section_home-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 96px 48px; overflow: hidden; }
.section_home-hero { --hero-grid-opacity: .45; }   /* read by the hero timeline so the grid fades to its resting opacity */
.home-hero_bg-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--hero-grid-opacity);
  background-image: linear-gradient(var(--_theme---border--default) 1px, transparent 1px), linear-gradient(90deg, var(--_theme---border--default) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 30%, transparent 78%);
}
.home-hero_bg-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% -8%, color-mix(in srgb, var(--_theme---text--accent) 12%, transparent) 0%, transparent 62%); }
.home-hero_content { position: relative; max-width: 960px; }
.home-hero_heading {
  font-family: var(--_typography---family--heading); font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 1.02;
  letter-spacing: var(--_typography---letter-spacing--heading, -.038em);
  color: var(--_theme---text--heading); margin: 0;
}
/* H1 visual lines: masked rise (padding/negative margin keep descenders unclipped without changing layout) */
.home-hero_line { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.home-hero_line-inner { display: block; }
.home-hero_rotator { display: inline-flex; align-items: baseline; }
.home-hero_rotator-word { color: var(--_theme---text--accent); }
.home-hero_caret { display: inline-block; width: .06em; height: .82em; margin-left: .06em; background: var(--_theme---text--accent); animation: caretBlink 1.05s steps(1) infinite; transform: translateY(.02em); }
.home-hero_subheading { margin: 26px 0 0; max-width: 54ch; font-size: var(--_typography---size--text-medium, 1.25rem); color: var(--_theme---text--body); line-height: 1.6; }
.home-hero_actions { display: flex; align-items: center; gap: var(--_grid-and-spacing---button-gap); flex-wrap: wrap; margin-top: var(--_grid-and-spacing---cta-gap); }

/* Section shells */
/* Section spacing: production section-gap tokens, responsive via main.css media queries */
.section_work, .section_services, .section_cta, .section_ported { padding-block: var(--_grid-and-spacing---section-padding); }
/* ported production sections reuse production component classes; the shell only supplies section spacing */
.section_ported .section_header { margin-bottom: var(--_grid-and-spacing---element-spacing--large, 2.5rem); }

/* ported cards carry --_ui---radius--3xl; match every ported card and its image to it */
.section_ported .client-card_component,
.section_ported .service-card_component,
.section_ported .cert-card_component,
.section_ported .faq_item { border-radius: var(--_ui---radius--base); }
/* stats + process are one bordered strip: the grid carries the border + overflow:hidden, so round the strip, not the cells */
.section_ported .stats_grid,
.section_ported .process_grid { border-radius: var(--_ui---radius--base); }
.section_ported .cert-card_image-wrapper,
.section_ported .cert-card_image { border-radius: calc(var(--_ui---radius--base) - 2px); }

/* Certs is a dark panel in production; restore it so the hardcoded white card text stays readable in light theme */
#section-certs { background: var(--_theme---background--panel); border-radius: var(--_ui---radius--base); }

/* Certs = the Work drag slider (JS initDragSlider): flex track, snap, hidden scrollbar */
#section-certs .drag-slider_track {
  display: flex; gap: clamp(14px, 1.6vw, 22px); padding: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--_ui---radius--base);
}
#section-certs .drag-slider_track::-webkit-scrollbar { display: none; }
#section-certs .drag-slider_track.is-dragging { scroll-snap-type: none; user-select: none; }
#section-certs .drag-slider_track img { -webkit-user-drag: none; user-select: none; }
#section-certs .drag-slider_track > * { flex: 0 0 clamp(14rem, 22vw, 17rem); scroll-snap-align: start; }
/* compact card: thin frame, full certificate (native portrait ratio, never cropped), tight caption */
#section-certs .cert-card_component { padding: 10px 10px 16px; }
#section-certs .cert-card_image-wrapper { aspect-ratio: 902 / 1168; margin-bottom: 14px; }
#section-certs .cert-card_image { object-fit: contain; }
#section-certs .cert-card_name { margin: 0 6px 4px; }
#section-certs .cert-card_level { margin: 0 6px; }
#section-certs .section_title { color: var(--_theme---text--on-panel); }
#section-certs .section-toolbar_nav-button { background: var(--_theme---background--panel-raised); border-color: var(--_theme---border--on-panel-raised); color: var(--_theme---text--on-panel); }
@media (hover: hover) and (pointer: fine) { #section-certs .section-toolbar_nav-button:not(:disabled):hover { border-color: var(--_theme---border--on-panel-strong); } }
#section-certs .drag-slider_track:focus-visible { outline: 2px solid var(--_theme---text--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  #section-certs .drag-slider_track { cursor: grab; }
  #section-certs .drag-slider_track.is-dragging { cursor: grabbing; }
}
@media (max-width: 991px) { #section-certs .drag-slider_track > * { flex-basis: 210px; } }
@media (max-width: 560px) { #section-certs .drag-slider_track > * { flex-basis: min(180px, 56%); } }
.section_title { font-family: var(--_typography---family--heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--_theme---text--heading); margin: 0; }

/* Work: equal-cell grid / list toggle */
.section-toolbar_component { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }

.work_toggle { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--_ui---radius--base); border: 1px solid var(--_theme---border--default); background: var(--_theme---background--card); }
.work_toggle-button {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: var(--_ui---radius--base);
  background: transparent; color: var(--_theme---text--muted); cursor: pointer;
  font-family: var(--_typography---family--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  transition: color .2s ease, background .2s ease, scale var(--_motion---duration--press) var(--_motion---ease-out);
}
.work_toggle-button:active { scale: .97; }
.work_toggle-button svg { width: 15px; height: 15px; }
.work_toggle-button.is-active { background: var(--_theme---background--subtle); color: var(--_theme---text--heading); }

/* GRID: auto-fit equal cells — every card identical W & H regardless of count */
.work_projects[data-layout="grid"] {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(2, 1fr); /* two equal columns, all cells same W & H */
}
.work-card_component { text-decoration: none; color: inherit; display: block; }
.work-card_frame {
  position: relative; overflow: hidden; border-radius: var(--_ui---radius--base);
  border: 1px solid var(--_theme---border--default); background: var(--_theme---background--subtle);
  aspect-ratio: 4 / 3;
}
.work-card_image { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .45s var(--_motion---ease-out-expo); }
/* three non-fighting transform channels on the image: hover = `transform`, reveal = `scale` (GSAP tweens --reveal-scale), drift = `translate` (GSAP scrubs --drift-y) */
.work-card_image { scale: var(--reveal-scale, 1); }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  /* oversize 10% (5% each side) so the +-4% scrubbed drift never reveals an edge; only where drift runs */
  .js-motion .work-card_image { height: 110%; margin-top: -5%; translate: 0 calc(var(--drift-y, 0) * 1%); }
}
.work-card_component:hover .work-card_image { transform: scale(1.04); }
/* Flowwtools capture is a wide laptop-on-sofa photo: centre the laptop screen (x 30-86%, y 22-68%) instead of top-centre */
.work-card_image.is-flowwtools { object-position: 62% 45%; }
/* GRID meta: category, name, description stacked left, year top-right, arrow bottom-right; only the image scales on hover */
.work-card_meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 16px 4px 0; }
.work-card_category { grid-column: 1; grid-row: 1; font-family: var(--_typography---family--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--_theme---text--muted); margin: 0; }
.work-card_name { grid-column: 1; grid-row: 2; font-family: var(--_typography---family--heading); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--_theme---text--heading); margin: 4px 0 0; }
.work-card_description { grid-column: 1; grid-row: 3; font-family: var(--_typography---family--body); font-size: .95rem; line-height: 1.55; color: var(--_theme---text--body); margin: 8px 0 0; max-width: 52ch; }
.work-card_year { grid-column: 2; grid-row: 1; font-family: var(--_typography---family--mono); font-size: 11px; letter-spacing: .06em; color: var(--_theme---text--muted); }
.work-card_arrow { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; color: var(--_theme---text--heading); display: flex; }
.work-card_arrow svg { width: 16px; height: 16px; }
.work-card_arrow svg + svg { display: none; }

/* LIST: dense archive, equal rows */
.work_projects[data-layout="list"] { display: flex; flex-direction: column; }
.work_projects[data-layout="list"] .work-card_frame { display: none; }
.work_projects[data-layout="list"] .work-card_component {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 20px;
  padding: 20px 6px; border-bottom: 1px solid var(--_theme---border--default);
}
.work_projects[data-layout="list"] .work-card_component:first-child { border-top: 1px solid var(--_theme---border--default); }
.work_projects[data-layout="list"] .work-card_meta { display: contents; }
.work_projects[data-layout="list"] .work-card_description { display: none; }  /* list = dense archive, no description */
/* pin all four onto one row so auto-flow can't create a 2nd row, then center each vertically */
.work_projects[data-layout="list"] .work-card_category,
.work_projects[data-layout="list"] .work-card_name,
.work_projects[data-layout="list"] .work-card_year,
.work_projects[data-layout="list"] .work-card_arrow {
  grid-row: 1; align-self: center; justify-self: start; margin: 0;
}
.work_projects[data-layout="list"] .work-card_name { grid-column: 1; font-size: clamp(1.1rem, 1.8vw, 1.4rem); transition: color .2s ease; }
.work_projects[data-layout="list"] .work-card_category { grid-column: 2; justify-self: end; text-align: right; }
.work_projects[data-layout="list"] .work-card_year { grid-column: 3; }
.work_projects[data-layout="list"] .work-card_arrow { grid-column: 4; }
.work_projects[data-layout="list"] .work-card_component { grid-template-columns: minmax(0,1fr) auto 3ch 2ch; }
.work_projects[data-layout="list"] .work-card_component:hover { background: var(--_theme---background--subtle); }
.work_projects[data-layout="list"] .work-card_component:hover .work-card_name { color: var(--_theme---text--accent); }

/* SLIDER: draggable snap-scrolling track of image cards, same .work-card_component markup as grid/list (drag: home.js, touch: native, keys: arrows) */
.section-toolbar_controls { display: flex; align-items: center; gap: 10px; }
.section-toolbar_nav { display: inline-flex; gap: 6px; }
.section-toolbar_nav[hidden] { display: none; }
.section-toolbar_nav-button {
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--_theme---border--default); border-radius: var(--_ui---radius--base);
  background: var(--_theme---background--card); color: var(--_theme---text--heading);
  transition: border-color .2s ease, opacity .2s ease, transform .16s var(--_motion---ease-out);
}
.section-toolbar_nav-button svg { width: 18px; height: 18px; }
.section-toolbar_nav-button:active { transform: scale(.97); }
.section-toolbar_nav-button:disabled { opacity: .35; cursor: default; }
.section-toolbar_nav-button:focus-visible, .work_projects:focus-visible, .work-card_component:focus-visible { outline: 2px solid var(--_theme---text--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .section-toolbar_nav-button:not(:disabled):hover { border-color: var(--_theme---border--strong); } }

.work_projects[data-layout="slider"] {
  display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; counter-reset: work-index; border-radius: var(--_ui---radius--base);
}
.work_projects[data-layout="slider"]::-webkit-scrollbar { display: none; }
.work_projects[data-layout="slider"].is-dragging { scroll-snap-type: none; user-select: none; }
.work_projects[data-layout="slider"] img { -webkit-user-drag: none; user-select: none; }
.work_projects[data-layout="slider"] .work-card_component {
  counter-increment: work-index; position: relative; flex: 0 0 clamp(17rem, 30vw, 27rem); aspect-ratio: 4 / 5;
  border-radius: var(--_ui---radius--base); overflow: hidden; scroll-snap-align: start; isolation: isolate;
}
.work_projects[data-layout="slider"] .work-card_frame { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
/* image scrim (top for the pills, bottom for the copy) + sibling dim layer */
.work_projects[data-layout="slider"] .work-card_frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .4) 38%, rgb(0 0 0 / 0) 60%),
              linear-gradient(to bottom, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / 0) 22%);
}
.work_projects[data-layout="slider"] .work-card_frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / .5); opacity: 0; transition: opacity .3s ease;
}
.work_projects[data-layout="slider"] .work-card_meta {
  position: absolute; inset: 0; z-index: 2; padding: 16px 16px 18px 18px;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto auto; align-items: end; gap: 0 14px;
}
.work_projects[data-layout="slider"] .work-card_meta::before,
.work_projects[data-layout="slider"] .work-card_year {
  align-self: start; padding: 5px 9px; line-height: 1; font-family: var(--_typography---family--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--_theme---text--on-panel); background: rgb(0 0 0 / .45); border: 1px solid var(--_theme---border--on-panel-strong); border-radius: var(--_ui---radius--base);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.work_projects[data-layout="slider"] .work-card_meta::before { content: counter(work-index, decimal-leading-zero); grid-column: 1; grid-row: 1; justify-self: start; }
.work_projects[data-layout="slider"] .work-card_year { grid-column: 2; grid-row: 1; }
.work_projects[data-layout="slider"] .work-card_category { grid-column: 1 / -1; grid-row: 3; color: var(--_theme---text--on-panel-soft); }
.work_projects[data-layout="slider"] .work-card_name { grid-column: 1; grid-row: 4; color: var(--_theme---text--on-panel); font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 800; }
.work_projects[data-layout="slider"] .work-card_description { display: none; }  /* slider card = category + name + arrow only */
/* arrow button: the arrow slides out right while a fresh one slides in from the left */
.work_projects[data-layout="slider"] .work-card_arrow {
  grid-column: 2; grid-row: 4; align-self: center; position: relative; overflow: hidden; width: 40px; height: 40px;
  font-size: 0; border-radius: var(--_ui---radius--base);
  background: var(--_theme---primary-button--background); color: var(--_theme---primary-button--text);
}
.work_projects[data-layout="slider"] .work-card_arrow svg {
  display: block; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  transition: transform .3s var(--_motion---ease-out);
}
.work_projects[data-layout="slider"] .work-card_arrow svg + svg { transform: translate(-40px, 40px); }
@media (hover: hover) and (pointer: fine) {
  .work_projects[data-layout="slider"] { cursor: grab; }
  .work_projects[data-layout="slider"].is-dragging { cursor: grabbing; }
  .work_projects[data-layout="slider"]:hover .work-card_component:not(:hover) .work-card_frame::before { opacity: 1; }
  .work_projects[data-layout="slider"].is-dragging .work-card_component .work-card_frame::before { opacity: 0; }
  .work_projects[data-layout="slider"] .work-card_component:hover .work-card_arrow svg { transform: translate(40px, -40px); }
  .work_projects[data-layout="slider"] .work-card_component:hover .work-card_arrow svg + svg { transform: none; }
}
/* "Drag" badge that follows the pointer over the track (fine pointers) */
.drag-badge_component {
  position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--_theme---primary-button--background); color: var(--_theme---primary-button--text);
  font-family: var(--_typography---family--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; scale: .6; transition: opacity .2s ease, scale .25s var(--_motion---ease-out);
}
.drag-badge_component.is-on { opacity: 1; scale: 1; }
.drag-badge_component.is-pressed { scale: .9; }
.cursor_component.is-off { opacity: 0 !important; }
@media (max-width: 767px) { .work_projects[data-layout="slider"] .work-card_component { flex-basis: 80%; } }
@media (max-width: 560px) {
  .section-toolbar_nav { display: none !important; }                 /* touch: swipe the track */
  .work_toggle-button { padding: 9px 11px; }
  .work_toggle-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .work_projects[data-layout="slider"] .work-card_arrow svg { transition: none; } }

/* list hover preview (desktop, fine pointer) */
.project-preview_component {
  position: fixed; z-index: 150; width: 280px; aspect-ratio: 4/3; border-radius: var(--_ui---radius--base); overflow: hidden;
  border: 1px solid var(--_theme---border--strong); box-shadow: 0 18px 40px -18px rgba(0,0,0,.4); pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .2s var(--_motion---ease-out), transform .2s var(--_motion---ease-out);
  background: var(--_theme---background--card);
}
.project-preview_component.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.project-preview_component img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (pointer: coarse) { .project-preview_component { display: none !important; } }

/* How I work: scroll-drawn build timeline; rest state is fully drawn, home.js arms it and lights steps with scroll progress */
.section_process { padding-block: var(--_grid-and-spacing---section-padding); }
.section_title.is-narrow { margin: 0; max-width: 20ch; text-wrap: balance; }
::selection { background: color-mix(in srgb, var(--_theme---text--accent) 24%, transparent); color: var(--_theme---text--heading); }
.process_viz { position: relative; container-type: size; aspect-ratio: 16 / 10; background: var(--_theme---background--card); overflow: hidden; }
.process_viz .diagram_svg { position: absolute; left: 50%; top: 50%; height: auto; transform: translate(-50%, -50%); }
.process_name { margin: 0 0 var(--_grid-and-spacing---element-spacing--xsmall, .5rem); font-family: var(--_typography---family--heading); font-size: var(--_typography---size--h5, 1.375rem); font-weight: var(--_typography---weight--extrabold, 800); letter-spacing: -.02em; line-height: var(--_typography---height--card-heading, 1.25); color: var(--_theme---text--heading); }
.process_description { margin: 0; max-width: 46ch; font-size: var(--_typography---size--text-small, 1rem); line-height: var(--_typography---height--body, 1.65); color: var(--_theme---text--body); }

/* ---- diagram material ---- */
.diagram_svg { display: block; overflow: hidden; }
.diagram_svg * { transform-box: fill-box; transform-origin: center; }
.diagram_frame, .diagram_panel { fill: var(--_theme---background--section); stroke: var(--_theme---border--default); stroke-width: 1; }
.diagram_panel.is-accent { stroke: var(--_theme---text--accent); stroke-width: 1.5; }
.diagram_note-card { fill: var(--_theme---background--section); stroke: var(--_theme---border--strong); stroke-width: 1; }
.diagram_note-card.is-accent { stroke: var(--_theme---text--accent); stroke-width: 1.5; }
.diagram_fill { fill: var(--_theme---background--card); }
.diagram_bar { fill: var(--_theme---border--default); }
.diagram_ink { fill: var(--_theme---text--heading); }
.diagram_accent { fill: var(--_theme---text--accent); }
.diagram_hairline { stroke: var(--_theme---border--default); stroke-width: 1; }
.diagram_lead { fill: none; stroke: var(--_theme---border--strong); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.diagram_tick { fill: none; stroke: var(--_color---neutral--white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram_text { font-family: var(--_typography---family--mono); font-size: 12px; fill: var(--_theme---text--muted); }
.diagram_mono { font-family: var(--_typography---family--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: var(--_theme---text--muted); }
.diagram_text.is-ink { fill: var(--_theme---text--heading); }
.diagram_text.is-accent { fill: var(--_theme---text--accent); }
.diagram_mono.is-inverse { fill: var(--_color---neutral--white); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.diagram_text.is-middle, .diagram_mono.is-middle { text-anchor: middle; }

/* ---- How I work: 4 step cards; rest = built, hover (fine pointer) replays the build ---- */
.process_steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--_ui---gap--card, 1.25rem); }
.process_frame { margin-bottom: var(--_grid-and-spacing---element-spacing--medium, 1.25rem); border: 1px solid var(--_theme---border--default); border-radius: var(--_ui---radius--base); transition: border-color .25s ease; }
.process_frame .diagram_svg { width: min(100cqw - 24px, (100cqh - 16px) * 1.6); }
.process_component .diagram_text { font-size: 12px; }
.process_component .diagram_mono { font-size: 11px; }
.process_label { margin: 0 0 var(--_grid-and-spacing---element-spacing--xsmall, .5rem); font-family: var(--_typography---family--mono); font-size: var(--_typography---size--text-tiny, .75rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--_theme---text--accent); }
.diagram_roll { transform-box: view-box; transform: translateY(-18px); }
@keyframes diagramNote { from { transform: translate(var(--note-x), var(--note-y)) rotate(var(--note-rotate)); } }
@keyframes diagramLink { from { stroke-dashoffset: 1; } }
@keyframes diagramRise { from { opacity: 0; transform: translateY(6px); } }
@keyframes diagramRoll { from { transform: translateY(0); } }
@keyframes diagramLive { from { opacity: .25; } }
/* the build keyframes run on hover (fine pointer) AND once on enter: motionEngine adds .is-built, then removes it after ~0.9s so hover can replay */
.process_step.is-built .diagram_note { animation: diagramNote .45s var(--_motion---ease-out) calc(var(--item-index, 0) * 50ms) backwards; }
.process_step.is-built .diagram_link { animation: diagramLink .45s var(--_motion---ease-out) calc(var(--item-index, 0) * 50ms) backwards; }
.process_step.is-built :is(.diagram_page, .diagram_block) { animation: diagramRise .45s var(--_motion---ease-out) calc(var(--item-index, 0) * 50ms) backwards; }
.process_step.is-built .diagram_roll { animation: diagramRoll .35s var(--_motion---ease-out) .4s backwards; }
.process_step.is-built .diagram_live { animation: diagramLive .25s ease .55s backwards; }
@media (hover: hover) and (pointer: fine) {
  .process_step:hover .process_frame { border-color: var(--_theme---border--strong); }
  .process_step:hover .diagram_note { animation: diagramNote .45s var(--_motion---ease-out) calc(var(--item-index, 0) * 50ms) backwards; }
  .process_step:hover .diagram_link { animation: diagramLink .45s var(--_motion---ease-out) calc(var(--item-index, 0) * 50ms) backwards; }
  .process_step:hover :is(.diagram_page, .diagram_block) { animation: diagramRise .45s var(--_motion---ease-out) calc(var(--item-index, 0) * 50ms) backwards; }
  .process_step:hover .diagram_roll { animation: diagramRoll .35s var(--_motion---ease-out) .4s backwards; }
  .process_step:hover .diagram_live { animation: diagramLive .25s ease .55s backwards; }
}

/* ---- responsive ---- */
@media (max-width: 991px) { .process_steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 767px) { .process_steps { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } }
@media (prefers-reduced-motion: reduce) { .process_component * { animation: none !important; transition: none !important; } }

/* Icon-card grids (Who I work with, Services): 2 columns on tablet (last of 3 spans the row), 1 on phones */
@media (max-width: 991px) {
  .section_ported :is(.clients_grid, .services_grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section_ported :is(.clients_grid, .services_grid) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .section_ported :is(.clients_grid, .services_grid) { grid-template-columns: minmax(0, 1fr); }
}

/* What you get: capability statement with keyword chips docked before each keyword; hover/click opens an origin-aware panel under the chip */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.capability_statement, .about_intro { margin: 0; max-width: none; font-family: var(--_typography---family--heading); font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; color: var(--_theme---text--muted); text-wrap: pretty; }
.capability_line { display: block; }
/* merged About + How I help: one centred statement (both paragraphs share the type above) */
.section_about { padding-block: var(--_grid-and-spacing---section-padding); }
.about_statement { text-align: center; }
.about_intro { max-width: 26ch; margin: 0 auto .9em; text-wrap: balance; }
@media (min-width: 992px) { .capability_line { white-space: nowrap; } }
.capability_statement strong, .about_intro strong { font-weight: inherit; color: var(--_theme---text--heading); }
.capability_item { position: relative; display: inline-block; vertical-align: -.03em; }
.capability_chip {
  display: inline-flex; align-items: center; gap: .1em; height: .86em; padding: 0 .16em 0 .2em; margin: 0;
  font: inherit; line-height: 1; color: var(--_theme---text--accent); cursor: pointer;
  background: var(--_theme---background--card); border: 1px solid var(--_theme---border--default); border-radius: var(--_ui---radius--base);
  transition: border-color .2s ease, background-color .2s ease, transform .16s var(--_motion---ease-out);
}
.capability_icon { width: .46em; height: .46em; display: block; }
.capability_chevron { width: .22em; height: .22em; fill: none; stroke: var(--_theme---text--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--_motion---ease-out), stroke .2s ease; }
.capability_chip:active { transform: scale(.97); }
.capability_chip:focus-visible { outline: 2px solid var(--_theme---text--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .capability_chip:hover { border-color: var(--_theme---border--strong); } }
.capability_item.is-open .capability_chip { border-color: var(--_theme---text--accent); background: color-mix(in srgb, var(--_theme---text--accent) 8%, var(--_theme---background--card)); }
.capability_item.is-open .capability_chevron { transform: rotate(180deg); stroke: var(--_theme---text--accent); }

/* the panel: reset the headline type, anchor under the chip, scale from the chip */
.capability_panel {
  position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; translate: var(--panel-shift-x, 0px) 0;
  width: min(20rem, calc(100vw - 32px)); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--_typography---family--body); font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; white-space: normal; text-align: left;
  background: var(--_theme---background--section); border: 1px solid var(--_theme---border--default); border-radius: var(--_ui---radius--base);
  box-shadow: 0 16px 56px #00000014;
  transform-origin: var(--panel-origin-x, 24px) top;
  opacity: 0; transform: translateY(-4px) scale(.97); visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s var(--_motion---ease-out), visibility 0s linear .15s;
}
.capability_item.is-open .capability_panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .2s ease, transform .22s var(--_motion---ease-out), visibility 0s; }
.capability_section.is-instant .capability_panel { transition-duration: 0s; }
.capability_title { font-family: var(--_typography---family--heading); font-size: var(--_typography---size--text-regular, 1.125rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--_theme---text--heading); }
.capability_description { font-size: var(--_typography---size--text-small, 1rem); color: var(--_theme---text--body); }
.capability_tags { margin-top: 4px; font-family: var(--_typography---family--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--_theme---text--muted); }

/* statement scrub: words tween .18 -> 1, keywords mix muted -> heading via --keyword-mix, chips dock via --chip-opacity/--chip-scale; rest state = all 1 */
.about_keyword { color: color-mix(in srgb, var(--_theme---text--heading) calc(var(--keyword-mix, 1) * 100%), var(--_theme---text--muted)); }
.capability_chip { opacity: var(--chip-opacity, 1); scale: var(--chip-scale, 1); }
/* the hidden absolute panels used to widen the page on narrow screens; clip (not hidden) so the section is not a scroll container */
.capability_section { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  .capability_panel, .capability_item.is-open .capability_panel { transform: none; transition: opacity .15s ease, visibility 0s; }
  .capability_chevron { transition: none; }
}

/* CTA */
.cta-panel_component { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 8vw, 96px) 24px; border-radius: var(--_ui---radius--base); border: 1px solid var(--_theme---border--default); background: var(--_theme---background--subtle); }
.cta-panel_glow { position: absolute; inset: -20px 0;   /* 20px spare top/bottom for the scrubbed y drift */ pointer-events: none; background: radial-gradient(ellipse 70% 90% at 50% 120%, color-mix(in srgb, var(--_theme---text--accent) 16%, transparent), transparent 60%); }
.cta-panel_title { position: relative; font-family: var(--_typography---family--heading); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--_theme---text--heading); margin: 0; }
.cta-panel_subtitle { position: relative; margin: 16px auto 0; max-width: 46ch; color: var(--_theme---text--body); font-size: 1.1rem; }
/* marquee strip: horizontal full-width strip with soft edge fade inside the CTA panel */
.cta-panel_component .collab-marquee_component { position: relative; height: auto; margin-top: 40px; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.cta-panel_component .collab-marquee_track { flex-direction: row; width: max-content; padding-right: 12px; animation: marquee-scroll 32s linear infinite; }
.cta-panel_component .collab-marquee_item { border-radius: var(--_ui---radius--base); white-space: nowrap; background: transparent; border: 1px solid var(--_theme---border--default); }
@media (max-width: 767px) { .cta-panel_component .collab-marquee_component { margin-top: 32px; } }
.cta-panel_actions { position: relative; display: flex; gap: var(--_grid-and-spacing---button-gap); justify-content: center; flex-wrap: wrap; margin-top: var(--_grid-and-spacing---cta-gap); }

/* Footer: sticky reveal, pinned to the viewport bottom while the opaque main-wrapper above slides over it like a curtain (pure CSS) */
.main-wrapper { position: relative; z-index: 1; background: var(--_theme---background--section); }
.page-footer_component {
  position: sticky; bottom: 0; z-index: 0;
  border-top: 1px solid var(--_theme---border--default);
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--_theme---background--subtle);
}
/* reveal is a scroll effect: coarse pointers get a plain static footer */
@media (prefers-reduced-motion: reduce) { .page-footer_component { position: static; } }
.page-footer_top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--_theme---border--default); }
.page-footer_brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 30rem; }
.page-footer_brand-row { display: flex; align-items: center; gap: 14px; }
.topbar_avatar.is-large { width: 48px; height: 48px; }
.page-footer_id { display: flex; flex-direction: column; line-height: 1.3; }
.page-footer_name { font-family: var(--_typography---family--heading); font-weight: 700; font-size: 17px; color: var(--_theme---text--heading); }
.page-footer_local { font-family: var(--_typography---family--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--_theme---text--muted); }
.page-footer_description { margin: 0; max-width: 34ch; font-family: var(--_typography---family--mono); font-size: 12px; line-height: 1.7; letter-spacing: .02em; color: var(--_theme---text--muted); }

/* clock + label row */
.page-footer_clock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-footer_clock-label { font-family: var(--_typography---family--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--_theme---text--muted); }

/* Footer flip-clock: sizes driven by --clock-* custom properties so breakpoints scale it */
.flip-clock_component { display: flex; gap: 5px; align-items: center; --clock-duration: .3s; --clock-cell-width: 26px; --clock-cell-height: 36px; --clock-font-size: 24px; --clock-separator-size: 22px; }
.flip-clock_component .flip-clock_separator { font-family: var(--_typography---family--mono); font-weight: 700; font-size: var(--clock-separator-size); line-height: 1; color: var(--_theme---text--accent); opacity: .85; }
.flip-clock_component .flip-clock_cell {
  position: relative; width: var(--clock-cell-width); height: var(--clock-cell-height); perspective: 160px;
  font-family: var(--_typography---family--mono); font-weight: 700; font-size: var(--clock-font-size); line-height: var(--clock-cell-height);
  color: var(--_theme---text--heading);
}
.flip-clock_component .flip-clock_half, .flip-clock_component .flip-clock_flap {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  background: var(--_theme---background--card); border: 1px solid var(--_theme---border--default);
}
.flip-clock_component .flip-clock_half span, .flip-clock_component .flip-clock_flap span { position: absolute; left: 0; right: 0; height: var(--clock-cell-height); line-height: var(--clock-cell-height); text-align: center; }
.flip-clock_component .flip-clock_top { top: 0; border-radius: var(--_ui---radius--base) var(--_ui---radius--base) 0 0; border-bottom: 0; }
.flip-clock_component .flip-clock_bottom { bottom: 0; border-radius: 0 0 var(--_ui---radius--base) var(--_ui---radius--base); border-top: 0; }
.flip-clock_component .flip-clock_top span, .flip-clock_component .flip-clock_flap-top span { top: 0; }
.flip-clock_component .flip-clock_bottom span, .flip-clock_component .flip-clock_flap-bottom span { bottom: 0; }
.flip-clock_component .flip-clock_cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--_theme---border--default); z-index: 5; }
.flip-clock_component .flip-clock_flap { backface-visibility: hidden; z-index: 4; }
.flip-clock_component .flip-clock_flap-top { top: 0; border-radius: var(--_ui---radius--base) var(--_ui---radius--base) 0 0; border-bottom: 0; transform-origin: bottom center; }
.flip-clock_component .flip-clock_flap-bottom { bottom: 0; border-radius: 0 0 var(--_ui---radius--base) var(--_ui---radius--base); border-top: 0; transform-origin: top center; transform: rotateX(90deg); }
.flip-clock_component .flip-clock_flap-top.is-flipping { animation: clockFlapTop var(--clock-duration) ease-in forwards; }
.flip-clock_component .flip-clock_flap-bottom.is-flipping { animation: clockFlapBottom var(--clock-duration) var(--clock-duration) ease-out forwards; }
@keyframes clockFlapTop { to { transform: rotateX(-90deg); } }
@keyframes clockFlapBottom { to { transform: rotateX(0deg); } }
@media (prefers-reduced-motion: reduce) { .flip-clock_component .flip-clock_flap { display: none; } }
/* clock shrinks on smaller screens */
@media (max-width: 991px) { .flip-clock_component { gap: 4px; --clock-cell-width: 22px; --clock-cell-height: 30px; --clock-font-size: 20px; --clock-separator-size: 18px; } }
@media (max-width: 560px) { .flip-clock_component { gap: 3px; --clock-cell-width: 18px; --clock-cell-height: 25px; --clock-font-size: 16px; --clock-separator-size: 15px; } }
.page-footer_columns { display: flex; gap: clamp(40px, 8vw, 96px); }
.page-footer_column { display: flex; flex-direction: column; gap: 12px; }
.page-footer_heading { font-family: var(--_typography---family--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--_theme---text--muted); margin: 0 0 4px; }
.page-footer_link { text-decoration: none; color: var(--_theme---text--body); font-size: .98rem; transition: color .2s ease; width: fit-content; }
.page-footer_link:hover { color: var(--_theme---text--heading); }
.page-footer_bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.page-footer_copy, .page-footer_email { font-family: var(--_typography---family--mono); font-size: 12px; letter-spacing: .04em; color: var(--_theme---text--muted); text-decoration: none; }
.page-footer_email:hover { color: var(--_theme---text--heading); }

/* Reveal: hidden state lives here behind .js-motion (skipped for reduced motion); motionEngine adds .is-revealed and GSAP takes over */
.js-motion .rv, .js-motion .para-rv { opacity: 1; transform: none; transition: none; }
.js-motion [data-motion]:not(.is-revealed) { opacity: 0; transform: translateY(var(--_motion---rise)); }
.js-motion [data-motion="fade"]:not(.is-revealed) { transform: none; }

/* Section headers (data-motion="header"): the header never moves, its children animate; hidden states here, GSAP inline values take over on .is-revealed */
.js-motion [data-motion="header"]:not(.is-revealed) { opacity: 1; transform: none; }
.js-motion [data-motion="header"]:not(.is-revealed) :is(h2, .section-toolbar_controls) { opacity: 0; }
.motion_mask { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }   /* masked line wrapper (headers, CTA title) */

/* ---- Phase 3 hidden states (all behind .js-motion; the engine adds .is-revealed and inline from-values take over in the same frame) ---- */
/* media (.work-card_component): the card never moves; frame clip + inner image scale + meta fade. List rows: fade + rise-sm instead. */
.js-motion [data-motion="media"]:not(.is-revealed) { opacity: 1; transform: none; }
.js-motion [data-motion="media"]:not(.is-revealed) .work-card_frame { clip-path: inset(0 0 12% 0 round 6px); }
.js-motion [data-motion="media"]:not(.is-revealed) .work-card_image { --reveal-scale: 1.08; }
.js-motion [data-motion="media"]:not(.is-revealed) .work-card_meta { opacity: 0; transform: translateY(var(--_motion---rise--small)); }
.js-motion .work_projects[data-layout="list"] [data-motion="media"]:not(.is-revealed) { opacity: 0; transform: translateY(var(--_motion---rise--small)); }
.js-motion .work_projects[data-layout="list"] [data-motion="media"]:not(.is-revealed) .work-card_meta { opacity: 1; transform: none; }
/* card: rise (base rule) + icon stroke draw-on / brand mark fade */
.js-motion [data-motion="card"]:not(.is-revealed) .icon-lucide :is(path, circle, rect, ellipse, line, polyline),
.js-motion [data-motion="card"].is-drawing .icon-lucide :is(path, circle, rect, ellipse, line, polyline) { stroke-dasharray: 1; }
.js-motion [data-motion="card"]:not(.is-revealed) .icon-lucide :is(path, circle, rect, ellipse, line, polyline) { stroke-dashoffset: 1; }
.js-motion [data-motion="card"]:not(.is-revealed) :is(.service-card_icon, .client-card_icon) > img { opacity: 0; }
/* flow (process step): frame clip only (no inner image); diagram hidden until its build plays; text rises after */
.js-motion [data-motion="flow"]:not(.is-revealed) { opacity: 1; transform: none; }
.js-motion [data-motion="flow"]:not(.is-revealed) .process_frame { clip-path: inset(0 0 12% 0 round 6px); }
.js-motion [data-motion="flow"]:not(.is-revealed) .diagram_svg { opacity: 0; }
.js-motion [data-motion="flow"]:not(.is-revealed) :is(.process_label, .process_name, .process_description) { opacity: 0; transform: translateY(var(--_motion---rise--small)); }
/* side (certificates): arrive from the right, no vertical travel */
.js-motion [data-motion="side"]:not(.is-revealed) { opacity: 0; transform: translateX(40px); }
/* rise-sm (FAQ items) */
.js-motion [data-motion="rise-sm"]:not(.is-revealed) { transform: translateY(var(--_motion---rise--small)); }
/* cta: the panel owns the reveal; children run on ONE timeline inside it (nothing else is tagged) */
.js-motion [data-motion="cta"]:not(.is-revealed) { opacity: 0; transform: scale(.98); }
.js-motion [data-motion="cta"]:not(.is-revealed) .cta-panel_glow, .js-motion [data-motion="cta"]:not(.is-revealed) .collab-marquee_component, .js-motion [data-motion="cta"]:not(.is-revealed) .cta-panel_title { opacity: 0; }
.js-motion [data-motion="cta"]:not(.is-revealed) :is(.cta-panel_subtitle, .cta-panel_actions) { opacity: 0; transform: translateY(var(--_motion---rise)); }

/* Hero entrance (one timeline in motionEngine). Hidden until .is-loaded is added by JS. */
.js-motion #section-hero:not(.is-loaded) :is(.home-hero_bg-grid, .home-hero_bg-glow) { opacity: 0; }
.js-motion .home-hero_line-inner { animation: heroLine 1s var(--_motion---ease-out-expo) .15s backwards; }   /* H1 = LCP: rises in pure CSS from first paint, not gated on JS */
.js-motion .home-hero_line + .home-hero_line .home-hero_line-inner { animation-delay: .24s; }
@keyframes heroLine { from { transform: translateY(110%); } }
.js-motion #section-hero:not(.is-loaded) :is(.home-hero_subheading, .home-hero_actions > *) { opacity: 0; transform: translateY(var(--_motion---rise)); }
.js-motion .topbar_component:not(.is-entered) .topbar_container { opacity: 0; transform: translateY(-8px); }

/* Lenis (recommended base rules) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@keyframes statusPing { 0% { transform: scale(1); opacity: .6; } 70%,100% { transform: scale(2.4); opacity: 0; } }
@keyframes caretBlink { 50% { opacity: 0; } }

/* Responsive */
/* TABLET (<=991px, production burger breakpoint): photo card, name, role, theme toggle, Get-in-Touch (outside the dropdown), burger */
@media (max-width: 991px) {
  .topbar_menu { display: none; }                 /* links move into the burger dropdown */
  .topbar_container { grid-template-columns: 1fr auto; } /* profile | actions */
  /* production hides .button.is-nav at <=991, force it visible here */
  .topbar_actions .button.is-nav { display: flex; }
  .page-footer_top { flex-direction: column; gap: 28px; }
}

/* MOBILE (<=560px): photo only, no theme toggle; keep Get-in-Touch + burger */
@media (max-width: 560px) {
  .topbar_id { display: none; }                   /* photo only, like the reference */
  .topbar_actions .theme-toggle_component { display: none; }
  .work_projects[data-layout="grid"] { grid-template-columns: 1fr; }  /* single column on phones */
  .home-hero_actions .button, .cta-panel_actions .button { flex: 1; justify-content: center; }
  .section-toolbar_component { flex-direction: column; align-items: flex-start; gap: var(--_grid-and-spacing---header-gap); }
  .work_projects[data-layout="list"] .work-card_component { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .work_projects[data-layout="list"] .work-card_category { grid-column: 1; grid-row: 2; text-align: left; }
  .work_projects[data-layout="list"] .work-card_year { grid-column: 2; grid-row: 1; }
  .work_projects[data-layout="list"] .work-card_arrow { grid-column: 2; grid-row: 2; }
  .page-footer_columns { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero_caret, .topbar_status::after { animation: none; }
  .collab-marquee_track, .cta-panel_component .collab-marquee_track { animation: none; }
}

/* ---- Lucide icons: inlined 24×24 SVGs, one stroke recipe, theme colour via currentColor ---- */
.icon-lucide { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.icon-lucide * { transform-box: fill-box; transform-origin: center; transition: transform .25s var(--_motion---ease-out), opacity .25s ease; }
.client-card_icon .icon-lucide, .service-card_icon .icon-lucide { width: 22px; height: 22px; }
.theme-toggle_icon .icon-lucide, .faq_icon-state .icon-lucide { width: 100%; height: 100%; }
.button_icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; overflow: hidden; }
.button_icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .3s var(--_motion---ease-out); }
.button_icon svg + svg { transform: translate(-100%, 100%); }
@media (hover: hover) and (pointer: fine) { .button:hover .button_icon svg { transform: translate(100%, -100%); } .button:hover .button_icon svg + svg { transform: none; } }
@media (prefers-reduced-motion: reduce) { .button_icon svg { transition: none; } }
.icon_draw { stroke-dasharray: 1; }
.icon_lid { transform-origin: left bottom; }
.icon_ripple { transform-box: view-box; transform-origin: 9px 9px; }

/* card-icon micro-interactions: hover on a fine pointer only, ≤300ms, off under reduced motion */
@keyframes iconDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes iconRipple { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
@keyframes iconSlideIn { from { transform: translateX(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes iconBlink { 50% { opacity: .25; } }
@keyframes iconTwinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .4; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.client-card_component, .service-card_component, .capability_chip):hover {
    .icon_rocket { transform: translate(1.5px, -1.5px); }
    .icon_exhaust { transform: translate(-1px, 1px) scale(.8); opacity: .5; }
    .icon_lid { transform: rotate(-12deg); }
    .icon_back { animation: iconSlideIn .28s var(--_motion---ease-out); }
    .icon_ripple { animation: iconRipple .3s var(--_motion---ease-out); }
    .icon_pointer { transform: translate(-1px, -1px); }
    .icon_draw { animation: iconDraw .3s var(--_motion---ease-out); }
    .icon_row { animation: iconBlink .3s ease; }
    .icon_row:nth-child(2) { animation-delay: 60ms; }
    .icon_row:nth-child(3) { animation-delay: 120ms; }
    .icon_star { transform: scale(1.1) rotate(8deg); }
    .icon_twinkle { animation: iconTwinkle .3s ease; }
    .icon_plug { transform: translateY(-2px); }
  }
}

/* Unified border / radius / hover: rest 1px border-default + 6px radius, hover border-strong only; scoped to beat theme.css hover rules */
.section_ported :is(.client-card_component, .service-card_component, .faq_item) {
  border: 1px solid var(--_theme---border--default); border-radius: var(--_ui---radius--base);
  transition: border-color .2s ease;
}
.section_ported :is(.client-card_component, .service-card_component, .faq_item):hover,
.section_ported .faq_item.is-open { border-color: var(--_theme---border--strong); box-shadow: none; transform: none; }
/* service hover must keep its rest background (production/theme.css tint it blue) */
.section_ported .service-card_component:hover { background: var(--_theme---background--card); }
[data-theme="dark"] .section_ported .service-card_component:hover { background: var(--_theme---background--card); }
.section_ported :is(.client-card_icon, .service-card_icon) { border-radius: var(--_ui---radius--base); }
.section_ported .stats_grid { border-width: 1px; }
/* certs: always-dark panel, own palette, same 1px */
.section_ported .cert-card_component { border: 1px solid var(--_theme---border--on-panel); transition: border-color .2s ease; }
.section_ported .cert-card_component:hover { border-color: var(--_theme---border--on-panel-strong); transform: none; box-shadow: none; }
/* FAQ: list is a plain stack of bordered cards (was one bordered container with dividers) */
.section_ported .faq_list { border: 0; border-radius: 0; overflow: visible; gap: var(--_ui---gap--card, 1rem); }
.section_ported .faq_item { overflow: hidden; }
/* theme toggle + text link */
.topbar_actions .theme-toggle_component { border-color: var(--_theme---border--default); border-radius: var(--_ui---radius--base); transition: background-color .2s, border-color .2s ease, scale var(--_motion---duration--press) var(--_motion---ease-out); }
.topbar_actions .theme-toggle_component:hover { border-color: var(--_theme---border--strong); background: var(--_theme---background--subtle); }
.button.is-link { border-radius: var(--_ui---radius--base); }

/* ---- Design-system pass (critique 2026-09-29): one header gap, one card recipe, one label style ---- */
/* section header → content = --_grid-and-spacing---header-gap (work/certs headers wrap .section_header, so zero its own margin); headers are the H2 only (no eyebrow) */
.section_ported .section_header, .section-toolbar_component, #section-process .section_header { margin-bottom: var(--_grid-and-spacing---header-gap); }
.section-toolbar_component .section_header { margin-bottom: 0; }
.section_header > :last-child { margin-bottom: 0; }   /* last child (heading/eyebrow/statement) carries no margin: only gap is --_grid-and-spacing---header-gap */
/* icon cards (Who I work with / Services): same padding, icon gap and type */
.section_ported :is(.client-card_component, .service-card_component) { padding: 32px; }
@media (max-width: 767px) { .section_ported :is(.client-card_component, .service-card_component) { padding: 24px; } }
.section_ported :is(.client-card_icon, .service-card_icon) { margin-bottom: 24px; }
.section_ported .service-card_heading { margin-top: 0; font-size: var(--_typography---size--h5); }
.section_ported .client-card_heading { margin-top: 0; }
.section_ported .service-card_description { font-size: var(--_typography---size--text-small); line-height: var(--_typography---height--body); }
/* mono uppercase labels: 12px / 600 / .08em everywhere */
.text-style-tagline, .process_label, .cert-card_level, .faq_number, .stats_label { font-size: 12px; font-weight: 600; letter-spacing: .08em; }
/* button rows: text link matches the primary's 50px height */
.button.is-link { padding-block: 12px; }
@media (min-width: 480px) and (max-width: 767px) { .button.is-link { padding-block: 11px; } }

/* FAQ accordion, plus->minus morph, press feedback */
/* accordion (motion.md §5): open 350ms --_motion---ease-in-out, close 250ms (exit faster); answer text fades in 250ms +80ms, out 150ms */
.faq_answer-wrapper { transition: grid-template-rows 250ms var(--_motion---ease-in-out); }
.faq_item.is-open .faq_answer-wrapper { transition-duration: 350ms; }
.faq_answer { opacity: 0; transition: opacity 150ms ease; }
.faq_item.is-open .faq_answer { opacity: 1; transition: opacity 250ms ease 80ms; }
/* one plus icon: the vertical stroke rotates 90deg and fades (250ms --_motion---ease-out) into a minus */
.faq_icon > .icon-lucide { width: 100%; height: 100%; }
.faq_plus-v { transition: transform var(--_motion---duration--ui) var(--_motion---ease-out), opacity var(--_motion---duration--ui) var(--_motion---ease-out); }
.faq_item.is-open .faq_plus-v { transform: rotate(90deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .faq_answer-wrapper, .faq_answer, .faq_plus-v { transition: none !important; } }

/* press feedback: the individual `scale` property composes with each element's own transform, 160ms ease-out */
.button[class] { transition: background-color .2s, box-shadow .2s, transform .2s, border-color .2s, color .2s, scale var(--_motion---duration--press) var(--_motion---ease-out); }
.button:active, .faq_question-trigger:active, .theme-toggle_component:active { scale: .97; }
.faq_question-trigger { transition: background-color .2s, scale var(--_motion---duration--press) var(--_motion---ease-out); }

/* reduced motion (motion.md §8): hovers and presses keep colour + border changes only, so no scale on the image hover or the :active press */
@media (prefers-reduced-motion: reduce) {
  .work-card_component:hover .work-card_image { transform: none; }
  .button:active, .faq_question-trigger:active, .theme-toggle_component:active { scale: none; }
  .section-toolbar_nav-button:active, .capability_chip:active { transform: none; }
}