:root {
  --red: #ff5a49;
  --orange: #ffa800;
  --blue: #4db1ff;
  --green: #37c56b;
  --gray:#71717a;
  --black: #181818;
}

* { box-sizing: border-box; }

/* fill the viewport & prevent scroll */
html, body { height: 95vh;
}

body {
  margin: 0;
  background:#f6f6f6; color:var(--black);
  font-family: Inter, system-ui, Arial, sans-serif;
}
.homebody{
  padding: 7vh 6vw;
  max-width: 90vw;
  margin: 0 auto;
  overflow: hidden;  
}
/* equal space on all sides */
.wrap {
  max-width: 1800px;      
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

}

/* LEFT column = bigger map + blurb stacked */
.col {
  display: flex;
  gap: 10vw;
  max-height: 87%;
  justify-content: space-between;

}

/* Map sizing: grow, but never exceed viewport height minus padding */
.map {
  width: 100%;        
  display: block;
}

/* RIGHT column = legend + contact */
.legend {
  max-width: 520px;
  display: grid;
  gap: clamp(10px, 2vw, 16px);
  align-items: end;      /* keep items aligned inside */
  justify-items: start;    /* keep icon + text left-aligned */
  margin-left: auto; 
}

/* Map visuals */
.line path {
  fill: none;
  stroke-width: clamp(12px, 1.9vw, 20px);      /* bolder lines */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.station { stroke-width: clamp(3px, 0.6vw, 4px); }

.map[data-active] .line { opacity: .25; transition: opacity .2s ease; }
.map[data-active="M1"] #M1,
.map[data-active="M2"] #M2,
.map[data-active="M3"] #M3,
.map[data-active="M4"] #M4 { opacity: 1; }

/* Legend items + icons */
.legend-item { color: #111; }
.legend-item[data-line="M1"][data-active="true"] { color: #47ABF0; }
.legend-item[data-line="M2"][data-active="true"] { color: #FF9100; }
.legend-item[data-line="M3"][data-active="true"] { color: #F45841; }
.legend-item[data-line="M4"][data-active="true"] { color: #13B25A; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 1.6vh;
  text-align: left;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}
.icon {
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  flex-shrink: 0;
}

/* Legend headings */
.legend-heading {
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-size: 3.5vw;
}
.legend-subheading {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: #444;
  margin: 0 0 0.75em;
  line-height: 1.3;
}

/* Blurb under the map */
.blurb-role {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  margin: 0;
}
.blurb-copy {
  max-width: 52ch;
  font-size: clamp(0.95rem, 1.9vw, 1.1rem);
  line-height: 1.5;
  margin: 0;
  color: #333;
  padding-top: 1vh;
}
.contact-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;

}
.contact-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2vw;
  text-decoration: none; color: #111;
}
.contact-label { font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.25rem); }
.contact-dot {
  width: clamp(4.2vw);
  height: clamp(4.2vw);
  background: #111; border-radius: 999px;
  display: grid; place-items: center; flex: 0 0 auto;
  /* right column is a vertical stack */
}
.side {

  display: flex;
  justify-content: space-between;
}
/* Contact block overall stays left aligned */
.contact-block {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vw, 14px);
}

/* Only the heading goes to the right */
.contact-block .contact-heading {
  text-align: right;
  width: 100%;   /* ensures the heading spans the block width */
}

/* Contact list/items remain left aligned */
.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3vw;
  justify-content: flex-start;
}

.contact-block {
  align-self: flex-start;   /* default, but explicit for clarity */
}

