/* style2.css — index-revised.html utility foundation */

/* Self-hosted fonts (shared with inline copies in index-revised.html and about-revised.html). */
@font-face{font-family:"Poppins";src:url("../fonts/poppins/Poppins-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:"Poppins";src:url("../fonts/poppins/Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Poppins";src:url("../fonts/poppins/Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"Poppins";src:url("../fonts/poppins/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Poppins";src:url("../fonts/poppins/Poppins-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Prevent transformed footer intro (scale) from widening page scroll width */
html {
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}

/* Minimal tokens used by index-revised.html */
:root{
  /* Spacing */
  --sp: 8px;
  --sp--4: calc(var(--sp) * 0.5);
  --sp--8: var(--sp);
  --sp--12: calc(var(--sp) * 1.5);
  --sp--16: calc(var(--sp) * 2);
  --sp--20: calc(var(--sp) * 2.5);
  --sp--24: calc(var(--sp) * 3);
  --sp--28: calc(var(--sp) * 3.5);
  --sp--32: calc(var(--sp) * 4);
  --sp--40: calc(var(--sp) * 5);
  --sp--48: calc(var(--sp) * 6);
  --sp--56: calc(var(--sp) * 7);
  --sp--64: calc(var(--sp) * 8);
  --sp--72: calc(var(--sp) * 9);
  --sp--80: calc(var(--sp) * 10);

  /* colors / white */
  --white-300: #F9F9F9;
  --white-400: #FCFCFC;
  --white-500: #FFFFFF;

  /* colors / gunmetal */
  --gunmetal-5: #F2F4F5;
  --gunmetal-10: #E5E8EA;
  --gunmetal-25: #C9D0D4;
  --gunmetal-50: #B0B9C0;
  --gunmetal-75: #95A2AA;
  --gunmetal-100: #7B8B95;
  --gunmetal-200: #607480;
  --gunmetal-300: #445B6A;
  --gunmetal-400: #2A4455;
  --gunmetal-500: #192D3A;
  --gunmetal-600: #111F27;

  /* colors / keppal */
  --keppal-100: #DEF8F5;
  --keppal-300: #A3E5D9;
  --keppal-400: #72D4C0;
  --keppal-500: #45C7AC;
  --keppal-600: #28A88E;
  --keppal-700: #1D977E;
  --keppal-800: #0D7D66;

  /* colors / blueGrey */
  --blueGrey-100: #E6F0FA;
  --blueGrey-200: #C4DBF3;
  --blueGrey-300: #A3C7EC;
  --blueGrey-400: #81B3E6;
  --blueGrey-500: #609FDF;
  --blueGrey-600: #3F8BD8;
  --blueGrey-700: #2877C7;
  --blueGrey-800: #2163A6;

  /* aliases (keep existing usage working) */
  --white: var(--white-400);
  --border-10: var(--gunmetal-10);
  /* Scroll-to-top button — same as style.css --blue (--dodgerBlue--600) */
  --blue: #2e7fd8;

  /* Typography */
  --font-heading: "Fraunces", serif;
  --font-body: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  
  --heading-size: 1.125rem;
  --body-size: 1rem;
  --h-scale: 1.250;
  --b-scale: 1.200;
}

body{
  font-family: var(--font-body);
  color: var(--gunmetal-500);
  background: var(--white);
  font-size: var(--body-size);
  line-height: 1.5;
  color: var(--gunmetal-200);
  font-weight: 300;
  max-width: 100%;
  min-width: 0;
}

hr{
  border: none;
  border-top: 1px solid var(--gunmetal-10);
}

html[data-theme="dark"] hr{
  border-top-color: rgba(226, 246, 246, 0.2);
}

/* --- BODY SCALE --- */
/* Adjusted to ensure .lg and .sm actually look different from .md */
p.lg, li.lg, a.lg, span.lg, button.lg { font-size: calc(var(--body-size) * var(--b-scale) * var(--b-scale)); line-height: 1.40; }
p.md, li.md, a.md, span.md, button.md { font-size: calc(var(--body-size) * var(--b-scale)); line-height: 1.60; }
p.sm, li.sm, a.sm, span.sm, button.sm { font-size: calc(var(--body-size) / 1.125); line-height: 1.50; }
p.xs, li.xs, a.xs, span.xs, button.xs { 
  font-size: calc(var(--body-size) / 1.125 / 1.125); line-height: 1.40; }

/* Experience table — grid--10 (about-revised.html) */
.grid-table.grid-table--10{
  width: 100%;
  max-width: 100%;
}

.grid-table.grid-table--10 .grid-table-row{
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--sp--16);
  border-bottom: 1px solid var(--gunmetal-10);
}

.grid-table.grid-table--10 .grid-table-row--last{
  border-bottom: none;
}

.grid-table.grid-table--10 .grid-table-cell{
  padding: var(--sp--20) 0;
  vertical-align: top;
  box-sizing: border-box;
}

.grid-table.grid-table--10 .grid-table-row--head .grid-table-cell{
  padding-top: 0;
  text-align: left;
  font-weight: 400;
  color: var(--gunmetal-100);
}

.grid-table.grid-table--10 .achievements-wrap{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.6em;
  transition: max-height 1s ease-in-out;
}

.grid-table.grid-table--10 .achievements-wrap.is-expanded{
  /* iOS Safari: avoid overlapping lines when expanding clamped webkit-box */
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 1s ease-in-out;
}

.grid-table.grid-table--10 .achievements-list{
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--sp--8) 0;
}

.grid-table.grid-table--10 .achievements-list li{
  position: relative;
  padding-left: 1.15em;
  margin-bottom: 0.25rem;
  color: var(--gunmetal-200);
}

.grid-table.grid-table--10 .achievements-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  color: currentColor;
}

/* Impact bullets — match Experience (achievements-list) marker style */
.about-section.impact .impact-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.about-section.impact .impact-list li{
  position: relative;
  padding-left: 1.15em;
  margin-bottom: 0.25rem;
}

.about-section.impact .impact-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  color: currentColor;
}

