/*
 Theme Name: Noble Bare
 Theme URI: https://noblelondon.co.uk
 Author: Noble Corporate Travel Ltd
 Author URI: https://noblelondon.co.uk
 Description: Minimal theme for Noble London – full HTML/CSS control with WordPress SEO.
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: noblebare
*/

/* =========================
   BASE
   ========================= */

:root {
  --noble-gold: #b59a4a;
  --noble-gold-dark: #a1873e;
  --noble-bg-dark: #0b0b0b;
  --noble-text: #f5f5f5;
  --noble-body: #111827;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "DM Sans", sans-serif;
  background-color: #000;
  color: var(--noble-text);
}

#page {
  min-height: 100vh;
  background-color: #000;
}

/* content wrapper (all pages) */
.site-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 16px 40px;
  box-sizing: border-box;
}

/* home gets full-width hero, then 1200px content */
body.home .site-content {
  max-width: 100%;
  margin: 0;
  padding: 96px 0 40px;
}

/* =========================
   HEADER / MENU
   ========================= */

header#masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.96);
}

header#masthead .main-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 8px 32px;
  min-height: 64px;
  box-sizing: border-box;
}

/* three zones: menu / logo / time+social */
.header-left,
.site-branding,
.header-right {
  display: flex;
  align-items: center;
}

.header-left {
  flex: 1;
  justify-content: flex-start;
}

.site-branding {
  flex: 0 0 auto;
  justify-content: center;
}

.header-right {
  flex: 1;
  justify-content: flex-end;
  gap: 16px;
}

/* logo */
.site-branding img {
  max-height: 80px;
  height: auto;
  width: auto;
  display: block;
}

/* main menu */
.site-navigation {
  display: flex;
  align-items: center;
}

.main-header-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-header-menu > li {
  display: flex;
  align-items: center;
}

.main-header-menu a {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noble-gold);
  font-family: "Playfair Display", serif;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* hover glow */
.main-header-menu a:hover {
  color: #ffffff;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* active item – gold text + thin underline */
.main-header-menu .current-menu-item > a {
  position: relative;
  color: var(--noble-gold);
}

.main-header-menu .current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0; /* underline matches text width */
  bottom: -2px;
  height: 1px;
  background: var(--noble-gold);
  opacity: 0.6;
}

/* =========================
   TIME ZONE BANNER – FINAL
   ========================= */

/* Pasek nad headerem */
.ast-above-header-bar {
  background-color: #000000;
}

/* Kontener z HTML 1 w pasku powyżej nagłówka */
.ast-above-header-bar .ast-header-html-1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Wersja slider (NY / LON / HK z .noble-time-slide) */
.noble-time-slider {
  position: relative;
  overflow: hidden;
  min-width: 230px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.noble-time-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.noble-time-slide {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
  opacity: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.noble-time-slide.is-active {
  transform: translate(0, -50%);
  opacity: 1;
}

.noble-time-slide .tz-label {
  font-family: "Playfair Display", serif;
  font-size: 13px;
  font-weight: 400;
  min-width: 3ch;
}

.noble-time-slide .tz-time {
  min-width: 4.2ch;
  text-align: right;
  font-family: "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
}

/* Wymuszenie złotego koloru na wszystkim w pasku time zone */
.ast-above-header-bar .ast-header-html-1,
.ast-above-header-bar .ast-header-html-1 a,
.ast-above-header-bar .noble-time-ticker,
.ast-above-header-bar .noble-time-ticker *,
.ast-above-header-bar .noble-time-slider,
.ast-above-header-bar .noble-time-slider *,
.ast-above-header-bar #noble-time-ticker-text {
  color: var(--noble-gold) !important;
}

/* SOCIAL ICONS – simple gold icons */
.noble-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.noble-social .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--noble-gold);
}

.noble-social .social-link i {
  font-size: 16px;
  line-height: 1;
}

.noble-social .social-link:hover {
  color: #ffffff;
}

/* =========================
   HERO – SLIDESHOW (4 IMAGES)
   ========================= */

/* kontener na slajdy – absolutnie nad wrapperem hero */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* żeby nie blokować klikalności przycisku */
}

/* wspólny styl pojedynczego slajdu */
.hero-slide {
  position: absolute;
  inset: 0;
  filter: brightness(0.55);
  opacity: 0;
  animation: heroFade 30s infinite;
}

/* obraz jako <picture>/<img> musi wypełnić cały slajd */
.hero-slide-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-slide-picture img.hero-slide-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 4 slajdy – tylko opóźnienia animacji, BEZ background-image */
.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: 7.5s; }
.hero-slide-3 { animation-delay: 15s; }
.hero-slide-4 { animation-delay: 22.5s; }

/* animacja fade dla 4 slajdów:
   - 0–10%   – fade in
   - 10–30%  – pełna widoczność
   - 30–40%  – fade out
   - 40–100% – ukryty
   Cykl 30 s → brak czarnej przerwy między slajdami.
*/
@keyframes heroFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
/* FLEET – mobile hero z pierwszego obrazka w treści */
@media (max-width: 768px) {
  /* kontener pierwszego obrazka w treści strony */
  body.page .entry-content > .wp-block-image:first-of-type {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* sam obrazek – hero na mobile */
  body.page .entry-content > .wp-block-image:first-of-type img {
    display: block;
    width: 100%;
    height: 260px;              /* możesz zmienić np. na 220 / 280 */
    object-fit: cover;          /* wypełnia jak tło, bez rozciągania */
    object-position: center 35%;/* przesunięcie kadru (0% górą, 100% dół) */
  }
}



/* overlay content (text block on left) */
body.home .hero-overlay {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 0 0 64px;
  padding: 180px 64px 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  color: #f5f5f5;
  box-sizing: border-box;
}

body.home .hero-eyebrow {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--noble-gold);
  white-space: nowrap;
}

body.home .hero-title {
  font-family: "Playfair Display", serif;
  font-size: 60px;
  line-height: 1.05;
  margin: 0 0 20px;
  white-space: nowrap;
}

body.home .hero-subtitle {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 28px;
  color: #e5e7eb;
}

/* BOOK NOW – centred overlay button, style = Request a quote */
body.home .hero-btn {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Playfair Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: #b59a4a;
  color: #0b0b0b;
  border-radius: 8px;
  padding: 6px 36px;
  font-size: 14px;
  line-height: 1.2;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.25s ease-in-out;
}

body.home .hero-btn:hover {
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
  transform: translateX(-50%) translateY(-2px);
}

