/*
Theme Name:  EON25
Theme URI:   https://eon25.site
Author:      EON
Created by:  Eng Ahmed Elbably
Mobile No.:  01275799570
Description: EON25 landscape + urban website: logo reveal over a background video with an ASCII sentence, featured projects, practice, people and contact.
Version:     1.94.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: eon25
*/

  :root{
    --bg:#2b3540; --ink:#231F20; --text:#FFFFFF;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  :root[data-theme="dark"]{ --bg:#2b3540; --ink:#231F20; --text:#FFFFFF; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#2b3540; --ink:#231F20; --text:#FFFFFF; } }
  *,*::before,*::after{ box-sizing:inherit; }
  html,body{ height:100%; margin:0; }
  body{ background:var(--bg); color:var(--ink); }
  html.lock, html.lock body{ overflow:hidden; }

  /* Site font: Helvetica Neue, EON25's font (assets/fonts; commercial, needs a web font licence:
     see assets/fonts/HELVETICA-NEUE-LICENCE.txt). Everything is set in it except the logo, which
     keeps its own artwork (brand-art.js); the uppercase lettering (menu, footer, statements) is
     Helvetica Neue Medium too (brand-type.js). */
  @font-face{ font-family:"EON Helvetica Neue"; font-style:normal; font-weight:300; font-display:swap; src:url("assets/fonts/helvetica-neue-light.woff2") format("woff2"); }
  @font-face{ font-family:"EON Helvetica Neue"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/helvetica-neue-roman.woff2") format("woff2"); }
  @font-face{ font-family:"EON Helvetica Neue"; font-style:italic; font-weight:400; font-display:swap; src:url("assets/fonts/helvetica-neue-italic.woff2") format("woff2"); }
  @font-face{ font-family:"EON Helvetica Neue"; font-style:normal; font-weight:500; font-display:swap; src:url("assets/fonts/helvetica-neue-medium.woff2") format("woff2"); }
  @font-face{ font-family:"EON Helvetica Neue"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/helvetica-neue-bold.woff2") format("woff2"); }
  :root{ --font:"EON Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  body{ font-family:var(--font); }
  button, input, select, textarea{ font-family:inherit; }

  :root{ --pad:2.5rem; --end-gap:clamp(40px, 4.2vw, 60px); }   /* --end-gap: the same space under the last part of every page, before the footer */
  @media (max-width:767.98px){ :root{ --pad:1.25rem; } }

  /* Homepage layers (bottom to top): background video, the sentence, intro reveal, header */
  #stage{ position:fixed; inset:0; display:grid; place-items:center; width:100vw; height:100vh; height:100dvh; z-index:30; pointer-events:none; }
  /* the logo intro (home-grow.js): the square logo in the middle, hidden until it starts growing */
  .home-grow.is-waiting{ visibility:hidden; }
  .home-grow svg{ display:block; width:min(57.6vw, 37.8vh, 406px); width:min(57.6vw, 37.8dvh, 406px); height:auto; overflow:visible; }   /* 45% of the screen height (480px at most), narrower on phones (20% smaller than the first size) */
  #stage[data-intro="plus-counter"] svg{ width:min(51.8vw, 34vh, 365px); width:min(51.8vw, 34dvh, 365px); }   /* the Plus + Counter intro: 10% smaller again */
  .home-grow .hg-part{ transform-box:fill-box; transform-origin:50% 50%; }
  /* The header logo on every page (since 1.83.0; until then only on the homepage): the square logo (brand-square.js),
     --logo-sq high; the menu lines up with the middle of its E (below). The footer logo is the same size. */
  :root{ --logo-sq:clamp(60px, 6.2vw, 96px); }
  @media (max-width:520px){ :root{ --logo-sq:48px; } }
  .site-logo.is-square{ width:calc(var(--logo-sq) * var(--logo-sq-ratio, .843)); }
  .site-logo.is-square > svg{ display:block; width:100%; height:auto; fill:currentColor; }

  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* Header */
  .site-header{
    position:fixed; z-index:40; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:calc(var(--pad) + env(safe-area-inset-top,0px)) var(--pad) 0;
    pointer-events:none; color:var(--text); transition:color .45s;
  }
  .site-header.on-dark{ color:var(--text); }
  .site-header.on-light{ color:var(--ink); }                 /* over white areas ([data-header-light]) */
  html.menu-open .site-header.on-light{ color:var(--text); } /* phone menu open: stay white */
  /* Header bar: once the page is scrolled, a bar in the page colour sits behind the logo and the menu,
     so the page never shows through them (site.js adds it; Practice and Projects have their own coloured bar) */
  .site-header.has-bar{ padding-bottom:calc(var(--pad) * .55); }
  .site-header.has-bar > .site-logo, .site-header.has-bar > .main-nav{ position:relative; z-index:1; }
  .site-header__bar{ position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--ink); opacity:0; transition:opacity .25s, background-color .45s; }
  .site-header.on-light .site-header__bar{ background:#fff; }
  html.eon-scrolled .site-header__bar{ opacity:1; }
  html.menu-open .site-header__bar{ opacity:0; }
  /* Practice: the clear part of its own bar (over the moving lines at the top) takes the page colour once scrolled.
     Projects and project pages keep their header as it is. */
  html.eon-scrolled.pp-html:not(.menu-open) .site-header[data-theme="transparent"] .pl-header__mask--transparent{ background-color:var(--pp-ink); }
  @media (prefers-reduced-motion: reduce){ .site-header__bar{ transition:none; } }
  /* --logo-std / --logo-w: the width of the earlier wide EON25 logo, kept for a logo link without .is-square
     (every header and footer logo is the square one since 1.83.0, sized by --logo-sq above) */
  :root{ --logo-std:clamp(150px, 13vw, 230px); --logo-w:var(--logo-std); }
  @media (max-width:520px){ :root{ --logo-std:118px; } }
  .site-logo{ color:inherit; display:block; width:var(--logo-w); pointer-events:auto; visibility:hidden; transform-origin:0 0; }
  .site-logo.shown{ visibility:visible; }
  .site-logo svg{ display:block; width:100%; height:auto; fill:currentColor; overflow:visible; }
  .site-logo:focus-visible, .main-nav a:focus-visible{ outline:2px solid currentColor; outline-offset:6px; }

  .main-nav{ pointer-events:auto; opacity:0; transform:translateY(-6px); transition:opacity .6s, transform .6s; }
  .main-nav.shown{ opacity:1; transform:none; }
  .main-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(1.25rem, 3vw, 2.75rem); }
  /* Computers and tablets: the four items spread across the header like Field Operations - the menu
     takes the right three-quarters as four equal columns, each item at the start of its column */
  @media (min-width:768px){
    .main-nav{ width:75%; }
    .main-nav ul{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; }
    .main-nav li{ justify-self:start; }
  }
  /* the menu sits on the middle of the square logo's E (its top row) */
  .main-nav{ margin-top:calc(var(--logo-sq) * .243 - var(--nav-cap) / 2 - 4px); }
  .main-nav a{ position:relative; display:inline-block; color:inherit; text-decoration:none; padding:4px 0; }
  .main-nav a svg.word{ display:block; height:var(--nav-cap); width:auto; fill:currentColor; }
  :root{ --nav-cap:11px; }
  @media (max-width:520px){ :root{ --nav-cap:8px; } }
  /* hover marker: the emblem itself, as a tiny cursor */
  .main-nav a::before{
    content:""; position:absolute; left:calc(var(--nav-cap) * -0.75); top:50%; width:calc(var(--nav-cap) * 0.195); height:var(--nav-cap); margin-top:calc(var(--nav-cap) * -0.5);
    background:currentColor; clip-path:polygon(100% 100%, 0 80.7%, 0 19.3%, 100% 0);
    opacity:0; transform:translateX(4px); transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .main-nav a:hover::before, .main-nav a:focus-visible::before{ opacity:1; transform:none; }

  /* ---------------------------------------------------------------------
     Phones (below 768px): two-line menu button + frosted full-screen menu
     --------------------------------------------------------------------- */
  .menu-toggle{ display:none; }
  .mobile-menu{ display:none; }

  @media (max-width:767.98px){
    .main-nav ul{ display:none; }                  /* text links move into the menu */

    /* 44 x 44 tap area; lines are 34px wide, 3px thick, 8px apart.
       Vertically centred on the logo; lines line up with the right padding edge. */
    .main-nav{ margin-top:calc(var(--logo-sq) / 2 - 22px); margin-right:-5px; }
    .menu-toggle{
      display:block; position:relative; width:44px; height:44px; padding:0; margin:0;
      border:0; background:none; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
    }
    .menu-toggle span{
      position:absolute; left:5px; right:5px; height:3px; background:currentColor;
      /* closing: straighten first, then move apart */
      transition:top .18s ease .18s, transform .18s ease 0s;
    }
    .menu-toggle span:nth-child(1){ top:15px; }
    .menu-toggle span:nth-child(2){ top:26px; }
    /* opening: move together first, then rotate into an X */
    html.menu-open .menu-toggle span{ transition:top .18s ease 0s, transform .18s ease .18s; }
    html.menu-open .menu-toggle span:nth-child(1){ top:20.5px; transform:rotate(45deg); }
    html.menu-open .menu-toggle span:nth-child(2){ top:20.5px; transform:rotate(-45deg); }
    .menu-toggle:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

    .mobile-menu{
      display:flex; align-items:center;
      position:fixed; inset:0; z-index:39;          /* just below the header, so logo and X stay on top */
      padding:calc(var(--pad) + env(safe-area-inset-top,0px) + 72px) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom,0px));
      color:var(--text);
      background:rgba(18,24,30,.42);
      -webkit-backdrop-filter:blur(18px) saturate(1.15);
      backdrop-filter:blur(18px) saturate(1.15);
      opacity:0; visibility:hidden;
      transition:opacity .35s ease, visibility 0s linear .35s;
    }
    html.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s; }

    .mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:28px; }
    .mobile-menu a{ display:inline-block; padding:6px 0; color:inherit; text-decoration:none; }
    .mobile-menu a svg.word{ display:block; height:clamp(20px, 6.5vw, 30px); width:auto; fill:currentColor; }
    .mobile-menu a:focus-visible{ outline:2px solid currentColor; outline-offset:6px; }

    /* links slide in one after another */
    .mobile-menu li{ opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
    html.menu-open .mobile-menu li{ opacity:1; transform:none; }
    html.menu-open .mobile-menu li:nth-child(1){ transition-delay:.10s; }
    html.menu-open .mobile-menu li:nth-child(2){ transition-delay:.16s; }
    html.menu-open .mobile-menu li:nth-child(3){ transition-delay:.22s; }
    html.menu-open .mobile-menu li:nth-child(4){ transition-delay:.28s; }

    /* page does not scroll behind the open menu */
    html.menu-open, html.menu-open body{ overflow:hidden; }
  }

  @media (prefers-reduced-motion: reduce){
    .menu-toggle span, .mobile-menu, .mobile-menu li{ transition:none !important; }
  }


  /* =====================================================================
     HOMEPAGE FIRST SCREEN: background video + the sentence in ASCII characters
     The homepage is this one screen. The video (EON25 Site → Homepage) fills
     it, with a dark layer over it; the background photo shows while it loads.
     The sentence forms at the bottom (ascii-logo.js).
     ===================================================================== */
  /* Header logo, every page: its blocks spin a full turn in 3D (built by logo3d.js; the square logo since
     1.83.0, with a few layers behind each block for its thickness): on hover with a mouse; on phones and
     tablets (and windows narrower than 768 px) one after another when the page opens, when the logo is
     tapped, and every 10 s. The same size on every page, the homepage too (--logo-sq). */
  .logo3d{ position:relative; width:100%; }
  .logo3d .tagline-flat{ position:absolute; inset:0; width:100%; height:100%; }
  .logo3d .stage{ position:absolute; perspective:800px; }
  .logo3d .letter{ position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform 2s; }
  @media (hover:hover){ .logo3d .stage:hover .letter{ transform:rotateY(360deg); } }
  @media (hover:none){ .logo3d .letter{ transition:none; } }   /* a tap leaves no hover behind to turn back from */
  @keyframes eon-logo-spin{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
  .logo3d.is-spinning .letter{ transition:none; animation:eon-logo-spin 2s ease-in-out; animation-delay:calc(var(--i, 0) * 0.12s); }
  .logo3d .face{ position:absolute; inset:0; width:100%; height:100%; fill:currentColor; }
  .logo3d .face--depth{ filter:brightness(72%); }   /* the layers behind a face (a logo without cut edges): its thickness */
  /* fin = the triangle cut off at a 45° chamfer, stood up at 90° along the cut and shaded */
  .logo3d .fin{ position:absolute; background:currentColor; filter:brightness(75%);
    clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:0 0; }
  @media (prefers-reduced-motion:reduce){ .logo3d .letter{ transition:none; animation:none !important; } .logo3d .stage:hover .letter{ transform:none; } }

  /* the sentence's shape: the site font in bold (Helvetica Neue Bold, declared above; drawn by ascii-logo.js) */
  .home-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
  .home-bg__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .home-bg__overlay{ position:absolute; inset:0; background:rgba(0,0,0,var(--home-dim, .25)); }
  .we-pause{
    position:fixed; z-index:1;
    left:var(--pad); right:var(--pad); bottom:calc(var(--pad) + env(safe-area-inset-bottom, 0px));
    height:46vh; height:46dvh;                         /* room above the sentence for the characters to fall */
    color:#FFFFFF;                                     /* the characters' colour */
  }
  .we-pause .al-logo{ position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer; }
  html.home-page, html.home-page body{ overflow:hidden; }   /* the homepage is one screen */
  @media (max-width:767.98px){ .we-pause{ height:44vh; height:44dvh; } }
  .al-cursor{ font-size:12px; }

/* Text cursor ("Click to interact") that grows in over hoverable areas. */
  .al-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
    padding-top: 1em;
    padding-left: 0.5em;
    padding-right: 1em;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
  }
  
  .al-cursor-scramble {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    height: 2em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-radius: 0.25em;
    background-color: #1d1d1d99;
    -webkit-backdrop-filter: blur(1.5em);
    backdrop-filter: blur(1.5em);
    color: #fff;
    opacity: 0;
  }
  
  .al-cursor-scramble__text {
    color: #fff;
    font-family: var(--font);
    font-size: 0.875em;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  
  @media (hover: hover) and (pointer: fine) {
    [data-cursor] .al-cursor-scramble {
      transform: translateX(0%) scale(1) rotate(0.001deg);
      transition:
        transform 0.4s cubic-bezier(0.625, 0.05, 0, 1),
        opacity 0.2s ease 0.1s;
    }
  
    [data-cursor="active"] .al-cursor-scramble {
      opacity: 1;
      transform: translateX(0%) scale(1) rotate(0.001deg);
      transition:
        transform 0.4s cubic-bezier(0.625, 0.05, 0, 1),
        opacity 0.2s ease 0s;
    }
  
    /* Near the right edge the label flips to the left of the pointer. */
    [data-cursor="active-edge"] .al-cursor-scramble {
      opacity: 1;
      transform: translateX(-100%) scale(1) rotate(0.001deg);
      transition:
        transform 0.4s cubic-bezier(0.625, 0.05, 0, 1),
        opacity 0.2s ease 0s;
    }
  }
  
  @media (hover: none) and (pointer: coarse) {
    .al-cursor {
      display: none;
    }
  }



  

/* =====================================================================
   BRAND LETTERING WORDS (eonBrandWords): one SVG per word, wraps like text
   ===================================================================== */
.eon-bw{ display:inline-block; overflow:visible; vertical-align:top; }  /* not clipped: round letters (O C @ 2 5) reach a little above and below the capitals */
.eon-bw__in{ display:block; }
.eon-bw svg{ display:block; height:var(--cap, 16px); width:auto; fill:currentColor; }
.eon-words{ display:flex; flex-wrap:wrap; column-gap:calc(var(--cap, 16px) * .49); row-gap:calc(var(--cap, 16px) * .42); }
/* Until the script has drawn a text in the lettering (it then adds data-brand-ready), its plain text
   is hidden, so small plain text never flashes when a page opens (Contact, People, footer). The
   plain text is set in capitals at about the lettering's size, so nothing moves when the lettering
   replaces it; should the script not run at all, it shows after 4 s. */
[data-brand-text]:not([data-brand-ready]),
[data-phone-link]:not([data-brand-ready]){
  visibility:hidden; animation:eon-brand-show 0s linear 4s forwards;
  font-size:calc(var(--cap, 16px) * 1.4); line-height:1; text-transform:uppercase;
}
@keyframes eon-brand-show{ to{ visibility:visible; } }

/* =====================================================================
   FUSING LINES + CALL TO ACTION (top of the Practice page) — scoped to .eon-lines
   ===================================================================== */
.eon-lines{
  --lines-pad:clamp(20px, calc(20px + 40 * ((100vw - 402px) / 1518)), 60px);
  position:relative; z-index:21;          /* same layer as the footer */
  width:100%; height:400vh; height:400svh; /* about 3 screens of scroll while pinned */
  background:var(--ink); color:var(--text);
  overflow-x:clip;                         /* the statement slides in from the side: never widen the page (tablets) */
}
.eon-lines__container{ position:relative; width:100%; min-height:100vh; min-height:100svh; }
.eon-lines__canvas{ position:relative; z-index:0; width:100%; height:100vh; height:100svh; }
.eon-lines__canvas canvas{ display:block; width:100%; height:100%; }
/* darkens the left edge so the lines emerge out of the black */
.eon-lines__veil{
  position:absolute; inset:0; z-index:10; pointer-events:none;
  background-image:linear-gradient(to right, rgba(35,31,32,.9) 0%, rgba(35,31,32,0) 20%);
}

.eon-lines__bottom{ position:absolute; bottom:0; z-index:2; padding:var(--lines-pad); }
.eon-lines__statement{
  --cap:clamp(12px, calc(12px + 10 * ((100vw - 402px) / 1518)), 22px);
  margin:0; max-width:34rem; display:flex; flex-wrap:wrap; column-gap:calc(var(--cap) * .49); row-gap:calc(var(--cap) * .42);
}

.eon-lines__center{
  position:absolute; bottom:0; left:0; z-index:2;
  display:flex; flex-direction:column; gap:20px; width:100%; padding:var(--lines-pad);
}
.eon-lines__cta-title{
  --cap:clamp(22px, calc(22px + 6 * ((100vw - 402px) / 1518)), 28px);
  margin:0; max-width:34rem; display:flex; flex-wrap:wrap; column-gap:calc(var(--cap) * .49); row-gap:calc(var(--cap) * .42);
}
.eon-lines__cta-title .is-glow svg{ filter:drop-shadow(0 0 8px rgba(255,255,255,.85)); }
/* Hidden until the animation has set them up (home-lines.js adds .is-ready), so the plain text never
   flashes when the page opens; should the script not run at all, they show after 4 s */
.eon-lines:not(.is-ready) .eon-lines__statement,
.eon-lines:not(.is-ready) .eon-lines__cta-title{ visibility:hidden; animation:eon-lines-show 0s linear 4s forwards; }
@keyframes eon-lines-show{ to{ visibility:visible; } }
.eon-lines__cta-title .is-glow{ overflow:visible; }
@media (min-width:768px){
  .eon-lines__bottom{ right:0; bottom:calc(100svh * .0852); text-align:right; }
  .eon-lines__statement{ justify-content:flex-end; }
  .eon-lines__center{ top:59.8%; bottom:auto; left:45%; width:auto; translate:0 -50%; }
}
@media (min-width:1280px){ .eon-lines__center{ left:50%; } }



/* =====================================================================
   FOOTER (every page) — scoped to .eon-footer
   ===================================================================== */
.eon-footer{
  position:relative; z-index:21;           /* above the fixed homepage canvases */
  background:var(--ink); color:var(--text);
  padding:calc(var(--pad) * 2) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom,0px));
}
.eon-footer__rule{ height:1px; background:rgba(255,255,255,.18); margin-bottom:calc(var(--pad) * 1.6); }