.grid-table.grid-table--10 .see-more{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.grid-table.grid-table--10 .see-more:hover {
  text-decoration: underline;
}

/* Impact text links — match Experience "See More" text link styling */
.about-section.impact a.f-celeste{
  text-decoration: none;
  font-weight: 500;
  color: var(--gunmetal-500) !important;
}
.about-section.impact a.f-celeste:visited{
  color: var(--gunmetal-500) !important;
}
.about-section.impact a.f-celeste:hover,
.about-section.impact a.f-celeste:focus-visible{
  text-decoration: underline;
}

.grid-table.grid-table--10 .see-more .see-more-icon{
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.1em;
}

.grid-table.grid-table--10 .see-more .see-more-icon[hidden]{
  display: none;
}

.grid-table.grid-table--10 .grid-table-cell--role .see-more{
  display: block;
  margin-top: var(--sp--8);
  margin-left: auto;
  margin-right: 0;
}

.mobile-only{
  display: none;
}

html[data-theme="dark"] .grid-table.grid-table--10 .grid-table-row{
  border-bottom-color: rgba(226, 246, 246, 0.2);
}

html[data-theme="dark"] .grid-table.grid-table--10 .grid-table-row--head .grid-table-cell{
  color: var(--gunmetal-75);
}

html[data-theme="dark"] .grid-table.grid-table--10 .achievements-list li{
  color: var(--gunmetal-75);
}

/* Testimonials slider — about-revised.html */
.testimonials-slider{
  width: 100%;
  background-color: #E9F7FC;
  border-radius: var(--sp--24);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] .testimonials-slider{
  background-color: #294152;
}

.testimonial-track{
  display: flex;
  width: 100%;
  will-change: transform;
}

.testimonial-card{
  flex: 0 0 100%;
  padding: var(--sp--40);
  box-sizing: border-box;
  background: var(--keppal-100);
}

.testimonial-controls{
  position: absolute;
  right: var(--sp--24);
  bottom: var(--sp--24);
  display: flex;
}

.testimonial-nav.prev{
  margin-right: var(--sp--8);
}

.testimonial-nav{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background-color: var(--gunmetal-500);
  color: var(--white-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.testimonial-nav:disabled{
  background-color: var(--gunmetal-500);
  opacity: 0.24;
  color: var(--white-500);
  cursor: default;
}

.testimonial-nav svg{
  display: block;
}

html[data-theme="dark"] .testimonial-nav:disabled{
  background-color: var(--gunmetal-500);
  opacity: 1;
}

html[data-theme="dark"] .testimonial-nav:disabled svg{
  opacity: 1;
}

html[data-theme="dark"] .testimonial-nav{
  background-color: var(--gunmetal-200);
}

/* Skill pills — about-revised Knowledge */
.skills-grid{
  row-gap: var(--sp--56);
  column-gap: var(--sp--16);
}

.skill-container{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp--8);
  row-gap: var(--sp--8);
}

.soft-skill-item{
  box-sizing: border-box;
}

.skill-panel{
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--sp--20) 0 var(--sp--8);
  height: 44px;
  background: var(--white-500);
  border: 1px solid var(--gunmetal-10);
  border-radius: 999px;
}

.skill-panel .skill-icon{
  width: 34px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.skill-panel p{
  margin: 0;
  white-space: nowrap;
  font-weight: 500;
}

html[data-theme="dark"] .skill-panel{
  background: var(--gunmetal-400);
  border-color: var(--gunmetal-400);
}

html[data-theme="dark"] .skill-panel p{
  color: var(--gunmetal-10);
}

/* Invert mono skill icons for dark mode (SVGs + marked PNGs) */
html[data-theme="dark"] .skill-panel .skill-icon[src$=".svg"],
html[data-theme="dark"] .skill-panel .skill-icon.skill-icon--mono{
  filter: invert(1);
}

/* Body / small — Figma body/small (14px, lh 1.4) */
/* .body--small,
a.body--small {
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
}
.body--small--medium,
a.body--small--medium {
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 500;
} */

.cap {text-transform: uppercase;}
.black {font-weight: 900;}
.semiBold {font-weight: 600;}
.bold {font-weight: 700;}
.medium {font-weight: 500;}
.regular {font-weight: 400;}
.italic {font-style: italic;}

/* Colors - Added Manually */
.f-keppal {color: var(--keppal-800) !important;}
.f-keppal-light {color: var(--keppal-400) !important;}
.f-celeste {color: var(--keppal-600) !important;}
.f-gunmetal {color: var(--gunmetal-500) !important;}
.f-gunmetal-light {color: var(--gunmetal-25) !important;}

html[data-theme="dark"] .f-keppal {
  color: var(--keppal-400) !important;
}

html[data-theme="dark"] .f-celeste {
  color: var(--keppal-400) !important;
}

html[data-theme="dark"] .f-gunmetal {
  color: var(--gunmetal-25) !important;
}

/* Utilities */
.center{
  text-align: center;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  color: var(--gunmetal-500);
  letter-spacing: -0.01em;
}

/* --- HEADING SCALE --- */
h6{ font-size: calc(var(--heading-size) * var(--h-scale)); line-height: 1.20; }
h5{ font-size: calc(var(--heading-size) * var(--h-scale) * var(--h-scale)); line-height: 1.20; }
h4{ font-size: calc(var(--heading-size) * var(--h-scale) * var(--h-scale) * var(--h-scale)); line-height: 1.20; }
h3{ font-size: calc(var(--heading-size) * var(--h-scale) * var(--h-scale) * var(--h-scale) * var(--h-scale)); line-height: 1.20; }
h2{ font-size: calc(var(--heading-size) * var(--h-scale) * var(--h-scale) * var(--h-scale) * var(--h-scale) * var(--h-scale)); line-height: 1.20; }
h1{ font-size: calc(var(--heading-size) * var(--h-scale) * var(--h-scale) * var(--h-scale) * var(--h-scale) * var(--h-scale) * var(--h-scale)); line-height: 1.10; }

/* Spacing helpers
   - For text elements: margin-bottom
   - For div helpers: padding-top (spacer blocks) */
p.sp--4,  li.sp--4,  h1.sp--4,  h2.sp--4,  h3.sp--4,  h4.sp--4,  h5.sp--4,  h6.sp--4,  img.sp--4  { margin-bottom: var(--sp--4);  padding: 0; }
p.sp--8,  li.sp--8,  h1.sp--8,  h2.sp--8,  h3.sp--8,  h4.sp--8,  h5.sp--8,  h6.sp--8,  img.sp--8  { margin-bottom: var(--sp--8);  padding: 0; }
p.sp--16, li.sp--16, h1.sp--16, h2.sp--16, h3.sp--16, h4.sp--16, h5.sp--16, h6.sp--16, img.sp--16 { margin-bottom: var(--sp--16); padding: 0; }
p.sp--20, li.sp--20, h1.sp--20, h2.sp--20, h3.sp--20, h4.sp--20, h5.sp--20, h6.sp--20, img.sp--20 { margin-bottom: var(--sp--20); padding: 0; }
p.sp--24, li.sp--24, h1.sp--24, h2.sp--24, h3.sp--24, h4.sp--24, h5.sp--24, h6.sp--24, img.sp--24 { margin-bottom: var(--sp--24); padding: 0; }
p.sp--28, li.sp--28, h1.sp--28, h2.sp--28, h3.sp--28, h4.sp--28, h5.sp--28, h6.sp--28, img.sp--28 { margin-bottom: var(--sp--28); padding: 0; }
p.sp--32, li.sp--32, h1.sp--32, h2.sp--32, h3.sp--32, h4.sp--32, h5.sp--32, h6.sp--32, img.sp--32 { margin-bottom: var(--sp--32); padding: 0; }
p.sp--40, li.sp--40, h1.sp--40, h2.sp--40, h3.sp--40, h4.sp--40, h5.sp--40, h6.sp--40, img.sp--40 { margin-bottom: var(--sp--40); padding: 0; }
p.sp--48, li.sp--48, h1.sp--48, h2.sp--48, h3.sp--48, h4.sp--48, h5.sp--48, h6.sp--48, img.sp--48 { margin-bottom: var(--sp--48); padding: 0; }
p.sp--56, li.sp--56, h1.sp--56, h2.sp--56, h3.sp--56, h4.sp--56, h5.sp--56, h6.sp--56, img.sp--56 { margin-bottom: var(--sp--56); padding: 0; }
p.sp--64, li.sp--64, h1.sp--64, h2.sp--64, h3.sp--64, h4.sp--64, h5.sp--64, h6.sp--64, img.sp--64 { margin-bottom: var(--sp--64); padding: 0; }
p.sp--72, li.sp--72, h1.sp--72, h2.sp--72, h3.sp--72, h4.sp--72, h5.sp--72, h6.sp--72, img.sp--72 { margin-bottom: var(--sp--72); padding: 0; }
p.sp--80, li.sp--80, h1.sp--80, h2.sp--80, h3.sp--80, h4.sp--80, h5.sp--80, h6.sp--80, img.sp--80 { margin-bottom: var(--sp--80); padding: 0; }

div.sp--8  { padding: var(--sp--8) 0 0 0; }
div.sp--16 { padding: var(--sp--16) 0 0 0; }
div.sp--20 { padding: var(--sp--20) 0 0 0; }
div.sp--24 { padding: var(--sp--24) 0 0 0; }
div.sp--28 { padding: var(--sp--28) 0 0 0; }
div.sp--32 { padding: var(--sp--32) 0 0 0; }
div.sp--40 { padding: var(--sp--40) 0 0 0; }
div.sp--48 { padding: var(--sp--48) 0 0 0; }
div.sp--56 { padding: var(--sp--56) 0 0 0; }
div.sp--64 { padding: var(--sp--64) 0 0 0; }
div.sp--72 { padding: var(--sp--72) 0 0 0; }
div.sp--80 { padding: var(--sp--80) 0 0 0; }

/* ======================================================================
   Page hero loader — index.html + about.html (see js/page-hero-loader.js)
   ====================================================================== */

html.js-page-hero-loader-pending .hero2 .hero-kicker--chip,
html.js-page-hero-loader-pending .hero2 .heading--container,
html.js-page-hero-loader-pending .hero2 .hero-sub,
html.js-page-hero-loader-pending .hero2 .hero-actions,
html.js-page-hero-loader-pending .aboutHero .grid--10,
html.js-page-hero-loader-pending .aboutHero .sp--80.hr-mobile-adjust,
html.js-page-hero-loader-pending #info,
.hero2.page-hero--loading .hero-kicker--chip,
.hero2.page-hero--loading .heading--container,
.hero2.page-hero--loading .hero-sub,
.hero2.page-hero--loading .hero-actions,
.aboutHero.page-hero--loading .grid--10,
.aboutHero.page-hero--loading .sp--80.hr-mobile-adjust {
  opacity: 0;
  visibility: hidden;
}

.page-hero__loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.page-hero__loader-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--gunmetal-25);
  border-top-color: var(--gunmetal-400);
  animation: page-hero-spin 0.85s linear infinite;
}

