/*
Theme Name: Pharoniya
Theme URI: https://pharoniya-pm.ae/
Author: Jawad
Description: Custom industrial marketplace theme for Pharoniya PM — inspection equipment rental, brand-new and used sales, and qualified operator hire.
Version: 4.8.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avantiz
Tags: business, industrial, one-column, custom-menu, custom-logo, featured-images, responsive
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Colour — steel & signal blue */
  --ph-navy:        #13304F;   /* lightened from #0A1B33 */
  --ph-navy-2:      #1C4372;
  --ph-blue:        #2571C9;   /* light, and passes AA with white text */
  --ph-blue-dark:   #1A5CAF;
  --ph-blue-tint:   #EAF3FD;
  --ph-amber:       #16C7B0;
  --ph-ink:         #1B2635;
  --ph-muted:       #61728A;
  --ph-line:        #DFE7F1;
  --ph-line-soft:   #EEF3F9;
  --ph-bg:          #FFFFFF;
  --ph-bg-alt:      #F4F8FD;

  /* Type */
  --ph-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ph-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ph-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Rhythm */
  --ph-wrap: 1200px;
  --ph-gutter: 24px;
  --ph-section-y: 78px;
  --ph-radius: 4px;

  --ph-shadow:    0 1px 2px rgba(10, 27, 51, .06), 0 12px 32px -12px rgba(10, 27, 51, .14);
  --ph-shadow-lg: 0 2px 4px rgba(10, 27, 51, .06), 0 28px 60px -20px rgba(10, 27, 51, .26);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ph-bg);
  color: var(--ph-ink);
  font-family: var(--ph-body);
  font-size: 16.5px;
  line-height: 1.68;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: var(--ph-blue); text-decoration: none; }
a:hover { color: var(--ph-blue-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--ph-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--ph-navy);
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4.1vw, 3.35rem); line-height: 1.08; letter-spacing: -.035em; }
h2 { font-size: clamp(1.72rem, 2.9vw, 2.4rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.16rem, 1.5vw, 1.32rem); letter-spacing: -.02em; line-height: 1.28; }
h4 { font-size: 1.06rem; letter-spacing: -.015em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }

:focus-visible {
  outline: 3px solid var(--ph-amber);
  outline-offset: 3px;
}

.ph-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ph-navy); color: #fff; padding: 12px 20px;
}
.ph-skip:focus { left: 0; color: #fff; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.ph-wrap {
  width: 100%;
  max-width: var(--ph-wrap);
  margin-inline: auto;
  padding-inline: var(--ph-gutter);
}

.ph-section { padding-block: var(--ph-section-y); position: relative; }
.ph-section--tight { padding-block: 58px; }
.ph-section--alt { background: var(--ph-bg-alt); }
.ph-section--dark { background: var(--ph-navy); color: #C6D3E4; }
.ph-section--dark h2,
.ph-section--dark h3 { color: #fff; }

/* Signature: technical spec label */
.ph-eyebrow {
  font-family: var(--ph-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ph-blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.ph-eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--ph-amber);
}
.ph-section--dark .ph-eyebrow { color: #7FB0F5; }

.ph-head { max-width: 760px; margin-bottom: 42px; }
.ph-head--center { margin-inline: auto; text-align: center; }
.ph-head--center .ph-eyebrow { justify-content: center; }
.ph-head p { color: var(--ph-muted); font-size: 1.06rem; }
.ph-section--dark .ph-head p { color: #A9BCD4; }

.ph-grid { display: grid; gap: 24px; }
.ph-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ph-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ph-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ph-body);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 16px 30px;
  min-height: 52px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 22px -12px rgba(10,27,51,.48);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ph-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px -13px rgba(10,27,51,.62);
}

.ph-btn--primary {
  background: linear-gradient(135deg, #20D8BF 0%, #10BFA9 52%, #0796A5 100%);
  border-color: #10BFA9;
  color: #062C38;
  box-shadow: 0 10px 24px -12px rgba(16,191,169,.78);
}
.ph-btn--primary:hover {
  background: linear-gradient(135deg, #5BE8D5 0%, #20D8BF 52%, #0BAEB5 100%);
  border-color: #5BE8D5;
  color: #061F2D;
  box-shadow: 0 14px 28px -12px rgba(16,191,169,.9);
}

.ph-btn--dark {
  background: linear-gradient(135deg, #102C49 0%, #173E67 100%);
  border-color: #244E79;
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(8,25,45,.8);
}
.ph-btn--dark:hover {
  background: linear-gradient(135deg, #173E67 0%, #20598E 100%);
  border-color: #2C6BA6;
  color: #fff;
}

.ph-btn--ghost {
  border-color: #BCD0E4;
  color: var(--ph-navy);
  background: #F5F9FD;
}
.ph-btn--ghost:hover {
  border-color: #16C7B0;
  background: #E8FBF8;
  color: #0C5F62;
}

.ph-btn--light { background: #fff; color: var(--ph-navy); border-color: #fff; }
.ph-btn--light:hover { background: #E8FBF8; border-color: #16C7B0; color: #0C5F62; }

.ph-btn--outline-light { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.04); }
.ph-btn--outline-light:hover { border-color: var(--ph-amber); background: var(--ph-amber); color: var(--ph-navy); }

.ph-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Text link with arrow */
.ph-link {
  font-family: var(--ph-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ph-link span { transition: transform .18s ease; }
.ph-link:hover span { transform: translateX(4px); }

/* ==========================================================================
   5. TOP BAR + HEADER
   ========================================================================== */

.ph-topbar {
  background: var(--ph-navy);
  color: #A9BCD4;
  font-size: .82rem;
}
.ph-topbar .ph-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
}
.ph-topbar a { color: #D6E2F2; }
.ph-topbar a:hover { color: #fff; }
.ph-topbar-list { display: flex; align-items: center; gap: 24px; }
.ph-topbar-list a { display: inline-flex; align-items: center; gap: 7px; }
.ph-topbar-note {
  font-family: var(--ph-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .7rem;
  color: #7B8FA8;
}

.ph-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--ph-line-soft);
  transition: box-shadow .2s ease;
}
.ph-header.is-stuck { box-shadow: 0 6px 24px -12px rgba(10,27,51,.28); }
.ph-header .ph-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
}
.ph-logo img { max-height: 54px; width: auto; }
.ph-logo-text {
  font-family: var(--ph-display);
  font-size: 1.22rem;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--ph-navy);
  line-height: 1.05;
}
.ph-logo-text small {
  display: block;
  font-family: var(--ph-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ph-blue);
  font-weight: 500;
}

.ph-nav-area { display: flex; align-items: center; gap: 28px; }

.ph-menu, .ph-menu ul { list-style: none; margin: 0; padding: 0; }
.ph-menu { display: flex; align-items: center; gap: 4px; }
.ph-menu li { position: relative; }
.ph-menu > li > a {
  display: block;
  padding: 12px 14px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ph-navy);
}
.ph-menu > li > a:hover,
.ph-menu > li.current-menu-item > a { color: var(--ph-blue); }

.ph-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  background: #fff;
  border: 1px solid var(--ph-line-soft);
  border-top: 2px solid var(--ph-blue);
  box-shadow: var(--ph-shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ph-menu li:hover > .sub-menu,
.ph-menu li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.ph-menu .sub-menu a {
  display: block;
  padding: 11px 14px;
  font-size: .9rem;
  color: var(--ph-ink);
  border-radius: 3px;
}
.ph-menu .sub-menu a:hover { background: var(--ph-blue-tint); color: var(--ph-blue-dark); }

.ph-burger {
  display: none;
  width: 46px; height: 46px;
  background: var(--ph-navy);
  border: 0; border-radius: var(--ph-radius);
  cursor: pointer;
  padding: 13px 11px;
}
.ph-burger span {
  display: block; height: 2px; background: #fff; margin: 4px 0;
  transition: transform .22s ease, opacity .22s ease;
}
.ph-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ph-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ph-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.ph-mobile-panel {
  display: none;
  background: #fff;
  border-top: 1px solid var(--ph-line-soft);
  padding: 12px var(--ph-gutter) 26px;
}
.ph-mobile-panel.is-open { display: block; }
.ph-mobile-panel .ph-menu { flex-direction: column; align-items: stretch; gap: 0; }
.ph-mobile-panel .ph-menu > li > a { padding: 14px 0; border-bottom: 1px solid var(--ph-line-soft); }
.ph-mobile-panel .sub-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border: 0; border-left: 2px solid var(--ph-blue-tint);
  padding: 4px 0 4px 14px; margin: 4px 0 8px;
}
.ph-mobile-panel .ph-btn { width: 100%; justify-content: center; margin-top: 18px; }

/* ==========================================================================
   6. SECTION 1 — HERO
   ========================================================================== */

.ph-hero {
  position: relative;
  background: linear-gradient(122deg, var(--ph-navy) 0%, var(--ph-navy-2) 58%, #24548C 100%);
  color: #C6D3E4;
  overflow: hidden;
}
/* Blueprint grid — the industrial signature motif */
.ph-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 20%, transparent 78%);
}
.ph-hero .ph-wrap { position: relative; z-index: 2; }

.ph-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
  padding-block: 104px;
}
.ph-hero h1 { color: #fff; margin-bottom: 22px; }
.ph-hero h1 em {
  font-style: normal;
  color: #6FA8F7;
}
.ph-hero-lead {
  font-size: 1.1rem;
  color: #AFC2DA;
  max-width: 56ch;
  margin-bottom: 30px;
}
.ph-hero .ph-eyebrow { color: #7FB0F5; }

.ph-hero-secondary {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--ph-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ph-hero-secondary a { color: #9FBCE6; border-bottom: 1px solid rgba(159,188,230,.35); padding-bottom: 2px; }
.ph-hero-secondary a:hover { color: #fff; border-color: #fff; }
.ph-hero-secondary i { color: rgba(255,255,255,.25); font-style: normal; }

.ph-hero-media { position: relative; }
.ph-hero-media img {
  width: 100%;
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow-lg);
}
.ph-hero-plate {
  position: absolute;
  left: -28px; bottom: -28px;
  background: #fff;
  border-left: 3px solid var(--ph-amber);
  padding: 18px 24px;
  box-shadow: var(--ph-shadow-lg);
  max-width: 250px;
}
.ph-hero-plate strong {
  display: block;
  font-family: var(--ph-display);
  font-size: 1.85rem;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ph-navy);
}
.ph-hero-plate > span {
  font-family: var(--ph-mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ph-muted);
}

/* Marquee strip of capabilities */
.ph-hero-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}
.ph-hero-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 30px;
  padding-block: 18px;
}
.ph-hero-strip li {
  font-family: var(--ph-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #93AACB;
  display: flex; align-items: center; gap: 9px;
}
.ph-hero-strip li::before { content: ""; width: 5px; height: 5px; background: var(--ph-amber); }

/* ==========================================================================
   7. SECTION 2 — DIVISIONS
   ========================================================================== */

.ph-division {
  position: relative;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-top: 3px solid var(--ph-blue);
  padding: 40px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ph-division:hover { transform: translateY(-4px); box-shadow: var(--ph-shadow); }
.ph-division--b { border-top-color: var(--ph-amber); }
.ph-division-no {
  font-family: var(--ph-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--ph-muted);
  margin-bottom: 20px;
}
.ph-division h3 { margin-bottom: 14px; }
.ph-division p { color: var(--ph-muted); margin-bottom: 24px; }
.ph-division ul {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 9px;
}
.ph-division ul li {
  font-size: .92rem;
  padding-left: 22px;
  position: relative;
  color: var(--ph-ink);
}
.ph-division ul li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 9px; height: 2px; background: var(--ph-blue);
}
.ph-division .ph-btn { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   8. SECTION 3 — EQUIPMENT CATEGORIES
   ========================================================================== */

.ph-equip {
  background: #fff;
  border: 1px solid var(--ph-line);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ph-equip:hover {
  border-color: var(--ph-blue);
  box-shadow: var(--ph-shadow);
  transform: translateY(-4px);
}
.ph-equip-icon {
  width: 46px; height: 46px;
  color: var(--ph-blue);
}
.ph-equip h3 { font-size: 1.13rem; margin: 0; }
.ph-equip p { font-size: .9rem; color: var(--ph-muted); margin: 0; flex-grow: 1; }
.ph-equip .ph-link { color: var(--ph-navy); }
.ph-equip:hover .ph-link { color: var(--ph-blue); }

/* ==========================================================================
   9. SECTION 4 — PROCESS
   ========================================================================== */

.ph-step { position: relative; padding-top: 30px; }
.ph-step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--ph-line);
}
.ph-step::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 42px; height: 2px; background: var(--ph-blue);
}
.ph-step-no {
  font-family: var(--ph-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--ph-blue);
  display: block;
  margin-bottom: 12px;
}
.ph-step h3 { font-size: 1.09rem; margin-bottom: 10px; }
.ph-step p { font-size: .92rem; color: var(--ph-muted); margin: 0; }

/* ==========================================================================
   10. SECTION 5 — INSPECTION SERVICES
   ========================================================================== */

.ph-service {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  padding: 28px;
  transition: background .2s ease, border-color .2s ease;
}
.ph-service:hover { background: rgba(255,255,255,.08); border-color: rgba(127,176,245,.5); }
.ph-service h3 { font-size: 1.09rem; margin-bottom: 10px; }
.ph-service p { font-size: .9rem; color: #A9BCD4; margin: 0; }
.ph-service-no {
  font-family: var(--ph-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--ph-amber);
  display: block;
  margin-bottom: 16px;
}

/* ==========================================================================
   11. SECTION 6 — INDUSTRIES
   ========================================================================== */

.ph-industry {
  background: #fff;
  border: 1px solid var(--ph-line);
  padding: 24px 20px;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ph-industry:hover { border-color: var(--ph-blue); background: var(--ph-blue-tint); transform: translateY(-3px); }
.ph-industry svg { width: 34px; height: 34px; margin: 0 auto 14px; color: var(--ph-blue); }
.ph-industry > span {
  display: block;
  font-family: var(--ph-display);
  font-size: .99rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ph-navy);
  line-height: 1.2;
}

/* ==========================================================================
   12. SECTION 7 — WHY US
   ========================================================================== */

.ph-why {
  display: flex;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--ph-line);
}
.ph-why-mark {
  flex: none;
  width: 42px; height: 42px;
  border: 1px solid var(--ph-line);
  display: grid; place-items: center;
  color: var(--ph-blue);
  background: var(--ph-blue-tint);
}
.ph-why-mark svg { width: 21px; height: 21px; }
.ph-why h3 { font-size: 1.1rem; margin-bottom: 8px; }
.ph-why p { font-size: .92rem; color: var(--ph-muted); margin: 0; }

/* ==========================================================================
   13. SECTION 8 — GLOBAL NETWORK
   ========================================================================== */

.ph-reach {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid rgba(255,255,255,.14);
  margin-top: 46px;
}
.ph-reach-item {
  flex: 1 1 200px;
  padding: 34px 28px;
  border-right: 1px solid rgba(255,255,255,.14);
  position: relative;
}
.ph-reach-item:last-child { border-right: 0; }
.ph-reach-item strong {
  display: block;
  font-family: var(--ph-display);
  font-size: 1.5rem;
  letter-spacing: -.035em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 6px;
}
.ph-reach-item > span {
  font-family: var(--ph-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7FB0F5;
}
.ph-reach-item::after {
  content: "→";
  position: absolute;
  right: -9px; top: 50%;
  transform: translateY(-50%);
  color: var(--ph-amber);
  background: var(--ph-navy);
  padding: 2px;
  font-size: .9rem;
}
.ph-reach-item:last-child::after { display: none; }

/* ==========================================================================
   14. SECTION 9 — VENDOR
   ========================================================================== */

.ph-vendor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ph-vendor-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--ph-line);
  border: 1px solid var(--ph-line);
}
.ph-vendor-list li {
  background: #fff;
  padding: 20px 18px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ph-navy);
  display: flex; gap: 11px; align-items: flex-start;
}
.ph-vendor-list li::before {
  content: "✓";
  color: var(--ph-blue);
  font-weight: 700;
  line-height: 1.4;
}

/* ==========================================================================
   15. SECTION 10 — TRUST
   ========================================================================== */

.ph-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ph-line);
  background: var(--ph-line);
  gap: 1px;
}
.ph-trust-cell { background: #fff; padding: 40px 32px; }
.ph-trust-cell strong {
  display: block;
  font-family: var(--ph-display);
  font-size: 2.25rem;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ph-navy);
  margin-bottom: 10px;
}
.ph-trust-cell > span {
  font-family: var(--ph-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ph-blue);
  display: block;
  margin-bottom: 12px;
}
.ph-trust-cell p { font-size: .9rem; color: var(--ph-muted); margin: 0; }

/* ==========================================================================
   16. SECTION 11 — FAQ
   ========================================================================== */

.ph-faq { max-width: 880px; margin-inline: auto; border-top: 1px solid var(--ph-line); }
.ph-faq-item { border-bottom: 1px solid var(--ph-line); }
.ph-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--ph-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ph-navy);
  line-height: 1.35;
}
.ph-faq-q:hover { color: var(--ph-blue); }
.ph-faq-icon {
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid var(--ph-line);
  position: relative;
}
.ph-faq-icon::before,
.ph-faq-icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--ph-blue);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.ph-faq-icon::before { width: 11px; height: 2px; }
.ph-faq-icon::after { width: 2px; height: 11px; }
.ph-faq-q[aria-expanded="true"] .ph-faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.ph-faq-a {
  display: none;
  padding: 0 44px 26px 0;
  color: var(--ph-muted);
  font-size: .97rem;
}
.ph-faq-a.is-open { display: block; }

/* ==========================================================================
   17. SECTION 12 — FINAL CTA
   ========================================================================== */

