: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;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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: 22px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: 30px 26px 26px;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium), border-color .3s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--lime), #bbf451);
  opacity: 0;
  transition: opacity .3s ease;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .09);
  border-color: rgba(0, 0, 0, .12);
}

.service-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

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

.service-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .04);
  color: var(--black);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.service-card:hover .service-icon-wrapper {
  background: var(--black);
  color: var(--lime);
  transform: scale(1.06);
}

.service-icon-wrapper svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2px;
}

.service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  letter-spacing: -.025em;
  font-weight: 800;
  line-height: 1.25;
}

.service-card p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 14.5px;
  margin: 0 0 20px;
  flex: 1;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, .08);
}

.service-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .038);
  color: #444;
  transition: background-color .25s ease, color .25s ease;
}

.service-card:hover .service-tag {
  background: rgba(168, 255, 31, .28);
  color: #111;
}

.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-line-track {
  position: absolute;
  top: 31px;
  left: 32px;
  right: calc(25% - 32px);
  height: 4px;
  z-index: 1;
  pointer-events: none;
}

.process-line-track::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.process-line-flow {
  position: absolute;
  inset: 0;
  height: 4px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(87, 143, 28, 0) 10%,
      rgba(120, 190, 35, 0.95) 40%,
      rgba(168, 255, 31, 1) 60%,
      rgba(250, 207, 11, 0.95) 80%,
      transparent 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(168, 255, 31, 0.85), 0 0 28px rgba(120, 190, 35, 0.6);
  animation: processLightFlow 3.5s linear infinite;
}

@keyframes processLightFlow {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

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

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

.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-line-track {
    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;
  transform: scale(0.98);
  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1), transform .6s cubic-bezier(0.16, 1, 0.3, 1), visibility .6s ease;
}

.project-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.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;
  overflow: visible;
}

.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);
  overflow: visible;
}

/* ---------- 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 {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: var(--card-width, clamp(130px, 42cqmin, 240px));
  min-height: var(--card-min-height, auto);
  padding: var(--card-padding-y, clamp(7px, 2.2cqmin, 16px)) var(--card-padding-x, clamp(10px, 2.8cqmin, 20px));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: clamp(10px, 2.4cqmin, 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);
  --hover-offset-x: 0px;
  --hover-offset-y: 0px;
}

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

.hero-fresh__card strong {
  color: var(--lime, #e8c20b);
  font-size: var(--card-title-size, clamp(11.5px, 3.4cqmin, 18px));
  line-height: var(--card-line-height, 1.12);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.hero-fresh__card span {
  margin-top: clamp(2px, 0.8cqmin, 6px);
  color: rgba(255, 255, 255, .78);
  font-size: var(--card-text-size, clamp(9px, 2.2cqmin, 13px));
  line-height: var(--card-line-height, 1.3);
  text-wrap: pretty;
}

.hero-fresh__card--top {
  top: var(--top-card-y);
  left: var(--top-card-x);
  transform: translate(calc(var(--top-card-offset-x) + var(--hover-offset-x, 0px)),
      calc(var(--top-card-offset-y) + var(--hover-offset-y, 0px)));
}

.hero-fresh__card--left {
  top: var(--left-card-y);
  left: var(--left-card-x);
  transform: translate(calc(var(--left-card-offset-x) + var(--hover-offset-x, 0px)),
      calc(var(--left-card-offset-y) + var(--hover-offset-y, 0px)));
}

.hero-fresh__card--right {
  top: var(--right-card-y);
  left: var(--right-card-x);
  transform: translate(calc(var(--right-card-offset-x) + var(--hover-offset-x, 0px)),
      calc(var(--right-card-offset-y) + var(--hover-offset-y, 0px)));
}

/* When the stage gets VERY small, use compact padding and
   smaller fonts but keep the description text visible. */
