*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:     #1A1714;
  --ink-mid: #3D3830;
  --ink-dim: #7A7068;
  --ink-faint:#B8AFA4;
  --paper:   #F5F0E8;
  --paper2:  #EDE8DF;
  --rule:    #D4CCBF;
  --teal:    #2D6A5F;
  --teal-lt: #3D8A7C;
  --display: 'Playfair Display', Georgia, serif;
  --mono:    'IBM Plex Mono', 'Courier New', monospace;
  --sans:    'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grain overlay */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:998;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;height:54px;
  border-bottom:1px solid var(--rule);
  background:rgba(245,240,232,.96);
  backdrop-filter:blur(16px);
}
.nav-wordmark{
  font-family:var(--mono);font-size:10px;font-weight:300;
  letter-spacing:.14em;color:var(--ink-dim);
}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-a{
  font-family:var(--mono);font-size:9px;font-weight:300;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;transition:color .2s;
}
.nav-a:hover{color:var(--ink)}
.nav-cta{
  font-family:var(--mono);font-size:9px;font-weight:400;
  letter-spacing:.06em;color:var(--teal);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.nav-cta:hover{border-bottom-color:var(--teal)}

/* HERO */
.hero{
  min-height:100vh;
  display:grid;grid-template-rows:1fr auto;
  padding:130px 60px 80px;
  border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden;
}

/* large watermark numeral */
.hero-watermark{
  position:absolute;right:-20px;top:50%;transform:translateY(-60%);
  font-family:var(--display);
  font-size:clamp(280px,38vw,560px);
  font-weight:900;font-style:italic;
  color:rgba(26,23,20,.03);
  line-height:1;pointer-events:none;user-select:none;
  letter-spacing:-.04em;
}

.hero-top{display:flex;flex-direction:column;justify-content:center;position:relative}

.hero-eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:300;
  letter-spacing:.22em;color:var(--ink-dim);
  margin-bottom:44px;
  display:flex;align-items:center;gap:14px;
  animation:fadeUp .5s ease .05s both;
}
.eyebrow-pip{
  width:6px;height:6px;border-radius:50%;
  background:var(--teal);flex-shrink:0;
  animation:pulse 3.5s ease infinite;
}

h1.hero-name{
  font-family:var(--display);
  font-size:clamp(68px,11vw,148px);
  font-weight:400;line-height:.84;letter-spacing:-.02em;
  color:var(--ink);
  animation:fadeUp .75s ease .1s both;
}
h1.hero-name em{
  font-style:italic;font-weight:400;
  color:var(--ink-dim);display:block;
}

.hero-bottom{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);
  padding-top:44px;margin-top:72px;
  animation:fadeUp .6s ease .22s both;
}
.hero-bl{padding-right:60px;border-right:1px solid var(--rule)}
.hero-br{padding-left:60px;display:flex;flex-direction:column;justify-content:space-between}

.hero-lede{
  font-size:17px;line-height:1.9;
  color:var(--ink-mid);max-width:540px;
}
.hero-lede strong{color:var(--ink);font-weight:400}

.lab-label{
  font-family:var(--mono);font-size:9px;font-weight:300;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:10px;
}
.lab-name{
  font-family:var(--display);font-size:20px;font-weight:500;
  font-style:italic;color:var(--ink);line-height:1.2;
}
.lab-sub{
  font-family:var(--mono);font-size:10px;font-weight:300;
  color:var(--ink-dim);margin-top:6px;letter-spacing:.04em;
}

.triad-footer{margin-top:auto;padding-top:36px;border-top:1px solid var(--rule)}
.triad-footer-label{
  font-family:var(--mono);font-size:9px;font-weight:300;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:14px;
}
.triad-names{display:flex}
.tname{
  font-family:var(--display);font-size:14px;font-weight:400;
  color:var(--ink-mid);padding-right:22px;
  border-right:1px solid var(--rule);margin-right:22px;line-height:1.3;
}
.tname:last-child{border-right:none;margin-right:0;padding-right:0}
.tname small{
  display:block;font-family:var(--mono);font-size:8px;font-weight:300;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:3px;
}

/* SHARED SECTION */
.section{padding:96px 60px;border-bottom:1px solid var(--rule)}
.section-inner{max-width:1100px;margin:0 auto}
.sec-hdr{display:grid;grid-template-columns:64px 1fr;gap:36px;margin-bottom:72px;align-items:baseline}
.sec-n{
  font-family:var(--mono);font-size:10px;font-weight:300;
  color:var(--ink-faint);letter-spacing:.1em;padding-top:8px;
}
.sec-t{
  font-family:var(--display);font-size:34px;font-weight:400;
  font-style:italic;color:var(--ink);
}

/* PRINCIPLE BLOCK */
.principle-block{max-width:840px}
.principle-statement{
  font-family:var(--display);
  font-size:clamp(22px,3vw,34px);
  font-weight:400;font-style:italic;
  color:var(--ink);line-height:1.3;
  border-left:2px solid var(--teal);
  padding-left:32px;margin-bottom:40px;
}
.principle-body{
  font-size:17px;color:var(--ink-mid);line-height:1.95;
  padding-left:32px;
  border-left:2px solid transparent;
}
.principle-body strong{color:var(--ink);font-weight:400}