body.home .hero-btn:active {
  transform: translateX(-50%) translateY(0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* hero responsiveness */
@media (max-width: 1024px) {
  body.home .hero-overlay-wrapper {
    height: 520px;
  }

  body.home .hero-overlay {
    margin: 0 32px;
    padding: 72px 32px 120px 0;
    max-width: 100%;
  }

  body.home .hero-title {
    font-size: 36px;
    white-space: normal;
  }

  body.home .hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  body.home .hero-overlay-wrapper {
    height: 460px;
  }

  body.home .hero-overlay {
    margin: 0 16px;
    padding: 72px 16px 120px 0;
  }

  body.home .hero-title {
    font-size: 28px;
  }

  body.home .hero-subtitle {
    font-size: 14px;
  }

  body.home .hero-btn {
    bottom: 40px;
  }
}

/* =========================
   HOME CONTENT – VARIANT 1
   ========================= */

body.home .home-content {
  max-width: 1200px;
  margin: 40px auto 24px; /* 40px od góry, auto po bokach, 24px na dole */
  padding: 0 16px;
}

/* section blocks */
body.home .home-content .home-block {
  padding: 40px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}

body.home .home-content .home-block.home-intro {
  border-top: none;
}

/* headings – Playfair */
body.home .home-content .home-section-title,
body.home .home-content h2,
body.home .home-content h3 {
  font-family: "Playfair Display", serif;
  color: #f5f5f5;
}

body.home .home-content .home-section-title {
  font-size: 32px;
  margin: 0 0 24px;
}

body.home .home-content h2 {
  font-size: 32px;
  margin: 0 0 12px;
}

body.home .home-content h3 {
  font-size: 20px;
  margin: 0 0 8px;
}

/* paragraphs – DM Sans */
body.home .home-content p {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #e5e7eb;
  margin: 0 0 12px;
}

/* three service cards */
.home-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-service-card {
  position: relative;
  background: radial-gradient(circle at top left, rgba(181, 154, 74, 0.12), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(181, 154, 74, 0.3);
  border-radius: 16px;
  padding: 20px 18px 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.home-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.home-service-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
  border-color: rgba(245, 229, 156, 0.85);
  background: radial-gradient(circle at top left, rgba(181, 154, 74, 0.2), rgba(15, 23, 42, 0.98));
}

.home-service-card:hover::before {
  opacity: 1;
}

/* generic two-column layout used in support / chauffeurs blocks */
.home-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.home-col {
  min-width: 0;
}

/* Who we serve – centre text */
.home-who {
  text-align: left;
}

.home-who p {
  max-width: 820px;
}

/* =========================
   ARRANGE YOUR NEXT JOURNEY + LPHCA
   ========================= */

.home-arrange-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
}

.home-arrange-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-contact-heading {
  margin-top: 24px;
  margin-bottom: 8px;
}

/* contact lines – three rows */
.home-contact-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
}

.home-contact-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

.home-contact-label {
  font-weight: 600;
  color: var(--noble-gold);
}

.home-contact-value a {
  color: #e5e7eb;
  text-decoration: none;
}

.home-contact-value a:hover {
  text-decoration: underline;
}

/* right column – LPHCA logo */
.home-arrange-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-lphca-logo {
  max-width: 220px;
  height: auto;
  display: block;
}

/* =========================
   BOTTOM CTA – REQUEST A QUOTE
   ========================= */

.home-cta {
  padding: 16px 16px 36px; /* mniejszy odstęp od góry i od dołu */
  text-align: center;
}

.home-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* CTA button – same visual style as hero button */
.home-cta-btn {
  font-family: "Playfair Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: #b59a4a;
  color: #0b0b0b;
  border-radius: 8px;
  padding: 6px 36px;
  font-size: 14px;
  line-height: 1.2;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.25s ease-in-out;
}

.home-cta-btn:hover {
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.home-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* =========================
   RESPONSIVE – HOME CONTENT
   ========================= */

@media (max-width: 1024px) {
  .home-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .home-arrange-grid {
    grid-template-columns: 1.6fr 1.2fr;
  }

  body.home .home-content .home-section-title {
    font-size: 28px;
  }

  body.home .home-content h2 {
    font-size: 22px;
  }

  body.home .home-content h3 {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .home-service-grid {
    grid-template-columns: 1fr;
  }

  .home-arrange-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .home-arrange-right {
    justify-content: flex-start;
  }

  body.home .home-content {
    padding: 0 16px 54px;
  }
}

/* =========================
   TIME ZONE – kolor ma być złoty
   ========================= */

/* (nadpisane szerzej wyżej – zostawione globalne wymuszenie koloru) */

/* =========================
   HOME – zmniejszenie odstępu nad dolnym przyciskiem REQUEST A QUOTE
   ========================= */

body.home .home-content .wp-block-buttons.aligncenter:last-of-type {
  margin-top: 10px !important; /* było pewnie ok. 40px */
  margin-bottom: 40px !important;
}

/* Dodatkowe podciągnięcie samego przycisku w górę */
body.home .home-content .wp-block-buttons.aligncenter:last-of-type .wp-block-button__link {
  position: relative !important;
  top: -10px !important; /* ujemna wartość = przycisk wyżej */
}

/* === TIME ZONE – WSZYSTKO ZŁOTE === */
.noble-time-slider,
.noble-time-slider *,
.noble-time-ticker,
.noble-time-ticker * {
  color: var(--noble-gold) !important;
}

/* =========================
   HERO – korekta położenia BOOK NOW (zawsze widoczny)
   ========================= */

/* (zostawione w wersji bazowej – dodatkowe korekty są niżej w hero mobile) */

/* HERO – BOOK NOW ZAWSZE NAD TŁEM, NIE ZNIKA */
body.home section.hero-overlay-wrapper {
  position: relative;
  overflow: hidden;
}

/* przycisk BOOK NOW – zawsze widoczny na środku dołu banera */
body.home section.hero-overlay-wrapper .hero-btn {
  position: absolute;
  left: 50%;
  bottom: 48px; /* ustaw wysokość przycisku nad dolną krawędzią */
  transform: translateX(-50%);
  z-index: 10; /* ponad tłem i slajdami */
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important; /* wyłącz ewentualne animacje na przycisku */
}

/* =========================================
   3 BOXY POD BANEREM – STYL „SHELL” W NOBLE
   ========================================= */

.noble-feature-strip {
  background: var(--noble-body, #111827);
  padding: 40px 16px 0;
}

.noble-feature-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Nagłówek sekcji */
.noble-feature-header {
  margin-bottom: 24px;
}

.noble-feature-header h2 {
  margin: 0 0 8px 0;
  font-family: "Playfair Display", serif;
  font-size: 28px;
  line-height: 1.3;
  color: var(--noble-text, #f5f5f5);
}

.noble-feature-header p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.75);
}

/* Siatka 3 kart (bazowa) */
.noble-feature-grid {
  display: grid;
  gap: 24px;
}

/* Desktop – 3 kolumny */
@media (min-width: 1025px) {
  .noble-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet – 2 kolumny */
@media (min-width: 641px) and (max-width: 1024px) {
  .noble-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile – 1 kolumna */
@media (max-width: 640px) {
  .noble-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* Pojedyncza karta */
.noble-feature-card {
  background: #05060a;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hover jak na shell.com – lekki „lift” */
.noble-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.75);
  border-color: var(--noble-gold, #b59a4a);
}

/* Obraz na górze – proporcje 16:9 */
.noble-feature-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.noble-feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.4s ease;
}

/* Delikatny zoom obrazka przy hover */
.noble-feature-card:hover .noble-feature-image img {
  transform: scale(1.06);
}

/* Część tekstowa */
.noble-feature-body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tytuł */
.noble-feature-body h3 {
  margin: 0 0 10px 0;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  line-height: 1.35;
  color: var(--noble-text, #f5f5f5);
}

/* Opis */
.noble-feature-body p {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.85);
}

/* Link "Learn more" – w stylu CTA, ale bez przycisku */
.noble-feature-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--noble-gold, #b59a4a);
}

.noble-feature-link::after {
  content: "›";
  display: inline-block;
  transition: transform 0.2s ease;
}

.noble-feature-card:hover .noble-feature-link::after {
  transform: translateX(3px);
}

/* =========================================
   50/50 WYSOKOŚCI – ZDJĘCIE NA GÓRZE, TEKST POD SPODEM
   (pierwsza próba – potem zresetowana niżej)
   ========================================= */

/* (pozostawione, ale zresetowane kolejnymi blokami niżej) */

@media (min-width: 768px) {
  .noble-feature-card {
    display: flex;
    flex-direction: column; /* pionowo: góra/dół */
    height: 420px; /* wysokość karty – możesz zmienić np. na 380 / 450 */
  }

  .noble-feature-image {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto; /* nadpisuje wcześniejsze 16:9 */
  }

  .noble-feature-body {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
  }
}

/* Obraz wypełnia swoją połowę karty */
.noble-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4 kolumny dla sekcji Core Services na dużych ekranach */
@media (min-width: 1025px) {
  .noble-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================
   FIX: brak pikselowania obrazów w boxach
   ========================= */

/* Wyłącz zoom obrazka – pełna ostrość */
.noble-feature-image img {
  transform: none !important;
  transition: opacity 0.25s ease; /* zamiast animacji powiększenia */
}

/* Na hover zostawiamy tylko cień/ramkę karty, bez powiększania zdjęcia */
.noble-feature-card:hover .noble-feature-image img {
  transform: none !important;
  filter: brightness(1.05); /* delikatne rozjaśnienie zamiast zoomu (opcjonalne) */
}

/* =========================
   RESET – ostre zdjęcia w boxach usług
   ========================= */

/* 1. Karta bez sztucznej wysokości 50/50 */
@media (min-width: 768px) {
  .noble-feature-card {
    height: auto !important; /* brak wymuszonej wysokości 420px */
    flex-direction: column !important;
  }

  .noble-feature-image,
  .noble-feature-body {
    flex: 0 0 auto !important; /* żadnego dzielenia "po połowie" wysokości */
  }
}

/* 2. Obrazek – pełna szerokość, naturalne proporcje, zero trików */
.noble-feature-image {
  position: relative;
  aspect-ratio: 16 / 9; /* estetyczne 16:9, bez rozjeżdżania */
  overflow: hidden;
}

.noble-feature-image img {
  width: 100%;
  height: auto; /* żadnego height:100% */
  display: block;
  object-fit: cover;
  transform: none !important; /* bez zoomu */
  filter: none !important; /* bez rozjaśnień itp. */
  image-rendering: auto;
}

/* 3. Na hover nie ruszamy zdjęcia – tylko karta ma efekt (cień, ramka) */
.noble-feature-card:hover .noble-feature-image img {
  transform: none !important;
  filter: none !important;
}

/* 5 kolumn dla sekcji Core Services na dużych ekranach */
@media (min-width: 1025px) {
  .noble-feature-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* =========================
   SZERSZE BOXY CORE SERVICES
   ========================= */

/* Kontener sekcji – mniej paddingu, większa szerokość max */
.noble-feature-strip {
  padding: 40px 8px 0; /* było 40px 16px 0 – więcej miejsca na szerokość */
}

.noble-feature-inner {
  max-width: 1400px; /* było 1200px – boxy będą realnie szersze */
}

/* Siatka 5 kolumn – trochę mniejszy gap, żeby więcej szerokości zostało na karty */
@media (min-width: 1025px) {
  .noble-feature-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 boxów w rzędzie */
    gap: 18px; /* było 24px */
  }
}

/* =========================
   Paragrafy w boxach – mniejsza czcionka + justify
   ========================= */

.noble-feature-body p {
  font-size: 13px; /* było 14px – delikatnie mniejsze */
  line-height: 1.6;
  text-align: justify; /* równomierne rozciągnięcie w wierszu */
  text-justify: inter-word; /* lepsze rozkładanie odstępów */
  hyphens: auto; /* opcjonalnie: dzielenie wyrazów */
}

/* Wymuszone dla paragrafów wewnątrz karty */
.noble-feature-card .noble-feature-body p {
  font-size: 13px !important;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* =========================
   TŁO STRONY CZARNE + INNY KOLOR BOXÓW
   ========================= */

/* Globalne tło strony */
html,
body,
#page,
.site,
.site-content {
  background-color: #000000 !important;
}

/* Sekcja z boxami – niech zlewa się z czarnym tłem */
.noble-feature-strip {
  background: #000000 !important;
}

/* Tło pojedynczego boxa – finalnie gradient */
.noble-feature-card {
  background: #041e17 !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Boxy – ciemny, ale czytelny dark green (kompromis) */
.noble-feature-card {
  background: #041e17 !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================
   BOXY 50/50 – GÓRA ZDJĘCIE, DÓŁ TEKST (druga wersja)
   ========================= */

/* Ustawiamy boxy na stałą wysokość i dzielimy je po równo */
.noble-feature-card {
  display: flex;
  flex-direction: column;
  height: 400px; /* stała wysokość boxa – możesz dostosować */
}

/* Górna część na zdjęcie: 50% */
.noble-feature-image {
  flex: 0 0 50%; /* 50% wysokości */
  height: auto;
}

/* Dolna część na tekst: 50% */
.noble-feature-body {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Wyśrodkowanie tekstu w pionie */
}

/* =========================
   BOXY – BEZ PUSTEGO MIEJSCA NA DOLE
   ========================= */

/* Karta ma wysokość wynikającą z zawartości (brak sztywnego 400px / 50%) */
.noble-feature-card {
  height: auto !important;
  display: flex;
  flex-direction: column;
}

/* Zdjęcie: bardziej kwadratowe pudło */
.noble-feature-image {
  aspect-ratio: 4 / 3; /* wyższe niż 16/9 */
  height: auto !important;
  flex: 0 0 auto !important;
  overflow: hidden;
}

.noble-feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Tekst – normalny przepływ */
.noble-feature-body {
  flex: 0 0 auto !important;
  display: block !important;
  padding: 16px 20px 16px !important;
}

/* Delikatne skrócenie marginesów */
.noble-feature-body h3 {
  margin-top: 0;
  margin-bottom: 6px !important;
}

.noble-feature-body p {
  margin-top: 0;
  margin-bottom: 8px !important;
}

/* =========================================
   "Learn more" przyklejone do dołu boxa
   ========================================= */

.noble-feature-card {
  display: flex;
  flex-direction: column;
}

.noble-feature-card .noble-feature-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column;
}

.noble-feature-card .noble-feature-link {
  margin-top: auto; /* klucz – pcha link na dół */
  padding-top: 8px;
}

/* Wycentrowanie nagłówka i paragrafu pod nim */
.noble-feature-header {
  text-align: center;
}

.noble-feature-header h2,
.noble-feature-header p {
  text-align: center;
}

/* Wycentrowanie nagłówków w boxach */
.noble-feature-card h3 {
  text-align: center;
}

/* =========================
   ZIELONY GRADIENT W BOXACH JAKO TŁO
   ========================= */

/* Tło boxów – gradient zieleni */
.noble-feature-card {
  background: radial-gradient(
    circle at 20% 0,
    #1b5c45 0%,
    #0c3a2b 35%,
    #041e17 70%,
    #020806 100%
  ) !important; /* gradient jak w logo */
}

/* =========================
   FOOTER – LINKI I COPYRIGHT
   ========================= */

.noble-footer-copy {
  width: 100%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.9);
  margin: 24px auto 0;
  white-space: nowrap; /* trzyma wszystko w jednym wierszu */
}

/* Dodatkowe menu nad copyright */
.noble-footer-links {
  text-align: center;
  margin-bottom: 16px;
}

.noble-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 20px;
}

.noble-footer-links a {
  color: var(--noble-gold, #b59a4a);
  font-size: 13px;
  text-decoration: none;
}

.noble-footer-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

.noble-footer-copy {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(148, 163, 184, 0.85);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* FINAL OVERRIDE – mały, wąski copyright na dole strony */
footer.site-footer .noble-footer-bottom {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(31, 41, 55, 0.9);
  text-align: center;
}

footer.site-footer .noble-footer-bottom .noble-footer-copy {
  margin: 0 !important;
  font-size: 10px !important; /* wymusza mniejszą czcionkę */
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.85) !important;
  white-space: nowrap !important; /* wszystko w jednym wierszu */
}

/* FOOTER FULL-WIDTH – jak pasek menu u góry */
footer.site-footer {
  width: 100%;
}

footer.site-footer .noble-footer {
  max-width: 100% !important; /* nadpisuje 1200px */
  width: 100%;
  margin: 0;
  padding: 32px 32px 24px;
  box-sizing: border-box;
}

/* Na małych ekranach trochę mniejszy padding */
@media (max-width: 640px) {
  footer.site-footer .noble-footer {
    padding-inline: 16px;
  }
}

/* FOOTER – pełna szerokość ekranu jak menu u góry */
footer.site-footer,
footer#colophon {
  width: 100%;
  background-color: #000000;
}

/* rozciągnięcie wewnętrznych kontenerów w stopce */
footer.site-footer .ast-container,
footer#colophon .ast-container,
footer.site-footer .noble-footer {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

/* na małych ekranach mniejszy padding z boków */
@media (max-width: 640px) {
  footer.site-footer .ast-container,
  footer#colophon .ast-container,
  footer.site-footer .noble-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* FOOTER: linia nad dolnym menu, brak linii między menu a copyright */
footer.site-footer .noble-footer-links {
  border-top: 1px solid rgba(31, 41, 55, 0.9);
  padding-top: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Usuń linię między dolnym menu a copyright */
footer.site-footer .noble-footer-bottom {
  border-top: none !important;
  margin-top: 4px;
  padding-top: 4px;
}

/* ========================= TIME TICKER – NY / LON / HK ========================= */

.noble-time-ticker {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: 12px; /* było 14px – trochę mniejszy */
  letter-spacing: 0.10em; /* minimalnie ciaśniej */
  color: var(--noble-gold, #b59a4a);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  min-width: 160px; /* było 210px – mniej miejsca = nie wypycha ikon */
  margin-right: 8px; /* trochę mniejszy margines */
}

/* TIME TICKER – godzina Times New Roman */
.noble-time-ticker .ntt-time {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: left;
  font-size: 18px !important; /* TU ustaw rozmiar czasu, np. 14–16px */
}

.noble-time-ticker .ntt-city,
.noble-time-ticker .ntt-sep,
.noble-time-ticker .ntt-time {
  display: inline-block;
  transition: opacity 0.6s ease; /* wolniejszy, ładny fade */
  will-change: opacity;
}

/* na mobile chowamy, żeby nie ściskać menu */
@media (max-width: 921px) {
  .noble-time-ticker {
    display: none;
  }
}

/* HERO – większa wysokość banera na desktopie */
@media (min-width: 1025px) {
  body.home .hero-overlay-wrapper {
    height: 500px; /* było 700px – możesz zmienić np. na 760 / 800 */
  }
}

/* TIME TICKER – nazwy miast Playfair Display */
.noble-time-ticker .ntt-city {
  font-family: "Playfair Display", serif !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* =========================
   CONTACT – MAPA LONDYNU POD CAŁĄ STRONĄ + BOX W STYLU TEMPLATE
   ========================= */

/* CONTACT – sekcja + mapa jako tło z lekkim zapasem POD boksem */
.noble-contact-page {
  position: relative;
  z-index: 0;
  padding: 0 16px 40px;   /* tu sterujesz, ile mapy jest pod boxem (np. 100 / 120 / 140) */
  box-sizing: border-box;
}

/* Mapa: zaczyna się trochę nad sekcją i kończy równo z dołem sekcji */
.noble-contact-page::before {
  content: "";
  position: absolute;
  top: -100px;                         /* podciągnięcie pod header */
  left: 50%;
  width: 100vw;
  height: calc(100% + 100px);          /* kompensuje top:-100 → mapa kończy się na dole sekcji */
  transform: translateX(-50%);
  background-color: #000;
  background-image: url("London Topographic Map in Grayscale.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: -1;
}

/* Korekta, gdy jesteś zalogowany (pasek admina WP) */
body.admin-bar .noble-contact-page::before {
  top: -132px;
  height: calc(100% + 132px);
}

/* upewniamy się, że kontenery na contact nie mają własnego kryjącego tła */
.noble-contact-frame,
.noble-contact-inner,
.noble-contact-layout {
  background: transparent;
}

/* główny box – węższy, jak na template, na środku ekranu
   TU REGULUJESZ WYSOKOŚĆ BOXA WZGLĘDEM HEADERA → margin-top */
.noble-contact-frame {
  max-width: 860px;
  margin: 0px auto 80px;  /* było 60px – box bliżej headera */
  background: rgba(0, 0, 0, 0.9);
  border-radius: 18px;
  border: 1px solid rgba(181, 154, 74, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* wnętrze boxa */
.noble-contact-inner {
  padding: 40px 32px 36px;
  text-align: center;
}

/* GÓRA: nagłówek "Contact ..." */
.noble-contact-top h1 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 30px;
  color: #f9fafb;
}

/* rząd trzech ikon (address / phone / email) */
.noble-contact-icon-row {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.noble-contact-icon-card {
  max-width: 220px;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #d1d5db;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}

.noble-contact-icon-card h3 {
  margin: 12px 0 6px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f9fafb;
}

.noble-contact-icon-card p {
  margin: 0;
}

.noble-contact-icon-card a {
  color: #e5e7eb;
  text-decoration: none;
}

.noble-contact-icon-card a:hover {
  color: var(--noble-gold);
}

/* okrągłe złote ikony */
.noble-contact-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--noble-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.noble-contact-icon-circle i {
  font-size: 22px;
  color: #0b0b0b;
}

/* ŚRODEK: nagłówek "Get in touch with us" + formularz */
.noble-contact-form-block {
  margin-top: 10px;
  max-width: 520px;          /* węższy formularz w środku boxa */
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.noble-contact-form-block h2 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 12px;
  color: #f9fafb;
  text-align: center;
}

.noble-contact-form-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #d1d5db;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* odstępy między polami CF7 */
.noble-contact-form-block .wpcf7-form p {
  margin: 0 0 10px;
}

/* pola formularza – węższe, niższe, jak w template */
.noble-contact-form-block .wpcf7-form-control.wpcf7-text,
.noble-contact-form-block .wpcf7-form-control.wpcf7-email,
.noble-contact-form-block .wpcf7-form-control.wpcf7-tel,
.noble-contact-form-block .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #f9fafb;
  background-color: #050608;
  border-radius: 10px;
  border: 1px solid #111827;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.noble-contact-form-block .wpcf7-form-control.wpcf7-textarea {
  min-height: 140px;
}

/* focus */
.noble-contact-form-block .wpcf7-form-control.wpcf7-text:focus,
.noble-contact-form-block .wpcf7-form-control.wpcf7-email:focus,
.noble-contact-form-block .wpcf7-form-control.wpcf7-tel:focus,
.noble-contact-form-block .wpcf7-form-control.wpcf7-textarea:focus {
  border-color: var(--noble-gold);
  box-shadow: 0 0 0 1px rgba(181, 154, 74, 0.4);
}

.noble-contact-form-block ::placeholder {
  color: rgba(156, 163, 175, 0.9);
  font-size: 13px;
}

/* =========================
   CONTACT – SEND jak przycisk z home (home-cta-btn)
   ========================= */

.noble-contact-form-block .wpcf7-submit {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Playfair Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: #b59a4a; /* ten sam złoty co .home-cta-btn */
  color: #0b0b0b;
  border-radius: 8px;
  padding: 6px 36px;
  font-size: 14px;
  line-height: 1.2;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.25s ease-in-out;
  width: auto;
}

/* hover/active skopiowane z .home-cta-btn */
.noble-contact-form-block .wpcf7-submit:hover {
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.noble-contact-form-block .wpcf7-submit:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* wycentrowanie przycisku SEND wewnątrz formularza contact */
.noble-contact-form-block .wpcf7-form p:last-child {
  text-align: center;
}

/* CONTACT – wycentrowanie przycisku SEND względem formularza */
.noble-contact-form-block .wpcf7-form p:last-of-type {
  display: flex;
  justify-content: center;
}

/* Wszystkie wrappery na contact muszą być przezroczyste,
   żeby było widać mapę spod spodu */
body.page-contact,
body.page-contact #page,
body.page-contact .site,
body.page-contact #content,
body.page-contact .site-content,
body.page-contact .noble-contact-page {
  background: transparent !important;
}

/* CONTACT – ciasny układ pól formularza */

body.page-contact .noble-contact-form-block .wpcf7-form p.noble-field {
  margin: 0 0 6px !important;   /* mały odstęp między kolejnymi polami */
  padding: 0 !important;
}

/* etykieta tuż nad polem */
body.page-contact .noble-contact-form-block .wpcf7-form p.noble-field label {
  display: block;
  margin: 0 0 2px !important;   /* 2 px od etykiety do pola */
  line-height: 1.1;
}

/* same pola – bez dodatkowych marginesów */
body.page-contact .noble-contact-form-block .wpcf7-form p.noble-field .wpcf7-form-control {
  margin: 0 !important;
}

/* SEND – wycentrowany przycisk pod formularzem */
body.page-contact .noble-contact-form-block .wpcf7-form p.noble-field-submit {
  display: flex !important;
  justify-content: center;
  margin-top: 10px !important;
}

/* CONTACT – ciasny układ etykieta → pole → następna etykieta */
.noble-contact-form-block .wpcf7-form p {
  margin: 0 0 4px !important;   /* mały odstęp między blokami (Name+pole, Company+pole itd.) */
  padding: 0 !important;
}

/* etykieta + pole w jednej kolumnie, bez dużej dziury */
.noble-contact-form-block .wpcf7-form p > label {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;          /* 2 px między tekstem etykiety a polem */
  margin: 0 !important;
  line-height: 1.1;
}

/* kasujemy <br>, który robił duży odstęp */
.noble-contact-form-block .wpcf7-form p > label br {
  display: none !important;
}

/* opakowanie pola – zero marginesów */
.noble-contact-form-block .wpcf7-form .wpcf7-form-control-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

/* samo pole – zero marginesów */
.noble-contact-form-block .wpcf7-form .wpcf7-form-control {
  margin: 0 !important;
}

/* =========================
   CONTACT – ciasne odstępy w formularzu CF7
   ========================= */

/* Reset podstawowy wewnątrz formularza w boxie contact */
.noble-contact-inner .wpcf7-form {
  margin: 0;
  padding: 0;
}

/* Każdy blok (etykieta + pole) = jeden wiersz z bardzo małym odstępem */
.noble-contact-inner .wpcf7-form > p {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;          /* odległość ETYKIETA ↔ POLE */
  margin: 0 0 4px !important;   /* mały odstęp BLOK ↔ BLOK */
  padding: 0 !important;
}

/* Etykieta bez dodatkowych marginesów */
.noble-contact-inner .wpcf7-form label {
  margin: 0 !important;
  line-height: 1.1;
}

/* Usuwamy <br>, które robią „puste” wiersze */
.noble-contact-inner .wpcf7-form br {
  display: none !important;
}

/* Opakowanie pola – zero marginesów */
.noble-contact-inner .wpcf7-form .wpcf7-form-control-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

/* Same pola – zero marginesów */
.noble-contact-inner .wpcf7-form .wpcf7-form-control {
  margin: 0 !important;
}

/* Trochę oddechu tylko nad SEND + centrowanie przycisku */
.noble-contact-inner .wpcf7-form > p:last-of-type {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* CONTACT – mniejsze okrągłe ikony u góry */

.noble-contact-icon-circle {
  width: 32px !important;   /* było 64px */
  height: 32px !important;
  border-radius: 999px;
}

.noble-contact-icon-circle i {
  font-size: 18px !important;  /* było 22px */
}

/* CONTACT – mniejsze nazwy pól formularza */
.noble-contact-inner .wpcf7-form label {
  font-size: 14px !important;  /* zmniejsz rozmiar etykiet */
  line-height: 1.2;
}

/* CONTACT – opisy pod ikonami w Playfair */
body.page-contact .noble-contact-icon-card,
body.page-contact .noble-contact-icon-card h3,
body.page-contact .noble-contact-icon-card p {
  font-family: "Playfair Display", serif !important;
}

/* =========================
   CONTACT – font dla każdego wersu osobno
   ========================= */

/* 1. Główny tytuł: CONTACT US */
.noble-contact-top h1 {
  font-family: "Playfair Display", serif !important;
}

/* 2. Tytuły pod okrągłymi ikonami: Address / Telephone / Email – DM Sans */
.noble-contact-icon-card h3 {
   font-family: "Playfair Display", serif !important;
}

/* 3. Tekst pod ikonami (adres, telefon, email) */
.noble-contact-icon-card p,
.noble-contact-icon-card p a {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 4. Środkowy tytuł: Get in touch with us */
.noble-contact-form-block h2 {
  font-family: "Playfair Display", serif !important;
}

/* 5. Opis nad formularzem:
      "Please include date and time, pick-up and drop-off..." */
.noble-contact-form-intro {
  font-family: "Playfair Display", serif !important;
}

/* 6. Etykiety pól formularza: NAME, COMPANY NAME, EMAIL, MESSAGE */
.noble-contact-inner .wpcf7-form label {
  font-family: "Playfair Display", serif !important;
}

/* 7. Tekst w polach formularza + placeholdery – DM Sans */
.noble-contact-inner .wpcf7-form .wpcf7-form-control,
.noble-contact-inner .wpcf7-form .wpcf7-form-control::placeholder {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 8. Dolny tekst:
      "For urgent changes to existing bookings, please call us." */
.noble-contact-opening {
  font-family: "Playfair Display", serif !important;
}

/* CONTACT – zlikwidowanie czarnej przerwy między mapą a footerem */
.site-content {
  padding-bottom: 0; /* było 40px – usuwamy czarny pas pod sekcją */
}

/* HOME – pełne wycentrowanie sekcji "Who We Serve" */
body.home .home-block.home-who {
  text-align: center;
}

body.home .home-block.home-who p {
  max-width: 820px;          /* zostaje ta sama szerokość */
  margin: 0 auto 12px;       /* auto po bokach = blok na środku */
}

/* =========================
   SERVICES – mniejsze, wycentrowane boxy
   ========================= */

.noble-services-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 60px;
  box-sizing: border-box;
}

/* HERO SERVICES – JEDEN SPÓJNY BLOK (H1 + H2 + 2x P) */
.services-hero {
  max-width: 900px;
  margin: 12px auto 40px;
  text-align: center;
}

.services-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #f5f5f5;
}

.services-hero h2 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 14px;
  color: #e5e7eb;
}

.services-hero p {
  max-width: 820px;
  margin: 0 auto 8px;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #e5e7eb;
}

@media (max-width: 768px) {
  .services-hero {
    padding: 0 12px;
    margin: 8px auto 28px;
  }

  .services-hero h1 {
    font-size: 26px;
  }

  .services-hero h2 {
    font-size: 18px;
  }

  .services-hero p {
    font-size: 13px;
  }
}

/* kolumna z boxami – środek strony */
.noble-services-page .services-list {
  max-width: 960px;            /* szerokość całej kolumny */
  margin: 32px auto 60px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;                   /* odstęp między boxami */
  align-items: center;         /* wyrównanie boxów do środka */
}

/* pojedynczy box – węższy niż na home */
.noble-services-page .services-card {
  width: 100%;
  max-width: 720px;            /* tu regulujesz „jak małe” są boxy */
  margin: 0 auto;
}

/* =========================
   SERVICES – sekcja pod 5 boxami
   ========================= */

/* Sekcja "How We Manage Your Journeys" */
.noble-services-page .services-support {
  max-width: 1200px;
  margin: 0 auto 60px;
  text-align: center;
}

.noble-services-page .services-support h2 {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 24px;
  color: #f5f5f5;
}

/* 3 karty pod nagłówkiem */
.noble-services-page .services-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.noble-services-page .services-support-item {
  background: #05060a;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
  padding: 20px 22px 22px;
  text-align: left;
}

.noble-services-page .services-support-item h3 {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  margin: 0 0 8px;
  color: #f5f5f5;
}

.noble-services-page .services-support-item p {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: #e5e7eb;
}

/* RESPONSYWNOŚĆ – na węższych ekranach 1 kolumna */
@media (max-width: 1024px) {
  .noble-services-page .services-support-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA na dole strony Services */
.noble-services-page .services-cta {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.noble-services-page .services-cta h2 {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  margin: 0 0 10px;
  color: #f5f5f5;
}

.noble-services-page .services-cta p {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 18px;
  color: #e5e7eb;
}

/* =========================
   SERVICES – mniejsze boxy pod "How We Manage Your Journeys"
   ========================= */

/* węższe karty + wycentrowanie w kolumnach */
.noble-services-page .services-support-grid {
  justify-items: center;        /* każda kolumna centruje box */
}

.noble-services-page .services-support-item {
  max-width: 280px;             /* było pełne 1/3 szerokości – teraz ok. połowa */
  padding: 10px 14px 12px;      /* mniejsze paddingi = niższy box */
}

/* mniejszy heading w boxie */
.noble-services-page .services-support-item h3 {
  font-size: 15px;              /* było 18px */
  margin: 0 0 4px;
}

/* mniejszy tekst w boxie */
.noble-services-page .services-support-item p {
  font-size: 13px;              /* było 14px */
  line-height: 1.5;             /* było 1.7 */
}

/* =========================
   SERVICES – prostokątne boxy, tekst tuż przy zdjęciu
   FINALNY RESET UKŁADU
   ========================= */

/* cały box: flex w poziomie, bez paddingu i przerw */
.noble-services-page .services-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
}

/* LEWA część – zdjęcie, stała szerokość */
.noble-services-page .services-card .noble-feature-image {
  flex: 0 0 240px;              /* szerokość zdjęcia – możesz zmienić np. na 280/300 */
  max-width: 240px;
  margin: 0 !important;
}

.noble-services-page .services-card .noble-feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* PRAWA część – tekst przy samej krawędzi zdjęcia */
.noble-services-page .services-card .noble-feature-body {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 16px 24px 16px 18px !important;  /* 18px od krawędzi zdjęcia */
  display: block !important;
  text-align: left !important;
}

/* nagłówek + opis bez dodatkowych marginesów */
.noble-services-page .services-card .noble-feature-body h3 {
  margin: 0 0 6px !important;
  font-size: 18px;
  text-align: left;
}

.noble-services-page .services-card .noble-feature-body p {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

/* SERVICES – "Learn more" w prawym dolnym rogu boxa */
.noble-services-page .services-card .noble-feature-body {
  display: flex !important;
  flex-direction: column;
}

.noble-services-page .services-card .noble-feature-link {
  margin-top: auto !important;    /* spycha link na dół kolumny */
  align-self: flex-end !important;/* prawa strona */
  text-align: right;
}

/* SERVICES – nagłówki H2 w boxach w Playfair */
.noble-services-page .services-card .noble-feature-body h2 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 20px;   /* możesz zmienić np. na 22px jeśli chcesz większe */
  margin: 0 0 6px;
}

/* FINAL – większa czcionka tylko dla godziny w banerze czasu */
.noble-time-ticker .ntt-time,
.noble-time-slide .tz-time {
  font-size: 14px !important;  /* testowo – możesz zmienić np. na 18px */
}

/* =========================================
   Globalny styl przycisku a.noble-btn
   (używany na HOME i na Airport Transfers)
   ========================================= */

a.noble-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Playfair Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: #b59a4a;   /* ten sam złoty co .home-cta-btn i SEND */
  color: #0b0b0b;
  border-radius: 8px;
  padding: 6px 36px;
  font-size: 14px;
  line-height: 1.2;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.25s ease-in-out;
}

a.noble-btn:hover,
a.noble-btn:focus {
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

a.noble-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Na stronie Airport – tylko ułożenie przycisku w hero */
.airport-hero .noble-btn {
  align-self: flex-start;
  margin-top: 0.35rem;
}

/* =========================
   TIME TICKER – drobne dopasowania
   ========================= */

/* rozmiar samej godziny w pasku czasu na desktopie */
.ast-above-header-bar .noble-time-ticker .ntt-time {
  font-size: 22px !important;
}

/* domyślne parametry tickera (NY / LON / HK) */
.noble-time-ticker {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--noble-gold, #b59a4a);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  min-width: 160px;
  margin-right: 8px;
}

/* nazwy miast Playfair, godzina Times */
.noble-time-ticker .ntt-city {
  font-family: "Playfair Display", serif !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.noble-time-ticker .ntt-time {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: left;
  font-size: 14px !important;
}

.noble-time-ticker .ntt-city,
.noble-time-ticker .ntt-sep,
.noble-time-ticker .ntt-time {
  display: inline-block;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

/* =========================
   MOBILE HEADER – bez czasu, logo idealnie w środku
   ========================= */

@media (max-width: 1024px) {

  /* 1) Cały ticker/czas + pasek nad nagłówkiem znika na mobile */
  .noble-time-ticker,
  .noble-time-ticker *,
  .noble-time-slider,
  .noble-time-slider *,
  .noble-time-track,
  .noble-time-slide,
  #noble-time-ticker-text,
  .ast-above-header-bar,
  .ast-above-header,
  .ast-above-header-wrap {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 2) Odstęp od góry – inne podstrony */
  .site-content,
  #content {
    padding-top: 110px !important;
  }

  /* HOME – baner zaczyna się bliżej headera (mniejszy odstęp) */
  body.home .site-content {
    padding-top: 80px !important;
  }

  /* 3) Pasek headera – logo absolutnie pośrodku */
  header#masthead .main-header-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
  }

  header#masthead .header-left,
  header#masthead .header-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* LOGO – w 100% wycentrowane */
  header#masthead .site-branding {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  header#masthead .site-branding img {
    max-height: 44px !important;
    height: auto;
  }

  /* PRAWO – tylko słuchawka / WhatsApp */
  header#masthead .header-right {
    justify-content: flex-end !important;
  }

  header#masthead .header-right .noble-social {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  header#masthead .header-right .noble-social .social-link {
    display: none !important;
  }

  header#masthead .header-right .noble-social .social-link[href*="wa.me"],
  header#masthead .header-right .noble-social .social-link[href^="tel:"] {
    display: inline-flex !important;
  }

  /* LEWO – hamburger */
  header#masthead .header-left {
    justify-content: flex-start;
  }

  header#masthead .site-navigation {
    position: relative;
    padding: 10px 4px;
  }

  /* ikona 3 kresek */
  header#masthead .site-navigation::before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--noble-gold);
    box-shadow:
      0 6px 0 var(--noble-gold),
      0 12px 0 var(--noble-gold);
  }

  /* dropdown menu – domyślnie ukryte, pokazuje je klasa .is-open */
  header#masthead .site-navigation .main-header-menu {
    position: absolute;
    top: 120%;
    left: 0;
    min-width: 180px;
    display: none;
    flex-direction: column;
    padding: 8px 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.96);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
    z-index: 9999;
  }

  header#masthead .site-navigation .main-header-menu li {
    width: 100%;
  }

  header#masthead .site-navigation .main-header-menu a {
    display: block;
    width: 100%;
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  header#masthead .site-navigation .main-header-menu a:hover {
    background: rgba(181, 154, 74, 0.08);
  }

  header#masthead .site-navigation.is-open .main-header-menu {
    display: flex;
  }
}

/* bardzo małe telefony – delikatnie mniejsze logo i tekst w menu */
@media (max-width: 480px) {
  header#masthead .site-branding img {
    max-height: 40px;
  }

  header#masthead .site-navigation .main-header-menu a {
    font-size: 11px;
  }
}

/* =========================
   FOOTER SOCIAL – Insta + LinkedIn tylko na mobile
   ========================= */

/* DESKTOP – w stopce nie pokazujemy ikon (są tylko w headerze) */
@media (min-width: 769px) {
  footer.site-footer .noble-footer-social {
    display: none !important;
    visibility: hidden !important;
  }
}

/* MOBILE – ikony w stopce wycentrowane nad menu/copyright */
@media (max-width: 768px) {
  footer.site-footer .noble-footer-social {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 12px 0 6px;
  }

  footer.site-footer .noble-footer-social .social-link i {
    font-size: 18px;
  }
}

/* MOBILE – wyrównanie hamburgera z ikonami tel / WhatsApp */
@media (max-width: 1024px) {

  /* Cały pasek headera – elementy w jednej linii w pionie */
  header#masthead .main-header-bar {
    align-items: center !important;
  }

  /* Lewa (hamburger) i prawa (ikony) strona – flex + centrowanie */
  header#masthead .header-left,
  header#masthead .header-right {
    display: flex !important;
    align-items: center !important;
  }

  /* Wrapper z ikonami po prawej */
  header#masthead .header-right .noble-social {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
  }

  /* Same ikonki – bez „podskakiwania” linii bazowej */
  header#masthead .header-right .noble-social .social-link i {
    display: block;
    line-height: 1;
  }

  /* Delikatna korekta położenia hamburgera (jeśli jest minimalnie wyżej/niżej) */
  header#masthead .site-navigation::before {
    position: relative;
    top: 0px;  /* w razie potrzeby możesz zmienić na 0px albo 2px */
  }
}