@container (max-height: 280px) {
  .hero-fresh__card span {
    display: block;
  }

  .hero-fresh__card {
    padding: 6px 9px;
    border-radius: 10px;
  }

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

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

/* ---------- 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);
  }
}



/* =========================================================
   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));
  }
}

/* =========================================================
   FLOATING CARD POSITION & SIZE CONTROLS

   HOW TO USE:
   To reposition or resize a floating card, edit ONLY the CSS
   variables in the matching breakpoint block below.

   Do NOT edit the card selectors (.hero-fresh__card--top, etc.).
   Do NOT add device-specific media queries for individual phones.

   POSITION variables (per card):
     --<card>-x        Horizontal position (% of stage width)
     --<card>-y        Vertical position   (% of stage height)
     --<card>-offset-x Fine-tune horizontal shift
                       (-50% = centre, -100% = right-align, or px)
     --<card>-offset-y Fine-tune vertical shift (small px values)

   SIZE variables (shared by all three cards):
     --card-width      Card width (use clamp() on mobile)
     --card-min-height  Minimum card height — NOT a fixed height;
                        the card grows naturally when text needs it
     --card-padding-x   Left/right internal spacing
     --card-padding-y   Top/bottom internal spacing
     --card-title-size  Font size for the bold title line
     --card-text-size   Font size for the description line
     --card-line-height Line height for both title and description

   QUICK REFERENCE:
     Increase Y %      → card moves DOWN
     Decrease Y %      → card moves UP
     Positive px offset → nudge RIGHT / DOWN
     Negative px offset → nudge LEFT / UP
     Increase --card-width → wider card
     Increase --card-padding-y → taller card (more breathing room)
     Increase --card-title-size → bigger title text
   ========================================================= */

/* FLOATING CARD CONTROLS — DESKTOP */
/* Edit only the variables below for screens 1025px and wider. */
.hero-fresh__stage {
  /* ---- Card dimensions ---- */
  --card-width: clamp(150px, 47cqmin, 245px);
  --card-min-height: auto;
  --card-padding-x: clamp(12px, 2.8cqmin, 22px);
  --card-padding-y: clamp(9px, 2.2cqmin, 18px);
  --card-title-size: clamp(13px, 3.4cqmin, 18px);
  --card-text-size: clamp(10px, 2.2cqmin, 13px);
  --card-line-height: 1.2;

  /* ---- Top card (Web Design) — centred above head ---- */
  --top-card-x: 45%;
  --top-card-y: 4%;
  --top-card-offset-x: -42%;
  --top-card-offset-y: 13px;

  /* ---- Left card (Automation) — left shoulder area ---- */
  --left-card-x: 10%;
  --left-card-y: 25%;
  --left-card-offset-x: -89px;
  --left-card-offset-y: 0px;

  /* ---- Right card (Operations) — right shoulder area ---- */
  --right-card-x: 105%;
  --right-card-y: 25%;
  --right-card-offset-x: calc(-95% + 8px);
  --right-card-offset-y: 0px;
}

/* FLOATING CARD CONTROLS — TABLET */
/* Edit only the variables below for screens 701px – 1024px. */
@media (min-width: 701px) and (max-width: 1024px) {
  .hero-fresh__stage {
    /* ---- Card dimensions ---- */
    --card-width: clamp(161px, 40cqmin, 230px);
    --card-min-height: 58px;
    --card-padding-x: clamp(10px, 2.6cqmin, 18px);
    --card-padding-y: clamp(8px, 2cqmin, 14px);
    --card-title-size: clamp(12px, 3.2cqmin, 16px);
    --card-text-size: clamp(9px, 2cqmin, 12px);
    --card-line-height: 1.2;

    /* ---- Top card (Web Design) ---- */
    --top-card-x: 50%;
    --top-card-y: 6%;
    --top-card-offset-x: -50%;
    --top-card-offset-y: -25px;

    /* ---- Left card (Automation) ---- */
    --left-card-x: 0%;
    --left-card-y: 25%;
    --left-card-offset-x: -65px;
    --left-card-offset-y: -10px;

    /* ---- Right card (Operations) ---- */
    --right-card-x: 98%;
    --right-card-y: 25%;
    --right-card-offset-x: calc(-65% + 6px);
    --right-card-offset-y: -10px;
  }
}

/* FLOATING CARD CONTROLS — MOBILE */
/* Edit only the variables below for screens 700px and narrower.
   All mobile phones share this single proportional layout.
   Do NOT add separate rules for individual iPhone models. */
@media (max-width: 700px) {
  .hero-fresh__stage {


    width: 100%;
    height: auto;
    max-width: 100%;


    /* ---- Card dimensions ---- */
    --card-width: clamp(100px, 28vw, 140px);
    --card-min-height: 45px;
    --card-padding-x: clamp(8px, 2.4vw, 12px);
    --card-padding-y: clamp(5px, 1.6vw, 9px);
    --card-title-size: clamp(11px, 3vw, 13px);
    --card-text-size: clamp(8.5px, 2.4vw, 10.5px);
    --card-line-height: 1.18;

    /* ---- Top card (Web Design) ---- */
    --top-card-x: 50%;
    --top-card-y: 25%;
    --top-card-offset-x: -50%;
    --top-card-offset-y: -90px;

    /* ---- Left card (Automation) ---- */
    --left-card-x: 4%;
    --left-card-y: 25%;
    --left-card-offset-x: -20px;
    --left-card-offset-y: -10px;

    /* ---- Right card (Operations) ---- */
    --right-card-x: 96%;
    --right-card-y: 25%;
    --right-card-offset-x: calc(-95% + 8px);
    --right-card-offset-y: -10px;
  }

  /* Mobile gutter & spacing */
  .hero-fresh {
    --hero-gutter: 32px;
    padding-bottom: 5px;
    margin-bottom: -2px;
  }

  /* Contact section adjustments */
  .cta-section {
    padding-top: 50px;
    padding-bottom: 100px;
    margin-top: 5px;
  }
}

/* =========================================================
   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 {
  --hover-offset-y: -7px;
  border-color: rgba(250, 207, 11, .55);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .36);
}

.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;
}

/* Sidebar & Nav Resume Trigger Buttons */
.side-nav-resume-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-resume-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1px solid var(--border-dark);
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.sidebar-resume-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--lime);
  color: var(--lime);
  transform: translateY(-2px);
}