/* mobile: stack full width */
@media (max-width: 900px) {
  .side { max-width: none; }
  .legend-block,
  .contact-block { align-self: stretch; }
  body { overflow: auto; }                      /* allow scroll on very small screens */
  .hero { flex-direction: column; align-items: stretch; }
  .legend { max-width: none; }
  .contact-list { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .context-grid,
  .context-grid.solution {
    grid-template-columns: 1fr;
  }
  .context-visual { order: -1; }
  .proj-header{ flex-wrap:wrap; }
  .proj-legend{ order:3; grid-template-columns:1fr 1fr; }
  .proj-brand{ order:1; }
  .proj-track{ order:2; }
  .compare .context-grid { grid-template-columns: 1fr; }
  .compare .compare-visuals { justify-content: center; order: 1; }
  .compare .context-copy { order: 2; }
}


.legend-item { transition: opacity .2s ease; }

/* When something is active, dim all legend items… */
.wrap[data-active] .legend-item { opacity: .3; }

/* …except the active one */
.wrap[data-active="M1"] .legend-item[data-line="M1"],
.wrap[data-active="M2"] .legend-item[data-line="M2"],
.wrap[data-active="M3"] .legend-item[data-line="M3"],
.wrap[data-active="M4"] .legend-item[data-line="M4"] { opacity: 1; }

/* You already have the SVG fade rules; keep them */
.map[data-active] .line { opacity:.25; transition:opacity .2s ease; }

.map[data-active="M1"] #M1,
.map[data-active="M2"] #M2,
.map[data-active="M3"] #M3,
.map[data-active="M4"] #M4 { opacity:1; }

/* project*/


.proj-header{
  display:flex;
  justify-content: space-between;
  gap:clamp(16px,3vw,32px);
  position: fixed;
  background-color: #f6f6f6;
  width:100%;          /* span full width */
  z-index: 2000;
  padding: 0 10vw 2vh;
  align-items: flex-end;
  padding-top: 2vh;
}
.proj-header a{
  color: #111;
  text-decoration: none;
}

.proj-brand{ display:flex; align-items:center; gap:clamp(10px,1.4vw,16px);}
.proj-legend{
  display:grid; gap:10px; flex:0 1 280px;
}
.track-label {
  position: absolute;
  transform: translate(-50%, -100%) rotate(-38deg);
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  color: #111;
  font-size: clamp(.85rem, 1.1vw, 1rem);
}

/* badge + title */
.badge{
  display:grid; place-items:center;
  width:clamp(42px,4vw,56px); height:clamp(42px,4vw,56px);
  border-radius:999px; color:#fff; font-weight:800;
  font-size:clamp(.9rem,1.1vw,1.05rem);
}
.badge--m1{ background:var(--m1); }
.proj-title{
  margin:0; font-weight:600; letter-spacing:.02em;
  font-size:clamp(1.6rem,3vw,2.6rem); line-height:1;
  
}

/* track svg fills container width */
.track-svg{ width:100%; height:auto; display:block; }

/* station labels */
.track-labels{
  position:absolute; inset:0; pointer-events:none;
  display:block;
}
.track-labels span{
  position:absolute; top:-28px; transform:translateX(-50%) rotate(-38deg);
  font-weight:800; font-size:clamp(.85rem,1.1vw,1rem);
  white-space:nowrap; user-select:none; color:#111;
}

/* legend */
.legend-item{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#111; 
  font-size:clamp(.95rem,1.1vw,1rem);
}
.dot{
  display:grid; place-items:center; color:#fff; font-weight:800;
  width:32px; height:32px; border-radius:50%;
  font-size:.85rem; flex:0 0 auto;
}
.dot--m1{ background:var(--m1); }
.dot--m2{ background:var(--m2); }
.dot--m3{ background:var(--m3); }
.dot--m4{ background:var(--m4); }

/* hover nicety */
.legend-item:hover{ opacity:.75; }




.navbar{
  display: flex;
  align-self: ;

}
  .nav-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem;
    gap: .75rem;
    z-index: 1; /* sit above page content */
  }
  
  /* --- CLICKABLE INVISIBLE CHECKBOX --- */
  /* Make the checkbox sit on top of the hamburger area, invisible but clickable */
  .nav-container .checkbox {
    position: absolute;
    width: 40px;   /* match hamburger width */
    height: 40px;  /* match hamburger height */
    margin: 0;
    opacity: 0;    /* invisible but still present */
    cursor: pointer;
    z-index: 1003; /* highest so it remains clickable when menu is open */
    appearance: none; /* remove default styles */
  }
  
  /* --- HAMBURGER ICON --- */
  .hamburger-lines {
    width: 40px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none; /* clicks go to the checkbox above it */
    z-index: 1002;
  }
  .hamburger-lines .line {
    height: 4px;
    width: 100%;
    background: #111;
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
  }
  
  /* --- FULLSCREEN OVERLAY MENU --- */
  .menu-items {
    position: fixed;
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    transform: translateY(-100%);
    transition: transform .4s ease;
    list-style: none;
    z-index: 1000;
  }
  
  .menu-items li { margin: 1rem 0; }
  .menu-items a {
    color: #111;
    text-decoration: none;
    font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
    line-height: 1.2;
    transition: color .25s ease;
  }
  /* --- Submenu base --- */