.ph-cta {
  background: linear-gradient(118deg, var(--ph-blue-dark) 0%, var(--ph-blue) 55%, #4B95E6 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ph-cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 120% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(80% 120% at 50% 0%, #000 10%, transparent 72%);
}
.ph-cta .ph-wrap { position: relative; z-index: 2; }
.ph-cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.ph-cta p { color: rgba(255,255,255,.86); max-width: 62ch; margin: 0 auto 32px; }
.ph-cta .ph-btn-row { justify-content: center; }
.ph-cta .ph-eyebrow { color: rgba(255,255,255,.9); justify-content: center; }
.ph-cta .ph-eyebrow::before { background: #fff; }
.ph-cta .ph-head p { color: rgba(255,255,255,.86); }
.ph-cta .ph-head { margin-inline: auto; text-align: center; }

.ph-cta-contact {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.24);
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px 30px;
  font-family: var(--ph-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ph-cta-contact a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.ph-cta-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.ph-footer { background: var(--ph-navy); color: #93A9C6; font-size: .92rem; }
.ph-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr 1.15fr 1fr;
  gap: 40px;
  padding-block: 72px 56px;
}
.ph-footer h4 {
  font-family: var(--ph-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.ph-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ph-footer a { color: #93A9C6; }
.ph-footer a:hover { color: #fff; }
.ph-footer-brand img { max-height: 52px; margin-bottom: 20px; }
.ph-footer-brand .ph-logo-text { color: #fff; margin-bottom: 18px; }
.ph-footer-brand p { color: #7F94B0; max-width: 34ch; font-size: .9rem; }
.ph-footer-social { display: flex; gap: 10px; margin-top: 24px; }
.ph-footer-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center;
  color: #93A9C6;
}
.ph-footer-social a:hover { background: var(--ph-blue); border-color: var(--ph-blue); color: #fff; }
.ph-footer-social svg { width: 16px; height: 16px; }
.ph-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.11);
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: #7F94B0;
}

/* Floating WhatsApp */
.ph-wa {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1FA855;
  color: #fff;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 600;
  box-shadow: 0 10px 30px -8px rgba(31,168,85,.6);
}
.ph-wa:hover { background: #17904a; color: #fff; }
.ph-wa svg { width: 20px; height: 20px; }

/* ==========================================================================
   19. INNER PAGES / BLOG
   ========================================================================== */

.ph-pagehead {
  background: linear-gradient(122deg, var(--ph-navy) 0%, var(--ph-navy-2) 100%);
  color: #A9BCD4;
  padding-block: 74px;
  position: relative;
  overflow: hidden;
}
.ph-pagehead::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(110% 100% at 15% 0%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(110% 100% at 15% 0%, #000 15%, transparent 75%);
}
.ph-pagehead .ph-wrap { position: relative; z-index: 2; }
.ph-pagehead h1 { color: #fff; margin-bottom: 10px; }
.ph-breadcrumb {
  font-family: var(--ph-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7FB0F5;
}
.ph-breadcrumb a { color: #7FB0F5; }
.ph-breadcrumb a:hover { color: #fff; }

.ph-content { max-width: 820px; }
.ph-content h2 { margin-top: 1.6em; }
.ph-content h3 { margin-top: 1.4em; }
.ph-content img { margin-block: 1.6em; }
.ph-content blockquote {
  margin: 1.8em 0;
  padding: 6px 0 6px 26px;
  border-left: 3px solid var(--ph-blue);
  color: var(--ph-navy);
  font-size: 1.1rem;
}

.ph-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px; }
.ph-widget { margin-bottom: 34px; }
.ph-widget h4 {
  font-family: var(--ph-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ph-blue);
  margin-bottom: 16px;
}
.ph-widget ul { list-style: none; padding: 0; display: grid; gap: 10px; }

.ph-post-card {
  background: #fff;
  border: 1px solid var(--ph-line);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ph-post-card:hover { box-shadow: var(--ph-shadow); transform: translateY(-3px); }
.ph-post-card-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--ph-blue-tint); }
.ph-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-post-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.ph-post-meta {
  font-family: var(--ph-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-post-card h3 { font-size: 1.1rem; margin: 0; }
.ph-post-card h3 a { color: var(--ph-navy); }
.ph-post-card h3 a:hover { color: var(--ph-blue); }
.ph-post-card p { font-size: .92rem; color: var(--ph-muted); margin: 0; }

.ph-pagination { display: flex; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.ph-pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--ph-line);
  color: var(--ph-navy);
  font-size: .9rem;
}
.ph-pagination .page-numbers:hover,
.ph-pagination .page-numbers.current {
  background: var(--ph-blue); border-color: var(--ph-blue); color: #fff;
}

/* Forms */
.ph-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ph-field { display: grid; gap: 7px; }
.ph-field--full { grid-column: 1 / -1; }
.ph-field label {
  font-family: var(--ph-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  font-family: var(--ph-body);
  font-size: .95rem;
  color: var(--ph-ink);
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  padding: 13px 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ph-blue);
  box-shadow: 0 0 0 3px var(--ph-blue-tint);
  outline: none;
}
textarea { min-height: 140px; resize: vertical; }
input[type="submit"], button[type="submit"] {
  background: var(--ph-blue);
  color: #fff;
  border: 0;
  border-radius: var(--ph-radius);
  padding: 15px 30px;
  font-family: var(--ph-body);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--ph-blue-dark); }

.ph-alert {
  border-left: 3px solid var(--ph-blue);
  background: var(--ph-blue-tint);
  padding: 16px 20px;
  font-size: .92rem;
  margin-bottom: 22px;
}

/* ==========================================================================
   20. MOTION
   ========================================================================== */

/* Content is visible by default. It is only hidden for animation once the
   .ph-js class has been added by the inline script in the head — so if that
   script is delayed, deferred, or blocked, nothing ever disappears. */
.ph-reveal { opacity: 1; transform: none; }

.ph-js .ph-reveal { opacity: 0; transform: translateY(18px); }
.ph-js .ph-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.68,.35,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .ph-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .ph-footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .ph-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  :root { --ph-section-y: 72px; }
  .ph-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ph-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ph-hero-inner { grid-template-columns: 1fr; gap: 46px; padding-block: 66px; }
  .ph-hero-media { max-width: 620px; }
  .ph-hero-plate { left: auto; right: 16px; }
  .ph-vendor { grid-template-columns: 1fr; gap: 40px; }
  .ph-layout { grid-template-columns: 1fr; gap: 48px; }
  .ph-nav-area > nav { display: none; }
  .ph-burger { display: block; }
  .ph-topbar-note { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  :root { --ph-section-y: 60px; --ph-gutter: 20px; }
  .ph-grid--2, .ph-grid--3, .ph-grid--4 { grid-template-columns: 1fr; }
  .ph-trust { grid-template-columns: 1fr; }
  .ph-division { padding: 28px 24px; }
  .ph-vendor-list { grid-template-columns: 1fr; }
  .ph-topbar .ph-wrap { justify-content: center; }
  .ph-topbar-list { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .ph-hero-plate { position: static; margin-top: 16px; max-width: none; }
  .ph-reach-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .ph-reach-item:last-child { border-bottom: 0; }
  .ph-reach-item::after { display: none; }
  .ph-btn { width: 100%; justify-content: center; }
  .ph-btn-row { flex-direction: column; }
  .ph-form-grid { grid-template-columns: 1fr; }
  .ph-footer-top { grid-template-columns: 1fr; gap: 34px; padding-block: 52px 40px; }
  .ph-footer-bottom { flex-direction: column; text-align: center; }
  .ph-wa { right: 14px; bottom: 14px; padding: 11px 15px; }
  .ph-faq-a { padding-right: 0; }
}

/* ==========================================================================
   22. MOTION SYSTEM
   ========================================================================== */

/* --- Scroll progress bar ------------------------------------------------ */
.ph-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 200;
  background: linear-gradient(90deg, var(--ph-blue) 0%, var(--ph-amber) 100%);
  transition: width .12s linear;
  pointer-events: none;
}

/* --- Header shrink ------------------------------------------------------ */
.ph-header .ph-wrap { transition: min-height .28s ease; }
.ph-header.is-stuck .ph-wrap { min-height: 68px; }
.ph-logo img { transition: max-height .28s ease; }
.ph-header.is-stuck .ph-logo img { max-height: 42px; }

/* --- Reveal variants ---------------------------------------------------- */
.ph-js .ph-reveal[data-anim="left"]  { transform: translateX(-28px); }
.ph-js .ph-reveal[data-anim="right"] { transform: translateX(28px); }
.ph-js .ph-reveal[data-anim="zoom"]  { transform: scale(.955); }
.ph-js .ph-reveal[data-anim="fade"]  { transform: none; }
.ph-js .ph-reveal[data-anim="clip"]  { transform: none; clip-path: inset(0 0 100% 0); }
.ph-js .ph-reveal[data-anim="clip"].is-in { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.22,.68,.35,1), opacity .5s ease; }
.ph-js .ph-reveal.is-in { transform: none; clip-path: none; }

/* --- Hero entrance sequence --------------------------------------------- */
@keyframes ph-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ph-rise-soft {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ph-media-in {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes ph-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}
@keyframes ph-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
@keyframes ph-pulse-ring {
  0%   { transform: scale(.85); opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes ph-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ph-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.ph-hero::before { animation: ph-grid-drift 24s linear infinite; }

.ph-js .ph-hero-copy > * { opacity: 0; animation: ph-rise .78s cubic-bezier(.22,.68,.35,1) forwards; }
.ph-hero-copy > *:nth-child(1) { animation-delay: .08s; }
.ph-hero-copy > *:nth-child(2) { animation-delay: .18s; }
.ph-hero-copy > *:nth-child(3) { animation-delay: .3s; }
.ph-hero-copy > *:nth-child(4) { animation-delay: .42s; }
.ph-hero-copy > *:nth-child(5) { animation-delay: .52s; }

.ph-js .ph-hero-media { opacity: 0; animation: ph-media-in .95s cubic-bezier(.22,.68,.35,1) .3s forwards; }
.ph-js .ph-hero-plate { opacity: 0; animation: ph-rise-soft .6s ease .95s forwards; }

/* Scanning line across the hero image */
.ph-hero-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(242,163,44,.9), transparent);
  animation: ph-scan 5.5s ease-in-out 1.6s infinite;
  pointer-events: none;
  border-radius: var(--ph-radius);
}
@keyframes ph-scan {
  0%   { top: 2%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 98%; opacity: 0; }
}

/* --- Capability marquee ------------------------------------------------- */
.ph-hero-strip { overflow: hidden; }
.ph-hero-strip .ph-wrap { max-width: none; padding-inline: 0; }
.ph-hero-strip ul {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  gap: 0;
  animation: ph-marquee 34s linear infinite;
}
.ph-hero-strip li { padding-inline: 26px; white-space: nowrap; }
.ph-hero-strip:hover ul { animation-play-state: paused; }

/* --- Button micro-interaction ------------------------------------------- */
.ph-btn { position: relative; overflow: hidden; }
.ph-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-120%);
  pointer-events: none;
}
.ph-btn:hover::after { animation: ph-sweep .78s ease; }
.ph-btn:active { transform: translateY(0); }

/* --- Card interactions --------------------------------------------------- */
.ph-equip { position: relative; }
.ph-equip::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px; width: 0;
  background: var(--ph-blue);
  transition: width .32s cubic-bezier(.22,.68,.35,1);
}
.ph-equip:hover::before { width: 100%; }
.ph-equip-icon { transition: transform .35s cubic-bezier(.34,1.4,.64,1), color .25s ease; }
.ph-equip:hover .ph-equip-icon { transform: translateY(-3px) scale(1.08); }

.ph-division { position: relative; overflow: hidden; }
.ph-division::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 150px; height: 150px;
  border: 1px solid var(--ph-blue-tint);
  border-radius: 50%;
  transition: transform .5s ease, opacity .4s ease;
  opacity: 0;
}
.ph-division:hover::after { transform: scale(1.35); opacity: 1; }

.ph-industry svg { transition: transform .35s cubic-bezier(.34,1.4,.64,1); }
.ph-industry:hover svg { transform: translateY(-4px) rotate(-4deg); }

.ph-why-mark { transition: background .25s ease, border-color .25s ease, transform .3s ease; }
.ph-why:hover .ph-why-mark { background: var(--ph-blue); border-color: var(--ph-blue); color: #fff; transform: rotate(-6deg); }

.ph-step { transition: transform .3s ease; }
.ph-step:hover { transform: translateY(-4px); }
.ph-step::after { transition: width .4s cubic-bezier(.22,.68,.35,1); }
.ph-step:hover::after { width: 100%; }

.ph-service { position: relative; overflow: hidden; }
.ph-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px 160px at var(--mx, 50%) var(--my, 50%), rgba(127,176,245,.16), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ph-service:hover::before { opacity: 1; }

.ph-trust-cell { transition: background .3s ease; }
.ph-trust-cell:hover { background: var(--ph-blue-tint); }

.ph-reach-item { transition: background .3s ease; }
.ph-reach-item:hover { background: rgba(255,255,255,.06); }

.ph-vendor-list li { transition: background .25s ease, transform .25s ease; }
.ph-vendor-list li:hover { background: var(--ph-blue-tint); transform: translateX(4px); }

/* Floating vendor illustration */
.ph-vendor-media img { animation: ph-float 7s ease-in-out infinite; }

/* --- FAQ smooth open ----------------------------------------------------- */
.ph-faq-a {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height .38s cubic-bezier(.22,.68,.35,1), opacity .3s ease, padding .3s ease;
}
.ph-faq-a.is-open { max-height: 400px; opacity: 1; padding-bottom: 26px; }

/* --- WhatsApp pulse ------------------------------------------------------ */
.ph-wa { position: fixed; }
.ph-wa::before {
  content: "";
  position: absolute;
  left: 18px; top: 50%;
  width: 26px; height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: rgba(31,168,85,.55);
  animation: ph-pulse-ring 2.6s ease-out infinite;
  z-index: -1;
}

/* --- Back to top --------------------------------------------------------- */
.ph-top {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 94;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ph-navy);
  color: #fff;
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.ph-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.ph-top:hover { background: var(--ph-blue); }
.ph-top svg { width: 18px; height: 18px; }

/* --- Count-up numbers ---------------------------------------------------- */
.ph-count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   23. SERVICE PAGES
   ========================================================================== */

.ph-pagehead--service { padding-block: 96px 88px; }
.ph-pagehead--service .ph-hero-lead { color: #A9BCD4; max-width: 62ch; margin-block: 18px 30px; }
.ph-pagehead--service .ph-btn-row { margin-top: 6px; }
.ph-pagehead::before { animation: ph-grid-drift 28s linear infinite; }

/* Anchor sub-navigation */
.ph-subnav {
  background: #fff;
  border-bottom: 1px solid var(--ph-line);
  position: sticky;
  top: 82px;
  z-index: 80;
}
.ph-subnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none;
}
.ph-subnav ul::-webkit-scrollbar { display: none; }
.ph-subnav a {
  display: block;
  white-space: nowrap;
  padding: 17px 16px;
  font-family: var(--ph-mono);
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ph-muted);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.ph-subnav a:hover, .ph-subnav a.is-active { color: var(--ph-blue); border-bottom-color: var(--ph-blue); }

/* Split intro block */
.ph-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ph-split--reverse .ph-split-media { order: -1; }
.ph-split-media img { width: 100%; border-radius: var(--ph-radius); box-shadow: var(--ph-shadow); }
.ph-split p { color: var(--ph-muted); font-size: 1.04rem; }

/* Spec table */
.ph-spec {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ph-line);
  background: #fff;
}
.ph-spec th, .ph-spec td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--ph-line);
  font-size: .93rem;
}
.ph-spec th {
  font-family: var(--ph-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ph-blue);
  background: var(--ph-bg-alt);
  width: 34%;
}
.ph-spec tr:last-child th, .ph-spec tr:last-child td { border-bottom: 0; }
.ph-spec tr { transition: background .2s ease; }
.ph-spec tbody tr:hover td { background: var(--ph-blue-tint); }

/* Checklist */
.ph-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ph-checklist li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: .96rem;
}
.ph-checklist li::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--ph-blue);
  background:
    linear-gradient(45deg, transparent 46%, var(--ph-blue) 46%, var(--ph-blue) 54%, transparent 54%) center/11px 11px no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--ph-blue) 46%, var(--ph-blue) 54%, transparent 54%) center/11px 11px no-repeat;
  transform: rotate(0deg);
  transition: transform .25s ease;
}
.ph-checklist li:hover::before { transform: rotate(90deg); }

