/* Yuva Portfolio - Main Styles - Exact Figma Layout */

@import 'variables.css';
@import 'components.css';

:host{
    font-family: var(--font-family) !important;
}
/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-family) !important;
}

body {
  font-family: var(--font-family) !important;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-primary);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul, ol {
  list-style: none;
}

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

button {
  font-family: inherit!important;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Layout */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.section {
  padding: var(--spacing-2xl) 0;
}

/* Navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--spacing-lg) var(--content-padding);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: background-color var(--transition-medium);
  transform: translateZ(0);  /* Force GPU acceleration for better fixed positioning on mobile */
  -webkit-backface-visibility: hidden;  /* Prevent flickering on iOS */
  backface-visibility: hidden;
}

.nav__logo {
  font-weight: var(--font-weight-light);
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-primary);
}

.nav__menu {
  display: flex;
  gap: 19px; /* Exact Figma spec */
}

.nav__link {
  font-size: 18px;  /* Was 14px - Figma: 18px */
  font-weight: var(--font-weight-regular);  /* Figma: 400 */
  line-height: 26.28px;  /* Figma line-height */
  position: relative;
  transition: all var(--transition-fast);
  /*padding: 0px 10px;*/
  width: 70px;
  display: flex;
  justify-content: center;
}

.nav__link--bordered {
  border: 2px solid var(--color-primary);
}

.nav__link--bordered:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.nav__link:hover {
  opacity: 1;
}

/* Hamburger Menu - Hidden on desktop */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10000;  /* Above menu so it stays clickable */
}

.nav__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger to X animation when menu is open */
.nav__hamburger.active .nav__hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.nav__hamburger.active .nav__hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav__hamburger.active .nav__hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Navigation on blue background pages */
.page-collection .nav__logo,
.page-collection .nav__link {
  color: var(--color-white);
}

.page-collection .nav__link--bordered {
  border-color: var(--color-white);
}

.page-collection .nav__link--bordered:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.page-collection .nav__hamburger-line {
  background-color: var(--color-white);
}

.page-collection .nav__menu {
  background-color: var(--color-primary);
}

.page-collection .nav__menu .nav__link {
  color: var(--color-white);
  border-color: var(--color-white);
}

.page-collection .nav__menu .nav__link:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Hero Section */
.hero {
  min-height: calc(100vh + 20px);  /* Extend past viewport to hide blue section below */
  min-height: calc(100dvh + 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-xl) var(--content-padding);
  background-color: var(--color-white);
  position: relative;
}

.hero__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1008px;
  max-width: 90%;
}

.hero__title img {
  width: 100%;
  height: auto;
  display: block;
}

.hero__bracket {
  font-size: var(--font-size-hero-bracket);
  font-weight: var(--font-weight-light);
  color: var(--color-primary);
  position: absolute;
}

.hero__bracket--hi {
  top: 108px;
  left: 0;
}

.hero__bracket--welcome {
  font-size: var(--font-size-hero-bracket-sm);
  top: 109px;
  left: 546px;
}

.hero__bracket--to-my {
  font-size: var(--font-size-hero-bracket-sm);
  top: 280px;  /* Adjusted for baseline alignment with FOLIO */
  left: 314px;
}

.hero__word {
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
  position: absolute;
}

.hero__word--port {
  font-size: var(--font-size-hero-port);
  top: 0;
  left: 98px;
  line-height: 0.73;
}

.hero__word--folio {
  font-size: var(--font-size-hero-folio);
  top: 199px;
  left: 476px;
  line-height: 0.73;
}

.hero__arrow {
  position: absolute;
  bottom: 80px;  /* Moved down from 100px for desktop view */
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-primary);
}

.hero__arrow svg {
  width: 20px;
  height: 40px;
  stroke: var(--color-primary);
  transition: transform 0.3s ease;
}

.hero__arrow:hover svg {
  transform: scale(1.1);
  animation-play-state: paused;
}

/* ===== Projects Section - Blue Background with Cards ===== */
.projects {
  background-color: var(--color-primary);
  padding: 50px 0;
  scroll-margin-top: 100px;  /* Offset for fixed nav when clicking arrow */
}

.projects__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.projects-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.project-card {
  position: relative;
  width: 23%;
  height: 708px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 41px 79px 41px;
  color: var(--color-white);
  text-decoration: none;
  transition: transform var(--transition-medium);
}

