/* ============================================================
   NEON MANTIS — Design System
   Black · Bone · Mint. Editorial. Beyond the Expected.
   Elementor-friendly: flat tokens, standard properties.
   ============================================================ */

:root{
  --nm-black:#0a0a0a;
  --nm-ink:#141314;
  --nm-char:#231f20;
  --nm-char-2:#2d2829;
  --nm-char-3:#3a3536;
  --nm-bone:#f1f0f0;
  --nm-white:#f9fbfb;
  --nm-grey:#8a9390;
  --nm-grey-2:#c5cac7;
  --nm-mint:#97d4c0;
  --nm-mint-deep:#58a69e;
  --nm-mint-dark:#2a7f72;

  --nm-line:rgba(241,240,240,.14);
  --nm-line-soft:rgba(241,240,240,.07);
  --nm-mint-line:rgba(151,212,192,.32);

  /* Marble (brand display face) is NOT served in this environment — verified
     by metrics test: it falls back to Times. Bricolage Grotesque is the
     stand-in: editorial, high-contrast, variable. Swap the family name back
     to "Marble" once the font file is installed in WordPress. */
  --nm-serif:"Bricolage Grotesque",Georgia,serif;
  --nm-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --nm-gut:clamp(1.25rem,4vw,4.5rem);
  --nm-max:1680px;

  --nm-ease:cubic-bezier(.22,1,.36,1);
  --nm-ease-io:cubic-bezier(.65,.05,.36,1);
}

/* ---------- base ----------
   html:root / body[class] raise specificity above the injected
   Tailwind preflight, which loads after this sheet. */
html:root{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:#0a0a0a; }
html:root body,
body[class]{
  background:var(--nm-black);
  background-color:var(--nm-black);
  color:var(--nm-bone);
  font-family:var(--nm-sans);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  margin:0;
}
/* headings/links inherit brand colour rather than preflight defaults */
body[class] h1,body[class] h2,body[class] h3,
body[class] h4,body[class] blockquote,body[class] p{ color:inherit; }
body[class] a{ color:inherit; }
::selection{ background:var(--nm-mint); color:var(--nm-black); }

/* ---------- grain ---------- */
.nm-grain::after{
  content:"";
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9999;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:nm-grain 700ms steps(2) infinite;
}
@keyframes nm-grain{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}
  75%{transform:translate(2%,2%)}
}

/* ---------- type ---------- */
.nm-display{
  font-family:var(--nm-serif);
  font-weight:700;
  line-height:.88;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.nm-hero-type{ font-size:clamp(2.9rem,9.2vw,10.5rem); }
.nm-h1{ font-size:clamp(2.4rem,6.6vw,6.6rem); }
.nm-h2{ font-size:clamp(1.9rem,4.4vw,4.2rem); }
.nm-h3{ font-size:clamp(1.4rem,2.4vw,2.3rem); }

.nm-eyebrow{
  font-family:var(--nm-sans);
  font-size:clamp(.62rem,.78vw,.75rem);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--nm-grey);
}
.nm-lead{
  font-size:clamp(1.03rem,1.42vw,1.32rem);
  line-height:1.6;
  color:var(--nm-grey-2);
  font-weight:300;
}
.nm-body{ font-size:1rem; line-height:1.72; color:var(--nm-grey-2); font-weight:300; }
.nm-mint{ color:var(--nm-mint); }

/* oversized editorial numerals */
.nm-numeral{
  font-family:var(--nm-serif);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.05em;
  font-size:clamp(4.5rem,13vw,13rem);
  color:transparent;
  -webkit-text-stroke:1px var(--nm-line);
}
.nm-numeral-solid{ color:var(--nm-mint); -webkit-text-stroke:0; }

/* vertical text */
.nm-vertical{
  writing-mode:vertical-rl;
  text-orientation:mixed;
}

/* ---------- shell ---------- */
.nm-wrap{ max-width:var(--nm-max); margin-inline:auto; padding-inline:var(--nm-gut); }
.nm-rule{ height:1px; background:var(--nm-line); border:0; }

/* ---------- links / buttons ---------- */
.nm-btn{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:1.06rem 2.1rem;
  font-family:var(--nm-sans);
  font-size:.79rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  border:1px solid var(--nm-mint);
  color:var(--nm-black); background:var(--nm-mint);
  position:relative; overflow:hidden;
  transition:color .5s var(--nm-ease), background .5s var(--nm-ease);
}
.nm-btn span{ position:relative; z-index:2; }
.nm-btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--nm-black);
  transform:translateY(101%);
  transition:transform .55s var(--nm-ease);
}
.nm-btn:hover{ color:var(--nm-mint); }
.nm-btn:hover::before{ transform:translateY(0); }

.nm-btn-ghost{
  background:transparent; color:var(--nm-bone);
  border:1px solid var(--nm-line);
}
.nm-btn-ghost::before{ background:var(--nm-bone); }
.nm-btn-ghost:hover{ color:var(--nm-black); border-color:var(--nm-bone); }

