:root {
  --black: #111111;
  --black-soft: #1a1a1a;
  --white: #ffffff;
  --offwhite: #f4f4f1;
  --lime: #facf0bda;
  --lime-dark: #e5eadd;
  --text-muted: #6f6f6f;
  --border-light: rgba(0, 0, 0, .1);
  --border-dark: rgba(255, 255, 255, .12);
  --sidebar-width: 250px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--black);
  font-family: Inter, Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

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

img {
  display: block;
  max-width: 100%;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--lime);
  z-index: 9999;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9998;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--lime);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(168, 255, 31, .5);
  transition: width .2s ease, height .2s ease;
}

body.cursor-active .cursor-ring {
  width: 52px;
  height: 52px;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--black);
  color: var(--white);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  border-right: 1px solid var(--border-dark);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand-mark {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--lime);
}

.brand-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.sidebar-copy {
  margin: 34px 0 28px;
  color: #bdbdbd;
  font-size: 13px;
  line-height: 1.5;
}

.side-nav {
  display: grid;
  gap: 8px;
}

.side-nav a {
  padding: 11px 12px;
  border-radius: 10px;
  color: #d0d0d0;
  font-size: 13px;
  font-weight: 800;
  transition: .25s ease;
}

.side-nav a:hover,
.side-nav a.active {
  background: var(--lime);
  color: var(--black);
  transform: translateX(4px);
}

.sidebar-footer {
  margin-top: auto;
}

.availability {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bcbcbc;
  font-size: 12px;
  margin-bottom: 14px;
}

.availability span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(168, 255, 31, .1);
}

.sidebar-cta {
  display: block;
  background: var(--lime);
  color: var(--black);
  text-align: center;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
}

main {
  margin-left: var(--sidebar-width);
}

.section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero {
  background:
    radial-gradient(circle at 7% 20%, rgba(168, 255, 31, .34), transparent 18%),
    radial-gradient(circle at 92% 34%, rgba(168, 255, 31, .48), transparent 21%),
    radial-gradient(circle at 55% 92%, rgba(168, 255, 31, .12), transparent 25%),
    var(--black);
  color: var(--white);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  gap: 80px;
  padding: 0 clamp(28px, 4vw, 66px) 0;
}

.hero-copy {
  position: relative;
  z-index: 20;
  max-width: 760px;
  align-self: start;
  margin-top: clamp(100px, 15vh, 180px);
}

.eyebrow {
  color: var(--lime);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.eyebrow.dark {
  color: var(--black);
}

.hero h1,
.section h2,
.cta-section h2 {
  text-wrap: balance;
}

.hero h1 {
  margin: 18px 0 24px;
  font-size: clamp(58px, 6.7vw, 106px);
  line-height: .88;
  letter-spacing: -.065em;
}

.hero h1 span {
  display: block;
  color: var(--lime);
}

.hero-copy p {
  max-width: 600px;
  color: #d2d2d2;
  font-size: 17px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  position: relative;
  z-index: 40;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  border: 2px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  background: var(--lime);
  color: var(--black);
  box-shadow: 0 14px 32px rgba(168, 255, 31, .18);
}

.button-secondary {
  background: var(--white);
  color: var(--black);
}

.hero-visual {
  position: relative;
  height: 100%;
  overflow: visible;
}

.hero-visual img {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%) scale(1.0);
  transform-origin: bottom center;
  height: 100%;
  width: 95%;
  max-width: 620px;
  object-fit: contain;
  object-position: bottom center;
  z-index: 3;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, .4));
}

.hero-outline {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(120px, 12vw, 220px);
  z-index: 1;
  font-weight: 900;
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  z-index: 1;
}

.glow-one {
  width: 320px;
  height: 320px;
  background: rgba(7, 7, 7, 0.48);
  top: 20%;
  right: 10%;
}

.glow-two {
  width: 220px;
  height: 220px;
  background: rgba(17, 17, 16, 0.48);
  bottom: 10%;
  left: 6%;
}

.skill-card {
  position: absolute;
  z-index: 4;
  width: 240px;
  padding: 15px 16px;
  border-radius: 16px;
  background: rgba(20, 20, 20, 0.78);
  border: 1px solid var(--border-dark);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

.skill-card strong {
  display: block;
  color: var(--lime);
  margin-bottom: 4px;
}

.skill-card span {
  color: #c8c8c8;
  font-size: 11px;
}

.skill-one {
  top: 15%;
  left: 19%;
  transform: translateX(-50%);
}

.skill-two {
  top: 35%;
  left: -23%;
}

.skill-three {
  top: 34%;
  right: -19%;
}

.hero-strip {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  background: var(--offwhite);
  color: var(--black);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  flex-shrink: 0;
}

.light-section {
  background: var(--offwhite);
  padding: 95px clamp(28px, 4vw, 66px);
}

.dark-section {
  background: var(--black);
  color: var(--white);
  padding: 95px clamp(28px, 4vw, 66px);
}

.section-number {
  position: absolute;
  right: 26px;
  top: 20px;
  font-size: clamp(80px, 12vw, 180px);
  font-weight: 900;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .06);
}

.section-number.light {
  -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
}

.section-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 52px;
}

.section-heading h2,
.sticky-story h2 {
  margin: 10px 0 0;
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: .95;
  letter-spacing: -.055em;
}

.section-heading h2 span,
.sticky-story h2 span {
  color: var(--lime);
}

.section-heading>p {
  max-width: 520px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.dark-section .section-heading>p {
  color: #a8a8a8;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 26px;
  min-height: 270px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .08);
}

.service-index {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lime);
  font-weight: 900;
}

.service-card h3 {
  margin: 58px 0 14px;
  font-size: 22px;
  letter-spacing: -.025em;
}

.service-card p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 14px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-card {
  border: 1px solid var(--border-dark);
  border-radius: 22px;
  background: var(--black-soft);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}