.menu-items li { list-style: none; }
.has-submenu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* keeps it centered like the other items */
  gap: .5rem;
}
.has-submenu {
  transform: translateX(1.5vw); /* shifts entire section right */
}
/* Hide the submenu checkbox but keep it functional */
.submenu-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Label looks like the other links but clickable */
.submenu-label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  text-decoration: none;
  color: #111;
  font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
  line-height: 1.2;
  user-select: none;
}
.submenu-label .label-text {
  display: inline-block;
  position: relative;
  text-align: center;  /* centers text just like the other links */
}
/* The + icon */
.submenu-label .plus {
  display: inline-block;
  width: 28px;
  height: 28px;
  position: relative;
  transform-origin: center;
  transition: transform .25s ease;
}
.submenu-label .plus::before,
.submenu-label .plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 3.5px;
  border-radius: 2px;
  background:#111;
  transform: translate(-50%, -50%);
}
.submenu-label .plus::after {
  transform: translate(-50%, -50%) rotate(90deg); /* vertical bar */
}

/* Submenu list */
.submenu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .3s ease, opacity .25s ease, transform .25s ease;
  align-items: flex-start;   /* ✅ align items to the start instead of center */
  text-align: left;          /* ✅ left-align submenu text */
  width: auto;    

}

/* Submenu link style (slightly smaller) */
.submenu a {
  color: #111;
  text-decoration: none;
  font-size: clamp(1.1rem, 1vw + .9rem, 1.5rem);
  transition: color .25s ease;
}

/* Toggle open state */
.submenu-toggle:checked ~ .submenu {
  max-height: 400px;     /* big enough to fit your items */
  opacity: 1;
  transform: translateY(0);
}

/* Turn + into × when open (rotate 45° so the bars cross) */
.submenu-toggle:checked + .submenu-label .plus {
  transform: rotate(45deg);
}
  
  /* --- TOGGLE STATES (checkbox controls everything) --- */
  .nav-container .checkbox:checked ~ .menu-items {
    transform: translateY(0);
  }
  
  /* Animate hamburger into an "X" when open */
  .nav-container .checkbox:checked ~ .hamburger-lines .line1 {
    transform: translateY(14px) rotate(45deg);
  }
  .nav-container .checkbox:checked ~ .hamburger-lines .line2 {
    opacity: 0;
  }
  .nav-container .checkbox:checked ~ .hamburger-lines .line3 {
    transform: translateY(-14px) rotate(-45deg);
  }
  
  /* Optional: prevent background scroll when menu is open (modern browsers) */
  body:has(.nav-container .checkbox:checked) {
    overflow: hidden;
  }

  /*project content*/
  .projectsbody{
    padding-top: 20vh;
    display: flex;
    justify-content: center;
  }
  .banner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50vw;
    gap: 1vw;
  }
  .imgsmall{
    height: 25vh;
  }
  .imgbig{
    height: 37vh;
  }
  .container{max-width:81vw;margin:0 auto;}
  .brand{padding:28px 0 10px;font-size:28px;letter-spacing:.3px; color: #707070,}

  /* layout */
  .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;padding-bottom:2vh}


  /* left */
  h1{margin:1.5rem 0 ;font-size:clamp(34px,5vw,56px);line-height:1.1;font-weight:800;letter-spacing:-.4px}
  .lede{margin-top: 5vh;max-width:40vw;}

  .meta{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:42px;max-width:820px}
  @media (max-width:720px){.meta{grid-template-columns:1fr}}
  .card{background:var(--card);border:1px solid var(--ring);border-radius:var(--r-lg);box-shadow:var(--shadow);}
  .card h3{margin:0 0 10px;font-size:18px}
  .card ul{list-style:none;margin:8px 0 0;padding:0}
  .card li{margin:4px 0;color:var(--muted)}

  /* right = images only */
  .mock-area{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center; gap: 1vw;}
  .mock{max-width:100%;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.12))}
  @media (max-width:1200px){
    .mock-offload{left:-10px} .mock-flights{right:-10px}
  }
  @media (max-width:1024px){
    .mock-area{min-height:640px}
    .mock-offload{left:auto;right:-10px;top:-10px}
    .research__container{ grid-template-columns: 1fr; gap:40px; }
    .hero{grid-template-columns:1fr}
  }
