/* Global */
body {
  margin: 0;
  padding: 30px;
  background: #ffffff;
  color: #353535;
  font-family: 'Space Mono', monospace;
}

/* Container */
.section {
  max-width: 900px;
  width: 100%;
  margin: 0 auto 300px auto;  
  transform: translateX(-40px);  
  padding-left: 40px;           
}


/* Typography */
.h1 {
  font-family: 'General Sans', sans-serif;
  font-size: 70px;
  line-height: 128%;
  font-weight: 600;
  margin-bottom: 40px;
  margin-left: -5px;
  color: #353535
}

.h2 {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 16px;
  margin-top: -6px;
}

.h3 {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 0px;
}

.h4 {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0px;
  margin-top: 10px;
}

.h5 {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 14px;
  max-width: 300px;
  margin-bottom: 0px;
  margin-top: 10px;
}


.hero {
  margin-top: 45vh;
}


/* Projects */
.project-grid { display: flex; gap: 100px; }

.project-col { display: flex; flex-direction: column; gap: 200px; }
.project-col.offset { margin-top: 170px; gap: 200px; align-items: flex-start; }

.project-box{
  position: relative;
  display: block;
  border-left: 2px solid #868686;
  padding-left: 16px;
  color: #353535;
  text-decoration: none;
}


.project-box::before{
  content:"";
  position:absolute;
  left:-4px; top:0; bottom:0;   
  width:4px;
  background:#2deebe;
  transform-origin: top;
  transform: scaleY(var(--line-progress, 0));
  z-index:1;
  pointer-events:none;
}

.contact img {
  width: 250px;
  height: auto;
  border: 4px solid #353535;
  margin-top: 30px;
  border-radius: 2%;
}



/* CASE STUDY — BASE LAYOUT (LEFT-ALIGNED) */

/* Use this container INSTEAD of `.section` on case pages */
.section-case {
  width: 100%;
  max-width: 1200px;   
  margin: 0;           
  padding-left: 60px;  
  padding-right: 60px; 
  margin-bottom: 200px;
}

/* Optional: slightly narrower intro if you want tighter text there */
.section-case.case-intro {
  max-width: 1000px;
  margin-top: 8vh;               /* breathing room from top */
}

/* Back link above the title */
.back-link {
  text-decoration: none;
  color: #353535;
}
.back-link:hover { text-decoration: underline; }

/* Tighter spacing JUST for the case title block */
.case-intro .h1 { margin-bottom: 10px; }
.case-intro .h4, .case-intro .h5 { margin: 0 0 6px 0; }

/* =========================================
   BAKGRUND + PROBLEM (SIDE BY SIDE)
   ========================================= */

.case-columns {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Problem column wider */
  gap: 60px;
  align-items: start;
}

/* Typography cleanup inside columns */
.case-col h2 { margin: 0 0 12px 0; }
.case-col h4 { margin: 0; line-height: 1.8; }


/* =========================================
   PROCESS (TEXT LEFT, 3 IMAGES RIGHT)
   ========================================= */

.process .h1,
.section-case.process .h1 { margin-bottom: 40px; }

.process-2col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* text wider than images */
  gap: 60px;
  align-items: start;
}

/* Left column: stacked steps */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.process-item h3 { margin: 0 0 6px 0; }
.process-item h4 { margin: 0; line-height: 1.8; max-width: 75ch; }

/* Right column: three stacked images */
.process-images {
  display: flex;
  flex-direction: column;
  margin-top: 100px;
  gap: 200px;
}
.process-images figure { margin: 0; }
.process-images img {
  display: block;
  width: 150%;
  height: auto;
  border-radius: 8px;  /* optional */
  margin-left: 20px;
  margin-bottom: 20px;
}

/* Optional: keep images visible while scrolling text */
@supports (position: sticky) {
  .process-images { position: sticky; top: 80px; }
}




/* =========================================
   RESULTAT (GALLERY)
   ========================================= */

.resultat .h2 { margin-bottom: 24px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.gallery figure { margin: 0; }
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;    /* optional */
  object-fit: cover;
}

/* Full-width result images */
.resultat-full {
  max-width: none;       /* remove the case section max-width */
  margin: 0;             /* no margins */
  padding: 0;            /* no inner padding */
}