/* underline-on-hover text link */
.nm-link{
  position:relative; display:inline-block;
  color:var(--nm-bone); text-decoration:none;
}
.nm-link::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:100%; height:1px; background:var(--nm-mint);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--nm-ease);
}
.nm-link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- nav ---------- */
.nm-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .5s var(--nm-ease), border-color .5s var(--nm-ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nm-nav.is-stuck{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--nm-line-soft);
}
.nm-navlink{
  font-size:.76rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--nm-grey-2);
  text-decoration:none; transition:color .35s var(--nm-ease);
  position:relative;
}
.nm-navlink:hover,.nm-navlink[aria-current="page"]{ color:var(--nm-bone); }
.nm-navlink[aria-current="page"]::before{
  content:""; position:absolute; left:-.7rem; top:50%;
  width:4px; height:4px; margin-top:-2px; border-radius:50%;
  background:var(--nm-mint);
}

/* mobile drawer */
.nm-drawer{
  position:fixed; inset:0; z-index:950;
  background:var(--nm-black);
  transform:translateY(-100%);
  transition:transform .72s var(--nm-ease);
  overflow-y:auto;
}
.nm-drawer.is-open{ transform:translateY(0); }
.nm-drawer a{
  font-family:var(--nm-serif); font-weight:700;
  font-size:clamp(2rem,8vw,3.4rem); line-height:1;
  letter-spacing:-.03em; color:var(--nm-bone); text-decoration:none;
  transition:color .35s var(--nm-ease);
}
.nm-drawer a:hover{ color:var(--nm-mint); }

.nm-burger span{
  display:block; width:26px; height:1.5px; background:var(--nm-bone);
  transition:transform .45s var(--nm-ease), opacity .3s;
}
.nm-burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nm-burger.is-open span:nth-child(2){ opacity:0; }
.nm-burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- reveal ---------- */
.nm-rise{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--nm-ease), transform 1s var(--nm-ease); }
.nm-rise.in{ opacity:1; transform:none; }
.nm-rise[data-d="1"]{ transition-delay:.1s } .nm-rise[data-d="2"]{ transition-delay:.2s }
.nm-rise[data-d="3"]{ transition-delay:.3s } .nm-rise[data-d="4"]{ transition-delay:.4s }
.nm-rise[data-d="5"]{ transition-delay:.5s } .nm-rise[data-d="6"]{ transition-delay:.6s }

/* masked line reveal for display type */
.nm-mask{ overflow:hidden; display:block; }
.nm-mask > *{
  display:block;
  transform:translateY(102%);
  transition:transform 1.15s var(--nm-ease);
}
.in .nm-mask > *, .nm-mask.in > *{ transform:translateY(0); }
.nm-mask[data-d="1"] > *{ transition-delay:.09s } .nm-mask[data-d="2"] > *{ transition-delay:.18s }
.nm-mask[data-d="3"] > *{ transition-delay:.27s } .nm-mask[data-d="4"] > *{ transition-delay:.36s }

/* image reveal — shutter wipe */
.nm-shutter{ position:relative; overflow:hidden; }
.nm-shutter::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:var(--nm-black);
  transform:scaleY(1); transform-origin:top;
  transition:transform 1.25s var(--nm-ease);
}
.nm-shutter.in::after{ transform:scaleY(0); transform-origin:bottom; }
.nm-shutter img{ transition:transform 1.4s var(--nm-ease), filter 1.4s var(--nm-ease); }

/* ---------- media ---------- */
.nm-img{ width:100%; height:100%; object-fit:cover; display:block; }
.nm-duo{ filter:grayscale(1) contrast(1.08); transition:filter .9s var(--nm-ease), transform 1.4s var(--nm-ease); }
.group:hover .nm-duo{ filter:grayscale(0) contrast(1); }
.nm-zoom{ overflow:hidden; }
.nm-zoom img{ transition:transform 1.5s var(--nm-ease); }
.group:hover .nm-zoom img{ transform:scale(1.055); }

/* ---------- glass ---------- */
.nm-glass{
  background:rgba(241,240,240,.045);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  border:1px solid var(--nm-line-soft);
}

/* ---------- marquee ---------- */
.nm-marquee{ display:flex; width:max-content; animation:nm-slide 46s linear infinite; }
.nm-marquee:hover{ animation-play-state:paused; }
@keyframes nm-slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.nm-marquee-item{
  font-family:var(--nm-serif); font-weight:700;
  font-size:clamp(1.6rem,3.6vw,3.4rem);
  letter-spacing:-.02em; line-height:1;
  padding-inline:1.6rem; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px var(--nm-line);
}
.nm-marquee-item.solid{ color:var(--nm-bone); -webkit-text-stroke:0; }
.nm-marquee-item.mint{ color:var(--nm-mint); -webkit-text-stroke:0; }

