:root{
  --bg:#fbf0da;
  --ink:#1e1005;
  --ink2:rgba(30,16,5,.75);
  --ink3:rgba(30,16,5,.55);
  --hair:rgba(30,16,5,.18);
  --hair2:rgba(30,16,5,.10);
  --accent:#9c7443;

  --serif:"Fraunces", serif;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --container:min(1120px, calc(100% - 2*clamp(16px, 2.2vw, 28px)));
  --pad:clamp(16px, 2.2vw, 28px);

  --r:18px;
  --r2:28px;

  --shadow: 0 22px 70px rgba(30,16,5,.12);
  --shadow2: 0 18px 46px rgba(30,16,5,.10);

  --ease: cubic-bezier(.22,.8,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, textarea{ font:inherit; }
[hidden]{ display:none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior:auto !important; }
}

/* Background lines (subtle grid) */
.bg-lines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.45;
}
.bg-lines span{
  position:absolute;
  top:0; bottom:0;
  width:1px;
  background: linear-gradient(to bottom, transparent, var(--hair2), transparent);
}
.bg-lines span:nth-child(1){ left:8vw; }
.bg-lines span:nth-child(2){ left:28vw; }
.bg-lines span:nth-child(3){ left:50vw; opacity:.6; }
.bg-lines span:nth-child(4){ left:72vw; }
.bg-lines span:nth-child(5){ left:92vw; }
.serif-strict { font-family: "Times New Roman", Times, serif; }
.serif-strict { font-family: "Times New Roman", Times, serif; }

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.07;
  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' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* Cursor */
.cursor{ position:fixed; inset:0; pointer-events:none; z-index:300; mix-blend-mode:difference; }
.cursor-dot, .cursor-ring{
  position:absolute; left:0; top:0;
  transform: translate(-50%, -50%);
  border-radius:999px;
}
.cursor-dot{ width:6px; height:6px; background:#fff; opacity:.85; }
.cursor-ring{ width:42px; height:42px; border:1px solid rgba(255,255,255,.7); opacity:.6; }

/* Header */
.header{
  position:fixed;
  top:0; left:0; right:0;
  height:72px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 var(--pad);
  mix-blend-mode:difference;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:180px;
}
.brand-mark{
  width:36px; height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  font-family:var(--serif);
  font-weight:600;
}
.brand-text{ display:grid; line-height:1.1; color:#fff; }
.brand-name{ font-family:var(--serif); letter-spacing:.02em; }
.brand-sub{ font-size:12px; opacity:.65; }

.nav{ display:flex; align-items:center; gap:10px; color:#fff; }
.nav-link{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  opacity:.85;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-link:hover{ opacity:1; transform: translateY(-1px); }

.menu-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border: none;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.menu-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.menu-icon{ width:18px; height:10px; position:relative; }
.menu-icon::before, .menu-icon::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:#fff; opacity:.85;
}
.menu-icon::before{ top:0; }
.menu-icon::after{ bottom:0; }

.icon-btn{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(30,16,5,.18);
  background: color-mix(in oklab, var(--bg) 86%, white);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }

/* Layout */
.container{ width:var(--container); margin:0 auto; position:relative; z-index:2; }
.page{ position:relative; z-index:2; }

/* Hero */
.hero{
  min-height:100vh;
  padding: 120px 0 70px;
  display:flex;
  align-items:center;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:start;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--hair);
  background: color-mix(in oklab, var(--bg) 88%, white);
  border-radius:999px;
  padding:10px 12px;
  width: fit-content;
}
.dot{ width:6px; height:6px; border-radius:999px; background: var(--ink); opacity:.3; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing:.02em; }
.dim{ color: var(--ink3); }

.hero-title{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.01em;
  font-size: clamp(44px, 5.5vw, 84px);
  line-height:.92;
  margin: 16px 0 10px;
}
.hero-sub{
  color: var(--ink2);
  line-height:1.75;
  max-width: 56ch;
  margin: 10px 0 18px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius:999px;
  border:1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-weight:500;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
.btn::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);
  transform: translateX(-120%) rotate(12deg);
  transition: transform .65s var(--ease2);
}
.btn:hover::before{ transform: translateX(120%) rotate(12deg); }
.btn:hover{ box-shadow: var(--shadow2); }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--hair);
}
.btn-ghost::before{
  background: radial-gradient(closest-side, rgba(30,16,5,.10), transparent 70%);
}

.hero-stats{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.stat{
  border:1px solid var(--hair2);
  background: color-mix(in oklab, var(--bg) 90%, white);
  border-radius: var(--r);
  padding: 14px;
}
.stat-num{
  font-family:var(--serif);
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
}

/* Layers (transform system) */
.hero-layers{
  position:relative;
  border-radius: var(--r2);
  border:1px solid var(--hair2);
  background: color-mix(in oklab, var(--bg) 90%, white);
  box-shadow: var(--shadow2);
  overflow:hidden;
  min-height: 520px;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.layer{
  position:absolute;
  inset:0;
  will-change: transform;
}
.layer-bg{
  background:
    radial-gradient(closest-side, rgba(156,116,67,.22), transparent 70%),
    linear-gradient(180deg, rgba(30,16,5,.06), transparent);
  transform: translateZ(-40px) scale(1.05);
}
.layer-photo img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.03);
}
.layer-glow{
  background: radial-gradient(closest-side, rgba(156,116,67,.18), transparent 72%);
  mix-blend-mode:multiply;
  transform: translateZ(20px);
  pointer-events:none;
}

.ink{
  position:absolute;
  left: 12%;
  bottom: 10%;
  width: 76%;
  height: auto;
  transform: translateZ(30px);
  opacity:.9;
}
.ink-path{
  fill:none;
  stroke: rgba(30,16,5,.65);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.hero-badge{
  position:absolute;
  left: 16px;
  top: 16px;
  display:inline-flex;
  gap:10px;
  align-items:baseline;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid color-mix(in oklab, var(--bg) 40%, white);
  background: color-mix(in oklab, var(--bg) 78%, white);
  box-shadow: 0 16px 32px rgba(30,16,5,.10);
  transform: translateZ(40px);
}

.scroll-cue{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  opacity:.7;
}
.cue-line{
  width:64px; height:1px;
  background: var(--hair);
  position:relative;
  overflow:hidden;
}
.cue-line::after{
  content:"";
  position:absolute; left:-20%;
  width:30%; height:1px;
  background: rgba(30,16,5,.55);
  animation: cue 1.6s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(240%); }
}

/* Sections */
.section{ padding: clamp(64px, 8vw, 120px) 0; position:relative; }
.section.alt{
  background: color-mix(in oklab, var(--bg) 92%, white);
  border-top:1px solid var(--hair2);
  border-bottom:1px solid var(--hair2);
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.h2{
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(30px, 4vw, 56px);
  line-height:1.05;
  margin: 8px 0 0;
}
.h3{
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(20px, 2vw, 26px);
  line-height:1.1;
  margin: 6px 0;
}
.lead{ color: var(--ink2); line-height:1.7; margin: 10px 0 18px; }
.note{
  margin-top: 14px;
  display:inline-flex;
  gap:8px;
  align-items:baseline;
  padding: 10px 12px;
  border: 1px dashed var(--hair);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 92%, white);
}

/* Swiper */
.work-swiper{
  border-radius: var(--r2);
  border:1px solid var(--hair2);
  background: color-mix(in oklab, var(--bg) 90%, white);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.work-slide{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  min-height: 520px;
}
.work-media{ position:relative; overflow:hidden; }
.work-media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.03); }
.work-info{
  border-left: 1px solid var(--hair2);
  padding: clamp(16px, 2.4vw, 26px);
  display:grid;
  align-content:center;
  gap: 12px;
}
.swiper-pagination-bullet{
  width: 8px; height: 8px;
  background: rgba(30,16,5,.22);
  opacity:1;
}
.swiper-pagination-bullet-active{ background: rgba(30,16,5,.55); }
.head-actions{ display:flex; align-items:center; gap: 14px; }
.nav-arrows{ display:flex; gap: 10px; }

.link{
  display:inline-flex;
  gap:8px;
  align-items: baseline;
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hair);
  color: var(--ink2);
  transition: border-color .24s var(--ease), color .24s var(--ease);
}
.link:hover{ border-color: var(--ink); color: var(--ink); }

/* Split layout */
.split{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:start;
}
.sticky{
  position:sticky;
  top: 104px;
  display:grid;
  gap:10px;
  align-content:start;
}
.kanji{
  font-family: var(--serif);
  font-size: 46px;
  opacity: .18;
  letter-spacing:.02em;
  line-height:1;
}
.content{ max-width: 860px; }

/* Process rows with wipe line */
.process{ display:grid; gap: 10px; margin-top: 16px; }
.process-row{
  display:grid;
  grid-template-columns: 60px 180px 1fr;
  gap: 14px;
  padding: 14px 14px;
  border-radius: var(--r);
  border:1px solid var(--hair2);
  background: color-mix(in oklab, var(--bg) 90%, white);
  position:relative;
  overflow:hidden;
}
.process-row::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(156,116,67,.18), transparent);
  transform: translateX(-120%);
}
.process-title{ font-family: var(--serif); }

/* Accordion */
.accordion{ display:grid; gap: 10px; margin-top: 18px; }
.acc{
  border:1px solid var(--hair2);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--bg) 90%, white);
  overflow:hidden;
}
.acc summary{
  cursor:pointer;
  list-style:none;
  padding: 16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-family: var(--serif);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc-body{
  padding: 0 16px 16px;
  border-top:1px solid var(--hair2);
}
.acc-body ul{ margin: 14px 0 0; padding-left: 18px; color: var(--ink2); }
.acc-body li{ margin: 6px 0; }

/* Journal cards */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.card{
  border:1px solid var(--hair2);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--bg) 90%, white);
  overflow:hidden;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .5s var(--ease2);
  transform-style: preserve-3d;
}
.card:hover{ box-shadow: var(--shadow2); }
.card img{ width:100%; aspect-ratio: 4/3; object-fit:cover; transform: scale(1.03); }
.card-body{ padding: 16px; display:grid; gap: 10px; }

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  margin-top: 18px;
}
.form{
  border:1px solid var(--hair2);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--bg) 90%, white);
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form label{ display:grid; gap:8px; }
.form .full{ grid-column: 1/-1; }
input, textarea{
  border:1px solid var(--hair);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in oklab, var(--bg) 92%, white);
  outline:none;
  transition: box-shadow .24s var(--ease), border-color .24s var(--ease);
}
input:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--ink) 42%, var(--hair));
  box-shadow: 0 0 0 4px rgba(30,16,5,.08);
}
.actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.contact-card{
  border:1px solid var(--hair2);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--bg) 90%, white);
  padding: 16px;
}
.divider{ height:1px; background: var(--hair2); margin: 14px 0; }

.menu{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:stretch;
}
.menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(30,16,5,.65);
  opacity:0;
}
.menu-panels{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  width: min(980px, calc(100% - 2*var(--pad)));
  margin: auto;
  overflow:hidden;
  border: 1px solid color-mix(in oklab, var(--bg) 35%, white);
  box-shadow: var(--shadow);
  transform: translateY(16px) scale(.985);
  opacity:0;
}
.menu-panel{
  background: color-mix(in oklab, var(--bg) 85%, white);
}
.menu-panel-right{
  border-left: 1px solid var(--hair2);
  background: color-mix(in oklab, var(--bg) 90%, white);
}
.menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair2);
}
.menu-links{ display:grid; gap: 10px; padding-top: 18px; }
.menu-link{
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height:1.05;
}
.menu-link:hover{ text-decoration: underline; text-underline-offset: 10px; }
.menu-bottom{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hair2);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.menu-meta{ display:grid; gap: 14px; }
.meta-block{ padding: 10px 0; border-bottom: 1px dashed var(--hair2); }
.meta-lines{ display:grid; gap: 6px; padding-top: 8px; color: var(--ink2); }
.meta-lines a:hover{ text-decoration: underline; text-underline-offset: 4px; }

.credits-btn{
  margin-top: 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: color-mix(in oklab, var(--bg) 90%, white);
  cursor:pointer;
}
.credits-btn:hover{ box-shadow: var(--shadow2); }

/* Credits drawer */
.credits{
  position:fixed;
  inset:0;
  z-index:140;
}
.credits-backdrop{
  position:absolute;
  inset:0;
  background: rgba(30,16,5,.55);
  opacity:0;
}
.credits-panel{
  position:absolute;
  right: var(--pad);
  top: 90px;
  width: min(520px, calc(100% - 2*var(--pad)));
  border-radius: var(--r2);
  border: 1px solid color-mix(in oklab, var(--bg) 35%, white);
  background: color-mix(in oklab, var(--bg) 88%, white);
  box-shadow: var(--shadow);
  transform: translateX(18px);
  opacity:0;
  overflow:hidden;
}
.credits-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px;
  border-bottom: 1px solid var(--hair2);
}
.credits-body{ padding: 16px; }
.credits-title{
  font-family: var(--serif);
  font-weight:400;
  margin: 8px 0 10px;
  font-size: 28px;
  line-height:1.1;
}
.credits-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.credits-col ul{ margin: 10px 0 0; padding-left: 18px; color: var(--ink2); }
.credits-col li{ margin: 6px 0; }

/* Modal */
.modal{
  position:fixed;
  inset:0;
  z-index:160;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(30,16,5,.58);
  opacity:0;
}
.modal-panel{
  position:absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(620px, calc(100% - 2*var(--pad)));
  border-radius: var(--r2);
  border: 1px solid color-mix(in oklab, var(--bg) 35%, white);
  background: color-mix(in oklab, var(--bg) 88%, white);
  box-shadow: var(--shadow);
  opacity:0;
}
.modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px;
  border-bottom: 1px solid var(--hair2);
}
.modal-title{
  font-family: var(--serif);
  font-weight:400;
  margin: 16px 16px 6px;
  font-size: 30px;
  line-height:1.1;
}
.modal-panel p{ margin: 0 16px 14px; color: var(--ink2); }
.modal-actions{
  padding: 0 16px 16px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* Preloader */
.preloader{
  position:fixed;
  inset:0;
  z-index:220;
  background: var(--bg);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.preloader-stage{
  position:relative;
  width: min(1100px, calc(100% - 2*var(--pad)));
  height: min(520px, 72vh);
}
.pl-rail{
  position:absolute;
  top: 10%;
  height: 80%;
  width: 4px;
  background: var(--ink);
  opacity: .9;
  transform-origin: center;
  transform: scaleY(0);
}
.pl-rail-left{ left: 7vw; }
.pl-rail-right{ right: 7vw; }

.pl-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.pl-line{
  position:absolute;
  left:50%;
  width:1px;
  background: rgba(30,16,5,.65);
  transform: translateX(-50%) scaleY(0);
}
.pl-line-top{ top:0; height: 50%; transform-origin: bottom; }
.pl-line-bottom{ bottom:0; height: 50%; transform-origin: top; }

.pl-emblem{
  width: 88px; height: 88px;
  border-radius:999px;
  border: 1px solid rgba(30,16,5,.55);
  display:grid;
  place-items:center;
  background: color-mix(in oklab, var(--bg) 92%, white);
  box-shadow: 0 18px 46px rgba(30,16,5,.08);
  transform: translateZ(0) scale(.92);
  opacity: 0;
}
.pl-kanji{
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing:.02em;
}

.pl-hint{
  position:absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
  opacity: .65;
}
.pl-dots{
  width: 44px; height: 8px; position:relative;
}
.pl-dots::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 6px 4px, rgba(30,16,5,.6) 2px, transparent 3px),
    radial-gradient(circle at 22px 4px, rgba(30,16,5,.35) 2px, transparent 3px),
    radial-gradient(circle at 38px 4px, rgba(30,16,5,.2) 2px, transparent 3px);
}

