/* ============================================================
   PIREX — Cupertino glass design system
   Mobile-first. All breakpoints are min-width.
   ============================================================ */

:root{
  --px-obsidian:#0A0A0C;
  --px-slate:#121216;
  --px-slate-2:#17171D;
  --px-hairline:rgba(255,255,255,.10);
  --px-hairline-strong:rgba(255,255,255,.16);
  --px-blue:#0066FF;
  --px-blue-soft:#3B8CFF;
  --px-emerald:#00E676;
  --px-amber:#FFB020;
  --px-muted:#9195A3;
  /* brand mark colours, from the PIREX logo */
  --px-violet:#6D46B8;
  --px-violet-deep:#532F87;
  --px-coral:#E74449;
  --px-navy:#054374;

  --px-r-sm:14px;
  --px-r:20px;
  --px-r-lg:28px;
  --px-r-pill:980px;

  --px-blur:22px;
  --px-ease:cubic-bezier(.22,.61,.36,1);      /* Cupertino ease-out */
  --px-ease-spring:cubic-bezier(.34,1.56,.64,1);

  --px-header-h:66px;
  --px-gutter:clamp(1rem,5vw,2rem);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--px-header-h) + 16px); }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--px-obsidian);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Ambient light field — the depth behind the glass */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 460px at 12% -6%, rgba(0,102,255,.22), transparent 62%),
    radial-gradient(620px 420px at 92% 6%, rgba(0,230,118,.10), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(0,102,255,.10), transparent 62%);
}

::selection{ background:rgba(0,102,255,.35); color:#fff }

/* ---------- Typography rhythm ---------- */
.px-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--px-blue-soft);
  margin:0 0 .9rem;
}
.px-eyebrow::before{
  content:""; width:18px; height:1px; background:currentColor; opacity:.7;
}
.px-lede{ color:var(--px-muted); font-size:clamp(1rem,.96rem + .35vw,1.1875rem); line-height:1.62; max-width:62ch; }
.px-mono{ font-family:var(--wp--preset--font-family--mono); letter-spacing:-.02em }

.px-gradient-text{
  background:linear-gradient(100deg,var(--px-blue-soft) 0%,#7FB2FF 45%,var(--px-emerald) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- Glass surfaces ---------- */
.px-glass,
.px-card{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 100%),var(--px-slate);
  border:1px solid var(--px-hairline);
  border-radius:var(--px-r);
  -webkit-backdrop-filter:blur(var(--px-blur)) saturate(160%);
  backdrop-filter:blur(var(--px-blur)) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.45);
}
/* Specular top edge — the detail that reads as "Apple" */
.px-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 22%);
  mix-blend-mode:overlay; opacity:.65;
}
.px-card{ padding:clamp(1.35rem,4vw,2rem); }
.px-card--lg{ padding:clamp(1.75rem,5vw,3rem); border-radius:var(--px-r-lg); }
.px-card--tight{ padding:1.15rem 1.25rem; border-radius:var(--px-r-sm); }

.px-card--interactive{ transition:transform .45s var(--px-ease), border-color .45s var(--px-ease), box-shadow .45s var(--px-ease); }
@media (hover:hover){
  .px-card--interactive:hover{
    transform:translateY(-4px);
    border-color:var(--px-hairline-strong);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px rgba(0,0,0,.6);
  }
}

/* Accent rail on a card */
.px-card--rail::before{
  content:""; position:absolute; left:clamp(1.35rem,4vw,2rem); top:0; width:46px; height:2px;
  border-radius:0 0 4px 4px; background:var(--px-blue);
}
.px-card--rail-emerald::before{ background:var(--px-emerald) }
.px-card--rail-amber::before{ background:var(--px-amber) }
.px-card--rail-violet::before{ background:var(--px-violet) }
.px-card--rail-coral::before{ background:var(--px-coral) }

