/* ============================================================
   Site chrome: the one header and footer used on every page.

   Loaded AFTER each page's own <style> block so it wins on equal
   specificity. The portfolio page has its own older nav and footer
   rules, so selectors here are deliberately one step more specific
   (nav.site-header rather than nav) to override them without
   needing !important everywhere.

   Self-contained on purpose: it declares its own custom properties
   rather than borrowing --green / --accent, because the two pages
   name their variables differently and a shared file cannot depend
   on either.
   ============================================================ */

:root{
  --sc-bg:#16161A;
  --sc-accent:#00FFF0;
  --sc-accent-dim:#8EC8CC;
  --sc-text:#E8E8E8;
  --sc-muted:#888888;
  --sc-border:rgba(255,255,255,.07);
  --sc-panel:#25252C;
  --sc-h:68px;
  /* Height reserved below the header for the nested section indicator. */
  --sc-sub-h:48px;
}

/* Anchor targets must clear the fixed header, otherwise jumping to a
   section parks its heading underneath the bar. */
html{scroll-padding-top:calc(var(--sc-h) + 10px)}

/* ---------------- header ---------------- */

nav.site-header{
  position:fixed;top:0;left:0;right:0;z-index:600;
  background:rgba(22,22,26,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--sc-border);
  padding:0 5%;
  /* Always visible. The portfolio used to hide this off-screen and
     slide it in on scroll, which left anyone landing at the top of
     the page with no way to reach the rest of the site. */
  transform:none!important;
}

nav.site-header .nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;height:var(--sc-h);
}

nav.site-header .nav-logo{display:block;flex:0 0 auto;line-height:0}
nav.site-header .nav-logo img{height:30px;width:auto;display:block}

/* The site-level links. Deliberately a different class from the
   portfolio's .nav-links, which now holds that page's section links in
   the subheader below. The top bar must be the same everywhere. */
nav.site-header .site-nav{
  display:flex;align-items:center;gap:1.75rem;
  list-style:none;margin:0 0 0 auto;padding:0;
}
nav.site-header .site-nav a{
  color:var(--sc-muted);text-decoration:none;
  font-size:.88rem;font-weight:500;white-space:nowrap;
  transition:color .2s;
}
nav.site-header .site-nav a:hover,
nav.site-header .site-nav a:focus-visible{color:var(--sc-accent)}
/* Marks the page you are currently on, so the header tells you where
   you are as well as where you can go. */
nav.site-header .site-nav a[aria-current="page"]{
  color:var(--sc-text);font-weight:700;
}

nav.site-header .nav-cta{
  flex:0 0 auto;
  background:var(--sc-accent);color:#16161A;
  border:none;padding:.5rem 1.2rem;border-radius:8px;
  font-size:.85rem;font-weight:700;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  transition:filter .2s,box-shadow .2s;
}
nav.site-header .nav-cta:hover{
  filter:brightness(1.08);
  box-shadow:0 4px 16px rgba(0,255,240,.3);
}

nav.site-header .hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;background:none;border:none;padding:4px;
}
nav.site-header .hamburger span{
  display:block;width:24px;height:2px;
  background:var(--sc-text);border-radius:2px;transition:.3s;
}

/* Push page content clear of the fixed header. The portfolio's hero
   was laid out against a header that was not there on load. */
body.has-site-header{padding-top:var(--sc-h)}

@media (max-width:900px){
  nav.site-header .site-nav,
  nav.site-header .nav-cta{display:none}
  nav.site-header .hamburger{display:flex}
}

/* ---------------- section indicator ----------------
   Not a second bar. It hangs off the "Portfolio" item in the header,
   inside the header's own background, so it reads as nested under it.
   The header simply grows taller on pages that have one. */

body.has-sec-nav nav.site-header{padding-bottom:var(--sc-sub-h)}
body.has-sec-nav nav.site-header .nav-inner{height:var(--sc-h)}
body.has-site-header.has-sec-nav{padding-top:calc(var(--sc-h) + var(--sc-sub-h))}

nav.site-header .site-nav li.has-sec-nav{position:relative}

/* Centred on the "Portfolio" link above it, so the label, both arrows
   and the nav item share one vertical axis. */
.sec-nav{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:1px;line-height:1;padding-top:4px;
}
.sec-arrow{
  background:none;border:0;padding:0;margin:0;
  width:30px;height:12px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#7d7d7d;
  transition:color .2s,opacity .2s,transform .2s;
}
.sec-arrow svg{width:12px;height:7px;display:block}
.sec-arrow:hover:not(:disabled){color:var(--sc-accent)}
.sec-arrow.up:hover:not(:disabled){transform:translateY(-1px)}
.sec-arrow.down:hover:not(:disabled){transform:translateY(1px)}
.sec-arrow:disabled{opacity:.22;cursor:default}

