/* ==========================================================================
   EON25 — Practice page (page-practice.php), since 1.32.0
   A black page with one accent colour (EON25 Site → Practice Page; --pp-accent, set on <html>).
   Top to bottom: lines · Studio snapshot · picture with Our vision / Our mission · What we do
   (stage cards that stack) · Our practice · Our principles · Our clients · Have a project in mind?
   Type: the site font, Helvetica Neue (style.css): paragraphs, headings and numbers Light; section
   labels, tabs and practice titles Bold.
   ========================================================================== */

.pp-html {
  --pp-accent: #B06028;                  /* overwritten from the admin (on <html>) */
  --pp-on-accent: #FFFFFF;               /* text on the accent: white, or dark on a light accent */
  --pp-ink: var(--ink, #231F20);
  --pp-card: #2E292A;                    /* principle cards */
  --pp-grey: #A9B4BC;                    /* principle texts */
  --pp-line: rgba(255, 255, 255, 0.12);
  --pp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pp-sans: var(--font);                /* Helvetica Neue (style.css) */
  --pp-label-font: var(--font);
  --pp-gutter: 100px;                    /* page side margins (16px on phones and tablets) */
  --pp-par: 16px;                        /* paragraphs: 14px phones and tablets, 20px large screens */
  --pp-label: max(18px, 1.5142vw);       /* section labels: 0.015142 × the screen width, at least 18px */
  --pp-display: 40px;                    /* big headings (What we do, Our clients) */
  --pp-stage-title: 32px;                /* stage titles (Stage Zero, The Studio…) */
  --pp-num: 20px;                        /* stage numbers */
  --pp-pnum: 32px;                       /* principle numbers (01., 02.…) */
  --pp-card-title: 24px;                 /* principle titles */
  --pp-sec: 40px;                        /* space above and below each part */
}
.pp-html body { margin: 0; background: var(--pp-ink); color: #fff; font-family: var(--font, "Helvetica Neue", Helvetica, Arial, sans-serif); }
.pp-body *, .pp-body *::before, .pp-body *::after { box-sizing: border-box; }
.pp-main p, .pp-main h1, .pp-main h2, .pp-main h3, .pp-main ul, .pp-main ol { margin: 0; padding: 0; }
.pp-main ul, .pp-main ol { list-style: none; }
.pp-main button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pp-wrap { padding-inline: var(--pad); }
.pp-cnt { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pp-gutter); }
.pp-sec { padding-block: var(--pp-sec); }
.pp-accent { color: var(--pp-accent); }

/* ---------- Header: a bar behind it takes the colour of what is under it ---------- */
.pp-html .site-header { padding-bottom: calc(var(--pad) * 0.55); }
.pp-html .site-header > .site-logo,
.pp-html .site-header > .main-nav { position: relative; z-index: 1; }
.pp-html:not(.menu-open) .site-header[data-theme="light"] { color: var(--pp-ink); }
.pp-html:not(.menu-open) .site-header[data-theme="dark"],
.pp-html:not(.menu-open) .site-header[data-theme="transparent"] { color: var(--text, #fff); }
.pp-html .pl-header__masks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pp-html .pl-header__mask { position: absolute; inset: 0; pointer-events: none; clip-path: inset(100% 0 100% 0); }
.pp-html .pl-header__mask--light { background-color: #fff; }
.pp-html .pl-header__mask--dark { background-color: var(--pp-ink); }
.pp-html .pl-header__mask--transparent { background-color: transparent; }
.pp-html:not(.menu-open) .site-header[data-theme="light"] .pl-header__mask--light,
.pp-html:not(.menu-open) .site-header[data-theme="dark"] .pl-header__mask--dark,
.pp-html:not(.menu-open) .site-header[data-theme="transparent"] .pl-header__mask--transparent { clip-path: inset(0 0 0 0); }
html.pp-html.menu-open .mobile-menu { z-index: 1000; }
html.pp-html.menu-open .site-header { z-index: 1001; }

/* ---------- Letter-by-letter and word-by-word entrances (practice-page.js) ---------- */
.pp-split .pp-w { display: inline-block; white-space: nowrap; }
.pp-split .pp-u {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.7s var(--pp-ease), transform 0.9s var(--pp-ease);
  transition-delay: calc(var(--i, 0) * var(--pp-step, 22ms));
}
.pp-split.is-in .pp-u { opacity: 1; transform: none; }
[data-pp-words].pp-split { --pp-step: 14ms; }

/* ---------- Shared pieces ---------- */
/* Paragraphs: Inter Light; bold words chosen in the admin (B button) in Inter Bold */
.pp-par { font-family: var(--pp-sans); font-weight: 300; font-size: var(--pp-par); line-height: 1.5; }
.pp-par strong { font-weight: 700; }
/* Section label: Helvetica Neue Bold in capitals, the accent colour, a line under it */
.pp-label { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.pp-label__text { font-family: var(--pp-label-font); font-weight: 700; font-size: var(--pp-label); line-height: 1.5; text-transform: uppercase; color: var(--pp-accent); }
.pp-label__line { display: block; width: 100%; height: 2px; background: var(--pp-accent); }
/* Big headings (What we do, Our clients) */
.pp-display { font-family: var(--pp-sans); font-weight: 300; font-size: var(--pp-display); line-height: 1.08; max-width: 500px; }
/* Cut corner (40px) and the accent triangle in it (32px) */
.pp-cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); }
.pp-corner { position: relative; }
.pp-corner::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; width: 32px; height: 32px; background: var(--pp-accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; }

/* ==========================================================================
   2. Studio snapshot: the text on the right (700px wide)
   ========================================================================== */
.pp-snap__text { max-width: 700px; margin-left: auto !important; }

/* ==========================================================================
   3. Picture with Our vision / Our mission
   65% of the screen height (55% on phones); taller only if the text needs it
   ========================================================================== */
.pp-hero { min-height: 65vh; min-height: 65svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 60px; overflow: hidden; background: var(--pp-ink); }
.pp-hero__media { position: absolute; inset: 0; }
.pp-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the shade: nearly solid at the bottom behind the text, easing off upwards, a soft band under the header */
.pp-hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(35, 31, 32, 0.6) 0%, rgba(35, 31, 32, 0) 22%),
    linear-gradient(to top, rgba(35, 31, 32, 0.95) 0%, rgba(35, 31, 32, 0.7) 28%, rgba(35, 31, 32, 0.25) 62%, rgba(35, 31, 32, 0.2) 100%);
}
.pp-hero.is-plain .pp-hero__shade { display: none; }
.pp-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 32px; }
/* both statements take the same place; the one showing fades in */
.pp-hero__statements { display: grid; max-width: min(860px, 100%); }
.pp-hero__statement { grid-area: 1 / 1; color: #fff; transition: opacity 0.6s var(--pp-ease), transform 0.6s var(--pp-ease); }
.pp-hero.is-live .pp-hero__statement { opacity: 0; transform: translateY(8px); visibility: hidden; }
.pp-hero.is-live .pp-hero__statement.is-on { opacity: 1; transform: none; visibility: visible; }
.pp-hero__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.pp-hero__tab { display: flex; flex-direction: column; gap: 8px; text-align: left; color: #fff !important; }
.pp-hero__bar { display: block; height: 2px; background: #fff; transition: background-color 0.4s var(--pp-ease); }
.pp-hero__tab-label { font-family: var(--pp-label-font); font-weight: 700; font-size: var(--pp-label); line-height: 1.5; text-transform: uppercase; transition: color 0.4s var(--pp-ease); }
.pp-hero__tab.is-on .pp-hero__bar { background: var(--pp-accent); }
.pp-hero__tab.is-on .pp-hero__tab-label { color: var(--pp-accent); }
.pp-hero__tab:focus-visible { outline: 1px solid #fff; outline-offset: 6px; }

/* ==========================================================================
   4. What we do: stage cards; each stays on screen while the next one slides over it
   ========================================================================== */
.pp-stage { position: sticky; top: 75px; padding-block: 80px; background: var(--pp-ink); }
.pp-stage__grid { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; }
.pp-stage__grid.is-text-only { grid-template-columns: minmax(0, 900px); }
.pp-stage__body { display: flex; align-items: baseline; gap: 48px; padding: 32px 48px 32px 0; }   /* the number sits on the title's line */
.pp-stage__num { flex: none; font-family: var(--pp-sans); font-weight: 300; font-size: var(--pp-num); line-height: 1.33; color: var(--pp-accent); }
.pp-stage__col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.pp-stage__title { font-family: var(--pp-sans); font-weight: 300; font-size: var(--pp-stage-title); line-height: 1.08; color: var(--pp-accent); }
.pp-stage__photo { aspect-ratio: 4 / 3; }
.pp-stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   5. Our practice: cards; under the mouse (or tapped on phones) they take the accent colour
   ========================================================================== */
.pp-values__grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; }
.pp-value { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 24px 12px 16px; border-radius: 16px; transition: background-color 0.2s; }
.pp-value:hover, .pp-value.is-tapped { background-color: var(--pp-accent); }
.pp-value__icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; }
.pp-value__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pp-value__title { font-family: var(--pp-label-font); font-weight: 700; font-size: max(16px, 1.25vw); line-height: 1.33; text-transform: uppercase; text-align: center; color: #fff; }
.pp-value:hover .pp-value__title, .pp-value.is-tapped .pp-value__title { color: var(--pp-on-accent); }

/* ==========================================================================
   6. Our principles: numbered cards with the cut corner; under the mouse they take the accent colour
   ========================================================================== */
.pp-principles__list { display: flex; flex-direction: column; gap: 24px; }
.pp-principle { display: flex; align-items: center; gap: 16px; padding: 24px 44px; }
.pp-principle::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--pp-card); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); transition: background-color 0.3s; }
.pp-principle > * { position: relative; z-index: 1; }
.pp-principle__num { flex: none; font-family: var(--pp-sans); font-weight: 300; font-size: var(--pp-pnum); line-height: 1.08; }
.pp-principle__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-principle__title { font-family: var(--pp-sans); font-weight: 300; font-size: var(--pp-card-title); line-height: 1.33; }
.pp-principle__text { max-width: 700px; color: var(--pp-grey); transition: color 0.3s; }
.pp-principle:hover::before { background: var(--pp-accent); }
.pp-principle:hover, .pp-principle:hover .pp-principle__text { color: var(--pp-on-accent); }

