/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    /* overflow: hidden; */
    /* background: #fff; */
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll-section {
  flex:0 0 100vw;   /* each panel = viewport width */
  height:100vh;     /* each panel = viewport height */
  background: #FBFCFF;
}

/* Mobile: stack vertically and scroll normally */
@media (max-width: 768px){
  body { overflow-y:auto; }
  .horizontal-scroll-container{
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    height:auto;
  }
  /* .scroll-section{
    width:100%;
    height:auto;
    min-height:100vh;
  } */
}


/* Page scrolls vertically; we’ll translate the track horizontally */
html, body { height: 100%; }
body { overflow-y: auto; overflow-x: hidden; background:#FBFCFF; }

/* Horizontal strip wrapper */
.hs-container {
  position: relative;
  /* height gets set by JS: scrollableX + viewportHeight */
  overflow: visible;
}

/* The pinned track that we translate with JS */
.hs-track {
  position: sticky;   /* stays in place while we scroll this strip */
  top: 0;
  left: 0;
  height: 100vh;      /* visible area = one viewport tall */
  display: flex;      /* lay panels in a row */
  align-items: stretch;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Each panel takes exactly one viewport width */
.section {
  flex: 0 0 100vw;
  min-width: 100vw;
  height: 100vh;      /* most hero/sections want full height */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem .5rem;
}

/* If some panels should scroll internally, give them overflow */
.section .scrollable { 
  overflow-y: auto; 
}

/* --- Mobile: disable horizontal, stack vertically --- */
@media (max-width: 768px) {
  .hs-track {
    position: static;      /* no pinning */
    display: block;        /* stack sections naturally */
    height: auto;
    transform: none !important;
  }
  .section {
    min-width: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;     /* keep nice full views if you like */
  }
}

.about-image img {
  object-position: center 20%;
}


/* About hero */
/* Section fills the viewport */
.scroll-section.about-merge {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBFCFF;
  overflow: hidden;
}

/* Big bold text centered */
#aboutTitle {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(6rem, 18vw, 22rem);
  line-height: 1;
  letter-spacing: -5px;
  color: #212121;
  transform-origin: center;
  will-change: transform;
  margin: 0;
}

:root { --nav-h: 64px; }

/* Tools section layout (top-aligned, below navbar)  */
#tools{
  display: grid;
  grid-template-columns: minmax(520px, 1.2fr) 0.55fr; /* left wider than right */
  gap: clamp(2rem, 5vw, 6rem);
  /* below the navbar + a little breathing room like the mock */
  padding: calc(var(--nav-h) + clamp(1rem, 6vh, 5rem))
           clamp(1rem, 3vw, 3rem)
           clamp(2rem, 6vh, 4rem);
  min-height: 100vh;
  align-items: center; /* top align (no vertical centering) */
}

#tools .tools-container{ display: contents; } /* let children participate in the grid */

/*  Left column (headline + paragraph)  */
.tools-left{ max-width: 60ch; }
.tools-left h2{
  margin: 0 0 .9rem 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
  color: #9BC13B; /* orange like the reference */
  font-size: clamp(2.8rem, 6vw, 7rem);
}
.tools-left p{
  font-family: "Montserrat", sans-serif;
  color:#212121;
  font-weight: 300;
  line-height: 1.7;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
}

/*  Right column list (condensed, uppercase, no dividers)  */
.tools-right{ align-self: start; }

.tech-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;             /* tight rhythm like the mock */
}

.tech-list > li{
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: .6rem;             /* space between name and icon */
  line-height: 1.1;
  cursor: help;
  border: 0; /* no border, just for hover effect */
  padding: 2px;
}

.tech-name{
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;       /* lighter, fits more rows */
  letter-spacing: .02em;
  color: #212121;
  /* small enough so the full list fits next to the hero */
  font-size: clamp(1rem, 1.2vw, 1.25rem);
}

.tech-icon{
  width: clamp(18px, 1.8vw, 26px);
  height: auto;
  flex: 0 0 auto;
  opacity: .95;
  transform: translateY(1px);
  transition: transform .2s ease, opacity .2s ease;
}