html[data-theme="dark"] .page-hero__loader-ring {
  border-color: var(--gunmetal-500);
  border-top-color: var(--gunmetal-200);
}

@keyframes page-hero-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hero */
.hero2{
  width: 100%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* Hero kicker chip — Figma frame 155:2269 (avatar + row; typography stays md + .medium) */
.hero-kicker--chip{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp--12);
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp--24);
  box-sizing: border-box;
}

.hero-kicker__avatar{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}

.hero-kicker__avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-kicker__text{
  margin: 0;
  padding: 0;
  line-height: 1.4;
  text-align: left;
}

html[data-theme="dark"] .hero-kicker--chip{
  background: transparent;
}

/* Containers */
.container--1280 {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--sp--40);
}

.container--1280.dottedBg {
  /* Gradient on top, dot pattern beneath (first layer paints above) */
  background-image:
    linear-gradient(to bottom, transparent, var(--white-400)),
    url("https://res.cloudinary.com/drco0lgvy/image/upload/f_auto,q_auto,w_auto,dpr_auto/v1776616715/bgPatternLightMode_ievwth.png");
  background-size:
    100% 100%,
    40px auto;
  background-position:
    center center,
    center center;
  background-repeat:
    no-repeat,
    repeat;
}

html[data-theme="dark"] .container--1280.dottedBg {
  background-image:
    linear-gradient(to bottom, transparent, var(--gunmetal-500)),
    url("https://res.cloudinary.com/drco0lgvy/image/upload/f_auto,q_auto,w_auto,dpr_auto/v1776616715/bgPatternDarkMode_qv9sgn.png");
  background-size:
    100% 100%,
    40px auto;
  background-position:
    center center,
    center center;
  background-repeat:
    no-repeat,
    repeat;
}

.container--1024 {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--sp--40);
}

/* Grids */
.grid--12,
.grid--10 {
  display: grid;
  grid-auto-flow: row;
  min-width: 0;
  gap: var(--sp--40);
}

.grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid--10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

/* Modifier: tighter horizontal rhythm — use .grid--col--gap--sp--16 with .grid--12 or .grid--10 */
.grid--12.grid--col--gap--sp--16,
.grid--10.grid--col--gap--sp--16{
  column-gap: var(--sp--16);
}

/* Span cells use full width of their grid area (min-width:0 avoids overflow fighting 1fr tracks) */
.grid--12.grid--col--gap--sp--16 :is(
  .col--span--1,  .col--span--2,  .col--span--3,  .col--span--4,
  .col--span--5,  .col--span--6,  .col--span--7,  .col--span--8,
  .col--span--9,  .col--span--10, .col--span--11, .col--span--12
),
.grid--10.grid--col--gap--sp--16 :is(
  .col--span--1,  .col--span--2,  .col--span--3,  .col--span--4,
  .col--span--5,  .col--span--6,  .col--span--7,  .col--span--8,
  .col--span--9,  .col--span--10, .col--span--11, .col--span--12
){
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
}

/* Column spans (shared). Works for both grids; avoid spans > column count. */
.col--span--1  { grid-column: auto / span 1; }
.col--span--2  { grid-column: auto / span 2; }
.col--span--3  { grid-column: auto / span 3; }
.col--span--4  { grid-column: auto / span 4; }
.col--span--5  { grid-column: auto / span 5; }
.col--span--6  { grid-column: auto / span 6; }
.col--span--7  { grid-column: auto / span 7; }
.col--span--8  { grid-column: auto / span 8; }
.col--span--9  { grid-column: auto / span 9; }
.col--span--10 { grid-column: auto / span 10; }
.col--span--11 { grid-column: auto / span 11; }
.col--span--12 { grid-column: auto / span 12; }

/* Portfolio card — Figma Card Content (202:8285) */
.portfolio--card[data-href]:not([data-disabled="true"]){
  cursor: pointer;
}

.portfolio--card[data-disabled="true"]{
  cursor: default;
}

/* index-revised: cards hidden until IntersectionObserver + GSAP reveal (see portfolio-cards-revised.js) */
html.js-portfolio-reveal #work .portfolio .portfolio--card[data-href]{
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

/* Image wrap — Figma Image Wrap (202:8313) */
.portfolio--card--img--wrap{
  position: relative;
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 433 / 364;
  border-radius: var(--sp--16);
  overflow: hidden;
  background-color: var(--gunmetal-10);
}

