@font-face {
    font-family: 'MyFont';
    src: url('../fonts/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/* ==================================================================
   DIGITAL FRK — SERVICES PAGE
   Premium / minimal / editorial. Dark & cream sections alternate.

   Architecture (in order):
     0. Tokens & reset
     1. Primitives (buttons, reveal, layout)
     2. Nav
     3. Hero slideshow
     4. Services Explorer  (flagship — bin-packed FLIP bento)
     5. Sticky Process      (flagship — scroll-driven, mobile pin bar)
     6. Proof / stats
     7. FAQ
     8. Booking / calendar
     9. Footer
    10. Responsive
    11. Reduced motion

   Motion principle: JS only sets classes / scalar CSS vars / a small
   number of inline grid-placement styles. All real animation is CSS
   transitions on transform & opacity (GPU) — 60fps.
================================================================== */

/* ---- Animatable colour tokens (registered so they interpolate) ---- */
@property --accent      { syntax: "<color>"; inherits: true; initial-value: #5fe08a; }
@property --accent-soft { syntax: "<color>"; inherits: true; initial-value: rgba(95,224,138,.18); }
@property --glow        { syntax: "<color>"; inherits: true; initial-value: rgba(95,224,138,.20); }

/* =========================== 0 · TOKENS =========================== */
:root {
  /* surfaces */
  --black:   #08090b;
  --dark:    #0d0e11;
  --dark-2:  #121317;
  --card:    #17181c;
  --card-2:  #1d1f24;
  --cream:   #f6f2e7;
  --cream-2: #efe9d8;

  /* ink */
  --text:    #f3f4f6;
  --muted:   #9aa0ab;
  --muted-2: #6b7079;
  --ink:     #15161a;
  --ink-mut: #575a62;

  /* lines */
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.06);
  --line-dark: rgba(0,0,0,.12);

  /* brand */
  --green:        #5fe08a;
  --green-bright: #8bffb4;

  /* geometry */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --edge: clamp(20px, 6vw, 110px);
  --maxw: 1240px;

  /* fluid type & space — every interior/utility heading and section
     padding below uses these instead of a fixed px/rem value, so it
     scales correctly at every viewport with no dedicated media query.
     Flagship sections (hero, explorer, process, proof, faq, booking)
     keep their own hand-tuned clamp()s — these tokens are for the
     sections added on top of that system (sub-page hero, entry
     templates, story/ethos, 404, blog/editorial). */
  --fs-display: clamp(2.2rem, 6.2vw, 3.6rem);  /* shero / 404 code    */
  --fs-h1:      clamp(1.9rem, 5.2vw, 3rem);    /* page + entry titles */
  --fs-h2:      clamp(1.6rem, 4vw,   2.4rem);
  --fs-h3:      clamp(1.2rem, 2.4vw, 1.5rem);
  --fs-lead:    clamp(1rem,   1.6vw, 1.25rem); /* sub / intro copy    */
  --space-section: clamp(56px, 10vw, 140px);   /* section top padding */
  --space-block:   clamp(32px, 6vw,  80px);

  /* motion — a small shared language, not one timing repeated everywhere */
  --flip-dur: 560ms;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-io:  cubic-bezier(.4,0,.2,1);
  --hero-dur: 5800ms;

  /* global motion system (new) */
  --ease-cinematic: cubic-bezier(.16,1,.3,1);   /* long, expo-out — reveals */
  --ease-spring:    cubic-bezier(.34,1.56,.64,1); /* slight overshoot — magnetic/tap */
  --ease-glass:     cubic-bezier(.19,1,.22,1);    /* very slow decel — ambient drift */
  --dur-instant: 180ms;
  --dur-fast:    320ms;
  --dur-med:     620ms;
  --dur-slow:    1100ms;
  --dur-epic:    1800ms;
}

/* per-accent palette applied to any [data-accent] carrier — distinct hues
   so data-accent (emitted by services-explorer, process, portfolio-grid)
   actually differentiates cards instead of resolving to one flat green. */
[data-accent="green"]  { --accent:#5fe08a; --accent-soft:rgba(95,224,138,.16); --glow:rgba(95,224,138,.22); }
[data-accent="teal"]   { --accent:#2dd4bf; --accent-soft:rgba(45,212,191,.16); --glow:rgba(45,212,191,.22); }
[data-accent="violet"] { --accent:#a78bfa; --accent-soft:rgba(167,139,250,.16); --glow:rgba(167,139,250,.22); }
[data-accent="amber"]  { --accent:#fbbf24; --accent-soft:rgba(251,191,36,.16);  --glow:rgba(251,191,36,.22); }
[data-accent="sky"]    { --accent:#38bdf8; --accent-soft:rgba(56,189,248,.16);  --glow:rgba(56,189,248,.22); }
[data-accent="rose"]   { --accent:#fb7185; --accent-soft:rgba(251,113,133,.16); --glow:rgba(251,113,133,.22); }

/* ============================ RESET ============================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--black);
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; }
::selection { background: var(--green); color: #06210f; }

body {
    font-family: 'MyFont', sans-serif;
}


/* ---- accessibility: visually-hidden text ----
   Required by WordPress theme standards and used by searchform.php and
   several template tags. Without it those labels render as visible text
   in the middle of the page. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  display: block;
  top: 5px;
  left: 5px;
  z-index: 100000;
  padding: 15px 23px 14px;
  font-size: .875rem;
  line-height: normal;
  color: var(--text);
  background: var(--card);
  border-radius: var(--r-sm);
  text-decoration: none;
}

/* ========================= 1 · PRIMITIVES ========================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 32px; border-radius: 999px;
  font-weight: 600; font-size: .85rem; letter-spacing: 0;
  transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .3s, border-color .3s;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn--light { background: #f4f4f2; color: rgb(16, 17, 20, 0.98); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }

.btn--ghost {
  padding: 11px 20px; border: 1px solid var(--accent);
  color: var(--accent); background: var(--accent-soft);
}
.btn--ghost:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 26%, transparent); color: #fff; }

/* scroll reveal — the restrained, default treatment (Proof / FAQ /
   Booking headings and copy keep this plain fade; it is intentionally
   left alone so the three "focus" reveals below stand out). */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---- word reveal (masked + blur + perspective dissolve) ----
   Reserved for the three focus headings (hero title, explorer title,
   process heading) — script.js wraps each word as
   <span class="rv"><i style="--i:N">word</i></span>. The outer .rv
   clips (mask), the inner <i> carries the blur/perspective/translate
   that dissolves in, staggered per word via --i. Deliberately NOT
   applied site-wide — this is the "modern reveal" for the sections
   asked to carry the most craft; everything else stays calmer. */
.rv { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rv i {
  display: inline-block; font-style: inherit;
  transform: translateY(115%) translateZ(0) rotateX(-55deg) scale(.94);
  filter: blur(9px);
  opacity: 0;
  transform-origin: 50% 100%;
  transition:
    transform var(--dur-slow) var(--ease-cinematic),
    filter var(--dur-slow) var(--ease-cinematic),
    opacity calc(var(--dur-slow) * .6) linear;
  transition-delay: calc(var(--i, 0) * 45ms);
  will-change: transform, filter, opacity;
}
.is-in .rv i {
  transform: none; filter: blur(0); opacity: 1;
}

/* =========================== 2 · NAV =========================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--edge, 5vw);
  background: rgba(10, 10, 14, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-scrolled,
.nav.is-sticky[data-sticky="true"] {
  background: rgba(8, 8, 11, 0.92);
  padding: 14px var(--edge, 5vw);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Logo */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.1rem;
  text-decoration: none;
}
.nav__logo span { color: var(--green); }
.nav__mark {
  display: inline-flex;
  align-items: center;
  max-width: 140px;
}
.nav__mark img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Navigation Menu */
.nav__menu {
  display: flex;
  align-items: center;
}
.nav__menu-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu-list li {
  display: inline-block;
}
.nav__menu-list li a {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.25s ease, background 0.25s ease;
  letter-spacing: -0.01em;
}
.nav__menu-list li a:hover,
.nav__menu-list li a.active,
.nav__menu-list li.current-menu-item > a {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Actions & Buttons */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__cta {
  font-size: .9rem;
  font-weight: 600;
  color: #ffffff;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border-radius: 999px;
  text-decoration: none;
  transition: color .3s, border-color .3s, background .3s, transform .3s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.nav__cta:hover {
  color: #000000;
  border-color: #ffffff;
  background: #ffffff;
  transform: translateY(-1px);
}
.nav__cta--secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
}
.nav__cta--secondary:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
}

/* ---- mobile menu: hamburger toggle + off-canvas panel ----
   .nav__panel wraps .nav__menu + .nav__actions in the markup so both
   can become one sliding drawer on mobile, but `display: contents`
   removes the wrapper from the box tree on desktop — its children
   become direct flex items of .nav exactly as if the wrapper weren't
   there, so the existing desktop layout above is untouched. */
.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  /* .nav__panel sits at z-index:95 and is anchored to the same right
     edge as this button, so without its own stacking context the panel
     would paint over it the instant it opens. */
  position: relative; z-index: 96;
}
.nav__toggle-bar {
  display: block; width: 18px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
/* While open, .nav__panel-close (inside the panel) is the sole close
   control. Without this, the toggle — pinned to the same top-right
   corner at a higher z-index than the panel — would sit on top of and
   intercept clicks meant for that button instead. */
.nav__toggle[aria-expanded="true"] { visibility: hidden; pointer-events: none; }

.nav__panel { display: contents; }
.nav__scrim { display: none; }

@media (max-width: 1023px) {
  .nav__toggle { display: inline-flex; }

  .nav__panel {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 28px;
    position: fixed; inset: 0 0 0 auto; z-index: 95;
    width: min(320px, 86vw); height: 100dvh;
    padding: 24px 28px 28px;
    background: rgba(10, 10, 14, 0.98);
    backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255,255,255,0.08);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s var(--ease-io), visibility 0s linear .35s;
  }
  .nav__panel.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s var(--ease-io), visibility 0s linear 0s;
  }

  /* Same circular icon-button treatment as .hero__arrow elsewhere in the
     theme, so the drawer's close control reads as part of the same
     design language rather than a one-off shape. */
  .nav__panel-close {
    align-self: flex-end;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #fff;
    transition: background .3s, border-color .3s, transform .3s var(--ease);
  }
  .nav__panel-close:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
  .nav__panel-close svg { width: 18px; height: 18px; }

  .nav__menu { display: block; }
  .nav__menu-list {
    flex-direction: column; align-items: stretch; gap: .25rem;
  }
  .nav__menu-list li { display: block; }
  .nav__menu-list li a { display: block; font-size: 1.05rem; padding: 12px 4px; }

  .nav__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .nav__actions .nav__cta { text-align: center; }

  .nav__scrim {
    display: block;
    position: fixed; inset: 0; z-index: 90;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease-io);
  }
  .nav__scrim.is-open { opacity: 1; pointer-events: auto; }
}

body.nav-open { overflow: hidden; }

/* =========================== 3 · HERO — CINEMATIC =========================== */
/*
   Architecture (depth, back to front):
     .hero__parallax   — mouse (--mx/--my) + scroll (--hero-scroll) driven.
       .hero__bg        — the Earth photo; a slow, NEVER-RESETTING orbital
                           drift (60s loop) — it keeps evolving the whole
                           time the visitor reads, independent of slides.
         .background-image
         .hero__sweep    — a giant, near-invisible diagonal light sweep.
       .hero__glow       — soft ambient light, drifting independently.
     .hero__vignette    — cinematic edge-darken, intensifies on scroll.
     .hero__slides      — TEXT ONLY carousel; cross-fades over the
                           persistent backdrop above (no per-slide bg cut).
   .hero__parallax deliberately never touches .hero__content — the copy
   stays typographically stable while the scene behind it breathes.
*/
.hero {
  position: relative; isolation: isolate;
  height: 100vh; min-height: 650px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--black);
}

.hero__parallax {
  position: absolute; inset: -8%; z-index: 0;
  transform:
    translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px + var(--hero-scroll, 0) * 60px), 0)
    scale(calc(1 + var(--hero-scroll, 0) * .12));
  will-change: transform;
}

.hero__bg {
  position: absolute; inset: 0;
  animation: orbit 60s var(--ease-glass) infinite alternate;
  transform-origin: 50% 45%;
}
@keyframes orbit {
  0%   { transform: scale(1)     translate3d(0, 0, 0)        rotate(0deg); }
  50%  { transform: scale(1.055) translate3d(-1.1%, -0.6%, 0) rotate(.4deg); }
  100% { transform: scale(1.09)  translate3d(0.6%, 0.8%, 0)   rotate(-.3deg); }
}

.hero__sweep {
  position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 48%, rgba(95,224,138,.06) 52%, transparent 60%);
  mix-blend-mode: screen;
  animation: sweep 22s linear infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%   { transform: translate3d(-30%, -10%, 0); }
  100% { transform: translate3d(30%, 10%, 0); }
}

.hero__glow {
  position: absolute; top: -10vh; left: 50%; translate: -50% 0;
  width: 80vw; height: 60vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(120,150,210,.16), transparent 62%);
  filter: blur(10px);
  animation: glow-drift 16s var(--ease-glass) infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(-50%, 0) scale(1); opacity: .8; }
  to   { transform: translate(-46%, 3%) scale(1.15); opacity: 1; }
}

.hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(0,0,0,.15), transparent 30%, transparent 65%, rgba(0,0,0,.5));
  opacity: calc(.55 + var(--hero-scroll, 0) * .45);
  transition: opacity .2s linear;
}

/* ---- slide stack: TEXT-ONLY cross-fade over the persistent backdrop ---- */
.hero__slides {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.hero__slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px var(--edge) 60px;
  opacity: 0; pointer-events: none;
  transition: opacity 900ms var(--ease-io);
  background-color: var(--slide-bg-color, transparent);
  background-image: var(--slide-bg-image, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }

/* ---- content: fades + slides on every change, staggered; a small
   counter-parallax (quarter strength) separates it from the backdrop
   without ever feeling unstable to read. ---- */
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto;
  max-width: 840px;
  transform: translate3d(calc(var(--mx, 0) * -0.25px), calc(var(--my, 0) * -0.25px), 0);
}
.hero__content > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-io), transform .7s var(--ease-io);
}
.hero__slide.is-active .hero__content > * { opacity: 1; transform: none; }
.hero__content > *:nth-child(1) { transition-delay: .08s; }
.hero__content > *:nth-child(2) { transition-delay: .16s; }
.hero__content > *:nth-child(3) { transition-delay: .24s; }

/* the whole carousel dims/lifts/blurs slightly as the visitor scrolls
   the Earth away — the cinematic hand-off into Explorer. */
