:root{
  --paper:#f8f1e7;
  --cream:#fffaf3;
  --ink:#11100e;
  --muted:#493f36;
  --gold:#b89150;
  --gold2:#d5af65;
  --line:rgba(184,145,80,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.035em;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.topbar{
  position:fixed;
  z-index:1000;
  top:0;left:0;right:0;
  display:grid;
  grid-template-columns:330px 1fr;
  align-items:start;
  padding:34px 4.6vw;
  pointer-events:none;
}
.brand,.topbar nav a{pointer-events:auto}
.brand img{width:295px;height:auto;background:transparent}
.topbar nav{
  justify-self:end;
  display:flex;
  gap:28px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:13px;
  font-weight:650;
}
.topbar nav a{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,250,243,.58);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.topbar nav a:hover{background:var(--gold);color:#fff}

.cinema{position:relative}
.scene{
  position:relative;
  min-height:116vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--paper);
}
.scene:not(:first-child){margin-top:-14vh}
.scene-image{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.025);
}
.wash{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 24% 49%,rgba(248,241,231,.88),rgba(248,241,231,.58) 34%,rgba(248,241,231,.10) 70%),
    linear-gradient(90deg,rgba(248,241,231,.72),rgba(248,241,231,.18) 58%,rgba(0,0,0,.03));
}
.wash.soft{
  background:
    radial-gradient(ellipse at 24% 50%,rgba(248,241,231,.74),rgba(248,241,231,.32) 42%,rgba(248,241,231,0) 76%),
    linear-gradient(90deg,rgba(248,241,231,.44),rgba(248,241,231,.04) 66%);
}
.contact-wash{
  background:
    radial-gradient(ellipse at 22% 45%,rgba(248,241,231,.96),rgba(248,241,231,.70) 38%,rgba(248,241,231,.16) 72%),
    linear-gradient(90deg,rgba(248,241,231,.86),rgba(248,241,231,.23) 60%);
}
.story{
  position:relative;
  z-index:5;
  width:min(650px,43vw);
  margin-left:5.3vw;
  padding:40px 44px;
  border-radius:38px;
  background:rgba(255,250,243,.58);
  border:1px solid var(--line);
  backdrop-filter:blur(22px);
  box-shadow:0 28px 90px rgba(120,88,44,.09);
}
.hero .story{
  background:rgba(255,250,243,.28);
  box-shadow:none;
  border-color:rgba(184,145,80,.07);
}
.story span,.section-head span,.material-intro span,.contact-grid span{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:13px;
  font-weight:650;
  color:var(--gold);
  border-bottom:1px solid rgba(184,145,80,.66);
  padding-bottom:12px;
  margin-bottom:24px;
}
h1,h2{
  margin:0 0 28px;
  font-size:clamp(62px,7vw,132px);
  line-height:.9;
  text-transform:uppercase;
  font-weight:250;
  letter-spacing:-.08em;
}
.story p,.section-head p,.service-orbit p,.material-intro p,.material-tiles p,.contact-grid p{
  margin:0 0 20px;
  font-size:20px;
  line-height:1.58;
  color:var(--muted);
}
.start{
  display:inline-flex;
  gap:16px;
  align-items:center;
  margin-top:16px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:650;
}
.start:before{
  content:"↓";
  display:grid;
  place-items:center;
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:22px;
}
.liquid{
  position:absolute;
  left:-10vw;right:-10vw;bottom:-10vh;
  height:25vh;
  z-index:3;
  pointer-events:none;
  background:rgba(248,241,231,.96);
  border-radius:52% 48% 0 0/64% 56% 0 0;
  transform:rotate(.75deg);
  filter:drop-shadow(0 -12px 30px rgba(255,255,255,.58));
}
.scene:nth-child(even) .liquid{
  border-radius:38% 62% 0 0/70% 48% 0 0;
  transform:rotate(-.8deg);
}