/* hover */
#tools .tech-list > li:hover .tech-name,
#tools .tech-list > li:focus-within .tech-name{ color:#9BC13B; }
#tools .tech-list > li:hover .tech-icon{ transform: translate(1px,1px); opacity:1; }

/* hide bubble tooltips if you still have them */
#tools .tech-list > li .tooltip{ display:none !important; }

/* tooltips hidden on desktop (you already have something like this) */
#tools .tech-list > li .tooltip{
  display:none;
}

/* On mobile: show tooltip under tool name */
@media (max-width: 900px) {
  #tools .tech-list > li {
    display: flex;
    flex-direction: row; /* Stack name + tooltip vertically */
    align-items: center; /* Keep them aligned left */
    gap: clamp(.5rem, 1vw, .9rem);
    flex-wrap: wrap; 
  }

  #tools .tech-list > li .tech-name {
    font-weight: 800;
  }

  #tools .tech-list > li .tooltip {
    display: block !important;
    position: static;  
    flex-basis: 100%;     /* Remove any absolute positioning */
    /* width: auto; */
    margin-top: 0.25rem;    /* Small gap under tool name */
    padding: 0;
    background: none;       /* Remove tooltip bubble styling */
    color: #555;            /* Subtle text color */
    font-size: 0.85rem;     /* Slightly smaller than the name */
    line-height: 1.4;
  }
}

/*  tighten automatically on short viewports (no scroll)  */
@media (max-height: 820px){
  .tech-name{ font-size: clamp(0.95rem, 1.05vw, 1.1rem); }
  .tech-icon{ width: clamp(16px, 1.6vw, 22px); }
  .tech-list{ gap: .3rem; }
}

@media (max-height: 700px){
  .tech-name{ font-size: clamp(0.9rem, 1vw, 1rem); }
  .tech-icon{ width: clamp(14px, 1.4vw, 20px); }
  .tech-list{ gap: .25rem; }
}

/*  mobile stacks like normal  */
@media (max-width: 900px){
  #tools{
    grid-template-columns: 1fr;
    padding-top: calc(var(--nav-h) + 1.25rem);
    min-height: auto;
  }
  .tools-right{ margin-top: 1.25rem; }
}

/* Recent work section */
:root{
  --page-gutter: clamp(16px, 5vw, 28px);
}

#recent .recent-work-container{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-block: 2rem;
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
  color: #FBFCFF;
}
#recent .recent-title{
  font-size: clamp(1rem, 3.5vw, 3rem);
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  color: #212121;
}

/* Shared width */
#recent .role-view{
  width: min(1100px, 92vw);
  margin-inline: auto;
  position: relative;      /* for absolute overlay */
  min-height: 520px;       /* keeps height when list is hidden */
  display: grid;
  overflow: hidden;       /* hide card overflow */
}

/* LIST */
#recent .role-list{
  display: grid;
  gap: .75rem;
  display: grid;
}
#recent .role-item{
  /* all: unset; */
  font-family: "Montserrat", sans-serif;
  text-align: left;
  display: block;
  width: 100%;
  background:#212121;
  color:#FBFCFF;
  padding: clamp(.9rem, 1.4vw, 1.2rem) clamp(1.2rem, 2vw, 1.75rem);
  border-radius: 0px;
  border: none;
  /* outline: none; */
  cursor: pointer;
  position: relative;
  /* box-shadow: inset 0 -2px #212121; */
  transition: background .2s ease, color .2s ease;
}
#recent .role-title{
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.15;
}
#recent .role-meta{
  display:block;
  margin-top:.3rem;
  font-size: clamp(.85rem, 1.2vw, .95rem);
  color:#212121;
  font-weight: 700;
  letter-spacing:.02em;
}
#recent .role-item:hover{
  background:#9BC13B;
  color:#212121;
}

#recent .role-item:hover .role-meta{ color:#212121; }
#recent .role-item:hover::after{
  content:"→";
  position:absolute;
  right: clamp(1rem, 2vw, 1.5rem);
  top:50%;
  translate:0 -50%;
  font-size:1.6em;
  font-weight:700;
  color:currentColor;
  transform: rotate3d(0, 0, 1, 0deg) scale(1); /* base state */
  transition: transform .7s ease-in-out; 
}