.resultat-full .h2 {
  padding-left: 60px;    /* keep heading aligned with text */
  margin-bottom: 24px;
}

.gallery-full {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.gallery-full figure {
  margin: 0;
}

.gallery-full img {
  display: block;
  width: 100vw;          /* take up the whole viewport width */
  height: auto;
  object-fit: cover;
}


/* =========================================
   UTILITIES (OPTIONAL)
   ========================================= */

/* Quick left padding booster if a block feels tight */
.case-pad-left { padding-left: 40px; }

/* Quick tight headings inside any case block */
.case-tight .h1 { margin-bottom: 12px; }
.case-tight .h2 { margin-bottom: 10px; }
.case-tight .h3 { margin-bottom: 6px; }

/* Gentle divider if you need separation */
.case-divider {
  border-top: 1px solid #353535;
  padding-top: 24px;
  margin-top: 24px;
}




/* ---------- Mobile base helpers ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }

/* ---------- Tablet and down ---------- */
@media (max-width: 900px) {
  /* Typography scale */
  .h1 { font-size: clamp(38px, 6vw, 60px); line-height: 120%; }
  .h2 { font-size: 20px; }
  .h3, .h4 { font-size: 16px; }
  .h5 { font-size: 12px; }

  /* Home sections (centered on desktop) – reduce nudge on smaller screens */
  .section {
    max-width: 90%;
    margin: 0 auto 140px auto;
    transform: none;          /* remove left nudge on small screens */
    padding-left: 0;
  }

  /* Case study sections (left-aligned on desktop) */
  .section-case {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 140px;
  }

  /* Hero spacing smaller on mobile */
  .hero { margin-top: 20vh; }

  /* Projects: stack columns */
  .project-grid {
    flex-direction: column;
    gap: 60px;
  }
  .project-col { gap: 80px; }
  .project-col.offset { gap: 80px; margin-top: 0; }
  

  /* Case: Bakgrund + Problem → one column */
  .case-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Case: Process → one column, images below text */
  .process-2col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Resultat gallery: tighter grid */
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }

  /* Full-bleed images: avoid horizontal scrollbars */
  .gallery-full img {
    width: 100vw;
    max-width: 100vw;
  }
}

/* Process images: reset the desktop "bleed" on mobile */
.process-images img {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-bottom: 16px;
}


/* ---------- Small phones ---------- */
@media (max-width: 600px) {
  .h1 { font-size: clamp(32px, 8vw, 48px); }
  .h2 { font-size: 18px; }
  .section-case { padding-left: 16px; padding-right: 16px; margin-bottom: 120px; }
  .section     { max-width: 94%; margin-bottom: 120px; }
  .hero { margin-top: 120px; }
  .project-box { padding-left: 12px; border-left-width: 1px; }
}


/* Per-line underline using background; works on inline spans */
.per-line-thick{
  --underline: 0%;
  --underline-color: #2deebe;

  display: inline;                         /* important: inline, not block */
  padding: 10px 10px 10px 10px;                    /* bottom padding = room for line; tiny right padding helps */
  background-image: linear-gradient(var(--underline-color), var(--underline-color));
  background-repeat: no-repeat;
  background-size: var(--underline) 80px;   /* width animated by JS */
  background-position: 0 60%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;     /* Safari */
  transition: background-size 300ms linear;
}

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

.per-line{
  --underline: 0%;
  --underline-color: #616161;

  display: inline;                         /* important: inline, not block */
  padding: 0px 0px 1px 0px;                    /* bottom padding = room for line; tiny right padding helps */
  background-image: linear-gradient(var(--underline-color), var(--underline-color));
  background-repeat: no-repeat;
  background-size: var(--underline) 1px;   /* width animated by JS */
  background-position: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;     /* Safari */
  transition: background-size 300ms linear;
}


/* Locomotive basics */
html.has-scroll-smooth { overflow: hidden; }
html.has-scroll-smooth, html.has-scroll-smooth body { height: 100%; }
[data-scroll-container] { min-height: 100vh; }

/* Optional: avoid horizontal jiggle while loco transforms */
html, body { overscroll-behavior: none; }