.project-card:hover {
  transform: translateY(-5px);
}

.project-card__border {
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--color-white);
  pointer-events: none;
}

.project-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 203px;
}

.project-card__number {
  font-size: 200px;  /* Was 150px - Figma: 200px */
  font-weight: var(--font-weight-light);  /* Figma: 300 */
  line-height: 292px;  /* Figma line-height */
  color: var(--color-white);
}

.project-card__name {
  font-size: 40px;  /* Was 29px - Figma: 40px */
  font-weight: var(--font-weight-regular);  /* Was 300, Figma: 400 */
  line-height: 58.4px;  /* Figma line-height */
  color: var(--color-white);
}

.project-card__arrow {
  font-size: 40px;
  color: var(--color-white);
  /*margin-top: 10px;*/
}

/* ===== About Section - White Background ===== */
.about-section {
  background-color: var(--color-white);
  padding: 80px 0;
}

.about {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.about__content {
  flex: 0 0 513px; /* Exact Figma width for text area */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about__title {
  font-size: var(--font-size-xl); /* 40px - Exact Figma spec */
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin: 0 0 12px 0 !important; /* Force exact spacing */
  line-height: 1 !important; /* Consistent tight spacing */
  padding: 0 !important; /* Remove any default padding */
}

.about__title-line {
  width: 118px; /* Exact Figma spec: קו כותרת about me */
  height: 2.5px; /* Exact Figma strokeWeight */
  background-color: var(--color-primary);
  margin: 0 0 20px 5px !important; /* Match tools spacing */
}

.about__description {
  font-size: var(--font-size-sm); /* 18px - Exact Figma spec */
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-sm); /* 26.28px - Exact Figma spec */
  color: var(--color-primary);
}

.about__description strong {
  font-weight: var(--font-weight-medium);
}

/* Tools Section */
.tools {
  display: flex;
  flex-direction: column;
  gap: 0; /* No extra gap - spacing handled by margins */
}

.tools__title {
  font-size: var(--font-size-xl); /* 40px - Exact Figma spec */
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin: 0 0 12px 0 !important; /* Force exact spacing */
  line-height: 1 !important; /* Remove extra line-height spacing */
  padding: 0 !important; /* Remove any default padding */
}

.tools__title-line {
  width: 118px; /* Exact Figma spec - match About title line */
  height: 2.5px;
  background-color: var(--color-primary);
  margin: 0 0 20px 5px; /* Match about spacing */
}

.tools__list {
  display: flex;
  gap: 41px; /* Exact Figma spec */
  margin-left: 5px; /* Figma: 5px spacer before icons */
}

.tools__list--secondary {
  margin-top: 43px; /* Exact Figma row gap */
  gap: 42px; /* Exact Figma spec for row 2 */
}

/* Tools Icon - Larger size per Figma */
.tools .icon-btn {
  width: var(--tools-icon-size); /* 46.5px */
  height: var(--tools-icon-size);
  min-width: var(--tools-icon-size);
  min-height: var(--tools-icon-size);
  max-width: var(--tools-icon-size);
  max-height: var(--tools-icon-size);
  border-width: var(--tools-icon-border); /* 1.875px */
  font-size: var(--tools-font-size); /* 37.5px */
  font-weight: var(--font-weight-light);
  padding: 5.25px; /* Figma: inner padding */
  box-sizing: border-box;
}

/* Tools Icon SVGs - constrain to fit */
.tools .icon-btn svg {
  width: 100%;
  height: 100%;
  max-width: 36px;
  max-height: 36px;
}

/* Icon Button */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  min-width: var(--icon-btn-size);
  min-height: var(--icon-btn-size);
  max-width: var(--icon-btn-size);
  max-height: var(--icon-btn-size);
  border: var(--icon-btn-border) solid var(--color-primary);
  font-size: 28px; /* Slightly bigger for LinkedIn/Facebook */
  color: var(--color-primary);
  overflow: hidden;
  flex-shrink: 0;
}

/* Icon hover animation removed */

.icon-btn--figma svg,
.icon-btn--icon svg {
  width: 65%;
  height: 65%;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
}

.icon-btn--figma svg {
  fill: var(--color-primary);
}

.icon-btn--icon svg {
  stroke: var(--color-primary);
}