/* Inline highlight band */
.ph-band {
  background: var(--ph-navy);
  color: #C6D3E4;
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  border-left: 4px solid var(--ph-amber);
}
.ph-band h3 { color: #fff; margin: 0 0 6px; }
.ph-band p { margin: 0; color: #A9BCD4; font-size: .96rem; }

/* Enquiry form panel */
.ph-formpanel {
  background: #fff;
  border: 1px solid var(--ph-line);
  border-top: 3px solid var(--ph-blue);
  padding: 40px;
  box-shadow: var(--ph-shadow);
}
.ph-formpanel h3 { margin-bottom: 6px; }
.ph-formpanel > p { color: var(--ph-muted); font-size: .95rem; margin-bottom: 26px; }

/* ==========================================================================
   24. RESPONSIVE — ADDITIONS
   ========================================================================== */

@media (max-width: 1024px) {
  .ph-split { grid-template-columns: 1fr; gap: 40px; }
  .ph-split--reverse .ph-split-media { order: 0; }
  .ph-subnav { top: 68px; }
}

@media (max-width: 720px) {
  .ph-pagehead--service { padding-block: 62px 56px; }
  .ph-band { padding: 30px 24px; }
  .ph-formpanel { padding: 28px 22px; }
  .ph-spec th { width: 42%; padding: 13px 14px; }
  .ph-spec td { padding: 13px 14px; }
  .ph-top { left: 14px; bottom: 14px; width: 40px; height: 40px; }
  .ph-wa span { display: none; }
  .ph-wa { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-hero::before,
  .ph-pagehead::before,
  .ph-hero-strip ul,
  .ph-hero-media::after,
  .ph-vendor-media img,
  .ph-wa::before { animation: none !important; }
  .ph-hero-copy > *,
  .ph-hero-media,
  .ph-hero-plate { opacity: 1 !important; animation: none !important; }
  .ph-faq-a.is-open { max-height: none; }
}

/* ==========================================================================
   25. ICON SIZING — one place, so an icon can never render oversized
   ========================================================================== */

.ph-ico { width: 20px; height: 20px; flex: none; }

.ph-topbar-list .ph-ico     { width: 15px; height: 15px; }
.ph-equip-icon .ph-ico      { width: 100%; height: 100%; }
.ph-industry .ph-ico        { width: 30px; height: 30px; margin: 0 auto 14px; }
.ph-why-mark .ph-ico        { width: 20px; height: 20px; }
.ph-footer-social .ph-ico   { width: 16px; height: 16px; }
.ph-cta-ico .ph-ico         { width: 19px; height: 19px; }
.ph-wa .ph-ico              { width: 19px; height: 19px; }
.ph-division .ph-equip-icon { width: 44px; height: 44px; margin-bottom: 4px; }

/* ==========================================================================
   26. TOP BAR + HEADER — rebuilt
   ========================================================================== */

.ph-topbar {
  background: linear-gradient(90deg, var(--ph-navy) 0%, #17395C 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .8rem;
}
.ph-topbar .ph-wrap { min-height: 44px; gap: 24px; }

.ph-topbar-list { gap: 0; flex-wrap: nowrap; }
.ph-topbar-list a {
  gap: 9px;
  padding: 0 18px;
  white-space: nowrap;
  line-height: 1.2;
  border-left: 1px solid rgba(255,255,255,.09);
  transition: color .2s ease;
}
.ph-topbar-list a:first-child { border-left: 0; padding-left: 0; }
.ph-topbar-list a .ph-ico { color: var(--ph-blue); transition: transform .25s ease, color .2s ease; }
.ph-topbar-list a:hover .ph-ico { transform: translateY(-2px); color: var(--ph-amber); }

.ph-topbar-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: .68rem;
}
.ph-topbar-note::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #35C97A;
  box-shadow: 0 0 0 0 rgba(53,201,122,.6);
  animation: ph-live 2.4s ease-out infinite;
}
@keyframes ph-live {
  0%   { box-shadow: 0 0 0 0 rgba(53,201,122,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(53,201,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,201,122,0); }
}

/* --- Main header row ----------------------------------------------------- */
.ph-header .ph-wrap { min-height: 88px; gap: 32px; }
.ph-logo { display: flex; align-items: center; transition: opacity .2s ease; }
.ph-logo:hover { opacity: .82; }
.ph-logo img { max-height: 56px; }

.ph-nav-area { gap: 20px; }

/* Animated underline on menu items */
.ph-menu > li > a {
  position: relative;
  padding: 12px 15px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.ph-menu > li > a::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 4px;
  height: 2px;
  background: var(--ph-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.68,.35,1);
}
.ph-menu > li > a:hover::after,
.ph-menu > li.current-menu-item > a::after,
.ph-menu > li.current-menu-parent > a::after { transform: scaleX(1); }

/* Parent items that open a dropdown get a caret */
.ph-menu > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 1px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  transition: transform .25s ease, opacity .2s ease;
}
.ph-menu > li.menu-item-has-children > a { padding-right: 22px; }
.ph-menu > li.menu-item-has-children:hover > a::before { transform: rotate(225deg) translate(-2px, -2px); opacity: 1; }

.ph-menu .sub-menu a { position: relative; padding-left: 18px; }
.ph-menu .sub-menu a::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  width: 0; height: 1.5px;
  margin-top: -1px;
  background: var(--ph-blue);
  transition: width .25s ease;
}
.ph-menu .sub-menu a:hover { padding-left: 26px; }
.ph-menu .sub-menu a:hover::before { width: 12px; }

/* Divider before the header CTA */
.ph-header-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 22px;
  border-left: 1px solid var(--ph-line);
}
.ph-header-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ph-navy);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.ph-header-call small {
  display: block;
  font-family: var(--ph-mono);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-header-call .ph-ico { color: var(--ph-blue); }
.ph-header-cta .ph-btn { padding: 13px 22px; font-size: .86rem; }

/* ==========================================================================
   27. PRE-FOOTER CTA — rebuilt
   ========================================================================== */

.ph-cta { padding-block: 104px 96px; }
.ph-cta::after {
  content: "";
  position: absolute;
  left: 50%; top: -30%;
  width: 900px; height: 900px;
  margin-left: -450px;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 62%);
  animation: ph-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ph-breathe {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.16); opacity: 1; }
}

.ph-cta-inner { position: relative; z-index: 3; max-width: 900px; margin-inline: auto; }
.ph-cta h2 {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  letter-spacing: -.035em;
  line-height: 1.12;
}
.ph-cta p { font-size: 1.03rem; line-height: 1.62; }
.ph-cta .ph-btn { padding: 16px 30px; }

