:root{
  --ivory:#f4eee7;
  --ivory-2:#ece3d9;
  --paper:#f8f4ef;
  --ink:#1b1816;
  --wine:#3a0d16;
  --muted:#756d67;
  --line:rgba(27,24,22,.19);
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Manrope",sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
button,input,textarea{font:inherit}
button,a{color:inherit}
a{text-decoration:none}
.grain{
  pointer-events:none;
  position:fixed;inset:0;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.site-header{
  position:sticky;top:0;z-index:30;
  height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 42px;border-bottom:1px solid var(--line);
  background:rgba(244,238,231,.88);backdrop-filter:blur(16px);
}
.wordmark{
  font-family:"Cormorant Garamond",serif;
  font-size:24px;letter-spacing:.24em;font-weight:600;
}
.desktop-nav{display:flex;gap:30px;font-size:12px;text-transform:uppercase;letter-spacing:.13em}
.desktop-nav a{position:relative}
.desktop-nav a:after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--ink);transition:.3s;
}
.desktop-nav a:hover:after{right:0}
.header-actions{justify-self:end;display:flex;align-items:center;gap:16px}
.lang-switch,.menu-button{
  border:0;background:transparent;text-transform:uppercase;font-size:11px;letter-spacing:.13em;cursor:pointer;
}
.menu-button{display:none}
.outline-button,.dark-button,.light-button{
  border:1px solid var(--ink);background:transparent;padding:13px 18px;text-transform:uppercase;
  letter-spacing:.12em;font-size:10px;cursor:pointer;transition:.25s;
}
.outline-button:hover{background:var(--ink);color:var(--ivory)}
.dark-button{background:var(--ink);color:var(--ivory)}
.dark-button:hover{background:var(--wine)}
.light-button{border-color:var(--ivory);color:var(--ivory)}
.light-button:hover{background:var(--ivory);color:var(--ink)}
.mobile-menu{display:none}