.project-card:hover {
  transform: translateY(-10px);
  border-color: var(--lime);
}

.project-image {
  height: 330px;
  padding: 18px;
}

.project-a {
  background: linear-gradient(145deg, #222, #0d0d0d);
}

.project-b {
  background: linear-gradient(145deg, var(--lime), var(--lime-dark));
}

.project-c {
  background: linear-gradient(145deg, #2a2a2a, #090909);
}

.mockup {
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: white;
  color: var(--black);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
}

.dark-mockup {
  background: #101010;
  color: white;
}

.mockup-bar {
  height: 30px;
  background: #e9e9e9;
}

.dark-mockup .mockup-bar {
  background: #1e1e1e;
}

.mockup-content {
  padding: 25px;
}

.mockup-content h4 {
  font-size: 28px;
  line-height: 1.05;
  margin: 16px 0 30px;
}

.mockup-content span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #d9d9d9;
  margin: 9px 0;
}

.dark-mockup .mockup-content span {
  background: #3b3b3b;
}

.mockup-content span:nth-child(2) {
  width: 75%;
}

.mockup-content span:nth-child(3) {
  width: 54%;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21px;
}

.project-meta small {
  color: #a9a9a9;
}

.project-meta h3 {
  margin: 7px 0 0;
  font-size: 20px;
}

.project-meta>span {
  font-size: 26px;
  color: var(--lime);
}

.sticky-story {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: start;
}

.story-left {
  position: sticky;
  top: 40px;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-right {
  display: grid;
  gap: 18px;
}

.story-card {
  min-height: 240px;
  border-radius: 22px;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--border-light);
}

.story-card>span {
  font-size: 42px;
  font-weight: 900;
  color: var(--lime);
  -webkit-text-stroke: 1px var(--black);
}

.story-card h3 {
  font-size: 26px;
  margin: 30px 0 10px;
}

.story-card p {
  color: var(--text-muted);
  line-height: 1.6;
}

.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.process-track::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--border-dark);
}

.process-step {
  position: relative;
  padding-right: 28px;
}

.process-step>span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  font-weight: 900;
}

.process-step h3 {
  margin: 28px 0 12px;
  font-size: 24px;
}

.process-step p {
  color: #a8a8a8;
  line-height: 1.6;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.testimonial-card {
  margin: 0;
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--border-light);
}

.testimonial-card p {
  font-size: 19px;
  line-height: 1.5;
}

.testimonial-card footer {
  margin-top: 28px;
  font-weight: 900;
}

.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  padding: 84px clamp(28px, 4vw, 66px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}

.cta-section h2 {
  margin: 10px 0 18px;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .92;
  letter-spacing: -.055em;
}

.cta-section p {
  max-width: 650px;
  color: #bcbcbc;
  line-height: 1.6;
}

.cta-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(168, 255, 31, .18);
  filter: blur(45px);
}

.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 220px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .75fr);
  }

  .services-grid,
  .process-track {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-grid {
    grid-template-columns: 1fr 1fr;
  }

  .projects-grid .project-card:last-child {
    grid-column: 1 / -1;
  }
}

.mobile-header,
.mobile-nav-overlay {
  display: none;
}