/* MOBILE – korekta wysokości hamburgera względem ikon po prawej */
@media (max-width: 1024px) {
  header#masthead .site-navigation::before {
    position: relative !important;
    top: -5px !important;   /* podnosi hamburger; w razie czego możesz zmienić na -2px lub -4px */
  }
}

/* MOBILE – copyright może się zawijać w 2+ linie */
@media (max-width: 768px) {
  footer.site-footer .noble-footer-copy {
    white-space: normal !important;   /* pozwala na zawijanie */
    display: block;
    max-width: 100%;
    text-align: center;
    letter-spacing: 0.04em !important; /* trochę ciaśniej niż 0.08em */
    line-height: 1.4;
  }
}

/* MOBILE – pozwól copyrightowi zawijać się w 2 linie */
@media (max-width: 768px) {
  footer.site-footer .noble-footer-bottom .noble-footer-copy {
    white-space: normal !important;   /* nadpisuje poprzednie nowrap !important */
    display: block;
    max-width: 100%;
    text-align: center;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
  }
}

/* Delikatnie jaśniejsze, bardziej szare tło pól formularza kontaktowego */
.wpcf7 form .wpcf7-form-control:not(.wpcf7-submit) {
  background-color: #090d14 !important; /* ciemny szaro-grafitowy zamiast czystej czerni */
}