/*research*/
.research{
  background:var(--bg);
  color:var(--ink);
  padding:40px 0 80px;
}
.research__container{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:start;
}


/* LEFT */
.research__viz{
  display:flex;
  align-items:center;
  gap:48px;
  flex-wrap:wrap;
}
.research__pie{
  width:min(560px, 90vw);
  max-width:560px;
  height:auto;
  display:block;
}

.research__legend{
  list-style:none;
  margin:0;
  padding:0;
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:18px;
}
.research__legend li{
  display:flex;
  align-items:center;
  gap:12px;
}
.dot{
  width:14px; height:14px; border-radius:50%;
  display:inline-block;
}
.dot--green{ background:var(--green); }
.dot--blue{  background:var(--blue); }
.dot--gray{  background:var(--gray); }
.dot--orange{background:var(--orange); }
.dot--red{   background:var(--red); }
.pct{
  margin-left:8px;
  color:var(--muted);
  font-size:.95em;
}

.research__question{
  margin:36px 0 0;
  font-size:22px;
  line-height:1.35;
}
.research__right strong{ font-weight:800; }
.context-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
.context-grid.solution { grid-template-columns: 1fr 1fr; margin-top: 10vh; }

.eyebrow {
  font-size: 0.9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin: 0 0 1.5rem;
}
.context-title {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.context-body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black);
  margin: 0;
}
#left-text{
  align-self: flex-end;
}
.context-visual img {
  width: min(420px, 100%);
  display: block;
  margin-inline: auto;
}

/* thin grey line like the mock */
.section-divider {
  width: 40%;                  /* adjust width (try 30–50% for best balance) */
  height: 1px;
  background-color: #e5e5e5;
  margin: 18vh auto 10vh;
  border-radius: 2px;          /* soft edge */
}

/* slight grid tweak only for this section */
.compare .context-grid {
  grid-template-columns: 1.3fr 1fr;  /* images left, text right */
  gap: clamp(24px, 5vw, 80px);
}

/* visuals */
.compare .compare-visuals {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 40px);
}
.compare .phone { margin: 0; text-align: center; }
.compare .phone figcaption {
  font-size: 0.95rem; color: #6f6f6f; margin-bottom: 10px;
}
.compare .phone img {
  display: block; width: 18vw; height: auto;
}
.compare .phone-before img { width: 13vw; }
.phone-now{
  max-width: 30vw;
}
.context-flex{
  display: flex;
  align-items: center;
  gap: 7vw;
}
/* responsive */

.discover {
  text-align: center;
  padding: 10vh 0 0 0;
}

.discover .discover-heading {
  max-width: 700px;
  margin: 0 auto;
}
.discover-heading img{
  max-width: 30vw;
}
.discover .line {
  width: 40px;
  height: 3px;
  background-color: ;
  margin: 0 auto 20px auto;
  border-radius: 2px;
  background-color: var(--blue);
}

.discover h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: 0.05em;
}

.discover p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black);
  margin: 0;
}
/* --- Screener survey block inside Discover --- */
.survey {
  text-align: center;
  display: flex;
  flex-direction: column;
align-items: center;
}

.survey-title {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  margin-bottom: 1rem;
}
.section-description{
  max-width: 45vw;
}
.survey-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black);
}

.survey-image  {
  max-width: 50vw;
  margin: 5vh 0 10vh;
  display: block;
}
.highlight-points{
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-top: 2vh;
}
.user{
  margin: 2vh 0 10vh;
}
.pill-list {
  background: #f7fcfe;
  border-radius: 28px;
  overflow: hidden;                 /* rounds inner dividers too */
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  max-width: 60vw;
  margin: 5vh 0;
}

/* Each row */
.pill {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: left;
}
.pill:last-child { border-bottom: 0; }