/* Fixed height so nothing reflows as words of different lengths swap in,
   and overflow hidden so the outgoing word is clipped rather than
   bleeding past the arrows. */
.sec-word{
  position:relative;overflow:hidden;
  height:19px;min-width:12ch;text-align:center;
}
.sec-word span{
  position:absolute;left:0;right:0;top:0;
  display:block;white-space:nowrap;
  font-size:.82rem;font-weight:700;letter-spacing:.01em;
  color:var(--sc-accent);
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .28s ease;
}
.sec-word span.enter-from-below{transform:translateY(100%);opacity:0}
.sec-word span.enter-from-above{transform:translateY(-100%);opacity:0}
.sec-word span.leave-up{transform:translateY(-100%);opacity:0}
.sec-word span.leave-down{transform:translateY(100%);opacity:0}

/* Below 900px the site nav collapses into the drawer, taking the
   indicator with it, so the reserved space has to go too. */
@media (max-width:900px){
  body.has-sec-nav nav.site-header{padding-bottom:0}
  body.has-site-header.has-sec-nav{padding-top:var(--sc-h)}
}

@media (prefers-reduced-motion:reduce){
  .sec-word span{transition:opacity .2s ease}
  .sec-word span.enter-from-below,.sec-word span.enter-from-above,
  .sec-word span.leave-up,.sec-word span.leave-down{transform:none}
}

/* ---------------- mobile drawer ---------------- */