@media (max-width: 820px) {

  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  .sidebar {
    display: none;
  }

  main {
    margin-left: 0;
  }

  .mobile-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 24px 24px;
    background: transparent;
    border: none;
    box-shadow: none;
    align-items: center;
    pointer-events: none;
  }

  .mobile-header>* {
    pointer-events: auto;
  }

  .mobile-brand {
    justify-self: start;
    background: var(--lime);
    color: var(--black);
    font-weight: 900;
    font-size: 18px;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
  }

  .mobile-cta {
    justify-self: start;
    background: var(--lime);
    color: var(--black);
    font-weight: 900;
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
  }

  .mobile-menu-btn {
    justify-self: end;
    background: var(--offwhite);
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .mobile-menu-btn span {
    width: 20px;
    height: 2px;
    background: var(--black);
    border-radius: 2px;
    transition: 0.3s ease;
  }

  .mobile-header.menu-open .mobile-menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-header.menu-open .mobile-menu-btn span:nth-child(2) {
    opacity: 0;
  }

  .mobile-header.menu-open .mobile-menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-nav-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .mobile-nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 90%;
    max-width: 320px;
    text-align: left;
    margin-top: 20px;
  }

  .mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
    padding: 16px 20px;
    border-radius: 16px;
    background: transparent;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease, color 0.25s ease;
  }

  .mobile-nav-links a svg {
    width: 20px;
    height: 20px;
    stroke: var(--white);
    transition: stroke 0.25s ease;
  }

  .mobile-nav-overlay.active .mobile-nav-links a {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .mobile-nav-overlay.active .mobile-nav-links a:nth-child(1) {
    transition-delay: 0.05s, 0.05s, 0s, 0s;
  }

  .mobile-nav-overlay.active .mobile-nav-links a:nth-child(2) {
    transition-delay: 0.10s, 0.10s, 0s, 0s;
  }

  .mobile-nav-overlay.active .mobile-nav-links a:nth-child(3) {
    transition-delay: 0.15s, 0.15s, 0s, 0s;
  }

  .mobile-nav-overlay.active .mobile-nav-links a:nth-child(4) {
    transition-delay: 0.20s, 0.20s, 0s, 0s;
  }

  .mobile-nav-overlay.active .mobile-nav-links a:nth-child(5) {
    transition-delay: 0.25s, 0.25s, 0s, 0s;
  }

  .mobile-nav-overlay.active .mobile-nav-links a:nth-child(6) {
    transition-delay: 0.30s, 0.30s, 0s, 0s;
  }

  .mobile-nav-overlay.active .mobile-nav-links a:hover,
  .mobile-nav-overlay.active .mobile-nav-links a.active {
    background-color: var(--lime);
    color: var(--black);
  }

  .mobile-nav-overlay.active .mobile-nav-links a:hover {
    transform: translateY(0) scale(1.02);
  }

  .mobile-nav-overlay.active .mobile-nav-links a:hover svg,
  .mobile-nav-overlay.active .mobile-nav-links a.active svg {
    stroke: var(--black);
  }

  .hero {
    min-height: 100dvh !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 125px;
    background-color: var(--black);
    /* fixed value, not clamp, to guarantee clearance */
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 22px 0;
    gap: 0;
  }

  .hero-copy {
    margin-top: 0;
  }

  .hero-copy p {
    margin: 12px 0;
    font-size: clamp(13px, 1.8vh, 15px);
    line-height: 1.5;
  }

  .hero h1 {
    font-size: clamp(38px, 8vh, 52px);
    margin: clamp(8px, 1.5vh, 12px) 0;
  }

  .hero-actions {
    margin-top: clamp(10px, 1.5vh, 14px);
    gap: 10px;
  }

  .button {
    min-height: 44px;
    padding: 12px 20px;
  }

  .hero-visual {
    position: relative;
    width: 100%;
    height: clamp(300px, 38dvh, 390px);
    min-height: 300px;
    margin-top: clamp(14px, 2vh, 20px);
    margin-bottom: 0;
    padding: 0;
    line-height: 0;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
    transform: none !important;
  }

  .hero-visual img {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    height: 92%;
    width: auto;
    max-width: 54%;
    object-fit: contain;
    object-position: bottom center;
    margin: 0;
    padding: 0;
    transform: translateX(-50%) !important;
    z-index: 3;
  }

  .hero-visual::before,
  .hero-visual::after {
    display: none;
  }

  /* Keep all three capability cards visible and carefully arranged around the full portrait. */
  .skill-card {
    display: block;
    width: auto;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(20, 20, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .30);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: none;
  }

  .skill-card strong {
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.15;
    margin-bottom: 3px;
  }

  .skill-card span {
    display: block;
    font-size: clamp(8px, 2.25vw, 10px);
    line-height: 1.25;
    white-space: normal;
  }

  .skill-one {
    top: 1%;
    left: 50%;
    right: auto;
    width: min(46%, 190px);
    transform: translateX(-50%);
    text-align: left;
  }

  .skill-two {
    top: 31%;
    left: 0;
    right: auto;
    width: min(42%, 180px);
  }

  .skill-three {
    top: 31%;
    right: 0;
    left: auto;
    width: min(42%, 180px);
  }

  .hero-strip {
    flex-wrap: wrap;
    height: auto;
    padding: 18px;
  }

  .section-heading,
  .sticky-story,
  .cta-section {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .story-left {
    position: relative;
    min-height: auto;
    top: auto;
    margin-bottom: 35px;
  }

  .services-grid,
  .projects-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .projects-grid .project-card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .side-nav {
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .light-section,
  .dark-section {
    padding: 72px 18px;
  }

  .services-grid,
  .process-track {
    grid-template-columns: 1fr;
  }

  .process-track::before {
    display: none;
  }

  .process-step {
    padding: 0 0 26px;
  }
}


@media (max-width: 430px) {
  .hero {
    padding-top: 112px;
  }

  .hero-grid {
    padding-inline: 18px;
  }

  .hero-visual {
    height: clamp(285px, 36dvh, 350px);
    min-height: 285px;
  }

  .hero-visual img {
    height: 90%;
    max-width: 56%;
  }

  .skill-card {
    padding: 9px 10px;
  }

  .skill-one {
    width: 48%;
  }

  .skill-two,
  .skill-three {
    top: 32%;
    width: 41%;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 820px) and (max-height: 750px) {
  .hero h1 {
    font-size: clamp(34px, 7vh, 46px);
    margin: 6px 0 10px;
  }

  .hero-copy p {
    font-size: 13px;
    line-height: 1.4;
  }

  .hero-actions {
    margin-top: 10px;
    gap: 8px;
  }

  .button {
    min-height: 42px;
    padding: 10px 18px;
  }

  .hero-visual {
    height: clamp(250px, 34dvh, 310px);
    min-height: 250px;
    margin-top: 10px;
  }

  .hero-visual img {
    width: auto;
    height: 90%;
    max-width: 52%;
  }

  .skill-card {
    padding: 8px 10px;
  }

  .skill-two,
  .skill-three {
    top: 30%;
  }
}

/* Project galleries: scoped to the existing project cards only */
.project-carousel {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  isolation: isolate;
}

.project-slides {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0c0c0c;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
}

.project-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}

.project-slide.active {
  opacity: 1;
  visibility: visible;
}

.project-slide img,
.project-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111;
}

.project-counter {
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 3;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(0, 0, 0, .66);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.project-carousel:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -4px;
}

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.project-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-dialog {
  width: min(1120px, 100%);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: #111;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}

.lightbox-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lightbox-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 2vw, 28px);
}

.lightbox-count {
  color: #aaa;
  white-space: nowrap;
  font-size: 13px;
}

.lightbox-media {
  min-height: 0;
  height: min(72vh, 760px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #080808;
}

.lightbox-media img,
.lightbox-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lightbox-controls button,
.lightbox-close {
  border: 1px solid rgba(255, 255, 255, .18);
  background: #1c1c1c;
  color: #fff;
  cursor: pointer;
}

.lightbox-controls button {
  min-width: 130px;
  padding: 12px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
}

.lightbox-controls button:hover,
.lightbox-controls button:focus-visible,
.lightbox-close:hover,
.lightbox-close:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 820px) {
  .project-card:hover {
    transform: none;
  }

  .project-lightbox {
    padding: 12px;
  }

  .lightbox-dialog {
    max-height: calc(100dvh - 24px);
    padding: 14px;
    border-radius: 18px;
  }

  .lightbox-media {
    height: 68dvh;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
  }
}