.pill-icon {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  font-size: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.pill-copy {
  margin: 0;
  font-size: 1.05rem;
  color: #111;
  line-height: 1.6;
}
#observation{
  margin-top: 10vh;
}
/* Responsive spacing */
@media (max-width: 640px) {
  .pill { grid-template-columns: 32px 1fr; padding: 16px 18px; }
  .pill-icon { width: 32px; height: 32px; font-size: 18px; }
}
.moscow{
  max-width: 60vw;
  margin: 5vh;
}
#findings{
  max-width: 70vw;
  font-size: 2rem;
}
.findings-top{
  margin-top: 5vh;
}
.empathyimg{
  width: 40vw;
  margin-top: 5vh;
}
.hmw {
  text-align: center;
  padding: 2rem 0;
  margin: 7vh 0;
}

.hmw h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--gray);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 900px;                /* limits width for readability */
}
.user{
  display: flex;
  gap: 2vw;
}
/* about me */

#nav-about{
  margin: 5.6vh auto;
}
.about-main{
  max-width: 65vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}
.about-main h1{
  font-size: 6rem ;
  font-weight: 700;
}
.intro{
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black);
  max-width: 60vw;
}
.about-me{
  display: flex;
  align-items: start;
  gap: 5vw;
}
.more{
  padding: 5vh 0;
}
/* Container */
/* Accordion Section */
.accordion {
  margin: 0;
  padding: 0;

}

/* Hide checkbox but keep functional */
.accordion-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Header */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 12vh;
  cursor: pointer;
  user-select: none;
  position: relative;
  border-bottom: 0.1vh solid #d9d9d9;
}

.accordion-header h2 {
  font-size: 2.5vw;
  font-weight: 600;
  color: #111;
  margin: 0;
}

/* Plus icon */
.accordion-plus {
  position: relative;
  width: 1.5vw;
  height: 1.5vw;
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Horizontal and vertical bars */
.accordion-plus::before,
.accordion-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 0.2vh;
  background: var(--black);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
  border-radius: 1px;
}

.accordion-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Content */
.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.accordion-content p {
  line-height: 1.7;
  color: var(--black);
  margin: 3vh 0 5vh;
}
.love{
  width: 60vw;
  margin: 5vh 0;
}
/* When expanded */
.accordion-toggle:checked ~ .accordion-header .accordion-plus {
  transform: scale(1.15);
}

.accordion-toggle:checked ~ .accordion-header .accordion-plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.accordion-toggle:checked ~ .accordion-content {
  max-height: 80vh;
  opacity: 1;
}

/* Responsive text adjustments */
@media (max-width: 768px) {
  .accordion-header {
    height: 8vh;
    padding: 0 6vw;
  }

  .accordion-header h2 {
    font-size: 5vw;
  }

  .accordion-plus {
    width: 3.5vw;
    height: 3.5vw;
  }

  .accordion-content p {
    font-size: 3.5vw;
  }
}


.profile{
  width: 20vw;
}
.visual{
  max-height: 70vh;
  width: auto;
}
#projectlink{
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}
#small-img{
  max-width: 30vw;
  padding: 5vh 0 12vh;
}
.reflection{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10vh;
}
.reflection img{
  max-width: 60vw;
}
.reflection h2{
  font-size: 3rem;
  padding: 0 0 5vh 0 ;
}
.next{
  display: flex;
  justify-content: end;
  margin-bottom: 10vh;
}
.next-project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2vw;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111010;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}


/* SVG hover animation */
.next-project-btn svg {
  transition: transform 0.3s ease;
}

.next-project-btn:hover svg {
  transform: translateX(6px);
}
.noprogress{
  padding-top: 6vh;
  padding-bottom: 2vh;
}
.system{
  max-width: 30vw;
}
.figma{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 10vh 0;
}
.pwmiimg{
  width: 40vw;
}
#academy{
  margin-bottom: 5vh;
}
.final{
  margin-bottom: 10vh;
}
.max{
  align-items: center;
  padding: 5vh 0;
  width: 80vw;
}
.phone-quiet{
  width: 40vw;
}
.image-flex{
  display: flex;
  flex-direction: row;
  padding: 5vh 0;
}
.image-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.last{
  padding-bottom: 10vh;
}