#recent .role-item:hover::after {
  transform: rotate3d(0, 0, 1, 45deg) scale(1.6);
}

/* make sure each row is a containing block */
#recent .role-item { position: relative; }

/* use an SVG data-URI for the arrow instead of text so we can style it consistently */
#recent .role-item::after{
  content: "";
  position: absolute;
  right: clamp(1rem, 2vw, 1.25rem);
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%) rotate(0deg) scale(1.5);
  background-image: url("/images/arrow-right.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1.5);
}

/* nudge + rotate on hover for a tactile feel */
#recent .role-item:hover::after{
  transform: translateY(-50%) translateX(6px) rotate(20deg) scale(1.15);
}

/* small inline images used in markup */
.close-btn img{
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
}
.stat-icon{
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0rem;
  margin-bottom: 0.15rem;
}

/* REcent Work */
#recent .role-card{
  position: absolute;      /* <-- overlay */
  inset: 0;                /* top:0 right:0 bottom:0 left:0 */
  background: #212121;
  border-radius: 8px;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.75rem);
  overflow: auto;          /* scroll inside card if content is tall */
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  z-index: 2;
  width: 100%;
  height: 100%;
}
#recent .card-head{
  display:flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}
#recent .role-header{
  color:#9BC13B;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 900;
  margin:0;
}
#recent .close-btn{
  background:none;
  border:none;
  color:#FBFCFF;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  cursor:pointer;
}

#recent .close-btn:hover{
  color:#9BC13B;
  transform: rotate3d(0, 0, 1, 45deg) scale(1.6) ;
  transition: ease-in-out .7s;
}
#recent .role-date{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 800;
  margin: .25rem 0 1rem;
}
#recent .role-stats{
  list-style:none;
  margin:50px 0 50px 0;
  padding:50px 0 50px 0;
}

#recent .role-stats li{
  margin:0 0 .85rem 0;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  line-height:1.6;
}
#recent .role-stats span{
  font-weight:900;
  color:#9BC13B;
  margin-right:.5rem;
}

/* Mobile tweaks */
@media (max-width:700px){
  #recent .role-title{ font-size: clamp(1.05rem, 5vw, 1.35rem); }
}

.vertical-headline-divider {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 3rem;
  font-weight: 900;
  animation: float 2.5s ease-in-out infinite;
  margin: auto;

}

@keyframes float {
  0% { transform: rotate(180deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(-12px); }
  100% { transform: rotate(180deg) translateY(0); }
}


/* Work Cards Section */
:root{ --nav-h: 64px; }

#cards{
  min-height: 100vh;
  width: auto;
  display: grid;
  place-items: center;
  padding: clamp(6px, 1vw, 12px);
  margin-top: calc(var(--nav-h) * -0.35);
}

.work-cards{
  width: 98%;
  height: calc(100vh - var(--nav-h) - 40px);
  margin-top: 70px;
  /* grid-auto-rows: minmax(180px, auto); */
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 2 per side */
  grid-template-rows: repeat(3, minmax(240px, auto));      /* <-- FIX: three equal rows */
  gap: 8px;

  background:#212121;
  padding: clamp(8px, 0.5vw, 16px);
  border-radius: 22px;

  perspective: 1100px;
  overflow: visible;
  box-sizing: border-box;
}

/* Base card (no resting tilt) */
.work-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  border-radius: 14px;
  padding: clamp(8px, 0.5vw, 16px);
  color:#212121;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
  box-sizing: border-box;

  --rx: 0deg; --ry: 0deg; --tz: 0px;
  transform: translateZ(var(--tz)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.work-card h3{ 
  font-weight:800; 
  line-height:1.1; 
  margin:0 0 .35rem; 
}

.work-card p{ 
  margin:0 0 .9rem; 
  line-height:1.6; 
  /* flex-grow: 1; */
}

.project-cta{
  display:inline-block;
  align-self: flex-start;
  font-weight:800;
  text-decoration:none;
  color:#FBFCFF;
  background:#212121;
  padding:.6rem 1rem;
  border-radius:999px;
  border: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.2) inset;
  margin-top: auto;
}
.project-cta:hover{ 
  transform: translateY(-1px);
  background-color: #9BC13B;
  color: #212121;

}