/* Figma and icon hover animations removed */

/* Photo with Corner Brackets - Exact Figma specs */
.about__photo {
  flex: 0 0 auto;
  position: relative;
  width: 397px; /* Figma frame width */
  max-width: 100%; /* Responsive fallback */
  padding: 27px 24px; /* Figma: top/bottom 27px, left/right 24px */
}

.about__image {
  width: 100%;
  max-width: 348px; /* Figma image width */
  height: auto;
  aspect-ratio: 348 / 548; /* Maintains Figma proportions */
  object-fit: cover;
}

.corner-brackets {
  position: relative;
}

.corner-bracket {
  position: absolute;
  width: var(--corner-bracket-size);
  height: var(--corner-bracket-size);
}

.corner-bracket::before,
.corner-bracket::after {
  content: '';
  position: absolute;
  background-color: var(--color-primary);
}

.corner-bracket::before {
  width: var(--corner-bracket-size);
  height: var(--corner-bracket-stroke);
}

.corner-bracket::after {
  width: var(--corner-bracket-stroke);
  height: var(--corner-bracket-size);
}

.corner-bracket--top-left { top: 0; left: 0; }
.corner-bracket--top-left::before { top: 0; left: 0; }
.corner-bracket--top-left::after { top: 0; left: 0; }

.corner-bracket--top-right { top: 0; right: 0; }
.corner-bracket--top-right::before { top: 0; right: 0; }
.corner-bracket--top-right::after { top: 0; right: 0; }

.corner-bracket--bottom-left { bottom: 0; left: 0; }
.corner-bracket--bottom-left::before { bottom: 0; left: 0; }
.corner-bracket--bottom-left::after { bottom: 0; left: 0; }

.corner-bracket--bottom-right { bottom: 0; right: 0; }
.corner-bracket--bottom-right::before { bottom: 0; right: 0; }
.corner-bracket--bottom-right::after { bottom: 0; right: 0; }

/* Disable hover animation on about photo corner brackets */
.about__photo.corner-brackets:hover .corner-bracket::before,
.about__photo.corner-brackets:hover .corner-bracket::after {
  transform: none !important;
}

/* ===== Footer - Blue Background ===== */
.footer {
  background-color: var(--color-primary);
  padding: 30px var(--content-padding) 50px;
  min-height: 332px;
}

.footer__layout {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically center both sides */
  max-width: var(--container-width);
  margin: 0 auto;
  position: relative;
  min-height: 332px; /* Match CTA height */
}

/* Footer CTA - Image - Align to left edge */
.footer__cta {
  width: 739px;
  max-width: 100%;
  flex-shrink: 0;
}

.footer__cta img {
  width: 100%;
  height: auto;
  display: block;
}

.footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align to right */
  gap: 40px;
  margin-left: auto; /* Push to right edge */
  flex-shrink: 0;
}

.footer__social {
  display: flex;
  gap: 38px; /* Exact Figma spec - calculated from icon positions */
}

.footer__social .icon-btn {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Footer icon hover animation removed */

.footer__social .icon-btn--instagram svg {
  stroke: var(--color-white);
}

/* Instagram icon hover animation removed */

.footer__email {
  color: var(--color-white);
  font-size: var(--font-size-sm);
  position: relative;
  padding: 7px 0;
  font-weight: 200;
}

.footer__email::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.875px;
  background-color: var(--color-white);
}

/* ===== Collection Page Styles ===== */
.project-list {
  display: flex;
  flex-direction: column;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--content-padding);
  border-bottom: var(--border-width-thick) solid var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.project-item:first-child {
  border-top: var(--border-width-thick) solid var(--color-white);
}

.project-item:hover {
  padding-left: var(--spacing-md);
}

.project-item__name {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
}

.project-item__year {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* Popup Container */
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-popup);
}

.popup-image {
  position: absolute;
  width: 300px;
  height: auto;
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--transition-medium);
  pointer-events: none;
}

.popup-image.visible {
  opacity: 1;
  transform: scale(1);
}