.hero__slides {
  opacity: calc(1 - var(--hero-scroll, 0) * 1.2);
  filter: blur(calc(var(--hero-scroll, 0) * 5px));
  transform: translateY(calc(var(--hero-scroll, 0) * 34px));
}

.hero__title {
  font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(2.3rem, 5.5vw, 3.8rem); line-height: 1.1;
  color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.5);
  perspective: 700px;
  text-align: center;
  margin: 0 auto;
}
.hero__sub {
  margin: 22px auto 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.25rem;
  line-height: 1.6;
  text-align: center;
}
/* Optional "Detailed Text" slide field — a quieter, narrower continuation of
   .hero__sub, so a slide that fills it in doesn't render unstyled. */
.hero__desc {
  margin: 16px auto 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.02rem;
  line-height: 1.7;
  text-align: center;
}

/* Per-slide tint layer; the colour itself comes from the slide's own overlay
   field via --slide-overlay-color (set inline, consumed here). */
.hero__slide-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: var(--slide-overlay-color, transparent);
}
.hero__slide .hero__content { position: relative; z-index: 1; }

.hero__actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.hero__actions .btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px 28px;
}
.hero__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transform: translateY(-2px);
}
.hero__actions .btn--light {
  padding: 12px 28px;
}

/* ---- arrows ---- */
.hero__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .3s var(--ease), opacity .3s;
}
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); transform: translate(0,-50%) scale(1.06); }
.hero__arrow--prev { left: clamp(14px, 3vw, 40px); }
.hero__arrow--next { right: clamp(14px, 3vw, 40px); }

/* ---- pagination + progress: pill dots, active one fills ---- */
.hero__dots {
  position: absolute; left: 50%; translate: -50% 0; bottom: clamp(00px, 5vh, 46px);
  z-index: 5; display: flex; gap: 10px;
}
.hero__dot {
  position: relative; width: 34px; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.2); overflow: hidden;
  transition: background .3s, width .3s var(--ease);
}
.hero__dot:hover { background: rgba(255,255,255,.34); }
.hero__dot.is-active { width: 46px; background: rgba(255,255,255,.22); }
.hero__dot-fill {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--green-bright), var(--green));
}
.hero__dot.is-active .hero__dot-fill { animation: dotfill var(--hero-dur) linear forwards; }
.hero.is-paused .hero__dot.is-active .hero__dot-fill { animation-play-state: paused; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Break the Hero Slider block out of any content container it's nested in
   (e.g. page.php's 900px .container) so it renders full-bleed like the homepage hero. */
.df-hero-slider-block {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ==================== 4 · SERVICES EXPLORER ==================== */
.explorer {
  position: relative; isolation: isolate;
  padding: clamp(80px,10vw,140px) var(--edge) clamp(90px,11vw,160px);
  /* background: radial-gradient(90% 60% at 50% 0%, #131519 0%, var(--black) 60%); */
  background: #000;
  /* background-size: 20px 20px;
  background-image: radial-gradient(#e0e0e015 2px, transparent 2px); */
}
/* faint dotted texture */
.explorer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 26px 26px; mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 80%);
}
.explorer__head { max-width: 850px; margin: 0 auto clamp(44px,5vw,68px); text-align: center; }
.explorer__title { font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.9rem,4.4vw,4rem); line-height: 1.08; color: white; }
/* .explorer__title .grad {
  background: linear-gradient(100deg, var(--green-bright) 0%, #9fd0ff 48%, #c9a8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
} */
.explorer__sub { margin: 50px auto 0; max-width: 46ch; color: white; font-size: 20px; font-weight: 200; }

/* ---- the bento grid ----
   Placement (grid-row / grid-column) is computed in script.js by a
   home-column-pin solver and written as inline styles — NOT CSS
   auto-flow. The active card always expands inside its OWN column
   (index % cols), filling it top to bottom (--rows, set by JS);
   displaced cards overflow to the nearest column with room. Row
   count depends only on (card count, column count) — never on which
   card is active — so the grid's total height never jumps. The CSS
   below only supplies the base geometry (fallback 1×1 span, applied
   before JS runs) and every visual/animated property. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(214px, 15vw, 320px);
  gap: clamp(12px, 1.4vw, 18px);
  max-width: var(--maxw); margin: 0 auto;
  perspective: 1400px;   /* gives the collapsed cards' cursor-tilt real depth */
}

.card {
  position: relative;
  grid-column: span 1; grid-row: span 1;    /* fallback; JS overrides inline */
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--card) 0%, #141519 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transform-origin: top left;          /* FLIP math anchor */
  will-change: transform;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  /* transform itself has NO transition here — script.js drives it two
     ways (FLIP invert/play, or the tilt's own eased return) and each
     sets its own transition duration inline so they never fight. */
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card.is-active {
  cursor: default;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb,var(--accent) 30%, transparent), 0 0 60px -10px var(--glow);
}
/* hover elevation (collapsed only) — the 3D tilt (script.js) supplies
   the transform; this just deepens border/shadow to match the lift. */
.card:not(.is-active):hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 26px 54px -24px rgba(0,0,0,.85), 0 0 46px -14px var(--glow);
}
.card:not(.is-active):hover .card__icon { transform: translateY(-2px) translateZ(20px); box-shadow: 0 0 26px var(--glow); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- cursor-follow spotlight (soft lighting, desktop hover only) ----
   A radial gradient pinned to the live cursor position via --sx/--sy
   (0–100%, set by script.js on pointermove, scoped per card). Sits
   above the collapsed face, below nothing (decorative, inert). */
.card__spotlight {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0;
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%),
    color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  transition: opacity .4s var(--ease);
}
.card:not(.is-active):hover .card__spotlight { opacity: 1; }
.card.is-active .card__spotlight { display: none; }