/* Doors: cover content; open from center */
.pl-doors{
  position:absolute;
  inset:0;
  display:flex;
  pointer-events:none;
  opacity:0;
}
.door{
  flex:1;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--hair2);
}
.door-left{ border-right: none; }
.door-right{ border-left: none; }
.door-seam{
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:1px;
  background: rgba(210, 205, 202, 0.65);
  opacity: .9;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .work-slide{ grid-template-columns: 1fr; }
  .work-info{ border-left:0; border-top:1px solid var(--hair2); }
  .split{ grid-template-columns: 1fr; }
  .sticky{ position:relative; top:auto; display:flex; align-items:baseline; gap:14px; }
  .grid{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .form{ grid-template-columns: 1fr; }
  .nav-link{ display:none; }
  .menu-panels{ grid-template-columns: 1fr; }
  .menu-panel-right{ border-left:0; border-top: 1px solid var(--hair2); }
  .credits-panel{ right: 50%; transform: translate(50%, 0); }
}

/* Utility: keep content inaccessible while loading */
body.is-loading .page{ visibility:hidden; }
.pl-mark{
  width: min(360px, 72vw);
  height: 92px;
  border-radius: 18px;
  border: 1px solid rgba(30,16,5,.55);
  background: color-mix(in oklab, var(--bg) 92%, white);
  box-shadow: 0 18px 46px rgba(30,16,5,.08);
  display:grid;
  place-items:center;
  position:relative;
  opacity:0;
  transform: scale(.94);
}

.pl-word{
  font-family: var(--serif);          /* replace with your calligraphy font later */
  font-size: 34px;
  letter-spacing: .01em;
  line-height: 1;
  color: rgba(30,16,5,.92);
  position:relative;
  z-index:2;
  display:flex;
  gap: 0px;
}

.pl-word .pl-ch{
  display:inline-block;
  will-change: transform, opacity;
}

.pl-sign{
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: 10px;
  height: 34px;
  width: auto;
  z-index:1;
  opacity:.95;
}

.pl-sign-path{
  fill:none;
  stroke: rgba(30,16,5,.65);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pl-sign-path--soft{
  opacity:.35;
  stroke-width: 1.6;
}

.pl-mark{ position:relative; }
.pl-pen{
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(30,16,5,.9);
  box-shadow: 0 10px 26px rgba(30,16,5,.18);
  opacity:0;
  transform: translate(-50%,-50%);
}

.sig-text{
  font-family: "Great Vibes", cursive; /* or your calligraphy font */
  font-size: 132px;
  letter-spacing: .5px;
  fill: rgba(30,16,5,.92);
}
.sig-text{
  font-family: "Allura", cursive;
  font-size: 158px;
  fill: rgba(30,16,5,.96);
  letter-spacing: .2px;
  paint-order: stroke fill;
  stroke: rgba(30,16,5,.10);
  stroke-width: 1.2;
}

.pl-sig{ shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.sig-mask-path, .sig-ink-path{ vector-effect: non-scaling-stroke; }

.sig-ink-path--soft{ opacity: .95; }

.pl-pen{
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(30,16,5,.92);
  box-shadow: 0 10px 26px rgba(30,16,5,.18);
  opacity:0;
  transform: translate(-50%,-50%);
}
.pl-doors{ background:#000; }  /* the shaft */
.door{ background: var(--bg); } /* the doors themselves */


.has-ui-line{ position:relative; }
.ui-line{
  position:absolute;
  left:0; right:0;
  height:1px;
  background: rgba(30,16,5,.18);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events:none;
}
.ui-line.top{ top:0; }
.ui-line.bottom{ bottom:0; }
/* ================================
   PRELOADER: RECTANGLE VISIBILITY FIX
   - no border radius
   - edges visible on beige background
   - edges behind signature text
================================ */
.pl-mark { position: relative; }

.pl-sig { position: relative; z-index: 2; }
.pl-pen { position: absolute; z-index: 3; }

.pl-rect{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:0 !important; /* remove any rounding */
  z-index: 1; /* behind text */
}

.pl-rect .edge{
  position:absolute;
  background: rgba(20, 12, 6, 0.88); /* darker so it shows */
  box-shadow: 0 0 10px rgba(0,0,0,.12);
  will-change: transform, opacity;
}

.pl-rect .edge.v{
  width:2px;
  top:10%;
  bottom:10%;
}

.pl-rect .edge.h{
  height:2px;
  left:10%;
  right:10%;
}

.pl-rect .edge.left{ left:10%; }
.pl-rect .edge.right{ right:10%; }

.pl-rect .edge.topL{ top:10%; left:10%; right:50%; transform-origin:right; }
.pl-rect .edge.topR{ top:10%; left:50%; right:10%; transform-origin:left; }
.pl-rect .edge.botL{ bottom:10%; left:10%; right:50%; transform-origin:right; }
.pl-rect .edge.botR{ bottom:10%; left:50%; right:10%; transform-origin:left; }

/* ================================
   PRELOADER: MARBLE RIBBONS MOUNT (ONLY LOADING)
   Your WebGL canvas can be appended inside these.
================================ */
.preloader .pl-marble{
  position:absolute;
  top:0; bottom:0;
  width: 14vw;
  min-width: 110px;
  max-width: 220px;
  pointer-events:none;
  opacity: 1;
  z-index: 0; /* behind rails + mark */
  overflow:hidden;
}

.preloader .pl-marble-left{ left:0; }
.preloader .pl-marble-right{ right:0; }

/* ensure marble never appears on main page even if reused accidentally */
.page .pl-marble{ display:none !important; }


/* container */
.pl-mark { position: relative; }

/* rectangle overlay */
.pl-rect{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* base line style */
.pl-rect .edge{
  position: absolute;
  background: rgba(255,255,255,0.9);
  opacity: 0;                 /* becomes visible when animating */
  will-change: transform, opacity;
}

/* vertical edges */
.pl-rect .edge.v{
  width: 1px;
  top: 10%;
  bottom: 10%;
  transform: scaleY(0);
  transform-origin: center;
}

/* left & right positions */
.pl-rect .edge.left  { left: 10%; }
.pl-rect .edge.right { right: 10%; }

/* horizontal edges (split into halves) */
.pl-rect .edge.h{
  height: 1px;
}

/* top halves: meet in the middle */
.pl-rect .edge.topL{
  top: 10%;
  left: 10%;
  right: 50%;
  transform: translateX(-28px) scaleX(0.85);
  transform-origin: right;
}
.pl-rect .edge.topR{
  top: 10%;
  left: 50%;
  right: 10%;
  transform: translateX(28px) scaleX(0.85);
  transform-origin: left;
}

/* bottom halves: meet in the middle */
.pl-rect .edge.botL{
  bottom: 10%;
  left: 10%;
  right: 50%;
  transform: translateX(-28px) scaleX(0.85);
  transform-origin: right;
}
.pl-rect .edge.botR{
  bottom: 10%;
  left: 50%;
  right: 10%;
  transform: translateX(28px) scaleX(0.85);
  transform-origin: left;
}

/* =========================================================
   ATTACH (intro)
   Add class: .pl-rect.is-in
   ========================================================= */
.pl-rect.is-in .edge{
  opacity: 1;
  transition:
    opacity 120ms ease-out,
    transform 420ms cubic-bezier(.2,.9,.2,1);
}

/* top/bottom halves slide in and attach */
.pl-rect.is-in .edge.topL,
.pl-rect.is-in .edge.botL,
.pl-rect.is-in .edge.topR,
.pl-rect.is-in .edge.botR{
  transform: translateX(0) scaleX(1);
}

/* vertical edges grow up/down */
.pl-rect.is-in .edge.v{
  transform: scaleY(1);
}

/* tiny “lock” micro-click (optional) */
.pl-rect.is-in.lock .edge.topL,
.pl-rect.is-in.lock .edge.botL,
.pl-rect.is-in.lock .edge.topR,
.pl-rect.is-in.lock .edge.botR{
  transform: translateX(0) scaleX(1.02);
}
.pl-rect.is-in.lock2 .edge.topL,
.pl-rect.is-in.lock2 .edge.botL,
.pl-rect.is-in.lock2 .edge.topR,
.pl-rect.is-in.lock2 .edge.botR{
  transform: translateX(0) scaleX(1);
}

/* =========================================================
   DETACH (outro)
   Add class: .pl-rect.is-out
   ========================================================= */
.pl-rect.is-out .edge{
  opacity: 1;
  transition:
    transform 300ms cubic-bezier(.6,0,.2,1),
    opacity 220ms ease-in;
}

/* slide halves away */
.pl-rect.is-out .edge.topL,
.pl-rect.is-out .edge.botL{
  transform: translateX(-24px) scaleX(0.86);
  opacity: 0;
}
.pl-rect.is-out .edge.topR,
.pl-rect.is-out .edge.botR{
  transform: translateX(24px) scaleX(0.86);
  opacity: 0;
}

/* shrink vertical edges */
.pl-rect.is-out .edge.v{
  transform: scaleY(0);
  opacity: 0;
}
/* =========================
   HERO (Saisei-like)
========================= */

:root{
  --hero-cream: #fbf0da;
  --hero-line: rgba(251,240,218,.55);
  --hero-ink: rgba(0,0,0,.78);
  --hero-ink2: rgba(0,0,0,.36);
  --hero-top-h: 78px;
}

.hero--saisei{
  position: relative;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  color: var(--hero-cream);
  background: #0a0806;
}

/* Background image */
.hero--saisei .hero-bg{
  position:absolute;
  inset:0;
  background-image: url("https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=2400&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: contrast(1.05) saturate(.92);
}

/* Overlay layer */
.hero--saisei .hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 20% 65%, rgba(0,0,0,.55), transparent 65%),
    radial-gradient(900px 600px at 75% 40%, rgba(0,0,0,.52), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.55) 45%, rgba(0,0,0,.72));
  pointer-events:none;
}

/* Top bar */
.hero--saisei .hero-top{
  position:absolute;
  left:0; right:0; top:0;
  height: var(--hero-top-h);
  padding: 22px 34px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  z-index: 5;
}

.hero--saisei .hero-brand{
  justify-self: start;
  text-decoration:none;
  color: var(--hero-cream);
  letter-spacing:.14em;
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0; transform: translateY(-10px);
}

.hero--saisei .hero-est{
  justify-self:center;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0; transform: translateY(-10px);
}



/* Top line draws left->right */
.hero--saisei .hero-topline{
  position:absolute;
  left:0; right:0;
  top: var(--hero-top-h);
  height: 1px;
  background: var(--hero-line);
  transform-origin:left;
  transform: scaleX(0);
  z-index: 4;
}

/* Inner layout */
.hero--saisei .hero-inner{
  position:relative;
  height:100%;
  z-index: 3;
  padding: calc(var(--hero-top-h) + 40px) clamp(20px, 3vw, 56px) 44px;
}

/* Big H1 */
.hero--saisei .hero-h1{
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: .82;
  font-size: clamp(64px, 16vw, 240px);
  color: var(--hero-cream);
}

/* SplitType line wrappers */
.hero--saisei .h1-linewrap{
  display:block;
  overflow:hidden;
}
.hero--saisei .h1-line{
  display:block;
  transform: translateY(120%);
  will-change: transform;
}

/* Right note */
.hero--saisei .hero-note{
  position:absolute;
  right: clamp(18px, 3vw, 56px);
  top: 50%;
  transform: translateY(-18%);
  width: min(340px, 38vw);
  opacity: 0;
  transform-origin: right center;
}
.hero--saisei .hero-kanji{
  font-size: 42px;
  line-height: 1;
  margin-bottom: 10px;
  opacity: .9;
}
.hero--saisei .hero-note-title{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 8px;
}
.hero--saisei .hero-note-text{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: .86;
}

/* CTA + Scroll */
.hero--saisei .hero-cta{
  position:absolute;
  left: clamp(18px, 3vw, 56px);
  bottom: 44px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(251,240,218,.35);
  color: var(--hero-cream);
  text-decoration:none;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  opacity: 1;
  will-change: clip-path, transform, opacity;
}

/* Left->Right reveal utility (used by CTA + scroll) */
.hero--saisei .reveal-x{
  clip-path: inset(0 100% 0 0);
}

/* Responsive tweaks */
@media (max-width: 900px){
  .hero--saisei .hero-note{
    top: auto;
    bottom: 132px;
    transform: none;
    width: min(360px, 86vw);
  }
  .hero--saisei .hero-scroll{
    bottom: 96px;
  }
}
/* =========================
   HERO MAIN (Saisei-like)
========================= */
:root{
  --cream: #fbf0da;
  --line: rgba(251,240,218,.55);
  --ink: rgba(0,0,0,.72);
  --padX: clamp(18px, 3vw, 56px);
  --topH: 72px; /* topline position like screenshot */
}

.hero-main{
  position: relative;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  background: #0b0907;
  color: var(--cream);
}

/* FULL BG IMAGE */
.hero-main .hero-bg{
  position:absolute;
  inset:0;
  background-image: url("https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=2400&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: contrast(1.06) saturate(.92);
}

/* DARK OVERLAY like screenshot */
.hero-main .hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 25% 70%, rgba(0,0,0,.62), transparent 65%),
    radial-gradient(1000px 600px at 75% 40%, rgba(0,0,0,.58), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.76), rgba(0,0,0,.62) 45%, rgba(0,0,0,.78));
  pointer-events:none;
}

/* TOP BAR */
.hero-topbar{
  position:absolute;
  left:0; right:0;
  top:0;
  height: var(--topH);
  padding: 18px var(--padX);
  display:flex;
  align-items:center;
  z-index: 5;
}

.hero-top-left{
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-10px);
}

.hero-top-center{
  position:absolute;
  left:50%;
  transform: translate(-50%, -10px);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
}

.hero-burger{
  margin-left:auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
}
.hero-burger span{
  display:block;
  width: 26px;
  height: 2px;
  margin-left:auto;
  background: rgba(251,240,218,.85);
  border-radius: 2px;
}
.hero-burger span + span{
  margin-top: 8px;
  width: 22px;
  opacity: .9;
}

/* TOP HORIZONTAL LINE */
.hero-topline{
  position:absolute;
  left:0; right:0;
  top: var(--topH);
  height: 1px;
  background: var(--line);
  transform-origin:left;
  transform: scaleX(0);
  z-index: 4;
}

/* BIG WORD bottom-left */
.hero-word{
  position:absolute;
  left: var(--padX);
  bottom: clamp(64px, 8vh, 110px);
  z-index: 3;
  pointer-events:none;
}

.hero-word-base{
  font-family: "Fraunces", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
  line-height: .85;
  opacity: 0; /* base fades in after slices */
}

/* SLICES (scanline reveal) */
.hero-word-slices{
  position:absolute;
  inset:0;
}
.hero-slice{
  position:absolute;
  inset:0;
  font-family: "Fraunces", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-size: clamp(96px, 18vw, 360px);
  line-height: .85;

  /* each slice shows only its band */
  clip-path: inset(
    calc(var(--i) * 10%)
    0
    calc(100% - (var(--i) + 1) * 10%)
    0
  );

  opacity: 0;
  transform: translateX(-24px);
  filter: blur(.6px);
}
.hero-slice span{
  display:block;
}

/* RIGHT TEXT BLOCK */
.hero-right{
  position:absolute;
  right: var(--padX);
  top: 50%;
  transform: translateY(-10%);
  width: min(360px, 36vw);
  z-index: 3;

  opacity: 0;
  transform-origin: center;
}

.hero-right-title{
  font-family: "Fraunces", serif;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
  opacity: .95;
}
.hero-right-sub{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 12px;
}
.hero-right-text{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.58;
  opacity: .88;
}



/* RESPONSIVE */
@media (max-width: 900px){
  .hero-right{
    width: min(520px, 86vw);
    right: var(--padX);
    left: var(--padX);
    top: auto;
    bottom: 140px;
    transform: none;
  }
  .hero-book{
    right: var(--padX);
    left: var(--padX);
    justify-content:center;
  }
}
/* ============================================================
   FIX 1: Header MUST NOT show/capture clicks during preloader
============================================================ */
body.is-loading .header {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px);
}

/* Preloader should sit above everything during loading */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
}

/* After loading, we disable preloader pointer events safely */
body.preloader-done .preloader {
  pointer-events: none !important;
}

/* Ensure your existing header stays above hero */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
}

/* Ensure the menu overlay is above header and clickable */
.menu {
  position: fixed;
  inset: 0;
  z-index: 6000;
}
.menu[hidden] { display: none !important; }

/* ============================================================
   HERO (Saisei-like main section) — using EXISTING header
============================================================ */
.hero-main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #0b0704;
}

/* full background image */
.hero-main .hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("https://static.wixstatic.com/media/98245b_ed8df43eb18c4492a01d8d5b77afeb14~mv2.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: brightness(0.55) saturate(0.9);
  pointer-events: none;
}

/* overlay layer (must not block clicks) */
.hero-main .hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 25% 70%, rgba(0,0,0,0.15), rgba(0,0,0,0.80)),
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
}

/* we need a CSS var for header height so the hero line sits under it */
:root { --header-h: 78px; }

/* the top line under the header */
.hero-topline {
  position: fixed;
  left: 0;
  width: 100%;
  height: 1px;
  top: var(--header-h);
  background: rgba(246, 233, 210, 0.75);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 2500; /* under header, above hero bg */
  pointer-events: none;
}

/* BIG WORD bottom-left */
.hero-word {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  bottom: clamp(42px, 10vh, 120px);
  z-index: 2;
  pointer-events: none;

  /* typography on container so slices inherit */
  font-family: "Fraunces", serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.86;
  font-size: clamp(72px, 16vw, 260px);
  color: #f6e9d2;
}

.hero-word-base {
  display: block;
  position: relative;
  z-index: 1;
}

/* slices overlay exactly on top of the base */
.hero-word-slices {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* each slice is a horizontal band of the same text */
.hero-slice {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-22px);
}

.hero-slice > span {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  color: #f6e9d2;
}

/* Right text block */
.hero-right {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  top: 56%;
  transform: translateY(-50%);
  width: min(330px, 30vw);
  z-index: 3;
  color: rgba(246, 233, 210, 0.92);
}

.hero-right-title {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 8px;
}

.hero-right-sub {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

.hero-right-text {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 320px;
}




/* IMPORTANT: hero layers must NOT block header clicks */
.hero-main,
.hero-main * {
  pointer-events: none;
}

/* ================================
   GLOBAL STACK / FIXES
================================ */
:root{
  --cream: #f6e9d2;
  --cream-80: rgba(246,233,210,.80);
  --cream-55: rgba(246,233,210,.55);
  --cream-28: rgba(246,233,210,.28);
  --header-h: 78px;
}

/* header must sit above hero */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 7000;
  background: transparent;
}

/* hide header during preloader */
body.is-loading .header{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px);
}

/* preloader layering */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9000;
}
body.preloader-done .preloader{
  pointer-events: none !important;
}

/* menu overlay must be above everything and clickable */
.menu{
  position: fixed;
  inset: 0;
  z-index: 9500;
}
.menu[hidden]{ display:none !important; }

/* ================================
   HEADER — make it match screenshot
   (works with your existing markup)
================================ */
.header{
  padding: 18px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--cream);
}

.brand-logo{
  height: 26px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

.brand-text{
  display: grid;
  line-height: 1.1;
}
.brand-name{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  opacity: .95;
}
.brand-sub{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(246,233,210,.70);
}

.nav{
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.nav-link{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(246,233,210,.90);
  text-decoration: none;
  letter-spacing: .02em;
  opacity: .95;
  transition: opacity .2s ease;
}
.nav-link:hover{ opacity: 1; }

.menu-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  color: rgba(246,233,210,.92);
}

.nav-cta{
  white-space: nowrap;
  padding: 10px 14px;
  border-right: 2px solid rgba(246,233,210,.25);
  border-left: 2px solid rgba(246,233,210,.25);

  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}

/* responsive (optional) */
@media (max-width: 980px){
  .nav-link{ display:none; }
}

/* ================================
   HERO — MATCH SCREENSHOT
================================ */
.hero-main{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #0b0704;
  padding-top: calc(var(--header-h) + 14px);
}

/* background image full */
.hero-main .hero-bg{
  position: absolute;
  inset: 0;
  background-image: url("https://static.wixstatic.com/media/98245b_ed8df43eb18c4492a01d8d5b77afeb14~mv2.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  filter: brightness(.60) saturate(.92);
  z-index: 0;
}
.about-main .about-bg{
  position: absolute;
  inset: 0;
  background-image: url("https://media.licdn.com/dms/image/v2/D4E22AQEWxzihKxclGQ/feedshare-shrink_2048_1536/feedshare-shrink_2048_1536/0/1721244893232?e=2147483647&v=beta&t=lT32YhmnJ-F3cjGYyOTzDFO2m8OZBtbA29bcIBO9Rqo");
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  filter: brightness(.60) saturate(.92);
  z-index: 0;
}

/* overlay vignette (does NOT block clicks) */
.hero-main .hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 25% 72%, rgba(0,0,0,.15), rgba(0,0,0,.78)),
    linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.72));
  z-index: 1;
}

/* thin line under header */
.hero-topline{
  position: fixed;
  left: 0;
  top: var(--header-h);
  width: 100%;
  height: 1px;
  background: rgba(246,233,210,.65);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 6500; /* under header, above hero */
  pointer-events: none;
}

/* BIG WORD */
.hero-word{
  position: absolute;
  left: clamp(34px, 4.2vw, 64px);
  bottom: clamp(64px, 9vh, 120px);
  z-index: 2;
  pointer-events: none;

  font-family: "Fraunces", serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: .86;
  font-size: clamp(84px, 16vw, 280px);
  color: var(--cream);
  text-shadow: 0 22px 60px rgba(0,0,0,.55);
}

.hero-word-base{
  position: relative;
  display: block;
  z-index: 1;
}

/* slices overlay */
.hero-word-slices{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* slice band */
.hero-slice{
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform, opacity;
}
.hero-slice > span{
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  color: var(--cream);
}

/* Right note block (place like screenshot) */
.hero-right{
  position: absolute;
  right: clamp(28px, 4vw, 64px);
  top: clamp(200px, 35vh, 260px);
  width: min(360px, 33vw);
  z-index: 4;
  padding: 2%;
  color: rgba(246,233,210,.92);
}

.hero-right-title{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .88;
  margin-bottom: 10px;
}

.hero-right-sub{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 12px;
}

.hero-right-text{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: .82;
}

/* Scroll center bottom */
.hero-scroll{
  position: absolute;
  right: clamp(34px, 4.2vw, 64px);
  bottom: clamp(64px, 11vh, 120px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  color: rgba(246,233,210,.80);
}
.hero-scroll-label{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-scroll-line{
  width: 64px;
  height: 1px;
  background: rgba(246,233,210,.55);
  transform-origin: left center;
  transform: scaleX(0);
}

/* BOOK BUTTON — guaranteed visible like you want */
.hero-book{
  position: absolute;
  right: 10%;
  top: clamp(100px, 10vh, 260px);
  width: min(360px, 33vw);
margin-top: 3rem;
  z-index: 6 !important;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 17px;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;

  color: rgba(246,233,210,.95);
  border: 1px solid rgba(246,233,210,.26);
  border-bottom: none;
  padding: 11px 16px;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.28);

  pointer-events: auto !important; /* important */
}

/* allow clicks on header + booking, but keep hero layers non-blocking */
.hero-main{ pointer-events: none; }
.hero-book{ pointer-events: auto !important; }
/* ================================
   Hover underline progress (L -> R)
   for nav links + hero button
================================ */

/* NAV LINKS */
.nav-link{
  position: relative;
  display: inline-block;
  padding-bottom: 6px; /* room for underline */
}

.nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: rgba(246,233,210,.75);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.nav-link:hover::after{
  transform: scaleX(1);
}



.hero-book::after{
  content: "";
  position: absolute;
  left: 14px;                 /* inset underline to match padding */
  right: 14px;
  bottom: 8px;                /* inside the pill */
  height: 1px;
  background: rgba(246,233,210,.75);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.hero-book:hover::after{
  transform: scaleX(1);
}

/* keep your opacity hover too */
.nav-link:hover,
.hero-book:hover{
  opacity: 1;
}


/* base faint rail */
.hero-right::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:100%;
  background: rgba(246,233,210,.18);
}

/* animated brighter stroke */
.hero-right::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:100%;
  background: rgba(246,233,210,.65);
  transform: scaleY(0);
  transform-origin: top;
  animation: sideIndicator 10s cubic-bezier(.2,.8,.2,1) infinite;
}

@keyframes sideIndicator{
  0%   { transform: scaleY(0);   opacity: 1; }
  55%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; }
}



.hero-scroll-word{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246,233,210,.86);
  line-height: 1.1;
}

/* base line */
.hero-scroll-line{
  width: 84px;
  height: 1px;
  background: rgba(246,233,210,.20);
  position: relative;
  overflow: hidden;
}

/* animated fill that loops */
.hero-scroll-line::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background: rgba(246,233,210,.75);
  transform-origin: left center;
  transform: scaleX(0);
  animation: scrollLineFill 20s cubic-bezier(.2,.8,.2,1) infinite;
}

@keyframes scrollLineFill{
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* ✅ Hide scrollbars everywhere (all major browsers) */
/* Firefox */
*{
  scrollbar-width: none;
}

/* IE / old Edge */
*{
  -ms-overflow-style: none;
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}
*::-webkit-scrollbar-thumb{
  background: transparent !important;
}
*::-webkit-scrollbar-track{
  background: transparent !important;
}

/* safety: hero layers never steal clicks */
#heroMain .hero-bg,
#heroMain .hero-overlay,
#heroMain .hero-topline{
  pointer-events: none !important;
}

/* ===== LAMP CONTROL CLICK/DRAG HOTFIX ===== */
/* Put on #heroMain or any parent that needs lumen effect */
#heroMain{ --hero-lumen: 1; --hero-shade: .58; --hero-glow: .18; }
#heroMain[data-lumen="2"]{ --hero-lumen: 1.12; --hero-shade: .45; --hero-glow: .28; }
#heroMain[data-lumen="3"]{ --hero-lumen: 1.26; --hero-shade: .34; --hero-glow: .38; }

/* Optional: hook your layers */
.hero-bg{ filter: brightness(var(--hero-lumen)) contrast(1.06) saturate(1.03); transition: filter 420ms cubic-bezier(.2,.9,.2,1); }
.hero-overlay{ opacity: var(--hero-shade); transition: opacity 420ms cubic-bezier(.2,.9,.2,1); }
.hero-topline{ filter: drop-shadow(0 0 18px rgba(255,240,210,var(--hero-glow))); transition: filter 420ms cubic-bezier(.2,.9,.2,1); }

/* ===== BANKER LAMP PULL CHAIN CONTROL ===== */
/* ===== HERO LUMEN (kept) ===== */
#heroMain{
  --hero-lumen: 1;
  --hero-shade: .58;
  --hero-glow: .18;

  /* lamp geometry */
  --lamp-travel: 72px;     /* smaller */
  --lamp-pull: 0px;        /* JS updates */
  position: relative;
  isolation: isolate;
}

#heroMain[data-lumen="2"]{ --hero-lumen: 1.10; --hero-shade: .46; --hero-glow: .28; }
#heroMain[data-lumen="3"]{ --hero-lumen: 1.22; --hero-shade: .36; --hero-glow: .40; }

/* layers must not intercept pointer */
#heroMain .hero-bg,
#heroMain .hero-overlay,
#heroMain .hero-topline{ pointer-events:none !important; }

.hero-bg{
  filter: brightness(var(--hero-lumen)) contrast(1.06) saturate(1.03);
  transition: filter 420ms cubic-bezier(.2,.9,.2,1);
}
.hero-overlay{ transition: opacity 420ms cubic-bezier(.2,.9,.2,1); opacity: var(--hero-shade); }
.hero-topline{
  filter: drop-shadow(0 0 18px rgba(255,240,210,var(--hero-glow)));
  transition: filter 420ms cubic-bezier(.2,.9,.2,1);
}

/* ===== LAMP CONTROL ===== */
.lampctl{
  position:absolute;
  /* moved slightly down/right (toward center) */
    top: clamp(100px, 18vh, 300px);

  left: 46px;

  width: 58px;
  height: 170px;

  z-index: 999999;
  pointer-events:auto;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

/* thin “wire” (no beads) */
.lampctl-chain{
  position:absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: calc(82px + var(--lamp-travel));
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255,244,228,.55),
    rgba(255,244,228,.12)
  );
  opacity: .9;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
  pointer-events:none;
}

