/* Aeternus Dynamics - site chrome: one header, one footer,
   one primary CTA label, one mobile action bar, on every page. */

header.site-head{position:sticky;top:0;z-index:120;background:rgba(251,250,246,.94);backdrop-filter:blur(9px);border-bottom:1px solid var(--line);transition:background .3s,border-color .3s}
header.site-head.on-hero{background:rgba(15,13,9,.96);border-bottom-color:transparent}
header.site-head.on-hero .brand .wm{color:#fff}
header.site-head.on-hero .brand .wm b{color:var(--bronze-l)}
header.site-head.on-hero .nav-links a:not(.btn){color:#EAE3D4}
header.site-head.on-hero .menu-btn{color:#fff}
header.site-head .nav{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:64px;min-width:0}
header.site-head .brand{display:flex;align-items:center;gap:.7rem;flex:none;min-width:0}
header.site-head .brand .wm{font-family:var(--serif);font-weight:600;font-size:.98rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1;white-space:nowrap}
header.site-head .brand .wm b{color:var(--bronze-d);font-weight:600}
header.site-head .nav-links{display:flex;align-items:center;gap:1.55rem;min-width:0}
header.site-head .nav-links a{font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--ink2);white-space:nowrap;text-decoration:none}
header.site-head .nav-links a:not(.btn):hover{color:var(--bronze-d)}
header.site-head .nav-links .nav-cta{background:var(--bronze-d);color:#fff;font-weight:600;padding:.62rem 1.15rem;display:inline-flex;align-items:center;border:1px solid transparent}
header.site-head .nav-links .nav-cta:hover{background:var(--ink-band);color:#fff}
header.site-head .menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-9px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);line-height:0}

/* Skip link - first focusable element on every page. */
a.skip{position:absolute;left:-9999px;top:0}
a.skip:focus{left:14px;top:14px;z-index:400;background:var(--paper);color:var(--ink);border:1px solid var(--line2);padding:10px 16px;font-family:var(--sans);font-weight:600;text-decoration:none}

/* Fixed mobile action bar. Hidden on desktop; the primary conversion action
   at <=960px, reachable WITHOUT opening the menu. */
.site-cta-bar{display:none}

footer.site-foot .fcols{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:30px;margin-bottom:40px}
footer.site-foot .fcols>div{min-width:0}
footer.site-foot .fbrand .tag{max-width:32ch}
footer.site-foot .fcta{display:inline-flex;align-items:center;justify-content:center;margin-top:1.1rem;padding:.72rem 1.3rem;background:var(--bronze-d);color:#fff;font-family:var(--sans);font-weight:600;font-size:.94rem;text-decoration:none}
footer.site-foot .fcta:hover{background:var(--bronze-l);color:var(--ink-band)}
footer.site-foot .fmail{display:block;margin-top:.9rem;font-size:.92rem;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1120px){header.site-head .nav-links{gap:1.1rem}header.site-head .nav-links a{font-size:.87rem}}

@media(max-width:960px){
  /* article.css:335 targets `.nav` (the same element as `.wrap`) at equal
     specificity and later in the file, zeroing the gutter and letting the
     wordmark sit flush at x=0. Restated here, where it is not overridable. */
  header.site-head .nav{height:56px;flex-wrap:nowrap;padding:0 var(--gut)}
  header.site-head .nav-links{display:none}
  header.site-head .menu-btn{display:inline-flex}
  header.site-head .nav-links.open{display:flex;position:absolute;left:0;right:0;top:56px;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 18px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -22px rgba(20,17,9,.5)}
  /* `display` is restated because article.css hides the links one <a> at a
     time (`.nav-links a:not(.btn){display:none}` at <=820px); laying the
     panel out is not enough to bring them back. */
  header.site-head .nav-links.open a{display:flex;align-items:center;min-height:48px;padding:12px 0;font-size:1rem;border-bottom:1px solid var(--line);color:var(--ink2)}
  header.site-head .nav-links.open a:last-child{border-bottom:0}
  header.site-head .nav-links.open .nav-cta{margin-top:14px;justify-content:center;padding:.9rem 1.2rem;color:#fff}
  header.site-head.on-hero .nav-links.open a:not(.btn){color:var(--ink2)}
  .site-cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:130;padding:10px 16px;background:rgba(251,250,246,.97);backdrop-filter:blur(9px);border-top:1px solid var(--line)}
  .site-cta-bar a{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:.7rem 1rem;background:var(--bronze-d);color:#fff;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.01em;text-decoration:none}
  body{padding-bottom:80px}
  footer.site-foot .fcols{grid-template-columns:1fr 1fr;gap:26px}
  footer.site-foot .fbrand{grid-column:1/-1}
  /* the homepage's assistant button is fixed at bottom:22px and would
     otherwise sit on top of the action bar. */
  .chat-fab{bottom:88px}
  .chat-panel{bottom:156px}
  /* Keep hero copy clear of the fixed overlays. At 375x812 the action bar
     sits at y=743 and the assistant button at y=668, while the hero lead ran
     to y=781 — so both floated over the sentence in the first viewport. Hero
     sections are top-anchored, so the top padding is the lever that moves the
     copy; a bottom padding alone does not. The assistant button is dropped at
     these widths because the action bar already carries the primary action in
     that corner. */
  .hero-inner{padding-top:clamp(48px,7vh,96px);padding-bottom:calc(clamp(40px,6vh,72px) + 96px)}
  .svc-hero{padding-bottom:calc(clamp(52px,7vw,84px) + 88px)}
  .chat-fab,.chat-panel{display:none}
}

@media(max-width:520px){
  header.site-head .brand .wm{font-size:.86rem;letter-spacing:.1em}
  footer.site-foot .fcols{grid-template-columns:1fr}
  footer.site-foot .fcta{width:100%}
}

/* Narrow-viewport containment. Not chrome, but it lives here because this is
   the only stylesheet every content page loads, and because it is guarded.
   Traced at 320px: `.svc-flag .grid` drops to one column below 980px while
   its children keep `min-width:auto`, so the `.device` mock's intrinsic
   minimum width pushed 24 pages past the viewport; engage.html's
   "$175/hr or $1,500/proposal" is a nowrap token. */
@media(max-width:560px){
  .svc-flag .grid>*{min-width:0}
  .device{min-width:0;max-width:100%;overflow-x:auto}
  .svc .p{white-space:normal;overflow-wrap:anywhere}
}

/* Honour the reader's reduced-motion preference. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  header.site-head{transition:none}
  header.site-head .nav-links.open{box-shadow:none}
  .site-cta-bar a,footer.site-foot .fcta,header.site-head .nav-links .nav-cta{transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}