/* Contact strip rebuilt as three aligned cards */
.ph-cta-contact {
  margin-top: 46px;
  padding-top: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--ph-body);
  font-size: 1rem;
}
.ph-cta-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px 18px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--ph-radius);
  color: #fff;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.ph-cta-pill:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-3px);
  color: #fff;
}
.ph-cta-ico {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  border-radius: var(--ph-radius);
  transition: background .25s ease, transform .3s ease;
}
.ph-cta-pill:hover .ph-cta-ico { background: #fff; color: var(--ph-blue-dark); transform: rotate(-6deg); }
.ph-cta-text { min-width: 0; }
.ph-cta-text small {
  display: block;
  font-family: var(--ph-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 3px;
}
.ph-cta-text strong {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.ph-cta .ph-cta-note {
  max-width: none;
  margin: 38px auto 0;
  font-family: var(--ph-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ph-cta .ph-cta-note::before,
.ph-cta .ph-cta-note::after {
  content: "";
  width: 30px; height: 1px;
  background: rgba(255,255,255,.3);
}

/* ==========================================================================
   28. EXTRA MOTION
   ========================================================================== */

/* Heading rule that draws in when the block reveals */
.ph-head .ph-eyebrow::before { width: 0; transition: width .5s cubic-bezier(.22,.68,.35,1) .15s; }
.ph-reveal.is-in .ph-eyebrow::before,
.ph-head.is-in .ph-eyebrow::before { width: 26px; }

/* Footer links slide on hover */
.ph-footer ul a {
  display: inline-block;
  transition: transform .22s ease, color .2s ease;
}
.ph-footer ul a:hover { transform: translateX(5px); }

.ph-footer-social a { transition: background .22s ease, border-color .22s ease, color .22s ease, transform .28s ease; }
.ph-footer-social a:hover { transform: translateY(-4px) rotate(-6deg); }

/* Spec table rows stagger in */
.ph-spec tbody tr { transition: background .2s ease; }

/* Checklist marks pop on reveal */
.ph-checklist li::before { transition: transform .3s cubic-bezier(.34,1.4,.64,1), background-size .3s ease; }

/* Sub-nav active indicator glides */
.ph-subnav a { position: relative; }

/* Link arrow nudge */
.ph-link:hover { letter-spacing: .13em; }
.ph-link { transition: letter-spacing .25s ease, color .2s ease; }

/* Post cards */
.ph-post-card-thumb img { transition: transform .55s cubic-bezier(.22,.68,.35,1); }
.ph-post-card:hover .ph-post-card-thumb img { transform: scale(1.06); }

/* ==========================================================================
   29. RESPONSIVE — FINAL PASS
   ========================================================================== */

@media (max-width: 1180px) {
  .ph-header-call { display: none; }
  .ph-header-cta { padding-left: 0; border-left: 0; }
}

@media (max-width: 1024px) {
  .ph-header .ph-wrap { min-height: 74px; }
  .ph-header-cta .ph-btn { display: none; }
  .ph-cta-contact { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .ph-topbar-note { display: none; }
  .ph-topbar .ph-wrap { justify-content: center; }
}

@media (max-width: 720px) {
  .ph-topbar { font-size: .76rem; }
  .ph-topbar-list a { padding: 0 12px; }
  .ph-topbar-list a span { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .ph-cta { padding-block: 62px 58px; }
  .ph-cta-contact { grid-template-columns: 1fr; }
  .ph-cta-pill { padding: 14px; }
  .ph-cta .ph-cta-note { font-size: .6rem; letter-spacing: .07em; margin-top: 30px; }
  .ph-cta .ph-cta-note::before,
  .ph-cta .ph-cta-note::after { width: 18px; }
  .ph-logo img { max-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-cta::after,
  .ph-topbar-note::before { animation: none !important; }
}

/* ==========================================================================
   30. CONTACT PAGE + MAP
   ========================================================================== */

.ph-contact-card {
  display: block;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-top: 3px solid var(--ph-blue);
  padding: 28px 24px;
  color: var(--ph-ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.ph-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ph-shadow);
  border-color: var(--ph-blue);
  color: var(--ph-ink);
}
.ph-contact-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--ph-blue-tint);
  color: var(--ph-blue);
  margin-bottom: 18px;
  transition: background .25s ease, color .25s ease, transform .3s ease;
}
a.ph-contact-card:hover .ph-contact-ico {
  background: var(--ph-blue);
  color: #fff;
  transform: rotate(-8deg);
}
.ph-contact-card small {
  display: block;
  font-family: var(--ph-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ph-muted);
  margin-bottom: 7px;
}
.ph-contact-card strong {
  display: block;
  font-family: var(--ph-display);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ph-navy);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ph-contact-note {
  display: block;
  margin-top: 10px;
  font-size: .82rem;
  color: var(--ph-muted);
}

.ph-map-section {
  position: relative;
  line-height: 0;
  border-top: 1px solid var(--ph-line);
}
.ph-map-section iframe {
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(1) contrast(.94);
  transition: filter .5s ease;
}
.ph-map-section:hover iframe { filter: none; }

@media (max-width: 720px) {
  .ph-map-section iframe { height: 300px; }
  .ph-contact-card { padding: 22px 20px; }
}

/* ==========================================================================
   31. COLOUR LOCK
   --------------------------------------------------------------------------
   WordPress core global styles, page-builder CSS, and leftover plugin CSS all
   set anchor colours. Visited links are the worst offender: a browser default
   purple on a blue button makes the label almost unreadable. These rules pin
   the foreground colour for every state so text can never fall out of contrast
   with the surface it sits on.
   ========================================================================== */

a:visited { color: inherit; }
a:link, a:visited { -webkit-text-fill-color: currentColor; }

.ph-content a:not(.ph-btn):not(.elementor-button):not(.elementor-button-link):not(.fl-button):link,
.ph-content a:not(.ph-btn):not(.elementor-button):not(.elementor-button-link):not(.fl-button):visited { color: var(--ph-blue); }
.ph-content a:hover   { color: var(--ph-blue-dark); }

/* --- Buttons ------------------------------------------------------------- */
.ph-btn:link,
.ph-btn:visited,
.ph-btn:hover,
.ph-btn:focus,
.ph-btn:active { text-decoration: none; }

.ph-btn--primary:link, .ph-btn--primary:visited,
.ph-btn--dark:link,    .ph-btn--dark:visited {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.ph-btn--primary:hover, .ph-btn--primary:focus { color: #fff; -webkit-text-fill-color: #fff; }
.ph-btn--dark:hover,    .ph-btn--dark:focus    { color: #fff; -webkit-text-fill-color: #fff; }

.ph-btn--light:link, .ph-btn--light:visited,
.ph-btn--light:hover, .ph-btn--light:focus {
  color: var(--ph-navy);
  -webkit-text-fill-color: var(--ph-navy);
}

.ph-btn--outline-light:link, .ph-btn--outline-light:visited,
.ph-btn--outline-light:hover, .ph-btn--outline-light:focus {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.ph-btn--ghost:link, .ph-btn--ghost:visited { color: var(--ph-navy); -webkit-text-fill-color: var(--ph-navy); }
.ph-btn--ghost:hover, .ph-btn--ghost:focus  { color: var(--ph-blue); -webkit-text-fill-color: var(--ph-blue); }

input[type="submit"], button[type="submit"] { color: #fff; -webkit-text-fill-color: #fff; }

/* --- Dark surfaces -------------------------------------------------------- */
.ph-topbar a:not(.ph-btn):link, .ph-topbar a:not(.ph-btn):visited { color: #CFDDF0; -webkit-text-fill-color: #CFDDF0; }
.ph-topbar a:not(.ph-btn):hover, .ph-topbar a:not(.ph-btn):focus { color: #fff;    -webkit-text-fill-color: #fff; }

.ph-footer a:not(.ph-btn):link, .ph-footer a:not(.ph-btn):visited { color: #A2B7D2; -webkit-text-fill-color: #A2B7D2; }
.ph-footer a:not(.ph-btn):hover, .ph-footer a:not(.ph-btn):focus { color: #fff;    -webkit-text-fill-color: #fff; }
.ph-footer .ph-btn:link, .ph-footer .ph-btn:visited { color: #fff; -webkit-text-fill-color: #fff; }

.ph-hero-secondary a:link, .ph-hero-secondary a:visited { color: #A9C4EA; -webkit-text-fill-color: #A9C4EA; }
.ph-hero-secondary a:hover { color: #fff; -webkit-text-fill-color: #fff; }

.ph-cta-pill:link, .ph-cta-pill:visited, .ph-cta-pill:hover { color: #fff; -webkit-text-fill-color: #fff; }

.ph-pagehead a:not(.ph-btn):link, .ph-pagehead a:not(.ph-btn):visited { color: #86B4F5; -webkit-text-fill-color: #86B4F5; }
.ph-pagehead a:not(.ph-btn):hover { color: #fff; -webkit-text-fill-color: #fff; }

.ph-section--dark a:not(.ph-btn):link, .ph-section--dark a:not(.ph-btn):visited { color: #86B4F5; -webkit-text-fill-color: #86B4F5; }
.ph-section--dark a:not(.ph-btn):hover { color: #fff; -webkit-text-fill-color: #fff; }
.ph-section--dark .ph-btn--light:link, .ph-section--dark .ph-btn--light:visited { color: var(--ph-navy); -webkit-text-fill-color: var(--ph-navy); }
.ph-section--dark .ph-btn--outline-light:link, .ph-section--dark .ph-btn--outline-light:visited { color: #fff; -webkit-text-fill-color: #fff; }

.ph-wa:link, .ph-wa:visited, .ph-wa:hover { color: #fff; -webkit-text-fill-color: #fff; }

/* --- Light surfaces ------------------------------------------------------- */
.ph-header a:not(.ph-btn):link, .ph-header a:not(.ph-btn):visited { color: var(--ph-navy); -webkit-text-fill-color: var(--ph-navy); }
.ph-menu > li > a:hover, .ph-menu > li.current-menu-item > a { color: var(--ph-blue); -webkit-text-fill-color: var(--ph-blue); }
.ph-header .ph-btn--primary:link, .ph-header .ph-btn--primary:visited { color: #fff; -webkit-text-fill-color: #fff; }

.ph-contact-card:link, .ph-contact-card:visited { color: var(--ph-ink); -webkit-text-fill-color: var(--ph-ink); }
.ph-equip .ph-link:link, .ph-equip .ph-link:visited { color: var(--ph-navy); -webkit-text-fill-color: var(--ph-navy); }
.ph-equip:hover .ph-link { color: var(--ph-blue); -webkit-text-fill-color: var(--ph-blue); }
.ph-post-card h3 a:link, .ph-post-card h3 a:visited { color: var(--ph-navy); -webkit-text-fill-color: var(--ph-navy); }
.ph-post-card h3 a:hover { color: var(--ph-blue); -webkit-text-fill-color: var(--ph-blue); }

/* Brighter tint for the hero's highlighted words on navy (contrast) */
.ph-hero h1 em { color: #93C2FB; }

/* ==========================================================================
   32. NAVIGATION — never wraps
   ========================================================================== */

.ph-menu { flex-wrap: nowrap; }
.ph-menu > li > a {
  white-space: nowrap;
  padding: 12px 13px;
  font-size: .89rem;
}
.ph-menu .sub-menu { min-width: 288px; }
.ph-menu .sub-menu a { white-space: normal; line-height: 1.35; }

@media (max-width: 1320px) {
  .ph-menu > li > a { padding: 12px 10px; font-size: .85rem; }
  .ph-header .ph-wrap { gap: 20px; }
}

/* Mobile panel items should wrap normally again */
.ph-mobile-panel .ph-menu { flex-wrap: wrap; }
.ph-mobile-panel .ph-menu > li > a { white-space: normal; font-size: .95rem; }

/* ==========================================================================
   33. FOOTER — four columns
   ========================================================================== */

.ph-footer-top { grid-template-columns: 1.55fr 1fr 1.35fr 1.25fr; }

.ph-footer-contact { gap: 14px; }
.ph-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.45;
}
.ph-footer-contact .ph-ico {
  width: 16px; height: 16px;
  margin-top: 3px;
  color: var(--ph-blue);
}
.ph-footer-contact a { display: inline-block; }
.ph-footer .ph-btn { width: auto; }

@media (max-width: 1080px) {
  .ph-footer-top { grid-template-columns: 1fr 1fr; }
  .ph-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .ph-footer-top { grid-template-columns: 1fr; }
  .ph-footer .ph-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   34. FAQ ACCORDION — redesigned, and hardened against outside button styles
   --------------------------------------------------------------------------
   WordPress global styles and form plugins both style bare <button> elements.
   A FAQ trigger is a button, so it was picking up a blue block background with
   navy text on top of it. These rules reset the element completely, then build
   the card look on the wrapper instead, where nothing else can reach it.
   ========================================================================== */

.ph-faq {
  max-width: 900px;
  margin-inline: auto;
  border-top: 0;
  display: grid;
  gap: 12px;
  counter-reset: ph-faq;
}

.ph-faq-item {
  background: #fff;
  border: 1px solid var(--ph-line);
  border-left: 3px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ph-faq-item:hover {
  border-left-color: var(--ph-blue);
  box-shadow: 0 10px 26px -18px rgba(10,27,51,.4);
}
.ph-faq-item.is-open {
  border-left-color: var(--ph-amber);
  box-shadow: var(--ph-shadow);
}

/* Full reset of the trigger element */
.ph-faq .ph-faq-q,
.ph-faq .ph-faq-q:hover,
.ph-faq .ph-faq-q:focus,
.ph-faq .ph-faq-q:active {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  width: 100%;
  margin: 0;
  min-height: 0;
  line-height: 1.4;
}

.ph-faq .ph-faq-q {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px !important;
  text-align: left;
  cursor: pointer;
  font-family: var(--ph-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ph-navy) !important;
  -webkit-text-fill-color: var(--ph-navy);
  transition: color .2s ease;
}
.ph-faq .ph-faq-q:hover {
  color: var(--ph-blue) !important;
  -webkit-text-fill-color: var(--ph-blue);
}
.ph-faq-item.is-open .ph-faq-q {
  color: var(--ph-navy) !important;
  -webkit-text-fill-color: var(--ph-navy);
}

/* Numbered marker */
.ph-faq .ph-faq-q::before {
  counter-increment: ph-faq;
  content: counter(ph-faq, decimal-leading-zero);
  flex: none;
  font-family: var(--ph-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ph-blue);
  -webkit-text-fill-color: var(--ph-blue);
  padding-top: 2px;
  transition: color .25s ease;
}
.ph-faq-item.is-open .ph-faq-q::before {
  color: var(--ph-amber);
  -webkit-text-fill-color: var(--ph-amber);
}

/* Question text fills the middle */
.ph-faq .ph-faq-q > span:first-of-type { flex: 1 1 auto; }

/* Plus / minus control */
.ph-faq .ph-faq-icon {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--ph-line);
  border-radius: 50%;
  background: #fff;
  position: relative;
  transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.34,1.4,.64,1);
}
.ph-faq .ph-faq-q:hover .ph-faq-icon { border-color: var(--ph-blue); background: var(--ph-blue-tint); }
.ph-faq .ph-faq-icon::before,
.ph-faq .ph-faq-icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--ph-blue);
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.22,.68,.35,1), opacity .25s ease, background .25s ease;
}
.ph-faq .ph-faq-icon::before { width: 11px; height: 1.5px; }
.ph-faq .ph-faq-icon::after  { width: 1.5px; height: 11px; }

/* Higher specificity than the :hover rule above, so an open item keeps its
   filled marker even while the pointer is still resting on it. */
.ph-faq .ph-faq-item.is-open .ph-faq-q .ph-faq-icon,
.ph-faq .ph-faq-item.is-open .ph-faq-q:hover .ph-faq-icon {
  background: var(--ph-navy);
  border-color: var(--ph-navy);
  transform: rotate(180deg);
}
.ph-faq .ph-faq-item.is-open .ph-faq-q .ph-faq-icon::before,
.ph-faq .ph-faq-item.is-open .ph-faq-q:hover .ph-faq-icon::before {
  background: #fff;
  width: 12px;
  height: 2px;
}
.ph-faq .ph-faq-item.is-open .ph-faq-q .ph-faq-icon::after,
.ph-faq .ph-faq-item.is-open .ph-faq-q:hover .ph-faq-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Answer */
.ph-faq .ph-faq-a {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 68px 0 66px;
  color: var(--ph-muted);
  font-size: .96rem;
  line-height: 1.68;
  transition: max-height .4s cubic-bezier(.22,.68,.35,1), opacity .3s ease, padding .3s ease;
}
.ph-faq .ph-faq-a.is-open {
  max-height: 420px;
  opacity: 1;
  padding-bottom: 24px;
}

@media (max-width: 720px) {
  .ph-faq .ph-faq-q { gap: 12px; padding: 18px 16px !important; font-size: .97rem; }
  .ph-faq .ph-faq-q::before { display: none; }
  .ph-faq .ph-faq-a { padding: 0 16px; }
  .ph-faq .ph-faq-a.is-open { padding-bottom: 20px; }
  .ph-faq .ph-faq-icon { width: 26px; height: 26px; }
}

/* ==========================================================================
   35. OTHER BUTTON ELEMENTS — same hardening
   ========================================================================== */

.ph-burger,
.ph-burger:hover,
.ph-burger:focus {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--ph-navy) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ph-top,
.ph-top:focus {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--ph-navy) !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: none !important;
}
.ph-top:hover { background: var(--ph-blue) !important; }

@media (prefers-reduced-motion: reduce) {
  .ph-faq .ph-faq-a.is-open { max-height: none; }
}

/* ==========================================================================
   36. MARKETPLACE SERVICE CARDS — image-led, reference-site style
   ========================================================================== */

.ph-svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
/* Five cards: three on the top row, two centred below */
.ph-svc-grid > .ph-svc:nth-child(1),
.ph-svc-grid > .ph-svc:nth-child(2),
.ph-svc-grid > .ph-svc:nth-child(3) { grid-column: span 2; }
.ph-svc-grid > .ph-svc:nth-child(4) { grid-column: 2 / span 2; }
.ph-svc-grid > .ph-svc:nth-child(5) { grid-column: 4 / span 2; }

.ph-svc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  overflow: hidden;
  color: var(--ph-ink);
  transition: transform .3s cubic-bezier(.22,.68,.35,1), box-shadow .3s ease, border-color .25s ease;
}
.ph-svc:hover {
  transform: translateY(-6px);
  box-shadow: var(--ph-shadow-lg);
  border-color: var(--ph-blue);
  color: var(--ph-ink);
}

.ph-svc-media {
  display: block;
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--ph-blue-tint);
}
.ph-svc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.68,.35,1);
}
.ph-svc:hover .ph-svc-media img { transform: scale(1.07); }
.ph-svc-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(19,48,79,.42) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
.ph-svc:hover .ph-svc-media::after { opacity: 1; }

.ph-svc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 28px;
  flex-grow: 1;
}
.ph-svc-title {
  font-family: var(--ph-display);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
  color: var(--ph-navy);
}
.ph-svc-text {
  font-size: .91rem;
  color: var(--ph-muted);
  line-height: 1.6;
  flex-grow: 1;
}
.ph-svc .ph-link { color: var(--ph-blue); margin-top: 4px; }

.ph-svc--sm .ph-svc-body { padding: 20px 18px 22px; }
.ph-svc--sm .ph-svc-title { font-size: 1rem; }
.ph-svc--sm .ph-svc-text { font-size: .86rem; }

.ph-svc:link, .ph-svc:visited { color: var(--ph-ink); -webkit-text-fill-color: var(--ph-ink); }
.ph-svc:link .ph-svc-title, .ph-svc:visited .ph-svc-title { color: var(--ph-navy); -webkit-text-fill-color: var(--ph-navy); }

@media (max-width: 1024px) {
  .ph-svc-grid { grid-template-columns: repeat(4, 1fr); }
  .ph-svc-grid > .ph-svc:nth-child(1),
  .ph-svc-grid > .ph-svc:nth-child(2),
  .ph-svc-grid > .ph-svc:nth-child(3),
  .ph-svc-grid > .ph-svc:nth-child(4),
  .ph-svc-grid > .ph-svc:nth-child(5) { grid-column: span 2; }
  .ph-svc-grid > .ph-svc:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 720px) {
  .ph-svc-grid { grid-template-columns: 1fr; }
  .ph-svc-grid > .ph-svc:nth-child(n) { grid-column: 1 / -1; }
}

/* ==========================================================================
   37. HEADER FIT — seven menu items plus a CTA needs tighter rules
   ========================================================================== */

.ph-btn { white-space: nowrap; }
.ph-logo-text { white-space: nowrap; }
.ph-logo-text small { white-space: nowrap; }

.ph-header .ph-wrap { gap: 18px; }
.ph-header-cta .ph-btn { padding: 13px 20px; font-size: .85rem; }

/* The phone block is the first thing to go when space runs out */
@media (max-width: 1400px) {
  .ph-header-call { display: none; }
  .ph-header-cta { padding-left: 0; border-left: 0; }
}
@media (max-width: 1240px) {
  .ph-menu > li > a { padding: 12px 9px; font-size: .83rem; }
}
@media (max-width: 1120px) {
  .ph-header-cta { display: none; }
}

/* ==========================================================================
   38. PHOTOGRAPHY
   ========================================================================== */

/* --- Equipment category cards, now photo-led ---------------------------- */
.ph-equip--photo {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.ph-equip-media {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ph-blue-tint);
}
.ph-equip-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.68,.35,1);
}
.ph-equip--photo:hover .ph-equip-media img { transform: scale(1.06); }
.ph-equip-badge {
  position: absolute;
  left: 16px; bottom: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(19,48,79,.86);
  backdrop-filter: blur(4px);
  color: #fff;
  border-radius: var(--ph-radius);
  transition: background .25s ease, transform .3s ease;
}
.ph-equip-badge .ph-ico { width: 20px; height: 20px; }
.ph-equip--photo:hover .ph-equip-badge { background: var(--ph-blue); transform: rotate(-6deg); }
.ph-equip-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 26px;
  flex-grow: 1;
}
.ph-equip--photo h3 { margin: 0; }
.ph-equip--photo p { margin: 0; flex-grow: 1; }

/* --- Hero photo --------------------------------------------------------- */
.ph-hero-media img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* --- Vendor block ------------------------------------------------------- */
.ph-vendor-media img {
  width: 100%;
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow-lg);
}
.ph-vendor-list--wide {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 44px;
}
@media (max-width: 860px) {
  .ph-vendor-list--wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ph-vendor-list--wide { grid-template-columns: 1fr; }
}

/* --- Full-bleed photo band --------------------------------------------- */
.ph-band-photo {
  position: relative;
  min-height: 380px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--ph-navy);
}
.ph-band-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .32;
}
.ph-band-photo .ph-wrap { position: relative; z-index: 2; text-align: center; }
.ph-band-photo h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.ph-band-photo p { color: #C3D6EC; max-width: 62ch; margin: 0 auto 30px; }
.ph-band-photo .ph-btn-row { justify-content: center; }

/* --- Split media on service and about pages ---------------------------- */
.ph-split-media img { object-fit: cover; }
.ph-split-media--tall img { aspect-ratio: 4 / 5; }

/* --- Page head with a photo backdrop ------------------------------------ */
.ph-pagehead--photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .22;
  z-index: 0;
}

/* ==========================================================================
   39. BRAND LOCKUP
   ========================================================================== */

.ph-logo-text {
  display: block;
  font-family: var(--ph-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ph-navy);
}
.ph-logo-text small {
  display: block;
  margin-top: 3px;
  font-family: var(--ph-mono);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ph-blue);
}

.ph-footer-logo { display: inline-block; margin-bottom: 20px; }
.ph-footer-logo img { max-height: 52px; width: auto; }
.ph-footer-logo .ph-logo-text { color: #fff; }
.ph-footer-logo .ph-logo-text small { color: #7FB0F5; }
.ph-footer-logo:hover .ph-logo-text { color: #fff; }

@media (max-width: 720px) {
  .ph-logo-text { font-size: 1.18rem; }
}


/* ==========================================================================
   40. PAGE BUILDER CONTENT
   --------------------------------------------------------------------------
   The theme sets a navy colour on every heading. Inside Elementor, Beaver
   Builder, or a WP block group, that overrode the colour the editor had
   chosen — so a white heading placed over a dark photo came out navy and
   effectively disappeared. These rules hand colour control back to the
   builder while keeping the theme's typography.
   ========================================================================== */

.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6,
.fl-builder-content h1, .fl-builder-content h2, .fl-builder-content h3,
.fl-builder-content h4, .fl-builder-content h5, .fl-builder-content h6 {
  color: inherit;
}

.elementor p, .fl-builder-content p { color: inherit; }

/* Anything the builder places over a background image gets a readable
   minimum: a soft shadow so light text survives a light patch of photo. */
.elementor-section[class*="elementor-bg"] .elementor-heading-title,
.elementor-section:has(> .elementor-background-overlay) .elementor-heading-title {
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   41. FOOTER MAP
   ========================================================================== */

.ph-footer-map {
  border-top: 1px solid rgba(255,255,255,.11);
  padding-top: 34px;
  margin-top: 8px;
}
.ph-footer-map-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ph-footer-map-head .ph-ico {
  width: 22px; height: 22px;
  color: var(--ph-blue);
}
.ph-footer-map-head > span {
  flex: 1 1 300px;
  color: #C3D6EC;
  font-size: .95rem;
  line-height: 1.45;
}
.ph-footer-map-head small {
  display: block;
  font-family: var(--ph-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7FB0F5;
  margin-bottom: 4px;
}
.ph-footer-map-head .ph-btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,.26);
  color: #fff;
}
.ph-footer-map-head .ph-btn--ghost:link,
.ph-footer-map-head .ph-btn--ghost:visited { color: #fff; -webkit-text-fill-color: #fff; }
.ph-footer-map-head .ph-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.ph-footer-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: var(--ph-radius);
  filter: grayscale(1) invert(.92) contrast(.85) hue-rotate(180deg);
  transition: filter .5s ease;
}
.ph-footer-map:hover iframe { filter: none; }

@media (max-width: 720px) {
  .ph-footer-map iframe { height: 230px; }
  .ph-footer-map-head .ph-btn { width: 100%; justify-content: center; }
}


/* The count-up element must inherit whatever it sits inside, never pick up a
   label style from a descendant selector. */
.ph-count {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   42. CONTACT PAGE — rebuilt
   ========================================================================== */

.ph-pagehead--compact { padding-block: 64px 96px; }
.ph-pagehead--compact .ph-hero-lead { margin-top: 14px; max-width: 56ch; }

/* The card lifts up over the page head */
.ph-section--pull { padding-top: 0; margin-top: -56px; position: relative; z-index: 5; }

.ph-contact-card-lg {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow-lg);
  overflow: hidden;
}

.ph-contact-form { padding: 44px 44px 48px; }
.ph-contact-form h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); margin-bottom: 12px; }
.ph-contact-form-note { color: var(--ph-muted); font-size: .95rem; margin-bottom: 30px; }

/* Dark panel */
.ph-contact-side {
  background: linear-gradient(160deg, var(--ph-navy) 0%, var(--ph-navy-2) 100%);
  color: #C3D6EC;
  padding: 44px 36px 48px;
  position: relative;
  overflow: hidden;
}
.ph-contact-side::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(120% 80% at 100% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000 10%, transparent 70%);
  pointer-events: none;
}
.ph-contact-side > * { position: relative; z-index: 2; }
.ph-contact-side .ph-eyebrow { color: #86B4F5; }
.ph-contact-side h3 { color: #fff; font-size: 1.35rem; margin-bottom: 26px; }

.ph-contact-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ph-contact-rows a,
.ph-contact-row-static {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 14px;
  border-radius: var(--ph-radius);
  border: 1px solid transparent;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.ph-contact-rows a:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  transform: translateX(4px);
}
.ph-contact-row-ico {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border-radius: var(--ph-radius);
  color: #fff;
  transition: background .22s ease, color .22s ease;
}
.ph-contact-rows a:hover .ph-contact-row-ico { background: var(--ph-blue); color: #fff; }
.ph-contact-row-text { min-width: 0; }
.ph-contact-row-text small {
  display: block;
  font-family: var(--ph-mono);
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #86B4F5;
  margin-bottom: 3px;
}
.ph-contact-row-text strong {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ph-contact-rows a:link .ph-contact-row-text strong,
.ph-contact-rows a:visited .ph-contact-row-text strong { color: #fff; -webkit-text-fill-color: #fff; }

.ph-contact-hours {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--ph-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8FA6C4;
  line-height: 1.7;
}

/* --- Quick route tiles --------------------------------------------------- */
.ph-route {
  display: block;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  padding: 24px 22px;
  color: var(--ph-ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ph-route:hover {
  transform: translateY(-4px);
  border-color: var(--ph-blue);
  box-shadow: var(--ph-shadow);
  color: var(--ph-ink);
}
.ph-route-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--ph-blue-tint);
  color: var(--ph-blue);
  border-radius: var(--ph-radius);
  margin-bottom: 16px;
  transition: background .25s ease, color .25s ease, transform .3s ease;
}
.ph-route:hover .ph-route-ico { background: var(--ph-blue); color: #fff; transform: rotate(-8deg); }
.ph-route strong {
  display: block;
  font-family: var(--ph-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ph-navy);
  margin-bottom: 5px;
}
.ph-route > span:last-child { font-size: .87rem; color: var(--ph-muted); }
.ph-route:link, .ph-route:visited { color: var(--ph-ink); -webkit-text-fill-color: var(--ph-ink); }

/* --- Map with a floating address card ------------------------------------ */
.ph-map-wrap { position: relative; line-height: 0; }
.ph-map-wrap iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(1) contrast(.92);
}
.ph-map-wrap .ph-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.ph-map-card {
  pointer-events: auto;
  background: #fff;
  border-left: 3px solid var(--ph-blue);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow-lg);
  padding: 32px 30px;
  max-width: 380px;
  line-height: 1.6;
}
.ph-map-card h3 { margin-bottom: 8px; font-size: 1.3rem; }
.ph-map-card p { color: var(--ph-muted); font-size: .94rem; margin-bottom: 22px; }

@media (max-width: 1024px) {
  .ph-contact-card-lg { grid-template-columns: 1fr; }
  .ph-contact-form { padding: 34px 30px 38px; }
  .ph-contact-side { padding: 34px 30px 40px; }
}

@media (max-width: 720px) {
  .ph-pagehead--compact { padding-block: 48px 76px; }
  .ph-section--pull { margin-top: -48px; }
  .ph-contact-form { padding: 28px 20px 32px; }
  .ph-contact-side { padding: 28px 20px 34px; }
  .ph-map-wrap iframe { height: 420px; }
  .ph-map-wrap .ph-wrap { position: static; padding: 0; }
  .ph-map-card {
    max-width: none;
    margin: -60px var(--ph-gutter) 0;
    position: relative;
    z-index: 3;
  }
  .ph-map-wrap { padding-bottom: 24px; background: var(--ph-bg-alt); }
}

/* ==========================================================================
   43. FLOATING WHATSAPP BUTTON
   ========================================================================== */

.ph-wa {
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 14px;
  line-height: 1.25;
}
.ph-wa-label { display: block; text-align: left; }
.ph-wa-label small {
  display: block;
  font-family: var(--ph-mono);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 1px;
}
.ph-wa-label strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ph-wa .ph-ico { width: 26px; height: 26px; }

@media (max-width: 720px) {
  /* Icon only on small screens, but still dials the same number. */
  .ph-wa { padding: 14px; gap: 0; border-radius: 50%; }
  .ph-wa-label { display: none; }
  .ph-wa .ph-ico { width: 24px; height: 24px; }
}

/* External menu items get a small outward arrow so the new tab is expected */
.ph-menu-external > a::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(1px);
  opacity: .55;
  transition: transform .22s ease, opacity .2s ease;
}
.ph-menu-external > a:hover::after { transform: rotate(45deg) translate(2px, -1px); opacity: 1; }
.ph-menu .sub-menu .ph-menu-external > a::before { display: none; }

/* ==========================================================================
   44. HERO SLIDER
   ========================================================================== */

.ph-slider {
  position: relative;
  background: var(--ph-navy);
  overflow: hidden;
  isolation: isolate;
}

.ph-slider-track {
  position: relative;
  min-height: clamp(500px, 66vh, 680px);
}

.ph-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.ph-slide.is-active { opacity: 1; visibility: visible; }

/* Without JS the first slide still shows, so the hero is never blank. */
.ph-slide:first-child { opacity: 1; visibility: visible; }
.ph-js .ph-slide:first-child:not(.is-active) { opacity: 0; visibility: hidden; }

.ph-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(1.1) saturate(1.16) contrast(1.05);
}
/* Readability: navy wash from the left, darkened at the base. */
.ph-slide::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,27,46,.72) 0%, rgba(12,32,54,.42) 42%, rgba(14,36,60,.10) 68%, transparent 100%),
    linear-gradient(180deg, rgba(10,27,46,.22) 0%, transparent 26%, rgba(7,20,35,.48) 100%);
}
.ph-slide::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(100% 90% at 0% 0%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(100% 90% at 0% 0%, #000 15%, transparent 72%);
}

/* Slow zoom on the active slide */
.ph-js .ph-slide.is-active .ph-slide-bg { animation: ph-kenburns 4.5s ease-out forwards; }
@keyframes ph-kenburns {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

.ph-slide .ph-wrap { width: 100%; position: relative; z-index: 2; }

.ph-slide-body {
  position: relative;
  max-width: 620px;
  margin-block: 24px 88px;
  padding: 36px 38px 38px;
  color: #D5E4F5;
  background: linear-gradient(112deg, rgba(8,22,39,.92) 0%, rgba(10,28,49,.84) 55%, rgba(12,32,55,.60) 100%);
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  border-left: 3px solid var(--ph-amber);
  border-radius: 0 var(--ph-radius) var(--ph-radius) 0;
  box-shadow: 0 26px 64px -28px rgba(0,0,0,.75);
}
.ph-slide-body .ph-eyebrow { color: #93C2FB; }
.ph-slide-body h2 {
  color: #fff;
  font-size: clamp(1.95rem, 3.8vw, 3rem);
  line-height: 1.07;
  letter-spacing: -.035em;
  margin-bottom: 16px;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.ph-slide-body p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 50ch;
  margin-bottom: 26px;
  color: #E6EFFA;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* Staggered entrance for the active slide's text */
.ph-js .ph-slide.is-active .ph-slide-body > * {
  opacity: 0;
  animation: ph-rise .42s cubic-bezier(.22,.68,.35,1) forwards;
}
.ph-js .ph-slide.is-active .ph-slide-body > *:nth-child(1) { animation-delay: .04s; }
.ph-js .ph-slide.is-active .ph-slide-body > *:nth-child(2) { animation-delay: .1s; }
.ph-js .ph-slide.is-active .ph-slide-body > *:nth-child(3) { animation-delay: .16s; }
.ph-js .ph-slide.is-active .ph-slide-body > *:nth-child(4) { animation-delay: .22s; }

/* --- Arrows -------------------------------------------------------------- */
.ph-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 52px; height: 52px;
  margin-top: -26px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 50%;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  backdrop-filter: blur(6px);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.ph-slider-arrow:hover {
  background: var(--ph-blue) !important;
  border-color: var(--ph-blue) !important;
  transform: scale(1.06);
}
.ph-slider-arrow svg { width: 22px; height: 22px; }
.ph-slider-arrow--prev { left: 24px; }
.ph-slider-arrow--next { right: 24px; }

/* --- Dots with progress bars --------------------------------------------- */
.ph-slider-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding-block: 46px 26px;
  background: linear-gradient(180deg, transparent, rgba(7,20,35,.62));
}
.ph-slider-dots {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ph-slider-dot {
  flex: 1 1 0;
  min-width: 90px;
  max-width: 210px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.ph-slider-dot-bar {
  display: block;
  height: 3px;
  background: rgba(255,255,255,.38);
  overflow: hidden;
  margin-bottom: 9px;
}
.ph-slider-dot-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ph-amber);
}
.ph-slider-dot.is-active .ph-slider-dot-bar > span { width: 100%; }
.ph-js .ph-slider-dot.is-active .ph-slider-dot-bar > span {
  animation: ph-slide-progress var(--ph-slide-time, 3s) linear forwards;
}
.ph-slider-dot.is-done .ph-slider-dot-bar > span { width: 100%; animation: none; }
@keyframes ph-slide-progress { from { width: 0; } to { width: 100%; } }

.ph-slider-dot-label {
  display: block;
  font-family: var(--ph-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  line-height: 1.35;
  transition: color .22s ease;
}
.ph-slider-dot:hover .ph-slider-dot-label,
.ph-slider-dot.is-active .ph-slider-dot-label { color: #fff; }

.ph-slider.is-paused .ph-slider-dot.is-active .ph-slider-dot-bar > span {
  animation-play-state: paused;
}

@media (max-width: 1024px) {
  .ph-slider-arrow { display: none; }
  .ph-slide-body { padding-block: 32px 104px; }
}

@media (max-width: 720px) {
  .ph-slider-track { min-height: 520px; }
  .ph-slide-body {
    max-width: none;
    margin-block: 16px 104px;
    padding: 26px 22px 28px;
    border-radius: var(--ph-radius);
  }
  .ph-slide-body p { font-size: .96rem; }
  .ph-slide::before {
    background:
      linear-gradient(180deg, rgba(10,27,46,.34) 0%, rgba(10,27,46,.46) 50%, rgba(7,20,35,.70) 100%);
  }
  .ph-slider-dot { min-width: 0; }
  .ph-slider-dot-label { display: none; }
  .ph-slider-dot-bar { height: 4px; margin-bottom: 0; }
  .ph-slider-foot { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-slide { transition: none; }
  .ph-js .ph-slide.is-active .ph-slide-bg { animation: none; }
  .ph-js .ph-slide.is-active .ph-slide-body > * { opacity: 1; animation: none; }
  .ph-js .ph-slider-dot.is-active .ph-slider-dot-bar > span { animation: none; width: 100%; }
}


/* ==========================================================================
   45. BUTTON COLOUR — always last word
   --------------------------------------------------------------------------
   Surface rules like ".ph-pagehead a:link" carry higher specificity than
   ".ph-btn--primary:link", which turned white button labels pale blue inside
   the dark page head. These restate the button colours at the end of the
   sheet with enough specificity to win everywhere.
   ========================================================================== */

.ph-btn.ph-btn--dark,
.ph-btn.ph-btn--dark:link,
.ph-btn.ph-btn--dark:visited,
.ph-btn.ph-btn--dark:hover,
.ph-btn.ph-btn--dark:focus,
.ph-btn.ph-btn--outline-light,
.ph-btn.ph-btn--outline-light:link,
.ph-btn.ph-btn--outline-light:visited,
.ph-btn.ph-btn--outline-light:hover,
.ph-btn.ph-btn--outline-light:focus {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.ph-btn.ph-btn--primary,
.ph-btn.ph-btn--primary:link,
.ph-btn.ph-btn--primary:visited,
.ph-btn.ph-btn--primary:hover,
.ph-btn.ph-btn--primary:focus {
  color: var(--ph-navy);
  -webkit-text-fill-color: var(--ph-navy);
}

.ph-btn.ph-btn--light,
.ph-btn.ph-btn--light:link,
.ph-btn.ph-btn--light:visited,
.ph-btn.ph-btn--light:hover,
.ph-btn.ph-btn--light:focus {
  color: var(--ph-navy);
  -webkit-text-fill-color: var(--ph-navy);
}

.ph-btn.ph-btn--ghost,
.ph-btn.ph-btn--ghost:link,
.ph-btn.ph-btn--ghost:visited {
  color: var(--ph-navy);
  -webkit-text-fill-color: var(--ph-navy);
}
.ph-btn.ph-btn--ghost:hover,
.ph-btn.ph-btn--ghost:focus {
  color: #0C5F62;
  -webkit-text-fill-color: #0C5F62;
}

/* A ghost button on a dark surface needs light text, not navy.
   Specificity has to clear ".ph-btn.ph-btn--ghost:link" (0,3,0), so these
   carry three classes plus the link pseudo-class. */
.ph-pagehead .ph-btn.ph-btn--ghost,
.ph-pagehead .ph-btn.ph-btn--ghost:link,
.ph-pagehead .ph-btn.ph-btn--ghost:visited,
.ph-section--dark .ph-btn.ph-btn--ghost,
.ph-section--dark .ph-btn.ph-btn--ghost:link,
.ph-section--dark .ph-btn.ph-btn--ghost:visited,
.ph-footer .ph-btn.ph-btn--ghost,
.ph-footer .ph-btn.ph-btn--ghost:link,
.ph-footer .ph-btn.ph-btn--ghost:visited,
.ph-slide .ph-btn.ph-btn--ghost,
.ph-slide .ph-btn.ph-btn--ghost:link,
.ph-slide .ph-btn.ph-btn--ghost:visited,
.ph-cta .ph-btn.ph-btn--ghost,
.ph-cta .ph-btn.ph-btn--ghost:link,
.ph-cta .ph-btn.ph-btn--ghost:visited {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.46);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-text-fill-color: #fff;
}
.ph-pagehead .ph-btn.ph-btn--ghost:hover,
.ph-pagehead .ph-btn.ph-btn--ghost:focus,
.ph-section--dark .ph-btn.ph-btn--ghost:hover,
.ph-section--dark .ph-btn.ph-btn--ghost:focus,
.ph-footer .ph-btn.ph-btn--ghost:hover,
.ph-footer .ph-btn.ph-btn--ghost:focus,
.ph-slide .ph-btn.ph-btn--ghost:hover,
.ph-slide .ph-btn.ph-btn--ghost:focus,
.ph-cta .ph-btn.ph-btn--ghost:hover,
.ph-cta .ph-btn.ph-btn--ghost:focus {
  border-color: #5BE8D5;
  background: #E8FBF8;
  color: #0B3444;
  -webkit-text-fill-color: #0B3444;
}

/* ==========================================================================
   46. LOGO LOCKUP
   ========================================================================== */

.ph-logo,
.ph-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ph-logo-mark {
  flex: none;
  height: 46px;
  width: auto;
  transition: height .28s ease, transform .3s ease;
}
.ph-logo:hover .ph-logo-mark { transform: translateY(-2px); }
.ph-header.is-stuck .ph-logo-mark { height: 38px; }

.ph-logo-img { max-height: 56px; width: auto; }
.ph-header.is-stuck .ph-logo-img { max-height: 42px; }

.ph-logo-text {
  display: block;
  font-family: var(--ph-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ph-navy);
  white-space: nowrap;
}
.ph-logo-text small {
  display: block;
  margin-top: 3px;
  font-family: var(--ph-mono);
  font-size: .54rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ph-blue);
  white-space: nowrap;
}

/* Footer: brand blue on navy needs lifting */
.ph-footer-logo { margin-bottom: 22px; }
.ph-footer-logo .ph-logo-mark {
  height: 54px;
  filter: brightness(1.55) saturate(1.15);
}
.ph-footer-logo .ph-logo-img { max-height: 58px; }
.ph-footer-logo .ph-logo-text { color: #fff; }
.ph-footer-logo .ph-logo-text small { color: #86B4F5; }

@media (max-width: 1240px) {
  .ph-logo-text { font-size: 1.14rem; }
  .ph-logo-mark { height: 40px; }
}

@media (max-width: 720px) {
  .ph-logo { gap: 9px; }
  .ph-logo-mark { height: 36px; }
  .ph-logo-text { font-size: 1.06rem; }
  .ph-logo-text small { font-size: .5rem; letter-spacing: .18em; }
}

/* ==========================================================================
   47. ABOUT PAGE
   ========================================================================== */

/* Every heading gets an explicit line-height. Without one, a builder or
   plugin stylesheet setting a small value made two-line headings overlap. */
h1, h2, h3, h4, h5, h6,
.ph-value h3, .ph-trustlist strong, .ph-equip h3, .ph-svc-title {
  line-height: 1.24;
}
h1 { line-height: 1.08; }
h2 { line-height: 1.14; }
.ph-slide-body h2 { line-height: 1.07; }

.ph-value {
  background: #fff;
  border: 1px solid var(--ph-line);
  border-top: 3px solid var(--ph-blue);
  border-radius: var(--ph-radius);
  padding: 30px 28px 32px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ph-value:hover { transform: translateY(-4px); box-shadow: var(--ph-shadow); }
.ph-value-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--ph-blue-tint);
  color: var(--ph-blue);
  border-radius: var(--ph-radius);
  margin-bottom: 20px;
  transition: background .25s ease, color .25s ease, transform .3s ease;
}
.ph-value-ico .ph-ico { width: 23px; height: 23px; }
.ph-value:hover .ph-value-ico { background: var(--ph-blue); color: #fff; transform: rotate(-7deg); }
.ph-value h3 { font-size: 1.14rem; margin-bottom: 10px; }
.ph-value p { color: var(--ph-muted); font-size: .93rem; margin: 0; }

.ph-trustlist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; }
.ph-trustlist li { display: flex; gap: 16px; align-items: flex-start; }
.ph-trustlist-ico {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  color: var(--ph-blue);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ph-trustlist li:hover .ph-trustlist-ico { background: var(--ph-blue); border-color: var(--ph-blue); color: #fff; }
.ph-trustlist-ico .ph-ico { width: 20px; height: 20px; }
.ph-trustlist-text strong {
  display: block;
  font-family: var(--ph-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ph-navy);
  margin-bottom: 5px;
}
.ph-trustlist-text > span { font-size: .93rem; color: var(--ph-muted); }

/* Story column reads better with a set measure */
#story p { color: var(--ph-muted); max-width: 62ch; }

@media (max-width: 720px) {
  .ph-value { padding: 24px 20px 26px; }
  .ph-trustlist { gap: 18px; }
}

/* ==========================================================================
   48. CONTRAST & TYPOGRAPHY PASS
   --------------------------------------------------------------------------
   Two problems this fixes:
   1. Small blue label text (#2B7AD4) on white measured about 4.1:1 — under the
      4.5:1 minimum for body-size text. A darker ink blue is used for small
      text on light surfaces; the bright blue stays for buttons and large type.
   2. Several muted greys on navy sat near 4:1. All lifted.
   ========================================================================== */

:root {
  /* Blue for small text on light backgrounds — 5.6:1 on white */
  --ph-blue-ink: #1A5CAA;
  /* Blue for small text on dark backgrounds */
  --ph-blue-lite: #93C2FB;
}

/* --- Small blue labels on light surfaces --------------------------------- */
.ph-eyebrow,
.ph-step-no,
.ph-service-no,
.ph-widget h4,
.ph-subnav a.is-active,
.ph-subnav a:hover,
.ph-link,
.ph-equip .ph-link,
.ph-svc .ph-link,
.ph-contact-row-text small { color: var(--ph-blue-ink); }

.ph-trust-cell > span,
.ph-contact-card small,
.ph-value h3 + p,
.ph-route-ico { color: var(--ph-blue-ink); }
.ph-trust-cell > span { color: var(--ph-blue-ink); }
.ph-route-ico { color: var(--ph-blue-ink); }
.ph-value-ico { color: var(--ph-blue-ink); }
.ph-trustlist-ico { color: var(--ph-blue-ink); }
.ph-equip-icon { color: var(--ph-blue-ink); }
.ph-industry .ph-ico { color: var(--ph-blue-ink); }
.ph-why-mark { color: var(--ph-blue-ink); }
.ph-checklist li::before { border-color: var(--ph-blue-ink); }
.ph-spec th { color: var(--ph-blue-ink); }

/* On dark surfaces the light blue stays */
.ph-section--dark .ph-eyebrow,
.ph-pagehead .ph-eyebrow,
.ph-slide-body .ph-eyebrow,
.ph-contact-side .ph-eyebrow,
.ph-contact-side .ph-contact-row-text small,
.ph-footer-map-head small { color: var(--ph-blue-lite); }
.ph-cta .ph-eyebrow { color: rgba(255,255,255,.92); }

/* --- Muted greys on navy, all lifted ------------------------------------- */
.ph-topbar { color: #BACBE0; }
.ph-topbar-note { color: #9DB4D0; }
.ph-footer { color: #A8BDD6; }
.ph-footer-brand p { color: #9BB2CE; }
.ph-footer-bottom { color: #93AAC6; }
.ph-footer a:not(.ph-btn):link,
.ph-footer a:not(.ph-btn):visited { color: #B3C6DC; -webkit-text-fill-color: #B3C6DC; }
.ph-section--dark { color: #C6D6E9; }
.ph-section--dark .ph-head p { color: #BACDE4; }
.ph-service p { color: #BACDE4; }
.ph-reach-item > span { color: var(--ph-blue-lite); }
.ph-contact-hours { color: #A6BCD8; }
.ph-hero-strip li { color: #A9C0DC; }
.ph-slider-dot-label { color: rgba(255,255,255,.82); }

/* --- CTA band: deeper blue so white copy clears 4.5:1 -------------------- */
.ph-cta {
  background: linear-gradient(118deg, #14509B 0%, #1B60B2 52%, #2270C0 100%);
}
.ph-cta p,
.ph-cta .ph-head p { color: rgba(255,255,255,.94); }
.ph-cta .ph-cta-note { color: rgba(255,255,255,.78); }
.ph-cta-text small { color: rgba(255,255,255,.86); }
.ph-cta-pill {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.3);
}
.ph-cta-pill:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }

/* --- Body copy a step larger, matching the reference --------------------- */
body { font-size: 17px; }
.ph-head p { font-size: 1.09rem; line-height: 1.62; }
.ph-equip p, .ph-value p, .ph-svc-text { font-size: .95rem; }
.ph-why p, .ph-trustlist-text > span { font-size: .96rem; }
.ph-step p { font-size: .95rem; }

/* ==========================================================================
   49. HEADER NAVIGATION — larger, with room to breathe
   ========================================================================== */

.ph-header .ph-wrap { min-height: 92px; gap: 16px; }
.ph-header.is-stuck .ph-wrap { min-height: 74px; }

.ph-menu { gap: 2px; }
.ph-menu > li > a {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.012em;
  padding: 12px 14px;
  color: var(--ph-navy);
}
.ph-menu > li > a::after { left: 14px; right: 14px; bottom: 2px; height: 2px; }
.ph-menu > li.menu-item-has-children > a { padding-right: 24px; }

.ph-menu .sub-menu { min-width: 310px; padding: 10px; }
.ph-menu .sub-menu a { font-size: .95rem; padding: 12px 16px; }

.ph-header-cta .ph-btn { padding: 14px 24px; font-size: .93rem; }
.ph-header-call { font-size: .9rem; }
.ph-header-call small { font-size: .6rem; }

.ph-topbar { font-size: .84rem; }
.ph-topbar .ph-wrap { min-height: 46px; }

/* The phone block goes first when space runs short, then the button. */
@media (max-width: 1500px) { .ph-header-call { display: none; } }
@media (max-width: 1400px) { .ph-header-call { display: none; } }
@media (max-width: 1320px) { .ph-menu > li > a { font-size: .95rem; padding: 12px 11px; } }
@media (max-width: 1180px) {
  .ph-menu > li > a { font-size: .9rem; padding: 12px 9px; }
  .ph-header-cta .ph-btn { padding: 12px 18px; font-size: .88rem; }
}
@media (max-width: 1060px) { .ph-header-cta { display: none; } }
@media (max-width: 1024px) { .ph-header .ph-wrap { min-height: 78px; } }

/* Larger navigation needs a wider bar than the 1200px content column. */
.ph-topbar .ph-wrap,
.ph-header .ph-wrap { max-width: 1400px; }

.ph-logo { flex: none; }
.ph-nav-area { min-width: 0; flex-shrink: 1; }
.ph-menu { flex-shrink: 1; min-width: 0; }
.ph-header-cta { flex: none; }

@media (max-width: 1440px) {
  .ph-menu > li > a { font-size: .95rem; padding: 12px 11px; }
}
@media (max-width: 1280px) {
  .ph-menu > li > a { font-size: .9rem; padding: 12px 9px; }
  .ph-header .ph-wrap { gap: 12px; }
}
@media (max-width: 1140px) {
  .ph-header-cta { display: none; }
  .ph-menu > li > a { font-size: .94rem; padding: 12px 12px; }
}

/* ==========================================================================
   50. PAGE BUILDER CONTENT — repairs
   --------------------------------------------------------------------------
   Three real problems seen on the live About page:

   1. Overlapping headings. A two-line heading was rendering with its lines on
      top of each other, which happens when a line-height under 1 is set in the
      builder's typography settings. A sane minimum is enforced below.

   2. Invisible button labels. Builder content sat inside the theme's
      .ph-content column, so ".ph-content a:link" repainted every Elementor
      button label in theme blue — blue text on a blue button. Builder buttons
      are now excluded, and builder pages no longer use that wrapper at all.

   3. Squashed layout. Full-width builder sections were being constrained to
      the theme's 820px reading column.
   ========================================================================== */

/* 1. Headings can never collapse onto themselves */
.elementor-heading-title,
.elementor-widget-heading h1, .elementor-widget-heading h2,
.elementor-widget-heading h3, .elementor-widget-heading h4,
.elementor-widget-heading h5, .elementor-widget-heading h6,
.elementor-icon-box-title, .elementor-icon-box-title span,
.elementor-image-box-title,
.elementor-widget-text-editor h1, .elementor-widget-text-editor h2,
.elementor-widget-text-editor h3, .elementor-widget-text-editor h4,
.fl-heading .fl-heading-text {
  line-height: 1.3 !important;
}
.elementor-heading-title { margin-bottom: .4em; }

/* 2. Builder buttons keep the colour the builder gave them */
.elementor-button,
.elementor-button:link,
.elementor-button:visited,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button-link,
.elementor-button-link:link,
.elementor-button-link:visited,
.fl-button, .fl-button:link, .fl-button:visited {
  -webkit-text-fill-color: currentColor;
}

/* Filled builder buttons: force a readable label rather than theme blue */
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl,
.elementor-button-link.elementor-button {
  text-decoration: none;
}

/* Elementor's default button is filled with the accent colour, so a white
   label is the safe default. Anything set in the builder overrides it. */
.ph-content .elementor-button,
.ph-content .elementor-button:link,
.ph-content .elementor-button:visited,
.ph-content .elementor-button:hover,
.ph-builder .elementor-button,
.ph-builder .elementor-button:link,
.ph-builder .elementor-button:visited {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* 3. Builder pages render full width */
.ph-builder { width: 100%; }
.ph-builder > .elementor { width: 100%; }

/* Builder text keeps its own colour, but never inherits a theme override */
.ph-builder h1, .ph-builder h2, .ph-builder h3,
.ph-builder h4, .ph-builder h5, .ph-builder h6,
.ph-builder p, .ph-builder li { color: inherit; }

/* ==========================================================================
   51. NAVIGATION SIZE — matched to the reference site
   ========================================================================== */

.ph-menu > li > a {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.014em;
  padding: 12px 15px;
}
.ph-menu > li > a::after { left: 15px; right: 15px; }
.ph-menu > li.menu-item-has-children > a { padding-right: 26px; }
.ph-menu .sub-menu a { font-size: .98rem; }

.ph-header .ph-wrap { min-height: 96px; }
.ph-header.is-stuck .ph-wrap { min-height: 76px; }
.ph-header-cta .ph-btn { font-size: .96rem; padding: 14px 24px; }
.ph-header-call { font-size: .92rem; }

@media (max-width: 1500px) { .ph-menu > li > a { font-size: 1.04rem; padding: 12px 13px; } }
@media (max-width: 1380px) { .ph-menu > li > a { font-size: 1rem;    padding: 12px 11px; } }
@media (max-width: 1260px) { .ph-menu > li > a { font-size: .95rem;  padding: 12px 9px;  } }
@media (max-width: 1140px) { .ph-menu > li > a { font-size: 1rem;    padding: 12px 12px; } }

/* ==========================================================================
   52. PAGE HEAD WITH A PHOTO BACKDROP
   ========================================================================== */

.ph-pagehead--photo { position: relative; }
.ph-pagehead--photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
  z-index: 0;
}
.ph-pagehead--photo::before { z-index: 1; }
.ph-pagehead--photo .ph-wrap { position: relative; z-index: 2; }

/* ==========================================================================
   53. BLOG
   ========================================================================== */

.ph-post-card { border-radius: var(--ph-radius); overflow: hidden; }
.ph-post-card-thumb { display: block; }

.ph-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ph-post-cat {
  display: inline-block;
  padding: 3px 9px;
  background: var(--ph-blue-tint);
  color: var(--ph-blue-ink);
  border-radius: 2px;
  font-size: .64rem;
  letter-spacing: .12em;
}
.ph-post-card h3 a { text-decoration: none; }
.ph-post-card .ph-link { margin-top: 4px; color: var(--ph-blue-ink); }

.ph-widget--cta {
  background: var(--ph-bg-alt);
  border: 1px solid var(--ph-line);
  border-top: 3px solid var(--ph-blue);
  border-radius: var(--ph-radius);
  padding: 26px 24px 28px;
}
.ph-widget--cta p { color: var(--ph-muted); font-size: .94rem; margin-bottom: 18px; }
.ph-widget--cta .ph-btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.ph-widget--cta .ph-btn:last-child { margin-bottom: 0; }

/* Reading column on single posts */
.ph-content { font-size: 1.06rem; line-height: 1.75; }
.ph-content h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.ph-content h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); }
.ph-content ul, .ph-content ol { padding-left: 1.3em; }
.ph-content li { margin-bottom: .5em; }
.ph-content img { border-radius: var(--ph-radius); }
.ph-content > *:first-child { margin-top: 0; }

/* ==========================================================================
   54. MOBILE MENU — rebuilt
   --------------------------------------------------------------------------
   The panel's list was being caught by a bare ".ph-menu { display:none }"
   rule meant only for the desktop bar, so nothing inside it rendered.
   Sub-menus are now a proper accordion with real touch targets.
   ========================================================================== */

.ph-mobile-panel {
  display: none;
  background: #fff;
  border-top: 1px solid var(--ph-line);
  padding: 8px var(--ph-gutter) 28px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ph-mobile-panel.is-open { display: block; }

.ph-mobile-panel .ph-menu {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ph-mobile-panel .ph-menu > li {
  position: relative;
  border-bottom: 1px solid var(--ph-line-soft);
}

.ph-mobile-panel .ph-menu > li > a {
  display: block;
  position: relative;
  z-index: 1;
  padding: 16px 46px 16px 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ph-navy);
  white-space: normal;
  border-bottom: 0;
}
.ph-mobile-panel .ph-menu > li > a::after,
.ph-mobile-panel .ph-menu > li > a::before { display: none; }
.ph-mobile-panel .ph-menu > li.current-menu-item > a { color: var(--ph-blue); }

/* Accordion toggle, added by JS next to each parent link */
.ph-submenu-toggle {
  position: absolute;
  z-index: 3;            /* the parent link is painted after it in the DOM */
  top: 4px; right: -6px;
  width: 44px; height: 48px;
  display: grid; place-items: center;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--ph-navy);
  -webkit-appearance: none; appearance: none;
}
.ph-submenu-toggle::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.ph-submenu-toggle[aria-expanded="true"] { color: var(--ph-blue); }
.ph-submenu-toggle[aria-expanded="true"]::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.ph-mobile-panel .sub-menu {
  position: static;
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  border-left: 2px solid var(--ph-blue-tint);
  border-radius: 0;
  background: transparent;
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  min-width: 0;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.22,.68,.35,1), margin .25s ease;
}
.ph-mobile-panel .menu-item-has-children.is-open > .sub-menu {
  max-height: 520px;
  margin-bottom: 14px;
}
.ph-mobile-panel .sub-menu li { border: 0; }
.ph-mobile-panel .sub-menu a {
  display: block;
  padding: 12px 0 12px 4px;
  font-size: .96rem;
  font-weight: 500;
  color: var(--ph-ink);
  white-space: normal;
}
.ph-mobile-panel .sub-menu a::before { display: none; }
.ph-mobile-panel .sub-menu a:hover { padding-left: 8px; color: var(--ph-blue); }

/* Contact actions at the foot of the panel */
.ph-mobile-actions { margin-top: 22px; display: grid; gap: 10px; }
.ph-mobile-actions .ph-btn { width: 100%; justify-content: center; margin: 0; }
.ph-mobile-contact {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ph-line-soft);
  display: grid;
  gap: 12px;
}
.ph-mobile-contact a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ph-navy);
}
.ph-mobile-contact .ph-ico { width: 18px; height: 18px; color: var(--ph-blue-ink); }

@media (min-width: 1025px) {
  .ph-mobile-panel { display: none !important; }
}

/* ==========================================================================
   55. MOBILE MENU — self-contained
   --------------------------------------------------------------------------
   The panel's list uses .ph-mobile-menu, not the desktop .ph-menu class, so
   nothing written for the desktop bar can reach it. Display is forced at every
   level in case a plugin or cached stylesheet still carries the old rules.
   ========================================================================== */

.ph-mobile-menu,
.ph-mobile-panel .ph-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-height: none !important;
  position: static !important;
  transform: none !important;
}

.ph-mobile-menu > li,
.ph-mobile-panel .ph-menu > li {
  display: block !important;
  position: relative;
  border-bottom: 1px solid var(--ph-line-soft);
  width: 100%;
}

.ph-mobile-menu > li > a,
.ph-mobile-panel .ph-menu > li > a {
  display: block !important;
  position: relative;
  z-index: 1;
  padding: 16px 46px 16px 0;
  font-family: var(--ph-body);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ph-navy);
  white-space: normal;
  border-bottom: 0;
  text-decoration: none;
}
.ph-mobile-menu > li > a::after,
.ph-mobile-menu > li > a::before { display: none !important; }
.ph-mobile-menu > li.current-menu-item > a { color: var(--ph-blue); }

/* Sub-menu: collapsed until its toggle is pressed */
.ph-mobile-menu .sub-menu,
.ph-mobile-panel .sub-menu {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  border: 0;
  border-left: 2px solid var(--ph-blue-tint);
  border-radius: 0;
  background: transparent;
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  min-width: 0;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.22,.68,.35,1), margin .25s ease;
}
.ph-mobile-menu .menu-item-has-children.is-open > .sub-menu,
.ph-mobile-panel .menu-item-has-children.is-open > .sub-menu {
  max-height: 640px;
  margin-bottom: 14px;
}
.ph-mobile-menu .sub-menu li { border: 0 !important; }
.ph-mobile-menu .sub-menu a,
.ph-mobile-panel .sub-menu a {
  display: block !important;
  padding: 12px 0 12px 4px;
  font-size: .96rem;
  font-weight: 500;
  color: var(--ph-ink);
  white-space: normal;
  text-decoration: none;
}
.ph-mobile-menu .sub-menu a::before { display: none !important; }

/* Panel itself */
.ph-mobile-panel {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ph-mobile-panel.is-open { display: block !important; }

@media (min-width: 1025px) {
  .ph-mobile-panel { display: none !important; }
}

/* ==========================================================================
   56. SEPARATED LAYOUTS — text beside images, never on top of them
   --------------------------------------------------------------------------
   Copy laid over a photograph is always a compromise: the picture has to be
   dimmed to keep the words readable, so neither reads well. Every hero and
   band now gives the text its own column and the photograph its own.
   ========================================================================== */

/* --- Hero slider --------------------------------------------------------- */
.ph-slider {
  background: linear-gradient(120deg, var(--ph-navy) 0%, var(--ph-navy-2) 100%);
  position: relative;
  overflow: hidden;
}
.ph-slider::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(90% 90% at 0% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 90% at 0% 0%, #000 10%, transparent 70%);
  pointer-events: none;
}

/* Slides stack in one grid cell, so the tallest defines the height and the
   section grows with its content instead of needing a fixed min-height. */
.ph-slider-track { display: grid; min-height: 0; }

.ph-slide {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  width: 100%;
}
.ph-slide::before, .ph-slide::after { content: none; }

.ph-slide .ph-wrap { width: 100%; max-width: 1400px; }

.ph-slide-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 60px;
  align-items: center;
  padding-block: 62px 104px;
}

/* Text column — plain, on the navy background. No panel, no scrim. */
.ph-slide-body {
  max-width: 560px;
  margin: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #C6D6E9;
}
.ph-slide-body h2 {
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: 18px;
  text-shadow: none;
}
.ph-slide-body p {
  font-size: 1.08rem;
  line-height: 1.62;
  color: #C6D6E9;
  max-width: 46ch;
  margin-bottom: 30px;
  text-shadow: none;
}

/* Image column — full brightness, in its own frame. */
.ph-slide-media {
  position: relative;
  border-radius: var(--ph-radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.75);
}
.ph-slide-media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3.4;
  object-fit: cover;
  filter: brightness(1.06) saturate(1.12);
}
.ph-js .ph-slide.is-active .ph-slide-media img { animation: ph-kenburns 5s ease-out forwards; }

/* Entrance */
.ph-js .ph-slide.is-active .ph-slide-body > * {
  opacity: 0;
  animation: ph-rise .42s cubic-bezier(.22,.68,.35,1) forwards;
}
.ph-js .ph-slide.is-active .ph-slide-media {
  opacity: 0;
  animation: ph-rise .55s cubic-bezier(.22,.68,.35,1) .12s forwards;
}

/* Arrows sit clear of the columns */
.ph-slider-arrow--prev { left: 12px; }
.ph-slider-arrow--next { right: 12px; }

@media (max-width: 1024px) {
  .ph-slide-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-block: 48px 96px;
  }
  .ph-slide-body { max-width: none; }
  .ph-slide-media img { aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  .ph-slide-grid { padding-block: 36px 92px; gap: 26px; }
  .ph-slide-body p { font-size: 1rem; }
}

/* --- Showcase band ------------------------------------------------------- */
.ph-showcase .ph-split-media img {
  border-radius: var(--ph-radius);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.7);
}
.ph-showcase p { color: #C6D6E9; font-size: 1.05rem; }

/* --- Page heads: photo beside the words, not behind them ----------------- */
.ph-pagehead--photo > img {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: auto;
  width: 44%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 1;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.ph-pagehead--photo .ph-wrap > * { max-width: 640px; }
.ph-pagehead--about > img { object-position: 70% center; }

@media (max-width: 1024px) {
  .ph-pagehead--photo > img { display: none; }
  .ph-pagehead--photo .ph-wrap > * { max-width: none; }
}

/* Equipment cards: the icon now sits beside the title, not over the photo */
.ph-equip-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ph-equip-head h3 { margin: 0; }
.ph-equip-badge {
  position: static;
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--ph-blue-tint);
  color: var(--ph-blue-ink);
  border-radius: var(--ph-radius);
  backdrop-filter: none;
  transition: background .25s ease, color .25s ease, transform .3s ease;
}
.ph-equip--photo:hover .ph-equip-badge {
  background: var(--ph-blue);
  color: #fff;
  transform: rotate(-6deg);
}
/* No gradient wash over the picture any more */
.ph-svc-media::after { content: none; }

/* Slider controls: paired at the foot, clear of the text column */
.ph-slider-foot .ph-wrap { max-width: 1400px; }

.ph-slider-arrow {
  position: absolute;
  top: auto;
  bottom: 26px;
  margin-top: 0;
  width: 44px; height: 44px;
  z-index: 7;
}
.ph-slider-arrow--prev { left: auto; right: calc(max(24px, (100vw - 1400px) / 2 + 24px) + 52px); }
.ph-slider-arrow--next { right: max(24px, calc((100vw - 1400px) / 2 + 24px)); }

.ph-slider-dots { padding-right: 130px; }

@media (max-width: 1024px) {
  .ph-slider-arrow { display: none; }
  .ph-slider-dots { padding-right: 0; }
}


/* ==========================================================================
   58. HERO REFINEMENT
   --------------------------------------------------------------------------
   Fixes from the live screenshot: a flat background, a text column that felt
   thin beside a heavy photograph, dead space under the copy, slider labels
   wrapping onto two lines and knocking the row out of alignment, and a washed
   out capability strip underneath.
   ========================================================================== */

/* Depth in the background instead of a flat wash */
.ph-slider {
  background:
    radial-gradient(900px 620px at 78% 18%, rgba(58,124,206,.30) 0%, transparent 62%),
    radial-gradient(700px 520px at 8% 92%, rgba(12,42,78,.85) 0%, transparent 68%),
    linear-gradient(125deg, #0F2947 0%, #16385F 46%, #1B4576 100%);
}
.ph-slider::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, rgba(8,22,40,.55));
  pointer-events: none;
  z-index: 1;
}
.ph-slide { z-index: 2; }
.ph-slider-foot { z-index: 7; }

/* Balance the two columns */
.ph-slide-grid {
  grid-template-columns: 1fr 1.06fr;
  gap: 64px;
  padding-block: 58px 92px;
  align-items: center;
}
.ph-slide-body { max-width: 540px; }
.ph-slide-body h2 { font-size: clamp(1.95rem, 3.3vw, 2.85rem); margin-bottom: 16px; }
.ph-slide-body p { font-size: 1.06rem; margin-bottom: 26px; max-width: 42ch; }

/* Three supporting points fill the space under the buttons */
.ph-slide-facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid;
  gap: 10px;
}
.ph-slide-facts li {
  position: relative;
  padding-left: 20px;
  font-size: .92rem;
  line-height: 1.45;
  color: #AFC4DE;
}
.ph-slide-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 2px;
  background: var(--ph-amber);
}

/* Photo: a touch taller, with a light edge so it sits on the navy properly */
.ph-slide-media {
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 80px -36px rgba(0,0,0,.85);
}
.ph-slide-media img { aspect-ratio: 4 / 3; }

/* Slider labels: one line each, so the row stays aligned */
.ph-slider-dot-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .68rem;
  letter-spacing: .12em;
}
.ph-slider-dot { max-width: 190px; }
.ph-slider-foot { padding-block: 40px 24px; }

/* The strip below the hero was pale grey and washed out — make it part of
   the hero instead of a separate light band. */
.ph-hero-strip {
  background: #0E2743;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 0;
}
.ph-hero-strip li {
  color: #B7CBE4;
  font-size: .72rem;
  letter-spacing: .16em;
}
.ph-hero-strip li::before { background: var(--ph-amber); width: 6px; height: 6px; }

@media (max-width: 1024px) {
  .ph-slide-grid { grid-template-columns: 1fr; gap: 30px; padding-block: 44px 96px; }
  .ph-slide-body { max-width: none; }
  .ph-slide-media img { aspect-ratio: 16 / 10; }
  .ph-slide-facts { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ph-slide-facts { margin-top: 24px; padding-top: 18px; }
  .ph-slide-facts li { font-size: .88rem; }
  .ph-slide-body p { max-width: none; }
}

/* Hero photographs are 16:10, matching the supplied source images */
.ph-slide-media img { aspect-ratio: 16 / 10; }

@media (max-width: 1024px) {
  .ph-slide-media img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   56. CLARITY & SIMPLICITY PASS
   ========================================================================== */
:root {
  --ph-section-y: 92px;
  --ph-radius: 10px;
  --ph-muted: #52647A;
  --ph-line: #D6E0EB;
  --ph-bg-alt: #F6F8FB;
}

body { font-size: 18px; line-height: 1.72; }

h1 { font-size: clamp(2.45rem, 4.5vw, 3.85rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.12; }
h3 { font-size: clamp(1.28rem, 1.7vw, 1.48rem); line-height: 1.3; }

.ph-head { max-width: 820px; margin-bottom: 52px; }
.ph-head p,
.ph-slide-body p,
.ph-pagehead .ph-hero-lead {
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  line-height: 1.68;
  max-width: 66ch;
}

.ph-eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .16em; }

.ph-btn {
  min-height: 52px;
  padding: 15px 28px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
}

.ph-svc,
.ph-equip,
.ph-step,
.ph-value,
.ph-route {
  border-radius: 10px;
  box-shadow: 0 10px 30px -24px rgba(19,48,79,.35);
}

.ph-svc-text,
.ph-equip p,
.ph-step p,
.ph-value p,
.ph-why p,
.ph-trustlist-text > span {
  font-size: 1rem;
  line-height: 1.65;
}

.ph-slide-body .ph-btn--ghost,
.ph-mobile-actions .ph-btn--ghost { display: none; }
.ph-btn-row:empty { display: none; }
.ph-cta .ph-btn-row { justify-content: center; margin-inline: auto; }

@media (max-width: 720px) {
  :root { --ph-section-y: 64px; --ph-gutter: 20px; }
  body { font-size: 17px; line-height: 1.68; }
  h1 { font-size: clamp(2.1rem, 11vw, 2.8rem); }
  h2 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .ph-head { margin-bottom: 36px; }
  .ph-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   59. IMAGE SYSTEM REFINEMENT
   Consistent crops, restrained colour grading and clearer visual hierarchy.
   ========================================================================== */
.ph-slide-media,
.ph-svc-media,
.ph-split-media,
.ph-vendor-media,
.ph-pagehead--photo {
  position: relative;
  overflow: hidden;
  background: #102A47;
  isolation: isolate;
}

.ph-slide-media::before,
.ph-svc-media::before,
.ph-split-media::before,
.ph-vendor-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,31,54,.04), rgba(10,31,54,.20)),
    linear-gradient(110deg, rgba(242,163,44,.08), transparent 42%);
  mix-blend-mode: multiply;
}

.ph-slide-media img,
.ph-svc-media img,
.ph-split-media img,
.ph-vendor-media img,
.ph-pagehead--photo > img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) contrast(1.08) brightness(.96);
  transition: transform .7s cubic-bezier(.22,.68,.35,1), filter .45s ease;
}

.ph-slide-media img { aspect-ratio: 16 / 10; }
.ph-svc-media img { aspect-ratio: 16 / 10; }
.ph-split-media img { aspect-ratio: 4 / 3; }
.ph-vendor-media img { aspect-ratio: 4 / 3; }

.ph-slide-media {
  border-radius: 12px;
  box-shadow: 0 34px 90px -38px rgba(0,0,0,.92);
}

.ph-svc-media,
.ph-split-media,
.ph-vendor-media {
  border-radius: 10px;
  box-shadow: 0 22px 54px -34px rgba(12,38,67,.62);
}

.ph-slide.is-active .ph-slide-media img {
  transform: scale(1.015);
}

.ph-svc:hover .ph-svc-media img,
.ph-split:hover .ph-split-media img,
.ph-vendor-media:hover img {
  transform: scale(1.035);
  filter: saturate(.96) contrast(1.1) brightness(1);
}

@media (prefers-reduced-motion: reduce) {
  .ph-slide-media img,
  .ph-svc-media img,
  .ph-split-media img,
  .ph-vendor-media img {
    transition: none;
    transform: none !important;
  }
}

@media (max-width: 720px) {
  .ph-slide-media,
  .ph-svc-media,
  .ph-split-media,
  .ph-vendor-media { border-radius: 8px; }
  .ph-split-media img,
  .ph-vendor-media img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   60. ELEMENTOR PAGE CONSISTENCY
   Equal image crops and card alignment across all marketplace service pages.
   ========================================================================== */
.elementor-widget-image-box {
  align-self: stretch;
  height: 100%;
}

.elementor-widget-image-box > .elementor-widget-container,
.elementor-widget-image-box .elementor-image-box-wrapper {
  height: 100%;
}

.elementor-widget-image-box .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.elementor-widget-image-box figure.elementor-image-box-img {
  width: 100% !important;
  margin: 0 0 22px !important;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #102A47;
}

.elementor-widget-image-box figure.elementor-image-box-img img {
  display: block;
  width: 100%;
  height: 230px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.06) brightness(1.02);
}

.elementor-widget-image-box .elementor-image-box-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding-inline: 24px;
  padding-bottom: 26px;
}

.elementor-widget-image-box .elementor-image-box-title {
  min-height: 2.7em;
  margin-top: 0;
}

.elementor-widget-image-box .elementor-image-box-description {
  margin-top: auto;
}

@media (max-width: 720px) {
  .elementor-widget-image-box figure.elementor-image-box-img img {
    height: 210px;
  }

  .elementor-widget-image-box .elementor-image-box-title {
    min-height: 0;
  }
}

/* Keep principal content images consistent across the redesigned pages. */
:is(
  .page-id-15,
  .page-id-24,
  .page-id-2795,
  .page-id-2796,
  .page-id-2797,
  .page-id-2798,
  .page-id-2799,
  .page-id-2800
) .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  filter: saturate(.94) contrast(1.06) brightness(1.03);
}

/* Reveal more of each page's unique hero photograph while preserving white-text contrast. */
:is(
  .page-id-15,
  .page-id-24,
  .page-id-2795,
  .page-id-2796,
  .page-id-2797,
  .page-id-2798,
  .page-id-2799,
  .page-id-2800
) .elementor > .e-con:first-child::before {
  opacity: .44 !important;
}

/* ==========================================================================
   61. EXECUTIVE INDUSTRIAL REFINEMENT
   A restrained premium layer: stronger hierarchy, depth and interaction.
   ========================================================================== */
:root {
  --ph-surface: #ffffff;
  --ph-surface-soft: #f4f7fa;
  --ph-line-soft: rgba(12, 38, 67, .12);
  --ph-shadow-sm: 0 10px 30px rgba(12, 38, 67, .08);
  --ph-shadow-lg: 0 28px 70px rgba(12, 38, 67, .16);
}

body {
  background:
    radial-gradient(circle at 7% 12%, rgba(0, 169, 173, .045), transparent 28rem),
    #ffffff;
}

.ph-header {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(12, 38, 67, .09);
  box-shadow: 0 10px 34px rgba(12, 38, 67, .07);
  backdrop-filter: blur(18px) saturate(140%);
}

.ph-logo-mark {
  filter: drop-shadow(0 8px 12px rgba(0, 127, 149, .18));
}

.ph-menu > li > a {
  letter-spacing: -.01em;
  font-weight: 600;
}

.ph-menu > li > a::after {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ph-blue), var(--ph-orange));
}

.ph-btn,
.elementor-button {
  border-radius: 8px !important;
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px rgba(0, 133, 151, .15);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.ph-btn--primary,
.elementor-button {
  background: linear-gradient(135deg, #00a9ad 0%, #008096 100%) !important;
}

.ph-btn:hover,
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 128, 150, .24);
}

.ph-section--alt,
.elementor-section-wrap > :nth-child(even) {
  background-color: var(--ph-surface-soft);
}

.ph-head h2,
.elementor-widget-heading h2 {
  letter-spacing: -.035em;
  text-wrap: balance;
}

.ph-head p,
.elementor-widget-text-editor {
  line-height: 1.75;
}

.ph-svc,
.ph-equip,
.ph-value,
.ph-step,
.elementor-widget-image-box > .elementor-widget-container {
  border: 1px solid var(--ph-line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: var(--ph-shadow-sm);
  transition: transform .3s cubic-bezier(.22,.68,.35,1), box-shadow .3s ease, border-color .3s ease;
}

.ph-svc:hover,
.ph-equip:hover,
.ph-value:hover,
.ph-step:hover,
.elementor-widget-image-box:hover > .elementor-widget-container {
  transform: translateY(-6px);
  border-color: rgba(0, 169, 173, .34);
  box-shadow: var(--ph-shadow-lg);
}

.elementor-widget-image-box figure.elementor-image-box-img {
  border-radius: 11px 11px 0 0;
}

.elementor-widget-image-box .elementor-image-box-title {
  letter-spacing: -.025em;
}

.ph-pagehead,
.elementor > .e-con:first-child {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16);
}

.ph-pagehead h1,
.elementor > .e-con:first-child h1 {
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .26);
}

.ph-footer {
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--ph-blue), var(--ph-orange), transparent 78%) 1;
}

@media (max-width: 720px) {
  .ph-header {
    backdrop-filter: blur(12px);
  }

  .ph-btn,
  .elementor-button {
    width: 100%;
    justify-content: center;
  }

  .ph-svc:hover,
  .ph-equip:hover,
  .ph-value:hover,
  .ph-step:hover,
  .elementor-widget-image-box:hover > .elementor-widget-container {
    transform: none;
  }
}


/* ==========================================================================
   62. NEXXIS-INSPIRED TECHNICAL REDESIGN
   A cinematic, angular industrial system adapted to Pharoniya + EquipRent.
   ========================================================================== */
:root {
  --ph-tech-navy: #071827;
  --ph-tech-ink: #0b2238;
  --ph-tech-slate: #132c42;
  --ph-tech-orange: #f28c28;
  --ph-tech-cyan: #00a9ad;
  --ph-tech-paper: #f3f6f8;
  --ph-tech-cut: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

body {
  color: var(--ph-tech-ink);
  background: #fff;
}

.ph-topbar {
  background: var(--ph-tech-orange);
  color: var(--ph-tech-navy);
  border: 0;
}

.ph-topbar a,
.ph-topbar-note {
  color: var(--ph-tech-navy) !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.ph-topbar svg { color: var(--ph-tech-navy); }

.ph-header {
  background: rgba(7, 24, 39, .97);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
}

.ph-header .ph-wrap { min-height: 88px; }

.ph-logo img { filter: brightness(0) invert(1); }

.ph-menu > li > a {
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.ph-menu > li > a::after {
  height: 3px;
  border-radius: 0;
  background: var(--ph-tech-orange);
}

.ph-menu .sub-menu {
  border: 0;
  border-top: 3px solid var(--ph-tech-orange);
  border-radius: 0;
  background: var(--ph-tech-navy);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.ph-menu .sub-menu a { color: rgba(255,255,255,.88); }
.ph-menu .sub-menu a:hover { color: #fff; background: rgba(255,255,255,.07); }

.ph-header-call { color: #fff; }
.ph-header-call small {
  color: rgba(255,255,255,.56);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ph-btn,
.elementor-button {
  min-height: 48px;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  padding-inline: 24px;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
  box-shadow: none;
}

.ph-btn--primary,
.elementor-button {
  color: var(--ph-tech-navy) !important;
  background: var(--ph-tech-orange) !important;
}

.ph-btn--primary:hover,
.elementor-button:hover {
  color: #fff !important;
  background: var(--ph-tech-cyan) !important;
}

.ph-btn--ghost {
  border-color: currentColor;
  background: transparent;
}

/* Cinematic home hero */
.home .ph-slider {
  min-height: 680px;
  background: var(--ph-tech-navy);
}

.home .ph-slider::before {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(7,24,39,.30), rgba(7,24,39,.02) 58%, rgba(7,24,39,.18)),
    linear-gradient(0deg, rgba(7,24,39,.60), transparent 42%);
  background-size: auto;
  mask-image: none;
  -webkit-mask-image: none;
}

.home .ph-slider-track { min-height: 680px; }
.home .ph-slide { min-height: 680px; }
.home .ph-slide .ph-wrap {
  position: relative;
  z-index: 4;
  max-width: 1440px;
}

.home .ph-slide-grid {
  display: flex;
  align-items: center;
  min-height: 680px;
  padding: 92px 24px 150px;
}

.home .ph-slide-media {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
}

.home .ph-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,24,39,.32), rgba(7,24,39,.03) 66%, rgba(7,24,39,.18));
}

.home .ph-slide-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.08) brightness(.82);
}

.home .ph-slide-body {
  position: relative;
  z-index: 5;
  width: min(610px, 58vw);
  max-width: none;
  padding: clamp(32px, 4.4vw, 60px);
  color: #415367;
  background: rgba(255,255,255,.97);
  border: 0;
  border-left: 6px solid var(--ph-tech-orange);
  border-radius: 0;
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
  clip-path: var(--ph-tech-cut);
}

.home .ph-slide-body .ph-eyebrow {
  color: #087c89;
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home .ph-slide-body h2 {
  color: var(--ph-tech-navy);
  font-size: clamp(2.35rem, 4.5vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-wrap: balance;
}

.home .ph-slide-body p {
  color: #4f6275;
  font-size: 1.04rem;
  line-height: 1.7;
}

.home .ph-slide-body .ph-facts {
  border-top: 1px solid #dbe2e7;
}

.home .ph-slide-body .ph-facts li {
  color: #263c50;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.home .ph-slider-arrow {
  z-index: 7;
  border-radius: 0;
  color: #fff;
  background: rgba(7,24,39,.76);
  border: 1px solid rgba(255,255,255,.28);
}

.home .ph-slider-footer {
  z-index: 7;
  color: #fff;
}

.home .ph-hero-strip {
  position: relative;
  z-index: 8;
  margin-top: -76px;
  background: rgba(7,24,39,.95);
  border-top: 1px solid rgba(255,255,255,.16);
}

.home .ph-hero-strip li {
  color: rgba(255,255,255,.76);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home .ph-hero-strip li::before { background: var(--ph-tech-orange); }

/* Technical editorial rhythm */
.home .ph-section { padding-block: clamp(76px, 8vw, 128px); }
.home .ph-section--alt { background: var(--ph-tech-paper); }
.home .ph-section--dark {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(0,169,173,.12), transparent 45%),
    var(--ph-tech-navy);
}

.home .ph-head { max-width: 820px; }
.home .ph-head--center { max-width: 860px; }

.home .ph-eyebrow {
  color: #07808d;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.home .ph-head h2,
.home .ph-split h2 {
  color: var(--ph-tech-navy);
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.home .ph-section--dark h2 { color: #fff; }

.home .ph-svc,
.home .ph-equip,
.home .ph-value,
.home .ph-step {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 16px 44px rgba(7,24,39,.09);
  clip-path: var(--ph-tech-cut);
}

.home .ph-svc::after,
.home .ph-equip::after,
.home .ph-step::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 4px;
  background: var(--ph-tech-orange);
}

.home .ph-svc:hover,
.home .ph-equip:hover,
.home .ph-value:hover,
.home .ph-step:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow: 0 28px 64px rgba(7,24,39,.18);
}

.home .ph-svc-media,
.home .ph-equip-media,
.home .ph-split-media,
.home .ph-vendor-media {
  border-radius: 0;
}

.home .ph-svc-media img,
.home .ph-equip-media img {
  filter: saturate(.82) contrast(1.1);
}

.home .ph-svc-title,
.home .ph-equip h3,
.home .ph-step h3 {
  color: var(--ph-tech-navy);
  font-weight: 800;
  letter-spacing: -.025em;
}

.home .ph-link {
  color: #087c89;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home .ph-link span { color: var(--ph-tech-orange); }

.home .ph-showcase .ph-split {
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

.home .ph-showcase .ph-split-media {
  box-shadow: 26px 26px 0 rgba(242,140,40,.96);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.home .ph-industry {
  min-height: 150px;
  border: 1px solid #d8e0e6;
  border-radius: 0;
  background: #fff;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.home .ph-industry:hover {
  color: #fff;
  background: var(--ph-tech-navy);
  transform: translateY(-5px);
}

.home .ph-step-no {
  color: #087c89;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .14em;
}

/* Inner-page continuity */
.ph-pagehead {
  background: var(--ph-tech-navy);
  border-bottom: 5px solid var(--ph-tech-orange);
}

.ph-pagehead h1 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: .98;
  text-transform: uppercase;
}

/* About page: a calmer, more refined headline scale. */
.page-id-15 .ph-pagehead h1 {
  font-size: clamp(2.15rem, 3.4vw, 3.65rem);
  line-height: 1.04;
  max-width: 16ch;
}

/* Vendor listing content: prevent the embedded Elementor layout from collapsing. */
.page-template-template-vendor #listing .ph-split {
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

.page-template-template-vendor #listing .ph-formpanel {
  width: 100%;
  max-width: none;
  padding: clamp(28px, 4vw, 52px);
}

.page-template-template-vendor #listing .ph-formpanel > .elementor {
  width: 100%;
}

.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c53 {
  display: none;
}

.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c59 {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 64px) !important;
  width: 100% !important;
}

.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c55,
.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c58 {
  width: 100% !important;
  max-width: none !important;
}

.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c61 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 24px !important;
  width: 100% !important;
}

.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c5c,
.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c5e,
.page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c60 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.page-template-template-vendor #listing .ph-formpanel .elementor-image-box-wrapper {
  height: 100%;
  padding: 22px;
}

.page-template-template-vendor #listing .ph-formpanel .elementor-image-box-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.page-template-template-vendor #listing .ph-formpanel h2 {
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1.12;
}

.page-template-template-vendor #listing .ph-formpanel h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.28;
}

.page-template-template-vendor #listing .ph-formpanel p {
  font-size: 1rem;
  line-height: 1.65;
}

.ph-vendor-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.ph-vendor-guide-card {
  overflow: hidden;
  min-width: 0;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(7, 24, 39, .08);
}

.ph-vendor-guide-card > img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.ph-vendor-guide-card > div {
  padding: 24px;
}

.ph-vendor-guide-card > div > span {
  display: block;
  margin-bottom: 10px;
  color: var(--ph-orange);
  font-family: var(--ph-mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.ph-vendor-guide-card h4 {
  margin: 0 0 10px;
  color: var(--ph-navy);
  font-size: 1.18rem;
  line-height: 1.3;
}

.ph-vendor-guide-card p {
  margin: 0;
  color: var(--ph-muted);
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.ph-vendor-guide-action {
  margin-top: 30px;
  justify-content: center;
}

@media (max-width: 860px) {
  .ph-vendor-guide-grid {
    grid-template-columns: 1fr;
  }

  .ph-vendor-guide-card > img {
    height: 230px;
  }

  .page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c59,
  .page-template-template-vendor #listing .ph-formpanel .elementor-element-00000c61 {
    grid-template-columns: 1fr !important;
  }

  .page-template-template-vendor #listing .ph-formpanel .elementor-image-box-img img {
    height: 220px;
  }
}

.ph-pagehead--photo > img {
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  filter: saturate(.85) contrast(1.1) brightness(.88);
}

.ph-footer {
  border-top: 5px solid var(--ph-tech-orange);
  border-image: none;
  background: var(--ph-tech-navy);
}

@media (max-width: 1024px) {
  .ph-header .ph-wrap { min-height: 76px; }
  .ph-burger span { background: #fff; }
  .ph-mobile-panel { background: #fff; }

  .home .ph-slider,
  .home .ph-slider-track,
  .home .ph-slide { min-height: 650px; }

  .home .ph-slide-grid {
    min-height: 650px;
    padding: 68px 28px 132px;
  }

  .home .ph-slide-body { width: min(630px, 82vw); }
  .home .ph-slide-media { display: block; }
}

@media (max-width: 720px) {
  .ph-topbar-note { display: none; }
  .ph-topbar-list { width: 100%; justify-content: center; gap: 16px; }
  .ph-topbar-list a:nth-child(3) { display: none; }

  .home .ph-slider,
  .home .ph-slider-track,
  .home .ph-slide { min-height: 720px; }

  .home .ph-slide-grid {
    min-height: 720px;
    padding: 46px 18px 128px;
    align-items: flex-end;
  }

  .home .ph-slide-body {
    width: 100%;
    padding: 28px 24px 32px;
    border-left-width: 4px;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  }

  .home .ph-slide-body h2 { font-size: clamp(2rem, 10.5vw, 3rem); }
  .home .ph-slide-body p { font-size: .96rem; line-height: 1.6; }
  .home .ph-slide-body .ph-facts { display: none; }
  .home .ph-slide-body .ph-btn-row { gap: 10px; }
  .home .ph-slide-body .ph-btn { width: 100%; }

  .home .ph-slider-arrow { display: none; }
  .home .ph-hero-strip { margin-top: -66px; overflow-x: auto; }
  .home .ph-hero-strip ul { width: max-content; padding-inline: 18px; }

  .home .ph-section { padding-block: 68px; }
  .home .ph-head h2,
  .home .ph-split h2 { font-size: clamp(2rem, 10vw, 2.85rem); }
  .home .ph-showcase .ph-split-media { box-shadow: 12px 12px 0 var(--ph-tech-orange); }
}


/* ==========================================================================
   63. ELEMENTOR HOME — TECHNICAL EDITORIAL COMPOSITION
   The public homepage is Elementor-authored; these rules carry the new system
   through its actual hero and five conversion-focused content bands.
   ========================================================================== */
.elementor-page-12 .ph-slider {
  position: relative;
  min-height: clamp(620px, 72vh, 780px);
  overflow: hidden;
  background: var(--ph-tech-navy);
}

.elementor-page-12 .ph-slide {
  position: absolute;
  inset: 0;
  min-height: clamp(620px, 72vh, 780px);
  overflow: hidden;
}

.elementor-page-12 .ph-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(1.12) brightness(.76);
}

.elementor-page-12 .ph-slide .ph-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,24,39,.25), rgba(7,24,39,.02) 60%, rgba(7,24,39,.32)),
    linear-gradient(0deg, rgba(7,24,39,.62), transparent 46%);
}

.elementor-page-12 .ph-slide .ph-copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: max(6vw, calc((100vw - 1240px) / 2));
  width: min(610px, 48vw);
  padding: clamp(34px, 4.4vw, 62px);
  color: #4c6072;
  background: rgba(255,255,255,.97);
  border-left: 6px solid var(--ph-tech-orange);
  box-shadow: 0 34px 90px rgba(0,0,0,.32);
  clip-path: var(--ph-tech-cut);
  transform: translateY(-50%);
}

