/* NYAS hero chassis
   ------------------------------------------------------------------
   Written after auditing the Ten Arches round, where every hero was an
   absolutely positioned desktop composition. At 390px that put the logo
   marquee on top of the body copy in three of ten, clipped a heading in
   another, and left one with no call to action on the first screen.

   The rule here: CONTENT IS ALWAYS IN NORMAL FLOW. Decoration is the only
   thing allowed to be absolutely positioned, it is aria-hidden, and it
   never carries meaning. That single constraint makes the overlap class of
   bug impossible rather than merely fixed.
   ------------------------------------------------------------------ */

:root{
  /* brand */
  --orange:#FF5303;
  --red:#EC0A01;
  --red-on-light:#B8170C;   /* #EC0A01 is only 4.19:1 on paper, this is 6.1:1 */
  --mint:#46FCAB;
  --grad:linear-gradient(135deg,#FF5303 0%,#F32B02 55%,#EC0A01 100%);

  /* surfaces: the kit's grounds are DARK GREEN-BLACK, not neutral black.
     nyas.co.uk/kit.html gives #08160F / #0D2419 / #06110C / #141414. */
  --ink:#08160F;
  --ink-2:#0D2419;
  --ink-3:#06110C;
  --ground:linear-gradient(155deg,#0d2419,#06110c);   /* kit dark-green ground */
  --paper:#FFFFFF;
  --paper-2:#F7F5F3;
  --hair:#E8E4E0;

  /* text: the kit's greys on dark are #EAEAEA and #9A9A9A. Both verified
     against the green-black ground below. */
  --text:#4A4744;
  --text-dim:#6F6A65;        /* #8A8580 failed 4.5:1 on paper-2 at body size */
  --on-dark:#EAEAEA;
  --on-dark-dim:#9A9A9A;

  /* type */
  /* TWO typefaces, per the kit. The mono I had added was never in it. */
  --f-head:'Baloo 2',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;

  /* FIVE sizes. The previous eight, with 32 font-size declarations and 14
     letter-spacings, is what made it look like three different websites. */
  --t-label:0.9375rem;                                  /* 15px */
  --t-body:1.125rem;                                    /* 18px */
  --t-lead:clamp(1.2rem, 1.05rem + 0.75vw, 1.7rem);
  --t-h2:clamp(1.9rem, 1.35rem + 2.7vw, 3.6rem);
  --t-h1:clamp(2.7rem, 1.5rem + 6.6vw, 8rem);           /* display. big on purpose */

  /* two tracking values, not fourteen */
  --tr-display:-.038em;
  --tr-label:.18em;

  /* rhythm */
  --gut:clamp(20px, 5vw, 56px);
  --stack:clamp(28px, 4vw, 48px);
  --tap:44px;                /* WCAG 2.5.5 target size, and a real thumb */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--paper-2);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}

/* inherit, or the browser paints every link default blue */
a{color:inherit;text-decoration:none}
a:not([class]){text-decoration:underline;text-underline-offset:.2em}

/* ---------- focus ----------------------------------------------------
   The last round had outline:none and zero :focus rules across sixteen
   interactive elements. Tabbing through was completely invisible.       */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--mint);
  outline-offset:3px;
  border-radius:4px;
}
.on-paper :where(a,button):focus-visible,
.on-light :where(a,button):focus-visible{outline-color:var(--red-on-light)}

/* a real skip link, not a decorative one */
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:999;
  background:var(--mint);color:#062015;font-weight:600;
  padding:.85em 1.3em;border-radius:999px;text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{top:12px}

/* ---------- buttons --------------------------------------------------
   min-height is the point. Every target last time was under 44px.      */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;
  padding:.85em 1.9em;
  border:0;border-radius:999px;cursor:pointer;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-body);
  line-height:1.2;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--mint);color:#062015;box-shadow:0 6px 20px rgba(70,252,171,.22)}
/* the orange gradient reads white at only 3.24:1 on its light end, so it is a
   brand surface, not a button surface. Mint on ink is 14.87:1 and is already
   the colour of the live site's Book a call. */
