/* ════════════════════════════════════════════════════════════════════════
   DAPerenne — Direction Artistique Pérenne Réseau
   Override layer charté par-dessus les styles inline existants.
   Palette stricte 5 couleurs : Orange #EF7F43 · Sable #F7BC97 ·
   Bleu nuit #1B365D · Bleu ciel #B8C5D6 · Ivoire #FFFAF1
   Typographie : Inter (texte) · Ibrand (logo uniquement)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── FONTES ────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Ibrand';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/Ibrand.woff2') format('woff2');
}

/* ─── TOKENS PÉRENNE ────────────────────────────────────────────────── */

:root{
  /* Palette officielle — 5 couleurs */
  --p-orange:#EF7F43;
  --p-sable:#F7BC97;
  --p-bleunuit:#1B365D;
  --p-bleuciel:#B8C5D6;
  --p-ivoire:#FFFAF1;

  /* Alias semantiques pour retro-compatibilite avec inline-styles legacy
     Mapping doctrine DAPerenne : preserve les distinctions chromatiques. */
  --cream:#FFFAF1;
  --cream-dk:#F7BC97;
  --slate:#1B365D;
  --slate-dk:#1B365D;
  --red:#F7BC97;       /* alerte framboise legacy -> sable (preserve distinction vs orange) */
  --red-dk:#F7BC97;
  --orange:#EF7F43;
  --mauve:#B8C5D6;
  --brown:#B8C5D6;     /* accent doux legacy -> bleu ciel (touche froide doctrine) */
  --dark:#1B365D;
  --gray:#1B365D;

  /* Dégradé charté — strictement axe chaud */
  --grad:linear-gradient(135deg,#EF7F43,#F7BC97);
  --grad-warm:linear-gradient(135deg,#EF7F43,#F7BC97);

  /* Rayons & ombres — sobriété charté */
  --r:4px;
  --r-card:6px;
  --shadow:0 2px 8px rgba(27,54,93,.06);
  --shadow-soft:0 1px 4px rgba(27,54,93,.04);

  /* Filet pêche signature */
  --rule-h:2px;
  --rule-color:var(--p-sable);
  --rule-color-strong:var(--p-orange);
}

/* ─── RESET / BASE ──────────────────────────────────────────────────── */

html{font-size:16px;scroll-behavior:smooth}
html,body{background:var(--p-ivoire);color:var(--p-bleunuit)}
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  line-height:1.42;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--p-orange);color:var(--p-ivoire)}

a{color:inherit}

/* ─── GRAD-TEXT — override de toute classe legacy en orange charté ──── */

/* DA validée 18/05/2026 : pas de gradient sur texte, couleur orange pleine + italic.
   Conserve la classe .grad-text pour rétrocompat sur les ~7 occurrences existantes. */
.grad-text{
  color:var(--p-orange);
  font-style:italic;
  font-weight:inherit;
  display:inline-block;
  vertical-align:baseline;
}

/* ─── EYEBROW — surcaps avec tiret cadratin et glyphe ───────────────── */

.eyebrow,
.dap-eyebrow,
.d-eyebrow,
.pp-hero-label,
.pp-clarity-label,
.pp-features-label,
.pp-pos-label,
.pp-pricing-label,
.d-pain-eyebrow,
.r-eyebrow,
.c-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--p-orange);
  line-height:1;
  margin-bottom:18px;
}

.eyebrow::before,
.dap-eyebrow::before{
  content:"—";
  color:var(--p-orange);
  font-weight:700;
  letter-spacing:0;
  margin-right:2px;
}

/* ─── GLYPHE ORANGE — cercle plein signature ────────────────────────── */

.dap-glyph,
.dap-dot{
  display:inline-block;
  width:.62em;
  height:.62em;
  border-radius:50%;
  background:var(--p-orange);
  vertical-align:baseline;
  margin-left:.08em;
  transform:translateY(.04em);
}

.dap-glyph-lg{
  width:80px;height:80px;border-radius:50%;background:var(--p-orange);
  display:inline-block;vertical-align:baseline;
}

/* ─── TITRES HERO MONUMENTAUX ───────────────────────────────────────── */

