/* Shared styles for every page: tokens, base, header + nav, theme/language toggles, mobile FAB menu, buttons,
 accessibility helpers and the compact "Let's Talk" footer used on the inner pages.
 The Home keeps its page-specific styles (hero, cards, terminal, curtain footer) inline. */
:root{
  --bg:#0D0F0D; --surface:#151915; --text:#F3F2EA; --text-soft:#A9ADA4;
  --sage:#A8D19B; --butter:#E7CE6A; --cream:#F1EEDB; --cta-fill:#E7CE6A; --cta-text:#0D0F0D; --cta-hover:#F9E9A6; --cta-glow:rgba(231,206,106,.45);
  --line:#262A26; --line-soft:#1B1F1B;
  /* status colors — pastel fills, dark ink on top; *-text is the variant used as text/icon on the page */
  --success:#8BDDB0; --warning:#F5B37F; --error:#F29B9B; --on-status:#1B1D18;
  --success-text:#8BDDB0; --warning-text:#F5B37F; --error-text:#F29B9B;
}
[data-theme="light"]{
  --bg:#F1EEDB; --surface:#E9E4CC; --text:#1B1D18; --text-soft:#565A52;
  --sage:#3F6B32; --butter:#7A5A14; --cream:#E9E4CC; --cta-fill:#1B7A5B; --cta-text:#FFFFFF; --cta-hover:#0F5A43; --cta-glow:rgba(27,122,91,.5);
  --line:#DCD6BE; --line-soft:#E3DCC3;
  --success-text:#236A3F; --warning-text:#8F5410; --error-text:#B0323A;
}
/* Type scale — rounded to the 8px grid: H1 80 / H2 48 / H3 32 / H4 24 / H5 16. Paragraphs 16px / 24px.
   Fluid below ~1000px wide (same 80 : 48 : 32 : 24 proportions) with legible floors. */
