*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FAF6F0;color:#2E2A26;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#B0332B;text-decoration:none}
a:hover{color:#8E2823}
:focus-visible{outline:2px solid var(--accent,#B0332B);outline-offset:3px;border-radius:4px}
input,textarea,button{font-family:inherit}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:opacity .35s linear !important;transform:none !important}
}

/* ==== component styles (generated) ==== */

/* -- page -- */
.page__1 {
  position:relative;
  overflow-x:hidden;
  min-height:100vh;
}
.page__2 {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(48vw 42vw at 8% -6%, rgba(240,186,150,.42), transparent 70%), radial-gradient(46vw 40vw at 104% 62%, rgba(236,171,158,.34), transparent 68%);
}
.page__3 {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' bas%65Frequency='.85' numOctav%65s='4' stitchTil%65s='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.page__4 {
  position:relative;
  z-index:2;
}

/* -- nav -- */
.nav__1 {
  position:fixed;
  left:auto;
  right:28px;
  top:22px;
  transform:translateX(0);
  z-index:40;
  display:flex;
  align-items:center;
  gap:3px;
  padding:7px;
  border-radius:999px;
  background:rgba(250,246,240,.5);
  backdrop-filter:blur(16px);
  border:1px solid rgba(46,42,38,.08);
  box-shadow:0 22px 46px -22px rgba(46,42,38,.3);
  transition:right .9s cubic-bezier(.22,1,.36,1),left .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),background .5s ease,box-shadow .5s ease;
}
.nav__2 {
  flex:none;
  overflow:hidden;
  opacity:0;
  width:0;
  margin-right:0;
  pointer-events:none;
  transform:scale(.6);
  transition:opacity .4s ease,width .5s cubic-bezier(.34,1.42,.4,1),margin .5s cubic-bezier(.34,1.42,.4,1),transform .6s cubic-bezier(.22,1.5,.36,1);
  display:grid;
  place-items:center;
  height:32px;
  border-radius:9px;
}
.nav__3 {
  display:block;
  flex:none;
}
.nav__4 {
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#8B8073;
  padding:14px 17px;
  border-radius:999px;
  transition:color .3s ease,background .38s cubic-bezier(.34,1.42,.4,1),box-shadow .38s ease;
}
.nav__4:hover,
.nav__4:focus-visible {
  color:#2E2A26;
  background:#F4E5E1;
  box-shadow:inset 0 0 0 1px rgba(200,50,30,.26),0 10px 20px -12px rgba(200,50,30,.75);
}
.nav__5 {
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#FAF6F0;
  background:var(--accent,#B0332B);
  padding:14px 19px;
  border-radius:999px;
  margin-left:3px;
  transition:box-shadow .4s ease,transform .2s cubic-bezier(.34,1.42,.4,1);
}
.nav__5:hover,
.nav__5:focus-visible {
  box-shadow:0 14px 28px -12px rgba(176,51,43,.85);
}

/* -- top -- */
.top__1 {
  max-width:1180px;
  margin:0 auto;
  padding:26px 28px clamp(48px,7vw,88px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(36px,5vw,64px);
  align-items:center;
}
.top__2 {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.42,.4,1);
  display:inline-flex;
  align-items:center;
  gap:15px;
  margin:0 0 30px;
}
.top__3 {
  flex:none;
  display:block;
}
.top__4 {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.top__5 {
  font-family:Jost,sans-serif;
  font-weight:600;
  font-size:31px;
  line-height:1;
  letter-spacing:-.005em;
  color:#2E2B28;
}
.top__6 {
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  line-height:1;
  letter-spacing:.24em;
  color:#8B8073;
  white-space:nowrap;
}
.top__7 {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.42,.4,1);
  margin:0 0 22px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8B8073;
}
.top__8 {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1.32,.36,1);
  margin:0 0 22px;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(38px,5.4vw,72px);
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:balance;
}
.top__9 {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.34,1.42,.4,1);
  margin:0 0 34px;
  max-width:520px;
  font-size:clamp(15px,1.2vw,17.5px);
  line-height:1.65;
  color:#6E6459;
  text-wrap:pretty;
}
.top__10 {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.42,.4,1);
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.top__11 {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent,#B0332B);
  color:#FAF6F0;
  border-radius:16px;
  padding:15px 26px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  transition:border-radius .4s cubic-bezier(.34,1.42,.4,1),transform .2s cubic-bezier(.34,1.42,.4,1),box-shadow .4s ease,gap .35s ease;
}
.top__11:hover,
.top__11:focus-visible {
  border-radius:8px;
  box-shadow:0 18px 34px -14px rgba(176,51,43,.6);
  gap:16px;
}
.top__12 {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#2E2A26;
  background:transparent;
  border:1px solid rgba(46,42,38,.22);
  border-radius:16px;
  padding:15px 26px;
  font-size:14.5px;
  font-weight:600;
  transition:background .35s ease,border-radius .4s cubic-bezier(.34,1.42,.4,1),transform .2s ease,border-color .35s ease;
}
.top__12:hover,
.top__12:focus-visible {
  background:#F2EBDF;
  border-color:rgba(46,42,38,.4);
  border-radius:8px;
}
.top__13 {
  font-family:'IBM Plex Mono',monospace;
  color:#8B8073;
}
.top__14 {
  opacity:0;
  transform:translateY(36px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,1.32,.36,1);
}
.top__15 {
  will-change:transform;
  perspective:1000px;
}
.top__16 {
  background:#F2EBDF;
  border:1px solid rgba(46,42,38,.12);
  border-radius:20px;
  padding:14px;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,1.4,.36,1),box-shadow .5s ease;
}
.top__16:hover,
.top__16:focus-visible {
  box-shadow:0 34px 60px -30px rgba(46,42,38,.5);
}
.top__17 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 6px 12px;
}
.top__18 {
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8B8073;
}
.top__19 {
  display:flex;
  gap:5px;
}
.top__20 {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent,#B0332B);
  opacity:.7;
}
.top__21 {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8B8073;
  opacity:.35;
}
.top__22 {
  position:relative;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  background:repeating-linear-gradient(135deg,#E9E0D2 0 9px,#F4EDE2 9px 18px);
  display:flex;
  align-items:flex-end;
  padding:16px;
}
.top__22-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.top__23 {
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  color:#8B8073;
  background:rgba(250,246,240,.85);
  border-radius:8px;
  padding:6px 10px;
}
.top__24 {
  display:flex;
  justify-content:flex-end;
  padding:11px 6px 2px;
}
.top__25 {
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* -- shared -- */
.shared__1 {
  color:var(--accent,#B0332B);
}
.shared__2 {
  font-family:'IBM Plex Mono',monospace;
}
.shared__3 {
  max-width:1180px;
  margin:0 auto;
  padding:clamp(52px,7vw,96px) 28px;
  scroll-margin-top:78px;
}
.shared__4 {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.42,.4,1);
  margin:0 0 14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8B8073;
}
.shared__5 {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,1.32,.36,1);
  margin:0 0 44px;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(28px,3.6vw,50px);
  line-height:1.02;
  letter-spacing:-.015em;
  text-transform:uppercase;
  max-width:18ch;
}

/* -- work -- */
.work__1 {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,1.32,.36,1);
  margin:0 0 40px;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(28px,3.6vw,50px);
  line-height:1.02;
  letter-spacing:-.015em;
  text-transform:uppercase;
  max-width:16ch;
}
.work__2 {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1),box-shadow .45s ease,border-color .45s ease,background .45s ease;
  transform-style:preserve-3d;
  background:#F2EBDF;
  border:1px solid rgba(46,42,38,.12);
  border-radius:20px;
  padding:clamp(20px,2.4vw,30px);
  margin-bottom:16px;
}
.work__2:hover,
.work__2:focus-visible {
  border-color:rgba(176,51,43,.45);
  box-shadow:0 22px 44px -26px rgba(46,42,38,.45);
}
.work__3 {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.work__4 {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:18px;
}
.work__5 {
  margin:0;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(22px,2.4vw,32px);
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.work__6 {
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:#8B8073;
}
.work__7 {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent,#B0332B);
  background:#EFD6D2;
  border-radius:999px;
  padding:7px 13px;
}
.work__8 {
  display:inline-block;
  transition:transform .45s cubic-bezier(.34,1.42,.4,1);
}
.work__9 {
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .6s cubic-bezier(.22,1.32,.36,1),opacity .5s ease;
}
.work__10 {
  padding-top:26px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:22px;
}
.work__11 {
  position:relative;
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  background:repeating-linear-gradient(135deg,#E4DACA 0 9px,#EFE7DA 9px 18px);
  display:flex;
  align-items:flex-end;
  padding:14px;
}
.work__11-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.work__12 {
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:#8B8073;
  background:rgba(250,246,240,.85);
  border-radius:7px;
  padding:5px 9px;
}
.work__13 {
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
}
.work__14 {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1);
  border:1px dashed rgba(46,42,38,.18);
  border-radius:20px;
  padding:clamp(20px,2.4vw,30px);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  background:rgba(242,235,223,.4);
}
.work__15 {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:18px;
  opacity:.55;
}
.work__16 {
  margin:0;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(20px,2.2vw,28px);
  text-transform:uppercase;
}
.work__17 {
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8B8073;
  border:1px solid rgba(46,42,38,.16);
  border-radius:999px;
  padding:6px 12px;
}
.work__18 {
  margin-top:clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:clamp(22px,3vw,40px);
}
.work__19 {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1);
}
.work__20 {
  margin:0 0 12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent,#B0332B);
}
.work__21 {
  margin:0;
  font-size:15px;
  line-height:1.68;
  color:#5E564C;
  text-wrap:pretty;
}
.work__22 {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1);
  margin-top:clamp(36px,4.5vw,64px);
}
.work__23 {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.work__24 {
  margin:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8B8073;
}
.work__25 {
  margin:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:#8B8073;
}
.work__26 {
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  max-width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(46,42,38,.14);
  background:#17140F;
  touch-action:pan-y;
  user-select:none;
  cursor:ew-resize;
}
.work__27 {
  position:absolute;
  inset:0;
  background:#17140F;
  display:flex;
  flex-direction:column;
  padding:clamp(16px,3.4%,34px) clamp(18px,4%,42px);
}
.work__28 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:clamp(14px,3%,30px);
}
.work__29 {
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(12px,1.5vw,20px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#F5EFE6;
}
.work__30 {
  display:flex;
  gap:clamp(10px,1.6vw,26px);
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(7px,.8vw,11px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8E8478;
}
.work__31 {
  color:#F5EFE6;
}
.work__32 {
  flex:1;
  border-radius:12px;
  background:linear-gradient(118deg,#241F19,#43392D 55%,#1C1813);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(14px,3%,32px);
}
.work__33 {
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(7px,.78vw,10px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#B0A697;
  margin-bottom:clamp(6px,1%,12px);
}
.work__34 {
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(14px,2.3vw,34px);
  line-height:1;
  text-transform:uppercase;
  color:#F5EFE6;
  max-width:16ch;
}
.work__35 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:clamp(12px,2.4%,26px);
}
.work__36 {
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(7px,.78vw,10px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8E8478;
}
.work__37 {
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(7px,.78vw,10px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#F5EFE6;
  border-bottom:1px solid var(--accent,#B0332B);
  padding-bottom:4px;
}
.work__38 {
  position:absolute;
  inset:0;
  background:#F4F4F4;
  clip-path:inset(0 50% 0 0);
  display:flex;
  flex-direction:column;
  font-family:Arial,Helvetica,sans-serif;
}
.work__39 {
  background:#2C4A7C;
  padding:4px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.work__40 {
  font:700 clamp(7px,.95vw,13px)/1 'Times New Roman',Times,serif;
  color:#FFF;
}
.work__41 {
  display:flex;
  gap:clamp(4px,.7vw,9px);
  font:400 clamp(5px,.62vw,8px)/1 Arial,sans-serif;
  color:#DCE6F5;
  flex-wrap:wrap;
}
.work__42 {
  background:#FFF9C4;
  border-bottom:1px solid #E0D9A0;
  padding:3px 8px;
  font:400 clamp(5px,.62vw,8px)/1.2 Arial,sans-serif;
  color:#7A6E2E;
  display:flex;
  justify-content:space-between;
}
.work__43 {
  flex:1;
  display:flex;
  gap:5px;
  padding:6px 8px;
  min-height:0;
}
.work__44 {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:0;
}
.work__45 {
  background:#E8E8E8;
  border:1px solid #D2D2D2;
  padding:4px;
}
.work__46 {
  font:700 clamp(7px,.95vw,13px)/1.2 'Times New Roman',Times,serif;
  color:#333;
}
.work__47 {
  font:400 clamp(5px,.62vw,8px)/1.4 Arial,sans-serif;
  color:#666;
}
.work__48 {
  flex:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  min-height:0;
}
.work__49 {
  background:#DDDDDD;
  border:1px solid #CCC;
  padding:3px;
}
.work__50 {
  aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,#CFCFCF 0 4px,#DEDEDE 4px 8px);
}
.work__51 {
  font:400 clamp(5px,.62vw,8px)/1.35 Arial,sans-serif;
  color:#5A5A5A;
  padding-top:2px;
}
.work__52 {
  width:20%;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.work__53 {
  background:#E8E8E8;
  border:1px solid #D2D2D2;
  padding:4px;
  font:400 clamp(5px,.62vw,8px)/1.4 Arial,sans-serif;
  color:#666;
}
.work__54 {
  background:#FFF;
  border:1px solid #BBB;
  height:8px;
  margin-top:2px;
}
.work__55 {
  background:#E8E8E8;
  border:1px solid #D2D2D2;
  padding:4px;
  font:400 clamp(5px,.62vw,8px)/1.5 Arial,sans-serif;
  color:#666;
}
.work__56 {
  flex:1;
  background:#DCEAF7;
  border:1px dashed #9BB8D4;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font:400 clamp(5px,.62vw,8px)/1.3 Arial,sans-serif;
  color:#7B94AD;
}
.work__57 {
  background:#2C4A7C;
  padding:3px 8px;
  font:400 clamp(5px,.6vw,8px)/1.2 Arial,sans-serif;
  color:#C9D6EA;
  text-align:center;
}
.work__58 {
  position:absolute;
  left:14px;
  bottom:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6E6459;
  background:rgba(255,255,255,.92);
  border-radius:999px;
  padding:5px 11px;
  transition:opacity .3s ease;
}
.work__59 {
  position:absolute;
  right:14px;
  bottom:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#F5EFE6;
  background:rgba(176,51,43,.92);
  border-radius:999px;
  padding:5px 11px;
}
.work__60 {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:#FAF6F0;
  box-shadow:0 0 0 1px rgba(46,42,38,.18);
  pointer-events:none;
}
.work__61 {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:#FAF6F0;
  border:1px solid rgba(46,42,38,.16);
  box-shadow:0 8px 20px -8px rgba(46,42,38,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:#2E2A26;
}

/* -- services -- */
.services__1 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:clamp(18px,2.2vw,26px);
  align-items:start;
}
.services__2 {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1),box-shadow .45s ease,border-color .4s ease;
  transform-style:preserve-3d;
  background:#F2EBDF;
  border:1px solid rgba(46,42,38,.12);
  border-radius:20px;
  padding:28px;
}
.services__2:hover,
.services__2:focus-visible {
  box-shadow:0 26px 48px -28px rgba(46,42,38,.45);
  border-color:rgba(46,42,38,.28);
}
.services__3 {
  margin:0 0 8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8B8073;
}
.services__4 {
  margin:0 0 6px;
  font-family:'Archivo Black',sans-serif;
  font-size:42px;
  line-height:1;
}
.services__5 {
  margin:0 0 22px;
  font-size:14.5px;
  line-height:1.6;
  color:#6E6459;
}
.services__6 {
  display:grid;
  gap:11px;
  font-size:14px;
  color:#5E564C;
}
.services__7 {
  display:flex;
  gap:10px;
}
.services__8 {
  color:var(--accent,#B0332B);
  font-family:'IBM Plex Mono',monospace;
}
.services__9 {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1),box-shadow .45s ease;
  transform-style:preserve-3d;
  background:#2E2A26;
  color:#FAF6F0;
  border:1px solid rgba(46,42,38,.4);
  border-radius:20px;
  padding:32px 28px;
  position:relative;
}
.services__9:hover,
.services__9:focus-visible {
  box-shadow:0 30px 56px -26px rgba(46,42,38,.6);
}
.services__10 {
  position:absolute;
  top:-11px;
  left:28px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--accent,#B0332B);
  color:#FAF6F0;
  border-radius:999px;
  padding:5px 12px;
}
.services__11 {
  margin:0 0 8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#C3B7A6;
}
.services__12 {
  margin:0 0 6px;
  font-family:'Archivo Black',sans-serif;
  font-size:46px;
  line-height:1;
}
.services__13 {
  margin:0 0 22px;
  font-size:14.5px;
  line-height:1.6;
  color:#D8CEC0;
}
.services__14 {
  display:grid;
  gap:11px;
  font-size:14px;
  color:#EDE5D9;
}
.services__15 {
  color:#EFD6D2;
  font-family:'IBM Plex Mono',monospace;
}
.services__16 {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.42,.4,1);
  margin:26px 0 0;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  line-height:1.7;
  color:#8B8073;
  max-width:70ch;
}

/* -- process -- */
.process__1 {
  position:relative;
  height:2px;
  margin:0 0 30px;
  background:rgba(46,42,38,.14);
  border-radius:2px;
}
.process__2 {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  background:var(--accent,#B0332B);
  border-radius:2px;
}
.process__3 {
  position:absolute;
  top:-5px;
  left:12.5%;
  margin-left:-6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#FAF6F0;
  border:2px solid rgba(46,42,38,.22);
  transition:background .5s ease,border-color .5s ease,transform .6s cubic-bezier(.22,1.4,.36,1);
}
.process__4 {
  position:absolute;
  top:-5px;
  left:37.5%;
  margin-left:-6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#FAF6F0;
  border:2px solid rgba(46,42,38,.22);
  transition:background .5s ease,border-color .5s ease,transform .6s cubic-bezier(.22,1.4,.36,1);
}
.process__5 {
  position:absolute;
  top:-5px;
  left:62.5%;
  margin-left:-6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#FAF6F0;
  border:2px solid rgba(46,42,38,.22);
  transition:background .5s ease,border-color .5s ease,transform .6s cubic-bezier(.22,1.4,.36,1);
}
.process__6 {
  position:absolute;
  top:-5px;
  left:87.5%;
  margin-left:-6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#FAF6F0;
  border:2px solid rgba(46,42,38,.22);
  transition:background .5s ease,border-color .5s ease,transform .6s cubic-bezier(.22,1.4,.36,1);
}
.process__7 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(148px,100%),1fr));
  gap:clamp(14px,2.4vw,28px);
}
.process__8 {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1),background .4s ease,border-color .4s ease;
  border-top:2px solid rgba(46,42,38,.16);
  padding:20px 16px 22px;
  border-radius:0 0 16px 16px;
}
.process__8:hover,
.process__8:focus-visible {
  background:#F2EBDF;
  border-color:var(--accent,#B0332B);
}
.process__9 {
  margin:0 0 14px;
  font-family:'Archivo Black',sans-serif;
  font-size:26px;
  color:var(--accent,#B0332B);
}
.process__10 {
  margin:0 0 8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.process__11 {
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:#6E6459;
}

/* -- about -- */
.about__1 {
  max-width:1180px;
  margin:0 auto;
  padding:clamp(52px,7vw,96px) 28px;
  scroll-margin-top:78px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.about__2 {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,1.32,.36,1);
  margin:0 0 24px;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(26px,3.2vw,44px);
  line-height:1.04;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.about__3 {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.34,1.42,.4,1);
  margin:0 0 26px;
  max-width:56ch;
  font-size:15.5px;
  line-height:1.7;
  color:#5E564C;
  text-wrap:pretty;
}
.about__4 {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.42,.4,1);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.about__5 {
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:.06em;
  color:#5E564C;
  border:1px solid rgba(46,42,38,.16);
  border-radius:999px;
  padding:8px 14px;
  transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.34,1.42,.4,1);
}
.about__5:hover,
.about__5:focus-visible {
  background:#EFD6D2;
  color:var(--accent,#B0332B);
  transform:translateY(-2px);
}
.about__6 {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1.32,.36,1);
  display:flex;
  justify-content:center;
}
.about__7 {
  position:relative;
  width:100%;
  max-width:420px;
}
.about__8 {
  position:absolute;
  left:50%;
  top:52%;
  width:78%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.8);
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,96,74,.4) 0%,rgba(226,110,88,.2) 44%,rgba(226,110,88,0) 74%);
  filter:blur(42px);
  opacity:0;
  transition:opacity .65s ease,transform .8s cubic-bezier(.22,1.32,.36,1);
  pointer-events:none;
}
.about__9 {
  position:relative;
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 26px 40px rgba(46,42,38,.22));
  transition:transform .7s cubic-bezier(.22,1.32,.36,1),filter .6s ease;
}
.about__9:hover,
.about__9:focus-visible {
  transform:translateY(-8px) scale(1.015);
  filter:drop-shadow(0 34px 52px rgba(46,42,38,.3));
}

/* -- faq -- */
.faq__1 {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,1.32,.36,1);
  margin:0 0 36px;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(28px,3.6vw,50px);
  line-height:1.02;
  letter-spacing:-.015em;
  text-transform:uppercase;
  max-width:20ch;
}
.faq__2 {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1.32,.36,1);
  max-width:860px;
}
.faq__3 {
  cursor:pointer;
  padding:22px 2px;
  display:grid;
  gap:0;
  transition:opacity .3s ease;
}
.faq__3:hover,
.faq__3:focus-visible {
  opacity:.72;
}
.faq__4 {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:22px;
}
.faq__5 {
  margin:0;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(15px,1.5vw,19px);
  line-height:1.25;
  letter-spacing:-.005em;
  text-transform:uppercase;
  text-wrap:pretty;
}
.faq__6 {
  flex:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:20px;
  line-height:1;
  color:var(--accent,#B0332B);
  transition:transform .5s cubic-bezier(.34,1.42,.4,1);
}
.faq__7 {
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .55s cubic-bezier(.22,1.32,.36,1),opacity .45s ease;
}
.faq__8 {
  margin:14px 0 0;
  max-width:62ch;
  font-size:15px;
  line-height:1.7;
  color:#5E564C;
  text-wrap:pretty;
}
.faq__9 {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:5px;
  height:5px;
  opacity:.4;
}
.faq__10 {
  background:rgba(46,42,38,.35);
  border-radius:1px;
}

/* -- contact -- */
.contact__1 {
  max-width:1180px;
  margin:0 auto;
  padding:clamp(52px,7vw,96px) 28px clamp(60px,8vw,110px);
  scroll-margin-top:78px;
}
.contact__2 {
  background:#F2EBDF;
  border:1px solid rgba(46,42,38,.12);
  border-radius:20px;
  padding:clamp(26px,4vw,56px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:clamp(28px,4vw,56px);
}
.contact__3 {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,1.32,.36,1);
  margin:0 0 20px;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.02;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.contact__4 {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.42,.4,1);
  margin:0 0 18px;
  max-width:44ch;
  font-size:15.5px;
  line-height:1.7;
  color:#5E564C;
  text-wrap:pretty;
}
.contact__5 {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.42,.4,1);
  margin:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  color:#8B8073;
}
.contact__6 {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,1.32,.36,1);
  display:grid;
  gap:14px;
}
.contact__7 {
  display:grid;
  gap:7px;
}
.contact__8 {
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8B8073;
}
.contact__9 {
  background:#FAF6F0;
  border:1px solid rgba(46,42,38,.16);
  border-radius:14px;
  padding:13px 15px;
  font-size:15px;
  color:#2E2A26;
  transition:border-color .3s ease,background .3s ease;
}
.contact__9:focus {
  border-color:var(--accent,#B0332B);
  background:#fff;
}
.contact__10 {
  background:#FAF6F0;
  border:1px solid rgba(46,42,38,.16);
  border-radius:14px;
  padding:13px 15px;
  font-size:15px;
  line-height:1.6;
  color:#2E2A26;
  resize:vertical;
  transition:border-color .3s ease,background .3s ease;
}
.contact__10:focus {
  border-color:var(--accent,#B0332B);
  background:#fff;
}
.contact__11 {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}
.contact__13 {
  margin:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  line-height:1.6;
  color:#B0332B;
}
.cf-turnstile {
  margin-top:2px;
}
.contact__12 {
  margin-top:4px;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent,#B0332B);
  color:#FAF6F0;
  border:none;
  border-radius:16px;
  padding:15px 28px;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition:border-radius .4s cubic-bezier(.34,1.42,.4,1),transform .2s cubic-bezier(.34,1.42,.4,1),box-shadow .4s ease,gap .35s ease,background .4s ease;
}
.contact__12:hover,
.contact__12:focus-visible {
  border-radius:8px;
  box-shadow:0 18px 34px -14px rgba(176,51,43,.6);
  gap:16px;
}

/* -- footer -- */
.footer__1 {
  border-top:1px solid rgba(46,42,38,.09);
}
.footer__2 {
  max-width:1180px;
  margin:0 auto;
  padding:26px 28px 40px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:baseline;
  justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:#8B8073;
}
/* ==== responsive layer ==== */
/* Breakpoints mirror the thresholds main.js used to apply as inline styles:
   900px = dock moves to the bottom, 760px / 560px = dock compresses,
   430px = quote button drops. Kept identical so CSS and JS never disagree. */

img { max-width:100%; }

/* dock: scroll-driven centered state (desktop only, toggled by main.js) */
.nav--centered {
  right:50%;
  left:auto;
  transform:translateX(50%);
  background:rgba(250,246,240,.68);
}

@media (max-width:899px) {
  body { padding-bottom:78px; }

  .nav__1,
  .nav__1.nav--centered {
    top:auto;
    bottom:14px;
    right:50%;
    left:auto;
    transform:translateX(50%);
    background:rgba(250,246,240,.86);
    max-width:calc(100vw - 16px);
    overflow:hidden;
  }
  .nav__4 { white-space:nowrap; }
  .nav__5 { white-space:nowrap; }
}

@media (max-width:759px) {
  .nav__4 { padding:12px 13px; font-size:10.5px; }
  .nav__5 { padding:12px 14px; font-size:10.5px; }
}

@media (max-width:559px) {
  .nav__1, .nav__1.nav--centered { padding:5px; gap:2px; }
  .nav__4 { padding:11px 10px; font-size:9.5px; letter-spacing:.05em; }
  .nav__5 { padding:11px 12px; font-size:9.5px; letter-spacing:.05em; }

  /* page gutters: 28px is too much of a 360px screen */
  .top__1, .shared__3, .about__1, .contact__1, .footer__2 {
    padding-left:16px;
    padding-right:16px;
  }

  /* ---- grid tracks that refuse to shrink ----
     repeat(auto-fit, minmax(min(330px,100%), 1fr)) is meant to collapse, but
     the track minimum resolves to the px value, not 100%, so these three
     columns stay wider than their container and push out to the right.
     Forcing a single explicit column removes the minimum entirely. */
  .top__1 { grid-template-columns:1fr; }
  .about__1 { grid-template-columns:1fr; }
  .contact__2 {
    grid-template-columns:1fr;
    padding:20px;
    gap:28px;
  }

  /* form controls: never let intrinsic size drive the column */
  .contact__6, .contact__7 { min-width:0; }
  .contact__9, .contact__10 {
    width:100%;
    min-width:0;
    max-width:100%;
  }

  /* ---- comparison slider: mobile treatment ---- */
  .work__26 { aspect-ratio:4/3; }

  /* Busalpa side */
  .work__27 { padding:12px 14px; }
  .work__28 { padding-bottom:10px; }
  .work__29 { font-size:12px; }
  .work__30 { gap:8px; font-size:6.5px; letter-spacing:.1em; }
  .work__32 { padding:12px; }
  .work__33 { font-size:6.5px; margin-bottom:5px; }
  .work__34 { font-size:16px; }
  .work__35 { padding-top:10px; }
  .work__36, .work__37 { font-size:6.5px; }

  /* generic-template side */
  .work__39 { padding:4px 7px; }
  .work__40 { font-size:10px; }
  .work__41 { font-size:6px; max-height:2em; overflow:hidden; }
  .work__42 { font-size:6px; padding:3px 7px; }
  .work__43 { padding:5px 6px; gap:4px; }
  .work__46 { font-size:9px; }
  .work__47 { font-size:6px; }
  .work__48 {
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,minmax(0,1fr));
    overflow:hidden;
  }
  .work__49 { display:flex; flex-direction:column; min-height:0; }
  .work__49:nth-child(n+5) { display:none; }
  .work__50 { aspect-ratio:auto; flex:1; min-height:0; }
  .work__51 { font-size:6px; }
  .work__52 { display:none; }
  .work__57 { font-size:6px; padding:3px 7px; }

  /* labels + handle */
  .work__58, .work__59 {
    font-size:8px;
    letter-spacing:.08em;
    padding:4px 8px;
    bottom:10px;
  }
  .work__58 { left:10px; }
  .work__59 { right:10px; }
  .work__61 { width:36px; height:36px; font-size:12px; }
}

@media (max-width:429px) {
  .nav__5 { display:none; }
  .nav__4 { padding:10px 8px; font-size:9px; letter-spacing:.02em; }

  .cf-turnstile {
    transform:scale(.82);
    transform-origin:left top;
    height:54px;
  }
}