.mobile-menu{
  position:fixed;top:var(--sc-h);left:0;right:0;z-index:590;
  background:var(--sc-bg);
  border-bottom:1px solid var(--sc-border);
  padding:.5rem 5% 1.25rem;
  display:none;flex-direction:column;
  max-height:calc(100vh - var(--sc-h));overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu a,
.mobile-menu .mob-parent{
  color:var(--sc-text);text-decoration:none;text-align:left;
  font-size:1rem;font-weight:500;
  padding:.85rem .25rem;
  border-bottom:1px solid var(--sc-border);
  background:none;border-left:0;border-right:0;border-top:0;
  width:100%;cursor:pointer;font-family:inherit;
}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a.mob-cta{
  margin-top:1rem;border:0;
  background:var(--sc-accent);color:#16161A;
  font-weight:700;text-align:center;border-radius:10px;
}
@media (min-width:901px){
  .mobile-menu{display:none!important}
}

/* ---------------- footer ---------------- */

footer.site-footer{
  background:var(--sc-bg);
  border-top:1px solid var(--sc-border);
  padding:3rem 5% 2.5rem;
  text-align:center;
}
footer.site-footer .site-footer-inner{max-width:1200px;margin:0 auto}

footer.site-footer .site-footer-logo{display:inline-block;line-height:0}
footer.site-footer .site-footer-logo img{
  height:26px;width:auto;display:block;margin:0 auto;
}

footer.site-footer .site-footer-nav{
  /* The portfolio page styles every bare <nav> as the fixed site bar and
     translates it off-screen. These are <nav> elements too, so each of
     those properties has to be put back or the footer links vanish. */
  position:static;transform:none;
  top:auto;left:auto;right:auto;
  background:none;border:0;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  max-width:none;height:auto;

  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.75rem;
  margin:1.6rem 0 0;
}
footer.site-footer .site-footer-nav a{
  color:var(--sc-text);text-decoration:none;
  font-size:.9rem;font-weight:500;
  transition:color .2s;
}
footer.site-footer .site-footer-nav.secondary{margin-top:.9rem}
footer.site-footer .site-footer-nav.secondary a{
  color:var(--sc-muted);font-size:.84rem;font-weight:400;
}
footer.site-footer .site-footer-nav a:hover,
footer.site-footer .site-footer-nav a:focus-visible{color:var(--sc-accent)}

footer.site-footer .site-footer-copy{
  margin-top:1.9rem;
  font-size:.8rem;color:#6b6b6b;
}
footer.site-footer .site-footer-privacy{
  display:inline-block;margin-top:.5rem;
  color:var(--sc-muted);font-size:.78rem;text-decoration:none;
  transition:color .2s;
}
footer.site-footer .site-footer-privacy:hover{
  color:var(--sc-accent);text-decoration:underline;
}

@media (max-width:560px){
  footer.site-footer{padding:2.5rem 20px 2rem}
  footer.site-footer .site-footer-nav{gap:.55rem 1.25rem}
}


/* ============================================================
   Shared interaction language

   Both pages had their own idea of how a card or a button reacts:
   the portfolio alone lifted cards by 2px, 3px, 4px and 6px in
   different sections, and the homepage had no hover at all. These
   rules are the single definition, applied to the card and button
   classes on BOTH pages, so the site feels like one thing.

   This file loads last, so it overrides the per-page versions.
   ============================================================ */

:root{
  --sc-lift:-6px;
  --sc-lift-btn:-2px;
  --sc-ease:.25s cubic-bezier(.4,0,.2,1);
  --sc-card-glow:0 16px 48px rgba(0,255,240,.18), 0 4px 16px rgba(22,22,26,.4);
  --sc-btn-glow:0 6px 24px rgba(0,255,240,.35);
}

/* ---- boxes ---- */
.capture,
.thing,
.service-card,.client-card,.campaign-card,.tool-card,
.stat-card,.exp-card,.tcard,.case-study{
  transition:transform var(--sc-ease),
             border-color var(--sc-ease),
             box-shadow var(--sc-ease);
  will-change:transform;
}
.capture:hover,
.thing:hover,
.service-card:hover,.client-card:hover,.campaign-card:hover,.tool-card:hover,
.stat-card:hover,.exp-card:hover,.tcard:hover,.case-study:hover{
  border-color:var(--sc-accent);
  transform:translateY(var(--sc-lift));
  box-shadow:var(--sc-card-glow);
}

/* The signup card holds a form. Lifting it out from under the cursor
   while someone is typing is the one place the effect gets in the way,
   so hold it still once focus is inside it. */
.capture:focus-within{
  transform:none;
  border-color:var(--sc-accent);
  box-shadow:var(--sc-card-glow);
}

/* ---- primary buttons ---- */
.form button,
.btn-primary,.btn-submit,
nav.site-header .nav-cta,
.mobile-menu a.mob-cta{
  transition:filter var(--sc-ease),
             transform var(--sc-ease),
             box-shadow var(--sc-ease),
             background var(--sc-ease);
}
.form button:hover,
.btn-primary:hover,.btn-submit:hover,
nav.site-header .nav-cta:hover,
.mobile-menu a.mob-cta:hover{
  filter:brightness(1.08);
  transform:translateY(var(--sc-lift-btn));
  box-shadow:var(--sc-btn-glow);
}
.form button:active,
.btn-primary:active,.btn-submit:active,
nav.site-header .nav-cta:active{
  transform:translateY(0);
  box-shadow:none;
}

/* ---- outline buttons ---- */
.btn-outline,.load-more-btn{
  transition:border-color var(--sc-ease),color var(--sc-ease),
             background var(--sc-ease),transform var(--sc-ease);
}
.btn-outline:hover,.load-more-btn:hover{
  border-color:var(--sc-accent);
  color:var(--sc-accent);
  background:rgba(0,255,240,.08);
  transform:translateY(var(--sc-lift-btn));
}

/* ---- focus, which was missing everywhere ---- */
a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sc-accent);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  nav.site-header *,footer.site-footer *{transition:none!important}
  .capture,.thing,.service-card,.client-card,.campaign-card,.tool-card,
  .stat-card,.exp-card,.tcard,.case-study,
  .form button,.btn-primary,.btn-submit,.btn-outline,.load-more-btn{
    transition:none!important;
  }
  .capture:hover,.thing:hover,.service-card:hover,.client-card:hover,
  .campaign-card:hover,.tool-card:hover,.stat-card:hover,.exp-card:hover,
  .tcard:hover,.case-study:hover,
  .form button:hover,.btn-primary:hover,.btn-submit:hover,
  .btn-outline:hover,.load-more-btn:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   Cookie choice bar. Injected by analytics.js, and only when no choice is
   stored yet, so returning visitors never see it twice. Sits above the fold
   furniture but below a modal, and never covers the signup form on a phone.
   --------------------------------------------------------------------------- */
.cc{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:760px;margin-inline:auto;
  background:#1E1E24;
  border:1px solid rgba(0,255,240,.38);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.85);
  animation:cc-in .28s ease-out both;
}
@keyframes cc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cc{animation:none}}
.cc-text{
  flex:1 1 300px;min-width:0;margin:0;
  color:#C9C9CB;font-size:14px;line-height:1.55;
}
.cc-actions{display:flex;gap:10px;flex:0 0 auto}
.cc button{
  font:inherit;font-size:14px;font-weight:700;
  border-radius:10px;padding:9px 16px;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cc .cc-yes{
  background:#00FFF0;color:#16161A;border:1px solid #00FFF0;
}
.cc .cc-yes:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,255,240,.35)}
.cc .cc-no{
  background:transparent;color:#C9C9CB;border:1px solid rgba(255,255,255,.18);
}
.cc .cc-no:hover{transform:translateY(-2px);border-color:rgba(0,255,240,.45);color:#E8E8E8}
@media (max-width:560px){
  .cc{flex-direction:column;align-items:stretch;gap:14px}
  .cc-actions{justify-content:stretch}
  .cc button{flex:1 1 0}
}