/*
Theme Name:  EON25
Theme URI:   https://eon25.site
Author:      EON
Description: EON25 landscape + urban website: logo reveal over a background video with an ASCII sentence, featured projects, practice, people and contact.
Version:     1.55.1
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; }
  @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:block; width:100vw; height:100vh; height:100dvh; z-index:30; }

  .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 */
  /* --logo-std: the usual header logo width (also the footer logo); --logo-w: this page's header logo
     (the homepage makes it bigger) */
  :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; }
  }
  /* nav sits on the wordmark's optical centre line (wordmark = top 72% of the logo height) */
  .main-nav{ margin-top:calc(var(--logo-w) * 295.36 / 1301.65 * 0.36 - 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-w) * 295.36 / 1301.65 / 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 letters spin a full turn in 3D, with carved 45° edges (built by
     logo3d.js): 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 homepage's is bigger (60% of the 3D logo study's size,
     where an E·O·N row is 2 grid columns wide); other pages keep the usual size. */
  html.home-page{ --logo-ref:calc((100vw - 3rem - (5 * 0.75rem)) / 6 * 2 + 0.75rem); --logo-w:calc(var(--logo-ref) * 2.004 * 0.6); }
  @media (min-width:768px){ html.home-page{ --logo-ref:calc((100vw - 5rem - (11 * 1.25rem)) / 12 * 2 + 1.25rem); } }
  .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; }
  /* 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); }

/* =====================================================================
   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) and, below it, the email exactly as wide
   (footer.js draws the logo and sets the email's letter size) */
.eon-footer__logo{ display:block; width:var(--logo-std); margin:0 0 calc(var(--logo-std) * .1); color:inherit; text-decoration:none; }
.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__email{ --cap:calc(var(--logo-std) * .055); width:fit-content; }

.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:flex-start; align-items:center; gap:16px;
  margin-top:clamp(56px, 8vw, 120px); padding-top:18px; border-top:1px solid rgba(255,255,255,.18);
}
.eon-footer__legal{ opacity:.55; justify-content:flex-start; }
@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);
}
.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__icon{ display:block; width:38px; height:28px; margin-bottom:22px; }
.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; }
}


/* =====================================================================
   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; }

/* ---------- 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-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; }
.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; }

/* ---------- Team band: full-width black-and-white photo, 406px tall; statement left, team size right ----------
   The number counts up in the brand lettering (people.js); the accent line (--band-accent, the Practice page
   accent) draws under it and the label fades in. */
.eon-people__band{ --band-accent:#B06028; position:relative; z-index:3; overflow:hidden; display:flex; align-items:center;
  min-height:406px; padding:40px var(--pad); background:var(--ink); color:#FFFFFF; }
.eon-people__band-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.eon-people__band-shade{ position:absolute; inset:0; background:
  linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.45) 100%),
  linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25)); }
.eon-people__band-grid{ position:relative; z-index:1; width:100%; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; column-gap:clamp(32px, 5vw, 96px); }
.eon-people__band-statement{ margin:0; max-width:16em; font:400 clamp(26px, 2.05vw, 42px)/1.32 var(--font); letter-spacing:-0.005em; color:#FFFFFF; }
.eon-people__band-stat{ justify-self:start; width:min(100%, clamp(280px, 22vw, 440px)); }
.eon-people__band-num{ --cap:clamp(40px, 2.9vw, 60px); display:flex; align-items:flex-start; gap:.12em; height:var(--cap); margin-left:2px; }
.eon-people__band-num svg{ display:block; height:var(--cap); width:auto; fill:currentColor; }
.eon-people__band-plus{ display:flex; align-items:center; height:var(--cap); opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease; }
.eon-people__band-plus svg{ height:calc(var(--cap) * .42); }
.eon-people__band.is-done .eon-people__band-plus{ opacity:1; transform:none; }
.eon-people__band-line{ display:block; height:2px; margin:clamp(18px, 1.6vw, 28px) 0 clamp(12px, 1vw, 18px); background:var(--band-accent);
  transform:scaleX(0); transform-origin:left center; transition:transform 1.5s cubic-bezier(.22,.61,.36,1); }
.eon-people__band.is-on .eon-people__band-line{ transform:none; }
.eon-people__band-label{ margin:0; font:400 clamp(17px, 1.3vw, 26px)/1.3 var(--font); color:#FFFFFF;
  opacity:0; transform:translateY(6px); transition:opacity .6s ease .5s, transform .6s ease .5s; }
.eon-people__band.is-on .eon-people__band-label{ opacity:1; transform:none; }
@media (max-width:767.98px){
  .eon-people__band-grid{ grid-template-columns:1fr; row-gap:32px; }
  .eon-people__band-shade{ background:rgba(0,0,0,.5); }
}

/* ---------- 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); }
.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; }
.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__band-plus, .eon-people__band-line, .eon-people__band-label, .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); min-height:70vh; min-height:70svh;
  padding:calc(var(--pad) * 3 + var(--logo-w) * 0.227 + env(safe-area-inset-top,0px)) var(--pad) calc(var(--pad) * 3);
}
.eon-plain__inner{ max-width:760px; margin:0 auto; }
.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 */