.eon-footer__top{ display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:1024px){ .eon-footer__top{ grid-template-columns:1.3fr 1fr; gap:var(--pad); } }

/* the header logo (usual header size on every page; footer.js draws it) */
.eon-footer__logo{ display:block; width:calc(var(--logo-sq) * var(--logo-sq-ratio, .843)); margin:0 0 calc(var(--logo-sq) * .2); color:inherit; text-decoration:none; }   /* the square logo, as big as in the header (since 1.83.0) */
.eon-footer__logo:focus-visible{ outline:2px solid currentColor; outline-offset:6px; }
.eon-footer__logo svg{ display:block; width:100%; height:auto; fill:currentColor; overflow:visible; }

.eon-footer__cols{ display:grid; grid-template-columns:repeat(2, 1fr); gap:36px 24px; }
@media (min-width:640px){ .eon-footer__cols{ grid-template-columns:repeat(3, 1fr); } }

.eon-footer__head{ --cap:9px; margin:0 0 18px; opacity:.5; }
.eon-footer__list{ --cap:var(--nav-cap); list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.eon-footer__office{ display:flex; flex-direction:column; gap:7px; }
.eon-footer__city{ --cap:9px; opacity:.55; }

/* links: a thin underline wipes in on hover (same as the projects labels); when the mouse
   leaves it goes at once, so no short piece of it is left under the first letter */
.eon-footer__link{
  display:inline-flex; flex-wrap:wrap; column-gap:calc(var(--cap) * .49); row-gap:calc(var(--cap) * .42);
  color:inherit; text-decoration:none; padding-bottom:5px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0% 1px;
  transition:none;
}
.eon-footer__link:hover, .eon-footer__link:focus-visible{ background-size:100% 1px; transition:background-size .2s cubic-bezier(.4,0,.2,1); }
.eon-footer__link:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }

.eon-footer__bottom{
  --cap:9px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;
  margin-top:calc(var(--pad) * 1.6 - 5px); padding-top:18px; border-top:1px solid rgba(255,255,255,.18);   /* the same space under the links as above them (the rule's 1.6 x pad; minus the links' 5px underline room) */
}
.eon-footer__legal{ opacity:.55; justify-content:flex-start; }
/* the email at the end of the © line, exactly like it: the same letter size (--cap 9px), weight and grey;
   its underline room (5px) hangs below, so both sit on one line */
.eon-footer__email{ margin-left:auto; margin-bottom:-5px; opacity:.55; }
/* phones: the bottom line a little smaller (8px; less on the narrowest phones), so the © line and the email always share one line */
@media (max-width:767.98px){ .eon-footer__bottom{ --cap:min(8px, calc((100vw - 2 * var(--pad) - 12px) / 40)); gap:12px; } }
@media (prefers-reduced-motion: reduce){ .eon-footer__link{ transition:none !important; } }

/* Current page in the menu (e.g. CONTACT on the contact page) */
.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor;
}
.main-nav a{ position:relative; }

/* =====================================================================
   CONTACT PAGE — scoped to .eon-contact*
   ===================================================================== */
.eon-contact-page{ display:block; }

/* ---------- Hero: homepage photo in the current season's colours ---------- */
.eon-contact-hero{
  position:relative; height:70vh; height:70svh; min-height:440px; overflow:hidden;
  display:grid; place-items:center; color:var(--text); background:var(--ink);
}
.eon-contact-hero__img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.eon-contact-hero__grade{ position:absolute; inset:0; opacity:0; }
.eon-contact-hero__shade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(12,16,20,.45) 0%, rgba(12,16,20,.3) 45%, rgba(12,16,20,.55) 100%);
}
/* season colour settings (contact hero) */
.eon-contact-hero[data-season="snow"]   .eon-contact-hero__img{ filter:saturate(.75) brightness(.95); }
.eon-contact-hero[data-season="snow"]   .eon-contact-hero__grade{ background:rgb(58,70,83); opacity:.45; }
.eon-contact-hero[data-season="rain"]   .eon-contact-hero__img{ filter:saturate(.75) brightness(.95); }
.eon-contact-hero[data-season="rain"]   .eon-contact-hero__grade{ background:rgb(58,70,83); opacity:.58; }
.eon-contact-hero[data-season="summer"] .eon-contact-hero__img{ filter:saturate(1.05) brightness(1.05); }
.eon-contact-hero[data-season="summer"] .eon-contact-hero__grade{ background:rgb(255,176,92); opacity:.45; mix-blend-mode:soft-light; }
.eon-contact-hero[data-season="autumn"] .eon-contact-hero__img{ filter:saturate(.85) brightness(.97); }
.eon-contact-hero[data-season="autumn"] .eon-contact-hero__grade{ background:rgb(196,112,48); opacity:.5; mix-blend-mode:soft-light; }
.eon-contact-hero[data-season="spring"] .eon-contact-hero__img{ filter:saturate(1.12) brightness(1.08); }
.eon-contact-hero[data-season="spring"] .eon-contact-hero__grade{ background:rgb(255,214,196); opacity:.35; mix-blend-mode:soft-light; }