@media (max-width: 560px) {
  .project-image {
    height: 280px;
    padding: 12px;
  }

  .project-counter {
    right: 22px;
    bottom: 22px;
  }

  .lightbox-heading {
    padding-right: 34px;
  }

  .lightbox-controls button {
    min-width: 0;
    flex: 1;
  }

  .lightbox-media {
    height: 62dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-slide {
    transition: none;
  }
}

/* Hero capability-card alignment refinement — 2026-08-02 */
/* Desktop: keep the top card centred on the portrait/head rather than the visual column edge. */
@media (min-width: 821px) {
  .hero-visual .skill-one {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* Mobile: use width-led sizing so browser zoom and different phone heights do not shift the composition. */
@media (max-width: 820px) {
  .hero-visual {
    height: clamp(285px, 88vw, 390px);
    min-height: 285px;
    isolation: isolate;
  }

  .hero-visual img {
    left: 50%;
    bottom: 0;
    width: auto;
    height: 88%;
    max-width: 46%;
    object-fit: contain;
    object-position: bottom center;
    transform: translateX(-50%) !important;
  }

  .hero-visual .skill-one {
    top: 0;
    left: 50%;
    right: auto;
    width: min(47%, 190px);
    transform: translateX(-50%);
  }

  .hero-visual .skill-two,
  .hero-visual .skill-three {
    top: 30%;
    width: min(39%, 170px);
  }

  .hero-visual .skill-two {
    left: 0;
    right: auto;
  }

  .hero-visual .skill-three {
    right: 0;
    left: auto;
  }
}

@media (max-width: 430px) {
  .hero-visual {
    height: clamp(280px, 88vw, 378px);
    min-height: 280px;
  }

  .hero-visual img {
    height: 87%;
    max-width: 44%;
  }

  .hero-visual .skill-one {
    width: 48%;
  }

  .hero-visual .skill-two,
  .hero-visual .skill-three {
    top: 30%;
    width: 39%;
  }
}

/* Short phones: preserve the full portrait and belt while keeping the complete hero within the viewport. */
@media (max-width: 820px) and (max-height: 750px) {
  .hero-visual {
    height: clamp(245px, 70vw, 285px);
    min-height: 245px;
  }

  .hero-visual img {
    height: 88%;
    max-width: 43%;
  }

  .hero-visual .skill-two,
  .hero-visual .skill-three {
    top: 29%;
    width: 39%;
  }
}

/* =========================================================
   Stable hero composition redesign
   The portrait and capability cards now share one CSS Grid.
   No card or portrait uses viewport-based absolute positioning.
   ========================================================= */
.hero-visual {
  display: grid;
  grid-template-columns: minmax(145px, .78fr) minmax(250px, 1.35fr) minmax(145px, .78fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    ". web ."
    "automation portrait operations";
  column-gap: clamp(10px, 1.1vw, 18px);
  row-gap: clamp(10px, 1.4vh, 18px);
  align-items: end;
  justify-items: stretch;
  height: 100%;
  min-width: 0;
  overflow: visible;
  isolation: isolate;
}

.hero-visual img {
  grid-area: portrait;
  position: static;
  align-self: end;
  justify-self: center;
  display: block;
  width: min(100%, 430px);
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
  transform: none !important;
  margin: 0;
  z-index: 3;
}

.hero-visual .skill-card {
  position: static;
  width: 100%;
  max-width: none;
  min-width: 0;
  transform: none !important;
  align-self: start;
  z-index: 4;
}

.hero-visual .skill-one {
  grid-area: web;
  justify-self: center;
  align-self: end;
  width: min(100%, 240px);
}

.hero-visual .skill-two {
  grid-area: automation;
  margin-top: clamp(72px, 12vh, 150px);
}

.hero-visual .skill-three {
  grid-area: operations;
  margin-top: clamp(72px, 12vh, 150px);
}

@media (max-width: 1100px) and (min-width: 821px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(520px, .95fr);
    gap: clamp(28px, 4vw, 60px);
  }

  .hero-visual {
    grid-template-columns: minmax(130px, .74fr) minmax(220px, 1.25fr) minmax(130px, .74fr);
  }

  .hero-visual .skill-two,
  .hero-visual .skill-three {
    margin-top: clamp(64px, 10vh, 120px);
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 100dvh !important;
    height: auto !important;
    padding-top: 112px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 clamp(16px, 5vw, 24px);
    gap: clamp(14px, 2.2vh, 22px);
  }

  .hero-copy,
  .hero-copy p,
  .hero h1,
  .hero-actions {
    flex-shrink: 0;
  }

  .hero-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 42%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      ". web ."
      "automation portrait operations";
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    column-gap: clamp(6px, 2vw, 10px);
    row-gap: clamp(8px, 1.5vh, 14px);
    align-items: end;
    overflow: visible;
  }

  .hero-visual img {
    width: 100%;
    height: auto;
    max-width: 220px;
    max-height: none;
    align-self: end;
  }

  .hero-visual .skill-card {
    width: 100%;
    padding: clamp(8px, 2.4vw, 11px);
    border-radius: 13px;
    align-self: start;
  }

  .hero-visual .skill-card strong {
    font-size: clamp(11px, 3.15vw, 15px);
  }

  .hero-visual .skill-card span {
    font-size: clamp(7.5px, 2.15vw, 10px);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .hero-visual .skill-one {
    width: min(100%, 190px);
  }

  .hero-visual .skill-two,
  .hero-visual .skill-three {
    margin-top: clamp(42px, 13vw, 66px);
  }
}

@media (max-width: 430px) {
  .hero {
    padding-top: 104px;
  }

  .hero-grid {
    padding-inline: clamp(14px, 4.5vw, 18px);
  }

  .hero-visual {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 40%) minmax(0, 1fr);
    column-gap: 6px;
  }

  .hero-visual img {
    max-width: 180px;
  }

  .hero-visual .skill-two,
  .hero-visual .skill-three {
    margin-top: clamp(34px, 11vw, 52px);
  }
}

@media (max-width: 360px) {
  .hero-visual {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 38%) minmax(0, 1fr);
    column-gap: 5px;
  }

  .hero-visual .skill-card {
    padding: 7px 8px;
  }

  .hero-visual .skill-two,
  .hero-visual .skill-three {
    margin-top: 30px;
  }
}

/* =========================================================
   HERO — one self-contained, fulresponsively  system.

   How it works (so future edits stay predictable):

   1. .hero-fresh__inner always fits the viewport. The copy
      takes the height it needs; .hero-fresh__visual absorbs
      whatever height is left.

   2. .hero-fresh__stage is a ratio box: its width comes from
      the space available, its height from --stage-ratio, and
      max-height stops it from ever pushing past the fold.
      Inside it, a 12 x 12 grid places the portrait and the
      three cards. Every element is positioned in fractions of
      the SAME box, so the whole composition scales together —
      there are no per-device offsets to re-tune.

   3. The portrait lives in rows 3-13, so rows 1-2 are permanent
      headroom. "Web Design" sits in rows 1-3 and therefore can
      never touch the face. The two lower cards sit on the suit
      and occupy disjoint columns, so they can never overlap
      each other. If the stage gets squeezed it only ever gets
      WIDER than --stage-ratio, which pulls the cards further
      from the face — the safe direction.

   4. Card type is sized in cqmin (a share of the stage's
      smaller side), so text shrinks with the composition
      instead of bursting out of it.

   Grid map (12 x 12):
      rows 1-3   cols 1-7    Web Design  (bottom-aligned to row 3)
      rows 3-13  cols 1-13   Portrait (object-fit: contain)
      rows 6-8   cols 1-6    Automation
      rows 8-10  cols 8-13   Operations
   ========================================================= */

.hero-fresh {
  --stage-ratio: .68;
  /* width / height of the stage */
  --stage-max-h: min(860px, 82svh);
  --hero-gutter: clamp(20px, 4vw, 64px);
  --hero-top: clamp(72px, 9vh, 112px);
  --hero-bottom: 0px;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(87, 143, 28, .32), transparent 28%),
    radial-gradient(circle at 91% 40%, rgba(120, 190, 35, .42), transparent 24%),
    #101110;
  color: #fff;
}

