/* ===========================================================================
   SCALE MINDS / SPATIAL DESIGN SYSTEM v3.2.2  ·  02 · BASE  ·  03 · UTILITIES
   Front end only (the editor loads editor-base.css instead, which scopes the
   reset to block previews so it cannot touch the editor's own UI).
   =========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  scroll-padding-top:92px; background:var(--canvas);
}
body{
  font-family:var(--f-sans); font-size:15px; line-height:1.6;
  letter-spacing:-.011em; color:var(--fg-1); background:var(--canvas);
  overflow-x:hidden; position:relative; min-height:100%;
}

/* -- The ambient light field. This is the "room" the surfaces float in.
      Fixed, so panels genuinely pass over changing light as you scroll. -- */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 78% -10%, rgba(18,123,66,.10), transparent 62%),
    radial-gradient(900px 700px at 8% 12%,  rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1000px 900px at 50% 108%, rgba(11,95,50,.07), transparent 60%),
    linear-gradient(180deg,#F5F7F6 0%, var(--canvas) 38%, var(--canvas-2) 100%);
}
/* Fine grain: kills banding on the gradients and stops the glass reading plastic */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

img,svg{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--green); color:#fff; }

em{ font-style:normal; font-weight:600; color:var(--green); }
em.neg{ color:var(--red); }
em.ink{ color:var(--fg-1); }

/* Focus ring follows each element's own radius (a forced radius here would
   visibly re-shape pill buttons and inputs on keyboard focus). */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}
.vis-hidden,
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#fff; padding:12px 18px;
  font-weight:600; font-size:13px; border-radius:var(--r-sm);
}
.skip:focus{ left:16px; top:16px; }

/* -- WordPress: logged-in admin bar. The sticky nav sits below it and anchor
      targets clear both. Visitors never see this. -- */
html:has(body.admin-bar){ scroll-padding-top:124px; }
.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){
  html:has(body.admin-bar){ scroll-padding-top:138px; }
  .admin-bar .nav{ top:46px; }
}
@media screen and (max-width:600px){
  html:has(body.admin-bar){ scroll-padding-top:92px; }
  .admin-bar .nav{ top:0; }
}