*,
*::before,
*::after{box-sizing:border-box}

:root{
  --cream:#f1ece3;
  --cream2:#e9e1d4;
  --ink:#171714;
  --muted:#70695f;
  --dark:#11110f;
  --white:#f7f3ec;
  --sand:#d7c4a3;
  --line:rgba(23,23,20,.14);
  --line-light:rgba(255,255,255,.15);
  --max:1240px;
}

html{scroll-behavior:smooth;background:var(--cream)}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:0 4vw;
  background:rgba(241,236,227,.90);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(23,23,20,.06);
}

.brand{display:flex;align-items:center;text-decoration:none}
.brand img{display:block;width:166px;max-height:50px;object-fit:contain}

.nav{display:flex;align-items:center;gap:24px}
.nav a{
  color:rgba(23,23,20,.70);
  text-decoration:none;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:color .25s ease;
}
.nav a:hover{color:var(--ink)}

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  font:inherit;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.wrap{width:min(var(--max),90vw);margin:0 auto}
.reading{max-width:920px}

.hero,.section,.closing{position:relative;display:flex;align-items:center}
.hero{
  min-height:94vh;
  padding:136px 0 96px;
  background:
    radial-gradient(circle at 82% 18%,rgba(170,136,83,.10),transparent 30%),
    var(--cream);
}
.section{padding:138px 0}
.closing{min-height:90vh;padding:150px 0}

.eyebrow{
  margin:0 0 26px;
  color:rgba(23,23,20,.66);
  font-size:9.5px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.30em;
  text-transform:uppercase;
}

h1,h2,h3,p{margin-top:0}

h1,h2,h3,.human-line,.world-list,.world-statement,.inquiry-item,.closing-pre{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

h1{
  max-width:860px;
  margin-bottom:28px;
  font-size:clamp(50px,6.15vw,86px);
  line-height:1.015;
  letter-spacing:-.038em;
  text-wrap:balance;
}

.hero-sub{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.52;
}

.world{color:var(--white);background:var(--dark)}
.world .eyebrow,.institute .eyebrow{color:rgba(255,255,255,.56)}

.world h2,.institute h2{
  max-width:860px;
  margin-bottom:40px;
  font-size:clamp(35px,4.15vw,57px);
  line-height:1.075;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.world-list{
  margin:0 0 42px;
  padding:26px 0;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  color:rgba(255,255,255,.93);
  font-size:clamp(24px,2.45vw,35px);
  line-height:1.42;
}

.world-statement{
  max-width:840px;
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:clamp(22px,2.15vw,31px);
  line-height:1.36;
}

.human{min-height:96vh;background:var(--cream2)}
.human-sequence{display:grid;gap:54px;max-width:900px;padding:18px 0 12px}
.human-line{margin:0;line-height:1.10;letter-spacing:-.026em}
.human-line-1{max-width:810px;color:var(--ink);font-size:clamp(34px,4vw,54px)}
.human-line-2{
  max-width:700px;
  margin-left:7vw;
  color:#776f64;
  font-size:clamp(28px,3.25vw,44px);
  font-style:italic;
}
.human-line-3{
  max-width:860px;
  margin-left:13vw;
  color:#11110f;
  font-size:clamp(38px,4.45vw,60px);
}

.logo-moment{
  min-height:62vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:108px 6vw;
  background:var(--cream);
}
.logo-frame{
  position:relative;
  width:min(620px,74vw);
  padding:54px 40px;
  text-align:center;
}
.logo-frame::before,.logo-frame::after{
  content:"";
  position:absolute;
  left:50%;
  width:72px;
  height:1px;
  background:rgba(23,23,20,.20);
  transform:translateX(-50%);
}
.logo-frame::before{top:0}
.logo-frame::after{bottom:0}
.logo-frame img{display:block;width:min(520px,64vw);height:auto;margin:0 auto}

.institute{
  color:var(--white);
  background:
    radial-gradient(circle at 82% 22%,rgba(172,138,84,.20),transparent 30%),
    linear-gradient(145deg,#393b37 0%,#181916 50%,#0f0f0e 100%);
}
.institute-lines{margin-top:44px;padding-top:32px;border-top:1px solid var(--line-light)}
.institute-lines p{
  margin:0 0 10px;
  color:rgba(255,255,255,.70);
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.45;
}
.institute-lines .emphasis{
  margin-top:18px;
  color:var(--white);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,2.35vw,33px);
  letter-spacing:-.015em;
}

.work{background:var(--sand)}
.section-title{
  max-width:760px;
  margin-bottom:48px;
  font-size:clamp(33px,3.8vw,51px);
  line-height:1.085;
  letter-spacing:-.024em;
}

.four-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  border:1px solid rgba(23,23,20,.16);
  background:rgba(23,23,20,.16);
}
.card{
  min-height:300px;
  display:flex;
  flex-direction:column;
  padding:26px 24px 30px;
  background:var(--sand);
}
.num{
  display:block;
  margin-bottom:64px;
  color:rgba(23,23,20,.55);
  font-size:9px;
  letter-spacing:.18em;
}
.card h3{margin-bottom:14px;font-size:clamp(27px,2.55vw,35px);line-height:1.03;letter-spacing:-.018em}
.card p{margin:0;color:rgba(23,23,20,.70);font-size:15px;line-height:1.5}

.inquiry{background:var(--cream)}
.inquiry-heading{margin-bottom:22px}
.inquiry-intro{
  max-width:880px;
  margin:0 0 46px;
  color:rgba(23,23,20,.70);
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.52;
}
.inquiry-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.inquiry-item{
  min-height:112px;
  display:flex;
  align-items:center;
  padding:22px 26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:clamp(22px,2.3vw,32px);
  line-height:1.05;
}

.closing{color:var(--white);background:var(--dark)}
.closing-pre{
  max-width:760px;
  margin-bottom:28px;
  color:rgba(255,255,255,.62);
  font-size:clamp(23px,2.65vw,36px);
  line-height:1.24;
}
.closing h2{
  margin-bottom:48px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,5vw,68px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.032em;
}
.email{
  display:inline-block;
  padding-bottom:6px;
  color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.42);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.025em;
}
.email:hover{color:var(--white);border-bottom-color:rgba(255,255,255,.8)}

