:root{
  --bg: #0c0c0b;
  --fg: #f5f3ef;
  --fg-70: rgba(245,243,239,0.7);
  --fg-45: rgba(245,243,239,0.45);
  --fg-25: rgba(245,243,239,0.25);
  --line: rgba(245,243,239,0.1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  position:relative;
  background: var(--bg);
  color: var(--fg);
  font-family: "Outfit", sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Film-grain texture: a tiled SVG noise filter, fixed over the whole page,
   low opacity so it reads as tactile paper rather than visible static. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

section, header, footer, .division-divider{ position:relative; z-index:2; }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important;}
}

/* ---------- Fade-in ---------- */

.fade{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s ease, transform .8s ease;
}
.fade.is-visible{
  opacity:1;
  transform:none;
}

/* ---------- Hero ---------- */

.hero{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 60px;
  text-align:center;
}

.hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.hero-logo{ height:clamp(57px, 8.25vw, 87px); width:auto; }

.hero-tagline{ display:block; }

.hero-tagline-line{
  display:block;
  font-weight:200;
  font-size:16px;
  line-height:32px;
  letter-spacing:5px;
  text-transform:uppercase;
  color: var(--fg);
}
.hero-tagline-line.muted{ color: var(--fg-45); }

/* ---------- About ---------- */

.about-section{
  padding:170px 60px;
  text-align:center;
}

.intro{ display:block; }

.intro-line{
  display:block;
  font-family:"Noto Serif Display", serif;
  font-optical-sizing:auto;
  font-weight:300;
  font-size:26px;
  line-height:1.6;
  letter-spacing:-0.2px;
  color: var(--fg-70);
}

/* ---------- Divisions ---------- */

.division{
  max-width:1040px;
  margin:0 auto;
  padding:96px 40px 110px;
  text-align:center;
}

.division-studio{ padding-top:180px; }

.division-divider{
  max-width:920px;
  margin:0 auto;
  height:1px;
  background:var(--line);
}

.division-title{
  font-family:"Outfit", sans-serif;
  font-weight:400;
  font-size:clamp(20px, 2.4vw, 26px);
  letter-spacing:-0.2px;
  color: var(--fg);
  margin-bottom:56px;
}

.entry-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:72px 56px;
}

.division-lab{ max-width:1240px; }

.division-lab .entry-list{
  grid-template-columns:repeat(4, 1fr);
  gap:72px 64px;
}

.entry{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* Fixed-height box per division so marks of different sizes still
   bottom-align — keeps the description/link text level across a row
   even though each logo is scaled to its own visual weight. */
.mark-box{
  height:71px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.division-lab .mark-box{ height:60px; }

.entry-mark{ height:34px; width:auto; transition:transform .3s ease; }
.entry-mark.small{ height:26px; }

a.entry:hover .entry-mark{ transform:translateY(-3px); }

/* Heights tuned per-mark so visual "ink weight" reads consistent —
   icon-heavy marks (Agenz, Pixel Heart, Almari, Ayuone) need a taller
   box than pure wordmarks (Slate, Archlight) to look the same size. */
.mark-agenz{ height:56px; }
.mark-pixelheart{ height:71px; }
.mark-slate{ height:40px; }
.mark-archlight{ height:60px; }
.mark-almari{ height:41px; }
.mark-ayuone{ height:54px; }

.entry-desc{
  font-size:15px;
  line-height:1.6;
  color: var(--fg-70);
  max-width:38ch;
}

.entry-link{
  position:relative;
  display:inline-block;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.5px;
  color: var(--fg-45);
  transition:color .3s ease;
}
.entry-link.muted{ color: var(--fg-25); }

.entry-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}

a.entry:hover .entry-link{ color: var(--fg); }
a.entry:hover .entry-link::after{ transform:scaleX(1); }

/* ---------- Final / Footer ---------- */

.final-section{
  min-height:70vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:140px 60px;
}

.final-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}

.closing-line{
  display:block;
  font-weight:600;
  font-size:24px;
  line-height:1.6;
  letter-spacing:4px;
  text-transform:uppercase;
  color: var(--fg);
}

.footer-copyright{
  display:block;
  margin-top:28px;
  font-weight:300;
  font-size:12px;
  line-height:1.6;
  letter-spacing:0.5px;
  color: var(--fg-45);
}

.footer-email{
  position:relative;
  display:inline-block;
  margin-top:4px;
  font-weight:300;
  font-size:13px;
  line-height:1.6;
  letter-spacing:0.5px;
  color: var(--fg-45);
  transition:color .3s ease;
}
.footer-email::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.footer-email:hover{ color: var(--fg); }
.footer-email:hover::after{ transform:scaleX(1); }

/* ---------- Responsive ---------- */

@media (max-width:640px){
  .hero, .about-section, .division, .final-section{
    padding-left:24px;
    padding-right:24px;
  }
  .about-section{ padding-top:110px; padding-bottom:110px; }
  .division{ padding-top:56px; padding-bottom:64px; }
  .division-studio{ padding-top:90px; }
  .entry-list{ grid-template-columns:1fr; gap:56px; }
  .division-lab .entry-list{ grid-template-columns:repeat(2, 1fr); gap:40px 24px; }
  .hero-tagline-line{ font-size:13px; letter-spacing:3px; line-height:26px; }
  .closing-line{ font-size:19px; letter-spacing:3px; }
}