/* Akenius — shared site shell + top-right navigation dropdown.
   Linked from index.html (via helmet) and every sub-page.
   Colors/fonts come from the design-system token CSS. */

/* ---- fluid cross-page fade (View Transitions API; progressive enhancement) ----
   Enables a smooth cross-fade between full page loads on this multi-page site.
   Every page opts in via this shared file; unsupported browsers just navigate
   normally. Disabled under reduced-motion. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* Root crossfade — shorter than the sluggish default. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
/* Paired service-title morph (index h3 <-> sub-page h1), a touch slower than the fade. */
::view-transition-group(svc-interim),
::view-transition-group(svc-consultancy),
::view-transition-group(svc-board),
::view-transition-group(svc-digital),
::view-transition-group(svc-ventures) {
  animation-duration: 450ms;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
/* Sub-page kicker + lead arrive just after the title lands. */
@keyframes subheroRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .svc-hero .kick, .svc-hero .lead { animation: subheroRise 400ms cubic-bezier(0.33, 1, 0.68, 1) 200ms both; }
}

/* ---- hero grain overlay (Part A4 / B): static SVG feTurbulence noise, ~4%,
   overlay blend. Cheap, decorative, pointer-transparent. Shared by all heroes. */
.hero-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* ---- base (sub-pages; index sets its own body reset in helmet) ---- */
.svc-page *, .svc-page *::before, .svc-page *::after { box-sizing: border-box; }
body.svc-page { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--paper); color: var(--ink); padding: 14px 22px; font-family: var(--font-sans); font-size: 14px; text-decoration: none; border: 1px solid var(--line); }
.skip:focus { left: 0; }

/* ---- top-right dropdown (native <details>, no JS) ---- */
.nav-menu { position: fixed; top: 18px; right: 18px; z-index: 200; font-family: var(--font-sans); }
.nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--border-strong); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; user-select: none; transition: background 150ms ease, color 150ms ease; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::marker { content: ""; }
.nav-menu > summary .car { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 180ms ease; }
.nav-menu[open] > summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav-menu[open] > summary .car { transform: translateY(2px) rotate(-135deg); }
.nav-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 258px; background: var(--paper); border: 1px solid var(--border-strong); display: flex; flex-direction: column; box-shadow: 0 14px 40px rgba(24, 43, 54, 0.22); overflow: hidden; }
.nav-panel a { padding: 13px 18px; font-family: var(--font-sans); font-size: 14px; line-height: 1.3; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: background 120ms ease, color 120ms ease; }
.nav-panel a:last-child { border-bottom: 0; }
.nav-panel a:hover { background: var(--paper-deep); color: var(--brass-deep); }
.nav-panel a[aria-current="page"] { color: var(--brass); font-weight: 600; background: var(--paper-deep); }

/* ---- sub-page shell ---- */
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.svc-hero { background: var(--ink); padding: 30px 0 96px; position: relative; overflow: hidden; }
.svc-hero > .hero-shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.svc-hero > .container { position: relative; z-index: 2; }
.home { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.home svg { display: block; }
.home .wm { font-family: Georgia, serif; font-size: 15px; letter-spacing: 5.5px; color: var(--paper); font-weight: 500; }
.svc-hero .kick { margin: 64px 0 0; }
.kick { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin: 0; }
.svc-hero h1 { margin: 16px 0 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.05; color: var(--paper); }
.svc-hero .lead { margin: 22px 0 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--line); max-width: 60ch; }

.content { padding: 88px 0; }
.content p { margin: 0 0 20px; font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: var(--slate); max-width: 66ch; }
.content .pull { font-family: var(--font-serif); font-size: 25px; font-style: italic; line-height: 1.4; color: var(--ink); }
.svc-list { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; max-width: 66ch; }
.svc-list li { display: flex; gap: 14px; align-items: flex-start; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--slate); }
.svc-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px; background: var(--brass); }
.svc-list strong { color: var(--ink); font-weight: 600; }
.soon { font-size: 15px !important; color: var(--slate); border-top: 1px solid var(--line); padding-top: 28px; margin-top: 40px !important; }
.soon a { color: var(--brass-deep); }