.dap-h1,
.hub-tagline,
.d-hero-title,
.pp-hero-h1,
.r-hero-title,
.c-hero-title,
.pp-cta-title,
.pp-pos-header h2,
.pp-features-header h2,
.pp-clarity-header h2,
.pp-pricing h2{
  font-family:'Inter',sans-serif;
  font-weight:800;
  letter-spacing:-.038em;
  line-height:.98;
  color:var(--p-bleunuit);
}

.hub-tagline{
  font-size:clamp(2.2rem,5.2vw,4.4rem);
  letter-spacing:-.04em;
  line-height:1.02;
}

.d-hero-title,
.pp-hero-h1,
.r-hero-title,
.c-hero-title{
  font-size:clamp(2.6rem,6.4vw,5.8rem);
  letter-spacing:-.042em;
  line-height:.96;
}

.dap-h1 em,
.hub-tagline em,
.d-hero-title em,
.pp-hero-h1 em,
.r-hero-title em,
.c-hero-title em{
  font-style:italic;
  font-weight:800;
  background:none;
  -webkit-text-fill-color:initial;
  color:var(--p-bleunuit);
}

/* H2 charté */
h2,.dap-h2,.ttl{
  font-family:'Inter',sans-serif;
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.03;
  color:var(--p-bleunuit);
}

/* Corps de texte */
p,.dap-p,.hub-scene,.pp-hero-sub,.d-hero-desc{
  color:var(--p-bleunuit);
  opacity:.86;
  line-height:1.5;
}

/* ─── BOUTONS CTA — orange rectangulaire ────────────────────────────── */

.dap-cta,
.pp-cta-btn,
.hdr-cta,
.rx-modal-send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--p-orange);
  color:var(--p-ivoire);
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.005em;
  padding:18px 30px;
  border:0;
  border-radius:4px;
  text-transform:none;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
  cursor:pointer;
  text-decoration:none;
}
.dap-cta:hover,
.pp-cta-btn:hover,
.hdr-cta:hover,
.rx-modal-send:hover{
  background:#e26a2c;
  transform:translateY(-1px);
  color:var(--p-ivoire);
}

/* Bouton secondaire — outline bleu nuit */
.dap-cta-sec,
.hdr-back,
.pp-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color:var(--p-bleunuit);
  border:1.5px solid var(--p-bleunuit);
  padding:14px 24px;
  border-radius:4px;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  transition:background .25s,color .25s;
}
.dap-cta-sec:hover,
.hdr-back:hover,
.pp-back:hover{
  background:var(--p-bleunuit);
  color:var(--p-ivoire);
}

/* ─── Header — variante allégée des CTAs (toutes les sous-pages) ─────
   Les CTAs ci-dessus sont prévus pour le corps de page (taille forte).
   Dans le header, on les ramène à une présence sobre et non concurrente
   du logo et de la nav. */
.site-hdr .hdr-cta,
.pp-header .pp-cta-btn{
  padding:8px 18px !important;
  font-size:.72rem !important;
  font-weight:600 !important;
  border-radius:8px !important;
  gap:6px;
  letter-spacing:.01em;
}
.site-hdr .hdr-back,
.pp-header .pp-back{
  border:none !important;
  background:transparent !important;
  color:var(--p-bleunuit) !important;
  opacity:.55;
  padding:6px 8px !important;
  font-size:.72rem !important;
  font-weight:600 !important;
}
.site-hdr .hdr-back:hover,
.pp-header .pp-back:hover{
  opacity:1;
  background:transparent !important;
  color:var(--p-bleunuit) !important;
  transform:none;
}
.site-hdr .hdr-nav,
.pp-header .pp-hdr-nav{
  gap:18px !important;
}
.site-hdr .hdr-nav a,
.pp-header .pp-hdr-nav a{
  padding:6px 4px !important;
  border-radius:0 !important;
  opacity:.55;
}
.site-hdr .hdr-nav a:hover,
.pp-header .pp-hdr-nav a:hover{
  opacity:1;
  background:transparent !important;
}