.mobile-resume-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lime) !important;
}

/* Final Resume Call-To-Action Section below Contact */
.final-resume-cta {
  position: relative;
  background: var(--offwhite);
  color: var(--black);
  padding: clamp(60px, 8vw, 100px) clamp(28px, 4vw, 66px);
  border-top: 1px solid var(--border-light);
}

.final-resume-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.final-resume-cta__copy {
  max-width: 650px;
}

.final-resume-cta__copy h2 {
  margin: 12px 0 14px;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: .96;
  letter-spacing: -.045em;
}

.final-resume-cta__copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.final-resume-cta__action .button {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* Body lock states */
body.loader-open,
body.modal-open {
  overflow: hidden;
}

/* Cinematic Resume Transition Loader Overlay */
.resume-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.resume-loader-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.loader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 10, 15, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 1;
}

/* Curtains for split reveal effect */
.loader-curtain {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #090a0f;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.loader-curtain.curtain-top {
  top: 0;
  transform-origin: top;
}

.loader-curtain.curtain-bottom {
  bottom: 0;
  transform-origin: bottom;
}

.resume-loader-overlay.unveil .loader-curtain.curtain-top {
  transform: translateY(-100%);
}

.resume-loader-overlay.unveil .loader-curtain.curtain-bottom {
  transform: translateY(100%);
}

.resume-loader-overlay.unveil .loader-content {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.loader-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  width: 100%;
  max-width: 480px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.loader-brand {
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

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

.loader-brand-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.6);
}