.cta { background: var(--paper-deep); border-top: 1px solid var(--line); padding: 64px 0; }
.cta .container { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 32px; background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border: 1px solid var(--ink); transition: background 150ms ease; }
.btn:hover { background: var(--ink-soft); }
.back { font-family: var(--font-sans); font-size: 15px; color: var(--slate); text-decoration: none; }
.back:hover { color: var(--brass-deep); }

.site-footer { background: var(--ink); border-top: 1px solid var(--brass); padding: 48px 0; }
.site-footer .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; max-width: 1100px; }
.site-footer p { margin: 0; font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--line); }

/* Footer contact details (email + phone). Shared by index.html and every sub-page.
   Link text stays paper-light for contrast on the ink footer; brass lives in the rule. */
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--line); }
.foot-contact a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(168, 118, 62, 0.55); padding-bottom: 1px; }
.foot-contact a:hover, .foot-contact a:focus-visible { border-bottom-color: var(--brass); }
.foot-contact .sep { color: var(--slate); }
@media (prefers-reduced-motion: no-preference) {
  .foot-contact a { transition: border-color 150ms ease-out; }
}

/* "Read more" link on the home-page service rows */
.svc-more { align-self: flex-start; margin-top: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--brass-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.svc-more:hover { color: var(--ink); }

/* ---- rich content sections (sub-pages) ---- */
.section { padding: 92px 0; }
.section.ink { background: var(--ink); }
.sec-head { max-width: 760px; margin: 0 0 44px; }
.sec-head .kick { margin-bottom: 14px; }
.sec-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: var(--ink); }
.section.ink .sec-head h2 { color: var(--paper); }
.sec-head .lead-in { margin: 20px 0 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.65; color: var(--slate); max-width: 66ch; }

/* embedded figures */
.figure { margin: 40px 0 0; }
.figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #F7F5F1; }
.figcap { margin: 12px 0 0; font-family: var(--font-sans); font-size: 13px; font-style: italic; color: var(--slate); }

/* value situations */
.value-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 28px 40px; margin-top: 40px; }
.value-item { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--brass); padding-top: 22px; }
.value-item h3 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.2; color: var(--ink); }
.value-item p { margin: 0; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65; color: var(--slate); }
.value-item .role { color: var(--brass-deep); font-style: italic; }

/* reasons grid */
.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px 44px; margin-top: 8px; }
.reason { display: flex; flex-direction: column; gap: 8px; }
.reason h3 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--ink); }
.reason p { margin: 0; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.62; color: var(--slate); }

/* engagement phases */
.phase-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: 44px; }
.phase { border-top: 1px solid var(--line); padding-top: 18px; }
.phase .n { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--brass); }
.phase h3 { margin: 7px 0 9px; font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.15; color: var(--ink); }
.phase p { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--slate); }

/* detailed service blocks (stacked, long-form prose) */
.detail-list { display: flex; flex-direction: column; gap: 56px; margin-top: 52px; }
.detail { display: flex; flex-direction: column; gap: 16px; }
.detail h3 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--ink); }
.detail p { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.68; color: var(--slate); max-width: 70ch; }
.detail .typical { font-family: var(--font-sans); font-size: 15px; font-style: italic; line-height: 1.6; color: var(--slate); border-left: 2px solid var(--brass); padding-left: 16px; max-width: 66ch; }
.detail .typical strong { font-style: normal; font-weight: 600; color: var(--brass-deep); }
.detail p strong { color: var(--ink); font-weight: 600; }
.detail .figure { margin-top: 20px; }

/* why akenius (ink) */
.why p { font-family: var(--font-sans); font-size: 17px; line-height: 1.72; color: var(--line); max-width: 68ch; margin: 0 0 20px; }
.why .closer { font-family: var(--font-serif); font-style: italic; font-size: clamp(23px, 3vw, 29px); line-height: 1.35; color: var(--paper); margin: 16px 0 0; max-width: 26ch; }
.why .email { display: inline-block; margin-top: 14px; font-family: var(--font-sans); font-style: normal; font-size: 16px; color: var(--brass); text-decoration: none; }
.why .email:hover { color: var(--paper); }