/* ---------- Badges & pills ---------- */
.px-badge{
  display:inline-block;
  font-size:.625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .7rem; border-radius:var(--px-r-pill);
  border:1px solid rgba(0,102,255,.4);
  background:rgba(0,102,255,.12);
  color:var(--px-blue-soft);
}
.px-badge--emerald{ border-color:rgba(0,230,118,.38); background:rgba(0,230,118,.10); color:var(--px-emerald) }
.px-badge--amber{ border-color:rgba(255,176,32,.38); background:rgba(255,176,32,.10); color:var(--px-amber) }
.px-badge--violet{ border-color:rgba(109,70,184,.45); background:rgba(109,70,184,.14); color:#B39BE8 }
.px-badge--coral{ border-color:rgba(231,68,73,.42); background:rgba(231,68,73,.12); color:#FF8A8D }

.px-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem; border-radius:var(--px-r-pill);
  border:1px solid var(--px-hairline);
  background:rgba(255,255,255,.04);
  font-size:.8125rem; color:var(--px-muted);
}

/* ---------- Feature list with check marks ---------- */
.px-checks{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.7rem }
.px-checks li{
  position:relative; padding-left:1.65rem;
  font-size:.9375rem; color:var(--px-muted); line-height:1.5;
}
.px-checks li::before{
  content:""; position:absolute; left:0; top:.44em;
  width:15px; height:15px; border-radius:50%;
  background:rgba(0,230,118,.14);
  border:1px solid rgba(0,230,118,.5);
}
.px-checks li::after{
  content:""; position:absolute; left:4.5px; top:.72em;
  width:5px; height:2.5px; border-left:1.5px solid var(--px-emerald); border-bottom:1.5px solid var(--px-emerald);
  transform:rotate(-45deg);
}

/* ---------- Buttons ---------- */
.wp-element-button,.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--px-r-pill);
  font-weight:600; letter-spacing:-.01em;
  transition:transform .3s var(--px-ease), background-color .3s var(--px-ease), box-shadow .3s var(--px-ease);
  -webkit-tap-highlight-color:transparent;
  min-height:44px;                 /* Apple HIG touch target */
}
@media (hover:hover){
  .wp-element-button:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,102,255,.34) }
}
.wp-element-button:active{ transform:scale(.97) }
.wp-block-button.is-style-outline .wp-block-button__link{
  background:rgba(255,255,255,.04);
  border:1px solid var(--px-hairline-strong);
  color:#fff;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
@media (hover:hover){
  .wp-block-button.is-style-outline .wp-block-button__link:hover{
    background:rgba(255,255,255,.09); box-shadow:none;
  }
}
.px-btn-emerald .wp-block-button__link,a.px-btn-emerald{
  background:var(--px-emerald)!important; color:#04140A!important;
}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--px-blue-soft); outline-offset:3px; border-radius:6px;
}

/* ---------- Header ---------- */
.px-header{
  position:sticky; top:0; z-index:900;
  background:rgba(10,10,12,.72);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.px-header__inner{
  max-width:1360px; margin-inline:auto;
  padding:.7rem var(--px-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  min-height:var(--px-header-h);
}
.px-header__inner > *{ min-width:0 }
.px-logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none }
.px-logo__mark{
  height:30px; width:auto; flex:0 0 auto; display:block;
  filter:drop-shadow(0 4px 14px rgba(109,70,184,.45));
}
@media (min-width:760px){ .px-logo__mark{ height:34px } }
.px-logo__word{ display:flex; flex-direction:column; line-height:1 }
.px-logo__name{
  font-family:var(--wp--preset--font-family--display);
  font-weight:800; font-size:1.15rem; letter-spacing:.02em; color:#fff;
}
.px-logo__sub{
  display:none;    /* shown only where there is room for it in both languages */
  font-size:.5625rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--px-muted); margin-top:.28rem; white-space:nowrap;
}
@media (min-width:1600px){ .px-logo__sub{ display:block } }