.eon-contact-hero__title{
  --cap:clamp(20px, 3.1vw, 46px);
  position:relative; margin:0; padding:0 var(--pad); max-width:980px; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:calc(var(--cap) * .5);
}
.eon-contact-hero__title .eon-words{ justify-content:center; }

/* ---------- Details + form ---------- */
.eon-contact{
  --ui:var(--font);
  --field-line:rgba(35,31,32,.28);
  position:relative; background:#FFFFFF; color:var(--ink); padding:clamp(56px, 8vw, 120px) var(--pad) var(--end-gap);   /* the same space above the footer on every page */
}
.eon-contact__grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:56px; }
@media (min-width:960px){ .eon-contact__grid{ grid-template-columns:.85fr 1.15fr; gap:clamp(48px, 6vw, 110px); align-items:start; } }

.eon-contact__lead{ --cap:clamp(15px, 1.6vw, 22px); margin:0 0 22px; }
.eon-contact__info{ margin-top:30px; }
.eon-contact__label{ --cap:9px; margin:0 0 14px; opacity:.55; }
.eon-contact__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.eon-contact__list--addr{ gap:22px; }
.eon-contact__list--addr li{ display:flex; flex-direction:column; gap:9px; }
.eon-contact__city{ --cap:clamp(11px, 1vw, 14px); }
.eon-contact__addr{ --cap:9px; opacity:.7; max-width:380px; }
.eon-contact__or{ --cap:9px; margin:34px 0 0; opacity:.65; }

.eon-contact__link{
  display:inline-flex; flex-wrap:wrap; align-items:center; column-gap:calc(var(--cap) * .49); row-gap:calc(var(--cap) * .45);
  color:inherit; text-decoration:none; padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1px; transition:background-size .25s;
}
.eon-contact__link:hover{ background-size:0% 1px; background-position:100% 100%; }
.eon-contact__link:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }
.eon-contact__line{ --cap:clamp(11px, 1vw, 14px); }
.eon-contact__email{ --cap:clamp(14px, 1.35vw, 19px); }
.eon-contact__sep{ display:inline-block; width:1px; height:calc(var(--cap) * 1.3); background:currentColor; opacity:.45; margin:0 calc(var(--cap) * .35); }

