/* ============================================================
   HUMOTIX — Layout: navigation & footer
   ============================================================ */

/* — Navigation —
   Solid by default: every page except the homepage opens on a LIGHT hero, and
   a transparent bar there would leave the logo invisible. */
header.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);transition:.45s var(--ease);
  background:var(--bg)}

/* — Over the photograph (homepage only, see .over-hero on <header>) —
   Floats with no bar so the image runs full-bleed to the top edge, in porcelain
   text with a lamplight CTA; once scrolled into the light sections it condenses
   into the shared frosted glass below and the dark text returns. */
.nav.over-hero{background:transparent}
.nav.over-hero .navlinks a{color:rgba(242,239,234,.72)}
.nav.over-hero .navlinks a:hover,
.nav.over-hero .navlinks a.active{color:#F2EFEA}
.nav.over-hero .brand{color:#F2EFEA}
.nav.over-hero .mark .u-l{background:#F2EFEA}
.nav.over-hero .mark .u-r{background:linear-gradient(rgba(242,239,234,.5) 0 18%,transparent 18% 26%,rgba(242,239,234,.5) 26% 44%,transparent 44% 52%,rgba(242,239,234,.5) 52% 70%,transparent 70% 78%,rgba(242,239,234,.5) 78% 100%)}
/* the bridge bar is --ink (dark) by default — over the night photo it would
   vanish, so flip it porcelain with the other bars. The node stays brass but
   goes candle-cream here so its warm spark reads against the dark. */
.nav.over-hero .mark .br{background:#F2EFEA}
.nav.over-hero .mark .nd{background:#EFDDBE;box-shadow:0 0 10px rgba(245,227,196,.5)}
.nav.over-hero .nav-book{color:#F2EFEA;border-color:rgba(242,239,234,.26)}
.nav.over-hero .nav-book:hover{background:rgba(242,239,234,.10);border-color:rgba(242,239,234,.5)}
/* Solid porcelain, same reasoning as .theme-dark .btn-primary: transparent here
   made "Hire ASORA" and the ghost "Book a call" beside it near-identical. */
.nav.over-hero .nav-cta{background:#F2EFEA;color:#1A1611;border-color:#F2EFEA}
.nav.over-hero .nav-cta:hover{background:#fff;border-color:#fff}
.nav.over-hero .burger span{background:#F2EFEA}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gutter);max-width:var(--maxw);margin:0 auto}
.nav-in .brand{flex:none}
/* Real frosted glass, two grounds. The tint is deliberately LOW-opacity so the
   blur does the work and the bar takes the colour of whatever is behind it —
   the old .72 light tint was so opaque it read as a solid white bar regardless
   of the content under it. Over the dark hero it's smoked glass; over the light
   page it's frosted alabaster. */
.nav.scrolled:not(.over-hero){background:rgba(246,244,239,.55);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav.over-hero.scrolled{background:rgba(12,10,8,.34);backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid rgba(242,239,234,.10)}
.navlinks{display:flex;gap:30px;align-items:center;flex-wrap:nowrap}
.navlinks a{font-size:14px;color:var(--ink-soft);font-weight:500;transition:.25s;position:relative;
  white-space:nowrap}
.navlinks a:hover{color:var(--ink)}
.navlinks a.active{color:var(--ink)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--ember);border-radius:2px}
.nav-cta{font-size:13.5px;font-weight:600;color:var(--bg);background:var(--ink);
  border:1px solid var(--ink);
  padding:11px 22px;border-radius:var(--r-pill);transition:.3s var(--ease);white-space:nowrap}
.nav-cta:hover{background:var(--ink);transform:translateY(-1px)}
/* booking beside the primary CTA as a ghost pill — a deliberate paired CTA,
   matching Hire ASORA's geometry so the two read as one designed unit */
.nav-book{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  padding:10px 21px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:transparent;transition:.3s var(--ease)}
.nav-book:hover{border-color:var(--ink);background:rgba(20,15,12,.04);transform:translateY(-1px)}

/* — Nav right-hand cluster — */
.nav-status{display:flex;align-items:center;gap:18px;flex:none}

/* — Mobile menu (rebuilt: proper toggle + panel) — */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;
  background:none;border:none;z-index:calc(var(--z-nav) + 2)}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;
  transition:.35s var(--ease);transform-origin:center}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:var(--z-nav);background:rgba(246,244,239,.92);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 32px;
  opacity:0;visibility:hidden;transition:.4s var(--ease);
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  padding:15px 2px;border-bottom:1px solid var(--line);transition:.25s;
  opacity:0;transform:translateY(12px)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu a:hover{color:var(--ember-soft)}
/* the CTA matches the header's ink pill — readable ivory text, no link styles
   bleeding in (the menu-link colour/border made the green pill unreadable) */
.mobile-menu .btn{margin-top:26px;align-self:stretch;justify-content:center;text-align:center;
  border-bottom:none;background:var(--ink);color:#F6F4EF;font-size:15px;padding:15px 24px}
.mobile-menu .btn:hover{background:var(--ink);color:#F6F4EF}

/* — Phone-only sticky action bar — keeps the conversion path one tap away — */
.mobile-cta{display:none}
@media(max-width:760px){
  .mobile-cta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(246,244,239,0),rgba(246,244,239,.94) 32%);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}
  .mobile-cta .mcta{pointer-events:auto}
  .mcta{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;
    border-radius:var(--r-pill);font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;
    border:1px solid transparent;transition:.25s var(--ease)}
  .mcta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
  .mcta-chat{background:rgba(255,255,255,.92);border-color:var(--line-2);color:var(--ink)}
  .mcta-chat:active{background:rgba(40,30,32,.95)}
  .mcta-book{background:var(--ink);color:#F6F4EF;box-shadow:0 10px 30px -14px rgba(26,23,19,.5)}
  .mcta-book:active{background:var(--ink)}
  /* keep the footer / last section clear of the bar, and hide it while the menu is open */
  body{padding-bottom:66px}
  body.menu-open .mobile-cta{display:none}
}

/* ============================================================
   FOOTER — the closing brand moment.
   The page ends on the NAME, not on a list of links: the wordmark is set
   enormous, ghosted, and bled off the bottom edge, with a floating pill
   offering the one thing we actually want them to do. Everything else
   (links, industries, legal) layers above the watermark.
   ============================================================ */
/* Bottom padding is the only room the wordmark needs — it sits behind the
   content, so the footer stays the height of its links plus that clearance. */
footer{border-top:1px solid var(--line);padding:72px 0 150px;position:relative;
  z-index:var(--z-base);overflow:hidden;isolation:isolate}

/* ---------- The closing watermark ----------
   Sized in vw so it always spans the page and always breaks the bottom edge —
   that crop is what makes it read as a printed cover rather than big text. Ink
   at very low alpha: texture in the paper, never a headline. Absolutely
   positioned, so it adds no height of its own. */
.foot-wordmark{position:absolute;left:50%;bottom:-.30em;transform:translateX(-50%);
  z-index:-1;pointer-events:none;user-select:none;white-space:nowrap;
  font-family:var(--font-sans);font-weight:700;letter-spacing:-.055em;line-height:.8;
  font-size:clamp(96px,20.5vw,320px);color:var(--ink);opacity:.055;
  -webkit-mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.3) 100%);
          mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.3) 100%)}

@media(max-width:560px){
  /* Less bottom clearance on phone — the wordmark is smaller in absolute terms,
     so it needs less room to crop cleanly. Scaled off character count (26vw)
     rather than the desktop ratio, which would leave it tiny on a narrow page. */
  footer{padding:48px 0 92px}
  /* 23vw, not 26: "HUMOTIX" is ~4.2em wide at this tracking, so 26vw made the
     word 109% of the viewport and clipped the H and X off both edges. 23vw
     lands it at ~97% — full word, still edge to edge. */
  .foot-wordmark{bottom:-.26em;font-size:23vw;letter-spacing:-.045em;opacity:.075}
}
/* Brand left, the line dead centre. A 1fr/auto/1fr grid with only two children
   puts the brand in column 1 and the tagline in column 2 — so it centres against
   the PAGE, not against the leftover space beside the logo.
   (The three section links that used to sit here are gone — they duplicated the
   primary nav a scroll away. The industry row below is the only footer
   navigation that earns its place: crawlable, and how organic visitors
   self-select.) */
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.foot .brand{font-size:17px;justify-self:start}
/* The brand line, not a caption: serif italic, set up near heading scale so it
   reads as something the company believes rather than a strapline in the
   basement. */
.foot > p{justify-self:center;text-align:center;
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.3vw,28px);line-height:1.2;letter-spacing:-.01em;
  color:var(--ink)}
/* The footer's stacked mobile layout lives in responsive.css (at 760px, where
   the three-column row actually starts to crowd) — kept in one place so the two
   files can't fight over it. */
/* Industry links — crawlable internal links so search engines find the
   per-trade landing pages, and organic visitors can self-select. Centred,
   filling the whole row. */
.foot-inds{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px}
.foot-inds a{font-size:13px;color:var(--ink-soft);font-weight:500}
.foot-inds a:hover{color:var(--ink)}
.foot-base{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.foot-base p{font-size:11px;color:var(--ink-faint);font-family:var(--font-mono);letter-spacing:.04em}
.foot-base .fb-copy,.foot-base .fb-privacy{white-space:nowrap}
/* Phone: drop "Privacy Policy" cleanly onto its own line (no mid-phrase break) */
@media(max-width:560px){
  .foot-base .fb-sep{display:none}
  .foot-base .fb-privacy{display:block;margin-top:8px}
}