.work-card.is-tilting{           /* shadow upgrade only while hovering */
  box-shadow: 0 22px 58px rgba(0,0,0,.28);
  filter: saturate(1.03);
}

/* Promo card */
.promo-card{
  position: relative;
  background:#212121;          /* default dark */
  color:#FBFCFF;               /* default light text */
  overflow:hidden;
  border-radius:14px;
  transition: color 1s ease; /* text color only; bg handled by the splash */
  display:grid;
  place-items:center;
}

.promo-card h3{
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0;
  text-align: center;
  letter-spacing: .02em;
}

/* keep content above the splash */
.promo-card > *{
  position: relative;
  z-index: 2;
}

/* circular “ink” that expands to white */
.promo-card::after{
  content:"";
  position:absolute;
  width:140px; height:140px;          /* starting blob size */
  left: var(--hover-x, 50%);
  top:  var(--hover-y, 50%);
  transform: translate(-50%,-50%) scale(0);
  background:#FBFCFF;                 /* light color */
  border-radius:50%;
  will-change: transform;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
  z-index: 1;                          /* under the text */
}

/* on hover: grow the blob & flip text color */
.promo-card:hover{
  color:#212121;                       /* dark text */
}
.promo-card:hover::after{
  transform: translate(-50%,-50%) scale(12);  /* big enough to cover the card */
}

/* remove any old image styles you had before */
.promo-card::before{ content:none !important; }

/* ==== Card 3 special layout ==== */
#card3{
  /* keep your background */
  background:#FBFCFF;
  color:#212121;

  /* 2-column layout inside the card */
  display: grid;
  grid-template-columns: 1.05fr 1.6fr;       /* left (img+title) | right (paragraph) */
  grid-auto-rows: auto 1fr;
  gap: clamp(.75rem, 2vw, 1.25rem);
  align-items: center;
  padding: clamp(18px, 2.2vw, 28px);         /* a touch roomier than default */
  height: 100%;
}

/* place items in the grid */
#card3 img{
  grid-column: 1;
  grid-row: 1;
  width: clamp(90px, 18vw, 150px);           /* fixed-ish visual size */
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  /* display: block; */
  margin-top: .5rem;;
  justify-self: start;                       /* hug the left */
}

#card3 h3{
  grid-column: 1;
  grid-row: 2;
  margin: .25rem 0 0;
  font-weight: 800;
  font-size: clamp(1.1rem, 1.8vw, 1.75rem);
  line-height: 1.15;
  align-self: start;
}

#card3 p{
  grid-column: 2;
  grid-row: 1 / span 2;                      /* span the full right side */
  margin: 0;
  font-size: clamp(.95rem, 1.2vw, 1.125rem);
  line-height: 1.85;
  align-self: center;;
}

#card7 a:hover {
  background-color: #FBFCFF;
  color: #212121;
}


/* ---------- EXACT LAYOUT (IDs must match your 8 cards) ---------- */
/* Card 3: top-left, tall */
#card3{ grid-column: 1 / 3; grid-row: 1 / span 2; }

/* Below card 3 */
#card1{ grid-column: 1 / 2; grid-row: 3; }
#card2{ grid-column: 2 / 3; grid-row: 3; }

/* Right column */
#card4{ grid-column: 3 / 4; grid-row: 1; }
#card5{ grid-column: 4 / 5; grid-row: 1; }
#card6{ grid-column: 3 / 5; grid-row: 2; }
#card7{ grid-column: 3 / 4; grid-row: 3; }
#card8{ grid-column: 4 / 5; grid-row: 3; }