/* Desktop nav */
.px-nav{ display:none }
.px-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:.1rem }
.px-nav > ul > li{ position:relative }
.px-nav a{
  display:block; padding:.5rem .55rem; border-radius:10px; white-space:nowrap;
  font-size:.8125rem; font-weight:500; color:#D6D8E0; text-decoration:none;
  transition:background-color .25s var(--px-ease), color .25s var(--px-ease);
}
.px-nav a:hover,.px-nav a:focus-visible{ background:rgba(255,255,255,.07); color:#fff }
.px-nav__sub{
  position:absolute; top:calc(100% + 10px); left:0; min-width:250px;
  display:block; flex-direction:column; gap:2px; padding:.5rem;
  border-radius:16px;
  background:rgba(18,18,22,.92);
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--px-hairline);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transition:opacity .22s var(--px-ease), transform .22s var(--px-ease), visibility .22s;
}
.px-nav__sub li{ width:100% }
.px-nav__sub a{ font-size:.8125rem; color:var(--px-muted); padding:.55rem .7rem }
.px-nav__sub a:hover{ color:#fff }
.px-nav li:hover > .px-nav__sub,
.px-nav li:focus-within > .px-nav__sub{ opacity:1; visibility:visible; transform:translateY(0) scale(1) }
.px-nav__caret{ display:inline-block; margin-left:.3rem; opacity:.55; font-size:.65em; vertical-align:middle }

.px-header__cta{ display:none; align-items:center; gap:.45rem; flex:0 0 auto }
.px-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:.55rem .95rem; border-radius:var(--px-r-pill);
  font-size:.8125rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:transform .3s var(--px-ease), background-color .3s var(--px-ease), box-shadow .3s var(--px-ease);
}
.px-btn--ghost{ border:1px solid var(--px-hairline-strong); color:#fff; background:rgba(255,255,255,.04) }
.px-btn--ghost:hover{ background:rgba(255,255,255,.1) }
.px-btn--primary{ background:var(--px-blue); color:#fff; box-shadow:0 8px 24px rgba(0,102,255,.3) }
.px-btn--primary:hover{ background:#0052CC; transform:translateY(-1px) }
.px-btn--emerald{ background:var(--px-emerald); color:#04140A }
.px-btn:active{ transform:scale(.97) }

/* Burger */
.px-burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 11px; margin:0;
  background:transparent; border:0; cursor:pointer; border-radius:12px;
}
.px-burger span{ display:block; height:1.5px; background:#fff; border-radius:2px; transition:transform .35s var(--px-ease), opacity .2s }
.px-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.px-burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.px-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* Mobile drawer */
.px-drawer{
  position:fixed; inset:var(--px-header-h) 0 0; z-index:890;
  background:rgba(10,10,12,.97);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  padding:1.5rem var(--px-gutter) 3rem;
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity .3s var(--px-ease), transform .3s var(--px-ease), visibility .3s;
}
.px-drawer.is-open{ opacity:1; visibility:visible; transform:translateY(0) }
.px-drawer ul{ list-style:none; margin:0; padding:0 }
.px-drawer > ul > li{ border-bottom:1px solid rgba(255,255,255,.07) }
.px-drawer > ul > li > a,
.px-drawer__toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:1.05rem 0; font-size:1.0625rem; font-weight:600; color:#fff;
  background:none; border:0; text-align:left; cursor:pointer;
  font-family:var(--wp--preset--font-family--display); letter-spacing:-.01em;
}
.px-drawer__toggle span{ transition:transform .3s var(--px-ease); color:var(--px-muted); font-size:.8rem }
.px-drawer__toggle[aria-expanded="true"] span{ transform:rotate(180deg) }
.px-drawer__panel{ display:none; padding:0 0 1rem }
.px-drawer__panel.is-open{ display:block }
.px-drawer__panel a{ display:block; padding:.6rem 0 .6rem 1rem; font-size:.9375rem; color:var(--px-muted); border-left:1px solid rgba(255,255,255,.12) }
.px-drawer__panel a:hover{ color:#fff }
.px-drawer__cta{ display:grid; gap:.7rem; margin-top:1.75rem }
.px-drawer__cta .px-btn{ min-height:50px; font-size:.9375rem }
body.px-lock{ overflow:hidden }

@media (min-width:1240px){
  .px-nav,.px-header__cta{ display:flex }
  .px-burger,.px-drawer{ display:none }
}
/* Between the drawer breakpoint and full width, drop the secondary CTA first. */
@media (min-width:1240px) and (max-width:1379px){
  .px-header__cta .px-btn--ghost{ display:none }
}

/* Tighter heading scale inside cards and product rows */
.px-card h3{ font-size:clamp(1.1875rem,1.05rem + .5vw,1.4375rem); letter-spacing:-.022em }
.px-section h2{ font-size:clamp(1.75rem,1.35rem + 1.6vw,2.75rem) }
.px-hero h1{ letter-spacing:-.035em }

/* ---------- Sections ---------- */
.px-section{ padding-block:clamp(3.5rem,9vw,7rem) }
.px-section--tight{ padding-block:clamp(2.5rem,6vw,4.5rem) }
.px-shell{ max-width:1240px; margin-inline:auto; padding-inline:var(--px-gutter) }
.px-shell--narrow{ max-width:860px }

.px-section__head{ max-width:760px; margin-bottom:clamp(2rem,5vw,3.25rem) }
.px-section__head h2{ margin:0 0 1rem }

/* ---------- Grids ---------- */
.px-grid{ display:grid; gap:1.15rem }
@media (min-width:720px){ .px-grid--2{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:720px){ .px-grid--3{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .px-grid--3{ grid-template-columns:repeat(3,1fr) } .px-grid{ gap:1.5rem } }
@media (min-width:720px){ .px-grid--4{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .px-grid--4{ grid-template-columns:repeat(4,1fr) } }

.px-split{ display:grid; gap:2rem; align-items:center }
@media (min-width:960px){ .px-split{ grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,5vw,4.5rem) } }
.px-section--tight .px-split{ align-items:start }
@media (min-width:960px){ .px-split--reverse > :first-child{ order:2 } }

/* ---------- Hero ---------- */
.px-hero{ padding-block:clamp(3rem,10vw,6.5rem) clamp(3rem,8vw,5rem); position:relative }
.px-hero h1{ margin:0 0 1.25rem; max-width:19ch }
.px-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem }
.px-hero__actions .px-btn{ min-height:50px; padding:.85rem 1.6rem; font-size:.9375rem }
@media (max-width:520px){ .px-hero__actions .px-btn{ width:100% } }

.px-hero__meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem }

/* Hero visual: chart morphing into a trade map */
.px-hero__visual{
  margin-top:2.5rem; border-radius:var(--px-r-lg); overflow:hidden;
  border:1px solid var(--px-hairline);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--px-slate);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.px-hero__visual svg{ display:block; width:100%; height:auto }
@media (min-width:960px){ .px-hero__visual{ margin-top:0 } }

/* ---------- Media / logo bar ---------- */
.px-mediabar{ border-block:1px solid rgba(255,255,255,.07); padding-block:2.25rem }
.px-mediabar__label{
  text-align:center; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--px-muted); margin:0 0 1.5rem;
}
.px-mediabar__track{
  display:flex; align-items:center; justify-content:flex-start; gap:2.5rem;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:.25rem; scroll-snap-type:x proximity;
}
.px-mediabar__track::-webkit-scrollbar{ display:none }
@media (min-width:900px){ .px-mediabar__track{ justify-content:center; flex-wrap:wrap; gap:3.25rem } }
.px-mediabar__item{
  flex:0 0 auto; scroll-snap-align:center;
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:1rem; letter-spacing:-.02em;
  color:#8A8F9E; opacity:.85; white-space:nowrap;
  transition:color .3s var(--px-ease), opacity .3s var(--px-ease);
}
.px-mediabar__item:hover{ color:#fff; opacity:1 }

/* ---------- Stat tiles ---------- */
.px-stat{ display:flex; flex-direction:column; gap:.35rem }
.px-stat__value{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.9rem,1.4rem + 2vw,2.75rem); font-weight:700; letter-spacing:-.035em;
  color:#fff; line-height:1;
}
.px-stat__value em{ font-style:normal; color:var(--px-blue-soft) }
.px-stat__label{ font-size:.8125rem; color:var(--px-muted); line-height:1.45 }

/* ---------- Product / spec rows ---------- */
.px-spec{ display:grid; gap:.15rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.08) }
.px-spec:first-child{ border-top:0; padding-top:0 }
.px-spec__k{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--px-muted) }
.px-spec__v{ font-size:.9375rem; color:#E7E9EE }

/* ---------- Image placeholder slots ---------- */
.px-imgslot{
  position:relative; display:grid; place-items:center; text-align:center;
  border-radius:var(--px-r); overflow:hidden;
  border:1px dashed rgba(255,255,255,.22);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 12px,transparent 12px 24px),
    var(--px-slate);
  color:var(--px-muted); padding:2rem 1.25rem; min-height:220px;
}
.px-imgslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit }
.px-imgslot--portrait{ aspect-ratio:4/5; min-height:0 }
.px-imgslot--wide{ aspect-ratio:16/9; min-height:0 }
.px-imgslot--square{ aspect-ratio:1/1; min-height:0 }
.px-imgslot__inner{ display:grid; gap:.4rem; position:relative; z-index:1; max-width:34ch }
.px-imgslot__icon{ font-size:1.5rem; opacity:.5 }
.px-imgslot__name{ font-size:.8125rem; font-weight:600; color:#C9CCD6; letter-spacing:-.01em }
.px-imgslot__hint{ font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; opacity:.7 }
.px-imgslot.has-image{ border-style:solid; border-color:var(--px-hairline); padding:0 }
.px-imgslot.has-image .px-imgslot__inner{ display:none }

/* ---------- Quote ---------- */
.px-quote{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);
  line-height:1.35; letter-spacing:-.025em; color:#fff; margin:0;
}
.px-quote__attr{ margin-top:1.25rem; font-size:.875rem; color:var(--px-muted) }
.px-quote__attr strong{ color:#fff; display:block; font-size:1rem; letter-spacing:-.01em }

/* ---------- Disclaimer ---------- */
.px-disclaimer{
  border:1px solid rgba(255,176,32,.28);
  background:rgba(255,176,32,.06);
  border-radius:var(--px-r-sm);
  padding:1.1rem 1.25rem;
  font-size:.8125rem; line-height:1.6; color:#C9B792;
}
.px-disclaimer strong{ color:var(--px-amber) }

/* ---------- Footer ---------- */
.px-footer{ border-top:1px solid rgba(255,255,255,.08); margin-top:clamp(3rem,8vw,6rem); padding-block:clamp(3rem,7vw,4.5rem) 2rem }
.px-footer__grid{ display:grid; gap:2.5rem }
@media (min-width:760px){ .px-footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr } }
.px-footer h4{ font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:var(--px-muted); margin:0 0 1rem; font-weight:600 }
.px-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.px-footer a{ font-size:.875rem; color:#B7BAC5; text-decoration:none }
.px-footer a:hover{ color:#fff }
.px-footer__bottom{
  margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
  font-size:.8125rem; color:var(--px-muted);
}
@media (min-width:760px){ .px-footer__bottom{ flex-direction:row; justify-content:space-between; align-items:center } }
.px-social{ display:flex; gap:.6rem }
.px-social a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--px-hairline); background:rgba(255,255,255,.04);
  transition:background-color .3s var(--px-ease), transform .3s var(--px-ease);
}
.px-social a:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px) }
.px-social svg{ width:16px; height:16px; fill:#C9CCD6 }

/* ---------- Modal (Cupertino sheet on mobile, dialog on desktop) ---------- */
.px-modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:flex-end; justify-content:center;
  padding:0;
}
.px-modal.is-open{ display:flex }
.px-modal__scrim{
  position:absolute; inset:0; background:rgba(4,4,6,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .35s var(--px-ease);
}
.px-modal.is-open .px-modal__scrim{ opacity:1 }
.px-modal__panel{
  position:relative; width:100%; max-width:600px; max-height:92vh; overflow-y:auto;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),#141419;
  border:1px solid var(--px-hairline);
  border-radius:26px 26px 0 0;
  padding:1.6rem clamp(1.25rem,5vw,2.25rem) 2rem;
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  box-shadow:0 -20px 70px rgba(0,0,0,.7);
  transform:translateY(100%); transition:transform .42s var(--px-ease);
  padding-bottom:calc(2rem + env(safe-area-inset-bottom));
}
.px-modal.is-open .px-modal__panel{ transform:translateY(0) }
@media (min-width:700px){
  .px-modal{ align-items:center; padding:2rem }
  .px-modal__panel{ border-radius:26px; transform:translateY(14px) scale(.97); box-shadow:0 40px 100px rgba(0,0,0,.75) }
  .px-modal.is-open .px-modal__panel{ transform:translateY(0) scale(1) }
}
.px-modal__grabber{ width:38px; height:4px; border-radius:99px; background:rgba(255,255,255,.22); margin:0 auto 1.25rem }
@media (min-width:700px){ .px-modal__grabber{ display:none } }
.px-modal__close{
  position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%;
  border:0; background:rgba(255,255,255,.09); color:#C9CCD6; font-size:1rem; cursor:pointer;
  display:grid; place-items:center;
}
.px-modal__close:hover{ background:rgba(255,255,255,.16); color:#fff }
.px-modal h3{ margin:0 0 .5rem }
.px-modal__sub{ color:var(--px-muted); font-size:.875rem; margin:0 0 1.5rem }

/* ---------- Forms ---------- */
.px-form,.px-pform{ display:grid; gap:1rem }
.px-field{ display:grid; gap:.4rem }
.px-field label{ font-size:.75rem; font-weight:600; letter-spacing:.03em; color:#C9CCD6 }
.px-field input,.px-field select,.px-field textarea{
  width:100%; font:inherit; font-size:1rem;      /* 16px stops iOS zoom-on-focus */
  color:#fff; background:rgba(255,255,255,.05);
  border:1px solid var(--px-hairline); border-radius:var(--px-r-sm);
  padding:.85rem 1rem; min-height:48px;
  transition:border-color .25s var(--px-ease), background-color .25s var(--px-ease);
  -webkit-appearance:none; appearance:none;
}
.px-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239195A3' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:11px;
  padding-right:2.5rem;
}
.px-field textarea{ min-height:110px; resize:vertical }
.px-field input:focus,.px-field select:focus,.px-field textarea:focus{
  outline:none; border-color:var(--px-blue); background:rgba(0,102,255,.07);
}
.px-field input::placeholder,.px-field textarea::placeholder{ color:#63687A }
.px-form__row{ display:grid; gap:1rem }
@media (min-width:560px){ .px-form__row--2{ grid-template-columns:1fr 1fr } }
.px-form button[type="submit"],.px-pform button[type="submit"]{
  min-height:50px; border:0; border-radius:var(--px-r-pill);
  background:var(--px-blue); color:#fff; font:inherit; font-weight:600; font-size:.9375rem;
  cursor:pointer; margin-top:.5rem;
  transition:background-color .3s var(--px-ease), transform .2s var(--px-ease);
}
.px-form button[type="submit"]:hover,.px-pform button[type="submit"]:hover{ background:#0052CC }
.px-form button[type="submit"]:active,.px-pform button[type="submit"]:active{ transform:scale(.98) }
.px-form button[type="submit"][disabled],.px-pform button[type="submit"][disabled]{ opacity:.6; cursor:progress }
.px-form--emerald button[type="submit"]{ background:var(--px-emerald); color:#04140A }
.px-form--emerald button[type="submit"]:hover{ background:#00C765 }
.px-form__hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden }
.px-form__note{ font-size:.6875rem; color:#6D7284; line-height:1.5 }
.px-form__msg{ border-radius:var(--px-r-sm); padding:.85rem 1rem; font-size:.875rem; display:none }
.px-form__msg.is-ok{ display:block; background:rgba(0,230,118,.1); border:1px solid rgba(0,230,118,.35); color:#7BF0B4 }
.px-form__msg.is-err{ display:block; background:rgba(255,80,80,.1); border:1px solid rgba(255,80,80,.35); color:#FFA5A5 }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .px-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--px-ease), transform .7s var(--px-ease) }
  .px-reveal.is-in{ opacity:1; transform:none }
}

/* ---------- Editor safety: keep the canvas readable ---------- */
.editor-styles-wrapper{ background:var(--px-obsidian) }

/* ---------- Print ---------- */
@media print{
  body::before,.px-header,.px-footer,.px-modal{ display:none!important }
  .px-card{ border:1px solid #ccc; box-shadow:none; background:#fff; color:#000 }
}

/* ---------- Accessibility helpers ---------- */
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:fixed!important; top:12px; left:12px; z-index:2000;
  width:auto; height:auto; clip:auto; margin:0;
  padding:.75rem 1.1rem; border-radius:var(--px-r-pill);
  background:var(--px-blue); color:#fff; font-size:.875rem; font-weight:600;
}

/* Section head inside a card should not double the outer margin */
.px-card .px-section__head{ margin-bottom:1.75rem }
.px-card .px-section__head:last-child{ margin-bottom:0 }

/* ---------- Language switcher ---------- */
.px-lang{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:var(--px-r-pill);
  border:1px solid var(--px-hairline); background:rgba(255,255,255,.04) }
.px-lang a{
  display:grid; place-items:center; min-width:38px; height:30px; padding:0 .6rem;
  border-radius:var(--px-r-pill); font-size:.75rem; font-weight:600; letter-spacing:.04em;
  color:var(--px-muted); text-decoration:none;
  transition:background-color .25s var(--px-ease), color .25s var(--px-ease);
}
.px-lang a:hover{ color:#fff }
.px-lang a[aria-current="true"]{ background:rgba(255,255,255,.12); color:#fff }
.px-header .px-lang{ margin-right:.15rem }
.px-drawer .px-lang{ width:max-content; margin-top:1.5rem }
.px-drawer .px-lang a{ min-width:52px; height:38px; font-size:.875rem }

/* ---------- Long-label safety (French labels run ~25% longer) ---------- */
.px-split > *, .px-grid > *, .px-section__head{ min-width:0 }
.px-hero__actions .px-btn,
.px-section .px-btn{ max-width:100% }
@media (max-width:760px){
  .px-btn{ white-space:normal; text-align:center; line-height:1.3; padding-block:.7rem }
  .px-hero__actions .px-btn{ width:100% }
}
.px-spec__v, .px-spec__k, .px-checks li, .px-lede, .px-card p{ overflow-wrap:anywhere }
h1,h2,h3,h4{ overflow-wrap:break-word }

/* ---------- Hero measure: French headlines run longer than English ---------- */
@media (min-width:960px){
  .px-hero .px-split{ grid-template-columns:1.18fr .82fr }
}
.px-hero h1{ font-size:clamp(2.25rem,1.6rem + 2.6vw,3.9rem); max-width:22ch }

/* ---- Proof & track record ---- */
.px-proof-jump{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem }
.px-proof-jump .px-badge{ text-decoration:none }
.px-proof-note{ margin-top:1.5rem; color:var(--px-muted); font-size:.875rem; max-width:62ch }
.px-proof-link{ color:var(--px-blue-soft); font-size:.9375rem; text-decoration:none }
.px-proof-link:hover{ text-decoration:underline }
.px-proof-yt{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  aspect-ratio:16/9; border-radius:var(--px-r-sm); overflow:hidden; background:#000;
}
.px-proof-yt img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--px-ease) }
.px-proof-yt:hover img{ transform:scale(1.04) }
.px-proof-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.px-proof-play{
  position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%;
  background:rgba(10,10,12,.62); border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.px-proof-play::after{
  content:""; position:absolute; left:27px; top:21px; border-left:22px solid #fff;
  border-top:13px solid transparent; border-bottom:13px solid transparent;
}
.px-proof-yt:focus-visible{ outline:2px solid var(--px-blue-soft); outline-offset:3px }
.px-proof-gallery{ display:grid; gap:1rem; grid-template-columns:1fr }
@media (min-width:640px){ .px-proof-gallery{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .px-proof-gallery{ grid-template-columns:repeat(3,1fr); gap:1.25rem } }
.px-proof-photo{ position:relative; margin:0; overflow:hidden; border-radius:var(--px-r); background:var(--px-slate); aspect-ratio:3/2 }
.px-proof-photo--tall{ aspect-ratio:3/2 }
@media (min-width:1040px){ .px-proof-photo--wide{ grid-column:span 2; aspect-ratio:auto } }
.px-proof-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--px-ease) }
.px-proof-photo:hover img{ transform:scale(1.03) }
.px-proof-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1rem .9rem; font-size:.8125rem; line-height:1.4;
  color:#fff; background:linear-gradient(to top,rgba(10,10,12,.85),rgba(10,10,12,0));
}
.px-proof-video{ width:100%; aspect-ratio:16/9; border-radius:var(--px-r-sm); background:#000; display:block }
.px-proof-ig__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem }
.px-proof-ig .instagram-media{ margin:0 auto !important; min-width:0 !important; max-width:100% !important }
.px-proof-profile{ display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:inherit }
.px-proof-profile strong{ font-size:1.0625rem }