.hero{
  min-height:calc(100vh - 82px);
  max-width:var(--max);margin:auto;position:relative;
  display:grid;grid-template-columns:1.05fr 1.2fr .9fr;grid-template-rows:auto auto;
  gap:24px;padding:50px 42px 70px;
}
.hero-copy{align-self:center;padding:40px 10px 20px;z-index:2}
.eyebrow,.small-copy,.section-number{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}
.hero h1,.manifesto h2,.services h2,.about h2,.closing h2,.modal-panel h2{
  font-family:"Cormorant Garamond",serif;font-weight:400;line-height:.92;margin:18px 0;
}
.hero h1{font-size:clamp(52px,7vw,104px);max-width:800px}
.hero-intro{max-width:570px;line-height:1.75;font-size:15px}
.hero-links{display:flex;gap:28px;margin-top:35px;flex-wrap:wrap}
.text-link{
  border-bottom:1px solid var(--ink);padding-bottom:5px;text-transform:uppercase;font-size:10px;letter-spacing:.13em;
}
.button-link{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.hero-media{overflow:hidden;position:relative}
.media-left{grid-row:1 / span 2;min-height:670px;align-self:center}
.media-right{align-self:end;min-height:360px}
.media-placeholder{
  width:100%;height:100%;min-height:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:9px;border:1px solid rgba(27,24,22,.14);
  background:
    linear-gradient(130deg,rgba(58,13,22,.15),transparent 55%),
    linear-gradient(25deg,#c9b9aa,#e8ded4);
  color:rgba(27,24,22,.72);
}
.media-placeholder.light{background:linear-gradient(140deg,#efe7df,#cbbdac)}
.media-placeholder.dark{background:linear-gradient(135deg,#2e2824,#120e0c);color:#f5eee7}
.media-placeholder.portrait{background:linear-gradient(145deg,#d7c8bb,#a89282)}
.media-placeholder span{font-family:"Cormorant Garamond",serif;font-size:34px;letter-spacing:.08em}
.media-placeholder small{font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.hero-logo-card{
  position:absolute;right:4%;top:9%;width:190px;background:var(--paper);padding:12px;
  box-shadow:0 14px 50px rgba(35,24,18,.09);transform:rotate(1.5deg);z-index:3;
}
.hero-logo-card img{width:100%;display:block}
.side-note{
  position:absolute;right:-15px;bottom:150px;transform:rotate(90deg);
  transform-origin:right bottom;font-size:9px;letter-spacing:.16em;
}
.manifesto,.services,.love{max-width:var(--max);margin:auto;padding:120px 42px;border-top:1px solid var(--line)}
.manifesto-grid{display:grid;grid-template-columns:.8fr 1.7fr 1fr;gap:50px;margin-top:42px}
.manifesto h2{font-size:clamp(42px,5vw,76px)}
.manifesto-body{align-self:end;line-height:1.75;font-size:14px}
.manifesto-body p+p{margin-top:24px}

.work{padding:120px 0 110px;border-top:1px solid var(--line);overflow:hidden}
.section-heading{max-width:var(--max);margin:auto;padding:0 42px 50px}
.section-heading h2,.love-heading h2{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(58px,9vw,130px);
  margin:22px 0 0;line-height:.85;
}
.section-heading em,.love-heading em{font-weight:400}
.reel-grid{
  display:grid;grid-template-columns:repeat(3, minmax(260px,1fr));
  gap:18px;padding:0 42px;max-width:var(--max);margin:auto;align-items:end;
}
.reel-card{aspect-ratio:9/16;overflow:hidden}
.reel-card-2{transform:translateY(55px)}
.reel-card-3{transform:translateY(-25px)}
.reel-placeholder{
  height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
  border:1px solid rgba(27,24,22,.15);position:relative;overflow:hidden;
  background:linear-gradient(160deg,#d6c8bb 0%,#ad9789 46%,#3f332e 100%);
  color:white;
}
.reel-card-2 .reel-placeholder{background:linear-gradient(160deg,#e3d9d0 0%,#b7a394 45%,#6b574e 100%)}
.reel-card-3 .reel-placeholder{background:linear-gradient(160deg,#c6b3a5 0%,#71594e 52%,#2b211d 100%)}
.reel-placeholder:before{
  content:"";position:absolute;inset:0;background:linear-gradient(transparent 48%,rgba(0,0,0,.36));pointer-events:none
}
.reel-placeholder span,.reel-placeholder strong,.reel-placeholder small{position:relative;z-index:1}
.reel-placeholder span{font-size:10px;letter-spacing:.18em}
.reel-placeholder strong{font-family:"Cormorant Garamond",serif;font-size:54px;font-weight:400}
.reel-placeholder small{text-transform:uppercase;letter-spacing:.13em;font-size:9px}
.work-footer{
  max-width:var(--max);margin:105px auto 0;padding:0 42px;
  display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:26px;
}
.work-footer p{font-family:"Cormorant Garamond",serif;font-size:22px}

.services-head{display:grid;grid-template-columns:.6fr 1.7fr;gap:50px;margin:40px 0 60px}
.services h2{font-size:clamp(46px,5.5vw,82px);max-width:1000px}
.service-list{border-top:1px solid var(--line)}
.service-list article{
  display:grid;grid-template-columns:70px 1fr 50px;gap:30px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.service-list article>span{font-size:10px;letter-spacing:.14em}
.service-list h3{font-family:"Cormorant Garamond",serif;font-size:36px;font-weight:400;margin:0 0 7px}
.service-list p{max-width:740px;line-height:1.7;font-size:13px;margin:0;color:var(--muted)}
.service-list button{border:0;background:transparent;font-size:22px;cursor:pointer}

.about{
  max-width:var(--max);margin:auto;padding:120px 42px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;
}
.about-media{min-height:700px}
.about-media .media-placeholder{min-height:700px}
.about-copy h2{font-size:clamp(46px,5vw,76px)}
.about-copy>p:not(.section-number):not(.small-copy){max-width:600px;line-height:1.8;font-size:14px}
.about-copy .text-link{display:inline-block;margin-top:25px}

.love-heading{display:grid;grid-template-columns:1.7fr .7fr;gap:40px;align-items:end;margin:40px 0 60px}
.love-heading p{line-height:1.7;font-size:13px}
.testimonial-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:18px}
.testimonial-card{min-height:320px;border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.text-card .quote{font-family:"Cormorant Garamond",serif;font-size:100px;line-height:.6}
.text-card p{font-family:"Cormorant Garamond",serif;font-size:29px;line-height:1.1}
.text-card small,.screenshot-card small{font-size:9px;letter-spacing:.15em}
.voice-card{align-items:center;justify-content:center;gap:28px;background:var(--wine);color:var(--ivory)}
.waveform{display:flex;align-items:center;gap:5px;height:70px}
.waveform i{width:2px;background:currentColor;display:block}
.waveform i:nth-child(1){height:14px}.waveform i:nth-child(2){height:28px}.waveform i:nth-child(3){height:45px}.waveform i:nth-child(4){height:30px}.waveform i:nth-child(5){height:58px}.waveform i:nth-child(6){height:40px}.waveform i:nth-child(7){height:22px}.waveform i:nth-child(8){height:50px}.waveform i:nth-child(9){height:32px}.waveform i:nth-child(10){height:16px}
.play-button{width:52px;height:52px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit}
.screenshot-card{background:#ded2c6;justify-content:center}
.message-bubble{background:rgba(255,255,255,.72);padding:22px;border-radius:20px 20px 20px 4px;margin-bottom:30px}
.message-bubble p{font-size:14px;line-height:1.6}
.message-bubble span{display:block;text-align:right;font-size:9px;color:var(--muted)}

.closing{position:relative;min-height:760px;overflow:hidden}
.closing-media,.closing-media .media-placeholder{min-height:760px}
.closing-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--ivory);padding:40px;background:rgba(20,14,12,.18)
}
.closing h2{font-size:clamp(62px,8vw,118px);max-width:1000px}
.closing p:not(.eyebrow){font-size:14px;margin:0 0 30px}

footer{
  max-width:var(--max);margin:auto;padding:40px 42px 55px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;border-top:1px solid var(--line)
}
footer div{display:flex;flex-direction:column;gap:5px}
footer strong{font-family:"Cormorant Garamond",serif;font-size:22px;letter-spacing:.18em}
footer span,footer a,footer p{font-size:9px;letter-spacing:.14em;text-transform:uppercase}
footer p{text-align:right;margin:0}

.inquiry-modal{position:fixed;inset:0;z-index:100;display:none}
.inquiry-modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(24,18,15,.55);backdrop-filter:blur(7px)}
.modal-panel{
  position:absolute;right:0;top:0;height:100%;width:min(720px,100%);background:var(--paper);
  padding:60px;overflow:auto;box-shadow:-30px 0 80px rgba(0,0,0,.12)
}
.modal-close{position:absolute;right:25px;top:18px;border:0;background:none;font-size:36px;font-weight:200;cursor:pointer}
.modal-panel h2{font-size:62px}
.modal-intro{line-height:1.7;color:var(--muted);max-width:570px}
#inquiryForm{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
#inquiryForm label{display:flex;flex-direction:column;gap:8px}
#inquiryForm label span{font-size:9px;letter-spacing:.14em;text-transform:uppercase}
#inquiryForm input,#inquiryForm textarea{
  width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:11px 0;outline:none;
}
#inquiryForm textarea{resize:vertical}
.full{grid-column:1 / -1}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.copy-status{font-size:12px;color:var(--wine)}
body.modal-open{overflow:hidden}

@media(max-width:1000px){
  .desktop-nav,.desktop-cta{display:none}
  .menu-button{display:block}
  .site-header{grid-template-columns:1fr auto;padding:0 22px;height:72px}
  .header-actions{gap:10px}
  .mobile-menu{
    position:fixed;inset:72px 0 auto 0;background:var(--paper);z-index:40;
    border-bottom:1px solid var(--line);padding:24px 22px;flex-direction:column;gap:16px;
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a,.mobile-menu button{
    font-family:"Cormorant Garamond",serif;font-size:32px;text-align:left;border:0;background:none;padding:0
  }
  .hero{
    min-height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:14px;padding:28px 22px 60px
  }
  .hero-copy{grid-column:1 / -1;order:-2;padding:50px 0 20px}
  .hero h1{font-size:70px}
  .media-left{grid-row:auto;min-height:520px}
  .media-right{min-height:340px;align-self:stretch}
  .hero-logo-card{width:145px;top:42%;right:7%}
  .side-note{display:none}
  .manifesto,.services,.love{padding:90px 22px}
  .manifesto-grid{grid-template-columns:1fr 1.5fr;gap:30px}
  .manifesto-body{grid-column:2}
  .reel-grid,.section-heading,.work-footer{padding-left:22px;padding-right:22px}
  .services-head{grid-template-columns:1fr}
  .about{padding:90px 22px;gap:40px}
  .about-media,.about-media .media-placeholder{min-height:560px}
  .love-heading{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr 1fr}
  .screenshot-card{grid-column:1 / -1}
}
@media(max-width:700px){
  .wordmark{font-size:19px}
  .hero{display:flex;flex-direction:column}
  .hero-copy{order:0;padding-top:40px}
  .hero h1{font-size:54px}
  .hero-intro{font-size:14px}
  .media-left{order:1;min-height:540px}
  .hero-logo-card{position:relative;order:2;top:auto;right:auto;width:145px;margin:-75px 0 0 auto;transform:rotate(2deg)}
  .media-right{order:3;min-height:290px;margin-top:20px}
  .manifesto-grid{grid-template-columns:1fr}
  .manifesto-body{grid-column:auto}
  .manifesto h2{font-size:48px}
  .reel-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:25px}
  .reel-card{min-width:78vw;transform:none!important;scroll-snap-align:center}
  .work-footer{margin-top:45px;align-items:flex-start;flex-direction:column;gap:20px}
  .service-list article{grid-template-columns:38px 1fr 28px;gap:15px}
  .service-list h3{font-size:29px}
  .about{grid-template-columns:1fr}
  .about-media,.about-media .media-placeholder{min-height:520px}
  .testimonial-grid{grid-template-columns:1fr}
  .screenshot-card{grid-column:auto}
  .closing,.closing-media,.closing-media .media-placeholder{min-height:650px}
  footer{grid-template-columns:1fr;gap:25px;padding:35px 22px}
  footer p{text-align:left}
  .modal-panel{padding:50px 22px 35px}
  .modal-panel h2{font-size:48px}
  #inquiryForm{grid-template-columns:1fr}
  .full{grid-column:auto}
}