.popup-image.stacked {
  opacity: 0.6;
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE STYLES ===== */

@media (max-width: 1439px) {
  :root {
    --content-padding: 60px;
    --font-size-hero-port: 140px;
    --font-size-hero-folio: 140px;  /* Matches PORT - both scale together */
  }

  .hero__title {
    width: 700px;
    max-width: 90%;
  }

  .project-card {
    width: 20%;
    height: 530px;
    padding: 0 30px 60px 30px;
  }

  .project-card__number {
    font-size: 150px;  /* Scaled from 200px for 1439px viewport */
  }

  .project-card__name {
    font-size: 32px;  /* Scaled from 40px for 1439px viewport */
  }

  .footer__cta {
    width: 550px;
  }
}

@media (max-width: 1024px) {
  :root {
    --content-padding: 40px;
  }

  .projects-grid {
    flex-wrap: wrap;
    gap: 15px;
  }

  .project-card {
    width: calc(50% - 10px);
    height: 450px;
    padding: 0 25px 50px 25px;
  }

  .project-card__number {
    font-size: 120px;  /* Scaled from 200px for 1024px viewport */
  }

  .project-card__name {
    font-size: 28px;  /* Scaled from 40px for 1024px viewport */
  }

  .about {
    flex-direction: column;
    align-items: center;
  }

  .about__content {
    flex: 1;
    max-width: 600px;
    text-align: center;
    order: 2;
  }

  .about__title-line {
    display: none; /* Hide on tablet/medium screens */
  }

  .tools__title-line {
    display: none; /* Hide on tablet/medium screens */
  }

  .tools__title {
    margin-bottom: 20px !important; /* Increased gap to icons on medium screens */
  }

  .about__photo {
    order: 1;
  }

  .tools__list {
    justify-content: center;
  }

  .footer__layout {
    flex-direction: column;
    gap: 40px;
    justify-content: center;
  }

  .footer__cta {
    width: 100%;
    margin-left: 0;
  }

  .footer__right {
    align-items: flex-start;
    margin-left: 0;
  }
}

@media (max-width: 810px) {
  :root {
    --content-padding: 24px;
  }

  /* ===== NAVIGATION - FORCE HAMBURGER ===== */
  .nav {
    padding: var(--spacing-sm) var(--content-padding) !important;
    position: fixed !important;  /* Ensure always fixed */
    top: 0 !important;  /* Always at top */
    visibility: visible !important;  /* Always visible */
    opacity: 1 !important;  /* Fully opaque */
    align-items: center !important;  /* Center logo and hamburger vertically */
  }

  .nav__hamburger {
    display: flex !important;
  }

  .nav__menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;  /* Force full viewport width */
    height: 100vh !important;  /* Force full viewport height */
    height: 100dvh !important;  /* Use dynamic viewport height on mobile */
    background-color: var(--color-white) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 9999 !important;  /* Ensure menu is always on top */
    overflow-y: auto !important;  /* Allow menu to scroll independently */
    -webkit-overflow-scrolling: touch !important;  /* Smooth scrolling on iOS */
  }

  .nav__menu.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav__menu li {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .nav__menu.active li {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .nav__menu.active li:nth-child(1) { transition-delay: 0.1s; }
  .nav__menu.active li:nth-child(2) { transition-delay: 0.2s; }
  .nav__menu.active li:nth-child(3) { transition-delay: 0.3s; }

  .nav__menu .nav__link {
    font-size: 24px !important;
    width: auto !important;
    padding: 10px 30px !important;
  }

  .nav__logo {
    font-size: 20px !important;
    line-height: 1.0 !important;  /* Exact 20px height to match hamburger */
  }

  /* Collection page mobile menu - keep blue background with white text */
  .page-collection .nav__menu {
    background-color: var(--color-primary) !important;
  }

  .page-collection .nav__menu .nav__link {
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
  }

  /* ===== HERO - SCALE AND CENTER ===== */
  .hero {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-top: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;  /* Prevent horizontal scroll */
  }

  .hero__title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 700px !important;
  }

  .hero__arrow {
    bottom: 40px !important;
  }

  /* ===== PROJECTS - STACK VERTICALLY ===== */
  .projects-grid {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .project-card {
    width: 90% !important;
    max-width: 350px !important;
    height: auto !important;
    min-height: 180px !important;
    padding: 25px var(--content-padding) !important;  /* Use consistent margins */
    overflow: visible !important;
  }

  .project-card__number {
    font-size: 80px !important; /* Bigger for tablet */
    line-height: 1.2 !important;
  }

  .project-card__name {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .project-card__arrow {
    font-size: 20px !important;
  }

  /* ===== ABOUT SECTION ===== */
  .about__content {
    order: 1 !important;  /* Text/tools come first on mobile */
  }

  .tools__title-line {
    display: none !important; /* Hide on mobile */
  }

  .about__photo {
    width: 100% !important;
    max-width: 280px !important;
    order: 2 !important;  /* Image comes second on mobile */
  }

  /* ===== FOOTER - TRANSFORM SCALE (like hero) ===== */
  .footer {
    padding: 40px var(--content-padding) 50px !important;
    min-height: auto !important;
    overflow: visible !important;  /* v6: Changed from hidden to prevent clipping CTA */
  }

  /* v12: Remove container padding to give footer CTA full viewport width */
  .footer .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }

  .footer__layout {
    min-height: auto !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: center !important;
    max-width: none !important;  /* v12: Remove 1440px constraint */
    width: 100% !important;  /* v14: Ensure full width for centering */
    justify-content: center !important;
  }

  .footer__cta {
    width: 100% !important;
    max-width: 500px !important;
    margin-left: 0 !important;
  }

  .footer__right {
    padding: 0 24px !important;  /* v12: Restore padding for social/email */
    margin-left: 0 !important;
    margin-bottom: 20px !important;
    align-items: center !important;
  }

  .popup-container {
    display: none !important;
  }
}

@media (max-width: 480px) {
  :root {
    --content-padding: 16px;
  }

  /* Collection page mobile menu - keep blue background with white text */
  .page-collection .nav__menu {
    background-color: var(--color-primary) !important;
  }

  .page-collection .nav__menu .nav__link {
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
  }

  /* v12: Remove footer container padding (same as 810px) */
  .footer .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;  /* v13: Was missing! */
  }

  /* ===== HERO - SLIGHTLY SMALLER ON VERY SMALL SCREENS ===== */
  .hero__title {
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 500px !important;
  }

  /* ===== FOOTER ===== */
  .footer__cta {
    max-width: 400px !important;
  }

  .footer__right {
    padding: 0 16px !important;  /* v12: Match mobile --content-padding */
    margin-top: 20px !important;  /* v14: Move social icons down on mobile */
  }

  .hero__arrow {
    bottom: 30px !important;
  }

  .hero__arrow svg {
    width: 15px !important;
    height: 32px !important;
  }

  /* ===== PROJECTS - SMALLER CARDS ===== */
  .project-card {
    width: 95% !important;
    min-height: 160px !important;
    padding: 20px var(--content-padding) !important;  /* Use consistent margins */
  }

  .project-card__number {
    font-size: 70px !important; /* Bigger for mobile */
  }

  .project-card__name {
    font-size: 18px !important;
  }

  .project-card__arrow {
    font-size: 16px !important;
  }

  /* About section mobile improvements */
  .about-section {
    padding: 50px 0;
  }

  .about__content {
    max-width: 100%;
    gap: 30px;
    order: 1;  /* Text/tools come first on mobile */
    text-align: center;  /* Center align text on mobile */
  }

  .about__title {
    font-size: 28px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .about__title-line {
    display: none !important; /* Hide on mobile */
  }

  .about__description {
    font-size: 15px;
    line-height: 1.6;
  }

  .about__photo {
    max-width: 280px;
    padding: 20px var(--content-padding);
    order: 2;  /* Image comes second on mobile */
  }

  .corner-bracket {
    width: 35px;
    height: 35px;
  }

  .corner-bracket::before { width: 35px; }
  .corner-bracket::after { height: 35px; }

  /* Tools section mobile */
  .tools__title {
    font-size: 28px !important;
    margin: 0 0 20px 0 !important; /* Increased gap to icons on mobile */
    padding: 0 !important;
    line-height: 1 !important;
  }

  .tools__title-line {
    display: none !important; /* Hide on mobile */
  }

  .tools__list {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .tools__list--secondary {
    margin-top: 20px;
    gap: 20px;
  }

  .tools .icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    font-size: 24px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
    font-size: 18px; /* Bigger for mobile */
  }

  /* Footer 480px - just scale down sizes from 810px */
  .footer {
    padding: 30px var(--content-padding) 40px;
  }

  .footer__layout {
    gap: 30px;
  }

  .footer__social {
    gap: 20px;
  }

  .footer__social .icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .footer__email {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}