footer{
  padding:24px 4vw;
  background:var(--dark);
  color:rgba(255,255,255,.28);
  border-top:1px solid rgba(255,255,255,.07);
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .72s cubic-bezier(.2,.65,.2,1),transform .72s cubic-bezier(.2,.65,.2,1);
}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .site-header{height:72px}
  .brand img{width:148px}
  .menu-toggle{display:block}
  .nav{
    position:absolute;
    top:72px;left:0;right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:24px 4vw 30px;
    background:rgba(241,236,227,.98);
    border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex}
  .hero{min-height:88vh;padding:120px 0 84px}
  .section{padding:110px 0}
  .logo-moment{min-height:46vh;padding:82px 5vw}
  .four-grid{grid-template-columns:1fr 1fr}
  .human-line-2,.human-line-3{margin-left:0}
  .human-sequence{gap:40px}
}

@media(max-width:640px){
  .site-header{padding:0 5vw}
  .brand img{width:138px}
  .wrap{width:min(var(--max),88vw)}
  h1{font-size:clamp(44px,12.5vw,62px)}
  .world h2,.institute h2,.section-title{font-size:clamp(33px,9vw,46px)}
  .world-list{font-size:clamp(23px,7vw,31px)}
  .four-grid,.inquiry-grid{grid-template-columns:1fr}
  .card{min-height:auto}
  .num{margin-bottom:42px}
  .logo-frame{width:min(560px,84vw);padding:42px 20px}
  .logo-frame img{width:min(480px,76vw)}
  .closing{min-height:78vh;padding:120px 0 110px}
  footer{padding:22px 5vw}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}