/* dumbservant.com — rebuilt from Framer (v2)
   Measured tokens: #000 bg, #fff text, Inter / Intel One Mono / Sentient,
   nav pill rgba(43,43,43,.5), 40px card radius, 1440px design canvas. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Intel+One+Mono&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=sentient@400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #000; }
body {
  background: #000; color: #fff;
  font-family: Inter, system-ui, Arial, sans-serif;
  font-size: 16px; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; }

/* ── design canvas: fixed 1440, JS scales it to fit narrower desktops ── */
.canvas-wrap { position: relative; }
.canvas { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }
.abs { position: absolute; }

/* -- nav: floating serif pill (shared with home) -- */
.nav{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  width:min(1380px,calc(100vw - 32px));height:64px;z-index:100;
  display:flex;align-items:center;gap:2.2rem;
  padding:0 30px 0 26px;
  background:rgba(16,14,11,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(233,227,213,.14);border-radius:999px;
  font-family:'Cormorant Garamond',serif;
}
.nav .brand-menu{position:relative;display:flex;align-items:center;height:100%}
.nav .brand{display:block;width:30px;height:30px;margin-right:.4rem;font-size:0;overflow:hidden;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038.92%2038.19%22%3E%3Cpath%20d%3D%22M3.83%2C1.71s5.28%2C1.83%2C8.78%2C4.79c3.5%2C2.96%2C5.97%2C8.52%2C4.95%2C9.62-1.14%2C1.23-6.19-1.58-9.8-4.91S1.55%2C4.12%2C1.55%2C4.12c0%2C0%2C.11%2C4.57%2C2.74%2C9.18.15.27-4.15-1.37-4.04-1.1%2C2.65%2C5.88%2C15.48%2C4.94%2C15.57%2C6.36.06.96-11.9-.36-15.53%2C6.21-.49.89%2C3.7-1.49%2C3.29.03-2.03%2C7.57-1.42%2C10.24-1.42%2C10.24%2C0%2C0-.07-4.05%2C5.24-9.35%2C3.66-3.65%2C8.65-6.1%2C10-5.12%2C1.44%2C1.04-.73%2C7.19-4.61%2C10.99s-9.45%2C6.08-9.45%2C6.08c0%2C0%2C6.92-1.04%2C11.88-3.08%2C1.3-.54.54%2C3.04.98%2C2.62%2C3.93-3.66%2C2.3-13.47%2C3.6-13.52.86-.04%2C1.37%2C9.93%2C4.87%2C13.43.52.52-.01-3.02.71-2.64%2C5.1%2C2.7%2C9.09%2C2.12%2C9.09%2C2.12%2C0%2C0-5.42-2.68-9.18-6.39-3.23-3.19-4.63-8.98-3.45-9.59s5.22.84%2C8.11%2C4.16c3.33%2C3.82%2C6.95%2C9.76%2C6.95%2C9.76%2C0%2C0-.79-4.94-2.92-9.57-.29-.64%2C3.4.39%2C3.2.14-5.18-6.48-13.77-5.64-13.75-6.72.03-1.15%2C10.1-1.39%2C14.4-6.01.35-.37-3.46.23-3.14-.24%2C3.98-5.83%2C3.98-8.56%2C3.98-8.56%2C0%2C0-2.89%2C4.82-7.46%2C7.96-5.57%2C3.84-8.23%2C5.26-9.47%2C4.3s.59-5.57%2C4.6-9.53c3.33-3.28%2C9.34-4.91%2C9.34-4.91%2C0%2C0-5.61-.13-9.33%2C1.72-1.17.58.35-7.19-3.29%2C1.17-2.49%2C5.72-2.57%2C10.21-3.39%2C9.96-.74-.23-.78-9.19-4.23-13.86-.61-.82.33%2C4.36-1.9%2C3.35C10.39%2C2.27%2C3.83%2C1.71%2C3.83%2C1.71Z%22%20fill%3D%22%23e9e3d5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;transition:transform .45s cubic-bezier(.16,.7,.3,1),filter .35s ease}
.nav .brand:hover{transform:scale(1.12);filter:brightness(1.12)}
.nav .brand-card{display:none !important}
.nav-toggle{display:none;margin-left:auto;width:32px;height:32px;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0}
.nav-toggle span{display:block;width:22px;height:1.5px;background:#e9e3d5;margin:0 auto;transition:transform .3s ease,opacity .3s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none}
@media (max-width:700px){
  .nav .menu{display:none !important}
  .nav-toggle{display:flex}
  .mobile-menu{display:block;position:fixed;left:16px;right:16px;top:72px;z-index:99;
    padding:.8rem 1rem 1.1rem;background:rgba(16,14,11,.97);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid rgba(233,227,213,.14);border-radius:22px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s ease,transform .3s cubic-bezier(.16,.7,.3,1),visibility 0s linear .3s}
  .mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
  .mm-group{padding:.35rem 0}
  .mm-group + .mm-group{border-top:1px solid rgba(233,227,213,.14);margin-top:.35rem}
  .mm-head{font-family:'EB Garamond',serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#a39c8a;padding:.35rem .6rem .45rem}
  .mobile-menu a{display:block;padding:.62rem .6rem;border-radius:12px;font-family:'EB Garamond',serif;font-size:1.06rem;letter-spacing:.05em;color:#e9e3d5;transition:background .25s ease}
  .mobile-menu a:active,.mobile-menu a:hover{background:rgba(233,227,213,.06)}
}
.nav .brand-card{
  position:absolute;top:calc(100% + 10px);left:-10px;width:min(440px,calc(100vw - 48px));
  padding:1.3rem 1.5rem;background:rgba(16,14,11,.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(233,227,213,.14);border-radius:20px;
  font-family:'EB Garamond',serif;font-size:.98rem;line-height:1.7;color:#e9e3d5;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,.7,.3,1),visibility 0s linear .35s;
}
.nav .brand-menu:hover .brand-card,.nav .brand-menu:focus-within .brand-card{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.nav .menu{position:relative;height:100%;display:flex;align-items:center}
.nav .menu .navlink{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.45em;
  font-family:'Cormorant Garamond',serif;padding:0;
  font-size:1rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:#a39c8a;transition:color .35s ease}
.nav .menu:hover .navlink,.nav .menu:focus-within .navlink{color:#e9e3d5}
.nav .caret{font-size:.7em;opacity:.6;transition:transform .35s ease}
.nav .menu:hover .caret,.nav .menu:focus-within .caret{transform:translateY(1px) rotate(180deg)}
.nav .drop{
  position:absolute;top:calc(100% + 10px);left:-14px;transform:translateY(-6px);
  min-width:230px;padding:.8rem .4rem;
  background:rgba(16,14,11,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(233,227,213,.14);border-radius:20px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s cubic-bezier(.16,.7,.3,1),visibility 0s linear .35s;
}
.nav .menu:hover .drop,.nav .menu:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.nav .drop a{display:block;padding:.55rem 1.2rem;border-radius:12px;
  font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:#a39c8a;
  white-space:nowrap;transition:color .3s ease,background .3s ease}
.nav .drop a:hover{color:#e9e3d5;background:rgba(233,227,213,.05)}
.nav .socials{display:none}
.nav .socials a{opacity:.7;transition:opacity .35s ease,transform .35s cubic-bezier(.16,.7,.3,1)}
.nav .socials a:hover{opacity:1;transform:translateY(-2px)}
.nav .socials img{height:21px;width:auto}

/* ── header block ── */
.intro { font-family: 'EB Garamond', Georgia, serif; font-size: clamp(15px, 1.28vw, 18.5px); line-height: 1.65; color: #e9e3d5; }
.visit-btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  height: clamp(40px, 3.55vw, 51px); padding: 0 clamp(18px,1.9vw,28px); border: 1px solid rgba(233,227,213,.3);
  border-radius: 999px; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(13px, 1.11vw, 16px); letter-spacing: .14em; text-transform: uppercase;
  color: #e9e3d5; background: rgba(233,227,213,.015);
  transition: background .4s ease, border-color .4s ease, transform .45s cubic-bezier(.16,.7,.3,1);
}
.visit-btn:hover { background: rgba(233,227,213,.06); border-color: rgba(233,227,213,.45); transform: translateY(-3px); }
.pill {
  position: absolute; display: inline-flex; align-items: center; height: clamp(16px, 1.53vw, 22px);
  padding: 0 clamp(8px,0.8vw,12px); border: 1px solid rgba(233,227,213,.22); border-radius: 11px;
  font-size: clamp(7.5px, 0.7vw, 10px); color: #fff; white-space: nowrap;
  transition: border-color .3s ease;
}
.pill:hover { border-color: rgba(233,227,213,.5); color: #e9e3d5; }

/* ── cards: clip container; media positioned inside with % offsets ── */
.card {
  position: absolute; overflow: hidden; border-radius: 40px;
  border: 1px solid rgba(233,227,213,.14);
  background: rgba(233,227,213,.012);
  transition: transform .5s cubic-bezier(.16,.7,.3,1), border-color .5s ease;
}
.card:hover { border-color: rgba(233,227,213,.3); }
.card:hover { transform: scale(1.015); }
.card .m { position: absolute; }
.card .m img, .card .m video { width: 100%; height: 100%; border-radius: clamp(10px, 1.5vw, 22px); }

/* ── type voices ── */
.mono { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(22px, 2.23vw, 32px); color: #a39c8a; letter-spacing: .06em; }
.sentient { font-family: Sentient, Georgia, serif; }
.footer-mark { position: absolute; white-space: nowrap; }

/* ── home logos ── */
.logo-link { display: block; transition: transform .5s cubic-bezier(.16,.7,.3,1), opacity .4s ease; }
.logo-link:hover { transform: scale(1.07); }

/* ── load animation (BoM fade-up) ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.lift { opacity: 0; animation: fadeUp 1.1s cubic-bezier(.16,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
.nav.lift { animation-name: fadeDown; }
@keyframes fadeDown { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── scroll reveal (BoM curve) ── */
.reveal { opacity: 0; transform: translateY(26px) scale(.985); }
.reveal.in { opacity: 1; transform: none; transition: opacity 1.3s cubic-bezier(.16,.7,.3,1), transform 1.3s cubic-bezier(.16,.7,.3,1); }
.reveal.in:hover { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .lift { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

/* ── mobile: single flowing column ── */
@media (max-width: 759px) {
  .page-title { width: min(70vw, 360px) !important; }
  .canvas { width: auto !important; height: auto !important; transform: none !important; padding: 110px 18px 60px; }
  .canvas-wrap { height: auto !important; }
  .abs, .page-title { position: static !important; width: auto !important; margin-bottom: 14px; }
  .intro { width: auto !important; max-width: 560px; }
  .visit-btn { position: static !important; display: inline-flex; margin: 6px 0 18px; }
  .pill { position: static !important; display: inline-flex; margin: 0 8px 8px 0; }
  .card {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    aspect-ratio: var(--ar); margin: 0 0 16px; border-radius: 28px;
  }
  .footer-mark { position: static !important; margin-top: 48px; font-size: 24px; text-align: right; }
  .mono.abs { position: static !important; }
  .nav{top:10px;height:52px;gap:1rem;padding:0 18px;overflow-x:visible}
  .nav::-webkit-scrollbar { display: none; }
  .nav .menu .navlink{font-size:.82rem;letter-spacing:.12em}
  .nav .brand{width:26px;height:26px}
  .nav .socials{gap:16px;padding-left:8px}
  .nav .socials img{height:18px}
  .home-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; justify-items: center; align-items: center; padding: 24px 0 48px; }
  .home-logos .abs { margin: 0; }
}

.page-title img, .abs > img { width: 100%; height: auto; }

/* ============ unified type: EB Garamond, #e9e3d5, everywhere ============ */
:root{ --ivory:#e9e3d5; --rule:rgba(233,227,213,.14); }
.nav .menu .navlink, .nav .drop a, .visit-btn, .pill, .intro, .nav .brand-card, .mono {
  font-family:'EB Garamond', Georgia, serif !important;
  color:var(--ivory) !important;
}

/* ============ flow page header ============ */
.page-head{
  max-width:1380px;margin:0 auto;
  padding:150px clamp(20px,3vw,44px) 8px;
}
.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.pt-img{width:min(var(--w,324px),72vw);height:auto;display:block}
.pt-text{font-family:Sentient,'EB Garamond',Georgia,serif;font-weight:400;color:var(--ivory);
  font-size:clamp(20px,2vw,27px);letter-spacing:.55em;line-height:1;margin-right:-.55em}
.page-head .intro{max-width:680px;margin:0 0 1.5rem}
.pills-row{display:flex;flex-wrap:wrap;gap:.55rem;max-width:980px}
.pills-row .pill{position:static;display:inline-flex;align-items:center;
  height:auto;padding:.28em .95em;font-size:clamp(11px,0.85vw,12.5px);letter-spacing:.04em;
  border:1px solid rgba(233,227,213,.22);border-radius:999px;white-space:nowrap}
.page-head .visit-btn{position:static;flex-shrink:0}

/* mosaic canvas: fluid, fits viewport at every width */
.canvas-wrap{width:100%;overflow:hidden;padding:26px 0 70px}
.canvas{position:relative;width:min(100%,1440px);margin:0 auto}

@media (max-width:759px){
  .canvas{aspect-ratio:auto !important}
  .canvas-wrap{overflow:visible}
  .page-head{padding-top:110px}
  .ph-row{align-items:flex-start;flex-direction:column;gap:1.2rem}
  .canvas-wrap{padding:10px 0 50px}
}