/* Mobile for work cards: stack image + heading above paragraph */
@media (max-width: 900px){
  .work-cards{
    width:92%;
    height:auto;
    grid-template-columns: 1fr;          /* stack everything */
    grid-template-rows: auto;            /* auto height rows */
    font-size: clamp(1rem, 1.5vw, 1.125rem);
  }
  /* Force order: card3 first, then 1, 2, 4, 5, 6, 7, 8 */
  #card3{ grid-column:1 / -1 !important; grid-row:1 !important; }
  #card1{ grid-column:1 / -1 !important; grid-row:2 !important; }
  #card2{ grid-column:1 / -1 !important; grid-row:3 !important; }
  #card4{ grid-column:1 / -1 !important; grid-row:4 !important; }
  #card5{ grid-column:1 / -1 !important; grid-row:5 !important; }
  #card6{ grid-column:1 / -1 !important; grid-row:6 !important; }
  #card7{ grid-column:1 / -1 !important; grid-row:7 !important; }
  #card8{ grid-column:1 / -1 !important; grid-row:8 !important; }

  /* .promo-card {
    display: none;;
  } */

  #card3{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #card3 img{ grid-column: 1; grid-row: 1; width: clamp(120px, 40vw, 220px); }
  #card3 h3{ grid-column: 1; grid-row: 2; }
  #card3 p{  grid-column: 1; grid-row: 3; }

  #card6 {
    margin-top: 25%;
  }
}

@media screen and (max-width: 768px) {

  .about-text p {
    font-size: 1rem !important;
    text-align: justify;
  }
  .horizontal-scroll-wrapper {
    transform: none;
    width: 100%;
    height: auto;
    position: relative;
    overflow-y: auto;
    padding-top: 0;
  }

  .scroll-section {
    width: 100%;
    height: auto;
    transform: none;
    font-size: 2rem;
  }

  .tools-container {
    flex-direction: column;
    gap: 2rem;
  }

  .tools-left,
  .tools-right {
    max-width: 100%;
  }

  .tools-left p {
    text-align: justify;
  }

  .tech-list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .text-box {
    font-size: 3rem;
    padding: 1rem;
  }

  #recent .role-view {
    width: 100%;
  }

  .recent-title {
    font-size: 2.5rem !important;
  }
}


/* About page – mobile spacing fix */
@media (max-width: 768px) {
  /* let the section size to its contents */
  .scroll-section.about {
    height: auto;
    min-height: auto;              /* was 100vh */
    padding: clamp(16px, 5vw, 24px) 1rem;
    display: grid;
    grid-template-columns: 1fr;    /* stack */
    row-gap: clamp(12px, 4vw, 20px);
    align-items: start;            /* stop vertical centering */
    justify-content: start;
  }

  /* make sure the image doesn’t add extra space */
  .scroll-section.about .about-image {
    margin: 0;                     /* kill any default margins */
  }
  .scroll-section.about .about-image img {
    display: block;
    width: 100%;
    height: auto;                  /* keep aspect ratio */
    object-fit: fill;
  }

  /* tighten the paragraph block */
  .scroll-section.about .about-text {
    margin: 0;
  }
  .scroll-section.about .about-text p {
    margin: 0;                     /* remove default p top/bottom margins */
    font-size: 1rem;               /* your preferred mobile size */
    line-height: 1.6;
  }

  #about {
    grid-template-columns: 1fr;            /* stack */
    padding-inline: clamp(16px, 5vw, 24px);
    row-gap: clamp(12px, 4vw, 20px);
    align-items: start;
  }

  #about .about-text {
    max-width: 100%;                        /* remove 80ch cap */
    width: 100%;
    justify-self: stretch;
  }

  #about p {
    margin-right: 0;                        /* kill the forced gap */
    margin-left: 0;
  }

  #about .about-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: fill;
  }
}



/* Cards on mobile equalize hight all except #card3 */
@media (max-width: 900px){
  /* 1) one column already set — now make rows uniform */
  :root { --mobile-card-h: clamp(240px, 28vh, 300px); }

  .work-cards{
    grid-template-columns: 1fr;       /* you already have this */
    grid-auto-rows: var(--mobile-card-h);
  }

  /* 2) make every card the same height … */
  .work-card:not(#card3){
    height: var(--mobile-card-h);
  }

  /* 3) …but let card 3 size itself because its layout/content is different */
  #card3{
    height: auto;                      /* override the uniform height */
  }

  /* 4) help content distribute inside the fixed-height cards */
  .work-card{
    display: flex;
    flex-direction: column;
  }
  .work-card p{ flex: 1; }             /* paragraph grows to fill */
  .project-cta{ margin-top: auto; }    /* CTA stays pinned to bottom */
}