/* counter-scaled wrapper — keeps content undistorted during FLIP */
.card__scale { position: absolute; inset: 0; transform-origin: top left; will-change: transform; }

/* faces stack & cross-fade */
.card__face { position: absolute; inset: 0; transition: opacity .4s var(--ease); }
.card__face--collapsed { opacity: 1; padding: clamp(16px,1.6vw,22px); display: flex; flex-direction: column; }
.card__face--expanded  { opacity: 0; pointer-events: none; padding: clamp(16px,1.6vw,22px); display: flex; flex-direction: column; gap: 16px; }

.card.is-active .card__face--collapsed { opacity: 0; pointer-events: none; }
.card.is-active .card__face--expanded  { opacity: 1; pointer-events: auto; transition-delay: .12s; }

/* collapsed content */
.card__icon {
  width: 45px; height: 45px; border-radius: 50px;
  display: grid; place-items: center;
  background-color: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  /* color: #08210f; */
  /* background: linear-gradient(145deg, var(--green-bright), var(--green)); */
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card__icon svg { width: 20px; height: 20px; }
.card__title { font-weight: 500; letter-spacing: -.02em; font-size: 1.7rem; margin-top: 14px; }
.card__mini { color: var(--muted); font-size: 1rem; margin-top: 6px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__plus {
  position: absolute; right: 16px; bottom: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #08210f;
  background: linear-gradient(145deg, var(--green-bright), var(--green));
  transition: transform .35s var(--ease), box-shadow .3s;
}
.card__plus svg { width: 16px; height: 16px; }
.card:hover .card__plus { transform: rotate(90deg); box-shadow: 0 0 20px var(--glow); }

/* expanded content */
.card__media { flex: 1 1 auto; min-height: 200px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(160deg, #1e2126, #14161a); }
.card__body { flex: 0 0 auto; }
.card__body .card__title { margin-top: 0; font-size: 1.7rem; }
.card__desc { color: var(--muted); font-size: 1rem; margin-top: 8px; line-height: 1.6; }
.card__features { display: grid; grid-template-columns: 1fr; gap: 8px 16px; margin-top: 14px; }
.card__features li { position: relative; padding-left: 20px; font-size: .7rem; color: #d5d8de; }
.card__features li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.card__body .btn { margin-top: 30px; }

/* faux dashboard mock inside media */
.mock { --c: var(--accent); color: var(--accent); position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.mock__bar { display: flex; gap: 6px; }
.mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mock__bar span:first-child { background: var(--accent); }
.mock__chart { flex: 1; min-height: 0; border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2); display: flex; align-items: flex-end; padding: 8px; }
.mock__chart svg { width: 100%; height: 100%; color: var(--accent); filter: drop-shadow(0 6px 14px var(--glow)); }
.mock__rows { display: flex; flex-direction: column; gap: 7px; }
.mock__rows i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.07); }
.mock__rows i:nth-child(1){ width: 80%; } .mock__rows i:nth-child(2){ width: 62%; } .mock__rows i:nth-child(3){ width: 70%; }

/* ==================== 5 · STICKY PROCESS ==================== */
.process {
  position: relative; isolation: isolate;
  /* background: var(--cream);   */
  /* background: radial-gradient(90% 60% at 50% 0%, #131519 0%, var(--black) 60%); */
  color: #fff;
  padding: 0 var(--edge);
  transition: --accent 1s var(--ease-io), --glow 1.1s var(--ease-io);
  background-color: #000;
  background-size: 20px 20px;
  background-image: radial-gradient(#e0e0e015 2px, transparent 2px);

}
/* soft accent glow that changes with the active step */
.process::before {
  content: ""; position: absolute; top: 12%; left: -6%; z-index: 0;
  width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 66%);
  filter: blur(30px); opacity: .8; pointer-events: none;
  transform: translate3d(0, calc(var(--scroll-shift,0) * 26vh), 0);
  transition: background 1.1s var(--ease-io);
}
.process__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 38% 62%;
  gap: clamp(30px, 5vw, 80px);
  max-width: var(--maxw); margin: 0 auto;
}
.process__aside { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; align-items: center; }
.process__sticky { width: 100%; max-width: 420px; padding: 60px 0; }
.process__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mut); margin-bottom: 22px; }
.process__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transition: background 1s; }
.process__heading { font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.9rem,4.4vw,4rem); line-height: 1.02; color: #fff; }
.process__intro { margin-top: 20px; color: #ffffffc9; font-size: 1.3rem; max-width: 40ch; }

.process__now { display: flex; align-items: baseline; gap: 16px; margin-top: 40px; min-height: 52px; }
.process__now-index { font-weight: 800; font-size: 2.3rem; line-height: 1; color: color-mix(in srgb, var(--accent) 78%, #fff); transition: color 1s; font-variant-numeric: tabular-nums; }
.process__now-body { display: flex; flex-direction: column; gap: 3px; }
.process__now-title { font-weight: 700; font-size: 1.12rem; color: #fff; }
.process__now-meta { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mut); }
.process__now-meta em { font-style: normal; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.process__now.is-swapping .process__now-index,
.process__now.is-swapping .process__now-title { opacity: 0; transform: translateY(6px); }
.process__now-index,.process__now-title { transition: opacity .32s ease, transform .32s ease, color 1s; }

.process__progress { margin-top: 22px; position: relative; height: 2px; width: 100%; max-width: 320px; background: rgba(0,0,0,.1); border-radius: 2px; overflow: hidden; }
.process__progress-fill { position: absolute; inset: 0 auto 0 0; width: 100%; transform: scaleX(var(--progress,0)); transform-origin: left; background: var(--accent); transition: transform .15s linear, background 1s; }

/* ---- mobile pinned bar — hidden on desktop/tablet ---- */
.process__pin {
  display: none;
  position: sticky; top: 0; z-index: 6;
  align-items: center; gap: 14px;
  padding: 14px var(--edge);
  margin: 0 calc(var(--edge) * -1);
  background: color-mix(in srgb, #000 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line-dark);
}
.process__pin-index { font-weight: 800; font-size: 1.3rem; color: color-mix(in srgb, var(--accent) 78%, #fff); transition: color 1s; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.process__pin-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.process__pin-title { font-weight: 700; font-size: .92rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.process__pin-meta { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mut); }
.process__pin-meta em { font-style: normal; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.process__pin-progress { flex: 0 0 46px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.1); overflow: hidden; }
.process__pin-progress-fill { display: block; height: 100%; width: 100%; transform: scaleX(var(--progress,0)); transform-origin: left; background: var(--accent); transition: transform .15s linear, background 1s; }
/* fade + slide when the active step changes */
.process__pin.is-swapping .process__pin-index,
.process__pin.is-swapping .process__pin-title { opacity: 0; transform: translateY(6px); }
.process__pin-index,.process__pin-title { transition: opacity .32s ease, transform .32s ease, color 1s; }

.process__content { position: relative; padding: 12vh 0; }

/* ---- connecting line: fills the section's large negative space.
   The rail is a static gradient; the traveler-dot's Y position reuses
   the SAME --progress custom property the sticky panel already
   computes (script.js sets it once on .process) — pure CSS from there. */
.process__line {
  position: absolute; top: 0; bottom: 0; left: -24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-dark) 6%, var(--line-dark) 94%, transparent);
}
.process__line-dot {
  position: absolute; left: 50%; top: 0;
  width: 9px; height: 9px; margin-left: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px var(--glow);
  transform: translate3d(0, calc(var(--progress, 0) * (100% - 9px)), 0);
  transition: background 1s var(--ease-io), box-shadow 1s var(--ease-io);
}

.block { position: relative; padding: 13vh 0; max-width: 40rem; }
.block:first-child { padding-top: 8vh; }
.block:last-child { padding-bottom: 24vh; }
.block__title {
  font-weight: 300; letter-spacing: -.02em; font-size: clamp(1.7rem,3vw,2.5rem); line-height: 1.08; color: #b7b1a1;
  clip-path: inset(0 100% 0 0);
  transition: color .8s var(--ease-io), clip-path var(--dur-slow) var(--ease-cinematic);
}
.block__lead { margin-top: 20px; font-size: 1.08rem; line-height: 1.6; color: rgb(255 255 255 / 70%); opacity: .5; transition: opacity .8s var(--ease-io); }
.block__text { margin-top: 14px; font-size: .98rem; line-height: 1.65; color: rgb(255 255 255 / 70%); opacity: .38; transition: opacity .8s var(--ease-io) .05s; max-width: 36rem; }
.block__divider { display: block; height: 1px; width: 40px; margin-top: 42px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .3; transition: width 1s var(--ease), opacity .9s ease, background 1s; }
.block.is-active .block__title { color: #fff; clip-path: inset(0 0 0 0); }
.block.is-active .block__lead { opacity: 1; }
.block.is-active .block__text { opacity: .9; }
.block.is-active .block__divider { width: min(340px, 78%); opacity: .8; }

/* ======================= 6 · THE PROOF ======================= */
.proof { background: #0d0e11; padding: clamp(80px,9vw,130px) var(--edge); }
.proof__inner { max-width: var(--maxw); margin: 0 auto; }
.proof__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px,4vw,56px); }
.proof__title { font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.9rem,4.4vw,4rem); }
.proof__sub { margin-top: 12px; color: var(--muted); max-width: 30ch; font-size: 1.3rem; }
.proof__more { font-weight: 600; font-size: .92rem; color: #fff; border-bottom: 1px solid var(--green); padding-bottom: 3px; transition: color .3s, border-color .3s; white-space: nowrap; }
.proof__more:hover { color: var(--green); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.6vw,20px); }
.stat {
  position: relative; padding: clamp(22px,2.4vw,30px);
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card) 0%, #141519 100%);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.stat:hover { transform: translateY(-4px); border-color: rgba(95,224,138,.4); box-shadow: 0 24px 50px -30px rgba(0,0,0,.8), 0 0 46px -16px var(--glow); }
.stat__icon { width: 30px; height: 30px; border-radius: 8px; display: block; background: linear-gradient(145deg, var(--green-bright), var(--green)); box-shadow: 0 0 20px rgba(95,224,138,.35); }
.stat__num { display: block; margin-top: 30px; font-weight: 300; letter-spacing: -.02em; font-size: clamp(1.8rem,3vw,2.4rem); }
.stat__label { display: block; margin-top: 10px; color: var(--muted); font-size: .9rem; line-height: 1.5; max-width: 26ch; }

/* ========================== 7 · FAQ ========================== */
.faq { background: #000; color: var(--ink); padding: clamp(80px,9vw,130px) var(--edge); }
.faq__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 34% 66%; gap: clamp(30px,5vw,70px); }
.faq__title { font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.9rem,4.4vw,4rem); line-height: 1.02; color: #fff; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; text-align: left; font-weight: 300; font-size: 1.05rem; color: rgb(255, 255, 255); transition: color .3s; }
.faq__q:hover { color: #fff; }
.faq__ic { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.faq__ic::before,.faq__ic::after { content: ""; position: absolute; background: rgb(255, 255, 255, 0.7); border-radius: 2px; transition: transform .4s var(--ease), opacity .3s; }
.faq__ic::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__ic::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__item.is-open .faq__ic::after { transform: scaleY(0); opacity: 0; }
.faq__item.is-open .faq__q { color: rgb(255, 255, 255, 0.7); }
.faq__a { overflow: hidden; height: 0; opacity: 0; transition: height .45s var(--ease), opacity .4s var(--ease); }
.faq__a p { padding: 0 40px 26px 0; color: #fff; font-size: .98rem; line-height: 1.65; max-width: 60ch; }

/* ======================== 8 · BOOKING ======================== */
.booking {
  position: relative; overflow: hidden;
  background-color: var(--black);
  /* --booking-bg-image (set inline per-block, see render.php) fully
     replaces this fallback value when present — matches the original
     behavior, where an inline background-image style overrode the
     class's own value outright rather than layering with it. */
  background-image: var(--booking-bg-image,
    radial-gradient(90% 60% at 50% 0%, #131519 0%, var(--black) 60%),
    radial-gradient(#e0e0e015 2px, transparent 2px));
  background-size: auto, 20px 20px;
  padding: clamp(80px,9vw,130px) var(--edge) clamp(70px,8vw,110px);
}
.booking__inner { max-width: 1000px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.booking__title { font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: clamp(12px,1.6vw,18px); }
.booking__sub { color: var(--muted); font-size: 1.1rem; line-height: 1.6; max-width: 56ch; margin: 0 auto clamp(20px,2.4vw,28px); }
.booking__desc { color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 62ch; margin: 0 auto clamp(24px,2.8vw,32px); }
.booking__desc p:not(:last-child) { margin-bottom: 1em; }
.booking__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: clamp(34px,4vw,52px); }
.booking__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .35; }
.booking__scheduler { margin-top: clamp(20px,2.4vw,28px); }

/* The theme itself no longer renders this markup (digitalfrk/booking-cta's
   .booking__scheduler mount point is filled by the "Meeting Scheduler"
   plugin instead, see docs/THEMING-CONTRACT.md) — kept here
   because Mockup/index.html and every Mockup/*.html interior page still
   reference these exact classes as the definitive calendar layout that
   plugin is expected to reproduce ("layout will be the same as mockup").
   Colors below are already token-driven (var(--accent) etc.), so they
   automatically track whatever theme is active. */
.cal {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--card) 0%, #131418 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
}
.cal__panel { padding: clamp(20px,2.4vw,30px); border-right: 1px solid var(--line); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal__month { font-weight: 700; font-size: 1.05rem; }
.cal__nav { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); transition: background .3s, color .3s, border-color .3s; }
.cal__nav svg { width: 18px; height: 18px; }
.cal__nav:hover { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.25); }
.cal__dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 6px; }
.cal__dow span { text-align: center; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 6px 0; }
.cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal__day {
  aspect-ratio: 1 / 1; border-radius: 50px; display: grid; place-items: center;
  font-size: .9rem; color: #d7dae0;
  transition: background .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s;
}
.cal__day.is-empty { visibility: hidden; }
.cal__day:not(.is-empty):hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
.cal__day.is-selected { font-weight: 700; box-shadow: 0 8px 22px -6px var(--glow); border: 2px solid var(--accent);  border-radius: 50px;}
.cal__day.is-muted { color: var(--muted-2); }

.cal__times { padding: clamp(20px,2.4vw,30px); display: flex; flex-direction: column; }
.cal__times-head { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.cal__slots { display: flex; flex-direction: column; gap: 10px; }
.cal__hint { color: var(--muted-2); font-size: .92rem; line-height: 1.6; }
.slot { text-align: left; padding: 13px 16px; border-radius: 11px; border: 1px solid var(--line); color: #e6e8ec; font-weight: 500; transition: background .25s, border-color .25s, transform .25s var(--ease), color .25s; }
.slot:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); transform: translateX(3px); }
.slot.is-picked { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent)); color: color-mix(in srgb, var(--accent) 85%, #000); border-color: transparent; font-weight: 700; }

/* ========================= 9 · FOOTER ========================= */
.new-footer { display: block; background: #000; color: #fff; padding: 80px var(--edge) 60px; border-top: 1px solid var(--line-2); }
.new-footer .footer__inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.new-footer .footer__brand { max-width: 320px; }
.new-footer .footer__logo { font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; display: inline-block; margin-bottom: 24px; color: #fff; }
.new-footer .footer__logo .dot { color: var(--green); }
/* Values below match the inline styles the mockup carried on these elements,
   moved into the stylesheet so the markup stays presentation-free. */
.new-footer .footer__logo-img { max-width: 150px; height: auto; }
.new-footer .footer__bottom { text-align: center; padding: 2rem 0; font-size: .875rem; opacity: .7; }
.new-footer .footer__desc { color: #888; font-size: 0.95rem; line-height: 1.6; }
.new-footer .footer__links { display: flex; gap: clamp(40px, 8vw, 120px); flex-wrap: wrap; }
.new-footer .footer__col { display: flex; flex-direction: column; }
.new-footer .footer__heading { font-size: 0.8rem; letter-spacing: 1px; color: #888; text-transform: uppercase; margin-bottom: 24px; font-weight: 500; }
.new-footer .footer__col ul { display: flex; flex-direction: column; gap: 16px; }
.new-footer .footer__col a, .new-footer .footer__col span { color: #e0e0e0; font-size: 0.95rem; transition: color 0.3s; }
.new-footer .footer__col a:hover { color: var(--green); }

/* ==================== 9.4 · SHARED CONTAINERS ====================
   Replaces the `max-width:Npx; margin:0 auto; padding:0 20px` pattern
   that was repeated as an inline style on archive.php, home.php,
   search.php, 404.php and single.php — a fixed 20px side padding
   there meant those pages couldn't reuse --edge's fluid gutter, and
   being inline meant no media query could ever reach it. */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); }
.container--narrow { max-width: 900px; }

/* Archive/home/search two-column layout (post list + sidebar). Was a
   hardcoded `grid-template-columns: 1fr 320px` inline style on all
   three templates — pinning a 320px sidebar beside the content at
   every viewport, including phones, with no way for a media query to
   collapse it. */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; }
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
}

/* 404 page */
.error-404-page { padding: var(--space-section) 0 clamp(56px, 10vw, 100px); text-align: center; }
.error-404__code {
  font-size: clamp(3.5rem, 18vw, 6rem); font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #10b981, #14b8a6, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  display: block; margin-bottom: 1rem;
}
.error-404__lead { font-size: 1.15rem; opacity: .85; line-height: 1.6; margin-bottom: 2.5rem; }
.error-404__search { margin-bottom: 2.5rem; display: flex; justify-content: center; }
.container--xs { max-width: 700px; }

/* =============== 9.5 · SUB-PAGE HERO / CONTACT / PORTFOLIO ===============
   Consolidates what the mockups previously duplicated as inline styles on
   six separate interior-page templates (about/contact/faq/portfolio/
   services/service-detail). */
.shero { padding: var(--space-section) 0 60px; text-align: center; }
.shero__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--edge, 20px); }
.shero__kicker { display: block; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--accent, var(--green)); margin-bottom: 1rem; font-weight: 600; }
.shero__title { font-size: var(--fs-display); font-weight: 800; margin-bottom: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.shero__sub { font-size: var(--fs-lead); opacity: 0.85; line-height: 1.6; }

.contact-details { padding: 40px 0 60px; }
.contact-details__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.contact-details__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 32px; text-align: center; }
.contact-details__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; color: var(--accent, var(--green)); }
.contact-details__label { font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.contact-details__value { font-size: 1.1rem; font-weight: 600; }
.contact-details__value a { color: inherit; }

.portfolio-grid { padding: 40px 0 100px; }
.portfolio-grid__list { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px; }
.portfolio-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.portfolio-card__stat { font-size: 2.5rem; font-weight: 800; color: var(--accent, var(--green)); }
.portfolio-card__category { font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.portfolio-card__title { font-size: 1.4rem; font-weight: 700; }
.portfolio-card__desc { color: var(--muted); line-height: 1.6; }

/* proof-stats' "simple" layout_variant (service-detail.html's centered
   proof section) — lives here rather than in assets/css/service.css
   because that variant can appear on any page, not just a future
   service-detail template, and every other block's CSS already loads
   globally via this stylesheet. */
.center-copy { background: #0d0e11; padding: clamp(90px, 13vw, 160px) var(--edge); text-align: center; }
.center-copy__inner { max-width: 760px; margin: 0 auto; }
.center-copy__heading { font-weight: 300; letter-spacing: -.03em; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; color: #fff; }
.center-copy__body { margin: 22px auto 0; max-width: 60ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--muted); }

/* index.php — the template-hierarchy fallback. Deliberately plain: it
   only needs a readable, centred column, since any request reaching it
   has no more specific template of its own. */
.index-layout { max-width: var(--maxw); margin: 0 auto; padding: var(--space-section) var(--edge) 80px; }

/* Page templates (Full Width / No Sidebar). Values ported 1:1 from the
   inline styles these templates previously carried; the --wide/--narrow
   modifiers are the only difference between the two templates. */
.entry-header { padding: var(--space-section) 0 40px; text-align: center; }
.entry-container { margin: 0 auto; padding: 0 20px; }
.entry-header--wide .entry-container { max-width: 1200px; }
.entry-header--narrow .entry-container { max-width: 800px; }
.entry-header .entry-title { font-weight: 800; }
.entry-header--wide .entry-title { font-size: var(--fs-h1); }
.entry-header--narrow .entry-title { font-size: clamp(1.75rem, 5.2vw, 2.75rem); }

.entry-media { margin: 0 auto 3rem; padding: 0 20px; }
.entry-media--wide { max-width: 1200px; }
.entry-media--narrow { max-width: 800px; }
.entry-media img { width: 100%; height: auto; border-radius: 16px; }

.entry-content--wide,
.entry-content--narrow { margin: 0 auto; padding: 0 20px 80px; line-height: 1.8; }
.entry-content--wide { max-width: 1200px; }
.entry-content--narrow { max-width: 800px; font-size: 1.1rem; }

/* A single blog post (template-parts/content-single.php) and a plain-text
   page (page.php's non-block-canvas branch) both sit inside their own
   `.container.container--narrow` already, so — unlike the page templates
   above — they must NOT inherit .entry-header's section padding or
   .entry-media's centering/gutter (that would double the container's own
   spacing). Scoped by the article's own post_class() so nothing here can
   leak onto .entry-header--wide/--narrow. */
.entry-single .entry-header,
.entry-plain .entry-header { padding: 0; text-align: center; }
.entry-single .entry-header { margin-bottom: 2.5rem; }
.entry-plain .entry-header { margin-bottom: 2rem; }
.entry-single .entry-meta { font-size: .9rem; opacity: .75; margin-bottom: 1rem; }
.entry-single .entry-title,
.entry-plain .entry-title { font-size: var(--fs-h1); font-weight: 800; }
.entry-single .entry-title { line-height: 1.2; margin-bottom: 1.5rem; }
.entry-single .entry-media,
.entry-plain .entry-media { padding: 0; }
.entry-single .entry-media { margin: 0 0 3rem; }
.entry-plain .entry-media { margin: 0 0 2.5rem; }
.entry-single .entry-content,
.entry-plain .entry-content { line-height: 1.8; font-size: 1.1rem; margin-bottom: 3rem; }
.entry-single .entry-footer { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); margin-bottom: 3rem; }

/* ============ 9.8 · EDITORIAL / UTILITY TEMPLATES ============
   Blog index, single post, search, sidebar and comments. The Mockup/
   benchmark covers none of these pages, so rather than invent a new
   look they reuse the same tokens (--card, --line, --muted, --r-*) as
   the marketing sections, which is what keeps them visually part of
   the same theme instead of raw browser defaults on a dark page. */

/* single.php's <main> — the .container inside it only supplies width, so
   this carries the section's vertical rhythm (mirrors .error-404-page). */
.single-post-page { padding: var(--space-section) 0 clamp(48px, 8vw, 80px); }

/* archive/home/search's post-list wrapper — width + vertical rhythm on the
   one div (unlike single.php/404.php, there's no separate outer element
   to carry padding-block, so this modifier does both jobs). */
.container--content { padding-block: 40px 80px; }

/* page.php's plain-text (non-block-canvas) wrapper. Top padding is
   PHP-conditional in the markup — 0 when the page opens with a Hero
   Slider block, var(--space-section) otherwise — which an inline
   style could express but a media query could never reach; .is-flush
   makes that condition a class instead. */
.container--article { padding-block: var(--space-section) 80px; }
.container--article.is-flush { padding-top: 0; }

/* blog listing post card (template-parts/content.php) */
.post-card { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); margin-bottom: 2rem; }
.post-card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__body { padding: 1.5rem; }
.post-card__meta { font-size: .85rem; opacity: .7; margin-bottom: .5rem; }
.post-card__title { font-size: 1.35rem; font-weight: 700; margin-bottom: .75rem; }
.post-card__excerpt { opacity: .85; line-height: 1.6; margin-bottom: 1.25rem; }
.post-card .btn--sm { padding: .4rem .9rem; font-size: .85rem; }

/* post meta — the microformat classes emitted by inc/template-tags.php */
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .85rem; color: var(--muted); }
.entry-meta a { color: var(--muted); transition: color .3s; }
.entry-meta a:hover { color: var(--text); }
.byline, .posted-on, .cat-links, .tags-links { display: inline-flex; align-items: center; gap: 6px; }
.entry-footer { margin-top: 1.5rem; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* page/archive headers */
.page-header { margin-bottom: clamp(24px, 4vw, 40px); }
.page-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; margin-bottom: 1rem; }

/* no-results / 404 body copy */
.no-results, .not-found { color: var(--muted); line-height: 1.7; }
.no-results { padding: clamp(40px, 8vw, 60px) 0; text-align: center; }
.no-results .page-title { font-weight: 700; }
.no-results__content { max-width: 600px; margin-inline: auto; padding-inline: 20px; line-height: 1.6; }
.no-results__lead { margin-bottom: 2rem; opacity: .8; }

/* paginated post links (wp_link_pages) */
.page-links { margin-top: 1.5rem; display: flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--muted); }
.page-links a { color: var(--accent); }

/* search form */
.search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.search-field {
  flex: 1 1 200px; min-width: 0;
  padding: 11px 16px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--text); font-size: .95rem;
}
.search-field::placeholder { color: var(--muted-2); }
.search-field:focus { outline: none; border-color: var(--accent); }
.search-submit {
  padding: 11px 22px; border-radius: var(--r-sm);
  background: var(--accent); color: #06210f;
  font-weight: 700; font-size: .9rem; cursor: pointer;
  border: 1px solid transparent; transition: opacity .3s;
}
.search-submit:hover { opacity: .88; }

/* sidebar + widgets */
.widget-area, .sidebar { display: flex; flex-direction: column; gap: 28px; }
.widget, .footer__widget {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px;
}
.widget-title { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.widget ul { display: flex; flex-direction: column; gap: 10px; }
.widget a { color: var(--text); transition: color .3s; }
.widget a:hover { color: var(--accent); }

/* comments */
.comments-area { margin-top: clamp(40px, 6vw, 72px); }
.comments-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; }
.comment-list { display: flex; flex-direction: column; gap: 20px; list-style: none; padding: 0; }
.comment-list .comment-body {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px;
}
.no-comments { color: var(--muted); }
.nav-title, .nav-subtitle { color: var(--muted); font-size: .9rem; }

/* ==================== 9.7 · BREADCRUMB ====================
   digitalfrk_breadcrumbs() (inc/template-tags.php) is a generic template
   tag that can be called from any template, so it lives here rather than
   in the conditionally-loaded assets/css/service.css. The separator is
   matched on span[aria-hidden] because it carries no class of its own. */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; color: var(--muted-2);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.breadcrumb a { color: var(--muted); transition: color .3s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span[aria-hidden] { color: var(--muted-2); }
.breadcrumb__current { color: #d7dae0; }

/* ==================== 9.6 · STORY / ETHOS ====================
   About page story/mission section (digitalfrk/story-ethos block).
   Padding/spacing/colors ported 1:1 from Mockup/about.html's
   ".page-content" STORY / MISSION section — this is the exact
   benchmark, values are not approximated. */
.story-ethos { padding: 60px 0 80px; }
.story-ethos__container { max-width: 900px; margin: 0 auto; padding: 0 var(--edge, 20px); }
.story-ethos__grid { display: flex; flex-direction: column; gap: 2.5rem; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.8; opacity: .9; }
.story-ethos__copy p:not(:last-child) { margin-bottom: 1em; }
.story-ethos__card { padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.story-ethos__card-heading { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: 1rem; color: var(--accent-teal, #14b8a6); }
.story-ethos__list { list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.story-ethos__item { display: flex; gap: .75rem; align-items: flex-start; }
.story-ethos__item-check { color: var(--accent-green, #10b981); font-weight: bold; }

/* ======================= 10 · RESPONSIVE =======================
   Breakpoints shared conceptually with script.js's currentCols():
     > 1023px … desktop, 3-column packer
     641–1023 … tablet,  2-column packer, sticky process kept
     <= 640    … mobile, single-column cards, process pin bar
================================================================== */

/* ---- tablet: explorer keeps the packer, just narrower ---- */
@media (max-width: 1023px) {
  .cards { grid-auto-rows: clamp(160px, 20vw, 200px); }
}

/* ---- tablet: process stays sticky, tightened spacing/type ----
   min-width matches the ≤680px mobile block below exactly (681px = the
   first pixel past it), so the two blocks are contiguous with no gap.
   This used to be min-width:641px while the mobile switch was ≤680px,
   leaving 641–680px in both blocks at once — a tablet process layout
   next to a mobile nav/hero/explorer at that width. */
@media (max-width: 1023px) and (min-width: 681px) {
  .process__grid { grid-template-columns: 42% 58%; gap: clamp(24px, 4vw, 48px); }
  .process__heading { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  .process__sticky { padding: 44px 0; }
  .block { padding: 10vh 0; }
}

@media (max-width: 860px) {
  .faq__inner { grid-template-columns: 1fr; gap: 26px; }
  .proof__head { flex-direction: column; align-items: flex-start; }
  .new-footer .footer__links { gap: 40px; }
}

/* ---- mobile: process → intro scrolls, pin bar takes over ---- */
@media (max-width: 640px) {
  .process__grid { grid-template-columns: 1fr; gap: 0; }
  .process__aside { position: static; height: auto; display: block; }
  .process__sticky { max-width: none; padding: 10vh 0 5vh; }
  .process__now, .process__progress { display: none; }
  .process__pin { display: flex; }
  .process__content { padding: 2vh 0 6vh; }
  .process__line { left: -16px; }
  .block { padding: 9vh 0 0 0; max-width: none; }
  .block__title { color: #6f7079; }
}

@media (max-width: 680px) {
  .nav { padding: 12px var(--edge, 4vw); }
  .nav__mark { max-width: 100px; }
  .nav__menu-list { gap: 0.5rem; }
  .nav__menu-list li a { font-size: 0.8rem; padding: 4px 8px; }
  .nav__cta { padding: 7px 14px; font-size: 0.78rem; }
  .hero { min-height: 100vh; height: 100vh; }
  .hero__slide { padding: 80px var(--edge, 4vw) 60px; }
  .hero__arrow { width: 40px; height: 40px; }
  .hero__title { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 700; }
  .hero__sub { font-size: 1rem; color: rgba(255, 255, 255, 0.75) !important; margin: 16px auto 0; }
  .hero__actions { margin-top: 24px; gap: 0.75rem; }

  /* explorer → single column; active just grows taller in place.
     JS clears inline grid placement in this mode (see script.js). */
  .cards { grid-template-columns: 1fr !important; grid-auto-rows: auto; gap: 1rem; }
  .card { min-height: 132px; height: 250px; transition: height var(--flip-dur) var(--ease), border-color .4s, box-shadow .4s; }
  .card__scale { position: relative; height: 100%; }
  .card__face { position: absolute; }
  .card__features li { font-size: 1rem; }
  .card.is-active { height: clamp(260px, 82vw, 560px); }
  .explorer { padding-top: 8rem; padding-bottom: 8rem; }
  .explorer__title { font-size: clamp(2rem, 1.6rem + 3.4vw, 3rem); text-align: left; font-weight: 600;}
  .explorer__sub { color: rgba(255, 255, 255, 0.7); margin: 20px 0 70px 0; text-align: left;}


  .process__heading {font-size: clamp(2rem, 1.6rem + 3.4vw, 3rem); text-align: left; font-weight: 600;}
  .process__intro { font-size: 20px; color: rgba(255, 255, 255, 0.7); margin: 20px 0 70px 0; text-align: left; }
  .block.is-active .block__title { font-size: 2.2rem; }



  .stats { grid-template-columns: 1fr; gap: 1rem; }
  .cal { grid-template-columns: 1fr; }
  .cal__panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat__num { font-size: clamp(2rem, 1.6rem + 3.4vw, 3rem); }
  .proof__title { font-size: clamp(2rem, 1.6rem + 3.4vw, 3rem); font-weight: 600; }
  .stat__label { font-size: 1.08rem; }

  .faq__title { font-size: clamp(2rem, 1.6rem + 3.4vw, 3rem); font-weight: 600; }
  .faq__q { font-size: 20px; color: rgba(255, 255, 255, 0.7); text-align: left; }
  .faq__a p { font-size: 15px; color: rgba(255, 255, 255, 0.7); text-align: left; }
  
  .booking__title {
    font-size: clamp(2rem, 1.6rem + 3.4vw, 3rem); font-weight: 600; }

  .new-footer .footer__inner { flex-direction: column; }
  .new-footer .footer__links { gap: 40px; flex-direction: column; }
}

/* ==================== 11 · REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .block__title { color: #101114; clip-path: none !important; } .block__lead { opacity: 1; } .block__text { opacity: .9; }
  .hero__slide:not(.is-active) { display: none; }
  .hero__slide.is-active { position: relative; }

  /* word reveal: skip the dissolve, just show the words */
  .rv i { transform: none !important; filter: none !important; opacity: 1 !important; }

  /* hero depth: freeze parallax/orbit/sweep/vignette-scroll entirely —
     script.js also skips wiring the listeners that would drive these */
  .hero__parallax, .hero__content { transform: none !important; }
  .hero__vignette { opacity: .55 !important; }
  .hero__slides { opacity: 1 !important; filter: none !important; transform: none !important; }

  /* cards: no cursor tilt/spotlight */
  .card__spotlight { display: none !important; }

  /* timeline traveler dot: no smooth glide, just reflect position */
  .process__line-dot { transition: none !important; }
}


.background-image {
  position: absolute; inset: 0;
  background-image: url(hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.hr-light {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 2rem;
}