.btn--brand{background:var(--grad);color:#fff;font-size:var(--t-body);font-weight:700}
.btn--mint{background:var(--mint);color:#062015}
.btn--ink{background:var(--ink);color:#fff}
.btn--quiet{
  background:transparent;color:inherit;
  box-shadow:inset 0 0 0 1.5px currentColor;
}
.btn--quiet:hover{background:rgba(255,255,255,.08)}

/* nav and inline links also need a real target */
.navlink{
  display:inline-flex;align-items:center;
  min-height:var(--tap);padding:0 .55em;
  font-size:var(--t-label);font-weight:500;
  color:var(--on-dark);
}
.navlink:hover{color:#fff}
.on-paper .navlink,.on-light .navlink{color:var(--text)}
.on-paper .navlink:hover,.on-light .navlink:hover{color:var(--ink)}

/* ---------- the mark ---------------------------------------------------
   HARD RULE: the archway is never stretched. True ratio 2329.19/1525.98 =
   1.5264. Set ONE dimension, let aspect-ratio hold the other, and use the real
   SVG artwork rather than masking a PNG, which is how it got distorted before. */
.mark{
  flex:none;display:block;
  height:26px;width:auto;aspect-ratio:2329.19 / 1525.98;
  background:url("../img/nyas-mark-gradient.svg") center/contain no-repeat;
}
.mark--w{background-image:url("../img/nyas-mark-white.svg")}

/* the lockup: archway plus wordmark, already aligned in the artwork.
   Never hand-build this pairing. Ratio 5983/2028 = 2.9502. */
.lockup{
  flex:none;display:block;min-height:var(--tap);background-position:left center;
  height:32px;width:auto;aspect-ratio:5983 / 2028;
  background:url("../img/nyas-lockup-light.svg") center/contain no-repeat;
}

/* ---------- hero shell -----------------------------------------------
   Flow, not absolute. The decoration layer is the ONLY absolute child.  */
.hero{
  position:relative;
  isolation:isolate;
  overflow:clip;
  background-color:var(--ink);
  color:#fff;
  display:flex;
  flex-direction:column;
  min-height:min(760px, 100svh);
}
.hero__deco{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero > :not(.hero__deco){position:relative;z-index:1}

.hero__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--gut);
}
.hero__bar nav{display:none;gap:4px}
@media (min-width:700px){ .hero__bar nav{display:flex} }

.hero__body{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--stack);
  padding:clamp(24px,5vw,56px) var(--gut);
}

/* the eyebrow was 11px mono. 13px minimum, and it is a real label now. */
.eyebrow{
  display:inline-block;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--mint);margin:0 0 1em;
}
/* mint is for the dark ground only. On paper it is unreadable, so the
   equivalent there is the deep red. */
.on-light .eyebrow,.on-paper .eyebrow{color:var(--red-on-light);letter-spacing:.16em}
.eyebrow--mint{color:var(--mint)}

.hero .heroline{
  font-family:var(--f-head);font-weight:800;
  font-size:var(--t-h1);line-height:.92;letter-spacing:var(--tr-display);
  margin:0;
  text-wrap:balance;
}
/* the headline must never reach the archway: mint on orange is 2.43:1 */
@media (min-width:760px){
  .hero h1,.hero .heroline{max-width:19ch}
  .hero__body{max-width:66%}
}
@media (min-width:1280px){
  .hero h1,.hero .heroline{max-width:17ch}
}
.hero .heroline .m,
.hero h1 .m{color:var(--mint)}
/* kept for the rare case a gradient word is wanted, but MINT is the kit's
   signature highlight and should be the default. */
.hero .heroline .o,.hero h1 .o{
  color:var(--mint);
  padding-right:.02em;
}

.lead{
  font-size:var(--t-lead);line-height:1.4;
  color:var(--on-dark);
  max-width:30ch;
  margin:0;
}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* ---------- proof strip ---------------------------------------------- */
.proof{
  display:flex;align-items:center;gap:clamp(20px,4vw,44px);
  flex-wrap:wrap;
  padding:clamp(16px,2.5vw,22px) var(--gut);
  border-top:1px solid rgba(255,255,255,.1);
}
.proof__label{
  font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-dim);margin:0;
  flex:none;
}
.proof__logos{display:flex;align-items:center;gap:clamp(20px,4vw,40px);flex-wrap:wrap}
.proof__logos img{height:22px;width:auto;opacity:.8}
@media (min-width:700px){ .proof__logos img{height:26px} }

/* marquee variant: only used where there is room, and it stops on request */
.marquee{overflow:hidden;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;gap:clamp(20px,4vw,40px);animation:marquee 34s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- next section ---------------------------------------------- */
.after{background:var(--paper);color:var(--text);padding:clamp(32px,5vw,64px) var(--gut)}
.after h2{font-family:var(--f-head);font-weight:700;font-size:var(--t-h2);color:var(--ink);margin:0 0 .3em;letter-spacing:-.02em}
.after p{margin:0;max-width:60ch}

/* ---------- utilities -------------------------------------------------- */
.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}