/* knob = ivory rounded rectangle */
.lampctl-knob{
  position:absolute;
  left: 50%;
  top: calc(78px + var(--lamp-pull));
  transform: translateX(-50%);
  width: 8px;
  height: 22px;
  border-radius: 10px;
  border: 1px solid rgba(255,248,235,.88);
  background:
    linear-gradient(180deg, rgba(255,248,235,.98), rgba(235,224,200,.92));
  box-shadow:
    0 14px 26px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.55);
  cursor: grab;
  padding: 0;
  outline: none;
  pointer-events:auto;
}
.lampctl-knob:active{ cursor: grabbing; }

/* small glow halo */
.lampctl-knob::after{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius: 14px;
  background: radial-gradient(circle,
    rgba(255,240,210,var(--hero-glow)) 0%,
    rgba(255,240,210,0) 62%
  );
  opacity: .9;
  pointer-events:none;
}

/* stage marks = refined lines (not circles) */
.lampctl-marks{
  position:absolute;
  left: calc(50% + 18px);
  top: 78px;
  width: 18px;
  height: var(--lamp-travel);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.lampctl:hover .lampctl-marks{
  opacity: 1;
  transform: translateX(0);
}

/* each marker line */
.lampctl-mark{
  position:absolute;
  left: 0;
  top: calc(var(--p) * var(--lamp-travel));
  width: 18px;
  height: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lampctl-mark::before{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,244,228,.28);
  box-shadow: 0 6px 14px rgba(0,0,0,.32);
  transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
  opacity: .85;
}
.lampctl-mark:hover::before{
  background: rgba(255,244,228,.55);
  transform: translateY(-50%) scaleX(1.06);
}

.lampctl-mark.is-active::before{
  background: rgba(255,244,228,.92);
  opacity: 1;
}

/* hover arrows */
.lampctl-arrows{
  position:absolute;
  left: 50%;
  top: 52px;
  width: 18px;
  height: 22px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events:none;
}
.lampctl:hover .lampctl-arrows{ opacity: .9; }

.lampctl-arrows::before,
.lampctl-arrows::after{
  content:"";
  position:absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(255,244,228,.70);
  border-right: 2px solid rgba(255,244,228,.70);
  transform-origin:center;
}
.lampctl-arrows::before{ top: 0; transform: translateX(-50%) rotate(-45deg); }
.lampctl-arrows::after{ bottom: 0; transform: translateX(-50%) rotate(135deg); }
/* =========================================================
   SAISEI-STYLE MENU (DrAdams)
   - Dark overlay, shoji frame lines, big nav, split panels
   - Works with your existing HTML structure:
     #menu.menu[hidden] + .menu-backdrop + .menu-panels + .menu-panel-left/right
   ========================================================= */

body.menu-open { overflow: hidden; }
body.menu-open .header { mix-blend-mode: normal; } /* avoid weird invert while menu open */

.menu{
  position:fixed;
  inset:0;
  z-index:9999;
  display:block;
  opacity:0;
  pointer-events:none;

  /* menu theme */
  --m-bg: #070503;
  --m-ink: rgba(251,240,218,.96);
  --m-ink2: rgba(251,240,218,.70);
  --m-hair: rgba(251,240,218,.14);
  --m-hair2: rgba(251,240,218,.08);
}

.menu[hidden]{ display:none !important; } /* keep your global rule */
.menu.is-open{
  opacity:1;
  pointer-events:auto;
}

.menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(7,5,3,.68);
  opacity:0;
  will-change: opacity;
}

/* Saisei-like “frame” (injected by JS, but styled here) */
.menu-strokes{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.menu-stroke{
  position:absolute;
  background: rgba(251,240,218,.22);
  opacity:.95;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform, opacity;
}
.menu-stroke[data-stroke="top"]{
  left: var(--pad); right: var(--pad); top: 86px; height:1px;
}
.menu-stroke[data-stroke="bot"]{
  left: var(--pad); right: var(--pad); bottom: var(--pad); height:1px;
}
.menu-stroke[data-stroke="mid"]{
  left: var(--pad); right: var(--pad); top: 50%; height:1px; opacity:.30;
}
.menu-stroke[data-stroke="v"]{
  width:1px; top: 86px; bottom: var(--pad);
  left: calc(50%); /* aligns with panel split */
  transform: scaleY(0);
  transform-origin: center top;
  opacity:.30;
}

/* Panels container */
.menu-panels{
  position:absolute;
  left: var(--pad);
  right: var(--pad);
  top: 86px;
  bottom: var(--pad);

  width: min(1120px, calc(100% - 2*var(--pad)));
  margin: 0 auto;

  display:grid;
  grid-template-columns: 1.1fr .9fr;
  border-radius: var(--r2);
  overflow:hidden;

  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(251,240,218,.14);
  box-shadow: 0 32px 120px rgba(0,0,0,.55);

  opacity:0;
  transform: translateY(18px) scale(.985);
  will-change: transform, opacity, clip-path;
}

.menu-panel{
  color: var(--m-ink);
  background:
    radial-gradient(closest-side, rgba(156,116,67,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.menu-panel-right{
  border-left: 1px solid rgba(251,240,218,.10);
  background:
    radial-gradient(closest-side, rgba(156,116,67,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
}

/* top row */
.menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(251,240,218,.10);
}
.menu-top .mono{ color: rgba(251,240,218,.62); }

.icon-btn{
  width:44px; height:44px;
  border:1px solid rgba(251,240,218,.16);
  background: rgba(255,255,255,.04);
  color: rgba(251,240,218,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }

/* Optional Vara signature host (JS injects a div.menu-vara under menu-top) */
.menu-vara{
  position:relative;
  height: 76px;
  margin-top: 10px;
  opacity: 0;
}
.menu-vara svg{
  width: min(520px, 92%);
  height:auto;
  overflow: visible;
  filter: drop-shadow(0 6px 26px rgba(0,0,0,.55));
}

/* Links */
.menu-links{
  display:grid;
  gap: 12px;
  padding-top: 18px;
  counter-reset: m;
}

.menu-link{
  display:flex;
  align-items:baseline;
  gap: 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.3vw, 60px);
  line-height: 1.02;
  color: var(--m-ink);
  text-decoration: none;
  position:relative;
  width: fit-content;
}

.menu-link::before{
  counter-increment: m;
  content: "(" counter(m) ")";
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing:.12em;
  opacity:.70;
  transform: translateY(-10px);
}

.menu-link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-8px;
  height:1px;
  background: rgba(251,240,218,.22);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .45s var(--ease2), background .45s var(--ease2);
}
.menu-link:hover::after{ transform: scaleX(1); background: rgba(251,240,218,.42); }

/* SplitType chars (animated by GSAP) */
.menu-link .ml-char{
  display:inline-block;
  will-change: transform, opacity;
}

/* bottom */
.menu-bottom{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(251,240,218,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color: rgba(251,240,218,.62);
}

/* right meta */
.menu-meta{ display:grid; gap: 14px; }
.meta-block{ padding: 10px 0; border-bottom: 1px dashed rgba(251,240,218,.14); }
.meta-lines{ display:grid; gap: 6px; padding-top: 8px; color: var(--m-ink2); }
.meta-lines a{ color: var(--m-ink2); }
.meta-lines a:hover{ text-decoration: underline; text-underline-offset: 4px; }

.credits-btn{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(251,240,218,.18);
  background: rgba(255,255,255,.04);
  color: rgba(251,240,218,.86);
  cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.credits-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }

/* Mobile */
@media (max-width: 980px){
  .menu-panels{ grid-template-columns: 1fr; }
  .menu-panel-right{ border-left:0; border-top: 1px solid rgba(251,240,218,.10); }
  .menu-stroke[data-stroke="v"]{ display:none; }
  .menu-stroke[data-stroke="mid"]{ display:none; }
}

/* ===== HERO PEN/VARA STAGE (CLIPPED CENTER ZONE) ===== */
#heroMain{
  position: relative;
  isolation: isolate;
}

/* bg layers must never block clicks */
#heroMain .hero-bg,
#heroMain .hero-overlay,
#heroMain .hero-topline{
  pointer-events: none !important;
}

/* the only place where “scribbles + vara” can render */
.hero-penstage{
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(1320px, 94vw);
  height: min(560px, 56vh);
  z-index: 35;
  overflow: hidden;           /* IMPORTANT: clip the drawing */
  pointer-events: none;       /* never blocks dot */
  border-radius: 0 !important;
}

.hero-penlayer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0 !important;
}

.hero-penlayer svg{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0 !important;
}

/* scribble SVG */
.hero-scribble{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-scribble path{
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ===== HERO DOT: always visible + on top (IVORY, NO RADIUS) ===== */
.hero-dot{
  display: inline-block;
  width: .72em;
  height: .72em;
  vertical-align: baseline;
  margin: 0 .06em;
  padding: 0;
  background: #f2ead9;        /* ivory */
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 0 !important;
  cursor: pointer;

  /* dot moves ONLY via CSS vars */
  transform: translate(var(--dot-dx, 0px), var(--dot-dy, 0px));
  transition: transform 520ms cubic-bezier(.2,.9,.2,1);
  position: relative;
  z-index: 99999 !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Make letter spans animatable without changing your hero-word CSS */
.hero-ch{
  display: inline-block;
  will-change: transform, opacity;
}

/* ===== VIEWS inside the penstage ===== */
.hero-view{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}
.hero-view.is-open{
  opacity: 1;
  transform: translateY(0);
}

/* Center text (Vara draws here) */
.hero-view-center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: min(820px, 78%);
}

/* Center button inside stage */
.hero-view-cta{
  position: absolute;
  left: 50%;
  top: 63%;
  transform: translateX(-50%);
}

/* Bottom-right label inside stage */
.hero-view-br{
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242,234,217,.72);
}

/* Center CTA styling (NO radius) */
.hero-view-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 0 !important;
  border: 1px solid rgba(242,234,217,.38);
  background: rgba(0,0,0,.28);
  color: rgba(242,234,217,.92);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .06em;
}

/* Keep your existing booking button above */
#heroBook{ position: relative; z-index: 60; border-radius: 0 !important; }
/* =========================================================
   HERO WORD — SIZE DOWN (UI + DOT ONLY)
   Put this AFTER all hero CSS
   ========================================================= */

/* quick tuning knobs */
#heroMain{
  --hero-ui-font: 13px;       /* base text */
  --hero-ui-title: 18px;      /* titles inside the new panels */
  --hero-ui-small: 11.5px;    /* labels */
  --hero-ui-pad: 12px;        /* panel padding */
  --hero-ui-gap: 10px;

  --hero-dot-size: 14px;      /* DOT size (fixed px so it never becomes huge) */
  --hero-dot-border: rgba(247,240,230,.55);
  --hero-dot-fill: rgba(247,240,230,.92); /* ivory */
}

/* mobile */
@media (max-width: 700px){
  #heroMain{
    --hero-ui-font: 12.5px;
    --hero-ui-title: 16px;
    --hero-ui-small: 11px;
    --hero-ui-pad: 10px;
    --hero-dot-size: 12px;
  }
}

/* ---------- DOT: fixed size, sharp corners, always on top ---------- */
.hero-dot{
  width: var(--hero-dot-size) !important;
  height: var(--hero-dot-size) !important;
  min-width: var(--hero-dot-size) !important;
  min-height: var(--hero-dot-size) !important;

  border-radius: 0 !important;                /* no radius */
  background: var(--hero-dot-fill) !important;/* ivory */
  border: 1px solid var(--hero-dot-border) !important;

  box-shadow: 0 10px 24px rgba(0,0,0,.38);
  z-index: 999999 !important;
  pointer-events: auto !important;

  /* important: dot must NOT inherit huge font sizing */
  font-size: 0 !important;
  line-height: 0 !important;

  /* keep your movement variables, but never scale from font size */
  transform: translate(var(--dot-dx, 0px), var(--dot-dy, 0px)) scale(var(--dot-s, 1)) !important;
}

/* anything decorative must never block the dot */
.hero-lines,
.hero-lines * ,
.hero-net,
.hero-net * ,
.hero-ink,
.hero-ink *{
  pointer-events: none !important;
}

/* ---------- NEW CONTENT: force normal typography (prevents DR.ADAMS giant serif inheritance) ---------- */
/* these are the “new” UI blocks you added earlier (company/contact panels etc.) */
.hero-pop,
.hero-pop *{
  font-family: inherit;
  letter-spacing: 0 !important;
  text-transform: none;
}

/* base font reset so the new content doesn’t inherit the hero word’s huge font size */
.hero-pop{
  font-size: var(--hero-ui-font) !important;
  line-height: 1.55 !important;
  padding: var(--hero-ui-pad) !important;

  /* keep geometry as-is, only reduce overall footprint */
  width: min(360px, calc(100vw - 44px)) !important;

  border-radius: 0 !important; /* no radius */
}

/* headings/labels */
.hero-pop-title{
  font-size: var(--hero-ui-small) !important;
  margin-bottom: 8px !important;
}
.hero-pop-body{
  font-size: var(--hero-ui-font) !important;
}
.hero-pop-row{
  font-size: var(--hero-ui-font) !important;
  padding: 7px 9px !important;
  border-radius: 0 !important;
}
.hero-pop-field{
  font-size: var(--hero-ui-small) !important;
}
.hero-pop-field input,
.hero-pop-field textarea{
  font-size: var(--hero-ui-font) !important;
  padding: 9px 10px !important;
  border-radius: 0 !important;
}

/* buttons inside the new panels (NOT your main hero buttons) */
.hero-pop-btn{
  height: 34px !important;
  font-size: var(--hero-ui-small) !important;
  border-radius: 0 !important; /* no radius */
}

/* ---------- Layering: ensure panels never sit above the dot ---------- */
.hero-pop{
  z-index: 9999 !important;   /* below dot (999999) */
}
/* ===== HERO WORD CLIP FIX (minimal) ===== */
/* 1) allow the word to overflow without being cut */
#heroMain,
#heroMain .hero-word,
#heroMain #heroWord,
#heroMain .hero-word-slices,
#heroMain #heroWordBase{
  overflow: visible !important;
}

/* 2) ensure the hero itself has enough vertical room for the big serif word */
#heroMain{
  min-height: 100vh;              /* if it was smaller */
  padding-bottom: 10vh;           /* extra breathing room at bottom */
}

/* 3) prevent accidental clipping by overlays or wrappers */
#heroMain .hero-bg,
#heroMain .hero-overlay{
  overflow: visible !important;
}

/* 4) if any wrapper has fixed height, force it to auto */
#heroMain .hero-word{
  height: auto !important;
}

/* 5) optional: if you have a top fixed header line pushing things, nudge word up slightly */
@media (min-width: 900px){
  #heroMain #heroWord{
    transform: translateY(-2vh);  /* tiny lift, no scale */
  }
}
/* TEMP debug: remove clipping from any ancestor wrapper */
.hero-main, .hero-wrap, .hero-shell, .container, .page, main, body{
  overflow-x: hidden;            /* keep horizontal safe */
}
.hero-main, .hero-wrap, .hero-shell{
  overflow: visible !important;  /* vertical must be visible for the giant word */
}
/* =========================================================
   HERO CENTER BLOCK (NEW)
   - sits in the empty center space
   - does NOT move your hero word or dot
========================================================= */

#heroMain { position: relative; }

/* SVG stroke layer across the hero */
.hero-center-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index: 55;                 /* below dot, above bg */
  pointer-events:none;
  opacity: 1;
}

.hero-center{
  position:absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(820px, 62vw);
  min-height: 280px;
  padding: 22px 22px 18px;

  z-index: 50;
  pointer-events:none;
  opacity: 0;

  border: 1px solid rgba(246,233,210,.18);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);

  /* Saisei vibe: subtle internal grid */
  background-image:
    linear-gradient(to right, rgba(246,233,210,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(246,233,210,.06) 1px, transparent 1px);
  background-size: 180px 180px;
}

.hero-center.is-open{
  pointer-events:auto;
  opacity: 1;
}

/* Frame lines */
.hc-frame{ position:absolute; inset:0; pointer-events:none; }
.hc-line{
  position:absolute;
  background: rgba(246,233,210,.24);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .95;
}
.hc-line-top{ left: 14px; right: 14px; top: 14px; height:1px; }
.hc-line-bot{ left: 14px; right: 14px; bottom: 14px; height:1px; }
.hc-line-v{
  top: 14px; bottom: 14px; left: 50%;
  width: 1px;
  transform: scaleY(0);
  transform-origin: center top;
  opacity: .22;
}

/* Close */
.hc-close{
  position:absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(246,233,210,.22);
  background: rgba(0,0,0,.20);
  color: rgba(246,233,210,.92);
  cursor: pointer;
  z-index: 2;
}

/* Views */
.hc-view{
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.hc-view.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Vara mounts */
.hc-vara{
  height: 84px;
  margin-bottom: 10px;
  opacity: 0;
}
.hc-vara svg{
  width: min(560px, 92%);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
}

/* Body */
.hc-body{ color: rgba(246,233,210,.90); }
.hc-grid{ display:grid; gap: 10px; margin-top: 4px; }
.hc-row{
  display:flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(246,233,210,.14);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.hc-row span{
  color: rgba(246,233,210,.66);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hc-row strong{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.hc-note{
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(246,233,210,.72);
}

/* Contact form */
.hc-form{ display:grid; gap: 10px; }
.hc-field{ display:grid; gap: 6px; }
.hc-field span{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246,233,210,.66);
}
.hc-field input, .hc-field textarea{
  border: 1px solid rgba(246,233,210,.16);
  background: rgba(0,0,0,.18);
  color: rgba(246,233,210,.92);
  padding: 10px 12px;
  outline: none;
}
.hc-actions{ display:flex; gap: 10px; margin-top: 6px; }
.hc-btn{
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(246,233,210,.22);
  background: rgba(246,233,210,.90);
  color: rgba(0,0,0,.82);
  cursor: pointer;
}
.hc-btn--ghost{
  background: rgba(0,0,0,.18);
  color: rgba(246,233,210,.90);
}

/* Mobile */
@media (max-width: 900px){
  .hero-center{
    width: min(560px, calc(100vw - 24px));
    top: 56%;
    padding: 18px 16px 14px;
  }
  .hc-line-v{ display:none; }
}
/* Make sure hero layers don’t block clicks */
#heroMain{ position:relative; isolation:isolate; }
#heroMain .hero-bg,
#heroMain .hero-overlay,
#heroMain .hero-topline{ pointer-events:none !important; }

/* ===== Center “sub stuff” stage (empty center space) ===== */
.hero-substage{
  position:absolute;
  left:50%;
  top:48%;                      /* center space */
  transform:translate(-50%, -50%);
  width:min(980px, 78vw);
  height:min(520px, 52vh);
  z-index:40;
  overflow:hidden;              /* clip ONLY inside this stage */
  pointer-events:none;          /* never blocks dot */
  opacity:0;
}

.hero-substage-inner{ position:absolute; inset:0; }

/* Scribble */
.hero-scribble{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.hero-scribble path{
  fill:none;
  stroke:rgba(242,234,217,.85);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
  stroke-linejoin:miter;
  opacity:0.92;
}

/* Views inside stage */
.hero-subview{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 240ms ease, transform 320ms cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
}
.hero-subview.is-open{
  opacity:1;
  transform:translateY(0);
}

.hero-subview-center{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%, -50%);
  width:min(700px, 72%);
}

/* Center CTA (clickable) */
.hero-subview-cta{
  position:absolute;
  left:50%;
  top:62%;
  transform:translateX(-50%);
  pointer-events:auto;          /* allow clicking button */
}
.hero-subview-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border:1px solid rgba(242,234,217,.38);
  background:rgba(0,0,0,.25);
  color:rgba(242,234,217,.92);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
  border-radius:0;              /* no radius */
}

/* Bottom-right label */
.hero-subview-br{
  position:absolute;
  right:16px;
  bottom:12px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(242,234,217,.70);
}

/* ===== Dot overlay (always accessible, never disappears) ===== */
.hero-dot-overlay{
  position:absolute;            /* JS positions it on the "." */
  left:0; top:0;
  width:14px;
  height:14px;
  transform:translate(-9999px, -9999px); /* until JS places it */
  background:#f2ead9;
  border:1px solid rgba(0,0,0,.25);
  border-radius:0;              /* no radius */
  z-index:999999;               /* above everything */
  cursor:pointer;
  padding:0;
  pointer-events:auto;
  opacity:1 !important;
  visibility:visible !important;

  /* movement only by CSS vars */
  --dot-dx: 0px;
  --dot-dy: 0px;
  translate: var(--dot-dx) var(--dot-dy);
  transition: translate 520ms cubic-bezier(.2,.9,.2,1);
}

/* ===== Word FX overlay (thin horizontal lines over word only) ===== */
.hero-wordfx{
  position:absolute;            /* JS sizes/places it to match the word rect */
  left:0; top:0;
  width:0; height:0;
  z-index:60;                   /* above word, below dot overlay */
  pointer-events:none;
  opacity:0;

  /* classic line-mask look */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(242,234,217,.20) 0px,
      rgba(242,234,217,.20) 1px,
      rgba(0,0,0,0) 7px,
      rgba(0,0,0,0) 10px
    );
  mix-blend-mode: screen;
}
/* ===== Substage: only the center empty zone (NOT fullscreen) ===== */
#heroMain{ position: relative; isolation: isolate; }

/* Don’t let background layers block clicks */
#heroMain .hero-bg,
#heroMain .hero-overlay,
#heroMain .hero-topline{ pointer-events: none !important; }

/* Center zone that contains scribbles + Vara text (visual only) */
.hero-substage{
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);

  /* tune these two and you’re done */
  width: min(760px, 68vw);
  height: min(280px, 30vh);

  z-index: 40;
  overflow: hidden;           /* keep scribble limited to the zone */
  pointer-events: none;       /* never blocks the dot */
}

