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

  .hero-fresh__visual {
    flex: 0 0 auto;
    min-height: 0;
    margin-top: clamp(18px, 3.5vh, 36px);
  }

  /* DETERMINISTIC STAGE.
     The stage carries container-type: size, so it can never take height
     from its own contents. Its height must therefore come from something
     definite. A percentage of .hero-fresh__visual is NOT definite (that
     parent is a flex item in a container with only min-height), which is
     exactly what iOS Safari refuses to resolve while Chrome DevTools and
     the Simulator resolve it anyway.

     So: height comes straight from the viewport, width follows the ratio.
     No percentage heights, no max-height: 100%. Identical on every engine. */
  .hero-fresh__stage {
    --stage-h: clamp(260px, 52svh, 460px);
    aspect-ratio: auto;
    height: var(--stage-h);
    width: min(100%, calc(var(--stage-h) * var(--stage-ratio)));
    max-width: 100%;
    max-height: none;
  }
}

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

  .hero-fresh__stage {
    --stage-h: clamp(320px, 56svh, 560px);
  }
}

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

  /* same rule as above: viewport-driven height, ratio-driven width */
  .hero-fresh__stage {
    --stage-h: clamp(190px, 62svh, 380px);
    aspect-ratio: auto;
    height: var(--stage-h);
    width: min(100%, calc(var(--stage-h) * var(--stage-ratio)));
    max-width: 100%;
    max-height: none;
  }
}

/* =========================================================
   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 {
    /* Height from the viewport, width from the ratio. Inherited from the
       stacked block above; restated here only to tune the phone value. */
    --stage-h: clamp(250px, 48svh, 420px);

    /* ---- Card dimensions — sized from the STAGE (cqw), not the viewport,
       so cards and portrait always shrink together ---- */
    --card-width: clamp(96px, 44cqw, 150px);
    --card-min-height: 0;
    --card-padding-x: clamp(7px, 4cqw, 12px);
    --card-padding-y: clamp(5px, 2.6cqw, 9px);
    --card-title-size: clamp(10.5px, 4.6cqw, 13px);
    --card-text-size: clamp(8.5px, 3.6cqw, 10.5px);
    --card-line-height: 1.18;

    /* ---- POSITIONS: 100% percentage-based. No fixed px offsets.
       A px offset mixed with a % position is what let the top card fly
       onto the buttons when Safari sized the stage differently. ---- */

    /* Top card (Web Design) — centred, inside the 0–16.6% headroom band,
       so it can never reach the face. */
    --top-card-x: 50%;
    --top-card-y: 1%;
    --top-card-offset-x: -50%;
    --top-card-offset-y: 0%;

    /* Left card (Automation) — flush left, ear height */
    --left-card-x: 0%;
    --left-card-y: 27%;
    --left-card-offset-x: 0%;
    --left-card-offset-y: 0%;

    /* Right card (Operations) — flush right, ear height.
       44% + 44% = 88%, so the two can never touch each other. */
    --right-card-x: 100%;
    --right-card-y: 27%;
    --right-card-offset-x: -100%;
    --right-card-offset-y: 0%;
  }

  /* Mobile gutter & spacing */
  .hero-fresh {
    --hero-gutter: 26px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    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;
  }
}