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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mockup-content {
  padding: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 820px) {

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

  .sidebar {
    display: none;
  }

  main {
    margin-left: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .button {
    width: 100%;
  }

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

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

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

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


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

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

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

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

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

  .skill-one {
    width: 48%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.lightbox-open {
  overflow: hidden;
}

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

  .project-lightbox {
    padding: 12px;
  }

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

  .lightbox-media {
    height: 68dvh;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   How it works (so future edits stay predictable):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   All phones — manual card & section positioning
   Covers all phone viewports up to 480px wide.
   Adjust translate(X, Y) to nudge cards.
     → positive X = move right   → negative X = move left
     → positive Y = move down    → negative Y = move up
   ========================================================= */
@media (max-width: 480px) {

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

  .hero-fresh__stage {
    overflow: visible;
  }

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

  /* Force card details to stay visible (override @container hide rules) */
  .hero-fresh__card span {
    display: block !important;
  }

  .hero-fresh__card {
    padding: clamp(9px, 2.9cqmin, 20px) clamp(11px, 3.2cqmin, 23px) !important;
  }

  .hero-fresh__card--top {
    translate: 70px -10px;
  }

  .hero-fresh__card--left {
    translate: -40px -80px;
    /* ← CHANGE THESE VALUES to move the Automation card */
  }

  .hero-fresh__card--right {
    translate: 10px -155px;
    /* ← CHANGE THESE VALUES to move the Operations card */
  }

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

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