/* inner drawing surface */
.hero-subdraw{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* scribble */
.hero-scribble{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.hero-scribble path{
  fill: none;
  stroke: rgba(242,234,217,.85);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: 0;                 /* JS animates in */
}

/* sub views (info/contact) */
.hero-subview{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}
.hero-subview.is-open{
  opacity: 1;
  transform: translateY(0);
}

/* Vara mount area (kept smaller so it doesn’t clip) */
.hero-subcenter{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  width: min(520px, 78%);
  max-width: 78%;
}

/* ===== Clickable UI overlay (button + bottom-right label) ===== */
.hero-subui{
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(760px, 68vw);
  height: min(280px, 30vh);
  z-index: 80;

  pointer-events: none;       /* only button clickable */
  opacity: 0;
  transition: opacity 220ms ease;
}
.hero-subui.is-open{ opacity: 1; }

/* Center button */
.hero-subbtn{
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translateX(-50%);
  height: 42px;
  padding: 0 16px;

  border-radius: 0 !important;
  border: 1px solid rgba(242,234,217,.38);
  background: rgba(0,0,0,.28);
  color: rgba(242,234,217,.92);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .06em;

  pointer-events: auto;       /* clickable */
  z-index: 1;
}

/* Bottom-right label */
.hero-subbr{
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242,234,217,.72);
  pointer-events: none;
}

/* ===== Dot must NEVER be blocked (keep your ivory dot as-is) ===== */
.hero-dot{
  content: "-->";
  position: relative;
  z-index: 999999 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* =========================================================
   MENU — FULLSCREEN (NO CUT) + SAFE SHOW/HIDE
   Put at END of CSS to override everything above
========================================================= */

:root{
  --menu-padX: clamp(16px, 3vw, 64px);
  --menu-padY: clamp(16px, 3.2vw, 72px);
  --menu-top: max(env(safe-area-inset-top), 16px);
  --menu-bot: max(env(safe-area-inset-bottom), 16px);

  --m-bg: #070503;
  --m-ink: rgba(251,240,218,.96);
  --m-ink2: rgba(251,240,218,.72);
  --m-hair: rgba(251,240,218,.18);
  --m-hair2: rgba(251,240,218,.10);

  --m-link: clamp(34px, 5.2vw, 86px); /* BIG but responsive */
  --m-kicker: clamp(12px, 1.15vw, 14px);
}

/* keep menu in DOM always, do NOT rely on [hidden] */
#menu.menu{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: block !important;

  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* stop “cut” on big screens */
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

#menu.menu.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.menu-open{ overflow: hidden; }

/* backdrop */
#menu .menu-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7,5,3,.72);
  opacity: 0;
}

/* strokes layer */
#menu .menu-strokes{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
#menu .menu-stroke{
  position: absolute;
  background: rgba(251,240,218,.24);
  opacity: .95;
  transform-origin: left center;
  transform: scaleX(0);
}
#menu .menu-stroke[data-stroke="top"]{
  left: var(--menu-padX); right: var(--menu-padX);
  top: calc(var(--menu-top) + 64px);
  height: 1px;
}
#menu .menu-stroke[data-stroke="bot"]{
  left: var(--menu-padX); right: var(--menu-padX);
  bottom: calc(var(--menu-bot) + 14px);
  height: 1px;
}
#menu .menu-stroke[data-stroke="mid"]{
  left: var(--menu-padX); right: var(--menu-padX);
  top: 50%;
  height: 1px;
  opacity: .28;
  background: rgba(251,240,218,.10);
}
#menu .menu-stroke[data-stroke="v"]{
  top: calc(var(--menu-top) + 64px);
  bottom: calc(var(--menu-bot) + 14px);
  left: 50%;
  width: 1px;
  height: auto;
  transform: scaleY(0);
  transform-origin: center top;
  opacity: .22;
  background: rgba(251,240,218,.10);
}

/* FULLSCREEN panels (no centered width) */
#menu .menu-panels{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;

  display: grid;
  grid-template-columns: 1.05fr .95fr;

  padding:
    calc(var(--menu-top) + 72px)
    var(--menu-padX)
    calc(var(--menu-bot) + 22px);

  gap: clamp(18px, 3vw, 56px);

  background:
    radial-gradient(900px 520px at 20% 30%, rgba(156,116,67,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 60%, rgba(156,116,67,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));

  border-radius: 0 !important;
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}

/* panels */
#menu .menu-panel{
  color: var(--m-ink);
  padding: clamp(14px, 2.2vw, 28px);
  border: 1px solid rgba(251,240,218,.12);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(14px);
}

#menu .menu-panel-right{
  border-left: 1px solid rgba(251,240,218,.10);
}

/* link typography */
#menu .menu-links{ display: grid; gap: 12px; padding-top: 18px; }
#menu .menu-link{
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--m-link);
  line-height: .98;
  color: var(--m-ink);
  text-decoration: none;
  width: fit-content;
  position: relative;
}
#menu .menu-link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:1px;
  background: rgba(251,240,218,.22);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
#menu .menu-link:hover::after{ transform: scaleX(1); }

/* per-char spans */
#menu .ml-char{
  display:inline-block;
  will-change: transform, opacity;
}

/* mobile: stack panels */
@media (max-width: 980px){
  #menu .menu-panels{
    grid-template-columns: 1fr;
    padding:
      calc(var(--menu-top) + 62px)
      var(--menu-padX)
      calc(var(--menu-bot) + 18px);
  }
  #menu .menu-stroke[data-stroke="v"],
  #menu .menu-stroke[data-stroke="mid"]{ display: none; }
  :root{ --m-link: clamp(32px, 9.2vw, 56px); }
}
/* =========================================================
   MENU V4 — FULLSCREEN + NEVER CUT + IGNORE [hidden]
   Put at the VERY END of styles.css
========================================================= */

/* IMPORTANT: your global [hidden]{display:none!important;} breaks menu.
   Override ONLY for #menu. */
#menu[hidden]{
  display:block !important;
}

/* fullscreen container */
#menu.menu{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;   /* best for mobile address-bar */
  height: 100svh !important;   /* fallback */
  z-index: 999999 !important;

  display:block !important;
  overflow:hidden !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: transparent;
}

#menu.menu.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.menu-open{ overflow:hidden; }

/* backdrop */
#menu .menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(7,5,3,.72);
  opacity:0;
}

/* panels = full screen (no centered min-width box) */
#menu .menu-panels{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;

  display:grid;
  grid-template-columns: 1.05fr .95fr;

  --menu-padX: clamp(16px, 3vw, 64px);
  --menu-top: max(env(safe-area-inset-top), 16px);
  --menu-bot: max(env(safe-area-inset-bottom), 16px);

  padding:
    calc(var(--menu-top) + 72px)
    var(--menu-padX)
    calc(var(--menu-bot) + 22px);

  gap: clamp(18px, 3vw, 56px);

  border-radius: 0 !important;

  background:
    radial-gradient(900px 520px at 20% 30%, rgba(156,116,67,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 60%, rgba(156,116,67,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));

  opacity:0;
  transform: translateY(18px);
  will-change: transform, opacity;
}

/* panel look */
#menu .menu-panel{
  color: rgba(251,240,218,.96);
  padding: clamp(14px, 2.2vw, 28px);
  border: 1px solid rgba(251,240,218,.12);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(14px);
}
#menu .menu-panel-right{
  border-left: 1px solid rgba(251,240,218,.10);
}

/* keep your big link style */
#menu .menu-link{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 86px);
  line-height: .98;
  color: rgba(251,240,218,.96);
  text-decoration:none;
  width: fit-content;
  position: relative;
}
#menu .menu-link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:1px;
  background: rgba(251,240,218,.22);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
#menu .menu-link:hover::after{ transform: scaleX(1); }

/* mobile stack */
@media (max-width: 980px){
  #menu .menu-panels{ grid-template-columns: 1fr; }
  #menu .menu-panel-right{ border-left:0; border-top: 1px solid rgba(251,240,218,.10); }
}
/* =========================================================
   MENU FINAL OVERRIDE (FULLSCREEN + IGNORE [hidden])
   Put as LAST lines in styles.css
========================================================= */

/* your global [hidden]{display:none!important} is killing menu
   -> neutralize it only for #menu */
#menu[hidden]{ display:block !important; }

/* menu base */
#menu.menu{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;  /* mobile-safe */
  height:100svh !important;
  z-index:999999 !important;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* open state */
#menu.menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.menu-open{ overflow:hidden; }

/* backdrop */
#menu .menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(7,5,3,.72);
  opacity:0;
}

/* PANELS = FULLSCREEN (NO CUT) */
#menu .menu-panels{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;

  display:grid;
  grid-template-columns: 1.05fr .95fr;

  padding:
    calc(max(env(safe-area-inset-top), 16px) + 72px)
    clamp(16px, 3vw, 64px)
    calc(max(env(safe-area-inset-bottom), 16px) + 22px);

  gap: clamp(18px, 3vw, 56px);

  border-radius:0 !important;
  opacity:0;
  transform: translateY(18px);
}

/* panels */
#menu .menu-panel{
  border: 1px solid rgba(251,240,218,.12);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(14px);
  padding: clamp(14px, 2.2vw, 28px);
}

@media (max-width: 980px){
  #menu .menu-panels{ grid-template-columns: 1fr; }
}
/* ===== PRESS MENTIONS (Bekannt aus) ===== */
.press-mentions{
  --ivory:#fbf0da;
  --walnut:#2a1a10;
  --walnut-70: rgba(42,26,16,.70);
  --line: rgba(42,26,16,.22);
  --line-strong: rgba(42,26,16,.42);

  background: var(--ivory);
  color: var(--walnut);
  padding: clamp(48px, 7vw, 96px) 0;
}

.press-wrap{
  width: min(1120px, calc(100% - 2*clamp(16px, 2.2vw, 28px)));
  margin: 0 auto;
}

.press-h2{
  margin: 0 0 10px;
  text-align: center;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: clamp(26px, 4vw, 48px);
  color: var(--walnut);
}

/* Vara container (drawn title sits on top of the H2 visually) */
.press-vara{
  height: clamp(70px, 10vw, 110px);
  display: grid;
  place-items: center;
  margin-top: -8px;
}
.press-vara svg{
  width: min(560px, 92%);
  height: auto;
}

/* Board */
.press-board{
  position: relative;
  margin: clamp(22px, 3.2vw, 34px) auto 0;
  border: 1px solid var(--line-strong);
  background: rgba(42,26,16,.92); /* walnut slab so white logos show */
  padding: clamp(18px, 2.5vw, 26px);
  overflow: hidden; /* clip the animations */
  border-radius: 0 !important;
}

/* Frame lines (draw-in) */
.press-frame{
  position:absolute;
  background: rgba(251,240,218,.42);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .95;
  pointer-events: none;
}
.press-frame--top{ left: 18px; right: 18px; top: 18px; height:1px; }
.press-frame--bottom{ left: 18px; right: 18px; bottom: 18px; height:1px; }
.press-frame--left{
  left: 18px; top: 18px; bottom: 18px; width:1px;
  transform: scaleY(0); transform-origin: center top;
}
.press-frame--right{
  right: 18px; top: 18px; bottom: 18px; width:1px;
  transform: scaleY(0); transform-origin: center top;
}

/* Scanlines */
.press-scan{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(251,240,218,.08) 0px,
      rgba(251,240,218,.08) 1px,
      rgba(0,0,0,0) 8px,
      rgba(0,0,0,0) 12px
    );
  opacity: .55;
  pointer-events: none;
}

/* Horizontal “shine” that moves side-to-side */
.press-shine{
  position:absolute;
  top:0; bottom:0;
  width: 36%;
  left: -40%;
  background: linear-gradient(90deg,
    rgba(0,0,0,0),
    rgba(251,240,218,.10),
    rgba(0,0,0,0)
  );
  pointer-events:none;
  opacity: 0;
}

/* Grid */
.press-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
  align-items:center;
}

/* Logo blocks (no radius, no cards) */
.press-logo{
  margin:0;
  display:grid;
  place-items:center;
  min-height: clamp(56px, 8vw, 92px);
  overflow: hidden;
  border: 1px solid rgba(251,240,218,.10);
  border-radius: 0 !important;
  background: rgba(0,0,0,.12);
}

/* The image itself */
.press-logo img{
  max-width: 90%;
  max-height: 62px;
  width: auto;
  height: auto;
  display:block;

  /* initial hidden state; JS will animate */
  opacity: 0;
  transform: translateX(0);
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.28));
}

/* Responsive */
@media (max-width: 920px){
  .press-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .press-logo img{ max-height: 58px; }
}
/* ===== ZAHLEN SECTION ===== */
.zahlen{
  --ivory:#fbf0da;
  --walnut:#2a1a10;
  --walnut-75: rgba(42,26,16,.75);
  --line: rgba(42,26,16,.22);
  --line2: rgba(42,26,16,.12);

  background: var(--ivory);
  color: var(--walnut);
  padding: clamp(54px, 7vw, 92px) 0;
}

.zahlen-wrap{
  width: min(1120px, calc(100% - 2*clamp(16px, 2.2vw, 28px)));
  margin: 0 auto;
}

.zahlen-head{
  position: relative;
  display: grid;
  gap: 14px;
  margin-bottom: clamp(18px, 2.8vw, 28px);
}

.zahlen-title{
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(22px, 3.2vw, 42px);
  color: var(--walnut);
  max-width: 26ch;
}

/* lines only, no rounded */
.zahlen-lines{
  position: relative;
  height: 14px;
}
.zahlen-lines .zl{
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .95;
}
.zahlen-lines .zl-1{ top: 2px; }
.zahlen-lines .zl-2{ bottom: 2px; opacity: .65; }

/* grid */
.zahlen-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2vw, 18px);
}

/* cards are “line boxes”, no radius */
.zcard{
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--ivory) 90%, white);
  padding: clamp(16px, 2.2vw, 22px);
  min-height: 140px;
  display: grid;
  align-content: start;
  gap: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
}

/* corner micro-lines (classic technical vibe) */
.zcard::before,
.zcard::after{
  content:"";
  position:absolute;
  height: 1px;
  background: var(--line2);
  left: 14px;
  right: 14px;
}
.zcard::before{ top: 14px; transform: scaleX(0); transform-origin:left; }
.zcard::after{ bottom: 14px; transform: scaleX(0); transform-origin:left; }

/* number */
.znum{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  font-family: "Fraunces", serif;
  color: var(--walnut);
}

.zplus{
  font-size: clamp(18px, 2.2vw, 26px);
  opacity: .85;
}

.zvalue{
  font-size: clamp(34px, 4.8vw, 64px);
  letter-spacing: -0.02em;
}

/* label */
.zlabel{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--walnut-75);
  max-width: 26ch;
}

/* reveal */
.zahlen.is-inview .zahlen-lines .zl{ transform: scaleX(1); transition: transform .75s cubic-bezier(.2,.9,.2,1); }
.zahlen.is-inview .zcard::before,
.zahlen.is-inview .zcard::after{ transform: scaleX(1); transition: transform .75s cubic-bezier(.2,.9,.2,1) .05s; }

.zcard{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.9,.2,1);
}
.zahlen.is-inview .zcard{
  opacity: 1;
  transform: translateY(0);
}

/* stagger via CSS var set by JS */
.zcard{ transition-delay: var(--d, 0ms); }

/* responsive */
@media (max-width: 980px){
  .zahlen-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zlabel{ max-width: 40ch; }
}
@media (max-width: 560px){
  .zahlen-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   PRESS MENTIONS — Walnut + Ivory (2 colors only)
   - All text: ivory
   - Lines: light ivory
   - Backgrounds: walnut
========================================================= */

/* =========================================================
   FOOTER — 100vh Saisei-like layout (Walnut bg / Ivory text)
   Targets the HTML I gave you:
   <footer class="site-footer"> ... <div class="footer-wrap"> ...
========================================================= */

:root{
  --ivory: rgba(246,233,210,.96);
  --ivory-80: rgba(246,233,210,.80);
  --ivory-65: rgba(246,233,210,.65);
  --ivory-35: rgba(246,233,210,.35);
  --ivory-18: rgba(246,233,210,.18);
  --ivory-10: rgba(246,233,210,.10);

  --walnut: #24160f;
  --walnut2:#140b06;

  --pad: clamp(18px, 2.6vw, 42px);
  --pad2: clamp(14px, 1.8vw, 28px);

  --serif: "Fraunces", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Root full-height stage ===== */
.site-footer{
  position: relative;
  height: 100vh;                 /* key */
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;

  background: radial-gradient(1200px 800px at 50% 40%, #2a1a12, var(--walnut2) 70%);
  color: var(--ivory);

  padding: 0;                    /* we control padding via inner wrap */
}

/* WebGL fills entire footer */
.site-footer .footer-webgl{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}

/* Scan + vignette overlays */
.site-footer .footer-scan{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(246,233,210,.08) 0px,
      rgba(246,233,210,.08) 1px,
      rgba(0,0,0,0) 9px,
      rgba(0,0,0,0) 13px
    );
  mix-blend-mode: screen;
}
.site-footer .footer-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(980px 620px at 50% 38%, rgba(0,0,0,0), rgba(0,0,0,.70));
  opacity: .92;
}

/* Frame lines (kept minimal, Saisei-like) */
.site-footer .footer-frame{
  position:absolute;
  z-index:2;
  pointer-events:none;
  background: rgba(246,233,210,.24);
  opacity:.95;
  will-change: transform;
}
.site-footer .footer-frame--top,
.site-footer .footer-frame--bottom{
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  transform: scaleX(1);          /* you animate in JS; keep 1 for static preview */
  transform-origin: left center;
}
.site-footer .footer-frame--top{ top: var(--pad); }
.site-footer .footer-frame--bottom{ bottom: var(--pad); }

.site-footer .footer-frame--left,
.site-footer .footer-frame--right{
  top: var(--pad);
  bottom: var(--pad);
  width: 1px;
  transform: scaleY(1);
  transform-origin: center top;
}
.site-footer .footer-frame--left{ left: var(--pad); }
.site-footer .footer-frame--right{ right: var(--pad); }

/* ===== Big “DRADAMS” watermark (Saisei-like) =====
   - No HTML change needed (uses ::before)
*/
.site-footer::before{
  content:"DRADAMS";
  position:absolute;
  z-index:2;
  pointer-events:none;

  left: 52%;
  top: 46%;
  transform: translate(-50%, -50%);

  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: .85;

  font-size: clamp(84px, 18vw, 340px);
  color: rgba(246,233,210,.11);

  filter: blur(.15px);
  mix-blend-mode: screen;
  white-space: nowrap;
}

/* Optional: faint “ink” glow behind watermark */
.site-footer::after{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(700px 420px at 62% 46%, rgba(246,233,210,.08), rgba(0,0,0,0) 62%);
  opacity:.65;
}

/* ===== Inner layout: Saisei distribution ===== */
.site-footer .footer-wrap{
  position: relative;
  z-index:3;

  height: 100%;
  width: min(1400px, calc(100% - 2*var(--pad)));
  margin: 0 auto;

  padding: var(--pad);
  display: grid;
  grid-template-rows: 1fr auto; /* main + bottom line */
  gap: var(--pad2);
}

/* Top zone: left nav + center info + right info */
.site-footer .footer-top{
  display:grid;
  height: 100%;
  align-items: end; /* content sits lower like Saisei */
  gap: clamp(14px, 2vw, 26px);

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "nav center office";
}

/* Map your blocks into these areas */
.site-footer .footer-brand{ grid-area: center; align-self: end; }
.site-footer .footer-cols{  grid-area: nav; align-self: start; }
.site-footer .footer-brand,
.site-footer .footer-cols{
  min-width: 0;
}

/* Left “index nav” look */
.site-footer .footer-cols{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding-top: clamp(10px, 2vh, 22px);
}

/* Make columns behave like a single vertical list (Saisei style) */
.site-footer .footer-col{
  display:grid;
  gap: 8px;
}
.site-footer .footer-col-title{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ivory-35);
  margin-bottom: 6px;
}
.site-footer .footer-col a{
  font-family: var(--serif);
  font-size: clamp(20px, 1.35vw, 28px); /* big menu links */
  letter-spacing: .01em;
  color: var(--ivory);
  text-decoration:none;
  padding: 2px 0;

  border-bottom: 1px solid rgba(246,233,210,.10);
  width: fit-content;
}
.site-footer .footer-col a:hover{
  border-bottom-color: rgba(246,233,210,.35);
}

/* Center brand: keep it subtle; Vara sits here */
.site-footer .footer-brand-fallback{
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-65);
  margin: 0 0 10px;
}

/* Vara mount (writing) */
.site-footer .footer-vara{
  height: clamp(64px, 10vh, 92px);
  margin: 0 0 10px;
  opacity: 1; /* JS will animate; keep visible for layout */
}
.site-footer .footer-vara svg{
  width: min(520px, 100%);
  height:auto;
  overflow: visible;
  filter: drop-shadow(0 18px 54px rgba(0,0,0,.55));
}

/* Tagline + meta (small, Saisei-like) */
.site-footer .footer-tagline{
  margin: 0 0 14px;
  max-width: 46ch;
  line-height: 1.65;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ivory-65);
}

.site-footer .footer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ivory-65);
}
.site-footer .footer-meta a{
  color: var(--ivory);
  text-decoration:none;
  border-bottom: 1px solid rgba(246,233,210,.18);
  padding-bottom: 2px;
}
.site-footer .footer-meta a:hover{ border-bottom-color: rgba(246,233,210,.45); }
.site-footer .footer-dot{
  width: 6px; height: 6px;
  background: rgba(246,233,210,.55);
  display:inline-block;
}

/* Right “office block” area:
   - we reuse your .footer-cols structure by styling the last col if you keep it
   - if you kept 3 cols, you can move office into the 3rd col via HTML,
     but CSS also supports an optional element .footer-office (if you add it)
*/
.site-footer .footer-office{
  grid-area: office;
  justify-self: end;
  align-self: end;
  text-align: left;
  max-width: 34ch;
}
.site-footer .footer-office .k{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ivory-35);
  margin-bottom: 8px;
}
.site-footer .footer-office .v{
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ivory-65);
}

/* Divider line in middle should be subtle and low */
.site-footer .footer-divider{
  display:none; /* Saisei footer usually uses bottom bar only */
}

/* Bottom bar (full width within wrap) */
.site-footer .footer-bottom{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 10px;

  padding-top: 14px;
  border-top: 1px solid rgba(246,233,210,.16);
}

/* Left: copyright */
.site-footer .footer-copy{
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ivory-65);
}

/* Center: terms link look */
.site-footer .footer-bottom .footer-terms{
  justify-self:center;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ivory-65);
  text-decoration:none;
  border-bottom: 1px solid rgba(246,233,210,.10);
  padding-bottom: 2px;
}
.site-footer .footer-bottom .footer-terms:hover{
  border-bottom-color: rgba(246,233,210,.35);
}