html[data-theme="dark"] .portfolio--card--img--wrap{
  background-color: var(--gunmetal-500);
}

/* Shimmer skeleton until project image loads */
.portfolio--card--img--skeleton{
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    var(--gunmetal-10) 0%,
    var(--gunmetal-25) 42%,
    var(--gunmetal-10) 84%
  );
  background-size: 220% 100%;
  animation: portfolio-card-skeleton-shimmer 1.15s ease-in-out infinite;
}

html[data-theme="dark"] .portfolio--card--img--skeleton{
  background: linear-gradient(
    110deg,
    var(--gunmetal-500) 0%,
    var(--gunmetal-400) 42%,
    var(--gunmetal-500) 84%
  );
  background-size: 220% 100%;
}

.portfolio--card--img--wrap.is-image-loaded .portfolio--card--img--skeleton{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

@keyframes portfolio-card-skeleton-shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}

.portfolio--card--img--wrap img{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Own compositor layer for sharper scaling */
  transform: translateZ(0);
}

.portfolio--card--content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp--8);
  padding-top: var(--sp--16);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.portfolio--card--content__top{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp--4);
  width: 100%;
  line-height: 1.4;
}

.portfolio--card--meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp--4);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--keppal-800);
  text-transform: uppercase;
}

.portfolio--card--title{
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--gunmetal-500);
  width: 100%;
}

.portfolio--card--tags{
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.5;
  font-weight: 300;
  color: var(--gunmetal-200);
  width: 100%;
}

html[data-theme="dark"] .portfolio--card--meta{
  color: var(--keppal-400);
}

html[data-theme="dark"] .portfolio--card--title{
  color: var(--white-400);
}

html[data-theme="dark"] .portfolio--card--tags{
  color: var(--gunmetal-75);
}

/* Nav (3-column) — matches Figma Nav (155:2264) */
nav{
  background: var(--white-400);
}

.nav3{
  position: relative;
  z-index: 200;
  width: 100%;
  padding: var(--sp--24) var(--sp--40);
  box-sizing: border-box;
}

.nav3__inner{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  column-gap: var(--sp--16);
  row-gap: var(--sp--24);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.nav3__left{
  justify-self: start;
}

.nav3__center{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--sp--40);
}

.nav3__center a{
  transition: color 0.2s ease;
}

.nav3__center a:not([aria-current="page"]):hover,
.nav3__center a:not([aria-current="page"]):focus-visible{
  color: var(--gunmetal-500);
}

.nav3__right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp--8);
}

.nav3 a{
  color: var(--gunmetal-200);
  text-decoration: none;
}

.nav3 a[aria-current="page"]{
  color: var(--gunmetal-500);
  font-weight: 500;
}

/* Nav link typography (body/small from Figma) */
.nav3__center a.body--small--medium{
  color: var(--gunmetal-500);
}
.nav3__center a.body--small:not([aria-current="page"]){
  color: var(--gunmetal-200);
}

.nav3__pill{
  height: 44px;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp--8);
  border: 1.5px solid var(--border-10);
  background: transparent;
  padding: var(--sp--8) var(--sp--20);
  box-sizing: border-box;
  color: var(--gunmetal-500);
  cursor: pointer;
}

.nav3__pill--icon{
  width: 44px;
  padding: 0;
}

.nav3__pill--primary{
  border: none;
  background: var(--gunmetal-500);
  color: white;
}

.nav3__icon{
  width: 24px;
  height: 24px;
  display: block;
}

.nav3__logo{
  width: 54px;
  height: auto;
  display: block;
}

/* Mobile nav bar — max-width 979px; tokens only */
.nav3__mobile-bar{
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.nav3__mobile-logo-link{
  display: block;
  line-height: 0;
}

.nav3__mobile-logo{
  width: 44px;
  height: auto;
  display: block;
}

.nav3__menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gunmetal-500);
  cursor: pointer;
  border-radius: var(--sp--40);
  -webkit-tap-highlight-color: transparent;
}

.nav3__menu-toggle-icons{
  position: relative;
  width: 44px;
  height: 44px;
  display: block;
  line-height: 0;
}

.nav3__menu-icon{
  display: block;
  width: 44px;
  height: 44px;
}

html[data-theme="dark"] .nav3__menu-toggle{
  color: var(--gunmetal-25);
}

html[data-theme="dark"] .nav3__mobile-logo{
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ——— nav3 mobile submenu (Pencil U7MRJ) — tokens + .btn reuse ——— */
.nav3__submenu{
  box-sizing: border-box;
  background: var(--white-400);
  border: 0;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
}

.nav3__submenu-inner{
  display: flex;
  flex-direction: column;
  gap: var(--sp--40);
  padding: var(--sp--40);
  box-sizing: border-box;
  width: 100%;
}

.nav3__submenu-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp--4);
}

.nav3__submenu-links > li{
  margin: 0;
}

.nav3__submenu .nav3__submenu-link,
.nav3__submenu button.nav3__submenu-link{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp--12);
  min-height: 44px;
  padding: 0 var(--sp--24);
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: calc(var(--body-size) / 1.125);
  line-height: 1.5;
  font-weight: 400;
  color: var(--gunmetal-200);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav3__submenu .nav3__submenu-link__label{
  font-size: calc(var(--body-size) / 1.125);
  line-height: 1.5;
  font-weight: 400;
  color: var(--gunmetal-200);
}

.nav3__submenu .nav3__submenu-link .nav3__submenu-link__icon{
  color: var(--gunmetal-200);
}

.nav3__submenu .nav3__submenu-link__chevron-wrap{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gunmetal-200);
}

.nav3__submenu .nav3__submenu-link[aria-current="page"]{
  background: var(--gunmetal-5);
}

.nav3__submenu .nav3__submenu-link[aria-current="page"] .nav3__submenu-link__label{
  color: var(--gunmetal-500);
  font-weight: 500;
}

.nav3__submenu .nav3__submenu-link[aria-current="page"] .nav3__submenu-link__icon,
.nav3__submenu .nav3__submenu-link[aria-current="page"] .nav3__submenu-link__chevron-wrap{
  color: var(--gunmetal-500);
}

.nav3__submenu .nav3__submenu-link--pill{
  border-radius: var(--sp--40);
}

.nav3__submenu .nav3__submenu-link--rounded{
  border-radius: var(--sp--16);
  background: transparent;
}

.nav3__submenu .nav3__submenu-link--active{
  justify-content: space-between;
  border-radius: var(--sp--40);
  background: transparent;
  font-weight: 400;
  color: var(--gunmetal-200);
}

.nav3__submenu .nav3__submenu-link__main{
  display: inline-flex;
  align-items: center;
  gap: var(--sp--12);
  min-width: 0;
}

.nav3__submenu .nav3__submenu-link__icon{
  flex-shrink: 0;
  display: block;
}

.nav3__submenu .nav3__submenu-item--open .nav3__submenu-link__chevron{
  transform: rotate(180deg);
}

.nav3__submenu .nav3__submenu-link__chevron{
  display: block;
  transition: transform 0.25s ease;
}