/* TRIAD CARDS */
.triad-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--ink);
}
.agent{
  padding:44px 52px 44px 0;
  border-right:1px solid var(--rule);
  transition:background .3s;
}
.agent:hover{background:rgba(26,23,20,.025)}
.agent:nth-child(2){padding-left:52px}
.agent:last-child{border-right:none;padding-right:0;padding-left:52px}
.agent-role{
  font-family:var(--mono);font-size:9px;font-weight:300;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px;opacity:.85;
}
.agent-name{
  font-family:var(--display);font-size:44px;font-weight:700;
  font-style:italic;color:var(--ink);
  line-height:.9;margin-bottom:28px;
}
.agent-body{font-size:15px;color:var(--ink-mid);line-height:1.9}
.agent-body strong{color:var(--ink);font-weight:400}
.agent-body em{font-style:italic;color:var(--ink-dim)}

/* PRODUCTS */
.products-grid{display:flex;flex-direction:column;gap:0}
.product{
  display:grid;grid-template-columns:280px 1fr;gap:64px;
  padding:44px 0;border-top:1px solid var(--rule);align-items:start;
}
.product:last-child{border-bottom:1px solid var(--rule)}
.product-left{}
.product-name{
  font-family:var(--display);font-size:36px;font-weight:700;
  font-style:italic;color:var(--ink);line-height:1;margin-bottom:8px;
}
.product-status{
  font-family:var(--mono);font-size:9px;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;
}
.status-soon{color:var(--teal)}
.status-dev{color:var(--ink-faint)}
.product-type{
  font-family:var(--mono);font-size:9px;font-weight:300;
  letter-spacing:.12em;color:var(--ink-dim);
  margin-top:16px;line-height:1.8;
}
.product-right{}
.product-desc{
  font-size:16px;color:var(--ink-mid);line-height:1.9;
  margin-bottom:16px;
}
.product-desc strong{color:var(--ink);font-weight:400}
.product-principle{
  font-family:var(--mono);font-size:11px;font-weight:300;
  font-style:italic;color:var(--teal);
  border-left:1px solid var(--teal);
  padding-left:16px;line-height:1.8;
  opacity:.8;
}

/* CONTACT */
.contact-section{
  padding:112px 60px;
  display:grid;grid-template-columns:1fr 1fr;gap:96px;
  align-items:end;
}
.contact-statement{
  font-family:var(--display);
  font-size:clamp(36px,5vw,62px);
  font-weight:400;line-height:1.0;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:36px;
}
.contact-statement em{font-style:italic;color:var(--ink-dim)}
.contact-axiom{
  font-family:var(--mono);font-size:11px;font-weight:300;
  font-style:italic;color:var(--ink-dim);
  border-top:1px solid var(--rule);padding-top:20px;
  line-height:1.8;
}
.contact-name-display{
  font-family:var(--display);font-size:26px;font-weight:400;
  font-style:italic;color:var(--ink);
  margin-bottom:24px;line-height:1.2;
}
.contact-body{
  font-size:16px;color:var(--ink-mid);line-height:1.95;
  margin-bottom:28px;
}
.contact-body strong{color:var(--ink);font-weight:400}
.contact-links{
  font-family:var(--mono);font-size:12px;font-weight:300;
  line-height:2.4;border-top:1px solid var(--rule);padding-top:20px;
  color:var(--ink-dim);
}
.contact-links a{
  color:var(--teal);text-decoration:none;transition:opacity .2s;
}
.contact-links a:hover{opacity:.7}

/* FOOTER */
footer{
  padding:28px 60px;
  display:flex;justify-content:space-between;align-items:center;
  background:var(--paper2);border-top:1px solid var(--rule);
}
.footer-l{
  font-family:var(--display);font-size:13px;font-weight:400;
  font-style:italic;color:var(--ink-dim);
}
.footer-r{
  font-family:var(--mono);font-size:9px;font-weight:300;
  letter-spacing:.18em;color:var(--ink-faint);
}

/* ANIMATIONS */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.25;transform:scale(.55)}
}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s ease,transform .85s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d{transition-delay:.14s}
.reveal-d2{transition-delay:.26s}

/* RESPONSIVE */
@media(max-width:960px){
  nav{padding:0 24px}
  .hero{padding:108px 24px 64px}
  h1.hero-name{font-size:60px}
  .hero-bottom{grid-template-columns:1fr}
  .hero-bl{border-right:none;padding-right:0;border-bottom:1px solid var(--rule);padding-bottom:36px;margin-bottom:36px}
  .hero-br{padding-left:0}
  .section{padding:64px 24px}
  .triad-grid{grid-template-columns:1fr}
  .agent{padding:36px 0!important;border-right:none;border-bottom:1px solid var(--rule)}
  .agent:last-child{border-bottom:none}
  .product{grid-template-columns:1fr;gap:20px}
  .contact-section{grid-template-columns:1fr;gap:56px;padding:72px 24px}
  footer{flex-direction:column;gap:10px;text-align:center;padding:24px}
}
@media print{nav{display:none}}