.elementor-page-12 .ph-copy > span {
  display: block;
  margin-bottom: 18px;
  color: #087c89;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.elementor-page-12 .ph-copy h2 {
  max-width: 10ch;
  margin: 0 0 22px;
  color: var(--ph-tech-navy);
  font-family: "Archivo", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.9rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.elementor-page-12 .ph-copy p {
  max-width: 48ch;
  margin: 0 0 30px;
  color: #4c6072;
  font-size: 1.02rem;
  line-height: 1.72;
}

.elementor-page-12 .ph-copy > a {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 25px;
  color: var(--ph-tech-navy);
  background: var(--ph-tech-orange);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: color .25s ease, background .25s ease, transform .25s ease;
}

.elementor-page-12 .ph-copy > a:hover {
  color: #fff;
  background: var(--ph-tech-cyan);
  transform: translateY(-2px);
}

.elementor-page-12 .ph-arrow {
  z-index: 5;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 0;
  color: #fff;
  background: rgba(7,24,39,.76);
}

.elementor-page-12 .ph-dots {
  z-index: 5;
  bottom: 30px;
}

.elementor-page-12 .ph-dots button {
  width: 44px;
  height: 4px;
  border-radius: 0;
  background: rgba(255,255,255,.46);
}

.elementor-page-12 .ph-dots button.active,
.elementor-page-12 .ph-dots button.is-active {
  background: var(--ph-tech-orange);
}

/* Elementor content bands */
.elementor-page-12 .elementor-element-0000001b,
.elementor-page-12 .elementor-element-0000001e,
.elementor-page-12 .elementor-element-00000027,
.elementor-page-12 .elementor-element-0000002b {
  position: relative;
  padding-block: clamp(78px, 9vw, 132px);
}

.elementor-page-12 .elementor-element-0000001b {
  background: #fff;
}

.elementor-page-12 .elementor-element-0000001b::before {
  content: "EQUIPRENT / MARKETPLACE";
  position: absolute;
  top: 42px;
  left: max(24px, calc((100vw - 1240px) / 2));
  color: #087c89;
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.elementor-page-12 .elementor-element-0000001b .e-con-inner {
  gap: clamp(38px, 6vw, 86px);
  align-items: center;
}

.elementor-page-12 .elementor-element-00000014 img {
  width: 100%;
  border-radius: 0;
  box-shadow: 22px 22px 0 var(--ph-tech-orange);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  filter: saturate(.88) contrast(1.08);
}

.elementor-page-12 .elementor-widget-heading h2,
.elementor-page-12 .elementor-widget-heading h3 {
  color: var(--ph-tech-navy);
  font-family: "Archivo", sans-serif;
  font-size: clamp(2.05rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.elementor-page-12 .elementor-widget-text-editor {
  color: #526476;
  font-size: 1rem;
  line-height: 1.78;
}

.elementor-page-12 .elementor-element-0000001e {
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(0,169,173,.11), transparent 48%),
    var(--ph-tech-navy);
}

.elementor-page-12 .elementor-element-0000001e::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.elementor-page-12 .elementor-element-0000001e .e-con-inner {
  position: relative;
  z-index: 2;
}

.elementor-page-12 .elementor-element-0000001e h2,
.elementor-page-12 .elementor-element-0000001e .elementor-widget-text-editor {
  color: #fff;
}

.elementor-page-12 .elementor-element-0000001e .elementor-widget-text-editor {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.88rem, 1.5vw, 1.05rem);
  letter-spacing: .035em;
  line-height: 2.1;
}

.elementor-page-12 .elementor-element-00000027 {
  background: var(--ph-tech-paper);
}

.elementor-page-12 .elementor-element-00000027::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(24px, calc((100vw - 1240px) / 2));
  width: 120px;
  height: 6px;
  background: var(--ph-tech-orange);
}

.elementor-page-12 .elementor-widget-image-box > .elementor-widget-container {
  overflow: hidden;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 18px 52px rgba(7,24,39,.11);
  clip-path: var(--ph-tech-cut);
}

.elementor-page-12 .elementor-widget-image-box figure.elementor-image-box-img {
  margin: 0 !important;
  border-radius: 0;
}

.elementor-page-12 .elementor-widget-image-box figure.elementor-image-box-img img {
  height: 265px;
  filter: saturate(.82) contrast(1.1);
}

.elementor-page-12 .elementor-widget-image-box .elementor-image-box-content {
  padding: 30px 32px 36px;
}

.elementor-page-12 .elementor-widget-image-box .elementor-image-box-title {
  min-height: 0;
  color: var(--ph-tech-navy);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.elementor-page-12 .elementor-element-0000002b {
  border-top: 6px solid var(--ph-tech-orange);
  background:
    linear-gradient(135deg, rgba(0,169,173,.13), transparent 48%),
    var(--ph-tech-navy);
}

.elementor-page-12 .elementor-element-0000002b h2,
.elementor-page-12 .elementor-element-0000002b .elementor-widget-text-editor {
  color: #fff;
}

.elementor-page-12 .elementor-element-0000002b .elementor-widget-heading h2 {
  max-width: 15ch;
}

@media (max-width: 1024px) {
  .elementor-page-12 .ph-slide .ph-copy {
    left: 5vw;
    width: min(620px, 78vw);
  }
}

@media (max-width: 720px) {
  .elementor-page-12 .ph-slider,
  .elementor-page-12 .ph-slide {
    min-height: 720px;
  }

  .elementor-page-12 .ph-slide > img {
    object-position: 62% center;
  }

  .elementor-page-12 .ph-slide .ph-copy {
    top: auto;
    right: 18px;
    bottom: 76px;
    left: 18px;
    width: auto;
    padding: 28px 24px 32px;
    border-left-width: 4px;
    transform: none;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  }

  .elementor-page-12 .ph-copy > span { margin-bottom: 12px; }
  .elementor-page-12 .ph-copy h2 { margin-bottom: 16px; font-size: clamp(2rem, 10.5vw, 3.1rem); }
  .elementor-page-12 .ph-copy p { margin-bottom: 22px; font-size: .94rem; line-height: 1.58; }
  .elementor-page-12 .ph-copy > a { width: 100%; justify-content: center; }
  .elementor-page-12 .ph-arrow { display: none; }
  .elementor-page-12 .ph-dots { bottom: 28px; }

  .elementor-page-12 .elementor-element-0000001b,
  .elementor-page-12 .elementor-element-0000001e,
  .elementor-page-12 .elementor-element-00000027,
  .elementor-page-12 .elementor-element-0000002b {
    padding-block: 68px;
  }

  .elementor-page-12 .elementor-element-0000001b::before {
    top: 28px;
    left: 20px;
  }

  .elementor-page-12 .elementor-element-00000014 img {
    box-shadow: 10px 10px 0 var(--ph-tech-orange);
  }

  .elementor-page-12 .elementor-widget-heading h2,
  .elementor-page-12 .elementor-widget-heading h3 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .elementor-page-12 .elementor-widget-image-box figure.elementor-image-box-img img {
    height: 220px;
  }
}

/* Final QA hardening */
.elementor-page-12 .elementor-element-0000001b,
.elementor-page-12 .elementor-element-0000001e,
.elementor-page-12 .elementor-element-00000027,
.elementor-page-12 .elementor-element-0000002b {
  overflow: hidden;
}

.elementor-page-12 .elementor-element-0000001e {
  background:
    linear-gradient(120deg, rgba(0,169,173,.11), transparent 48%),
    var(--ph-tech-navy) !important;
}

.elementor-page-12 .elementor-element-0000002b {
  background:
    linear-gradient(135deg, rgba(0,169,173,.13), transparent 48%),
    var(--ph-tech-navy) !important;
}


/* ==========================================================================
   64. HOME SLIDER TYPOGRAPHY REFINEMENT
   Preserve the original full-image slider; improve clarity and hierarchy only.
   ========================================================================== */
.elementor-page-12 .ph-slide .ph-shade {
  background:
    linear-gradient(90deg, rgba(5,18,30,.88) 0%, rgba(5,18,30,.66) 37%, rgba(5,18,30,.18) 68%, rgba(5,18,30,.08) 100%),
    linear-gradient(0deg, rgba(5,18,30,.52), transparent 52%);
}

.elementor-page-12 .ph-slide .ph-copy {
  top: 50%;
  left: max(7vw, calc((100vw - 1220px) / 2));
  width: min(610px, 48vw);
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
  transform: translateY(-50%);
}

.elementor-page-12 .ph-copy > span {
  margin-bottom: 18px;
  color: #52d7dc;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.elementor-page-12 .ph-copy h2 {
  max-width: 11ch;
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(2.8rem, 5.2vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow: 0 4px 26px rgba(0,0,0,.38);
}

.elementor-page-12 .ph-copy p {
  max-width: 48ch;
  margin-bottom: 30px;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 500;
  line-height: 1.68;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

.ph-header .ph-menu > li > a {
  color: #ffffff !important;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0,0,0,.2);
}

.ph-header .ph-menu > li > a:hover,
.ph-header .ph-menu > li.current-menu-item > a,
.ph-header .ph-menu > li.current-menu-ancestor > a {
  color: #fff !important;
}

.ph-logo,
.ph-logo-text,
.ph-logo-mark {
  color: #fff !important;
}

.ph-logo svg,
.ph-logo svg * {
  fill: currentColor;
}

@media (max-width: 720px) {
  .elementor-page-12 .ph-slide .ph-shade {
    background:
      linear-gradient(0deg, rgba(5,18,30,.9) 0%, rgba(5,18,30,.58) 62%, rgba(5,18,30,.15) 100%);
  }

  .elementor-page-12 .ph-slide .ph-copy {
    top: auto;
    right: 24px;
    bottom: 92px;
    left: 24px;
    width: auto;
    padding: 0;
    border: 0;
    transform: none;
    clip-path: none;
  }

  .elementor-page-12 .ph-copy h2 {
    font-size: clamp(2.35rem, 11vw, 3.2rem);
  }

  .elementor-page-12 .ph-copy p {
    font-size: 1rem;
    line-height: 1.58;
  }
}


/* ==========================================================================
   65. CONTACT HERO CONTRAST
   Darker typography against the light industrial contact photograph.
   ========================================================================== */
.page-id-21 .ph-pagehead--photo .ph-breadcrumb,
.page-id-21 .ph-pagehead--photo .ph-breadcrumb a {
  color: #087c89 !important;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(255,255,255,.7);
}

.page-id-21 .ph-pagehead--photo h1 {
  color: #071827 !important;
  text-shadow: 0 2px 12px rgba(255,255,255,.72);
}

.page-id-21 .ph-pagehead--photo .ph-hero-lead {
  color: #173a57 !important;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  line-height: 1.65;
  text-shadow: 0 1px 8px rgba(255,255,255,.72);
}

/* ==========================================================================
   66. HOMEPAGE BENEFIT ALIGNMENT + SERVICE PAGE READABILITY
   Keeps the two marketplace cards beside the introduction without overflow.
   ========================================================================== */
.elementor-page-12 .elementor-element-00000026 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(240px, 1fr)) !important;
  align-items: stretch !important;
  gap: 24px !important;
}

.elementor-page-12 .elementor-element-00000021,
.elementor-page-12 .elementor-element-00000023,
.elementor-page-12 .elementor-element-00000025 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100%;
  flex: none !important;
}

.elementor-page-12 .elementor-element-00000021 {
  justify-content: center !important;
}

.elementor-page-12 .elementor-element-00000023 > .elementor-element,
.elementor-page-12 .elementor-element-00000025 > .elementor-element {
  width: 100%;
}

.ph-grid--4 {
  align-items: stretch;
}

.ph-step {
  height: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 1024px) {
  .elementor-page-12 .elementor-element-00000026 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .elementor-page-12 .elementor-element-00000021 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .elementor-page-12 .elementor-element-00000026 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .elementor-page-12 .elementor-element-00000021 {
    grid-column: auto;
  }
}