/* display:flex must not beat [hidden]; open state uses :not([hidden]) */
.nav3__submenu .nav3__submenu-nested[hidden]{
  display: none !important;
}

.nav3__submenu .nav3__submenu-nested:not([hidden]){
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp--4);
}

.nav3__submenu .nav3__submenu-nested > li{
  margin: 0;
}

.nav3__submenu .nav3__submenu-sublink{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp--12);
  min-height: 44px;
  padding: 0 var(--sp--32) 0 var(--sp--32);
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
  color: var(--gunmetal-200);
  font-family: var(--font-body);
  font-size: calc(var(--body-size) / 1.125);
  line-height: 1.5;
  font-weight: 400;
  border-radius: var(--sp--16);
  background: var(--white-400);
  -webkit-tap-highlight-color: transparent;
}

.nav3__submenu .nav3__submenu-sublink__corner{
  flex-shrink: 0;
  color: var(--gunmetal-50);
  display: block;
}

.nav3__submenu .nav3__submenu-sublink--active .nav3__submenu-sublink__corner{
  color: var(--keppal-700);
}

.nav3__submenu .nav3__submenu-sublink--active .nav3__submenu-sublink__label{
  color: var(--gunmetal-500);
  font-weight: 500;
}

.nav3__submenu .nav3__submenu-contact{
  display: flex;
  flex-direction: column;
  gap: var(--sp--12);
  align-items: stretch;
}

.nav3__submenu .nav3__submenu-contact__btn{
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  justify-content: center;
  font-size: calc(var(--body-size) / 1.125);
  line-height: 1.5;
}

.nav3__submenu .nav3__submenu-contact .btn-wa{
  padding-left: var(--sp--16);
  padding-right: var(--sp--20);
  gap: var(--sp--8);
  border-color: var(--gunmetal-10);
}

.nav3__submenu .nav3__submenu-theme{
  width: 100%;
  box-sizing: border-box;
}

.nav3__submenu .nav3__submenu-theme__track{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--sp--4);
  padding: var(--sp--8);
  border-radius: var(--sp--40);
  background: var(--gunmetal-5);
  box-sizing: border-box;
}

.nav3__submenu .nav3__submenu-theme__text{
  font-size: calc(var(--body-size) / 1.125);
  line-height: 1.5;
}

.nav3__submenu .nav3__submenu-theme__opt{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp--12);
  min-height: 44px;
  padding: 0 var(--sp--16);
  border: 1px solid transparent;
  border-radius: var(--sp--40);
  background: transparent;
  color: var(--gunmetal-200);
  font-family: var(--font-body);
  font-size: calc(var(--body-size) / 1.125);
  line-height: 1.5;
  font-weight: 400;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav3__submenu .nav3__submenu-theme__opt.is-active{
  background: var(--white-500);
  border-color: var(--gunmetal-10);
  color: var(--gunmetal-500);
  font-weight: 500;
}

.nav3__submenu .nav3__submenu-theme__icon{
  display: inline-flex;
  line-height: 0;
  color: inherit;
}

html[data-theme="dark"] .nav3__submenu-backdrop{
  background: var(--gunmetal-500);
}

html[data-theme="dark"] .nav3__submenu{
  background: var(--gunmetal-500);
}

