/* ------- Tokens ------- */
:root{
  --bg:#0b0b0b;
  --text:#e8e8e8;
  --muted:#ffffffb3;
  --line:#ffffff14; /* hairline */
  --soft:#121212;
  --brand:#fff;
  --shadow:0 8px 30px rgba(0,0,0,.45);

  /* type scale (fluid) */
  --h1-min: 2.6rem;
  --h1-max: 8rem;
  --h2: clamp(1.6rem, 2.2vw, 2.2rem);
  --h3: clamp(1.1rem, 1.6vw, 1.35rem);
  --lede: clamp(1rem, 1.5vw, 1.2rem);
  --row: clamp(1rem, 1.8vw, 1.35rem);

  --radius: 1.1rem;
}


/* ------- Base ------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.page::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.06; mix-blend:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
}

a{ color:inherit; text-decoration:none }
a:hover{ color:#181010 }

/* ------- Layout ------- */
.container{ max-width:1240px; margin-inline:auto; padding:0 24px }
.section{ padding:88px 0 }
.section-border{ border-bottom:1px solid var(--line) }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px;
}

/* === Clean, Fully White Header === */
.elena-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: #ffffff;                   /* pure white base */
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.elena-header.is-solid {
  background: #ffffff;                   /* stays white on scroll */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border-color: transparent;
}