/* Boutons portail hub (page d'accueil) — override pill -> rect orange */
.hub-portal-btn,
.hub-pbtn-d,
.hub-pbtn-c{
  border-radius:4px !important;
  padding:14px 24px !important;
  font-size:.78rem !important;
  letter-spacing:.08em !important;
  font-weight:700 !important;
}
.hub-pbtn-d{background:var(--p-orange) !important;color:var(--p-ivoire) !important}
.hub-pbtn-c{background:var(--p-ivoire) !important;color:var(--p-bleunuit) !important;border:1.5px solid var(--p-ivoire) !important;backdrop-filter:none !important}

/* Bouton réseau / scroll hub */
.hub-reseau-btn{
  border-radius:4px !important;
  border:1.5px solid var(--p-bleunuit) !important;
  background:transparent !important;
  color:var(--p-bleunuit) !important;
  font-weight:700 !important;
}
.hub-reseau-btn:hover{
  background:var(--p-bleunuit) !important;
  color:var(--p-ivoire) !important;
  box-shadow:none !important;
}

/* ─── CARDS — border-top 2px orange ─────────────────────────────────── */

.dap-card,
.d-pain-card,
.pp-price-card,
.pp-acc{
  position:relative;
  background:var(--p-ivoire);
  border:1px solid rgba(27,54,93,.08);
  border-top:2px solid var(--p-orange);
  border-radius:0;
  padding:32px 28px;
  box-shadow:none;
}

/* pp-feat-card garde son layout legacy (position absolute scattered) — juste teinte orange en top */
.pp-feat-card{
  border-top:2px solid var(--p-orange) !important;
}

.pp-acc{padding:0;border-top:2px solid var(--p-orange) !important}

.d-pain-card.accent-orange{
  border-top:2px solid var(--p-orange) !important;
  background:var(--p-ivoire) !important;
}
.d-pain-card.accent-red{
  border-top:2px solid var(--p-sable) !important;
  background:var(--p-ivoire) !important;
}
.d-pain-card.accent-slate{
  border-top:2px solid var(--p-bleunuit) !important;
  background:var(--p-ivoire) !important;
}

/* Numérotation 01/02/03 */
.pp-acc-num,
.dap-num,
.d-pain-num,
.c-orange,.c-red,.c-slate{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.18em;
  color:var(--p-orange) !important;
}

/* ─── FILETS PÊCHE — séparateurs sable ──────────────────────────────── */

.dap-rule{
  display:block;
  height:var(--rule-h);
  background:var(--rule-color);
  border:0;
  width:80px;
  margin:24px 0;
}
.dap-rule-full{
  display:block;
  height:1px;
  background:var(--p-sable);
  border:0;
  width:100%;
  margin:0;
}

.pp-divider-line,
.d-stat-sep{
  background:var(--p-sable) !important;
  height:1px !important;
}

/* ─── HEADER SITE ───────────────────────────────────────────────────── */

.site-hdr,
.pp-header{
  background:var(--p-ivoire) !important;
  border-bottom:1px solid rgba(27,54,93,.08);
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:12px 32px !important;
}

.hdr-logo img,
.pp-header img{
  height:36px !important;
  width:auto;
}

/* Le logo Hub central : signature accueil, taille fixe pour rester visible */
.hub-logo{
  height:56px !important;
  width:auto !important;
  position:relative;
  z-index:1;
}
@media(max-width:640px){
  .hub-logo{height:42px !important}
}

.hdr-nav a,
.pp-hdr-nav a{
  color:var(--p-bleunuit) !important;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.005em;
  position:relative;
  padding:6px 0;
  text-decoration:none;
}
.hdr-nav a:hover,
.pp-hdr-nav a:hover{color:var(--p-orange) !important}

.pp-hdr-nav-sep{
  background:var(--p-sable) !important;
  opacity:.5;
}

/* ─── HUB INDEX — atmosphère, anneaux et ornements legacy ────────────── */

.hub{
  background:var(--p-ivoire) !important;
}
.hub::before{
  background:var(--p-orange) !important;
  opacity:1 !important;
  height:4px !important;
}
.hub::after{
  background-image:radial-gradient(circle,rgba(239,127,67,.07) .6px,transparent .6px) !important;
}

