/* F5 Works (Elementor): global styles, interaction states and phone layout.
   Page layout itself lives inline in each template, as designed. */

:root {
  --f5-accent: #2B4BF2;
  --f5-accent-glow: rgba(43, 75, 242, 0.55);
  --f5-accent-30: rgba(43, 75, 242, 0.3);
  --f5-accent-light: rgb(138, 156, 248);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0B0B0C; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--f5-accent); outline-offset: 2px; }

/* Hover only where a mouse exists; phones get no hover states. */
@media (hover: hover) and (pointer: fine) {
  a:hover { opacity: .82; }
  .f5-svc:hover, .f5-proj:hover { opacity: 1; }
}

/* ---------- FAQ accordion ---------- */
summary.f5-faq-q { list-style: none; }
summary.f5-faq-q::-webkit-details-marker { display: none; }
details.f5-faq[open] .f5-faq-icon { background: var(--f5-accent) !important; color: #FFFFFF !important; }

/* ---------- Filter chips (Work, Insights) ---------- */
.f5-chip[aria-pressed="true"] { background: #0B0B0C !important; color: #FFFFFF !important; box-shadow: none !important; }
.f5-chip[aria-pressed="false"] { background: #FFFFFF !important; color: #0B0B0C !important; box-shadow: inset 0 0 0 1px #D4D4D9 !important; }
.f5-filtered-out { display: none !important; }

/* ---------- Booking calendar ---------- */
.f5-day[aria-pressed="false"] { background: #F6F6F4 !important; color: #0B0B0C !important; box-shadow: none !important; }
.f5-day[aria-pressed="true"] { background: var(--f5-accent) !important; color: #FFFFFF !important; box-shadow: 0 6px 18px var(--f5-accent-glow) !important; }
.f5-day-off { height: 46px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #C4C4C9; }
.f5-slot[aria-pressed="false"] { background: #FFFFFF !important; color: #0B0B0C !important; box-shadow: inset 0 0 0 1px #D4D4D9 !important; }
.f5-slot[aria-pressed="true"] { background: var(--f5-accent) !important; color: #FFFFFF !important; box-shadow: none !important; }
.f5-slot:disabled { opacity: .4; cursor: not-allowed !important; }
button[aria-label="Previous month"]:disabled, button[aria-label="Next month"]:disabled { opacity: .35; cursor: not-allowed !important; }
.f5-cal-disabled { opacity: .45; pointer-events: none; }

/* ---------- Forms ---------- */
.f5-form-error { margin: 0; padding: 14px 16px; background: #FFF1F0; box-shadow: inset 3px 0 0 #D92D20; color: #8A1C12; font-size: 15px; line-height: 1.5; }
.f5-invalid { border-color: #D92D20 !important; box-shadow: 0 0 0 1px #D92D20 !important; }
.f5-busy { opacity: .7; pointer-events: none; }
.f5-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
input::placeholder, textarea::placeholder { color: #8C8C92; }

/* ---------- Home hero orb pulse ---------- */
.f5-halo { animation: f5-halo 2.4s ease-in-out infinite alternate; }
.f5-rim { animation: f5-rim 2.4s ease-in-out infinite alternate; }
@keyframes f5-halo {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  to { opacity: .45; transform: translate(-50%, -50%) scale(.96); }
}
@keyframes f5-rim {
  from { box-shadow: 0 0 0 2px #E6EBFF, 0 0 12px 4px var(--f5-accent-light), 0 0 40px 12px var(--f5-accent), 0 0 100px 34px var(--f5-accent-glow), 0 0 200px 80px var(--f5-accent-glow), inset 0 0 16px 4px var(--f5-accent-light), inset 0 0 56px 12px var(--f5-accent), inset 0 0 130px 24px var(--f5-accent-glow); }
  to { box-shadow: 0 0 0 1.5px var(--f5-accent-light), 0 0 6px 2px var(--f5-accent-light), 0 0 22px 6px var(--f5-accent), 0 0 60px 18px var(--f5-accent-glow), 0 0 120px 40px var(--f5-accent-30), inset 0 0 10px 2px var(--f5-accent-light), inset 0 0 34px 6px var(--f5-accent), inset 0 0 80px 12px var(--f5-accent-30); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .f5-halo, .f5-rim { animation: none; }
  .f5-rim { box-shadow: 0 0 0 2px #E6EBFF, 0 0 12px 4px var(--f5-accent-light), 0 0 40px 12px var(--f5-accent), 0 0 100px 34px var(--f5-accent-glow), inset 0 0 16px 4px var(--f5-accent-light), inset 0 0 56px 12px var(--f5-accent); }
}

/* ---------- Generic pages and posts ---------- */
.f5-prose { font-size: 18px; line-height: 1.75; color: #3A3A40; }
.f5-prose h2, .f5-prose h3 { font-family: 'Inter Tight', sans-serif; font-weight: 400; letter-spacing: -0.02em; color: #0B0B0C; line-height: 1.2; }
.f5-prose h2 { font-size: 34px; margin: 48px 0 14px; }
.f5-prose h3 { font-size: 26px; margin: 36px 0 12px; }
.f5-prose a { color: var(--f5-accent); text-decoration: underline; text-underline-offset: 3px; }
.f5-prose img { height: auto; }

/* ---------- Mobile menu button (added by script) ---------- */
.f5-menu-btn { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"]:not(.f5-diagram), .f5-cols-4:not(.f5-diagram) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"], .f5-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .f5-stage { grid-template-columns: 64px minmax(0, 1fr) !important; }
  .f5-stage > :nth-child(3) { grid-column: 2 !important; }
  .f5-hero-media { width: 70% !important; }
}

/* ---------- Header collapses to a tap menu ---------- */
@media (max-width: 960px) {
  .f5-site-header { align-items: center !important; flex-wrap: nowrap !important; }
  .f5-site-header > div:first-child { flex: 1 1 auto; min-width: 0; gap: 0 12px !important; padding: 12px 16px !important; justify-content: space-between; }
  .f5-site-header .f5-nav { display: none !important; }
  .f5-site-header > a:last-child { min-height: 52px !important; align-self: center; margin-right: 16px; padding: 0 18px !important; font-size: 12px !important; letter-spacing: 0.12em !important; gap: 8px !important; white-space: nowrap; }
  .f5-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; order: 3;
    width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer;
    background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
  }
  .f5-menu-btn svg { display: block; }
  .f5-menu-btn .f5-x { display: none; }
  .f5-site-header.is-open .f5-menu-btn .f5-x { display: block; }
  .f5-site-header.is-open .f5-menu-btn .f5-bars { display: none; }
  .f5-site-header.is-open { flex-wrap: wrap !important; }
  .f5-site-header.is-open > div:first-child { flex-basis: 100%; }
  .f5-site-header.is-open .f5-nav {
    display: flex !important; flex-direction: column; flex-basis: 100%; order: 4;
    gap: 0 !important; margin-top: 12px; font-size: 20px !important;
  }
  .f5-site-header.is-open .f5-nav a { display: flex; align-items: center; min-height: 56px; border-top: 1px solid rgba(255,255,255,0.14); }
  .f5-site-header.is-open > a:last-child { flex: 1 1 100%; margin: 0 16px 16px; }
  .f5-lp-header { flex-wrap: wrap; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"]:not(.f5-stats), .f5-cols-2:not(.f5-stats),
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"]:not(.f5-stats), .f5-cols-3:not(.f5-stats),
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"]:not(.f5-diagram):not(.f5-stats), .f5-cols-4:not(.f5-diagram):not(.f5-stats),
  [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"], .f5-cols-5,
  [style*="grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr)"], .f5-cols-split,
  .f5-book-grid, .f5-bul { grid-template-columns: minmax(0, 1fr) !important; }
  .f5-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .f5-stage { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .f5-stage > * { grid-column: auto !important; }
  [style*="grid-column: span 2"], .f5-span2 { grid-column: auto !important; }
  .f5-hide-m { display: none !important; }
  .f5-hero-media { width: 100% !important; opacity: .55; }
  .f5-hero-fade { background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 45%, #000000 100%) !important; }
  .f5-faq-a, details.f5-faq p { padding-right: 0 !important; }
  summary.f5-faq-q { font-size: 19px !important; }
  [style*="font-size: clamp(44px"], .f5-bigh { overflow-wrap: anywhere; }
  .f5-compare { font-size: 14px !important; }
}

/* Photo heroes: text full width, photo behind it */
@media (max-width: 900px) {
  .f5-hero-text { max-width: 100% !important; }
  .f5-hero-media { width: 100% !important; opacity: .5; }
  .f5-hero-fade { background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.6) 45%, #000000 100%) !important; }
}

/* Small phones: logo + menu button on one row, Book a Call inside the open menu */
@media (max-width: 600px) {
  .f5-site-header > div:first-child { flex-wrap: nowrap !important; }
  .f5-site-header.is-open > div:first-child { flex-wrap: wrap !important; }
  .f5-site-header > a:last-child { display: none !important; }
  .f5-site-header.is-open > a:last-child { display: flex !important; min-height: 56px !important; margin: 0 16px 16px; font-size: 13px !important; }
  .f5-site-header > div:first-child > a:first-child img { height: 26px !important; }
}