/* HOME – About Us: domyślnie ukryta na desktopie/tablecie */
@media (min-width: 769px) {
  body.home .home-about {
    display: none;
  }
}

/* HOME – MOBILE: niższy baner, hero wyśrodkowany, About Us pod banerem */
@media (max-width: 768px) {

  /* BANER – niższy o ok. 30% i hero wyśrodkowany */
  body.home .hero-overlay-wrapper {
    height: 320px; /* było ~460px – niższy baner */
  }

  body.home .hero-overlay {
    margin: 0 16px;
    padding: 40px 16px 80px; /* trochę miejsca u góry i nad przyciskiem */
    display: flex;
    flex-direction: column;
    align-items: center;      /* poziome centrum */
    justify-content: center;  /* pionowe centrum (eyebrow + title) */
    text-align: center;
  }

  body.home .hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    white-space: normal;  /* pozwól się łamać w liniach na mobile */
    margin: 0 0 6px;
  }

  body.home .hero-title {
    font-size: 28px;
    margin: 0;
  }

  /* długi opis usuwamy z banera – jest w sekcji About Us niżej */
  body.home .hero-subtitle {
    display: none;
  }

  /* przycisk trochę wyżej, bo baner niższy */
  body.home .hero-btn {
    bottom: 24px;
  }

  /* ABOUT US – H2 + paragraf pod banerem, wyśrodkowane */
  body.home .home-about {
    display: block;
    max-width: 960px;
    margin: 24px auto 0;
    padding: 0 16px;
    text-align: center;
  }

  body.home .home-about-inner h2 {
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #f5f5f5;
    margin: 0 0 8px;
  }

  body.home .home-about-inner p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #e5e7eb;
    margin: 0;
  }
}