/* Center Stage Graphic */
.loader-stage {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(168, 255, 31, 0.4);
}

.loader-pulse-ring.ring-1 {
  animation: spinRingClockwise 8s linear infinite;
}

.loader-pulse-ring.ring-2 {
  inset: -12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--lime);
  border-bottom-color: var(--lime);
  animation: spinRingCounter 6s linear infinite;
}

@keyframes spinRingClockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinRingCounter {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.loader-icon-box {
  position: relative;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 255, 31, 0.25);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(168, 255, 31, 0.15);
  overflow: hidden;
}

.loader-icon {
  width: 30px;
  height: 30px;
  color: var(--lime);
}

.loader-scan-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 10px var(--lime);
  animation: scanSweep 1.5s ease-in-out infinite alternate;
}

@keyframes scanSweep {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(60px);
  }
}

.loader-status {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loader-status-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.8);
  height: 16px;
}

.loader-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.loader-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #facf0b, #a8ff1f);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(168, 255, 31, 0.8);
  transition: width 0.08s linear;
}

.loader-percent {
  font-size: 26px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.03em;
  font-family: monospace, Inter, sans-serif;
}

/* Resume Pop-Up Modal */
.resume-modal {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
}

.resume-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.resume-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.resume-modal-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  margin: auto;
}

.resume-modal-card {
  position: relative;
  background: #111318;
  color: var(--white);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  padding: clamp(24px, 4vw, 40px);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

.resume-modal.open .resume-modal-card {
  transform: scale(1) translateY(0);
}

.resume-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s ease;
}

.resume-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.resume-modal-header {
  margin-bottom: 28px;
}

.resume-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 10px;
}

.tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}

.resume-modal-header h2 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 900;
  margin: 0 0 6px;
  letter-spacing: -0.04em;
}

.resume-modal-subtitle {
  margin: 0;
  color: #a0a0a0;
  font-size: 14px;
  line-height: 1.5;
}

.resume-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.resume-highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.resume-highlight-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.resume-highlight-box:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(168, 255, 31, 0.3);
}

.resume-highlight-box i {
  width: 22px;
  height: 22px;
  color: var(--lime);
  flex-shrink: 0;
  margin-top: 2px;
}

.resume-highlight-box strong {
  display: block;
  font-size: 13px;
  color: var(--white);
  margin-bottom: 4px;
}

.resume-highlight-box p {
  margin: 0;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.45;
}

.resume-file-banner {
  background: radial-gradient(circle at 10% 50%, rgba(168, 255, 31, 0.12), transparent 70%), rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 255, 31, 0.2);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.resume-file-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lime);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.resume-file-icon i {
  width: 24px;
  height: 24px;
}

.resume-file-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.resume-file-meta strong {
  font-size: 14px;
  color: var(--white);
  letter-spacing: -0.01em;
}

.resume-file-meta span {
  font-size: 12px;
  color: #999999;
}

.resume-modal-footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.resume-download-link {
  flex: 1;
  min-width: 220px;
  justify-content: center;
  background: var(--lime);
  color: var(--black);
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(168, 255, 31, 0.25);
  cursor: pointer;
}

.resume-preview-link {
  font-size: 13px;
  font-weight: 700;
  color: #b0b0b0;
  transition: color 0.2s ease;
  padding: 8px 12px;
}

.resume-preview-link:hover {
  color: var(--lime);
}

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

  .final-resume-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .final-resume-cta__action {
    width: 100%;
  }

  .final-resume-cta__action .button {
    width: 100%;
  }
}

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

  .resume-highlights-grid {
    grid-template-columns: 1fr;
  }

  .resume-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .resume-preview-link {
    text-align: center;
  }
}

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

  .strategy-call-action,
  .loader-pulse-ring,
  .loader-scan-bar {
    animation: none;
    transition: none;
  }
}