/* the form in a white box with filleted corners */
.eon-contact__box{
  background:#FFFFFF; border-radius:16px; padding:clamp(24px, 3.2vw, 48px);
  box-shadow:0 0 0 1px rgba(35,31,32,.06), 0 2px 6px rgba(35,31,32,.06), 0 18px 48px rgba(35,31,32,.12);
}
@media (max-width:639.98px){ .eon-contact__box{ border-radius:12px; } }
.eon-contact__form-title{ --cap:clamp(14px, 1.3vw, 18px); margin:0 0 34px; }
.eon-contact__form{ display:grid; grid-template-columns:1fr; gap:26px 24px; }
@media (min-width:640px){ .eon-contact__form{ grid-template-columns:1fr 1fr; } .eon-contact__full{ grid-column:1 / -1; } }
.eon-contact__field{ display:flex; flex-direction:column; gap:10px; }
.eon-contact__flabel{ --cap:9px; display:flex; align-items:center; column-gap:calc(var(--cap) * .49); }
.eon-contact__req{ font:600 12px/1 var(--ui); margin-left:2px; }
.eon-contact__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* boxed fields with small rounded corners */
.eon-contact input, .eon-contact select, .eon-contact textarea{
  font:400 16px/1.4 var(--ui); color:var(--ink); background:#FFFFFF; width:100%;
  border:1px solid var(--field-line); border-radius:8px; padding:11px 14px; outline:none; margin:0;
  transition:border-color .15s, box-shadow .15s;
}
.eon-contact textarea{ resize:vertical; min-height:120px; }
.eon-contact input::placeholder, .eon-contact textarea::placeholder{ color:rgba(35,31,32,.45); }
.eon-contact input:hover, .eon-contact select:hover, .eon-contact textarea:hover{ border-color:rgba(35,31,32,.5); }
.eon-contact input:focus, .eon-contact select:focus, .eon-contact textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.eon-contact__phone{ display:grid; grid-template-columns:minmax(150px, 210px) 1fr; gap:12px; }
@media (max-width:420px){ .eon-contact__phone{ grid-template-columns:1fr; } }
.eon-contact select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:36px;
  background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) calc(100% - 20px) 55% / 6px 6px no-repeat,
             linear-gradient(-45deg,transparent 50%,var(--ink) 50%) calc(100% - 14px) 55% / 6px 6px no-repeat, #FFFFFF;
}
.eon-contact__err{ display:none; font:12px/1.4 var(--ui); color:#b3261e; }
.eon-contact__field.is-invalid .eon-contact__err{ display:block; }
.eon-contact__field.is-invalid input{ border-color:#b3261e; box-shadow:0 0 0 1px #b3261e; }
.eon-contact__status{ margin:0; font:13px/1.4 var(--ui); color:#b3261e; }
.eon-contact__status:empty{ display:none; }

/* pill-shaped submit, arrow in a black circle */
.eon-contact__submit{
  display:inline-flex; align-items:center; column-gap:20px; width:fit-content; margin-top:4px;
  padding:9px 9px 9px 26px; border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink);
  cursor:pointer; transition:background-color .2s, opacity .2s;
}
.eon-contact__submit-label{ --cap:var(--nav-cap); }
.eon-contact__submit-icon{ position:relative; width:36px; height:36px; overflow:hidden; border-radius:50%; background:var(--ink); color:#FFFFFF; }
.eon-contact__submit-icon > span{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; transition:transform .42s cubic-bezier(.215,.61,.355,1); }
.eon-contact__submit-icon > span:last-child{ transform:translateX(-100%); }
.eon-contact__submit-icon svg{ width:14px; height:14px; fill:currentColor; }
.eon-contact__submit:hover{ background:rgba(35,31,32,.05); }
.eon-contact__submit:hover .eon-contact__submit-icon > span:first-child{ transform:translateX(100%); }
.eon-contact__submit:hover .eon-contact__submit-icon > span:last-child{ transform:none; }
.eon-contact__submit:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.eon-contact__submit:disabled{ opacity:.5; cursor:wait; }

.eon-contact__thanks{ --cap:clamp(14px, 1.3vw, 18px); display:none; margin:0; }
.eon-contact__box.is-sent .eon-contact__thanks{ display:flex; }
.eon-contact__box.is-sent .eon-contact__form, .eon-contact__box.is-sent .eon-contact__form-title{ display:none; }

@media (prefers-reduced-motion: reduce){
  .eon-contact__link, .eon-contact__submit, .eon-contact__submit-icon > span{ transition:none !important; }
}

/* Layout: Dark (EON25 Site → Contact Page → Layout; html.eon-dark, inc/layout.php): the details and
   the form on the EON ink, as the Practice and People pages; the form box on #2E292A (the Practice
   cards' colour), its fields on the ink with white text. White (the default above) is the white page. */
html.eon-dark body{ background:var(--ink); }
html.eon-dark .eon-contact{ background:var(--ink); color:#FFFFFF; --field-line:rgba(255,255,255,.28); }
html.eon-dark .eon-contact__box{ background:#2E292A; box-shadow:none; }
html.eon-dark .eon-contact input, html.eon-dark .eon-contact textarea{ color:#FFFFFF; background:var(--ink); }
html.eon-dark .eon-contact select{
  color:#FFFFFF;
  background:linear-gradient(45deg,transparent 50%,#FFFFFF 50%) calc(100% - 20px) 55% / 6px 6px no-repeat,
             linear-gradient(-45deg,transparent 50%,#FFFFFF 50%) calc(100% - 14px) 55% / 6px 6px no-repeat, var(--ink);
}
html.eon-dark .eon-contact select option{ background:var(--ink); color:#FFFFFF; }
html.eon-dark .eon-contact input::placeholder, html.eon-dark .eon-contact textarea::placeholder{ color:rgba(255,255,255,.45); }
html.eon-dark .eon-contact input:hover, html.eon-dark .eon-contact select:hover, html.eon-dark .eon-contact textarea:hover{ border-color:rgba(255,255,255,.55); }
html.eon-dark .eon-contact input:focus, html.eon-dark .eon-contact select:focus, html.eon-dark .eon-contact textarea:focus{ border-color:#FFFFFF; box-shadow:0 0 0 1px #FFFFFF; }
/* fields the browser fills in itself (saved name, email): kept dark, not the browser's light colour */
html.eon-dark .eon-contact input:-webkit-autofill,
html.eon-dark .eon-contact input:-webkit-autofill:hover{ -webkit-text-fill-color:#FFFFFF; caret-color:#FFFFFF; box-shadow:0 0 0 1000px var(--ink) inset; }
html.eon-dark .eon-contact input:-webkit-autofill:focus{ -webkit-text-fill-color:#FFFFFF; box-shadow:0 0 0 1000px var(--ink) inset, 0 0 0 1px #FFFFFF; }
html.eon-dark .eon-contact__err, html.eon-dark .eon-contact__status{ color:#FF8A80; }
html.eon-dark .eon-contact__field.is-invalid input{ border-color:#FF8A80; box-shadow:0 0 0 1px #FF8A80; }
html.eon-dark .eon-contact__submit{ border-color:#FFFFFF; color:#FFFFFF; }
html.eon-dark .eon-contact__submit-icon{ background:#FFFFFF; color:var(--ink); }
html.eon-dark .eon-contact__submit:hover{ background:rgba(255,255,255,.08); }
html.eon-dark .eon-contact__submit:focus-visible{ outline-color:#FFFFFF; }


/* =====================================================================
   PEOPLE PAGE — scoped to .is-people / .eon-people*
   The whole page flips between brand black and white by the section at the
   screen centre (people-hero.js toggles html.dt).
   ===================================================================== */
html.is-people{ --pg-bg:#FFFFFF; --pg-fg:var(--ink); background:var(--pg-bg); transition:background-color .35s ease; }
html.is-people.dt{ --pg-bg:var(--ink); --pg-fg:#FFFFFF; }
html.is-people body{ background:var(--pg-bg); color:var(--pg-fg); transition:background-color .35s ease, color .35s ease; }
.eon-people .rv-section{ background-color:var(--pg-bg); color:var(--pg-fg); transition:background-color .35s ease, color .35s ease; }
/* The titles (Our core values, Our team, Team, Join our team) are in the Practice page's accent colour (--pa, set by
   page-people.php from EON25 Site → Practice Page → Page colour), so they change with the Practice page (since 1.85.0) */
.eon-people{ --pa:#D16439; }

/* ---------- Hero: ASCII TV ---------- */
.eon-people__hero-head{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  height:100vh; height:100svh; padding:0 var(--pad) var(--pad);
}
.eon-people__title{
  --cap:clamp(13px, 1.45vw, 22px); margin:0; max-width:min(100%, 720px); font:inherit;
  display:flex; flex-wrap:wrap; column-gap:calc(var(--cap) * .49); row-gap:calc(var(--cap) * .42); visibility:hidden;
}
.eon-people__title.is-on{ visibility:visible; }
.eon-people__title .bw{ display:inline-block; }
.eon-people__title .bw svg{ display:block; height:var(--cap); width:auto; fill:currentColor; }
.eon-people__title .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.eon-people__intro{
  position:sticky; top:0; display:flex; justify-content:center; align-items:center;
  width:100%; height:100vh; margin-top:-100vh; padding:var(--pad);
}
.eon-people__video{ z-index:1; display:flex; justify-content:center; align-items:center; width:100%; height:100%; overflow:hidden; }
.eon-people__tv{ position:relative; width:100%; max-width:60vw; margin:0 auto; aspect-ratio:16 / 10; overflow:hidden; transform-origin:center; will-change:transform; }
.eon-people__tv canvas{ display:block; width:100%; height:100%; }
.eon-people__tv-msg{ position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:24px; text-align:center;
  font:14px/1.5 var(--font); color:#fff; background:var(--ink); }
.eon-people__tv-msg[hidden]{ display:none; }
.eon-people__spacer{ height:200vh; }
/* the TV script sizes the lift in em, like the reference */
html.is-people body{ font-size:.833vw; }
@media (max-width:991px){ html.is-people body{ font-size:1.615vw; } }
@media (max-width:767px){ html.is-people body{ font-size:2.086vw; } .eon-people__tv{ max-width:90vw; } }
@media (max-width:479px){ html.is-people body{ font-size:3.738vw; } }

/* ---------- CEO message: one font throughout (no bold) ---------- */
.eon-people__ceo{ position:relative; z-index:3; padding:clamp(80px, 10vw, 150px) var(--pad);
  --ceo-font:var(--font); }
.eon-people__ceo-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:900px){ .eon-people__ceo-grid{ grid-template-columns:minmax(260px, .75fr) 1.6fr; gap:clamp(48px, 7vw, 110px); } }
.eon-people__ceo-photo{ margin:0; width:100%; max-width:360px; aspect-ratio:330 / 465; }
.eon-people__ceo-photo img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
@media (max-width:899.98px){ .eon-people__ceo-photo{ max-width:300px; } }
.eon-people__ceo-name, .eon-people__ceo-role, .eon-people__ceo-body{ font-family:var(--ceo-font); font-weight:400; }
.eon-people__ceo-name{ margin:0 0 10px; font-size:clamp(20px, 1.9vw, 28px); line-height:1.2; letter-spacing:.02em; text-transform:uppercase; }
.eon-people__ceo-role{ margin:0; font-size:clamp(15px, 1.2vw, 18px); line-height:1.4; opacity:.85; }
.eon-people__ceo-rule{ width:min(280px, 60%); height:1px; background:currentColor; opacity:.5; margin:26px 0 34px; }
.eon-people__ceo-body{ max-width:700px; font-size:clamp(15px, 1.15vw, 17px); line-height:1.75;
  color:color-mix(in srgb, var(--pg-fg) 82%, transparent); transition:color .35s ease; }
.eon-people__ceo-body p{ margin:0 0 1em; } .eon-people__ceo-body p:last-child{ margin:0; }
.eon-people__ceo-body strong{ font-weight:700; color:var(--pg-fg); }   /* bold words (Team → People Page → Message) */
.eon-people__ceo-sig{ display:flex; justify-content:flex-end; max-width:700px; margin-top:28px; }
.eon-people__ceo-sig img{ display:block; width:auto; height:84px; max-width:160px; object-fit:contain; transition:filter .35s ease; }
html.is-people:not(.dt) .eon-people__ceo-sig img{ filter:invert(1); }   /* white signature turns dark on white */

/* ---------- Team: 6 across on wide screens, 3:4 portraits ---------- */
.eon-people__team{ position:relative; z-index:3; padding:clamp(80px, 10vw, 160px) var(--pad) clamp(80px, 9vw, 140px); }
.eon-people__team-title{ --cap:clamp(14px, 1.3vw, 18px); margin:0 0 clamp(32px, 4vw, 56px); font:inherit; color:var(--pa); }
.eon-people__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(28px, 3vw, 44px) clamp(12px, 1.5vw, 20px); }
@media (min-width:640px){ .eon-people__grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:900px){ .eon-people__grid{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:1200px){ .eon-people__grid{ grid-template-columns:repeat(6, 1fr); } }
.eon-people__photo{ position:relative; aspect-ratio:3 / 4; overflow:hidden; margin-bottom:14px; display:grid; place-items:center;
  background:rgba(128,128,128,.14); }
.eon-people__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.eon-people__initials{ --cap:clamp(18px, 2vw, 30px); opacity:.25; }
.eon-people__name{ --cap:11px; margin:0 0 8px; }
.eon-people__role{ --cap:9px; margin:0 0 6px; opacity:.72; }
.eon-people__office{ --cap:9px; margin:0; opacity:.45; }
.eon-people__empty{ font:15px/1.5 var(--font); opacity:.7; }

/* ---------- Our team: the title on the left (the Practice page's accent colour, since 1.85.0), the text on the right ----------
   Same columns as the CEO message above, so the text lines up under it. */
.eon-people__ourteam{ position:relative; z-index:3; padding:clamp(70px, 8vw, 130px) var(--pad); }
.eon-people__ourteam-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:22px; align-items:start; }
@media (min-width:900px){ .eon-people__ourteam-grid{ grid-template-columns:minmax(260px, .75fr) 1.6fr; gap:clamp(48px, 7vw, 110px); } }
.eon-people__ourteam-title{ margin:0; font:500 clamp(24px, 2.2vw, 36px)/1.15 var(--font); letter-spacing:.02em;
  text-transform:uppercase; color:var(--pa); }
.eon-people__ourteam-text{ max-width:700px; font:400 clamp(15px, 1.15vw, 17px)/1.75 var(--font);
  color:color-mix(in srgb, var(--pg-fg) 74%, transparent); transition:color .35s ease; }
.eon-people__ourteam-text p{ margin:0 0 1.25em; } .eon-people__ourteam-text p:last-child{ margin:0; }
.eon-people__ourteam-text strong{ font-weight:700; color:var(--pg-fg); }

/* Our core values (Team → People Page → Our core values): a full-screen photo (black and white or original colours), darkened, with the values
   over it. With JavaScript (.is-live) the part stays on screen while the visitor scrolls and the values come one at a time:
   a giant outlined number in the accent colour (--va), the value next to it, and a tab for each value under them; the line
   of the tab showing fills as the visitor scrolls (--fill, people.js). --vn: the number of values. */
.eon-people__values{ --vn:5; --va:#D16439; --vfg:var(--pg-fg); position:relative; z-index:3; }
.eon-people__values.has-photo{ --vfg:#FFFFFF; }
.eon-people__values.is-live{ height:calc(100vh + (var(--vn) - 1) * 65vh); }
.eon-people__values-pin{ position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; min-height:100vh;
  padding:clamp(96px, 12vh, 130px) var(--pad) clamp(32px, 6vh, 80px); color:var(--vfg); }
.eon-people__values.is-live .eon-people__values-pin{ position:sticky; top:0; height:100vh; }
.eon-people__values.has-photo .eon-people__values-pin{ background:#000; }
.eon-people__values-bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.42); }
.eon-people__values-shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55)); }
.eon-people__values:not(.has-photo) .eon-people__values-shade{ display:none; }
/* Photo colours: Original – the photo in its own colours, darkened by the Shadow % (--vshade) under the same top and bottom shading */
.eon-people__values.is-original .eon-people__values-bg{ filter:none; }
.eon-people__values.is-original .eon-people__values-shade{ background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55)), rgba(0,0,0,var(--vshade, .45)); }
.eon-people__values-in{ width:100%; max-width:1180px; margin:0 auto; }
.eon-people__values-title{ margin:0; font:500 clamp(24px, 2.2vw, 36px)/1.15 var(--font); letter-spacing:.02em; text-transform:uppercase; color:var(--pa); }
.eon-people__values-stage{ display:grid; grid-template-columns:auto 1fr; align-items:end; gap:clamp(20px, 4vw, 64px);
  margin:clamp(28px, 4vw, 56px) 0 clamp(36px, 4.5vw, 64px); min-height:clamp(170px, min(24vw, 38vh), 360px); }
.eon-people__values-big{ font:700 clamp(120px, min(22vw, 36vh), 360px)/.78 var(--font); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:2px var(--va); }
.eon-people__values-texts{ display:grid; }
.eon-people__values-text{ grid-area:1 / 1; max-width:12ch; margin:0; font:700 clamp(40px, 5.6vw, 100px)/1 var(--font); letter-spacing:-.025em; text-wrap:balance; color:var(--vfg);
  opacity:0; visibility:hidden; }
/* the word and its number change together: the old word goes at once, the new one and the number appear at once (a quick 0.15 s fade from 40 %) */
.eon-people__values-text.is-on{ opacity:1; visibility:visible; animation:eon-value-in .15s ease-out; }
.eon-people__values-big.is-in{ animation:eon-value-in .15s ease-out; }
@keyframes eon-value-in{ from{ opacity:.4; } to{ opacity:1; } }   /* readable from the first frame */
.eon-people__values-tabs{ display:grid; grid-template-columns:repeat(var(--vn), 1fr); gap:clamp(10px, 1.4vw, 20px); }
.eon-people__values-tab{ position:relative; appearance:none; margin:0; padding:16px 0 0; border:0; background:none; text-align:left; cursor:pointer;
  font:700 13px/1.3 var(--font); letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, var(--vfg) 55%, transparent); }
.eon-people__values-tab::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:color-mix(in srgb, var(--vfg) 25%, transparent); }
.eon-people__values-tab::after{ content:""; position:absolute; top:0; left:0; width:0; height:2px; background:var(--va); }
.eon-people__values-tab[aria-selected="true"]{ color:var(--vfg); }
.eon-people__values-tab[aria-selected="true"]::after{ width:var(--fill, 100%); }
.eon-people__values-tab span{ margin-right:.5em; color:var(--va); }
.eon-people__values-tab em{ font-style:normal; }
.eon-people__values-tab:focus-visible{ outline:2px solid var(--va); outline-offset:4px; }
/* without JavaScript: all the values one under the other, no number and no tabs */
.eon-people__values:not(.is-ready) .eon-people__values-text{ grid-area:auto; opacity:1; visibility:visible; transform:none; }
.eon-people__values:not(.is-ready) .eon-people__values-big, .eon-people__values:not(.is-ready) .eon-people__values-tabs{ display:none; }
@media (max-width:767.98px){
  .eon-people__values-stage{ grid-template-columns:1fr; gap:6px; }
  .eon-people__values-big{ font-size:46vw; }
  .eon-people__values-text{ font-size:clamp(36px, 11vw, 54px); }
  .eon-people__values-tab em{ display:none; }   /* phones: the tabs show their numbers only */
  .eon-people__values-tab span{ margin:0; }
}
@media (prefers-reduced-motion:reduce){ .eon-people__values-text.is-on, .eon-people__values-big.is-in{ animation:none; } }

/* ---------- Team photos: full width, black and white (or original colours), the caption in big capitals over the bottom ----------
   The caption's words start black and turn white one after another as the page scrolls (people.js sets
   .is-scrub on the caption and .is-lit on each word; without the script, or with "reduce motion", all white).
   Several photos take turns with a soft fade (people.js, .is-on). */
.eon-people__photos{ position:relative; z-index:3; overflow:hidden; isolation:isolate; height:clamp(420px, 46vw, 92vh); background:var(--ink); }
.eon-people__photos-stage{ position:absolute; inset:0; }
.eon-people__photos-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);
  opacity:0; transition:opacity 1.2s ease; }
.eon-people__photos-img.is-on{ opacity:1; }
/* Photo colours: Original (since 1.86.0) – the photos in their own colours, darkened by the Shadow % (--pshade) so the
   white caption stays readable; Black and white keeps the look above */
.eon-people__photos.is-original .eon-people__photos-img{ filter:none; }
.eon-people__photos.is-original .eon-people__photos-stage::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--pshade, .45)); pointer-events:none; }
.eon-people__photos-caption{ position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(18px, 2.6vw, 52px); margin:0;
  text-align:center; font:700 clamp(34px, 5.2vw, 104px)/.95 var(--font); letter-spacing:-.015em; text-transform:uppercase;
  color:#FFFFFF; pointer-events:none; }
.eon-people__photos-word{ transition:color .35s ease; }
.eon-people__photos-caption.is-scrub .eon-people__photos-word{ color:#111111; }
.eon-people__photos-caption.is-scrub .eon-people__photos-word.is-lit{ color:#FFFFFF; }
@media (max-width:767.98px){
  .eon-people__photos{ height:auto; aspect-ratio:4 / 3; }
  .eon-people__photos-caption{ font-size:clamp(24px, 7.4vw, 48px); bottom:16px; }
}
@media (prefers-reduced-motion:reduce){ .eon-people__photos-img, .eon-people__photos-word{ transition:none; } }

/* ---------- Join our team (dark: the page flips back to black) ---------- */
.eon-people__join{ position:relative; z-index:3; padding:clamp(90px, 11vw, 170px) var(--pad) var(--end-gap); }   /* the same space above the footer on every page */
.eon-people__join-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
@media (min-width:900px){ .eon-people__join-grid{ grid-template-columns:1fr 1.2fr; gap:clamp(48px, 7vw, 110px); } }
.eon-people__join-title{ --cap:clamp(26px, 3.6vw, 56px); margin:0; font:inherit; color:var(--pa); }
.eon-people__join-text{ margin:0 0 14px; max-width:560px; font:400 clamp(17px, 1.5vw, 22px)/1.5 var(--font); }
.eon-people__join-text--soft{ color:color-mix(in srgb, var(--pg-fg) 72%, transparent); margin-bottom:34px; }
.eon-people__join-btn{
  display:inline-flex; align-items:center; column-gap:20px; padding:9px 9px 9px 26px; border:1px solid currentColor; border-radius:999px;
  color:inherit; background:transparent; font:inherit; cursor:pointer; transition:background-color .2s;
}
.eon-people__join-btn-label{ --cap:var(--nav-cap); }
.eon-people__join-btn-icon{ position:relative; width:36px; height:36px; overflow:hidden; border-radius:50%; background:var(--pg-fg); color:var(--pg-bg); transition:background-color .35s, color .35s; }
.eon-people__join-btn-icon > span{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; transition:transform .42s cubic-bezier(.215,.61,.355,1); }
.eon-people__join-btn-icon > span:last-child{ transform:translateX(-100%); }
.eon-people__join-btn-icon svg{ width:14px; height:14px; fill:currentColor; }
.eon-people__join-btn:hover{ background:color-mix(in srgb, var(--pg-fg) 8%, transparent); }
.eon-people__join-btn:hover .eon-people__join-btn-icon > span:first-child{ transform:translateX(100%); }
.eon-people__join-btn:hover .eon-people__join-btn-icon > span:last-child{ transform:none; }
.eon-people__join-btn:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }

/* ---------- Apply pop-up ---------- */
.eon-apply{ width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:16px; overflow:visible;
  background:#FFFFFF; color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.eon-apply::backdrop{ background:rgba(18,16,17,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.eon-apply[open]{ animation:eon-apply-in .35s cubic-bezier(.2,.8,.2,1); }
.eon-apply[open]::backdrop{ animation:eon-apply-fade .35s ease; }
.eon-apply.is-closing{ animation:eon-apply-out .22s ease forwards; }
.eon-apply.is-closing::backdrop{ animation:eon-apply-fade .22s ease reverse forwards; }
@keyframes eon-apply-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes eon-apply-out{ to{ opacity:0; transform:translateY(8px) scale(.98); } }
@keyframes eon-apply-fade{ from{ opacity:0; } to{ opacity:1; } }
.eon-apply__inner{ position:relative; padding:clamp(28px, 4vw, 44px); }
.eon-apply__close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
.eon-apply__close:hover{ background:rgba(35,31,32,.07); }
.eon-apply__close::before, .eon-apply__close::after{ content:""; position:absolute; left:11px; right:11px; top:19px; height:2px; background:currentColor; }
.eon-apply__close::before{ transform:rotate(45deg); } .eon-apply__close::after{ transform:rotate(-45deg); }
.eon-apply__close:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.eon-apply__kicker{ --cap:9px; margin:0 0 16px; opacity:.55; }
.eon-apply__title{ --cap:clamp(20px, 2.2vw, 28px); margin:0 0 20px; font:inherit; }
.eon-apply__text{ margin:0 0 26px; font:400 16px/1.6 var(--font); color:rgba(35,31,32,.8); }
.eon-apply__email{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 26px; padding:14px 16px;
  border:1px solid rgba(35,31,32,.18); border-radius:10px; font:500 16px/1.3 var(--font); overflow-wrap:anywhere; }
.eon-apply__copy{ flex:none; padding:8px 14px; border:1px solid rgba(35,31,32,.25); border-radius:999px; background:transparent;
  font:500 13px/1 var(--font); color:inherit; cursor:pointer; }
.eon-apply__copy:hover{ background:rgba(35,31,32,.06); }
.eon-apply__send{ display:inline-flex; align-items:center; column-gap:18px; padding:9px 9px 9px 24px; border-radius:999px; background:var(--ink); color:#FFFFFF; text-decoration:none; }
.eon-apply__send-label{ --cap:var(--nav-cap); }
.eon-apply__send-icon{ display:flex; justify-content:center; align-items:center; width:36px; height:36px; border-radius:50%; background:#FFFFFF; color:var(--ink); }
.eon-apply__send-icon svg{ width:14px; height:14px; fill:currentColor; transition:transform .3s cubic-bezier(.215,.61,.355,1); }
.eon-apply__send:hover .eon-apply__send-icon svg{ transform:translateX(3px); }
.eon-apply__send:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .eon-apply[open], .eon-apply.is-closing, .eon-apply::backdrop{ animation:none !important; }
  .eon-people__join-btn, .eon-people__join-btn-icon > span{ transition:none !important; }
}

/* =====================================================================
   PLAIN PAGES (page.php, 404.php, index.php): title and content on white,
   under the EON header; the footer follows
   ===================================================================== */
.eon-plain{
  position:relative; background:#FFFFFF; color:var(--ink);
  padding:calc(var(--pad) * 3 + var(--logo-sq) + env(safe-area-inset-top,0px)) var(--pad) var(--end-gap);   /* the same space above the footer on every page */
}
/* A short page: the footer follows the text at the same distance as everywhere; below it, the footer colour fills the screen */
html:has(body > .eon-plain), body:has(> .eon-plain){ background:var(--ink); }
.eon-plain__inner{ max-width:760px; margin:0 auto; }
.eon-plain__inner > :last-child{ margin-bottom:0; }
.eon-plain__kicker{ margin:0 0 14px; font:500 12px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; opacity:.55; }
.eon-plain__title{ margin:0 0 28px; font:500 clamp(26px, 3vw, 44px)/1.15 var(--font); letter-spacing:-.01em; }
.eon-plain__text, .eon-plain__content{ font:400 clamp(16px, 1.15vw, 18px)/1.7 var(--font); }
.eon-plain__text{ margin:0 0 1.2em; }
.eon-plain__content > *{ margin-top:0; margin-bottom:1.2em; }
.eon-plain__content > :last-child{ margin-bottom:0; }
.eon-plain__content h2, .eon-plain__content h3{ font-weight:500; line-height:1.3; margin-top:1.8em; }
.eon-plain__content h2{ font-size:1.35em; } .eon-plain__content h3{ font-size:1.15em; }
.eon-plain__content ul, .eon-plain__content ol{ padding-left:1.4em; }
.eon-plain__content img{ max-width:100%; height:auto; }
.eon-plain a{ color:inherit; }
.eon-plain__entry{ padding:28px 0; border-top:1px solid rgba(35,31,32,.12); }
.eon-plain__entry-title{ margin:0 0 10px; font:500 clamp(18px, 1.6vw, 24px)/1.25 var(--font); }
.eon-plain__entry-title a{ text-decoration:none; }
.eon-plain__entry-title a:hover, .eon-plain__entry-title a:focus-visible{ text-decoration:underline; }

/* Projects page (archive-project.php): assets/css/projects-page.css */