/* HOME – MOBILE: tekst hero wyśrodkowany w banerze + niższy baner */
@media (max-width: 768px) {

  /* baner niższy o ok. 30% w stosunku do obecnego */
  body.home .hero-overlay-wrapper {
    height: 320px; /* jeśli za nisko/za wysoko, zmień np. na 340 lub 300 */
  }

  /* blok z tekstem w banerze – idealnie na środku */
  body.home .hero-overlay {
    margin: 0 16px;
    padding: 0 16px 80px;     /* trochę miejsca nad przyciskiem Book now */
    height: 100%;             /* wypełnij cały baner */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* PIONOWE wyśrodkowanie */
    align-items: center;      /* POZIOME wyśrodkowanie */
    text-align: center;
  }

  /* drobne dopasowanie odstępów */
  body.home .hero-eyebrow {
    margin-bottom: 6px;
    white-space: normal;
  }

  body.home .hero-title {
    margin-bottom: 0;
  }

  /* przycisk trochę wyżej, bo baner jest niższy */
  body.home .hero-btn {
    bottom: 24px;
  }
}

/* HOME – MOBILE: tekst hero tuż nad przyciskiem Book now */
@media (max-width: 768px) {
  body.home .hero-overlay {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;      /* dociąga tekst do dołu banera */
    align-items: center;
    text-align: center;
    padding: 0 16px 100px;          /* ~tuż nad przyciskiem (bottom:24px) */
  }
}