/* ---------- service panel ---------- */
.nm-panel{
  position:relative; display:block;
  border-top:1px solid var(--nm-line);
  padding-block:clamp(2rem,4.2vw,3.5rem);
  text-decoration:none; color:inherit;
  transition:padding-inline .7s var(--nm-ease);
  overflow:hidden;
}
.nm-panel:last-of-type{ border-bottom:1px solid var(--nm-line); }
.nm-panel::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(94deg,rgba(151,212,192,.11),rgba(151,212,192,0) 62%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--nm-ease);
}
.nm-panel:hover::before{ transform:scaleX(1); }
.nm-panel > *{ position:relative; z-index:1; }
@media(min-width:1024px){ .nm-panel:hover{ padding-inline:2.2rem; } }
.nm-panel .nm-panel-title{ transition:color .55s var(--nm-ease), transform .7s var(--nm-ease); }
.nm-panel:hover .nm-panel-title{ color:var(--nm-mint); }
.nm-panel-thumb{
  position:absolute; right:5%; top:50%; z-index:2;
  width:min(19vw,270px); aspect-ratio:4/5;
  transform:translate(0,-46%) scale(.9) rotate(-3deg);
  opacity:0; pointer-events:none;
  transition:opacity .6s var(--nm-ease), transform .8s var(--nm-ease);
}
@media(min-width:1024px){
  .nm-panel:hover .nm-panel-thumb{ opacity:1; transform:translate(0,-50%) scale(1) rotate(-2deg); }
}
.nm-arrow{ transition:transform .6s var(--nm-ease); }
.nm-panel:hover .nm-arrow, .group:hover .nm-arrow{ transform:translate(7px,-7px); }

/* ---------- cursor ---------- */
.nm-cursor{
  position:fixed; top:0; left:0; z-index:9998;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--nm-mint-line); border-radius:50%;
  pointer-events:none; mix-blend-mode:difference;
  transition:width .45s var(--nm-ease), height .45s var(--nm-ease),
             margin .45s var(--nm-ease), background .45s var(--nm-ease),
             opacity .3s, border-color .45s;
  will-change:transform;
}
.nm-cursor.is-lg{
  width:88px; height:88px; margin:-44px 0 0 -44px;
  background:rgba(151,212,192,.14); border-color:var(--nm-mint);
}
@media(hover:none),(max-width:1023px){ .nm-cursor{ display:none; } }

/* ---------- forms ---------- */
.nm-field{
  width:100%; background:transparent;
  border:0; border-bottom:1px solid var(--nm-line);
  padding:.95rem 0; color:var(--nm-bone);
  font-family:var(--nm-sans); font-size:1.02rem; font-weight:300;
  transition:border-color .45s var(--nm-ease);
}
.nm-field::placeholder{ color:var(--nm-grey); }
.nm-field:focus{ outline:none; border-bottom-color:var(--nm-mint); }
.nm-field:focus-visible{ outline:none; }
select.nm-field{ appearance:none; cursor:pointer; }
select.nm-field option{ background:var(--nm-char); color:var(--nm-bone); }
textarea.nm-field{ resize:vertical; min-height:112px; }
.nm-label{
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--nm-grey); margin-bottom:.55rem;
}
/* choice chips */
.nm-choice{ position:relative; }
.nm-choice input{ position:absolute; opacity:0; width:0; height:0; }
.nm-choice span{
  display:block; padding:.92rem 1.15rem; cursor:pointer;
  border:1px solid var(--nm-line); color:var(--nm-grey-2);
  font-size:.86rem; font-weight:400; text-align:left;
  transition:all .4s var(--nm-ease);
}
.nm-choice span:hover{ border-color:var(--nm-grey); color:var(--nm-bone); }
.nm-choice input:checked + span{
  border-color:var(--nm-mint); color:var(--nm-black);
  background:var(--nm-mint); font-weight:500;
}
.nm-choice input:focus-visible + span{ outline:2px solid var(--nm-mint); outline-offset:3px; }

/* ---------- accordion ---------- */
.nm-acc summary{ cursor:pointer; list-style:none; }
.nm-acc summary::-webkit-details-marker{ display:none; }
.nm-acc .nm-acc-ico{ transition:transform .5s var(--nm-ease); }
.nm-acc[open] .nm-acc-ico{ transform:rotate(45deg); }
.nm-acc[open] summary .nm-acc-q{ color:var(--nm-mint); }

/* ---------- misc ---------- */
.nm-ticker-line{
  border-block:1px solid var(--nm-line);
  padding-block:1.05rem; overflow:hidden;
}
.nm-a11y{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.nm-a11y:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  padding:.8rem 1.2rem; background:var(--nm-mint);
  color:var(--nm-black); z-index:9999; font-weight:600;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .nm-rise{ opacity:1; transform:none; }
  .nm-mask > *{ transform:none; }
  .nm-shutter::after{ transform:scaleY(0); }
}