:root{
  --fs-h1:clamp(48px, 8vw, 80px);
  --fs-h2:clamp(32px, 4.8vw, 48px);
  --fs-h3:clamp(24px, 3.2vw, 32px);
  --fs-h4:clamp(20px, 2.4vw, 24px);
  --fs-h5:16px;
  --fs-body:16px; --fs-label:12px;
  /* line boxes on the 8px grid at desktop: 88 / 56 / 40 / 32 / 24, body 24 */
  --lh-h1:1.1; --lh-h2:1.167; --lh-h3:1.25; --lh-h4:1.333; --lh-h5:1.5; --lh-body:1.5;
  /* spacing — 8px grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s7:64px; --s8:80px;
}
*{box-sizing:border-box;}
html{color-scheme:dark;}
body{background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:var(--fs-body);line-height:var(--lh-body);padding-inline:24px;transition:background .25s ease,color .25s ease;}
::selection{background:var(--sage);color:var(--bg);}

.wrap{max-width:1120px;margin:0 auto;}
h1,h2,h3,h4,h5{font-family:'Ubuntu','Helvetica Neue',Arial,sans-serif;font-weight:700;text-wrap:balance;margin:0;}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);}
h5{font-size:var(--fs-h5);line-height:var(--lh-h5);}
a{color:inherit;text-decoration:none;}
.mono{font-family:'Ubuntu';}
.eyebrow{font-family:'Ubuntu';font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--sage);}


/* nav — slim bar (56px): logo left, links centered, theme + language right.
   It slides away when scrolling down and comes back when scrolling up (see initNav). */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  background:rgba(13,15,13,.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-inline:24px;   /* same side gutter as the page content */
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .25s ease;
}
/* keyboard focus keeps the bar on screen; a tap (focus without focus-visible) must not pin it */
.site-header.is-hidden:not(:has(:focus-visible)){ transform:translateY(-100%); }
[data-theme="light"] .site-header{ background:rgba(241,238,219,.85); }
body{ margin:0; }
.nav-inner{max-width:1120px;margin:0 auto;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.logo{justify-self:start;display:flex;align-items:center;min-height:40px;font-family:'Ubuntu';font-weight:700;font-size:16px;letter-spacing:.02em;}
.mainnav{display:flex;align-items:center;gap:4px;}
.nav-link{
  position:relative;
  padding:8px 12px;
  font-family:'Ubuntu';font-size:14px;font-weight:500;line-height:1.5;
  color:var(--text-soft);white-space:nowrap;
  transition:color .15s ease;
}
.nav-link:hover, .nav-link[aria-current="page"]{ color:var(--text); }
/* underline: draws in from the left on hover/focus, and retracts to the right; always drawn on the current page */
.nav-link::after{
  content:''; position:absolute; left:12px; right:12px; bottom:6px; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left center; }
.nav-controls{justify-self:end;display:flex;align-items:center;gap:4px;}
/* theme + language: no box, same 40px height as the links' hit area */
.theme-toggle, .lang-toggle{
  display:flex;align-items:center;justify-content:center;
  height:40px;padding:0;border:0;border-radius:6px;
  background:transparent;color:var(--text-soft);cursor:pointer;
}
.theme-toggle{ width:40px; }
.lang-toggle{ gap:8px; padding:0 8px; font-family:'Ubuntu'; font-size:14px; font-weight:500; line-height:1.5; }
.theme-toggle:hover, .lang-toggle:hover{ color:var(--text); }
.theme-toggle svg, .lang-toggle svg{ width:18px; height:18px; stroke:currentColor; flex-shrink:0; }
.lang-toggle .lang-label{ min-width:40px; text-align:center; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
@media(max-width:760px){
  .mainnav{display:none;} .nav-inner{grid-template-columns:1fr auto;}
  .theme-toggle{ width:44px; height:44px; } .lang-toggle{ height:44px; }   /* comfortable touch targets */
}
@media (prefers-reduced-motion: reduce){ .site-header{ transition:none; } .nav-link::after{ transition:none; } }

/* mobile FAB menu (Material 3 FAB menu pattern) — the links live here below 760px.
   Primary-button colors; the items grow out of the button one after another and fold back in reverse. */
.fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30;
  display:none; flex-direction:column-reverse; align-items:flex-end; gap:8px;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
@media(max-width:760px){ .fab{ display:flex; } }
.fab.is-hidden:not(:has(:focus-visible)){ transform:translateY(calc(100% + 32px)); }
.fab-btn{
  position:relative; z-index:1;   /* items emerge from behind the button */
  width:56px; height:56px; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--cta-fill); color:var(--cta-text);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:background-color .2s ease;
}
.fab-btn:hover{ background:var(--cta-hover); }
/* hamburger -> X, adapted from the Uiverse "hamburger" by JulanDeAlb */
.fab-btn svg{ width:32px; height:32px; transition:transform 600ms cubic-bezier(.4,0,.2,1); }
.fab-btn .line{
  fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:3;
  transition:stroke-dasharray 600ms cubic-bezier(.4,0,.2,1), stroke-dashoffset 600ms cubic-bezier(.4,0,.2,1);
}
.fab-btn .line-top-bottom{ stroke-dasharray:12 63; }
.fab.is-open .fab-btn svg{ transform:rotate(-45deg); }
.fab.is-open .fab-btn .line-top-bottom{ stroke-dasharray:20 300; stroke-dashoffset:-32.42; }
.fab-btn:focus-visible, .fab-item a:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }

.fab-menu{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column-reverse; align-items:flex-end; gap:8px;
  visibility:hidden; transition:visibility 0s linear .5s;   /* closed items are not focusable or tappable */
}
.fab.is-open .fab-menu{ visibility:visible; transition-delay:0s; }
.fab-item{
  --i:1;   /* 1 = closest to the button */
  transform:translateY(calc(var(--i) * 56px + 4px)) scale(.3); transform-origin:100% 50%; opacity:0;
  transition:transform .25s cubic-bezier(.4,0,1,1), opacity .2s ease;
  transition-delay:calc((5 - var(--i)) * 30ms);   /* closing: the top item leaves first */
}
.fab.is-open .fab-item{
  transform:none; opacity:1;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  transition-delay:calc((var(--i) - 1) * 55ms);   /* opening: the closest item leaves first */
}
.fab-item a{
  display:flex; align-items:center; gap:12px; height:48px; padding:0 20px 0 16px; border-radius:24px;
  background:var(--cta-fill); color:var(--cta-text); white-space:nowrap;
  font-family:'Ubuntu'; font-size:16px; font-weight:500; line-height:1.5;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:background-color .2s ease;
}
.fab-item a:hover{ background:var(--cta-hover); }
/* current page: colors inverted, with a ring in the fill color so it reads against the page */
.fab-item a[aria-current="page"]{ background:var(--cta-text); color:var(--cta-fill); box-shadow:inset 0 0 0 2px var(--cta-fill), 0 4px 12px rgba(0,0,0,.35); }
.fab-item svg{ width:24px; height:24px; flex-shrink:0; }
@media (prefers-reduced-motion: reduce){
  .fab, .fab-btn svg, .fab-btn .line{ transition:none; }
  .fab-item, .fab.is-open .fab-item{ transform:none; transition:opacity .2s ease; transition-delay:0s; }
  .fab-menu{ transition-duration:0s; }
  .fab.is-hidden:not(:has(:focus-visible)){ transform:none; opacity:0; pointer-events:none; }
}


/* buttons */
.btn{font-family:'Ubuntu';font-weight:500;font-size:14px;padding:16px 24px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;}
.btn-primary{background:var(--cta-fill);color:var(--cta-text);}
.btn-secondary{border:1px solid var(--line);color:var(--text);}
/* primary hover: the fill shifts clearly (lighter butter on dark, deeper emerald on light; text stays above 14:1 / 8:1),
   the button lifts 2px and picks up a soft glow of its own color. Pressing it drops it back. */
.btn-primary{ transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn-primary:hover{ background:var(--cta-hover); transform:translateY(-2px); box-shadow:0 8px 24px -6px var(--cta-glow); }
.btn-primary:active{ transform:translateY(0); box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .btn-primary{ transition:background-color .2s ease; } .btn-primary:hover{ transform:none; box-shadow:none; } }
.btn-secondary:hover{border-color:var(--text-soft);}
.btn svg{ width:20px; height:20px; flex-shrink:0; }

/* accessibility */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* animated theme toggle — circular reveal via the View Transitions API,
   adapted from the magicui "Animated Theme Toggler" pattern */
::view-transition-old(root),
::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}
/* ---- accessibility ---- */
.skip-link{position:absolute;left:16px;top:-64px;z-index:100;padding:8px 16px;border-radius:8px;background:var(--cta-fill);color:var(--cta-text);font-family:'Ubuntu';font-weight:500;font-size:14px;transition:top .15s ease;}
.skip-link:focus{top:16px;}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }

/* compact "Let's Talk" footer (inner pages): title on the left, the two contact buttons beside it */
/* inner pages get the Home's curtain: <main> is opaque above the footer (z-index 10) and the footer is stuck to the
   bottom of the viewport behind it, so reaching the end of the page lifts the content and uncovers the footer */
body:not([data-page="home"]) main{
  position:relative; z-index:10; margin-inline:-24px; padding-inline:24px;
  background:var(--bg); box-shadow:0 20px 40px -20px rgba(0,0,0,.5); transition:background .25s ease;
}
.site-cta{
  position:sticky; bottom:0; z-index:0; margin-inline:-24px; padding-inline:24px;
  background:var(--bg); border-top:1px solid var(--line); transition:background .25s ease;
}
.site-cta-inner{ padding:64px 0 24px; }
/* no curtain with reduced motion, or on short screens where the footer would not fit behind the content */
@media (prefers-reduced-motion: reduce), (max-height:599px){
  .site-cta{ position:relative; }
  body:not([data-page="home"]) main{ box-shadow:none; }
}
.site-cta-row{ display:flex; align-items:center; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; }
.site-cta .ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.site-cta-bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-family:'Ubuntu'; font-size:12px; color:var(--text-soft); }
.site-cta-bar a:hover{ color:var(--text); }
@media(max-width:760px){ .site-cta-inner{ padding-bottom:88px; } }   /* clear of the FAB */