/* HOME – mobile: mniejszy odstęp między logo LPHCA a przyciskiem Request a quote */
@media (max-width: 768px) {

  /* mniej „powietrza” pod sekcją z logo LPHCA */
  body.home .home-block.home-arrange {
    padding-bottom: 12px; /* zamiast 40px */
  }

  /* zmniejszenie odstępu pod całą sekcją home-content */
  body.home .home-content {
    margin-bottom: 8px !important;      /* zamiast 24px */
    padding-bottom: 16px !important;    /* zamiast 54px */
  }

  /* sekcja z przyciskiem – bliżej góry */
  .home-cta {
    padding-top: 8px;                   /* było 16px */
  }
}

/* HOME – wyrównanie długiego opisu do justyfikacji */
body.home .hero-subtitle,
body.home .home-about-inner p {
  text-align: justify;
  text-justify: inter-word;
}

/* =========================
   MOBILE – blokada przewijania w bok
   ========================= */

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #page,
  .site,
  .site-content,
  body.home .site-content,
  body.home .home-content,
  .noble-feature-strip {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* =========================
   SERVICES – układ mobilny
   ========================= */

@media (max-width: 768px) {

  .noble-services-page {
    padding: 0 16px 40px;
  }

  .noble-services-page .services-list {
    margin: 24px auto 40px;
    gap: 20px;
  }

  /* Box: na mobile obrazek u góry, tekst pod spodem */
  .noble-services-page .services-card {
    max-width: 100%;
    flex-direction: column !important;
  }

  .noble-services-page .services-card .noble-feature-image {
    flex: 0 0 auto !important;
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
  }

  .noble-services-page .services-card .noble-feature-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .noble-services-page .services-card .noble-feature-body {
    padding: 14px 16px 16px !important;
    text-align: left !important;
  }

  .noble-services-page .services-card .noble-feature-body h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .noble-services-page .services-card .noble-feature-body p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* "Learn more" nie w prawym rogu, tylko normalnie pod tekstem */
  .noble-services-page .services-card .noble-feature-link {
    align-self: flex-start !important;
    margin-top: 10px !important;
  }

  /* Sekcja How We Manage Your Journeys – węższe odstępy */
  .noble-services-page .services-support {
    margin: 0 auto 40px;
    padding: 0 4px;
  }

  .noble-services-page .services-support-item {
    max-width: 100%;
  }
}

/* =========================
   CONTACT – układ mobilny
   ========================= */

@media (max-width: 768px) {

  /* Cała sekcja Contact bliżej, trochę ciaśniej */
  body.page-contact .noble-contact-page {
    padding: 0 12px 32px;
    overflow-x: hidden;
  }

  /* Główny box – trochę mniejszy, bardziej kompaktowy */
  body.page-contact .noble-contact-frame {
    max-width: 100%;
    margin: 12px auto 36px;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.9);
  }

  body.page-contact .noble-contact-inner {
    padding: 24px 18px 24px;
  }

  /* Tytuł CONTACT US – mniejszy na mobile */
  body.page-contact .noble-contact-top h1 {
    font-size: 24px;
    margin: 0 0 22px;
  }

  /* Ikony (address/telephone/email) – jedna kolumna zamiast 3 */
  body.page-contact .noble-contact-icon-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
  }

  body.page-contact .noble-contact-icon-card {
    max-width: 100%;
  }

  /* Formularz na pełną szerokość */
  body.page-contact .noble-contact-form-block {
    max-width: 100%;
    margin-top: 8px;
  }

  body.page-contact .noble-contact-form-block h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  body.page-contact .noble-contact-form-intro {
    font-size: 13px;
    margin-bottom: 12px;
  }

  /* Pola formularza – trochę niższe */
  body.page-contact .noble-contact-form-block .wpcf7-form-control.wpcf7-text,
  body.page-contact .noble-contact-form-block .wpcf7-form-control.wpcf7-email,
  body.page-contact .noble-contact-form-block .wpcf7-form-control.wpcf7-tel,
  body.page-contact .noble-contact-form-block .wpcf7-form-control.wpcf7-textarea {
    padding: 6px 10px;
    font-size: 13px;
  }

  body.page-contact .noble-contact-form-block .wpcf7-form-control.wpcf7-textarea {
    min-height: 120px;
  }

  /* Przyciski – trochę bliżej reszty */
  body.page-contact .noble-contact-inner .wpcf7-form > p:last-of-type {
    margin-top: 10px !important;
  }
}