/* Layout */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand */
.brand {
  font: 900 20px/1 "Outfit", Inter, sans-serif;
  color: #111;
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color .3s ease;
}
.brand:hover { color: var(--blue2, #473003); }

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  transition: opacity .3s ease;
}
.nav-links a {
  font: 600 13px/1 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #222;
  text-decoration: none;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--blue2, #473003);
  transform: scaleX(0);
  transition: transform .25s ease;
  transform-origin: right;
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Right-side buttons */
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.btn-cv {
  padding: 6px 12px;
  border: 2px solid var(--blue2, #473003);
  border-radius: 10px;
  font: 700 12px/1 Inter, sans-serif;
  color: var(--blue2, #473003);
  text-decoration: none;
  transition: all .3s ease;
}
.btn-cv:hover {
  background: var(--blue2, #52402f);
  color: #fff;
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  width: 22px;
  height: 2px;
  background: #222;
  border-radius: 2px;
  transition: all .3s ease;
}

/* Mobile menu open animation */
.burger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Responsive */
@media (max-width: 840px) {
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 70vw;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    transition: right .4s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.08);
  }
  .nav-links.open { right: 0; }

  .burger { display: flex; }
}


/* ===== Elena-style HERO ===== */
:root{
  --elena-bg: #f2f2f2;
  --elena-text: #0b0b0b;
  --elena-line: #00000012;
}

/* ===== Hero: smaller, higher, so name + photo + eyebrow fit in first view ===== */
.elena-hero{
  background: #ffffff;              /* light canvas like the screenshot */
  color: #0b0b0b;
  padding: 52px 16px 24px;          /* was larger -> reduced */
  border-bottom: 1px solid #00000012;
  text-align: center;
}

.elena-hero__wrap{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 0;                    
  padding-bottom: 0;
}

.elena-name{
  pointer-events: none;
  line-height: .84;
  font-family: "Outfit", Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.elena-name__line{
  font-size: clamp(72px, 12.5vw, 150px);   
}
.elena-name__line + .elena-name__line{ margin-top: -0.12em; }

.elena-card{
  position: relative;
  margin: 0 auto;
  width: min(360px, 66vw);           
  aspect-ratio: 4 / 5;
  transform: translateY(6px) rotateZ(-2.2deg); 
  z-index: 3;
}
.elena-card__img{
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #00000012;
  box-shadow:
    0 18px 36px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.06);
}

.elena-eyebrow{
  margin: 10px 0 0;                  
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ===== Section bar like the demo ===== */
.elena-secHead{
  background:#ffffff;
  border-top:1px solid #00000012;
}
.elena-secBar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 24px 0;
  border-bottom:1px solid #00000012;
}
.elena-secBar__title{
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0b0b0b;
}
.elena-secBar__cta{
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0b0b0b;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
}

/* Continuous bouncing arrow */
@keyframes elena-bounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.elena-secBar__arrow{
  display:inline-block;
  animation: elena-bounceY 1.25s ease-in-out infinite;
}
.elena-secBar__cta:hover .elena-secBar__arrow{
  animation-duration: .9s;
}

/* ===== Projects slider ===== */
.elena-cardP{
  flex: 0 0 50vw;              /* smaller width than before (was 60vw) */
  max-width: 420px;            /* hard cap width */
  min-width: 280px;            /* keeps it usable on mobile */
  display: grid;
  grid-template-rows: auto auto; 
  gap: 12px;
  scroll-snap-align: center;
  opacity: .7;
  transform: translateY(8px) scale(.985);
  transition: opacity .35s ease, transform .35s ease;
}
.elena-cardP.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (min-width: 1100px){
  .elena-cardP{ flex-basis: 46vw; }
}
@media (max-width: 640px){
  .elena-cardP{ flex-basis: 82vw; }
}

.elena-cardP__imgWrap{
  position: relative;
  inline-size: 100%;
  aspect-ratio: 3 / 4;           /* portrait, but smaller ratio */
  max-block-size: 360px;         /* cap so it’s not huge */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #00000012;
  box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}
.elena-cardP__img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(35%);
  transform: scale(1.02);
  transition: filter .4s ease, transform .4s ease;
}
.elena-cardP:hover .elena-cardP__img{
  filter: grayscale(0%);
  transform: scale(1.04);
}

/* for logos or verticals → add class 'is-contain' in JS */
.elena-cardP__img.is-contain{
  object-fit: contain;
  background: #fff;
  padding: 24px;
}

/* VIEW bubble */
.elena-cardP__view{
  position: absolute;
  left: 50%; top: 50%;
  width: 88px; height: 88px;
  margin-left: -44px; margin-top: -44px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b0b0b;
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
  z-index: 2;
}
.elena-cardP:hover .elena-cardP__view{
  opacity: 1;
  transform: scale(1);
}

/* meta row */
.elena-cardP__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.elena-cardP__title{
  margin: 0;
  font: 600 16px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .01em;
  max-width: 75%;
  overflow-wrap: break-word;
}
.elena-cardP__tag{
  text-transform: uppercase;
  letter-spacing: .2em;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  color: #6d6d6d;
  white-space: nowrap;
}

/* slider controls */
.elena-slider__dots{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.elena-dot{
  width: 6px; height: 6px; border-radius: 999px;
  background: #00000033; border: none; padding: 0;
  transform: scale(1);
  transition: transform .25s ease, background .25s ease;
  cursor: pointer;
}
.elena-dot.is-active{ background:#0b0b0b; transform: scale(1.4); }

.elena-slider{ position: relative; }
.elena-slider__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  border-top: 1px solid #00000012;
  border-bottom: 1px solid #00000012;
  display: grid;
  align-items: center;
}
.elena-slider__track{
  display: flex;
  align-items: stretch;
  gap: 32px;
  padding: 0 10vw;
  will-change: transform;
  transform: translate3d(0,0,0);
  scroll-snap-type: x proximity;
}


/* ===== Approach: full-bleed image reveal + floating title ===== */
:root{
  --ap-bg:#ffffff;
  --ap-ink:#0b0b0b;
}

.approach-reveal{
  position: relative;
  background: var(--ap-bg);
  color: var(--ap-ink);
}
.approach-reveal__sticky{
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  border-top: 1px solid #00000012;
  border-bottom: 1px solid #00000012;
}

/* FULL BLEED: remove “container” feel */
.approach-reveal--full .approach-reveal__inner{
  width: 100vw; max-width: 100vw; margin: 0; position: relative;
}
.approach-reveal--full .approach-figure{
  border-radius: 0; border: none; box-shadow: none;
}

/* floating title over the image */
/* Floating title — clean & aesthetic */
.ap-title{
  position: absolute;
  top: clamp(20px, 5vh, 48px);
  left: 50%; 
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  font-family: "Outfit", Inter, system-ui, sans-serif; /* modern tall font */
  font-weight: 600;                                    /* not too bold */
  font-size: clamp(26px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ap-ink);                                /* pure text, no bg */
  background: none;                                    /* removed white chip */
  backdrop-filter: none;
  padding: 0;
  --fp: 0;
  transform: translate(-50%, calc((1 - var(--fp)) * -36px));
  opacity: clamp(calc(.7 + var(--fp)*.3), .7, 1);
  animation: ap-bob 6s ease-in-out infinite;           /* subtle, slower bob */
}
@keyframes ap-bob{
  0%,100%{ translate: 0 0 }
  50%    { translate: 0 4px }
}


/* image reveal mask (driven by --ap-p set in JS) */
.approach-figure{ position: relative }
.approach-img{
  display:block; width:100%; height:auto;
  --ap-p: 0;
  clip-path: inset(0 calc((1 - var(--ap-p)) * 100%) 0 0 round 0);
  transition: clip-path .06s linear;
}

/* labels row under image */
.approach-labels{
  position: absolute; inset: auto 0 24px 0;
  display: grid; place-items: center; pointer-events: none;
}
.approach-labels::before{
  content:""; position:absolute; top:-12px; left:0; width:100%; height:1px; background:#00000012;
}
.ap-label{
  position: absolute; bottom: 0; translate: -50% 0;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color:#6b6b6b; opacity:.35; filter: blur(.2px);
  transition: color .25s ease, opacity .25s ease, translate .25s ease;
}
.ap-label.is-on{ color: var(--ap-ink); opacity: 1; translate: -50% -4px; }

@media (max-width: 640px){
  .ap-title{ padding: 6px 10px; }
  .approach-labels{ inset: auto 0 16px 0; }
  .ap-label{ font-size: 11px; letter-spacing: .16em; }
}



/* ===== Contact (Pinned + Falling Text + Animated BG) ===== */
:root{
  --cf-bg: #ffffff;        /* section base */
  --cf-ink:#0b0b0b;        /* text color */
  --cf-ac1:#ededed;        /* gradient 1 */
  --cf-ac2:#ffffff;        /* gradient 2 */
}

.elena-contactFall{
  position: relative;
  background: var(--cf-bg);
  color: var(--cf-ink);
  /* height gets set by JS to allow scroll-through motion */
}
.elena-contactFall__sticky{
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  border-top: 1px solid #00000012;
  border-bottom: 1px solid #00000012;
}

/* Animated background */
.contact-bg{
  position:absolute; inset:0; overflow:hidden;
}
.bg-wave{
  position:absolute; inset:-20% -10%;
  background:
    radial-gradient(120% 60% at 50% 110%, var(--cf-ac1) 0%, transparent 60%),
    radial-gradient(120% 60% at 50% -10%, var(--cf-ac2) 0%, transparent 60%),
    conic-gradient(from var(--rot,0deg) at 50% 50%, #ffffff00 0 25%, #ffffff0f 25% 50%, #ffffff00 50% 75%, #ffffff10 75% 100%);
  filter: saturate(105%);
  animation: cf-rotate 18s linear infinite;
}
@keyframes cf-rotate{ to{ --rot: 360deg; } }

.bg-noise{
  position:absolute; inset:0; opacity:.055; mix-blend:overlay; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

/* Content layout */
.contact-inner{
  position: relative; z-index: 1;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
}

/* Falling elements: base state is slightly above with blur; JS drives progress */
[data-fall]{
  --p: 0;                  /* progress 0→1 set by JS */
  --delay: 0;              /* per-element stagger (s) set by JS */
  transform: translate3d(0, calc(-120px * (1 - var(--p))), 0);
  opacity: clamp(var(--p), 0, 1);
  filter: blur(calc(6px * (1 - var(--p))));
  transition: transform .12s linear, filter .12s linear, opacity .12s linear;
  will-change: transform, filter, opacity;
}

/* Type + button style */
.fall-title{
  margin:0 0 8px;
  font: 800 clamp(30px, 6vw, 64px)/1.02 Inter, system-ui, sans-serif;
  letter-spacing:-.01em;
}
.fall-lede{
  margin:0 0 22px;
  color:#2c2c2c;
  font: 400 clamp(14px,1.6vw,18px)/1.6 Inter, system-ui, sans-serif;
}
/* Outlined falling button */
.fall-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800; letter-spacing:.02em;
  background:transparent;                /* no fill */
  color:var(--cf-ink);                   /* text matches your ink color */
  border:2px solid var(--cf-ink);        /* visible border */
  box-shadow:none;
  position:relative;
  overflow:hidden;
  transition: color .25s ease, border-color .25s ease;
}

/* animated gradient border hover */
.fall-btn::before{
  content:"";
  position:absolute; inset:0; border-radius:14px;
  padding:2px; pointer-events:none;
  background:linear-gradient(135deg, #0b0b0b, #666); /* dark gradient */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; 
          mask-composite:exclude;
  opacity:0; transition:opacity .3s ease;
}
.fall-btn:hover::before{ opacity:1; }

/* text hover effect */
.fall-btn:hover{
  color:#fff;
  border-color:transparent;
  background:#0b0b0b;
}


/* Extra flair: tiny settle at the end (when progress ~1, add a pop) */
.elena-contactFall__sticky[data-settle="1"] .fall-btn{
  animation: cf-pop .38s ease-out both;
}
@keyframes cf-pop{
  0%{ transform: scale(.98) }
  60%{ transform: scale(1.02) }
  100%{ transform: scale(1) }
}

/* Mobile tweaks */
@media (max-width: 640px){
  .fall-title{ line-height: 1.06 }
}

/* Footer base */
.site-footer{
  border-top: 1px solid #00000012;
  background:#f7f7f7;
  padding: 40px 24px;
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

/* Stronger contrast for Elena */
.footer-brand{
  font: 600 14px/1 Inter, system-ui, sans-serif;
  letter-spacing: .02em;
  margin: 0 0 6px;
}
.footer-name{
  font-weight: 800;
  color:#000; /* darker for contrast */
}
.footer-tagline{
  margin: 0;
  font: 400 13px/1.5 Inter, system-ui, sans-serif;
  color: #555;
}

/* Nav */
.footer-nav a{
  font: 500 13px/1.2 Inter, system-ui, sans-serif;
  color:#333;
  text-decoration:none;
  transition: color .25s ease, transform .25s ease;
}
.footer-nav a:hover{
  color:#000;
  transform: translateY(-2px);
}

/* Socials as circular buttons */
.footer-social{
  display:flex; gap:20px;
}
.footer-social a{
  color:#333;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:2px solid #333;
  border-radius:50%;
  font-weight:700;
  text-transform:uppercase;
  font-size: 12px;
  transition: all .3s ease;
}
.footer-social a:hover{
  color:#fff;
  background:#333;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.footer-social svg{
  width:20px; height:20px;
}


.footer-social a[aria-label="Download CV"]{
  border:1px solid #333;
  border-radius:6px;
  padding:4px 10px;
  font-weight:600;
  transition: all .25s ease;
}
.footer-social a[aria-label="Download CV"]:hover{
  background:#333;
  color:#fff;
  transform: translateY(-2px);
}


/* Mobile */
@media(max-width:768px){
  .footer-inner{ flex-direction: column; align-items:center; text-align:center; }
  .footer-nav{ justify-content:center; }
  .footer-social{ justify-content:center; }
}



/* =========================================================
   RESPONSIVE — GLOBAL MOBILE ENHANCEMENTS
   Works for index.html, about.html, and project.html
   ========================================================= */

@media (max-width: 900px) {

  /* === HEADER === */
  .header-inner {
    padding: 14px 5vw;
  }

  /* === BURGER BUTTON === */
  .burger {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 22px;
    position: relative;
    z-index: 100;
  }

  .burger span {
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--text);
    left: 0;
    transition: all 0.3s ease;
  }

  .burger span:nth-child(1) { top: 0; }
  .burger span:nth-child(2) { top: 9px; }
  .burger span:nth-child(3) { top: 18px; }

  /* Animate burger → X */
  .burger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
  }
  .burger.active span:nth-child(2) { opacity: 0; }
  .burger.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 9px;
  }

  /* === MOBILE NAVIGATION === */
 /* === MOBILE NAVIGATION (with smooth fade + slide) === */
.nav {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 64px;
  right: 6vw;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 0;
  z-index: 99;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* When open — fade in & slide down */
.nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Animate individual links for a “staggered” reveal */
.nav a {
  display: block;
  margin: 10px 18px;
  color: var(--text);
  text-align: right;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
}

.nav.open a {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: small delay between links for a cascading effect */
.nav.open a:nth-child(1) { transition-delay: 0.05s; }
.nav.open a:nth-child(2) { transition-delay: 0.1s; }
.nav.open a:nth-child(3) { transition-delay: 0.15s; }
.nav.open a:nth-child(4) { transition-delay: 0.2s; }


  /* === HERO SECTION === */
  .pr-hero {
    padding: 12vh 5vw 8vh;
  }
  .pr-hero h1 {
    font-size: 2rem;
  }
  .hero-bigtext {
    font-size: 35vw;
    right: -15%;
  }
  .pr-hero p {
    font-size: 0.95rem;
  }

  /* === GENERAL SECTIONS === */
  .pr-block {
    padding: 5vh 5vw;
  }
  .pr-block h3 {
    font-size: 1.2rem;
  }
  .pr-block p {
    font-size: 0.95rem;
  }

  /* === SPLIT & GALLERY === */
  .split {
    flex-direction: column !important;
  }
  .gallery {
    grid-template-columns: 1fr;
  }

  /* === CAROUSEL === */
  .carousel__arrow--prev { left: 6px; }
  .carousel__arrow--next { right: 6px; }

  /* === VIDEO BLOCK === */
  .pr-video {
    max-width: 100%;
    border-radius: 10px;
  }

  /* === NEXT PROJECT SECTION === */
  .next-project {
    padding: 8vh 5vw;
  }
  .next-project a {
    padding: 12px 30px;
  }
  .next-project h4 {
    font-size: 1rem;
  }

  /* === ABOUT PAGE === */
  .about-content {
    flex-direction: column;
    text-align: center;
  }
  .about-text {
    font-size: 0.95rem;
    padding: 0 5vw;
  }
  .ad-chips {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* === INDEX / HOME GRID === */
  .project-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .project-card {
    padding: 20px;
  }

  /* === FOOTER === */
  .footer-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .social a {
    margin: 0 6px;
  }
}

/* === EXTRA SMALL DEVICES (phones <480px) === */
@media (max-width: 480px) {
  .pr-hero h1 {
    font-size: 1.8rem;
  }
  .pr-hero p,
  .pr-block p,
  .about-text {
    font-size: 0.9rem;
  }
  .next-project h4 {
    font-size: 0.95rem;
  }
}