.hero-fresh__inner {
  width: min(100% - (var(--hero-gutter) * 2), 1280px);
  min-height: 100svh;
  margin-inline: auto;
  padding-block: var(--hero-top) var(--hero-bottom);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  column-gap: clamp(24px, 3.4vw, 72px);
}

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

.hero-fresh__copy {
  position: relative;
  z-index: 4;
  max-width: 660px;
  align-self: center;
}

.hero-fresh__copy .eyebrow {
  margin: 0 0 18px;
}

.hero-fresh__copy h1 {
  margin: 0;
  font-size: clamp(42px, 5.2vw, 96px);
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero-fresh__copy h1 span {
  display: block;
  color: var(--lime, #e8c20b);
}

.hero-fresh__lede {
  max-width: 52ch;
  margin: clamp(16px, 2.1vh, 28px) 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-fresh__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(20px, 2.8vh, 34px);
}

.hero-fresh__actions .button:focus-visible {
  outline: 2px solid var(--lime, #e8c20b);
  outline-offset: 3px;
}

/* ---------- visual shell ---------- */

.hero-fresh__visual {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: 0;
  min-height: 0;
}

.hero-fresh__stage {
  container-type: size;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  aspect-ratio: var(--stage-ratio);
  /* keep the box from going wide-and-short, which would push the
     cards away from the portrait */
  max-width: min(100%, calc(var(--stage-max-h) * var(--stage-ratio)));
  max-height: min(100%, var(--stage-max-h));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

/* ---------- portrait ---------- */

.hero-fresh__portrait {
  grid-area: 3 / 1 / 13 / 13;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

/* ---------- cards ---------- */

.hero-fresh__card {
  z-index: 3;
  align-self: start;
  padding: clamp(9px, 2.9cqmin, 20px) clamp(11px, 3.2cqmin, 23px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: clamp(11px, 2.6cqmin, 18px);
  background: rgba(15, 16, 15, .86);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-fresh__card strong,
.hero-fresh__card span {
  display: block;
}

.hero-fresh__card strong {
  color: var(--lime, #e8c20b);
  font-size: clamp(12px, 3.9cqmin, 22px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.hero-fresh__card span {
  margin-top: clamp(3px, 1cqmin, 8px);
  color: rgba(255, 255, 255, .78);
  font-size: clamp(9.5px, 2.45cqmin, 14px);
  line-height: 1.3;
  text-wrap: pretty;
}

.hero-fresh__card--top {
  grid-area: 1 / 1 / 3 / 8;
  align-self: end;
}

.hero-fresh__card--left {
  grid-area: 6 / 1 / 8 / 7;
}

.hero-fresh__card--right {
  grid-area: 8 / 8 / 10 / 13;
  justify-self: end;
}

/* When the stage gets small, drop the card descriptions before
   they can push a card out of its band and onto the portrait. */
@container (max-height: 430px) {
  .hero-fresh__card span {
    display: none;
  }

  .hero-fresh__card {
    padding: 8px 11px;
  }
}

@container (max-height: 300px) {
  .hero-fresh__card {
    padding: 6px 9px;
    border-radius: 10px;
  }

  .hero-fresh__card strong {
    font-size: clamp(10px, 4.4cqmin, 14px);
  }
}

@container (max-width: 290px) {
  .hero-fresh__card span {
    display: none;
  }
}

/* ---------- ambient glows ---------- */

.hero-fresh__glow {
  grid-area: 1 / 1 / 13 / 13;
  z-index: 0;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
}

.hero-fresh__glow--one {
  align-self: end;
  justify-self: start;
  margin: 0 0 6% 8%;
  background: rgba(109, 167, 35, .24);
}

.hero-fresh__glow--two {
  width: 44%;
  align-self: start;
  justify-self: end;
  margin: 12% 0 0 0;
  background: rgba(130, 199, 43, .20);
}

/* =========================================================
   Large screens — let the composition scale up
   ========================================================= */
@media (min-width: 1600px) {
  .hero-fresh {
    --stage-max-h: min(1000px, 80svh);
  }

  .hero-fresh__inner {
    width: min(100% - (var(--hero-gutter) * 2), 1480px);
  }
}

/* =========================================================
   Desktop view — manual card positioning
   Only applies to desktop viewports (901px and wider).
   Will NOT affect iOS, mobile, or phone CSS viewports (max-width: 480px).
   Adjust translate(X, Y) to nudge cards:
     → positive X = move right   → negative X = move left
     → positive Y = move down    → negative Y = move up
   ========================================================= */
@media (min-width: 901px) {

  /* ---------- Card Height & Text Sizing (Desktop) ---------- */
  .hero-fresh__card {
    /* Top/Bottom padding controls CARD HEIGHT (e.g. decrease to 8px to lower height) */
    padding: 10px 18px;
  }

  .hero-fresh__card strong {
    font-size: 15px;
    /* ← Title size (adapts inside card box) */
  }

  .hero-fresh__card span {
    font-size: 11.5px;
    /* ← Description size (adapts inside card box) */
    margin-top: 3px;
    /* ← Spacing between title and description */
  }

  /* ---------- Card Positions (Desktop) ---------- */
  .hero-fresh__card--top {
    translate: 80px -10px;
    /* ← CHANGE THESE VALUES to move the Web Design card on desktop */
  }

  .hero-fresh__card--left {
    translate: -90px -100px;
    /* ← CHANGE THESE VALUES to move the Automation card on desktop */
  }

  .hero-fresh__card--right {
    translate: 25px -210px;
    /* ← CHANGE THESE VALUES to move the Operations card on desktop */
  }
}

/* =========================================================
   Narrow desktop — two columns, tighter type
   ========================================================= */
@media (max-width: 1180px) {
  .hero-fresh {
    --stage-ratio: .68;
    --stage-max-h: min(720px, 80svh);
  }

  .hero-fresh__copy h1 {
    font-size: clamp(38px, 5vw, 64px);
  }

  .hero-fresh__lede {
    max-width: 44ch;
    font-size: clamp(14px, 1.5vw, 17px);
  }
}

/* =========================================================
   Stacked layout — small tablets and phones.
   Sized so the whole portrait stays on one screen.
   ========================================================= */
@media (max-width: 900px),
(max-width: 1024px) and (orientation: portrait) {
  .hero-fresh {
    --stage-ratio: .76;
    --stage-max-h: min(620px, 60svh);
    --hero-gutter: clamp(18px, 5vw, 34px);
    --hero-top: clamp(96px, 12vh, 124px);
    --hero-bottom: 0px;
  }

  .hero-fresh__inner {
    display: flex;
    flex-direction: column;
    width: min(100% - (var(--hero-gutter) * 2), 640px);
    row-gap: clamp(14px, 2.2vh, 28px);
  }

  .hero-fresh__copy {
    flex: 0 0 auto;
    max-width: none;
  }

  .hero-fresh__copy .eyebrow {
    margin-bottom: 12px;
  }

  .hero-fresh__copy h1 {
    font-size: clamp(32px, 10.5vw, 56px);
    line-height: .96;
  }

  .hero-fresh__lede {
    max-width: 60ch;
    margin-top: clamp(10px, 1.6vh, 18px);
    font-size: clamp(13.5px, 3.7vw, 16px);
    line-height: 1.45;
  }

  .hero-fresh__actions {
    gap: 10px;
    margin-top: clamp(14px, 2vh, 22px);
  }

  .hero-fresh__actions .button {
    flex: 1 1 auto;
    min-width: 132px;
    justify-content: center;
    text-align: center;
  }

  /* the visual absorbs every remaining pixel of height */
  .hero-fresh__visual {
    flex: 1 1 0;
    min-height: clamp(220px, 36svh, 320px);
    margin-top: clamp(24px, 4.5vh, 42px);
  }

  /* stacked layout: drive the stage from the leftover HEIGHT so the
     portrait fills it and the cards stay tight to the body */
  .hero-fresh__stage {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: min(100%, var(--stage-max-h));
  }
}

/* Portrait tablets have height to spare — let the stage grow */
@media (min-width: 700px) and (max-width: 900px),
(min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-fresh {
    --stage-max-h: min(760px, 62svh);
  }

  .hero-fresh__inner {
    width: min(100% - (var(--hero-gutter) * 2), 720px);
  }
}

/* =========================================================
   Short viewports — trim the copy so the portrait keeps room
   ========================================================= */
@media (max-width: 900px) and (max-height: 780px),
(max-width: 1024px) and (max-height: 780px) and (orientation: portrait) {
  .hero-fresh {
    --hero-top: clamp(82px, 11vh, 100px);
  }

  .hero-fresh__inner {
    row-gap: 10px;
  }

  .hero-fresh__copy h1 {
    font-size: clamp(28px, 8.6vw, 40px);
  }

  .hero-fresh__copy .eyebrow {
    margin-bottom: 8px;
  }

  .hero-fresh__lede {
    margin-top: 8px;
    font-size: clamp(12.5px, 3.4vw, 14.5px);
    line-height: 1.38;
  }

  .hero-fresh__actions {
    margin-top: 12px;
  }
}

/* =========================================================
   Landscape phones — no vertical room to stack
   ========================================================= */
@media (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) {
  .hero-fresh {
    --stage-ratio: .64;
    --stage-max-h: min(420px, 74svh);
    --hero-top: clamp(70px, 18vh, 92px);
    --hero-bottom: 20px;
    min-height: auto;
  }

  .hero-fresh__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    column-gap: 24px;
    row-gap: 0;
    min-height: auto;
    width: min(100% - (var(--hero-gutter) * 2), 940px);
  }

  .hero-fresh__copy h1 {
    font-size: clamp(26px, 4.6vw, 38px);
  }

  .hero-fresh__lede {
    max-width: 46ch;
    font-size: 13px;
  }

  .hero-fresh__actions .button {
    flex: 0 1 auto;
    min-width: 0;
  }

  .hero-fresh__visual {
    align-self: end;
    min-height: 200px;
  }

  /* back to width-driven sizing in this layout */
  .hero-fresh__stage {
    width: 100%;
    height: auto;
    max-width: min(100%, calc(var(--stage-max-h) * var(--stage-ratio)));
    max-height: min(100%, var(--stage-max-h));
  }
}

/* =========================================================
   Mobile view (iOS & Mobile Phones) — manual card positioning
   Covers all phone viewports up to 480px wide (iPhone / iOS / Android).
   Will NOT affect Desktop view (min-width: 901px).
   Adjust translate(X, Y) to nudge cards:
     → positive X = move right   → negative X = move left
     → positive Y = move down    → negative Y = move up
   ========================================================= */
@media (max-width: 480px) {

  /* Allow cards to move freely within the stage without clipping */
  .hero-fresh__visual,
  .hero-fresh__stage {
    overflow: visible;
  }

  /* More breathing room from screen edges */
  .hero-fresh {
    --hero-gutter: 32px;
    padding-bottom: 5px;
    /* ← INCREASE to extend hero background downward */
    margin-bottom: -2px;
    /* ← KEEP SAME as padding-bottom (cancels extra space) */
  }

  /* ---------- Card Height & Text Sizing (Mobile / iOS) ---------- */
  .hero-fresh__card {
    position: absolute !important;
    /* ← Decouples cards from grid tracks so resizing one never squeezes the others */
    padding: 4px 10px !important;
    width: auto;
    max-width: 85vw;
  }

  .hero-fresh__card--left {
    max-width: 155px !important;
    /* ← Automation card width on mobile */
  }

  .hero-fresh__card strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  /* Force card details to stay visible & crisp */
  .hero-fresh__card span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    margin-top: 1px !important;
    text-wrap: pretty;
  }

  /* ---------- Floating Cards (Mobile / iOS) ---------- */

  .hero-fresh__card--top {
    top: 2%;
    left: 10%;
    translate: 50px -10px;
    /* ← CHANGE THESE VALUES to move the Web Design card on mobile */
  }

  .hero-fresh__card--left {
    top: -130%;
    left: 0;
    translate: -35px 0px;
    /* ← CHANGE THESE VALUES to move the Automation card on mobile */
  }

  /* Operations Card Independent Controls (Mobile Only) */
  .hero-fresh__card--right {
    top: 55%;
    right: 0;
    translate: 25px -150px;
    /* ← POSITION: Move (X, Y) on mobile */

    width: 110px !important;
    /* ← WIDTH: Direct card width (e.g. 240px, 200px, 180px) */

    padding: 2px 15px !important;
    /* ← HEIGHT: Change 2px (top/bottom) to make taller or shorter */
  }

  /* ---------- iPhone SE / Standard Phones (361px – 400px) ---------- */
  /* Fine-tune cards specifically for iPhone SE (375px) without affecting other phones */
  @media (min-width: 361px) and (max-width: 400px) {
    .hero-fresh__card--top {
      translate: 50px -10px;
      /* ← Adjust Web Design card position for iPhone SE */
    }

    .hero-fresh__card--left {
      translate: -35px -5px;
      /* ← Adjust Automation card position for iPhone SE (X: right/left, Y: down/up) */
    }

    .hero-fresh__card--right {
      translate: 50px -130px;
      /* ← Adjust Operations card position for iPhone SE (X: right/left, Y: down/up) */
      width: 110px !important;
      /* ← Adjust Operations card width for iPhone SE */
    }
  }

  /* ---------- Large Phones (401px – 480px) ---------- */
  /* ⭐ THIS BLOCK CONTROLS YOUR CURRENT 425px DEVTOOLS VIEW IN YOUR SCREENSHOT! ⭐ */
  @media (min-width: 401px) {
    .hero-fresh__card--top {
      translate: 50px -10px;
      /* ← Adjust Web Design card position for 425px view */
    }

    .hero-fresh__card--left {
      translate: -45px 0px;
      /* ← Adjust Automation card position for 425px view */
    }

    .hero-fresh__card--right {
      translate: 60px -140px;
      /* ← EDIT THIS LINE 2437 TO MOVE OPERATIONS CARD ON YOUR 425px SCREEN! */
      width: 135px !important;
      /* ← Operations card width for 425px view */
    }
  }

  /* ---------- Small iOS / Mobile View (320px – 360px) ---------- */
  /* ⭐ THIS BLOCK CONTROLS YOUR EXACT 320px DEVTOOLS VIEW IN YOUR SCREENSHOT! ⭐ */
  @media (max-width: 360px) {
    .hero-fresh__card--top {
      translate: 40px -10px;
      /* ← Adjust Web Design card position for 320px view */
    }

    .hero-fresh__card--left {
      translate: -38px 0px;
      /* ← Adjust Automation card position for 320px view (X: right/left, Y: down/up) */
    }

    .hero-fresh__card--right {
      translate: 18px -165px;
      /* ← Adjust Operations card position for 320px view (X: right/left, Y: down/up) */
      width: 110px !important;
      /* ← Adjust Operations card width for 320px view */
    }
  }

  /* ---------- Contact section adjustments ---------- */
  .cta-section {
    padding-top: 50px;
    /* ← CHANGE to adjust top spacing */
    padding-bottom: 100px;
    /* ← CHANGE to adjust bottom spacing */
    margin-top: 5px;
    /* ← CHANGE to move section up (negative) or down (positive) */
  }
}

/* =========================================================
   iPad Mini view — manual card positioning
   Covers iPad Mini (481px to 800px).
   Does NOT touch Desktop view (screens 1025px and wider).
   ========================================================= */
@media (min-width: 481px) and (max-width: 800px) {
  .hero-fresh__card--top {
    translate: 100px -10px;
    /* ← Adjust Web Design card position for iPad Mini */
  }

  .hero-fresh__card--left {
    translate: -90px -100px;
    /* ← Adjust Automation card position for iPad Mini (X: right/left, Y: down/up) */
  }

  .hero-fresh__card--right {
    translate: 35px -190px;
    /* ← Adjust Operations card position for iPad Mini (X: right/left, Y: down/up) */
  }
}

/* =========================================================
   iPad Air view — manual card positioning
   Covers iPad Air (801px to 900px).
   Does NOT touch Desktop view (screens 1025px and wider) or iPad Mini.
   ========================================================= */
@media (min-width: 801px) and (max-width: 900px) {
  .hero-fresh__card--top {
    translate: 110px -28px;
    /* ← Adjust Web Design card position for iPad Air */
  }

  .hero-fresh__card--left {
    translate: -90px -120px;
    /* ← Adjust Automation card position for iPad Air (X: right/left, Y: down/up) */
  }

  .hero-fresh__card--right {
    translate: 20px -240px;
    /* ← Adjust Operations card position for iPad Air (X: right/left, Y: down/up) */
  }
}

/* =========================================================
   iPad Pro view — manual card positioning
   Covers iPad Pro (901px to 1024px).
   Does NOT touch Desktop view (screens 1025px and wider), iPad Air, or iPad Mini.
   ========================================================= */
@media (min-width: 901px) and (max-width: 1024px) {
  .hero-fresh__card--top {
    translate: 100px -10px;
    /* ← Adjust Web Design card position for iPad Pro */
  }

  .hero-fresh__card--left {
    translate: -80px -120px;
    /* ← Adjust Automation card position for iPad Pro (X: right/left, Y: down/up) */
  }

  .hero-fresh__card--right {
    translate: -30px -250px;
    /* ← Adjust Operations card position for iPad Pro (X: right/left, Y: down/up) */
  }
}

/* =========================================================
   Accessibility
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-fresh__glow {
    filter: blur(40px);
  }
}

/* =========================================================
   Motion and interaction refinement
   Preserves the original visual design and layout.
   ========================================================= */
:root {
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sidebar,
.mobile-header,
.service-card,
.project-card,
.story-card,
.testimonial-card,
.button,
.sidebar-cta,
.mobile-cta {
  will-change: transform;
}

.sidebar {
  box-shadow: 18px 0 50px rgba(0, 0, 0, .08);
}

.side-nav a,
.button,
.sidebar-cta,
.mobile-cta {
  transition:
    transform .45s var(--ease-premium),
    box-shadow .45s var(--ease-premium),
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease;
}

.button:hover,
.sidebar-cta:hover,
.mobile-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
}

.service-card,
.project-card,
.story-card,
.testimonial-card {
  transition:
    transform .6s var(--ease-premium),
    box-shadow .6s var(--ease-premium),
    border-color .35s ease;
}

.service-card:hover,
.story-card:hover,
.testimonial-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .1);
}

.project-card:hover {
  transform: translateY(-10px) scale(1.008);
}

.hero-fresh__portrait,
.hero-visual img {
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, .34));
}

.hero-fresh__card,
.skill-card {
  transition:
    transform .55s var(--ease-premium),
    border-color .35s ease,
    box-shadow .55s var(--ease-premium);
}

.hero-fresh__card:hover,
.skill-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(250, 207, 11, .55);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .36);
}

.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html:not(.has-js) .reveal {
  opacity: 1;
  transform: none;
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

@media (hover: none),
(pointer: coarse) {

  .service-card:hover,
  .project-card:hover,
  .story-card:hover,
  .testimonial-card:hover,
  .hero-fresh__card:hover,
  .skill-card:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sidebar,
  .mobile-header,
  .service-card,
  .project-card,
  .story-card,
  .testimonial-card,
  .button,
  .sidebar-cta,
  .mobile-cta {
    will-change: auto;
  }
}

/* CTA hierarchy update: preserve the existing layout while moving the resume action below Contact. */
.strategy-call-action {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.strategy-call-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(168, 255, 31, .18);
}

.strategy-call-action:focus-visible,
.resume-download:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.resume-cta-section {
  position: relative;
  background: var(--offwhite);
  color: var(--black);
  padding: clamp(56px, 7vw, 92px) clamp(28px, 4vw, 66px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  border-top: 1px solid var(--border-light);
}

.resume-cta-copy {
  max-width: 720px;
}

.resume-cta-section h2 {
  margin: 10px 0 14px;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.resume-cta-section p {
  margin: 0;
  max-width: 620px;
  color: var(--text-muted);
  line-height: 1.6;
}

.resume-download {
  min-width: min(100%, 220px);
  white-space: nowrap;
  border-color: var(--black);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.resume-download:hover {
  box-shadow: 0 18px 36px rgba(0, 0, 0, .12);
}

@media (max-width: 820px) {
  .mobile-cta {
    max-width: calc(100vw - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .resume-cta-section {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .resume-download {
    width: auto;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .mobile-cta {
    font-size: 12px;
    padding-inline: 14px;
  }

  .resume-cta-section {
    padding: 64px 18px;
  }

  .resume-download {
    width: 100%;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strategy-call-action {
    transition: none;
  }
}