/* Right: CTA aligned right, thin Saisei style */
.site-footer .footer-cta{
  justify-self:end;
  height: 42px;
  padding: 0 16px;

  border-radius: 0;
  border: 1px solid rgba(246,233,210,.22);
  background: rgba(0,0,0,.20);
  color: var(--ivory);
  text-decoration:none;

  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;

  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.site-footer .footer-cta:hover{
  border-color: rgba(246,233,210,.40);
  background: rgba(0,0,0,.28);
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .site-footer::before{
    left: 50%;
    top: 48%;
    font-size: clamp(84px, 20vw, 240px);
  }

  .site-footer .footer-top{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nav nav"
      "center office";
    align-items: start;
  }

  .site-footer .footer-cols{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px 26px;
    padding-top: 0;
    align-items: center;
  }
  .site-footer .footer-col a{
    font-size: clamp(18px, 2.2vw, 24px);
  }
}

@media (max-width: 680px){
  .site-footer{
    height: auto;
    min-height: 100vh;
  }

  .site-footer::before{
    left: 50%;
    top: 30%;
    font-size: clamp(72px, 22vw, 160px);
    opacity: .9;
  }

  .site-footer .footer-wrap{
    padding: var(--pad);
    grid-template-rows: auto auto;
  }

  .site-footer .footer-top{
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "center"
      "office";
    align-items: start;
  }

  .site-footer .footer-cols{
    flex-direction: column;
    gap: 12px;
  }

  .site-footer .footer-col a{
    font-size: 22px;
  }

  .site-footer .footer-bottom{
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 10px;
  }

  .site-footer .footer-cta{
    justify-self:start;
    width: 100%;
  }
}

/* IMPORTANT:
   Sticky breaks if ANY parent of #leistungen has overflow:hidden/clip/auto.
   Keep parents overflow: visible. Do NOT wrap this section inside a container with overflow hidden.
*/

.vdiapo-root{
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  background: transparent;
}

/* JS will toggle this while section is in view */
.vdiapo-root .vdiapo-nav{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.vdiapo-root.is-inview .vdiapo-nav{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0px);
}

/* Panels flow creates scroll height naturally */
.vdiapo-panels{ position: relative; }

/* Each panel sticky 100vh, stacked */
.vdiapo-panel{
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-items: stretch;
  padding: clamp(14px, 2.2vw, 26px);
  z-index: 1;
  pointer-events: none; /* JS enables only topmost */
}

/* make sure later panels sit above earlier ones visually */
.vdiapo-panel:nth-child(1){ z-index: 1; }
.vdiapo-panel:nth-child(2){ z-index: 2; }
.vdiapo-panel:nth-child(3){ z-index: 3; }
.vdiapo-panel:nth-child(4){ z-index: 4; }
.vdiapo-panel:nth-child(5){ z-index: 5; }
.vdiapo-panel:nth-child(6){ z-index: 6; }
.vdiapo-panel:nth-child(7){ z-index: 7; }
.vdiapo-panel:nth-child(8){ z-index: 8; }

.vdiapo-shell{
  position: relative;
  border-radius: 24px;
  overflow: clip;
  border: 1px solid rgba(246,233,210,.14);
  background: rgba(0,0,0,.08);
  box-shadow: 0 30px 95px rgba(0,0,0,.55);
}

/* readability inside each panel */
.vdiapo-shell::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(1200px 850px at 58% 38%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,.38) 55%,
      rgba(0,0,0,.78) 92%);
  opacity:.92;
}

/* bottom-left corner */
.vdiapo-corner{
  position: absolute;
  left: clamp(14px, 2.6vw, 46px);
  bottom: clamp(14px, 2.6vw, 42px);
  z-index: 2;
  max-width: min(420px, 48vw);
}

.vdiapo-kicker{
  font: 700 13px/1.05 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(246,233,210,.92);
}

.vdiapo-micro{
  margin-top: 8px;
  font: 500 13px/1.35 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(246,233,210,.78);
}

/* top-right card */
.vdiapo-card{
  position: absolute;
  right: clamp(14px, 2.6vw, 52px);
  top: clamp(14px, 4.2vh, 56px);
  width: min(560px, 46vw);
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(246,233,210,.16);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  z-index: 2;
}

/* 6 segment progress bar (panel) */
.vdiapo-progress{
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  opacity: .95;
}
.vdiapo-progress .seg{
  flex: 1;
  height: 2px;
  background: rgba(246,233,210,.20);
  border-radius: 999px;
  overflow: hidden;
}
.vdiapo-progress .seg i{
  display:block;
  width:100%;
  height:100%;
  background: rgba(246,233,210,.85);
  transform: scaleX(0);
  transform-origin: 0% 50%;
}

/* Text */
.vdiapo-h2{
  margin: 2px 0 10px;
  font: 650 clamp(18px, 2.1vw, 28px)/1.15 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(246,233,210,.96);
  letter-spacing: .01em;
}
.vdiapo-p{
  margin: 0 0 12px;
  font: 420 14px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(246,233,210,.84);
}

/* CTA */
.vdiapo-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(246,233,210,.22);
  color: rgba(246,233,210,.95);
  text-decoration: none;
  background: rgba(0,0,0,.18);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.vdiapo-btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.26);
  border-color: rgba(246,233,210,.34);
}
.vdiapo-btn .u{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 1px;
  background: rgba(246,233,210,.65);
  transform: scaleX(0);
  transform-origin: 0% 50%;
}

/* Animated lines */
.vdiapo-lines{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 46px;
  opacity: 0;
  pointer-events: none;
}
.vdiapo-lines span{
  display:block;
  height: 1px;
  margin: 6px 0;
  background: linear-gradient(90deg,
    rgba(246,233,210,0),
    rgba(246,233,210,.56),
    rgba(246,233,210,0));
  background-size: 200% 100%;
  opacity: .55;
  animation: vdiapoLine 1.05s linear infinite;
}
.vdiapo-lines span:nth-child(2){ animation-delay: .08s; opacity: .48; }
.vdiapo-lines span:nth-child(3){ animation-delay: .16s; opacity: .42; }
.vdiapo-lines span:nth-child(4){ animation-delay: .24s; opacity: .36; }
.vdiapo-lines span:nth-child(5){ animation-delay: .32s; opacity: .30; }
.vdiapo-lines span:nth-child(6){ animation-delay: .40s; opacity: .26; }

@keyframes vdiapoLine{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 200% 0%; }
}

/* Reveal animation (JS sets delays via --d) */
.vdiapo-reveal{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
  transition-delay: var(--d, 0ms);
}
.vdiapo-panel.is-active .vdiapo-reveal{
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0px);
}
.vdiapo-panel.is-active .vdiapo-btn .u{
  transform: scaleX(1);
  transition: transform .65s ease;
  transition-delay: 130ms;
}
.vdiapo-panel.is-active .vdiapo-lines{
  opacity: 1;
  transition: opacity .35s ease;
  transition-delay: 180ms;
}

/* Fade-out of previous content while next rises (JS drives inline opacity/transform on .vdiapo-fade) */
.vdiapo-fade{
  will-change: opacity, transform;
}

/* NAV pinned left */
.vdiapo-nav{
  position: fixed;
  left: clamp(12px, 2.6vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: grid;
  gap: 10px;
}

.vdiapo-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border-bottom: 1px solid rgba(246,233,210,.16);
    border-top: 1px solid rgba(246,233,210,.16);
      border-left: 1px solid rgba(246,233,210,.16);
        border-right:none;

  background: rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  color: rgba(246,233,210,.92);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  opacity: .82;
  transition: opacity .18s ease, border-color .18s ease, background .18s ease;
}

.vdiapo-link:hover{ opacity: 1; border-color: rgba(246,233,210,.28); }
.vdiapo-link.is-active{
  opacity: 1;
  background: rgba(0,0,0,.34);
  border-color: rgba(246,233,210,.35);
}

.vdiapo-idx{ opacity: .80; }

/* nav progress stick (JS sets --p 0..1 on active item) */
.vdiapo-stick{
  margin-left: auto;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: rgba(246,233,210,.16);
  overflow: hidden;
}
.vdiapo-stick i{
  display:block;
  width:100%;
  height:100%;
  background: rgba(246,233,210,.75);
  transform: scaleY(var(--p, .15));
  transform-origin: 50% 100%;
}

/* Mobile */
@media (max-width: 900px){
  .vdiapo-card{
    width: calc(100% - 28px);
    left: 14px;
    right: 14px;
    top: 14px;
  }
  .vdiapo-nav{
    left: 12px;
    top: auto;
    bottom: 14px;
    transform: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    max-width: calc(100vw - 24px);
    padding-bottom: 2px;
  }
}
/* ===== VDIAPO BIGGER CARD + STRONGER EFFECTS (DROP-IN OVERRIDES) ===== */

.vdiapo-card{
  width: min(720px, 54vw);                 /* bigger */
  padding: 26px 26px 22px;                /* more breathing room */
  border-radius: 22px;
  background: rgba(0,0,0,.34);            /* stronger glass */
  border: 1px solid rgba(246,233,210,.20);
  box-shadow:
    0 34px 110px rgba(0,0,0,.62),
    0 0 0 1px rgba(246,233,210,.06) inset;
  backdrop-filter: blur(16px) saturate(1.05);
}

/* Progress thicker + more premium */
.vdiapo-progress{
  gap: 8px;
  margin-bottom: 18px;
  opacity: .98;
}
.vdiapo-progress .seg{
  height: 3px;                            /* thicker */
  background: rgba(246,233,210,.18);
}
.vdiapo-progress .seg i{
  background: linear-gradient(
    90deg,
    rgba(246,233,210,.92),
    rgba(255,255,255,.75),
    rgba(246,233,210,.92)
  );
  filter: drop-shadow(0 0 10px rgba(246,233,210,.16));
}

/* Headline bigger */
.vdiapo-h2{
  font-size: clamp(22px, 2.55vw, 36px);   /* bigger */
  line-height: 1.10;
  letter-spacing: .008em;
  margin: 4px 0 14px;
}

/* Paragraph bigger too (for panels that have it) */
.vdiapo-p{
  font-size: 16px;
  line-height: 1.70;
}

/* Button bigger + stronger hover */
.vdiapo-btn{
  padding: 14px 18px;                     /* bigger */
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  background: rgba(0,0,0,.22);
  border-color: rgba(246,233,210,.28);
  box-shadow:
    0 16px 40px rgba(0,0,0,.38),
    0 0 0 1px rgba(246,233,210,.06) inset;
  transform: translateY(0);
}

.vdiapo-btn:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.30);
  border-color: rgba(246,233,210,.46);
  box-shadow:
    0 22px 60px rgba(0,0,0,.48),
    0 0 0 1px rgba(246,233,210,.10) inset;
}

/* Underline thicker + glow */
.vdiapo-btn .u{
  height: 2px;
  bottom: 9px;
  opacity: .95;
  filter: drop-shadow(0 0 12px rgba(246,233,210,.22));
}

/* Lines: stronger + slightly taller area */
.vdiapo-lines{
  height: 58px;
  opacity: 0;
}
.vdiapo-lines span{
  height: 2px;                             /* thicker lines */
  margin: 7px 0;
  opacity: .62;
  filter: drop-shadow(0 0 10px rgba(246,233,210,.10));
  animation-duration: .95s;                /* a bit faster */
}

/* Reveal: more impact */
.vdiapo-reveal{
  transform: translateY(14px);
  filter: blur(3px);
}
.vdiapo-panel.is-active .vdiapo-reveal{
  transform: translateY(0px);
  filter: blur(0px);
}

/* Mobile adjustments */
@media (max-width: 900px){
  .vdiapo-card{
    width: calc(100% - 28px);
    padding: 22px 18px 18px;
  }
  .vdiapo-h2{
    font-size: clamp(20px, 5.3vw, 30px);
  }
  .vdiapo-btn{
    width: 100%;
    justify-content: center;
  }
}
.vdiapo-bullets{
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}
.vdiapo-bullets .it{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  color: rgba(248,244,236,.78);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
}
.vdiapo-bullets .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: 9px;
  flex: 0 0 auto;
  box-shadow: 0 0 22px rgba(210,170,120,.45);
}

/* sector tags */
.vdiapo-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 16px;
}
.vdiapo-tags span{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(248,244,236,.86);
  font-size: 14px;
}
/* ===========================
   JP-KUNDEN (IVORY + WALNUT)
   No border-radius anywhere
   Shoji / timber line language
=========================== */

.jp-kunden{
  --ivory:#fbf0da;
  --walnut:#1e1005;
  --walnut2:rgba(30,16,5,.72);
  --hair:rgba(30,16,5,.18);
  --hair2:rgba(30,16,5,.10);

  background: var(--ivory);
  color: var(--walnut);
  position: relative;
  overflow: hidden;
}

.jp-kunden *{ border-radius:0 !important; }

.jp-kunden__wrap{
  width: min(1280px, calc(100% - 2*clamp(18px, 3vw, 56px)));
  margin: 0 auto;
  padding: clamp(54px, 7vw, 96px) 0 clamp(56px, 7vw, 90px);
  position: relative;
}

/* subtle shoji grid across section */
.jp-kunden::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    repeating-linear-gradient(
      to right,
      rgba(30,16,5,.06) 0px,
      rgba(30,16,5,.06) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 180px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(30,16,5,.05) 0px,
      rgba(30,16,5,.05) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 140px
    );
}

/* timber frame lines (top/bottom) */
.jp-kunden__wrap::before,
.jp-kunden__wrap::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left;
  opacity:.9;
}
.jp-kunden__wrap::before{ top: 0; }
.jp-kunden__wrap::after{ bottom: 0; }

.jp-kunden__head{
  display:grid;
  grid-template-columns: 1.05fr .25fr 1.2fr;
  align-items:start;
  gap: clamp(18px, 3vw, 44px);
}

.jp-kunden__title{ position:relative; }

.jp-kunden__h2{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0;
}

/* Vara mount: keep it from inheriting weird stuff */
.jp-kunden__vara{
  min-height: clamp(58px, 7vw, 92px);
}
.jp-kunden__vara svg{
  width: min(520px, 100%);
  height: auto;
  overflow: visible;
}

/* Heart (line drawing) */
.jp-kunden__heart{
  width: clamp(54px, 5vw, 78px);
  height: auto;
  justify-self:center;
  margin-top: clamp(6px, 1.2vw, 14px);
  opacity: .95;
}
.jp-kunden__heart path{
  fill: none;
  stroke: var(--walnut);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  opacity: 0; /* revealed on enter */
}

/* Right paragraph */
.jp-kunden__lead{
  margin: 0;
  max-width: 70ch;
  color: var(--walnut2);
  font: 500 13px/1.7 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  transform: translateY(10px);
  opacity: 0;
}

/* grid cards (big, low, like screenshot) */
.jp-kunden__grid{
  margin-top: clamp(30px, 5vw, 64px);
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

/* cards: walnut block, ivory type, shoji lines inside */
.jp-kcard{
  position:relative;
  min-height: clamp(210px, 26vw, 340px);
  background: var(--walnut);
  border: 1px solid rgba(30,16,5,.25);
  overflow:hidden;
  transform: translateY(18px);
  opacity: 0;
}

/* inner shoji lines */
.jp-kcard__lines{
  position:absolute;
  inset:0;
  opacity:.16;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(251,240,218,.28) 0px,
      rgba(251,240,218,.28) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 26px
    ),
    repeating-linear-gradient(
      to right,
      rgba(251,240,218,.18) 0px,
      rgba(251,240,218,.18) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 140px
    );
}

/* “frame” lines that reveal */
.jp-kcard::before,
.jp-kcard::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: rgba(251,240,218,.18);
  transform: scaleX(0);
  transform-origin: left;
  opacity:.95;
}
.jp-kcard::before{ top: 18px; }
.jp-kcard::after{ bottom: 18px; }

/* left vertical rail line */
.jp-kcard .jp-kcard__label::before{
  content:"";
  position:absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(251,240,218,.18);
  transform: scaleY(0);
  transform-origin: top;
}

/* label bottom-left */
.jp-kcard__label{
  position:absolute;
  left: 24px;
  bottom: 22px;
  margin:0;
  color: rgba(251,240,218,.92);
  font: 500 clamp(16px, 2vw, 24px)/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .01em;
}

/* small stamp top-right */
.jp-kcard__stamp{
  position:absolute;
  right: 18px;
  top: 18px;
  color: rgba(251,240,218,.60);
  font: 700 11px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
}

/* ========= REVEAL STATE (JS adds .is-in) ========= */
.jp-kunden.is-in .jp-kunden__wrap::before,
.jp-kunden.is-in .jp-kunden__wrap::after{
  transform: scaleX(1);
  transition: transform 680ms cubic-bezier(.2,.9,.2,1);
}

.jp-kunden.is-in .jp-kunden__lead{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.9,.2,1);
  transition-delay: 260ms;
}

.jp-kunden.is-in .jp-kunden__heart path{
  opacity: .95;
  transition: opacity 180ms ease;
}

.jp-kunden.is-in .jp-kcard{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.9,.2,1);
}
.jp-kunden.is-in .jp-kcard:nth-child(1){ transition-delay: 220ms; }
.jp-kunden.is-in .jp-kcard:nth-child(2){ transition-delay: 320ms; }
.jp-kunden.is-in .jp-kcard:nth-child(3){ transition-delay: 420ms; }

.jp-kunden.is-in .jp-kcard::before,
.jp-kunden.is-in .jp-kcard::after{
  transform: scaleX(1);
  transition: transform 620ms cubic-bezier(.2,.9,.2,1);
  transition-delay: 420ms;
}

.jp-kunden.is-in .jp-kcard .jp-kcard__label::before{
  transform: scaleY(1);
  transition: transform 620ms cubic-bezier(.2,.9,.2,1);
  transition-delay: 520ms;
}

.jp-kunden.is-in .jp-kcard__stamp{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.9,.2,1);
  transition-delay: 560ms;
}

/* responsive */
@media (max-width: 980px){
  .jp-kunden__head{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .jp-kunden__heart{ justify-self:start; }
  .jp-kunden__grid{
    grid-template-columns: 1fr;
  }
  .jp-kcard{ min-height: 210px; }
}
/* =========================================================
   JP KUNDEN — Ivory + Walnut, no radius, Japanese grid vibe
========================================================= */
.jp-kunden{
  --ivory: #fbf0da;
  --walnut: #1e1005;
  --walnut-2: rgba(30,16,5,.72);
  --hair: rgba(30,16,5,.14);
  --hair2: rgba(30,16,5,.08);

  background: var(--ivory);
  color: var(--walnut);
  position: relative;
  overflow: hidden;
}

/* subtle full-section grid */
.jp-kunden::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right, var(--hair2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair2) 1px, transparent 1px);
  background-size: 140px 140px;
  opacity: .9;
}

.jp-kunden__wrap{
  width: min(1240px, calc(100% - 2*clamp(18px, 3vw, 56px)));
  margin: 0 auto;
  padding: clamp(56px, 7vw, 110px) 0 clamp(64px, 8vw, 120px);
  position: relative;
  z-index: 1;
}

.jp-kunden__top{
  display:grid;
  grid-template-columns: 1.2fr .25fr 1.6fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:start;
}

/* Vara title mount */
.jp-kunden__title{ position:relative; }
.jp-kunden__vara{
  min-height: 88px;
}
.jp-kunden__h2-fallback{
  margin:0;
  font-size: clamp(42px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--walnut);
}

/* hide fallback if Vara creates an svg inside mount */
.jp-kunden__vara svg + .jp-kunden__h2-fallback{ display:none; }

/* heart */
.jp-kunden__heart{
  display:flex;
  justify-content:center;
  padding-top: 10px;
}

/* lead copy */
.jp-kunden__copy{ max-width: 74ch; }
.jp-kunden__lead{
  margin: 0;
  color: var(--walnut-2);
  line-height: 1.7;
  font-size: 13.5px;
}

/* cards layout */
.jp-kunden__cards{
  margin-top: clamp(44px, 5vw, 70px);
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2vw, 26px);
}

/* =========================================================
   JP CARD BASE — dark walnut panels with animated lines
   (no border radius)
========================================================= */
.jp-kcard{
  position: relative;
  min-height: 260px;
  background: linear-gradient(180deg, #160c06, #120803);
  border: 1px solid rgba(30,16,5,.20);
  box-shadow: 0 32px 90px rgba(0,0,0,.18);
  overflow: hidden;

  /* card-specific motion vars (overridden per card) */
  --line-alpha: .22;
  --line-gap: 12px;
  --line-thick: 1px;
  --line-speed: 14s;
  --line-angle: 0deg;
  --grid-alpha: .10;

  transform: translateZ(0);
}

/* inner grid overlay (static, very subtle) */
.jp-kcard__grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 1;
  background:
    linear-gradient(to right, rgba(251,240,218,var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(251,240,218,var(--grid-alpha)) 1px, transparent 1px);
  background-size: 120px 120px;
  mix-blend-mode: screen;
}

/* animated “shoji” lines overlay */
.jp-kcard::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;

  /* angled repeating lines */
  background:
    repeating-linear-gradient(
      var(--line-angle),
      rgba(251,240,218,var(--line-alpha)) 0,
      rgba(251,240,218,var(--line-alpha)) var(--line-thick),
      rgba(0,0,0,0) var(--line-thick),
      rgba(0,0,0,0) var(--line-gap)
    );

  opacity: .95;
  transform: translateX(-12%);
  animation: jpCardLines var(--line-speed) linear infinite;
  mix-blend-mode: screen;
}

/* slow drifting for the line background */
@keyframes jpCardLines{
  0%   { background-position: 0 0; }
  100% { background-position: 0 420px; }
}