/* Dark submenu: default row links + Portfolio toggle */
html[data-theme="dark"] .nav3__submenu .nav3__submenu-link,
html[data-theme="dark"] .nav3__submenu button.nav3__submenu-link{
  color: var(--gunmetal-50);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link__label{
  color: var(--gunmetal-50);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link .nav3__submenu-link__icon{
  color: var(--gunmetal-75);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link__chevron-wrap{
  color: var(--gunmetal-75);
}

/* Portfolio row: same as default; chevron explicit for parity */
html[data-theme="dark"] .nav3__submenu .nav3__submenu-item--work .nav3__submenu-link__chevron-wrap{
  color: var(--gunmetal-75);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link[aria-current="page"]{
  background: var(--gunmetal-400);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link[aria-current="page"] .nav3__submenu-link__label{
  color: var(--white-400);
  font-weight: 500;
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link[aria-current="page"] .nav3__submenu-link__icon,
html[data-theme="dark"] .nav3__submenu .nav3__submenu-link[aria-current="page"] .nav3__submenu-link__chevron-wrap{
  color: var(--gunmetal-25);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link--rounded{
  background: transparent;
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-link--active{
  background: transparent;
  color: var(--gunmetal-50);
}

html[data-theme="dark"] .nav3__submenu button.nav3__submenu-link--active .nav3__submenu-link__label{
  color: var(--gunmetal-50);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-sublink{
  background: transparent;
  color: var(--gunmetal-50);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-sublink__label{
  color: var(--gunmetal-50);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-sublink__corner{
  color: var(--gunmetal-200);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-sublink--active .nav3__submenu-sublink__corner{
  color: var(--keppal-500);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-sublink--active .nav3__submenu-sublink__label{
  color: var(--white-400);
  font-weight: 500;
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-contact .btn-wa{
  border: none;
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-theme__track{
  background: var(--gunmetal-600);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-theme__opt{
  color: var(--gunmetal-75);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-theme__opt.is-active{
  background: var(--gunmetal-300);
  border-color: var(--gunmetal-300);
  color: var(--white-400);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-contact .btn-primary.btn-small{
  background: var(--keppal-700);
}

html[data-theme="dark"] .nav3__submenu .nav3__submenu-contact .btn-secondary.btn-small{
  background: var(--gunmetal-400);
  border-color: var(--gunmetal-300);
  color: var(--white-400) !important;
}

/* Buttons (from Figma frame "btn") */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp--8);
  text-decoration: none;
  border-radius: 58px;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Text slide-up — .btn-default + .btn--slide only; .btn-small uses plain label + background hover */
.btn.btn--slide:not(.btn-small){
  overflow: hidden;
  position: relative;
}

.btn--slide:not(.btn-small) .btn__label{
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  position: relative;
}

.btn--slide:not(.btn-small) .btn__label-track{
  display: flex;
  flex-direction: column;
  height: 200%;
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.btn--slide:not(.btn-small) .btn__label-line{
  box-sizing: border-box;
  flex: 0 0 50%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
}

.btn--slide:not(.btn-small).btn-w-icon .btn__label-line{
  justify-content: flex-start;
}

.btn--slide:not(.btn-small):hover .btn__label-track,
.btn--slide:not(.btn-small):focus-visible .btn__label-track{
  transform: translateY(-50%);
}

/* Sizes */
.btn-default{
  height: 64px;
  padding-left: var(--sp--32);
  padding-right: var(--sp--32);
}
.btn-small{
  height: 44px;
  padding-left: var(--sp--20);
  padding-right: var(--sp--20);
  border-radius: var(--sp--40);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Small buttons: no slide; lighter background on hover (theme toggle excluded) */
.btn-primary.btn-small:hover,
.btn-primary.btn-small:focus-visible{
  background: var(--gunmetal-300);
}

/* .btn-secondary.btn-small:not(.theme-toggle):hover,
.btn-secondary.btn-small:not(.theme-toggle):focus-visible,*/
.btn-secondary.btn-small:hover,
.btn-secondary.btn-small:focus-visible {  
  background: var(--white-500);
  border-color: var(--gunmetal-10);
}

.btn-accent.btn-small:hover,
.btn-accent.btn-small:focus-visible{
  background: var(--keppal-500);
}

/* Icon layout modifiers */
.btn-w-icon{
  padding-right: var(--sp--28);
}

/* Nav WhatsApp: pl 16, pr 20, gap 8 (Figma Nav 155:2264) — after .btn-w-icon for cascade */
.nav3 .btn.btn-w-icon.btn-wa{
  padding-left: var(--sp--16);
  padding-right: var(--sp--20);
  gap: var(--sp--8);
}

.nav3 .btn-wa .nav-wa-icon--dark{
  display: none;
}

html[data-theme="dark"] .nav3 .btn-wa .nav-wa-icon--light{
  display: none;
}

html[data-theme="dark"] .nav3 .btn-wa .nav-wa-icon--dark{
  display: block;
}

.btn-solo{
  width: 44px;
  padding: 0;
}

/* Theme toggle: moon by default (light theme); sun when data-theme=dark */
.theme-toggle .icon-moon,
.theme-toggle .icon-sun{
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.theme-toggle .icon-moon{
  display: inline-flex;
}
.theme-toggle .icon-sun{
  display: none !important;
}
html[data-theme="dark"] .theme-toggle .icon-moon{
  display: none !important;
}
html[data-theme="dark"] .theme-toggle .icon-sun{
  display: inline-flex !important;
}

button.theme-toggle{
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Types */
.btn-primary{
  background: var(--gunmetal-500);
  color: var(--white-500)!important;
  border: none;
}

.btn[aria-disabled="true"]{
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

html[data-theme="dark"] .btn[aria-disabled="true"]{
  opacity: 0.4;
}

.btn-secondary{
  background: transparent;
  color: var(--gunmetal-500)!important;
  border: 1px solid var(--gunmetal-25);
  border-radius: var(--sp--56);
  font-weight: 400;
}

.btn-secondary.btn-small{
  border: 1.5px solid var(--gunmetal-25);
  border-radius: var(--sp--40);
}

.btn-accent{
  background: var(--keppal-700);
  color: var(--white-500);
  border: none;
}

/* Icon sizing */
.btn__icon{
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  align-self: center;
}
img.btn__icon{
  width: 24px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  flex-shrink: 0;
  align-self: center;
}
svg.btn__icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-self: center;
}
/* Slide + icon: label stretch fills height; nudge SVG to match text cap height */
.btn.btn--slide:not(.btn-small).btn-w-icon > svg.btn__icon{
  transform: translateY(-1px);
}
.btn__icon--sm{
  width: 22px;
  height: 22px;
}

/* Hero actions */
.hero-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp--16);
}

/* Simple color helpers for legacy markup (temporary) */
.f-blue{ color: var(--blueGrey-600); }
.bold{ font-weight: 700; }
.semiBold{ font-weight: 600; }
.mediumBold{ font-weight: 500; }

/* ---------- Dark theme (data-theme on <html>, theme.js) ---------- */
html[data-theme="dark"]{
  color-scheme: dark;
}

html[data-theme="dark"] body{
  background: var(--gunmetal-500);
  color: var(--gunmetal-25);
}

html[data-theme="dark"] nav{
  background: transparent;
}

html[data-theme="dark"] .nav3__logo{
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

html[data-theme="dark"] .nav3 a{
  color: var(--gunmetal-25);
}

html[data-theme="dark"] .nav3 a[aria-current="page"],
html[data-theme="dark"] .nav3__center a.sm.medium{
  color: var(--gunmetal-10);
}

html[data-theme="dark"] .nav3 a[aria-current="page"]{
  font-weight: 500;
}

html[data-theme="dark"] .nav3__center a.body--small--medium{
  color: var(--gunmetal-10);
}

html[data-theme="dark"] .nav3__center a.body--small:not([aria-current="page"]){
  color: var(--gunmetal-25);
}

html[data-theme="dark"] .nav3__center a:not([aria-current="page"]):hover,
html[data-theme="dark"] .nav3__center a:not([aria-current="page"]):focus-visible{
  color: var(--gunmetal-10);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6{
  color: var(--white-400);
}

html[data-theme="dark"] .f-blue{
  color: var(--blueGrey-400);
}

html[data-theme="dark"] .btn-secondary{
  background: var(--gunmetal-300);
  border-color: var(--gunmetal-300);
  color: var(--white-400) !important;
}

html[data-theme="dark"] .btn-secondary.btn-small{
  border-color: var(--gunmetal-300);
}

html[data-theme="dark"] .btn-primary.btn-small:hover,
html[data-theme="dark"] .btn-primary.btn-small:focus-visible{
  background: var(--keppal-500);
}

html[data-theme="dark"] .btn-secondary.btn-small:hover,
html[data-theme="dark"] .btn-secondary.btn-small:focus-visible{
  background: var(--gunmetal-200);
  border-color: var(--gunmetal-200);
}

html[data-theme="dark"] .btn-accent.btn-small:hover,
html[data-theme="dark"] .btn-accent.btn-small:focus-visible{
  background: var(--keppal-400);
}

html[data-theme="dark"] .btn-primary{
  background: var(--keppal-700);
  color: var(--white-500) !important;
}

html[data-theme="dark"] .hero-sub{
  color: var(--gunmetal-25);
}

html[data-theme="dark"] .subfooter-wrap,
html[data-theme="dark"] footer:not(:has(.footer-container)){
  background: var(--gunmetal-500);
  color: var(--gunmetal-25);
}

html[data-theme="dark"] .subfooter-wrap a,
html[data-theme="dark"] footer:not(:has(.footer-container)) a{
  color: var(--keppal-400);
}

html[data-theme="dark"] footer:not(:has(.footer-container)) hr{
  border-color: var(--gunmetal-400);
}

html[data-theme="dark"] .copyright .sub{
  color: var(--gunmetal-75);
}

/* Footer — index-revised.html (rounded card + grid) */
footer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--sp--80) var(--sp--24) var(--sp--24) var(--sp--24);
  overflow: hidden;
}

/* Clips scale(1.5) intro on .footer-container so it cannot expand document width */
footer .footer-reveal-clip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.footer-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--sp--16);
  background-color: var(--gunmetal-500);
  padding: var(--sp--80) 0 var(--sp--56);
  box-sizing: border-box;
}

.footer-container h4 {
  color: var(--white-500);
}

.footer-container p {
  color: var(--gunmetal-25);
}

.footer-container a:not(.btn){
  color: var(--gunmetal-25);
  text-decoration: none;
}

.footer-container a:not(.btn):hover{
  text-decoration: underline;
}

.footer-container hr{
  border-top-color: var(--gunmetal-300);
}

.footer-container p.w-icon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp--4);
  color: var(--white-500);
}

html[data-theme="dark"] footer:has(.footer-container){
  background: var(--gunmetal-500);
}

html[data-theme="dark"] .footer-container{
  background-color: var(--gunmetal-400);
}

html[data-theme="dark"] footer .footer-container a:not(.btn){
  color: var(--white-400);
}

html[data-theme="dark"] #info hr{
  border-top-color: var(--gunmetal-300);
}

html[data-theme="dark"] #work hr{
  border-top-color: var(--gunmetal-300);
}

html[data-theme="dark"] footer .footer-container hr{
  border-top-color: var(--gunmetal-300);
}

/* Scroll to top — from style.css .return / #scrollToTop */
.return {
  position: fixed;
  bottom: var(--sp--40);
  right: var(--sp--40);
  padding: 0;
  background-color: var(--keppal-800);
  color: white;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  z-index: 1000;
  width: 44px;
  height: 44px;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.25s ease, background-color 0.25s ease;
  opacity: 0;
  visibility: hidden;
}

.return:hover {
  background-color: var(--keppal-700);
}

.return.pressed {
  transform: scale(0.95);
}

.return svg {
  width: 20px;
  height: auto;
}

/* Visible when user has scrolled — .visible (scroll-top-motion.js), .fade (scroll-top.min.js) */
.return.visible,
.return.fade {
  opacity: 1;
  visibility: visible;
}

/* Impact Cards */
.impact-card {
  background-color: var(--gunmetal-10);
  padding: var(--sp--40);
  border-radius: var(--sp--16);
  height: 100%;
}
.impact-card ul li {color: var(--gunmetal-300);}
.impact-card.keppal {
  background-color: var(--keppal-100);
}
.impact-card.blueGrey {
  background-color: var(--blueGrey-100);
}

/* about-revised: Dark mode fixes for Impact + Testimonials */
html[data-theme="dark"] .about-section.impact .impact-card{
  background-color: var(--gunmetal-400);
}
html[data-theme="dark"] .about-section.impact .impact-card.keppal{
  background-color: rgba(40, 168, 142, 0.18); /* keppal tint */
}
html[data-theme="dark"] .about-section.impact .impact-card.blueGrey{
  background-color: rgba(96, 159, 223, 0.16); /* blueGrey tint */
}
html[data-theme="dark"] .about-section.impact .impact-card :is(h1,h2,h3,h4,h5,h6,p,li){
  color: var(--gunmetal-10);
}
html[data-theme="dark"] .about-section.impact .impact-card .f-gunmetal{
  color: var(--gunmetal-10) !important;
}
html[data-theme="dark"] .about-section.impact a.f-celeste,
html[data-theme="dark"] .about-section.impact a.f-celeste:visited{
  color: var(--gunmetal-10) !important;
}

html[data-theme="dark"] #testimonials .testimonial-card{
  background: var(--gunmetal-400);
}
html[data-theme="dark"] #testimonials .testimonial-card :is(p,h1,h2,h3,h4,h5,h6){
  color: var(--gunmetal-10);
}
html[data-theme="dark"] #testimonials .testimonial-card .f-gunmetal{
  color: var(--gunmetal-10) !important;
}


/* ---------- Breakpoints (consolidated at end of file) ---------- */

@media (prefers-reduced-motion: reduce){
  .portfolio--card--img--skeleton{
    animation: none;
    background: var(--gunmetal-25);
  }
  html[data-theme="dark"] .portfolio--card--img--skeleton{
    background: var(--gunmetal-400);
  }
  .btn--slide:not(.btn-small) .btn__label-track{
    transition: none;
  }
  .btn--slide:not(.btn-small):hover .btn__label-track,
  .btn--slide:not(.btn-small):focus-visible .btn__label-track{
    transform: none;
  }
}

/* Touch devices (mobile/tablet): disable slide-up labels; add press states */
@media (hover: none), (pointer: coarse){
  .btn--slide:not(.btn-small) .btn__label-track{
    transition: none;
    transform: none;
  }
  .btn--slide:not(.btn-small):hover .btn__label-track,
  .btn--slide:not(.btn-small):focus-visible .btn__label-track{
    transform: none;
  }

  /* Press feedback (hero + footer) */
  .hero-actions .btn:active,
  footer .btn:active{
    transform: scale(0.98);
  }

  .hero-actions .btn-primary:active{
    background: var(--gunmetal-400);
  }
  .hero-actions .btn-secondary:active{
    background: var(--white-500);
  }
  html[data-theme="dark"] .hero-actions .btn-primary:active{
    background: var(--keppal-500);
  }
  html[data-theme="dark"] .hero-actions .btn-secondary:active{
    background: var(--gunmetal-200);
    border-color: var(--gunmetal-200);
  }

  /* Submenu press feedback */
  .nav3__submenu .nav3__submenu-link:active,
  .nav3__submenu button.nav3__submenu-link:active,
  .nav3__submenu .nav3__submenu-sublink:active{
    transform: scale(0.99);
    background: var(--gunmetal-5);
  }
  .nav3__submenu .nav3__submenu-contact .btn:active{
    transform: scale(0.98);
  }
  .nav3__submenu .nav3__submenu-theme__opt:active{
    transform: scale(0.99);
    background: var(--white-500);
    border-color: var(--gunmetal-10);
  }

  html[data-theme="dark"] .nav3__submenu .nav3__submenu-link:active,
  html[data-theme="dark"] .nav3__submenu button.nav3__submenu-link:active,
  html[data-theme="dark"] .nav3__submenu .nav3__submenu-sublink:active{
    background: var(--gunmetal-400);
  }
  html[data-theme="dark"] .nav3__submenu .nav3__submenu-theme__opt:active{
    background: var(--gunmetal-300);
    border-color: var(--gunmetal-300);
  }
}

/* --- TABLET (Moderate reduction) --- */
@media screen and (max-width: 1024px) {
  :root {
    --h-scale: 1.200; /* Tighter heading steps */
  }
}

@media (min-width: 768px){
  .testimonial-card{
    padding: var(--sp--56);
  }
}

@media (min-width: 980px){
  .nav3__mobile-bar{
    display: none !important;
  }
  .nav3__submenu-backdrop{
    display: none !important;
  }
  .nav3__submenu{
    display: none !important;
  }
  html.nav3-submenu-open,
  body.nav3-submenu-open{
    overflow: visible;
    overscroll-behavior: auto;
  }
}

@media (max-width: 979px){
  .nav3__inner{
    display: none !important;
  }

  .nav3__mobile-bar{
    display: flex;
  }

  .nav3{
    padding: var(--sp--16) var(--sp--24);
    /* Mobile bar height: vertical padding ×2 + 44px control row */
    --nav3-mobile-bar-offset: calc(var(--sp--16) * 2 + 44px);
    --nav3-submenu-stack-top: calc(env(safe-area-inset-top, 0px) + var(--nav3-mobile-bar-offset));
  }

  /* Keep primary nav above page content; bar stacks above backdrop + panel */
  nav.nav3{
    z-index: 500;
  }

  /* Opaque strip + high z-index: WebKit often paints fixed backdrop above in-flow
     siblings inside a stacked nav; geometry (backdrop top) is the reliable fix. */
  .nav3__mobile-bar{
    position: relative;
    z-index: 10;
    isolation: isolate;
    background: var(--white-400);
    border-bottom: none;
    box-shadow: none;
  }

  html[data-theme="dark"] .nav3__mobile-bar{
    background: var(--gunmetal-500);
  }

  /* Author display:flex must not override [hidden] (same specificity as UA hint) */
  .nav3__submenu[hidden],
  .nav3__submenu-backdrop[hidden]{
    display: none !important;
  }

  /* Solid sheet below mobile header (matches panel); blocks page without a tinted overlay */
  .nav3__submenu-backdrop:not([hidden]){
    position: fixed;
    top: var(--nav3-submenu-stack-top, calc(env(safe-area-inset-top, 0px) + var(--nav3-mobile-bar-offset, 4.75rem)));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    border: none;
    margin: 0;
    padding: 0;
    background: var(--white-400);
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }

  .nav3__submenu:not([hidden]){
    position: fixed;
    top: var(--nav3-submenu-stack-top, calc(env(safe-area-inset-top, 0px) + var(--nav3-mobile-bar-offset, 4.75rem)));
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
    z-index: 2;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    border: 0;
    box-shadow: none;
    /* Panel above backdrop in the rare case their tops align */
    isolation: isolate;
  }

  .nav3__submenu-inner{
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--sp--40) + env(safe-area-inset-bottom, 0px));
  }

  .nav3__submenu-links{
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  .nav3__submenu-contact{
    flex-shrink: 0;
  }

  .nav3__submenu-theme{
    flex-shrink: 0;
  }

  html.nav3-submenu-open,
  body.nav3-submenu-open{
    overflow: hidden;
    overscroll-behavior: none;
  }
}

@media (max-width: 900px){
  .footer-container .grid--12 .col--span--6,
  .footer-container .grid--12 .col--span--2{
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px){
  .skills-grid > .col--span--6,
  .skills-grid > .col--span--5,
  .skills-grid > .col--span--4{
    grid-column: 1 / -1;
  }

  /* about-revised: About hero stacks into 2 rows */
  .aboutHero .grid--10{
    row-gap: var(--sp--40);
  }
  .aboutHero .grid--10 > .col--span--3,
  .aboutHero .grid--10 > .col--span--7{
    grid-column: 1 / -1;
  }
  .aboutHero .grid--10 > .col--span--3{
    display: flex;
    justify-content: center;
  }
  .aboutHero .grid--10 > .col--span--3 img{
    width: 100%;
    max-width: 224px;
    height: auto;
    display: block;
  }

  /* about-revised: Impact cards stack full width */
  .about-section.impact .grid--10{
    row-gap: var(--sp--16);
  }
  .about-section.impact .grid--10 > .col--span--5{
    grid-column: 1 / -1;
  }

  .portfolio.grid--12 :is(
    .col--span--1,  .col--span--2,  .col--span--3,  .col--span--4,
    .col--span--5,  .col--span--6,  .col--span--7,  .col--span--8,
    .col--span--9,  .col--span--10, .col--span--11, .col--span--12
  ){
    grid-column: auto / span 6;
  }

  #info .grid--12 :is(
    .col--span--1,  .col--span--2,  .col--span--3,  .col--span--4,
    .col--span--5,  .col--span--6,  .col--span--7,  .col--span--8,
    .col--span--9,  .col--span--10, .col--span--11, .col--span--12
  ){
    grid-column: auto / span 6;
  }

  footer .grid--12.grid--col--gap--sp--16{
    row-gap: var(--sp--40);
    column-gap: var(--sp--40);
  }

  footer .container--1280{
    padding-left: 0;
    padding-right: 0;
  }

  .footer-container{
    padding: var(--sp--80) var(--sp--64) var(--sp--56) var(--sp--64);
  }

  footer .grid--12.grid--col--gap--sp--16 > :nth-child(1){
    grid-column: 1 / -1;
  }

  footer .grid--12.grid--col--gap--sp--16 > :nth-child(2){
    display: none;
  }

  footer .grid--12.grid--col--gap--sp--16 > :nth-child(3),
  footer .grid--12.grid--col--gap--sp--16 > :nth-child(4){
    grid-column: auto / span 6;
  }

  .btn-default{height: 58px;}
  .btn-small{height: 34px;}

}

@media (max-width: 480px){
  .grid--12,
  .grid--10{
    column-gap: var(--sp--16);
  }

  .container--1024{
    padding: 0 var(--sp--24);
  }

  /* 480px: keep row gap 40, reduce column gap to 16 (must be after gap shorthand). */
  .grid--12,
  .grid--10{
    gap: var(--sp--40) var(--sp--16);
  }

  .aboutHero .grid--10{
    column-gap: var(--sp--16);
  }

  .testimonial-card{
    padding: var(--sp--32) var(--sp--32) var(--sp--80);
  }

  /* Knowledge: single column + tighter vertical rhythm */
  .skills-grid{
    row-gap: var(--sp--40);
  }
  .skills-grid > :is(.col--span--6, .col--span--5, .col--span--4){
    grid-column: 1 / -1;
  }

  .grid-table.grid-table--10 .grid-table-row--head{
    display: none;
  }

  /* Experience (about-revised): first visible row sits flush to top */
  .grid-table.grid-table--10 .grid-table-row:nth-child(2) .grid-table-cell{
    padding-top: 0;
  }

  .grid-table.grid-table--10 .grid-table-cell--company{
    display: none;
  }
  .grid-table.grid-table--10 .grid-table-cell--year{
    grid-column: auto / span 3;
    padding-right: var(--sp--16);
  }
  .grid-table.grid-table--10 .grid-table-cell--role{
    grid-column: auto / span 7;
  }
  .mobile-only{
    display: block;
  }
  .sp--80.hr-mobile-adjust {
    padding: var(--sp--64) 0 0 0;
  }
  .container--1280 {
    padding-left: var(--sp--24);
    padding-right: var(--sp--24);
  }
  footer p.sp--40.sm {
    margin: 0 0 var(--sp--32);
  }

  svg.btn__icon{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-self: center;
  }
}

/* --- MOBILE (Compact reduction) --- */
@media screen and (max-width: 479px) {
  :root {
    --h-scale: 1.150; /* Flatters headings for small screens */
    --b-scale: 1.125; /* Boldest body difference */
  }

  footer .container--1280 {padding-left: 0; padding-right: 0;}
  footer .grid--12.grid--col--gap--sp--16{column-gap: var(--sp--16);}
  .footer-container {
    padding: var(--sp--48) var(--sp--40);
  }
  footer div.sp--56 {padding-top: var(--sp--40);}
  .portfolio.grid--12 :is( .col--span--1, .col--span--2, .col--span--3, .col--span--4, .col--span--5, .col--span--6, .col--span--7, .col--span--8, .col--span--9, .col--span--10, .col--span--11, .col--span--12 ) {
      grid-column: auto / span 12;
  }
  footer .grid--12.grid--col--gap--sp--16 > :nth-child(3), footer .grid--12.grid--col--gap--sp--16 > :nth-child(4) {
      grid-column: auto / span 12;
  }
  footer {
    padding: var(--sp--64) var(--sp--16) var(--sp--16) var(--sp--16);
  }
  .portfolio--card--content {
    padding-top: var(--sp--24);
  }
  .btn-default {
    height: 54px;
    font-size: calc(var(--body-size) / 1.125);
  }
}