.services{
  position:relative;
  z-index:4;
  min-height:138vh;
  margin-top:-14vh;
  padding:24vh 5.4vw 22vh;
  background:linear-gradient(180deg,#f8f1e7 0%,#fffaf3 45%,#f8f1e7 100%);
  overflow:hidden;
  isolation:isolate;
}
.soft-field{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 14%,rgba(255,255,255,.86),rgba(255,255,255,0) 32%),
    radial-gradient(circle at 8% 88%,rgba(184,145,80,.12),rgba(184,145,80,0) 38%);
}
.section-head{position:relative;z-index:2;max-width:1120px}
.section-head h2{font-size:clamp(52px,6.2vw,112px)}
.section-head em{font-style:normal;color:var(--gold)}
.service-orbit{
  position:relative;
  z-index:2;
  margin-top:11vh;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.service-orbit article{
  min-height:385px;
  padding:34px 28px;
  border-radius:36px;
  background:rgba(255,250,243,.58);
  border:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.service-orbit small{
  color:var(--gold);
  letter-spacing:.16em;
}
.service-orbit h3{
  font-size:clamp(30px,3vw,50px);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:310;
  margin:26px 0 20px;
}
.service-orbit p{font-size:17px}
.service-liquid{bottom:-12vh}

.materials{
  position:relative;
  min-height:132vh;
  margin-top:-12vh;
  padding:20vh 5.2vw 24vh;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  align-items:center;
}
.material-image{
  position:absolute;
  inset:0;
  z-index:0;
  width:115%;
  height:100%;
  max-width:none;
  object-fit:cover;
  transform:translateX(var(--mx,0));
  transition:transform .08s linear;
}
.material-wash{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 29% 44%,rgba(248,241,231,.90),rgba(248,241,231,.50) 36%,rgba(248,241,231,.10) 76%),
    linear-gradient(90deg,rgba(248,241,231,.70),rgba(248,241,231,.08) 68%);
}
.material-intro{
  position:relative;
  z-index:4;
  max-width:690px;
  margin-bottom:7vh;
}
.material-intro h2{font-size:clamp(58px,7vw,124px)}
.material-intro p{max-width:480px}
.material-tiles{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  max-width:1240px;
  margin-left:auto;
}
.material-tiles article{
  min-height:210px;
  padding:26px 24px;
  border-radius:30px;
  background:rgba(255,250,243,.62);
  border:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.material-tiles article:first-child{grid-column:span 2}
.material-tiles h3{
  margin:0 0 14px;
  font-size:clamp(25px,2.2vw,38px);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:315;
}
.material-tiles p{font-size:16px;margin:0}
.material-liquid{bottom:-11vh}

.excellence-words{
  position:relative;
  z-index:5;
  margin-left:5.3vw;
  width:min(980px,78vw);
}
.excellence-words b{
  display:block;
  font-size:clamp(70px,10vw,178px);
  line-height:.88;
  text-transform:uppercase;
  font-weight:240;
  letter-spacing:-.085em;
}
.excellence-words b:nth-child(2){margin-left:9vw;color:var(--gold)}
.excellence-words b:nth-child(3){margin-left:18vw}
.excellence-words p{
  margin:42px 0 0 18vw;
  max-width:540px;
  font-size:22px;
  line-height:1.55;
  color:var(--muted);
}

.contact-grid{
  position:relative;
  z-index:5;
  width:100%;
  display:grid;
  grid-template-columns:minmax(360px,640px) minmax(320px,520px);
  gap:8vw;
  align-items:center;
  padding:18vh 5.5vw 12vh;
}
.contact-grid address{
  font-style:normal;
  font-size:18px;
  line-height:1.72;
  color:var(--muted);
  margin-top:32px;
}
.contact-grid form{
  display:grid;
  gap:16px;
  padding:42px;
  border-radius:34px;
  background:rgba(255,250,243,.64);
  border:1px solid var(--line);
  backdrop-filter:blur(22px);
}
.contact-grid input,.contact-grid textarea{
  border:0;
  border-bottom:1px solid rgba(0,0,0,.28);
  background:transparent;
  padding:14px 0;
  font:inherit;
  font-size:16px;
  outline:none;
}
.contact-grid button{
  justify-self:start;
  margin-top:10px;
  border:0;
  border-radius:999px;
  padding:16px 28px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  color:white;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:12px;
  cursor:pointer;
}
.honeypot{position:absolute;left:-9999px}

.footer{
  background:#070707;
  color:white;
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-start;
  padding:46px 5vw 60px;
}
.footer img{width:260px;filter:invert(1)}
.footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:18px 28px;
  max-width:640px;
}
.footer a{color:rgba(255,255,255,.72);font-size:13px}

.reveal{
  opacity:0;
  transform:translateY(42px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{opacity:1;transform:translateY(0)}

@media(max-width:980px){
  .topbar{grid-template-columns:1fr;padding:24px 22px}
  .brand img{width:215px}
  .topbar nav{display:none}
  .scene{min-height:100vh}
  .scene:not(:first-child),.services,.materials{margin-top:-5vh}
  .story{width:auto;margin:18vh 24px 0;padding:30px 28px;border-radius:28px}
  h1,h2{font-size:52px}
  .story p,.service-orbit p,.material-intro p,.material-tiles p,.contact-grid p{font-size:16px}
  .services{min-height:auto;padding:17vh 24px 13vh}
  .service-orbit{grid-template-columns:1fr;margin-top:56px}
  .service-orbit article{min-height:0}
  .materials{min-height:auto;padding:14vh 24px 13vh}
  .material-image{width:100%;transform:none!important}
  .material-intro{margin-bottom:42px}
  .material-tiles{grid-template-columns:1fr;margin-left:0}
  .material-tiles article:first-child{grid-column:auto}
  .excellence-words{width:auto;margin:18vh 24px 0}
  .excellence-words b{font-size:54px}
  .excellence-words b:nth-child(2),.excellence-words b:nth-child(3){margin-left:0}
  .excellence-words p{margin-left:0;font-size:17px}
  .contact-grid{grid-template-columns:1fr;padding:18vh 24px 90px}
  .contact-grid form{padding:28px}
  .footer{display:block}
  .footer img{width:205px;margin-bottom:28px}
  .footer nav{justify-content:flex-start}
}