/* “SEKTOR 0X” stamp */
.jp-kcard__stamp{
  position:absolute;
  right: 16px;
  top: 12px;
  color: rgba(251,240,218,.55);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* label block */
.jp-kcard__label{
  position:absolute;
  left: 18px;
  bottom: 18px;
  color: rgba(251,240,218,.92);
}

/* left vertical line like screenshot */
.jp-kcard__label::before{
  content:"";
  position:absolute;
  left: -12px;
  bottom: 6px;
  width: 1px;
  height: 52px;
  background: rgba(251,240,218,.28);
}

/* title */
.jp-kcard__h3{
  margin:0;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.08;
  font-weight: 520;
  letter-spacing: -.01em;
}

/* structure edges (bottom + left) */
.jp-kcard__edge{
  position:absolute;
  background: rgba(251,240,218,.22);
  pointer-events:none;
  transform-origin: left center;
  transform: scaleX(0);
}
.jp-kcard__edge--l{
  left: 0;
  bottom: 0;
  top: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: center bottom;
}
.jp-kcard__edge--b{
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

/* when section reveals (your JS adds .is-in on .jp-kunden) */
.jp-kunden.is-in .jp-kcard{
  opacity: 1;
  transform: translateY(0);
  transition: transform 620ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease;
}
.jp-kunden.is-in .jp-kcard__edge--b{
  transform: scaleX(1);
  transition: transform 760ms cubic-bezier(.2,.9,.2,1);
}
.jp-kunden.is-in .jp-kcard__edge--l{
  transform: scaleY(1);
  transition: transform 760ms cubic-bezier(.2,.9,.2,1);
}

/* =========================================================
   DIFFERENT LINE PATTERNS PER CARD (SEKTOR 01/02/03)
   - unique angles, spacing, speed, alpha
========================================================= */
.jp-kcard--01{
  --line-angle: 0deg;
  --line-gap: 10px;
  --line-alpha: .18;
  --line-speed: 12s;
  --grid-alpha: .08;
}
.jp-kcard--02{
  --line-angle: 90deg;
  --line-gap: 14px;
  --line-alpha: .16;
  --line-speed: 16s;
  --grid-alpha: .10;
}
.jp-kcard--03{
  --line-angle: 22deg;
  --line-gap: 16px;
  --line-alpha: .14;
  --line-speed: 18s;
  --grid-alpha: .07;
}

/* Optional: extra “shoji” cross-lines for card 03 */
.jp-kcard--03::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      -22deg,
      rgba(251,240,218,.10) 0,
      rgba(251,240,218,.10) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 22px
    );
  animation: jpCardLines 22s linear infinite;
  mix-blend-mode: screen;
  opacity: .9;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .jp-kunden__top{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .jp-kunden__heart{
    justify-content:flex-start;
    padding-top: 0;
  }
  .jp-kunden__cards{
    grid-template-columns: 1fr;
  }
  .jp-kcard{
    min-height: 220px;
  }
}
:root{
  --ivory: #fbf0da;
  --walnut: #1e1005;
  --walnut-2: rgba(30,16,5,.72);
  --hair: rgba(30,16,5,.10);

  --card: #0b0604;                 /* dark “urushi” */
  --card-2: rgba(0,0,0,.42);
  --line: rgba(246,233,210,.20);   /* ivory lines */
  --line2: rgba(246,233,210,.10);
  --text: rgba(246,233,210,.92);

  --radius: 56px;                  /* set 0 if you want sharp */
  --gap: clamp(18px, 2.4vw, 32px);
  --padX: clamp(24px, 5vw, 80px);
  --padY: clamp(40px, 7vw, 90px);
}

/* ===== SECTION ===== */
.jp-customers{
  position: relative;
  background: var(--ivory);
  color: var(--walnut);
  padding: var(--padY) 0;
  overflow: hidden;
}

/* faint “paper grid” like architectural drafting */
.jp-customers::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to right,
      rgba(30,16,5,.06) 0px,
      rgba(30,16,5,.06) 1px,
      transparent 1px,
      transparent 120px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(30,16,5,.05) 0px,
      rgba(30,16,5,.05) 1px,
      transparent 1px,
      transparent 120px
    );
  opacity:.35;
}

.jp-customers__inner{
  position: relative;
  width: min(1280px, calc(100% - 2*var(--padX)));
  margin: 0 auto;
  z-index: 1;
}

/* ===== HEADER ROW ===== */
.jp-customers__head{
  display: grid;
  grid-template-columns: 1.15fr .35fr 1.5fr;
  align-items: start;
  gap: clamp(18px, 3vw, 44px);
  margin-bottom: clamp(22px, 4vw, 56px);
}

.jp-customers__title{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.05;
}

.jp-customers__mark{
  display: grid;
  place-items: start center;
  padding-top: 6px;
}

.jp-customers__mark svg{
  width: 64px;
  height: 56px;
  fill: none;
  stroke: var(--walnut);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: .9;
}

.jp-customers__lead{
  margin: 0;
  max-width: 64ch;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--walnut-2);
}

/* ===== GRID ===== */
.jp-customers__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

@media (max-width: 980px){
  .jp-customers__head{
    grid-template-columns: 1fr;
  }
  .jp-customers__mark{ justify-content: start; }
  .jp-customers__grid{ grid-template-columns: 1fr; }
}

/* ===== CARD BASE ===== */
.jp-card{
  position: relative;
  min-height: clamp(180px, 22vh, 260px);
  background: radial-gradient(1200px 420px at 30% 20%, #1e1005, transparent 60%),
              linear-gradient(180deg, #4d280b, #914810),
              var(--card);
  overflow: hidden;
  color: var(--text);
  box-shadow: 0 26px 90px rgba(0,0,0,.35);
}

/* subtle “frame” line inside the card */
.jp-card::after{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: calc(var(--radius) - 18px);
  box-shadow: inset 0 0 0 1px rgba(246,233,210,.08);
  pointer-events:none;
  opacity: .95;
}

/* pattern overlay layer */
.jp-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .85;
  mix-blend-mode: screen;
  filter: contrast(1.02);
}

/* top-right sector tag */
.jp-card__tag{
  position:absolute;
  top: 18px;
  right: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246,233,210,.60);
}

/* left stem line near the title (Japanese “post” feeling) */
.jp-card__stem{
  position:absolute;
  left: 26px;
  bottom: 26px;
  width: 1px;
  height: 58px;
  background: rgba(246,233,210,.22);
  opacity: .95;
}

/* main label bottom-left */
.jp-card__name{
  position:absolute;
  left: 52px;
  bottom: 22px;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  color: rgba(246,233,210,.90);
  letter-spacing: -0.01em;
}

/* ===== Patterns (each card different) ===== */

/* 1) SHOJI grid */
.jp-card--shoji::before{
  background:
    repeating-linear-gradient(to right, var(--line2) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, var(--line2) 0 1px, transparent 1px 96px);
  animation: jpShiftA 14s linear infinite;
}

/* 2) ASANOHA (hemp leaf) — conic pattern */
.jp-card--asanoha::before{
  background:
    conic-gradient(from 30deg, var(--line2) 0 10deg, transparent 10deg 60deg, var(--line2) 60deg 70deg, transparent 70deg 120deg),
    conic-gradient(from 0deg, var(--line2) 0 10deg, transparent 10deg 60deg, var(--line2) 60deg 70deg, transparent 70deg 120deg);
  background-size: 120px 120px;
  background-position: 0 0, 60px 60px;
  opacity: .65;
  animation: jpShiftB 18s linear infinite;
}

/* 3) SEIGAIHA (waves) */
.jp-card--seigaiha::before{
  background:
    radial-gradient(circle at 12px 12px, transparent 10px, var(--line2) 10px 11px, transparent 11px 24px),
    radial-gradient(circle at 36px 36px, transparent 10px, var(--line2) 10px 11px, transparent 11px 24px);
  background-size: 48px 48px;
  opacity: .55;
  animation: jpShiftA 22s linear infinite;
}

/* 4) KIKKO (tortoise shell / hex) */
.jp-card--kikko::before{
  background:
    linear-gradient(60deg, var(--line2) 0 1px, transparent 1px 26px),
    linear-gradient(-60deg, var(--line2) 0 1px, transparent 1px 26px),
    linear-gradient(0deg, var(--line2) 0 1px, transparent 1px 26px);
  background-size: 52px 52px;
  opacity: .55;
  animation: jpShiftB 20s linear infinite;
}

/* 5) SASHIKO (stitch diagonals) */
.jp-card--sashiko::before{
  background:
    repeating-linear-gradient(45deg, var(--line2) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(246,233,210,.06) 0 1px, transparent 1px 22px);
  opacity: .65;
  animation: jpShiftA 16s linear infinite;
}

/* 6) TATAMI weave (soft bands) */
.jp-card--tatami::before{
  background:
    repeating-linear-gradient(to bottom, rgba(61, 43, 11, 0.616) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to right, rgba(246,233,210,.06) 0 1px, transparent 1px 44px);
  opacity: .55;
  animation: jpShiftB 26s linear infinite;
}

/* ===== Pattern motion ===== */
@keyframes jpShiftA{
  0%{ background-position: 0 0, 0 0; }
  100%{ background-position: 240px 180px, 240px 180px; }
}
@keyframes jpShiftB{
  0%{ background-position: 0 0, 60px 60px; }
  100%{ background-position: -260px 160px, -200px 220px; }
}
/* =========================================================
   PARTNER — walnut bg + ivory text/lines (no radius)
========================================================= */
:root{
  --ppr-walnut: #1c0f09;
  --ppr-walnut2:#0d0603;
  --ppr-ivory: rgba(246,233,210,.96);
  --ppr-ivory75: rgba(246,233,210,.75);
  --ppr-ivory35: rgba(246,233,210,.35);
  --ppr-ivory18: rgba(246,233,210,.18);

  --ppr-pad: clamp(18px, 3vw, 56px);
  --ppr-wrap: min(1280px, calc(100% - 2*var(--ppr-pad)));
}

.ppr{
  position: relative;
  background: radial-gradient(1200px 700px at 50% 45%, #2a170f, var(--ppr-walnut2) 72%);
  color: var(--ppr-ivory);
  overflow: clip;
}

.ppr-stage{
  position: relative;
  min-height: 100vh;
  width: 100%;
}

.ppr-wrap{
  width: var(--ppr-wrap);
  margin: 0 auto;
  min-height: 100vh;
  padding: var(--ppr-pad);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-content: start;
}

/* subtle background scan / vignette */
.ppr::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 540px at 50% 40%, rgba(0,0,0,0), rgba(0,0,0,.72)),
    repeating-linear-gradient(to bottom,
      rgba(246,233,210,.06) 0px,
      rgba(246,233,210,.06) 1px,
      rgba(0,0,0,0) 9px,
      rgba(0,0,0,0) 13px
    );
  opacity:.22;
  z-index:0;
}

/* HEAD */
.ppr-head{
  position: relative;
  z-index: 2;
  padding-top: clamp(8px, 2vh, 18px);
  display: grid;
  gap: 10px;
}

.ppr-kicker{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ppr-ivory35);
}

.ppr-h2{
  margin: 0;
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 74px);
  letter-spacing: .01em;
  line-height: 1.02;
  color: var(--ppr-ivory);
}
.ppr-h2-fallback{
  display: inline-block;
}

/* Vara mount: sits over the fallback */
.ppr-vara{
  height: clamp(56px, 9vh, 92px);
  margin-top: -6px;
  opacity: 0; /* JS reveals */
}
.ppr-vara svg{
  width: min(720px, 100%);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 70px rgba(0,0,0,.55));
}

/* title underline */
.ppr-titleline{
  height: 1px;
  width: 100%;
  background: var(--ppr-ivory18);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .95;
}

/* counter */
.ppr-counter{
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .14em;
  color: var(--ppr-ivory35);
}
.ppr-counter-now{ color: var(--ppr-ivory75); }
.ppr-counter-slash{ opacity: .55; }

/* BOARD */
.ppr-board{
  position: relative;
  z-index: 2;
  height: min(520px, 62vh);
  min-height: 340px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ppr-ivory18);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* frame lines (drawn by JS using scale) */
.ppr-frame{
  position:absolute;
  background: rgba(246,233,210,.26);
  pointer-events:none;
  opacity:.95;
  will-change: transform;
}
.ppr-frame--top,
.ppr-frame--bottom{
  left: 14px; right: 14px; height: 1px;
  transform-origin: left center;
  transform: scaleX(0);
}
.ppr-frame--top{ top: 14px; }
.ppr-frame--bottom{ bottom: 14px; }

.ppr-frame--left,
.ppr-frame--right{
  top: 14px; bottom: 14px; width: 1px;
  transform-origin: center top;
  transform: scaleY(0);
}
.ppr-frame--left{ left: 14px; }
.ppr-frame--right{ right: 14px; }

/* scan + shine */
.ppr-scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(246,233,210,.06) 0px,
      rgba(246,233,210,.06) 1px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 14px
    );
  mix-blend-mode: screen;
}
.ppr-shine{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.0;
  background: linear-gradient(110deg,
    rgba(0,0,0,0) 40%,
    rgba(246,233,210,.10) 50%,
    rgba(0,0,0,0) 60%
  );
  transform: translateX(-40%);
}