/* =========================
   CONTACT – ostateczne centrowanie SEND
   ========================= */

/* Sam przycisk SEND – zawsze idealnie na środku */
.noble-contact-form-block .wpcf7-submit {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px !important;
}

/* Spinner przy przycisku – ukryty, żeby nie ściągał środka w lewo */
.noble-contact-form-block .wpcf7-spinner,
.noble-contact-form-block .wpcf7-submit + .wpcf7-spinner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* =========================
   CONTACT – Address / Telephone / Email
   jedno pod drugim na mobile
   ========================= */

@media (max-width: 768px) {
  .noble-contact-icon-row {
    flex-direction: column;        /* zamiast w wierszu */
    align-items: center;           /* wszystko na środek */
    gap: 18px;                     /* mniejsze odstępy między blokami */
    margin-bottom: 28px;
  }

  .noble-contact-icon-card {
    max-width: 100%;
    text-align: center;            /* tekst środkiem */
  }

  .noble-contact-icon-card p,
  .noble-contact-icon-card a {
    text-align: center;
  }
}

/* DOCUMENTS – kolor linków */
.noble-documents-page a {
  color: var(--noble-gold, #b59a4a);
  text-decoration: none;
}

.noble-documents-page a:visited {
  color: var(--noble-gold, #b59a4a);
}

.noble-documents-page a:hover,
.noble-documents-page a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* DOCUMENTS – lista plików */
.noble-documents-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 16px 40px;
  box-sizing: border-box;
}

.noble-documents-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.noble-doc-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.noble-doc-title {
  font-family: "Playfair Display", serif;
  font-size: 15px;
}

.noble-documents-page a {
  color: var(--noble-gold, #b59a4a);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.noble-documents-page a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* mobile – tytuł nad linkiem */
@media (max-width: 768px) {
  .noble-doc-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* DOCUMENTS – lista plików (hero + ikona PDF) */
.noble-documents-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 16px 40px;
  box-sizing: border-box;
}

.noble-documents-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 32px;
  margin: 0 0 10px;
}

.noble-documents-hero p {
  max-width: 720px;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #e5e7eb;
}

.noble-documents-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.noble-doc-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.noble-doc-title {
  font-family: "Playfair Display", serif;
  font-size: 15px;
}

/* Ikona PDF zamiast tekstu */
.noble-doc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(181, 154, 74, 0.12);
  color: var(--noble-gold, #b59a4a);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.noble-doc-link i {
  font-size: 16px;
}

.noble-doc-link:hover {
  background: var(--noble-gold, #b59a4a);
  color: #000;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* tekst tylko dla screen readerów */
.screen-reader-text,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* mobile – tytuł nad ikoną */
@media (max-width: 768px) {
  .noble-doc-item {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* CONTACT – kolor linku w tekście nad ikonami (bez fioletu) */
body.page-contact .noble-contact-opening a,
body.page-contact .noble-contact-opening a:visited {
  color: var(--noble-gold);
  text-decoration: none;
}

body.page-contact .noble-contact-opening a:hover,
body.page-contact .noble-contact-opening a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* =========================================
   HOME – mobile: brak przerwy pod headerem
   ========================================= */
@media (max-width: 768px) {
  body.home #content,
  body.home .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* =========================================
   HOME – mobile: LPHCA logo idealnie na środku
   ========================================= */
@media (max-width: 768px) {
  .home-arrange-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .home-arrange-right .home-lphca-logo {
    display: block !important;
    margin: 0 auto !important;
  }
}

/* SERVICES – justyfikacja dwóch akapitów we wstępie */
.noble-services-page .services-hero p {
  text-align: justify;
  text-justify: inter-word;
}