/* ==========================================================================
   7. Our clients: two endless rows that move in opposite directions (practice-page.js)
   ========================================================================== */
.pp-clients__rows { margin-top: 40px; }
.pp-clients__row { --per: 6; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pp-clients__row + .pp-clients__row { border-top: 1px solid var(--pp-line); }
.pp-clients__row.is-dragging { cursor: grabbing; }
.pp-clients__track { display: flex; transition: transform 1s var(--pp-ease); will-change: transform; }
.pp-clients__row[data-pp-row="-1"] .pp-clients__track { flex-direction: row-reverse; }
.pp-clients__row.is-dragging .pp-clients__track { transition: none; }
.pp-clients__row.is-free .pp-clients__track { transition: none; }
.pp-client { flex: 0 0 calc(100% / var(--per)); height: clamp(120px, 12vw, 184px); display: grid; place-items: center; padding: 0 clamp(12px, 2vw, 32px); }
/* logos are uploaded dark on transparent: shown light on the black page */
.pp-client__logo { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; -webkit-user-drag: none; pointer-events: none; filter: invert(1) hue-rotate(180deg); }   /* the row takes the drag, never the picture */
.pp-client__name { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); text-align: center; }
.pp-clients__dots { display: flex; justify-content: center; gap: 4px; margin-top: 24px; }
.pp-clients__dots[hidden] { display: none; }
.pp-clients__dot { display: grid; place-items: center; width: 22px; height: 22px; }
.pp-clients__dot i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background-color 0.3s; }
.pp-clients__dot[aria-current="true"] i { background: #fff; }
.pp-clients__dot:focus-visible { outline: 1px solid #fff; outline-offset: 1px; border-radius: 50%; }

/* ==========================================================================
   Links with an arrow (get in touch)
   ========================================================================== */
.pp-arrow-link { display: inline-flex; align-items: baseline; gap: 0.5em; color: inherit; text-decoration: none; }
.pp-arrow-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.45s var(--pp-ease); }
.pp-arrow-link i { font-style: normal; display: inline-block; transition: transform 0.45s var(--pp-ease); }
.pp-arrow-link:hover span { background-size: 0 1px; background-position: 100% 100%; }
.pp-arrow-link:hover i { transform: translateX(6px); }
.pp-arrow-link:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ==========================================================================
   8. Have a project in mind? (before the footer)
   ========================================================================== */
.pp-cta { background: var(--pp-ink); color: #fff; padding: clamp(110px, 16vh, 200px) 0 clamp(100px, 14vh, 180px); }
.pp-cta__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 30%); align-items: end; column-gap: clamp(32px, 5vw, 96px); }
.pp-cta__title { font-size: clamp(32px, 3.34vw, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }   /* 32 · 48 (1440) · 64; one line wherever it fits */
.pp-cta__text { font-family: var(--pp-sans); font-weight: 400; font-size: clamp(16px, calc(12px + 0.35vw), 18px); line-height: 1.6; }
.pp-cta__button { margin-top: clamp(20px, 2vw, 32px); font-size: clamp(18px, 1.5vw, 26px); font-weight: 700; }

/* ==========================================================================
   Screen sizes
   ========================================================================== */
@media (min-width: 1920px) {
  .pp-html { --pp-par: 20px; --pp-display: 56px; --pp-stage-title: 44px; --pp-num: 28px; --pp-pnum: 44px; --pp-card-title: 32px; --pp-sec: 60px; }
  .pp-display { max-width: 700px; }
  .pp-stage { padding-block: 100px; }
}
@media (max-width: 991.98px) {
  .pp-html { --pp-gutter: 16px; --pp-par: 14px; --pp-display: 36px; --pp-stage-title: 28px; --pp-num: 18px; --pp-pnum: 30px; --pp-card-title: 20px; }
  .pp-label { gap: 32px; }
  .pp-snap__text { max-width: none; margin-left: 0 !important; }
  .pp-stage { top: 40px; }
  /* Our practice: two cards side by side */
  .pp-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pp-value { gap: 20px; padding: 24px 8px 20px; }
  .pp-clients__row { --per: 4; }
}
@media (max-width: 767.98px) {
  .pp-html { --pp-display: 32px; --pp-stage-title: 26px; --pp-num: 16px; --pp-pnum: 28px; --pp-sec: 60px; }
  .pp-hero { min-height: 55vh; min-height: 55svh; }   /* phones: 55% of the screen (65% on bigger screens) */
  .pp-hero__tabs { column-gap: 12px; }
  .pp-stage { padding: 20px 0 60px; }
  .pp-stage__grid { grid-template-columns: 1fr; }
  .pp-stage__body { flex-direction: column; gap: 24px; padding: 32px 24px 32px 0; }
  .pp-value__icon { width: 64px; height: 64px; }
  .pp-principle { padding: 24px 12px; }
  .pp-clients__row { --per: 3; }
  .pp-cta__main { grid-template-columns: 1fr; row-gap: 28px; }
}

/* Less motion */
@media (prefers-reduced-motion: reduce) {
  .pp-split .pp-u { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pp-clients__track, .pp-arrow-link span, .pp-arrow-link i, .pp-hero__statement, .pp-hero__bar, .pp-hero__tab-label, .pp-value, .pp-principle::before { transition: none; }
}