/* GRID */
.ppr-grid{
  position: relative;
  width: min(1120px, 100%);
  padding: clamp(16px, 2.4vw, 26px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.ppr-card{
  position: relative;
  border: 1px solid rgba(246,233,210,.12);
  background: rgba(0,0,0,.16);
  overflow: hidden;
  min-height: 140px;
}

.ppr-card-inner{
  position: relative;
  height: 100%;
  padding: 18px 16px 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;

  /* initial hidden state (JS drives) */
  opacity: 0;
  transform: translateX(-18px);
  clip-path: inset(0 100% 0 0);
  will-change: opacity, transform, clip-path;
}

.ppr-card img{
  max-height: 54px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .96;
}

.ppr-card-name{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ppr-ivory75);
}

/* thin line that draws under each card */
.ppr-card-line{
  position:absolute;
  left: 14px; right: 14px;
  bottom: 12px;
  height: 1px;
  background: rgba(246,233,210,.22);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .95;
}

/* footnote */
.ppr-footnote{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:center;
  gap: 12px;
  color: var(--ppr-ivory35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ppr-footline{
  flex: 1;
  height: 1px;
  background: rgba(246,233,210,.18);
  transform-origin: left center;
  transform: scaleX(0);
}

/* responsive */
@media (max-width: 1100px){
  .ppr-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppr-board{ height: min(560px, 66vh); }
}
@media (max-width: 620px){
  .ppr-grid{ grid-template-columns: 1fr; }
  .ppr-board{ height: auto; min-height: 0; padding-bottom: 16px; }
  .ppr-card{ min-height: 120px; }
  .ppr-counter{ position: relative; justify-self: start; right: auto; top: auto; }
}
/* =========================================================
   EXTENDED RESPONSIVE (MOBILE-FIRST OVERRIDES)
   Paste this at the VERY END of your CSS so it wins.
   Covers: classic .hero + your Saisei .hero-main stack + menus/modals/preloader
========================================================= */

/* ---------- Tablet & down ---------- */
@media (max-width: 980px){

  :root{
    --header-h: 68px;
    --topH: 68px;
    --padX: clamp(14px, 4vw, 22px);
  }

  /* Header */
  .header{
    padding: 14px var(--padX);
    gap: 14px;
  }
  .brand-name{ font-size: 13px; }
  .brand-sub{ font-size: 11px; }
  .menu-btn, .nav-cta{ padding: 9px 12px; }
  .menu-btn{ gap: 8px; }

  /* Classic hero */
  .hero{
    min-height: auto;
    padding: calc(var(--header-h) + 24px) 0 56px;
    align-items: flex-start;
  }
  .hero-grid{ grid-template-columns: 1fr; gap: 18px; }
  .hero-title{
    font-size: clamp(34px, 8vw, 54px);
    line-height: .96;
  }
  .hero-sub{ max-width: 60ch; font-size: 14px; line-height: 1.65; }
  .hero-ctas{ gap: 10px; }
  .btn{ min-height: 44px; padding: 12px 14px; }

  .hero-stats{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
  }
  .stat{ padding: 12px; }
  .stat-num{ font-size: 28px; }

  .hero-layers{
    min-height: 420px;
    border-radius: var(--r);
  }
  .hero-badge{
    left: 12px; top: 12px;
    padding: 8px 10px;
  }
  .ink{
    left: 10%;
    bottom: 8%;
    width: 80%;
  }

  /* Sections */
  .section{ padding: clamp(54px, 7vw, 96px) 0; }
  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }
  .h2{ font-size: clamp(26px, 5vw, 44px); }
  .h3{ font-size: clamp(18px, 3.2vw, 22px); }
  .lead{ font-size: 14px; }

  /* Work swiper */
  .work-slide{ grid-template-columns: 1fr; min-height: auto; }
  .work-info{
    border-left: 0;
    border-top: 1px solid var(--hair2);
    padding: 16px;
  }
  .work-media img{ transform: scale(1.02); }
  .nav-link{display: none;}
  .nav-cta{display: none;}
  /* Split layout */
  .split{ grid-template-columns: 1fr; }
  .sticky{
    position: relative;
    top: auto;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .kanji{ font-size: 38px; }

  /* Process: turn into stacked cards */
  .process-row{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  /* Journal grid: 2 cols on tablet, 1 on phone below */
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Contact */
  .contact{ grid-template-columns: 1fr; }
  .form{ grid-template-columns: 1fr; }
  input, textarea{ font-size: 14px; }

  /* Menu */
  .menu-panels{
    left: var(--pad);
    right: var(--pad);
    top: calc(86px + env(safe-area-inset-top, 0px));
    bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
    width: auto;
    grid-template-columns: 1fr;
    border-radius: 0;
  }
  .menu-panel-right{
    border-left: 0;
    border-top: 1px solid rgba(251,240,218,.10);
  }
  .menu-link{
    font-size: 30px;
    line-height: 1.03;
  }
  .menu-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Credits */
  .credits-panel{
    right: 50%;
    transform: translate(50%, 0);
    top: calc(var(--header-h) + 16px);
    border-radius: 0;
  }

  /* Modal */
  .modal-panel{ border-radius: 0; }

  /* Preloader */
  .preloader-stage{
    width: min(820px, calc(100% - 2*var(--pad)));
    height: min(460px, 70vh);
  }
  .pl-rail-left{ left: 5vw; }
  .pl-rail-right{ right: 5vw; }
  .pl-emblem{ width: 76px; height: 76px; }
  .pl-kanji{ font-size: 30px; }
  .pl-word{ font-size: 30px; }
  .pl-mark{
    width: min(320px, 82vw);
    height: 86px;
    border-radius: 0 !important;
  }
}

/* ---------- Phone & down ---------- */
@media (max-width: 700px){

  :root{
    --header-h: 64px;
    --topH: 64px;
    --padX: 16px;
  }
  .nav-link{display: none;}
  .nav-cta{display: none;}
  /* Header: tighter + keep only essentials */
  .header{ padding: 12px var(--padX); }
  .brand-logo{ height: 22px; }
  .brand-sub{ display: none; } /* hides secondary line on small screens */
  .nav{ gap: 10px; }
  .menu-btn, .nav-cta{ min-height: 42px; }

  /* Classic hero */
  .kicker{ padding: 8px 10px; }
  .hero-title{
    font-size: clamp(30px, 9.5vw, 44px);
    line-height: .98;
    margin: 12px 0 8px;
  }
  .hero-sub{ font-size: 13.5px; line-height: 1.62; }
  .hero-ctas{ gap: 8px; }
  .btn{ width: 100%; }

  .hero-stats{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .stat-num{ font-size: 26px; }

  .hero-layers{
    min-height: 320px;
    border-radius: 0;
  }
  .hero-badge{ border-radius: 0; }

  /* Sections */
  .section{ padding: 54px 0; }
  .note{ border-radius: 0; }

  /* Accordion */
  .acc summary{ padding: 14px; }
  .acc-body{ padding: 0 14px 14px; }

  /* Journal cards */
  .grid{ grid-template-columns: 1fr; }
  .card img{ transform: none; }

  /* Contact */
  .form{ padding: 14px; }
  input, textarea{ padding: 11px; border-radius: 0; }

  /* Credits: bottom sheet */
  .credits-panel{
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(10px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .credits-grid{ grid-template-columns: 1fr; }

  /* Modal: bottom sheet */
  .modal-panel{
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .modal-title{ font-size: 22px; margin: 14px 14px 6px; }
  .modal-panel p{ margin: 0 14px 12px; font-size: 13.5px; }
  .modal-actions{ padding: 0 14px 14px; }

  /* Menu: true fullscreen, no rounding */
  .menu-stroke[data-stroke="top"]{ top: calc(var(--header-h) + 10px); }
  .menu-panels{
    left: 0;
    right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .menu-top{ padding-bottom: 12px; }
  .menu-links{ gap: 10px; }
  .menu-link{
    font-size: 28px;
  }
  .menu-vara{ height: 64px; }

  /* Saisei hero-main */
  .hero-main{
    min-height: 100dvh;              /* better on mobile address bar */
    padding-top: calc(var(--header-h) + 8px);
  }

  .hero-topline{ top: var(--header-h); }

  /* Big word: smaller + less bottom offset so it fits */
  .hero-word{
    left: var(--padX);
    bottom: 56px;
    font-size: clamp(56px, 10vw, 110px) !important;
    line-height: .9;
    letter-spacing: -0.02em;
  }

  /* Right note: move under/near bottom, full width */
  .hero-right{
    left: var(--padX);
    right: var(--padX);
    top: auto !important;
    bottom: 120px;
    width: auto !important;
    padding: 0;
  }
  .hero-right::before,
  .hero-right::after{ display:none; } /* remove side indicator line on mobile */
  .hero-right-title{ font-size: 11px; }
  .hero-right-sub{ font-size: 11px; }
  .hero-right-text{ font-size: 12.5px; max-width: none; }

  /* Booking button: center/bottom, bigger hit target */
  .hero-book{
    left: var(--padX) !important;
    right: var(--padX) !important;
    top: auto !important;
    bottom: 18px !important;
    width: auto !important;
    display:flex;
    justify-content:center;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 0 !important;
  }

  /* Lamp control: move to right, keep reachable */
  .lampctl{
    left: auto;
    right: 14px;
    top: calc(var(--header-h) + 68px);
    width: 54px;
    height: 160px;
  }

  /* Center substage (your “empty center space” UI) */
  .hero-substage,
  .hero-subui{
    width: calc(100vw - 24px);
    height: min(240px, 30vh);
    top: 56%;
  }
  .hero-subcenter{ width: min(460px, 86%); }
  .hero-subbtn{ height: 44px; width: min(320px, 86vw); }
  .hero-subbr{ font-size: 11px; }

  /* Dot: keep it visible, but slightly smaller on phones */
  #heroMain{ --hero-dot-size: 12px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px){

  :root{
    --padX: 14px;
    --header-h: 60px;
  }
  .nav-link{display: none;}
  .nav-cta{display: none;}
  /* Header */
  .brand-name{ font-size: 12.5px; }
  .menu-btn, .nav-cta{ padding: 9px 10px; }

  /* Classic hero */
  .hero-title{ font-size: clamp(28px, 10.5vw, 40px); }
  .hero-sub{ font-size: 13px; }
  .btn{ font-size: 14px; }

  /* Saisei hero */
  .hero-word{
    bottom: 64px;
    font-size: clamp(52px, 19vw, 120px) !important;
  }
  .hero-right-text{ font-size: 12.3px; }

  /* Menu links */
  .menu-link{ font-size: 10px; }

  /* Preloader */
  .pl-mark{ width: min(300px, 86vw); height: 82px; }
  .pl-word{ font-size: 26px; }
  .pl-emblem{ width: 68px; height: 68px; }
}

/* ---------- Ultra small ---------- */
@media (max-width: 360px){
  .nav-link{display: none;}
  .nav-cta{display: none;}
  .hero-word{ font-size: clamp(48px, 10vw, 108px) !important;
    bottom: clamp(80px, 30vh, 150px);
 }
  .hero-book{ font-size: 13px; }
  .menu-link{ font-size: 10px; }
  .icon-btn{left: auto;}
  
}

/* ---------- Touch ergonomics ---------- */
@media (hover: none) and (pointer: coarse){
  .btn, .menu-btn, .nav-cta, .icon-btn, .credits-btn, .hero-book{
    min-height: 44px;
  }
  a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
  .nav-link{ padding: 10px 0; }         /* easier tap */
  .menu-link{ padding: 4px 0; }         /* easier tap */
}
/* =========================
   DOT (overlay button)
   ========================= */
#heroMain .hero-dot-overlay{
  position:absolute;
  width: clamp(12px, 1.1vw, 16px);
  height: clamp(12px, 1.1vw, 16px);
  border-radius: 999px;
  border: 1px solid rgba(251,240,218,.38);
  background:
    radial-gradient(circle at 30% 30%,
      rgba(251,240,218,.98),
      rgba(251,240,218,.58) 62%,
      rgba(251,240,218,.30) 100%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 6px rgba(251,240,218,.08);
  transform:
    translate(-50%,-50%)
    translate(var(--dot-dx, 0px), var(--dot-dy, 0px))
    scale(var(--dot-scale, 1));
  transition: box-shadow .25s ease, filter .25s ease;
  will-change: transform;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

#heroMain .hero-dot-overlay::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border: 1px solid rgba(251, 240, 218, 0);
  opacity:.75;
  transform: scale(.92);
}

#heroMain .hero-dot-overlay::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  background: none;
  opacity: 0;
  transform: scale(.86);
}

#heroMain .hero-dot-overlay:hover{
  filter: brightness(1.06);
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 8px rgba(251,240,218,.10);
}

#heroMain .hero-dot-overlay.is-engaged::after{
  animation: heroDotPulse 1.55s ease-out infinite;
  opacity: 1;
}
@keyframes heroDotPulse{
  0%   { transform: scale(.78); opacity: .12; }
  40%  { transform: scale(1.00); opacity: .18; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* =========================
   WORD FX overlay (your #heroWordFx)
   ========================= */
#heroMain #heroWordFx{
  position:absolute;
  pointer-events:none;
  border-radius: 14px;
  background:
    none;
  box-shadow:
    inset 0 0 0 1px rgba(251,240,218,.10),
    0 18px 58px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  will-change: opacity, transform;
}

/* =========================
   Centerstage text area (Vara mounts + description)
   ========================= */
#heroMain #varaInfo,
#heroMain #varaContact,
#heroMain [data-vara="info"],
#heroMain [data-vara="contact"]{
  width: 100%;
  overflow: visible; /* helps avoid clipped strokes */
}

#heroMain .hero-subbr{
  white-space: pre-line;
  line-height: 1.6;
  letter-spacing: .01em;
  color: rgba(242,234,217,.80);
  font-size: clamp(13px, 1.05vw, 16px);
  max-height: min(44vh, 420px);
  overflow: auto;
  padding-right: 10px;
}

#heroMain .hero-subbr::-webkit-scrollbar{ width: 10px; }
#heroMain .hero-subbr::-webkit-scrollbar-thumb{
  background: rgba(242,234,217,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
/* =========================================================
   FOOTER TOP-RIGHT — Beratung box (walnut/ivory, no radius)
   Add this AFTER your footer CSS so it wins.
========================================================= */
:root{
  --walnut:#1c0f09;
  --ivory: rgba(246,233,210,.96);
  --ivory75: rgba(246,233,210,.75);
  --ivory35: rgba(246,233,210,.35);
  --ivory18: rgba(246,233,210,.18);
}

/* Place this inside your footer wrapper (which should be position:relative) */
.ftr-beratung{
  position: absolute;
  bottom: clamp(100px, 4.2vw, 44px);
  right: clamp(18px, 3.2vw, 56px);
  width: min(360px, calc(100vw - 2*clamp(18px, 3.2vw, 56px)));
  z-index: 6;

  color: var(--ivory);
  border: 1px solid var(--ivory18);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  box-shadow: 0 34px 110px rgba(0,0,0,.55);

  padding: 16px 16px 14px;
}

.ftrb-kicker{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory75);
  margin-bottom: 10px;
}

.ftrb-form{ display:grid; gap: 10px; }

.ftrb-field{ display:grid; gap: 6px; }
.ftrb-label{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory35);
}

.ftrb-input{
  width: 100%;
  height: 42px;
  padding: 0 12px;

  border: 1px solid var(--ivory18);
  background: rgba(0,0,0,.18);
  color: var(--ivory);
  outline: none;

  /* no radius */
  border-radius: 0;
}

.ftrb-input::placeholder{ color: rgba(246,233,210,.45); }

.ftrb-input:focus{
  border-color: rgba(246,233,210,.35);
  box-shadow: 0 0 0 4px rgba(246,233,210,.08);
}

.ftrb-consent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding-top: 2px;
}

.ftrb-check{
  width: 14px;
  height: 14px;
  margin-top: 2px;
  accent-color: #f6e9d2;
}

.ftrb-consent-text{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(246,233,210,.72);
}

.ftrb-link{
  color: rgba(246,233,210,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(246,233,210,.22);
  padding-bottom: 2px;
}
.ftrb-link:hover{ border-bottom-color: rgba(246,233,210,.55); }

.ftrb-btn{
  height: 42px;
  border: 1px solid rgba(246,233,210,.26);
  background: rgba(246,233,210,.92);
  color: rgba(0,0,0,.82);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;

  cursor: pointer;
  border-radius: 0;
}

.ftrb-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
}

.ftrb-line{
  margin-top: 12px;
  height: 1px;
  width: 100%;
  background: rgba(246,233,210,.18);
  transform-origin: left center;
}

/* Mobile: make it flow instead of absolute */
@media (max-width: 820px){
  .ftr-beratung{
    position: relative;
    top: auto;
    right: auto;
    margin-left: auto;
    margin-right: 0;
    width: min(520px, 100%);
  }
}
/* ====== Saisei Team Section ====== */
.saisei-team{
  --ivory: var(--bg, #fbf0da);
  --ink:   var(--ink, #1e1005);
  --ink2:  rgba(30,16,5,.78);
  --ink3:  rgba(30,16,5,.55);
  --hair:  rgba(30,16,5,.18);

  position: relative;
  padding: clamp(36px, 6vw, 84px) 0;
  background: var(--ivory);
  overflow: hidden;
}

/* “Japanese lines” loop background */
.saisei-team::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.22;

  background-image:
    repeating-linear-gradient(0deg,
      rgba(30,16,5,.10) 0 1px,
      transparent 1px 14px),
    repeating-linear-gradient(90deg,
      rgba(30,16,5,.06) 0 1px,
      transparent 1px 22px);

  transform: rotate(-3deg);
  animation: saiseiLines 12s linear infinite;
}

@keyframes saiseiLines{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 240px, 260px 0; }
}

.saisei-team__head{
  width: min(1120px, calc(100% - 2*clamp(16px, 2.2vw, 28px)));
  margin: 0 auto clamp(18px, 3vw, 34px);
  position: relative;
  z-index: 1;
}

.saisei-team__kicker{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink3);
}

.saisei-team__title{
  margin: 10px 0 10px;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.02;
  color: var(--ink);
  position: relative;
}

.saisei-team__titleBase{
  display:block;
  font-family: var(--serif, "Fraunces", serif);
}

.saisei-team__titleVara{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.95;
}

.saisei-team__lead{
  margin: 12px 0 0;
  max-width: 72ch;
  color: var(--ink2);
  line-height: 1.55;
  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* ====== Grid 2x2 with 35% cards ====== */
.saisei-team__grid{
  width: min(1120px, calc(100% - 2*clamp(16px, 2.2vw, 28px)));
  margin: 0 auto;
  position: relative;
  z-index: 1;

  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(16px, 2.6vw, 28px) clamp(18px, 3vw, 42px);
}

/* Each card: 35% width */
.saisei-card{
  width: 35%;
  min-width: 320px;
  background: rgba(0,0,0,.94);
  color: rgba(251,240,218,.92);
  padding: clamp(14px, 1.8vw, 18px);
  border-radius: 0;
  position: relative;
  overflow: hidden;

  transform: translateY(18px);
  opacity: 0;
}

.saisei-card::before{
  /* subtle animated ivory lines ON the card (loop) */
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:.12;
  background-image:
    repeating-linear-gradient(0deg, rgba(251,240,218,.22) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(251,240,218,.12) 0 1px, transparent 1px 26px);
  transform: rotate(6deg);
  animation: saiseiCardLines 10s linear infinite;
}
@keyframes saiseiCardLines{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 260px, 300px 0; }
}

.saisei-card__media{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* square image */
  overflow: hidden;
  background: #000;
}

.saisei-card__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.06);
  opacity: 0;
  will-change: transform, opacity;
}

.saisei-card__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.saisei-card__frame path{
  fill: none;
  stroke: rgba(251,240,218,.55);
  stroke-width: 1;
  stroke-linejoin: miter;
  stroke-linecap: square;
  opacity: .0; /* revealed by JS */
}

.saisei-card__body{
  position: relative;
  z-index: 1;
  padding-top: 12px;
}

.saisei-card__nameRow{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.saisei-card__name{
  font-family: var(--serif, "Fraunces", serif);
  font-size: 18px;
  letter-spacing:.01em;
  color: rgba(251,240,218,.96);
}

.saisei-card__link{
  font-size: 12px;
  color: rgba(251,240,218,.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.saisei-card__role{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(251,240,218,.70);
  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

.saisei-card__sig{
  margin-top: 10px;
  height: 34px; /* Vara host height */
  position: relative;
  opacity: .95;
}

.saisei-card__quote{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(251,240,218,.86);
  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* Mobile: 80% width */
@media (max-width: 860px){
  .saisei-team__grid{
    justify-content: center;
  }
  .saisei-card{
    width: 80%;
    min-width: 0;
  }
}
.sx-team{
  --ivory: var(--bg, #fbf0da);
  --ink: #1e1005;
  --ink2: rgba(30,16,5,.68);
  --hair: rgba(30,16,5,.20);

  background: var(--ivory);
  padding: clamp(48px, 7vw, 120px) 0;
}

.sx-team__inner{
  width: min(1400px, calc(100% - 2*clamp(18px, 2.6vw, 40px)));
  margin: 0 auto;
}

.sx-team__head{
  max-width: 80ch;
  margin-bottom: clamp(26px, 3vw, 42px);
}
.sx-kicker{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(30,16,5,.55);
}
.sx-title{
  margin: 10px 0 10px;
  font-family: var(--serif, "Fraunces", serif);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  color: var(--ink);
}
.sx-lead{
  margin: 0;
  color: var(--ink2);
  line-height: 1.6;
  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 15px;
}

/* Grid: 2 columns big gap like screenshot */
.sx-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 92px) clamp(30px, 6vw, 110px);
  align-items: start;
}

/* Card */
.sx-card{
  position: relative;
}

/* Big image */
.sx-media{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;        /* tall portrait like screenshot */
  background: transparent;
  overflow: hidden;
}
.sx-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;

  /* start state (JS will animate) */
  opacity: 1;
  transform: translateX(-10%) scale(1.02);
  will-change: transform;
}

/* The wipe cover (ivory) */
.sx-wipe{
  position:absolute;
  inset:0;
  background: var(--ivory);
  transform: translateX(0%); /* fully covering at start */
  will-change: transform;
}

/* Meta */
.sx-meta{
  margin-top: 14px;
}
.sx-row{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 18px;
}
.sx-name{
  font-family: var(--serif, "Fraunces", serif);
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
}
.sx-icons{
  display:flex;
  gap: 10px;
}
.sx-ic{
  width: 26px;
  height: 26px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(30,16,5,.20);
  color: rgba(30,16,5,.85);
  text-decoration:none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1;
}
.sx-role{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(30,16,5,.55);
  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
.sx-rule{
  margin-top: 14px;
  height: 1px;
  width: min(420px, 82%);
  background: rgba(30,16,5,.22);
}

/* Mobile: stacked, big 80% width centered */
@media (max-width: 880px){
  .sx-grid{
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .sx-card{
    width: 80%;
    margin: 0 auto;
  }
}
/* ====== WIDE (expanded) layout overrides ====== */
.saisei-team--wide .saisei-team__head{
  width: min(800px, calc(100% - 2*clamp(18px, 2.6vw, 40px)));
}

.saisei-team__grid--wide{
  width: min(800px, calc(100% - 2*clamp(18px, 2.6vw, 40px)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 92px) clamp(30px, 6vw, 110px);
  align-items: start;
}

/* cards become “light” like screenshot */
.saisei-card--wide{
  width: auto;
  min-width: 0;
  background: transparent;
  color: var(--ink, #1e1005);
  padding: 0;
  opacity: 1;         /* your JS can still animate opacity */
  transform: none;    /* your JS can still animate y if you want */
}

/* big portrait media */
.saisei-card__media--tall{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
}

.saisei-card__img--wide{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* NEW: ivory wipe overlay (covers image first) */
.saisei-card__wipe{
  position: absolute;
  inset: 0;
  background: var(--bg, #fbf0da);
  transform: translateX(0%);
  will-change: transform;
  pointer-events: none;
}

.saisei-card__body--wide{
  padding-top: 14px;
}

.saisei-card__nameRow--wide{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.saisei-card__name--wide{
  font-family: var(--serif, "Fraunces", serif);
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink, #1e1005);
}

.saisei-card__icons{
  display: flex;
  gap: 10px;
}
.saisei-card__ic{
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(30,16,5,.20);
  color: rgba(30,16,5,.85);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1;
}

.saisei-card__role--wide{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(30,16,5,.55);
  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* underline rule like screenshot */
.saisei-card__rule{
  margin-top: 14px;
  height: 1px;
  width: min(420px, 82%);
  background: rgba(30,16,5,.22);
}

.saisei-card__sig{
  margin-top: 12px;
}

.saisei-card__quote--wide{
  margin-top: 10px;
  max-width: 62ch;
  color: rgba(30,16,5,.72);
}

/* Mobile: 80% width centered */
@media (max-width: 880px){
  .saisei-team__grid--wide{
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .saisei-card--wide{
    width: 80%;
    margin: 0 auto;
  }
}
/* =========================
   CONTACT — Dr. Adams values
========================= */
.ad-contact{
  --ivory: var(--bg, #fbf0da);
  --ink: var(--ink, #1e1005);
  --ink2: rgba(30,16,5,.70);
  --ink3: rgba(30,16,5,.52);
  --hair: rgba(30,16,5,.22);
  --hair2: rgba(30,16,5,.12);
  --walnut: #2a1a10;
  --accent: var(--accent, #9c7443);

  background: var(--ivory);
  padding: clamp(56px, 8vw, 130px) 0;
}

.ad-contact__inner{
  width: min(1400px, calc(100% - 2*clamp(18px, 2.6vw, 42px)));
  margin: 0 auto;
}

.ad-contact__grid{
  display:grid;
  grid-template-columns: 1fr 1.28fr;
  gap: clamp(28px, 6vw, 110px);
  align-items:start;
}

/* LEFT */
.ad-contact__kickerSmall{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
}

.ad-contact__headline{
  margin: clamp(16px, 3vw, 38px) 0 0;
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 300;
  font-size: clamp(54px, 6.2vw, 108px);
  line-height: .92;
  letter-spacing: .01em;
  color: var(--ink);
}

/* Vara line under headline */
.ad-contact__vara{
  margin-top: clamp(10px, 1.8vw, 18px);
  height: 68px;              /* enough for the SVG strokes */
  width: min(520px, 100%);
  opacity: 0;                /* JS reveals then draws */
  transform: translateY(10px);
}
.ad-contact__vara svg{
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* text */
.ad-contact__lead{
  margin-top: 16px;
  max-width: 52ch;
  color: var(--ink2);
  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.7;
}

.ad-contact__values{
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 12px;
  max-width: 56ch;
}
.ad-contact__values li{
  display:grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--hair2);
}
.ad-contact__values span{
  font-family: var(--serif, "Fraunces", serif);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .02em;
}
.ad-contact__values em{
  font-style: normal;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.55;
}

/* RIGHT form */
.ad-form{ display:grid; gap: clamp(20px, 2.4vw, 32px); }

.ad-field{ display:grid; gap: 10px; }

.ad-field__label{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--ink);
}

.ad-field__input{
  appearance: none;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;

  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(30,16,5,.72);
}

.ad-field__input::placeholder{ color: rgba(30,16,5,.46); }

.ad-field__textarea{ resize: vertical; min-height: 92px; }

/* underline */
.ad-field__line{
  height: 1px;
  width: 100%;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* actions */
.ad-actions{
  margin-top: 8px;
  display: grid;
  gap: 10px;
}

.ad-btn{
  background: #0a0806;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 0;
  cursor: pointer;

  color: rgba(251,240,218,.96);
  font-family: var(--serif, "Fraunces", serif);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ad-actions__hint{
  color: var(--ink3);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ===== Initial hidden states (JS animates) ===== */
#adContact [data-ad-reveal],
#adContact [data-ad-field]{
  opacity: 0;
  transform: translateY(14px);
}

/* make sure fields don't jump */
#adContact .ad-field__line{ opacity: 1; }

/* Mobile */
@media (max-width: 920px){
  .ad-contact__grid{ grid-template-columns: 1fr; gap: 42px; }
  .ad-contact__headline{ font-size: clamp(52px, 12vw, 90px); }
  .ad-contact__vara{ width: 100%; }
}
/* =========================================================
   Contact form fields — rich but minimal (ivory concept)
   - removes native borders
   - clean underline only
   - nicer select dropdown + focus state
   ========================================================= */

/* tokens (reuse yours if already set) */
:root{
  --ivory: var(--bg, #fbf0da);
  --ink:   var(--ink, #1e1005);
  --ink2:  rgba(30,16,5,.70);
  --ink3:  rgba(30,16,5,.48);
  --hair:  rgba(30,16,5,.20);
  --hair2: rgba(30,16,5,.10);
  --accent: var(--accent, #9c7443);
}

/* FIELD WRAP */
.ad-field{
  position: relative;
  padding-top: 2px;
}

/* LABEL */
.ad-field__label{
  display:block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* INPUT / SELECT / TEXTAREA (remove border, make “rich”) */
.ad-field__input{
  width: 100%;
  border: 0 !important;            /* ✅ remove border */
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: rgba(30,16,5,.78);

  font-family: var(--sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.6;

  margin: 0;

  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder */
.ad-field__input::placeholder{
  color: rgba(30,16,5,.42);
}

/* Textarea */
.ad-field__textarea{
  resize: vertical;
  min-height: 100px;
  padding-bottom: 14px;
}

/* Underline (base) */
.ad-field__line{
  position: relative;
  display:block;
  width: 100%;
  height: 1px;
  background: var(--walnut);
  transform-origin: left center;
}

/* Add a second “active” line via pseudo element */
.ad-field__line::after{
  content:"";
  position:absolute;
  left:0; top:0;
  height: 1px;
  width: 100%;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.9,.15,1);
}

/* Focus states (underline grows + subtle “ink” glow) */
.ad-field:focus-within .ad-field__line::after{
  transform: scaleX(1);
}

/* Optional: subtle focus color change on label */
.ad-field:focus-within .ad-field__label{
  color: rgba(30,16,5,.92);
}

/* SELECT: custom caret (keeps concept, avoids ugly native border) */
select.ad-field__input{
  padding-right: 34px; /* space for caret */
  cursor: pointer;
}

/* caret */
.ad-field--select{ position: relative; }
.ad-field--select::after{
  content:"";
  position:absolute;
  right: 2px;
  top: 38px; /* aligns with input baseline; adjust if needed */
  width: 18px;
  height: 18px;
  pointer-events: none;
  background:
    linear-gradient(45deg, transparent 50%, rgba(30,16,5,.60) 50%) 6px 7px/7px 7px no-repeat,
    linear-gradient(-45deg, transparent 50%, rgba(30,16,5,.60) 50%) 10px 7px/7px 7px no-repeat;
  opacity: .8;
}

/* dropdown list styling (limited by browser, but improves) */
select.ad-field__input{
  background-color: transparent;
}
select.ad-field__input option{
  background: #fff7e6;     /* light ivory */
  color: rgba(30,16,5,.92);
}

/* Autofill (Chrome) – keep ivory look */
.ad-field__input:-webkit-autofill{
  -webkit-text-fill-color: rgba(30,16,5,.78);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px rgba(251,240,218,.65) inset !important;
}

/* Disabled */
.ad-field__input:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Optional: “soft pill” input look without borders (if you want like your screenshot)
   -> add class .ad-field__input--pill on inputs you want rounded background for */
.ad-field__input--pill{
  background: rgba(30,16,5,.05);
  padding: 10px 14px 12px;
  border-radius: 999px;
}
.ad-field__input--pill + .ad-field__line{
  margin-top: 8px;
}

/* Small-screen spacing */
@media (max-width: 640px){
  .ad-field__input{ font-size: 14px; }
}
/* =========================================================
   SELECT dropdown: walnut highlight + square corners (no radius)
   NOTE: exact dropdown styling depends on browser/OS.
   This covers the cases browsers allow (Firefox best),
   and forces your own select element to be square too.
========================================================= */

:root{
  --walnut: #2a1a10;                 /* adjust to your walnut */
  --ivory: var(--bg, #fbf0da);
  --inkOnWalnut: rgba(251,240,218,.98);
}

/* 1) remove rounding on the select itself */
select.ad-field__input{
  border-radius: 0 !important;
}

/* 2) make the opened dropdown list square (where supported) */
select.ad-field__input option{
  border-radius: 0 !important; /* some browsers ignore, harmless */
}

/* 3) Selected option background (works in many browsers, esp. Firefox) */
select.ad-field__input option:checked{
  background: var(--walnut) !important;
  color: var(--inkOnWalnut) !important;
}

/* 4) Keyboard / hover highlight (Firefox supports :hover on option) */
select.ad-field__input option:hover{
  background: var(--walnut) !important;
  color: var(--inkOnWalnut) !important;
}

/* 5) When the select is focused, keep concept */
select.ad-field__input:focus{
  outline: none !important;
}

/* 6) If you use the custom caret wrapper, remove its rounding too */
.ad-field--select{
  border-radius: 0 !important;
}

/* 7) For Safari/Chrome: you CANNOT fully change the native blue highlight
      reliably with pure CSS. If you need 100% control, use a custom select
      (I can give you a fully styled dropdown component). */
.ad-cselect{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  padding: 10px 0 12px;
  text-align:left;
  cursor:pointer;
  border-radius:0 !important;
  color: var(--ink2);
  font: 14px/1.6 var(--sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ad-cselect__value{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-cselect__caret{
  width: 14px; height: 14px; flex:0 0 14px;
  background:
    linear-gradient(45deg, transparent 50%, rgba(30,16,5,.70) 50%) 4px 5px/6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, rgba(30,16,5,.70) 50%) 8px 5px/6px 6px no-repeat;
  opacity:.9;
}

/* dropdown panel */
.ad-cselect__panel{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  background: #fff7e6;
  border: 1px solid rgba(30,16,5,.18);
  border-radius: 0 !important;         /* ✅ no radius */
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 6px 0;
  display:none;
  max-height: 260px;
  overflow:auto;
  z-index: 50;
}

/* options */
.ad-cselect__opt{
  padding: 9px 12px;
  color: rgba(30,16,5,.88);
  cursor:pointer;
  user-select:none;
  border-radius:0 !important;
}

/* ✅ walnut hover (always) */
.ad-cselect__opt:hover,
.ad-cselect__opt.is-hover{
  background: var(--walnut);
  color: var(--onWalnut);
}

/* ✅ walnut selected */
.ad-cselect__opt.is-active{
  background: rgba(42,26,16,.92);
  color: var(--onWalnut);
}

/* open state */
.ad-field--select{ position:relative; }
.ad-field--select.is-open .ad-cselect__panel{ display:block; }

/* keep underline behavior from your concept */
.ad-field--select:focus-within .ad-field__line::after{
  transform: scaleX(1);
}

#kontakt-selection option {
  background-color: var(--ivory-10);
  color: #333;
  border: none;
  /* Additional styles like font-size, padding can be applied, 
     though cross-browser consistency for all properties is limited */
}

/* You can also style hover effects on some modern browsers, 
   though support varies, especially for the dropdown list itself */
#kontakt-selection option:hover {
  background-color: var(--walnut);
  color: var(--walnut);
}
:root{
  --walnut:#2a1a10;
  --ivory: var(--bg, #fbf0da);
  --ink: rgba(30,16,5,.90);
  --hair: rgba(30,16,5,.22);
  --onWalnut: rgba(251,240,218,.98);
}

.ad-field--select{ position:relative; }

.ad-native-select{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
}

.ad-cselect{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  padding: 10px 0 12px;
  cursor:pointer;
  border-radius:0 !important;
  text-align:left;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  font: 14px/1.6 var(--sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  color: rgba(30,16,5,.70);
}

.ad-cselect__caret{
  width:14px;height:14px;flex:0 0 14px;
  background:
    linear-gradient(45deg, transparent 50%, rgba(30,16,5,.70) 50%) 4px 5px/6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, rgba(30,16,5,.70) 50%) 8px 5px/6px 6px no-repeat;
  opacity:.9;
}

.ad-cselect__panel{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  background: #fff7e6;
  border: 1px solid rgba(30,16,5,.18);
  border-radius:0 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 6px 0;
  display:none;
  max-height: 260px;
  overflow:auto;
  z-index: 50;
}

.ad-field--select.is-open .ad-cselect__panel{ display:block; }

.ad-cselect__opt{
  padding: 9px 12px;
  color: rgba(30,16,5,.88);
  cursor:pointer;
  user-select:none;
}

/* ✅ walnut hover (always) */
.ad-cselect__opt:hover,
.ad-cselect__opt.is-hover{
  background: var(--walnut);
  color: var(--onWalnut);
}

/* ✅ walnut selected */
.ad-cselect__opt.is-active{
  background: rgba(42,26,16,.92);
  color: var(--onWalnut);
}
/* make sure the open select sits ABOVE everything else */
.ad-field--select{ position:relative; }
.ad-field--select.is-open{ z-index: 9999; }  /* <-- key */

/* ensure panel + options can receive clicks */
.ad-cselect__panel,
.ad-cselect__opt{
  pointer-events: auto !important;
}

/* (optional) if any parent has pointer-events:none, this forces it back */
.ad-field--select,
.ad-cselect{
  pointer-events: auto !important;
}
/* ===== Dr. Adams Flow (ivory + walnut only) ===== */
.da-flow{
  --ivory: #fbf0da;
  --walnut:#2a1a10;

  --hair: rgba(42,26,16,.14);
  --hair2: rgba(42,26,16,.08);
  --ink: rgba(42,26,16,.92);
  --ink2: rgba(42,26,16,.70);
  --ink3: rgba(42,26,16,.52);

  --serif: "Fraunces", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background: var(--ivory);
  padding: clamp(56px, 1vw, 10px) 0;
  position: relative;
  overflow: hidden;
}

.da-flow__head{
  width: min(1400px, calc(100% - 2*clamp(18px, 2.6vw, 42px)));
  margin: 0 auto 18px;
}

.da-flow__kicker{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
}

.da-flow__title{
  margin: 10px 0 8px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  color: var(--ink);
  position: relative;
}

.da-flow__titleVara{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}

.da-flow__lead{
  margin:0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink2);
}

/* board */
.da-board{
  width: min(1400px, calc(100% - 2*clamp(18px, 2.6vw, 42px)));
  margin: 0 auto;
  position: relative;
  min-height: 620px;
  border: 1px solid var(--hair2);
  overflow: hidden;
  isolation: isolate;
}

/* walnut bg */
.da-walnut{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 0;
  opacity: .9;
  mix-blend-mode: multiply;
}

/* outer blueprint */
.da-bp{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 2;
  opacity: 1;
}

.da-bp__base{
  fill:none;
  stroke: rgba(251,240,218,.92);    /* heavy ivory */
  stroke-width: 2.6;
  stroke-linecap: square;
}

.da-bp__prog{
  fill:none;
  stroke: rgba(42,26,16,.98);       /* walnut */
  stroke-width: 2.6;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* cards are absolute; Theatre animates x/y/w/h/alpha */
.da-card{
  position:absolute;
  left:0; top:0;
  width: 200px;
  height: 140px;
  border: 1px solid var(--hair2);
  background: rgba(251,240,218,.98);
  border-radius: 0;
  overflow:hidden;
  z-index: 3;
  will-change: transform, width, height, opacity;
  box-shadow: 0 24px 60px rgba(42,26,16,.10);
}

/* header */
.da-card__top{
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--hair2);
  background: linear-gradient(180deg, rgba(42,20,16,.2), rgba(42,26,16,.01));
}

.da-card__num{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
  letter-spacing:.12em;
  color: rgba(251,240,218,.88);
}

.da-card__ttl{
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing:.02em;
  color: rgba(251,240,218,.96);
}

.da-card__sub{
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(251,240,218,.78);
}

/* active body reveal */
.da-card__body{
  position: relative;
  padding: 18px 16px 16px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* JS toggles */
.da-card[data-open="1"] .da-card__body{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* inner blueprint */
.da-inbp{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity: .20;
}

.da-inbp__base{
  fill:none;
  stroke: rgba(251,240,218,.92);
  stroke-width: 2;
  stroke-linecap: square;
}

.da-inbp__prog{
  fill:none;
  stroke: rgba(42,26,16,.98);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* copy */
.da-copy p{
  margin:0 0 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(42,26,16,.86);
}
.da-copy ul{
  margin:0;
  padding-left: 18px;
  font-family: var(--sans);
  color: rgba(42,26,16,.66);
  font-size: 12.8px;
  line-height: 1.6;
}

/* check */
.da-check{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-family: var(--sans);
  font-size: 12.8px;
  color: rgba(42,26,16,.72);
}
.da-check input{ margin-top:3px; accent-color: var(--walnut); }

/* buttons */
.da-btn{
  border: 1px solid var(--hair);
  background: transparent;
  color: rgba(42,26,16,.86);
  padding: 11px 14px;
  border-radius:0;
  cursor:pointer;
  font-family: var(--serif);
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.da-btn:disabled{ opacity:.55; cursor:not-allowed; }

.da-btn--primary{
  background: var(--walnut);
  border-color: var(--walnut);
  color: rgba(251,240,218,.96);
}

.da-actions{ margin-top: 18px; }
.da-row{ display:flex; gap: 10px; margin-top: 16px; }
.da-btn--ghost{ width: 44%; }
.da-btn--next{ width: 56%; }

/* choices */
.da-choices{ display:grid; gap: 10px; }
.da-choice{
  border: 1px solid var(--hair2);
  background: rgba(251,240,218,.94);
  color: rgba(42,26,16,.88);
  padding: 12px 12px;
  border-radius:0;
  cursor:pointer;
  font-family: var(--serif);
  text-align:left;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.da-choice:hover{ border-color: rgba(42,26,16,.28); }
.da-choice.is-selected{
  background: var(--walnut);
  border-color: var(--walnut);
  color: rgba(251,240,218,.96);
}

/* fields */
.da-field{ display:grid; gap: 8px; margin-top: 12px; }
.da-field span{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(42,26,16,.74);
}
.da-field input{
  border:0;
  outline:none;
  background: transparent;
  padding: 10px 0 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(42,26,16,.82);
}
.da-field i{
  height:1px;
  background: var(--hair2);
  position: relative;
  overflow:hidden;
}
.da-field i::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(42,26,16,.55);
  transform: scaleX(0);
  transform-origin:left center;
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.da-field:focus-within i::after{ transform: scaleX(1); }

/* slots */
.da-slotsWrap{ margin-top: 16px; }
.da-slotsLab{
  display:block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(42,26,16,.74);
}
.da-slots{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.da-slot{
  border: 1px solid var(--hair2);
  background: rgba(251,240,218,.94);
  color: rgba(42,26,16,.88);
  padding: 10px 10px;
  cursor:pointer;
  border-radius:0;
  text-align:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
}
.da-slot:hover{ border-color: rgba(42,26,16,.28); }
.da-slot.is-selected{
  background: var(--walnut);
  border-color: var(--walnut);
  color: rgba(251,240,218,.96);
}
.da-hint{
  margin-top: 8px;
  font-family: var(--sans);
  color: rgba(42,26,16,.60);
  font-size: 12px;
}

.da-sum{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair2);
  font-family: var(--sans);
  color: rgba(42,26,16,.74);
  font-size: 13px;
  line-height: 1.55;
}
/* Minimal picker styling (best-effort across browsers) */
.da-flow input[type="date"],
.da-flow input[type="time"]{
  color-scheme: light;                 /* avoid dark/blue-ish */
  accent-color: #2a1a10;               /* walnut for checkmarks where supported */
  -webkit-tap-highlight-color: transparent;
}

/* remove default blue focus ring */
.da-flow input[type="date"]:focus,
.da-flow input[type="time"]:focus{
  outline: none;
  box-shadow: none;
}

/* optional: warm selection highlight (some browsers) */
.da-flow ::selection{
  background: rgba(42,26,16,.18);
  color: rgba(42,26,16,.92);
}

/* Chromium-specific: reduce inner calendar icon blue tint */
.da-flow input[type="date"]::-webkit-calendar-picker-indicator,
.da-flow input[type="time"]::-webkit-calendar-picker-indicator{
  filter: grayscale(1) brightness(.35);
  opacity: .75;
}

/* If your input has background from your theme, keep it consistent */
.da-flow input[type="date"],
.da-flow input[type="time"]{
  background: transparent;
}
/* ===== Animated Lines (black, subtle, loop) ===== */
:root{
  --line-black: rgba(0,0,0,.62);
  --line-black-dim: rgba(0,0,0,.34);
  --line-thick: 1px;
  --line-speed: 2.4s;
  --line-delay: .0s;
}

/* Base line */
.fx-line{
  position:absolute;
  pointer-events:none;
  z-index: 20;
  opacity: 1;
  mix-blend-mode: multiply;
}

/* HORIZONTAL */
.fx-line--h{
  height: var(--line-thick);
  width: clamp(140px, 22vw, 420px);
  background: var(--line-black-dim);
  overflow: hidden;
}
.fx-line--h::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--line-black) 22%,
    var(--line-black) 78%,
    transparent 100%
  );
  transform: translateX(-105%);
  animation: fxDrawH var(--line-speed) cubic-bezier(.22,1,.25,1) var(--line-delay) infinite;
}

/* VERTICAL */
.fx-line--v{
  width: var(--line-thick);
  height: clamp(140px, 22vw, 420px);
  background: var(--line-black-dim);
  overflow: hidden;
}
.fx-line--v::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--line-black) 22%,
    var(--line-black) 78%,
    transparent 100%
  );
  transform: translateY(-105%);
  animation: fxDrawV var(--line-speed) cubic-bezier(.22,1,.25,1) var(--line-delay) infinite;
}

@keyframes fxDrawH{
  0%   { transform: translateX(-105%); opacity: .0; }
  10%  { opacity: 1; }
  55%  { transform: translateX(0%);   opacity: 1; }
  100% { transform: translateX(105%); opacity: .0; }
}
@keyframes fxDrawV{
  0%   { transform: translateY(-105%); opacity: .0; }
  10%  { opacity: 1; }
  55%  { transform: translateY(0%);    opacity: 1; }
  100% { transform: translateY(105%);  opacity: .0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fx-line--h::after, .fx-line--v::after{ animation: none !important; }
}

/* ===== Optional helpers ===== */

/* Crosshair: place inside a relative container */
.fx-crosshair{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 20;
}
.fx-crosshair .fx-line--h{ left: 50%; top: 50%; transform: translate(-50%, -50%); }
.fx-crosshair .fx-line--v{ left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Frame corners (4 lines), no radius */
.fx-frame{
  position:absolute;
  inset: 14px;
  pointer-events:none;
  z-index: 20;
}
.fx-frame .fx-line--h{ width: 34%; }
.fx-frame .fx-line--v{ height: 34%; }

.fx-frame .fx-top    { left: 0; top: 0; }
.fx-frame .fx-bottom { right: 0; bottom: 0; }
.fx-frame .fx-left   { left: 0; top: 0; }
.fx-frame .fx-right  { right: 0; bottom: 0; }

/* Frame directions (make it feel “engineered”) */
.fx-frame .fx-top::after    { animation-direction: normal; }
.fx-frame .fx-bottom::after { animation-direction: reverse; }
.fx-frame .fx-left::after   { animation-direction: normal; }
.fx-frame .fx-right::after  { animation-direction: reverse; }
/* =========================
   STACKPIN SERVICES (NEW)
========================= */
:root{
  --svc-bg: #140b06;
  --svc-ink: rgba(255, 242, 220, .92);
  --svc-ink2: rgba(255, 242, 220, .78);
  --svc-hair: rgba(255, 242, 220, .18);
  --svc-hair2: rgba(255, 242, 220, .10);
  --svc-accent: rgba(255, 242, 220, .92);

  --svc-pad: clamp(16px, 3vw, 44px);
  --svc-top: clamp(14px, 2.4vw, 26px);

  --svc-serif: "Fraunces", "Times New Roman", Times, serif;
  --svc-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --svc-ease: cubic-bezier(.2,.9,.2,1);
}

.svcStack{
  position: relative;
  background: var(--svc-bg);
  color: var(--svc-ink);
  overflow: visible;
  isolation: isolate;
}

/* pinned stage (JS pins it) */
.svcStage{
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* nav */
.svcStackNav{
  position: fixed;
  left: clamp(12px, 2.2vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: grid;
  gap: 10px;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.svcStack.is-inview .svcStackNav{
  opacity: 1;
  pointer-events: auto;
}

.svcNavBtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;

  border: 1px solid var(--svc-hair);
  border-right: none;
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);

  color: var(--svc-ink2);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  opacity: .82;
  transition: opacity .18s ease, background .18s ease, border-color .18s ease;
}
.svcNavBtn:hover{ opacity: 1; border-color: rgba(255,242,220,.26); }
.svcNavBtn.is-active{
  opacity: 1;
  color: var(--svc-ink);
  background: rgba(0,0,0,.34);
  border-color: rgba(255,242,220,.32);
}

.svcNavIdx{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  opacity: .82;
}

.svcNavStick{
  margin-left: auto;
  width: 2px;
  height: 18px;
  background: var(--svc-hair2);
  overflow: hidden;
}
.svcNavStick i{
  display:block;
  width:100%;
  height:100%;
  background: rgba(255,242,220,.75);
  transform: scaleY(var(--p, .15));
  transform-origin: 50% 100%;
}

/* panels (JS sets absolute + transforms) */
.svcPanel{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.svcPanel.is-active{ pointer-events: auto; }

.svcPanelInner{
  height: 100%;
  padding: var(--svc-pad);
  display: grid;
  align-content: start;
}

/* top header like reference */
.svcTop{
  position: relative;
  padding: var(--svc-top) 0 calc(var(--svc-top) * .95);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.svcTopTitle{
  margin: 0;
  font-family: var(--svc-serif);
  font-weight: 500;
  letter-spacing: .02em;
  font-size: clamp(42px, 5.2vw, 86px);
  line-height: .92;
}
.svcTopRight{
  font-family: var(--svc-serif);
  font-size: clamp(14px, 1.5vw, 20px);
  opacity: .85;
}
.svcTopLine{
  grid-column: 1/-1;
  height: 1px;
  background: rgba(255,242,220,.28);
  transform-origin: left center;
  transform: scaleX(0);
}

/* layout */
.svcGrid{
  margin-top: clamp(10px, 1.4vw, 18px);
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(420px, 1fr) minmax(320px, .85fr);
  gap: clamp(18px, 2.8vw, 44px);
  align-items: start;
}

.svcLeft .svcLabel{
  font-family: var(--svc-sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
  margin-top: 10px;
}
.svcNum{
  font-family: var(--svc-serif);
  font-size: clamp(92px, 12vw, 200px);
  line-height: 1;
  margin-top: clamp(18px, 5vh, 68px);
  opacity: .95;
}

.svcMid{
  max-width: 720px;
}
.svcH3{
  margin: 0 0 14px;
  font-family: var(--svc-sans);
  font-weight: 520;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.35;
  color: var(--svc-ink);
}
.svcH3 span{ color: rgba(255,242,220,.98); }
.svcP{
  margin: 0 0 18px;
  font-family: var(--svc-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--svc-ink2);
}

/* included list with lines (animated in JS, ease-out) */
.svcIncluded{
  margin-top: 10px;
}
.svcSmallTitle{
  font-family: var(--svc-sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 10px;
}
.svcList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.svcList li{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: center;
}
.svcList li span{
  font-family: var(--svc-sans);
  font-size: 13px;
  color: rgba(255,242,220,.86);
}
.svcLine{
  height: 1px;
  background: rgba(255,242,220,.22);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .95;
}

/* button */
.svcBtn{
  margin-top: 18px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,242,220,.24);
  background: rgba(0,0,0,.22);
  color: rgba(255,242,220,.92);
  text-decoration: none;
  font-family: var(--svc-sans);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
}
.svcBtnLine{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;
  background: rgba(255,242,220,.62);
  transform-origin: left center;
  transform: scaleX(0);
}

/* right image */
.svcMedia{
  margin: 0;
  border: 1px solid rgba(255,242,220,.14);
  background: rgba(0,0,0,.16);
  height: clamp(240px, 46vh, 520px);
  overflow: hidden;
}
.svcMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transform: scale(1.02);
}

/* industry panel tweaks */
.svcGrid--industry .svcMid{ max-width: 820px; }
.svcIndustryGrid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.svcIndCard{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;

  border: 1px solid rgba(255,242,220,.14);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
  text-decoration: none;
  color: rgba(255,242,220,.92);
}
.svcIndCard img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.svcIndCard strong{
  display:block;
  font-family: var(--svc-sans);
  font-size: 13px;
  font-weight: 650;
}
.svcIndCard span{
  display:block;
  margin-top: 2px;
  font-family: var(--svc-sans);
  font-size: 12.5px;
  color: rgba(255,242,220,.74);
}

/* background video layer created by JS */
#svcVideoLayer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
  background: #050404;
}
#svcVideoLayer .svcV{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.02);
  filter: contrast(1.02) saturate(1.02);
}
#svcVideoLayer .svcShade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 700px at 65% 35%, rgba(0,0,0,.20), rgba(0,0,0,.60) 70%, rgba(0,0,0,.78));
}
#svcVideoLayer .svcVig{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 560px at 50% 45%, rgba(0,0,0,0), rgba(0,0,0,.65));
}

/* responsive */
@media (max-width: 980px){
  .svcGrid{
    grid-template-columns: 1fr;
  }
  .svcNum{ margin-top: 10px; }
  .svcStackNav{
    left: 12px;
    top: auto;
    bottom: 12px;
    transform: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    max-width: calc(100vw - 24px);
    padding-bottom: 2px;
  }
  .svcList li{ grid-template-columns: 1fr; }
  .svcIndustryGrid{ grid-template-columns: 1fr; }
}