.hub-logo-ring{
  background:radial-gradient(circle,rgba(239,127,67,.10) 0%,rgba(247,188,151,.05) 35%,transparent 65%) !important;
  box-shadow:0 0 80px rgba(239,127,67,.08),0 0 160px rgba(247,188,151,.04) !important;
}
.hub-logo-ring::before{border:1px solid rgba(239,127,67,.12) !important}
.hub-logo-ring::after{border:1px solid rgba(239,127,67,.06) !important}

.hub-promise::after{
  background:linear-gradient(90deg,transparent,var(--p-orange),transparent) !important;
  height:1px !important;
}

/* Portails — supprime glassmorphism, ramène à composition charte */
.hub-portal{
  border-radius:4px !important;
  box-shadow:0 4px 16px rgba(27,54,93,.08) !important;
  border-top:2px solid var(--p-orange);
}
.hub-portal::before{display:none !important}
.hub-portal-glow{display:none !important}
.hub-portal-d .hub-portal-shade{
  background:linear-gradient(to top,rgba(27,54,93,.92) 0%,rgba(27,54,93,.45) 48%,rgba(27,54,93,.05) 100%) !important;
}
.hub-portal-c .hub-portal-shade{
  background:linear-gradient(to top,rgba(27,54,93,.92) 0%,rgba(27,54,93,.45) 48%,rgba(27,54,93,.05) 100%) !important;
}
.hub-portal-who{
  color:var(--p-sable) !important;
  opacity:1 !important;
  font-size:.66rem !important;
  letter-spacing:.28em !important;
}
.hub-portal-pitch{opacity:.85 !important;color:#fff !important}

.hub-tagline em{
  background:none !important;
  -webkit-text-fill-color:initial !important;
  color:var(--p-bleunuit) !important;
  animation:none !important;
}
.hub-tagline{color:var(--p-bleunuit) !important}
.hub-scene{color:var(--p-bleunuit) !important;opacity:.85 !important}
.hub-scene strong{
  background:none !important;
  -webkit-text-fill-color:initial !important;
  color:var(--p-orange) !important;
  font-weight:800 !important;
}

/* Pilliers du socle hub */
.hub-pill{color:var(--p-bleunuit) !important}
.hub-dot-r{background:var(--p-orange) !important}
.hub-dot-o{background:var(--p-sable) !important}
.hub-dot-s{background:var(--p-bleunuit) !important}
.hub-pill-sep{
  background:linear-gradient(90deg,transparent,var(--p-sable),transparent) !important;
}

.hub-scroll-hint span{color:var(--p-bleunuit) !important}

/* Glyphe orange final dans la baseline hub */
.hub-tagline::after{
  content:"";
  display:inline-block;
  width:.62em;height:.62em;border-radius:50%;
  background:var(--p-orange);
  vertical-align:baseline;
  margin-left:.08em;
  transform:translateY(.04em);
}

/* ─── HERO DIRIGEANT ────────────────────────────────────────────────── */

.d-hero,
.d-hero-immersive{
  background-color:var(--p-ivoire) !important;
  /* Ne PAS utiliser background shorthand ici - efface le background-image inline */
}
.d-hero-title{color:var(--p-bleunuit) !important}
.d-hero-title .grad-text{
  background:none !important;
  -webkit-text-fill-color:initial !important;
  color:var(--p-bleunuit) !important;
  font-style:italic;
}

/* Glyphe en fin de hero title */
.d-hero-title::after,
.pp-hero-h1::after,
.r-hero-title::after,
.c-hero-title::after{
  content:"";
  display:inline-block;
  width:.55em;height:.55em;border-radius:50%;
  background:var(--p-orange);
  vertical-align:baseline;
  margin-left:.08em;
  transform:translateY(.04em);
}

.d-hero-desc{color:var(--p-bleunuit) !important;opacity:.85}

/* ─── STATS STRIP — chiffres dirigeant ──────────────────────────────── */

.d-stat-num{
  font-family:'Inter',sans-serif !important;
  font-weight:800 !important;
  color:var(--p-orange) !important;
  letter-spacing:-.03em !important;
}
.d-stat-label{color:var(--p-bleunuit) !important;font-weight:600 !important}
.d-stat-src{color:var(--p-bleunuit) !important;opacity:.55 !important}

/* ─── ICONES — differenciation chromatique, pas aplaties orange ─────── */

.d-pain-icon{
  color:var(--p-ivoire) !important;
}
.ico-orange{background:var(--p-orange) !important;color:var(--p-ivoire) !important}
.ico-red{background:var(--p-sable) !important;color:var(--p-bleunuit) !important}
.ico-slate{background:var(--p-bleunuit) !important;color:var(--p-ivoire) !important}

/* ─── FOOTER — fond bleu nuit, texte ivoire, accent orange en filet ──
   Note doctrine DAPerenne : l'aplat orange est reserve aux supports
   verticaux print (kakemono, plaquette). Sur web le footer sobre = bleu
   nuit avec textes ivoire et un filet orange en top pour signature. */

.ftr{
  background:var(--p-bleunuit) !important;
  color:var(--p-ivoire) !important;
  padding:72px 32px 36px !important;
  position:relative;
  border-top:3px solid var(--p-orange);
}

.ftr-grid{
  border-bottom:1px solid rgba(255,250,241,.10) !important;
}

.f-brand{color:var(--p-ivoire) !important;font-weight:800}
.f-desc{color:rgba(255,250,241,.72) !important;line-height:1.6}
.f-contact{color:rgba(255,250,241,.85) !important}
.f-contact a{color:var(--p-ivoire) !important}
.f-contact a:hover{color:var(--p-orange) !important;text-decoration:none}

.f-hd{
  color:var(--p-orange) !important;
  opacity:1 !important;
  font-weight:800 !important;
  font-size:.6rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1.25 !important;
  min-height:2.6em !important;
  display:flex !important;
  align-items:center !important;
  margin-bottom:10px !important;
}
.f-links a{color:rgba(255,250,241,.5) !important;transition:color .2s;text-decoration:none !important;font-size:.78rem !important}
.f-links a:hover{color:var(--cream) !important;text-decoration:none !important}

.f-copy{color:rgba(255,250,241,.55) !important}
.f-legal a{color:rgba(255,250,241,.55) !important;transition:color .2s}
.f-legal a:hover{color:var(--p-ivoire) !important;text-decoration:none}

/* ─── DIVERS overrides éliminant glassmorphism, shadows épaisses ────── */

[class*="glass"]{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Suppression des dégradés cross-axes parasites */
.pp-acc-num.c-red{color:var(--p-orange) !important}
.pp-acc-num.c-slate{color:var(--p-bleunuit) !important}

/* Page slide transition */
@keyframes slideOutLeft{
  0%{transform:translateX(0);opacity:1}
  100%{transform:translateX(-80px);opacity:0}
}
.page-slide-right{animation:slideOutLeft .4s ease-in forwards;pointer-events:none}

/* ─── PRICING CARDS — sobriété DAPerenne ────────────────────────────── */

.pp-price-card{
  background:var(--p-ivoire) !important;
  border:1px solid rgba(27,54,93,.08) !important;
  border-top:2px solid var(--p-orange) !important;
  box-shadow:none !important;
  padding:36px 28px !important;
  border-radius:0 !important;
}
.pp-price-amount{
  color:var(--p-bleunuit) !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
}
.pp-price-title{color:var(--p-bleunuit) !important;font-weight:700}
.pp-price-note{color:var(--p-bleunuit) !important;opacity:.7}

/* ─── CTA SECTION DE FIN — fond ivoire + sable, CTA orange dedans ─────
   Doctrine web : pas de bande orange entiere (reserve print vertical).
   Composition : fond clair + bordure orange en haut comme signature
   + boutons aplat orange centres. */

.pp-cta-sec,
.d-cta-sec,
.r-cta-sec,
.c-cta-sec{
  background:var(--p-ivoire) !important;
  color:var(--p-bleunuit) !important;
  padding:96px 32px !important;
  text-align:center;
  border-top:2px solid var(--p-orange);
  position:relative;
}
.pp-cta-sec .pp-cta-title,
.pp-cta-sec h2,
.pp-cta-sec .grad-text{
  color:var(--p-bleunuit) !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
}
.pp-cta-sub{color:var(--p-bleunuit) !important;opacity:.78}
.pp-cta-sec .pp-cta-btn{
  background:var(--p-orange) !important;
  color:var(--p-ivoire) !important;
}
.pp-cta-sec .pp-cta-btn:hover{
  background:#e26a2c !important;
  color:var(--p-ivoire) !important;
}

/* ─── MODAL CONTACT — sobriété ──────────────────────────────────────── */

.rx-modal{
  background:var(--p-ivoire) !important;
  border-top:4px solid var(--p-orange) !important;
  border-radius:4px !important;
  box-shadow:0 12px 48px rgba(27,54,93,.18) !important;
}

/* ─── VISUEL PÉRENNE — wrapper full-bleed avec filets ───────────────── */

.dap-visual{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  overflow:hidden;
}
.dap-visual img{
  width:100%;
  height:auto;
  display:block;
}
.dap-visual--bleed{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}

/* ─── BANDEAU PÉRENNE — section éditoriale avec eyebrow + visuel ───── */

.dap-section{
  padding:96px 32px;
  background:var(--p-ivoire);
}
.dap-section--accent{
  background:var(--p-bleuciel);
}
.dap-section--dark{
  background:var(--p-bleunuit);
  color:var(--p-ivoire);
}
.dap-section--dark h2,
.dap-section--dark p{color:var(--p-ivoire)}

.dap-wrap{
  max-width:1200px;
  margin:0 auto;
}

/* Encart visuel + texte cote-a-cote */
.dap-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
@media(max-width:900px){
  .dap-split{grid-template-columns:1fr;gap:36px}
}

/* ─── REVEAL — adoucissement charté ─────────────────────────────────── */

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible,
.reveal.v{opacity:1;transform:none}

/* ─── RESPONSIVE ────────────────────────────────────────────────────── */

@media(max-width:768px){
  .hub-tagline{font-size:clamp(1.8rem,7vw,2.6rem) !important}
  .d-hero-title,.pp-hero-h1,.r-hero-title,.c-hero-title{
    font-size:clamp(2rem,8vw,3rem) !important;
  }
  .ftr{padding:48px 22px 24px !important}
  .ftr-grid{grid-template-columns:1fr !important;gap:28px !important}
  .d-situ-grid{grid-template-columns:1fr !important;gap:16px !important}
  .dap-cta,.pp-cta-btn,.hdr-cta{padding:14px 22px;font-size:.95rem}
  .dap-section{padding:64px 22px}

  /* Footer mobile — source unique de vérité (override inline styles cassés/absents) */
  .ftr-grid{grid-template-columns:1fr 1fr !important;gap:28px 20px !important;padding-bottom:24px !important}
  .ftr-grid>div:first-child{grid-column:1/-1 !important;display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px 20px !important}
  .ftr-grid>div:first-child .f-brand,.ftr-grid>div:first-child .f-brand-link{grid-column:1/-1 !important}
  .ftr-grid>div:first-child .f-desc{grid-column:1 !important;max-width:none !important}
  .ftr-grid>div:first-child .f-contact{grid-column:2 !important;align-self:center !important;align-items:flex-start !important;gap:14px !important}
  .ftr-grid>div:first-child .f-contact a{flex-direction:column !important;align-items:flex-start !important;text-align:left !important;gap:6px !important}
  .ftr-grid>div:first-child .f-contact a svg{width:20px !important;height:20px !important;opacity:.7 !important;flex-shrink:0 !important}
  .f-hd{min-height:0 !important;margin-bottom:6px !important}
  .ftr-bot{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
}

@media(max-width:480px){
  .ftr-grid{grid-template-columns:1fr !important;gap:24px !important}
  .ftr-grid>div:first-child{grid-template-columns:1fr !important}
  .ftr-grid>div:first-child .f-desc,.ftr-grid>div:first-child .f-contact{grid-column:1 !important}
  .ftr-grid>div:first-child .f-contact a{flex-direction:row !important;align-items:center !important;gap:8px !important}
  .ftr-grid>div:first-child .f-contact a svg{width:16px !important;height:16px !important}
}

@media(max-width:640px){
  .hub-logo,.hdr-logo img,.pp-header img{height:38px !important}
}