/* 91 Phila styles, layered on top of the Dojeen Webflow template.
   - Header: transparent over the first (dark) section of a page, white once the page scrolls.
   - Home hero: layout ported from the Zinzira template (zz- classes, so they never clash with Dojeen's).
   - Everything else: phila- components shared by every page. */

:root {
  --phila-pink: #eb008d;
  --phila-pink-dark: #c4007a;
  --phila-pink-soft: #fdeaf5;
  --phila-pink-text: #d6007f; /* brand pink, a shade deeper, for small text on light backgrounds (passes WCAG AA) */
  --phila-ink: #141414;
  --phila-text: #3b3b3b;
  --phila-muted: #6b6b6b;
  --phila-line: #e5e8ec;
  --phila-field: #d5d8dc;
  --phila-alt: #f6f6f4;
  --phila-dark: #1d1d1d;
  --phila-wa: #25d366;
  --phila-error: #d0473e;
  --phila-radius: 10px;
  --phila-ease: cubic-bezier(.2, .7, .2, 1);
  --phila-head-font: var(--_font-family---font-famity-heading);
  --phila-header-h: 97px; /* real values are set by the header script */
  --phila-topbar-h: 34px;
}
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================ header */
.header { transition: transform .45s var(--phila-ease), background-color .3s ease; }
.header.is-scrolled { transform: translateY(calc(-1 * var(--phila-topbar-h))); }
.header.is-hidden { transform: translateY(-100%); }
.header-main { transition: background-color .3s ease, border-color .3s ease; }
.header-top-bar { height: 34px; }
.header-top-banner-text { font-size: 13px; }
.navbar-container { padding-top: 12px; padding-bottom: 12px; }
.header-logo { max-width: 150px; } /* the pink logo from 91phila.com; it reads on the white header and on the dark hero */
.tb-short { display: none; }

/* transparent while the page sits at the top of a dark first section */
.header.is-clear, .header.is-clear .header-main { background-color: transparent; }
.header.is-clear .header-main { border-bottom-color: rgba(255, 255, 255, .18); }

/* the page you are on */
.header-nav-link.w--current .header-nav-link-line,
.header-nav-dropdown.is-current-parent .header-nav-link-line { width: 100% !important; transform: none !important; opacity: 1 !important; }
.nav-dropdown-link-block.w--current { text-decoration: none; }
.nav-dropdown-link-block.w--current .nav-dropdown-shape { background-color: var(--phila-pink); }

@media screen and (min-width: 992px) {
  .header-middle { flex: none; } /* the logo kept its full width instead of shrinking for the menu's max-content */
  /* the dropdowns sat ~2px higher than plain links: inline-block wrapper + inline-flex toggle left a baseline gap */
  .header-nav-dropdown, .header-nav-list-item > .header-nav-link { display: block; }
  .header-nav-dropdown-toggle { display: flex; }
  .header-nav-menu-list { grid-column-gap: 28px; grid-row-gap: 28px; }
  .nav-menu-inner { grid-column-gap: 32px; grid-row-gap: 32px; }
  .header-nav-link-text, .header-dropdown-text { font-size: 15px; white-space: nowrap; }
  .header-right-side .primary-button.is-small { padding: 10px 20px; font-size: 14px; white-space: nowrap; }
  .header-nav-link-text, .header-dropdown-text, .header-nav-link-line { transition: color .3s ease, background-color .3s ease; }
  .header.is-clear .header-nav-link,
  .header.is-clear .header-nav-link-text,
  .header.is-clear .header-dropdown-text,
  .header.is-clear .header-nav-dropdown-toggle { color: #fff; }
  .header.is-clear .header-nav-link-line { background-color: #fff; }
  .header.is-clear .link-icon path { fill: #fff; }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  /* small laptops / tablets in landscape: tighter menu so "OEM | Custom Design" stays on one line */
  .header-nav-menu-list { grid-column-gap: 18px; grid-row-gap: 18px; }
  .nav-menu-inner { grid-column-gap: 22px; grid-row-gap: 22px; }
  .header-nav-link-text, .header-dropdown-text { font-size: 14px; }
  .header-logo { max-width: 132px; }
}
@media screen and (min-width: 1920px) {
  .nav-menu-inner { grid-column-gap: 48px; grid-row-gap: 48px; }
}
@media screen and (max-width: 991px) {
  /* Dojeen's drawer colour points at a deleted variable, so it rendered transparent */
  .nav-menu-wrapper { background-color: #fff; }
  .header-right-side { margin-top: 24px; }
  .navbar-container { padding-top: 10px; padding-bottom: 10px; }
  .menu-button { transition: background-color .3s ease, border-color .3s ease; }
  .header.is-clear .menu-button { background-color: transparent; border-color: rgba(255, 255, 255, .7); }
}
@media screen and (max-width: 767px) {
  .tb-long { display: none; }
  .tb-short { display: inline; }
}
@media screen and (max-width: 479px) {
  .header-logo-link { max-width: none; } /* Dojeen caps the link at 100px on phones */
  .header-logo { max-width: 128px; }
}

/* pages without a dark first section (product pages) start below the header */
.phila-solid .main-wrapper { padding-top: var(--phila-header-h); }

/* ================================================================ buttons and links */
.button-icon { display: flex; flex: none; width: 18px; height: 18px; }
.button-icon svg { width: 100%; height: 100%; }
.primary-button.is-brand { background-color: var(--phila-pink); border-color: var(--phila-pink); color: #fff; }
.primary-button.is-brand:hover { color: var(--phila-ink); }
.secondary-button.is-on-dark { border-color: rgba(255, 255, 255, .85); color: #fff; }
.secondary-button.is-on-dark .button-bg.secondary { background-color: #fff; }
.secondary-button.is-on-dark:hover { color: var(--phila-ink); }
.phila-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.phila-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
  color: var(--phila-ink); font-weight: 600; text-decoration: none;
}
.phila-link.is-sm { padding-bottom: 0; border-bottom-color: transparent; font-size: 14px; }
.phila-link-icon { display: inline-flex; flex: none; width: 18px; height: 18px; transition: transform .3s ease; }
.phila-link-icon svg { width: 100%; height: 100%; }
.phila-link:hover .phila-link-icon, .phila-card:hover .phila-link-icon, .phila-industry:hover .phila-link-icon { transform: translateX(4px); }

.phila-wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 100px;
  background-color: var(--phila-ink); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.1; text-decoration: none;
  transition: background-color .3s ease;
}
.phila-wa-btn:hover { background-color: var(--phila-pink); color: #fff; }
.phila-wa-btn .button-icon { width: 16px; height: 16px; }
.phila-wa-btn.is-lg { width: 100%; padding: 18px 28px; background-color: var(--phila-pink); font-size: 17px; }
.phila-wa-btn.is-lg:hover { background-color: var(--phila-pink-dark); }
.phila-wa-btn.is-lg .button-icon { width: 20px; height: 20px; }

/* ================================================================ type and sections */
.phila-section { position: relative; padding-top: var(--section-gap); padding-bottom: var(--section-gap); background-color: #fff; }
.phila-section.is-alt { background-color: var(--phila-alt); }
.phila-section.is-dark { background-color: var(--phila-dark); }
.phila-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  color: var(--phila-pink-text);
  font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
}
.phila-eyebrow::before { content: ""; flex: none; width: 22px; height: 2px; background-color: currentColor; }
.phila-eyebrow.is-light, .is-dark .phila-eyebrow { color: #fff; }
.phila-eyebrow.is-light::before, .is-dark .phila-eyebrow::before { background-color: var(--phila-pink); }
.phila-h2 {
  margin: 0;
  color: var(--phila-ink);
  font-family: var(--phila-head-font); font-size: clamp(30px, 3.3vw, 50px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em;
}
.phila-h2.is-light, .is-dark .phila-h2 { color: #fff; }
.phila-h3 {
  margin: 0;
  color: var(--phila-ink);
  font-family: var(--phila-head-font); font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
}
.phila-lead { margin: 0; color: var(--phila-text); font-size: 18px; line-height: 1.7; }
.phila-lead.is-light, .is-dark .phila-lead { color: rgba(255, 255, 255, .74); }
.phila-text { margin: 0; color: var(--phila-text); font-size: 16px; line-height: 1.75; }

.phila-head { max-width: 780px; margin-bottom: 56px; }
.phila-head .phila-lead { margin-top: 20px; }
.phila-head .phila-btn-row { margin-top: 28px; }
.phila-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.phila-head.is-center .phila-eyebrow { justify-content: center; }
.phila-head.is-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 24px 80px;
  max-width: none;
}
.phila-head.is-split .phila-head-side .phila-lead { margin-top: 0; }
.phila-head-side { display: flex; flex-direction: column; align-items: flex-start; }
.phila-reviews-section .phila-head-side { align-items: flex-end; }

/* ================================================================ home hero (Zinzira layout) */
.home-hero-main.zz-hero-host { padding-top: 0; padding-bottom: 0; background-color: var(--phila-ink); }
.zz-hero-section {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #5d5f5a;
}
.zz-hero-bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.6) saturate(.85);
}
.zz-hero-people {
  position: absolute; z-index: -2;
  right: max(30px, calc((100vw - 1500px) / 2 + 30px));
  bottom: 0;
  width: auto; height: 64%;
  /* stays clear of the title and buttons: container width minus the ~640px the buttons need */
  max-width: calc(min(100vw, 1500px) - 700px);
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35));
}
.zz-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, 0) 26%),
    linear-gradient(90deg, rgba(14, 14, 14, .74) 0%, rgba(14, 14, 14, .42) 40%, rgba(14, 14, 14, 0) 70%),
    linear-gradient(0deg, rgba(14, 14, 14, .5) 0%, rgba(14, 14, 14, 0) 34%);
}
.zz-hero-layout {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
  /* one screen tall, but it grows with its content: a fixed height cut the buttons off on short landscape screens (tablets) */
  min-height: 620px; min-height: clamp(620px, 100vh, 1100px); min-height: clamp(620px, 100svh, 1100px);
  padding-top: calc(var(--phila-header-h) + 44px); padding-bottom: 56px;
}
.zz-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.zz-hero-content-left { width: 100%; max-width: 380px; }
.zz-hero-small-text-wrap { margin-bottom: 12px; }
.zz-hero-small-text { margin: 0; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.5; }
.zz-stars { margin-right: 8px; color: #fbbc04; letter-spacing: 2px; }
.zz-hero-text { /* a <blockquote>: the template gives those a grey box and centred text */
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left;
  font-family: var(--phila-head-font);
  color: #fff; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
}
.zz-hero-quote-author { margin: 10px 0 0; color: rgba(255, 255, 255, .7); font-size: 14px; text-align: left; }
.zz-hero-content-right { flex: none; }
.zz-hero-product-wrap { width: 180px; }
.zz-hero-product { display: block; color: #fff; text-decoration: none; }
.zz-hero-product-thumb-wrap { display: block; margin-bottom: 12px; overflow: hidden; border-radius: 6px; }
.zz-hero-product-thumb { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .6s ease; }
.zz-hero-product:hover .zz-hero-product-thumb { transform: scale(1.05); }
.zz-hero-product-title-wrap {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.25;
}
.zz-hero-product-title-icon-wrap { display: flex; flex: none; width: 16px; height: 16px; overflow: hidden; }
.zz-hero-product-title-icon { display: flex; flex: none; width: 16px; transition: transform .3s ease; }
.zz-hero-product-title-icon svg { width: 100%; height: auto; }
.zz-hero-product:hover .zz-hero-product-title-icon { transform: translateX(3px); }
.zz-hero-product-price { display: block; margin-top: 4px; color: rgba(255, 255, 255, .7); font-size: 12px; }

/* rotators: the review quote and the ready-stock product slide to the next one together */
.zz-rotator { display: grid; }
.zz-rotator > [data-rotate-item] {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden; transform: translateX(22px);
  transition: opacity .45s ease, transform .6s var(--phila-ease), visibility 0s linear .6s;
}
.zz-rotator > [data-rotate-item].is-leaving { transform: translateX(-22px); }
.zz-rotator > [data-rotate-item].is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s ease .15s, transform .7s var(--phila-ease) .15s, visibility 0s;
}
.zz-bars { display: flex; gap: 4px; margin-top: 8px; }
.zz-bar { position: relative; width: 26px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.zz-bar::before, .zz-bar::after { content: ""; position: absolute; left: 0; top: 10px; height: 3px; border-radius: 2px; }
.zz-bar::before { right: 0; background-color: rgba(255, 255, 255, .28); }
.zz-bar::after { width: 0; background-color: #fff; }
.zz-bar.is-active::after { animation: zz-fill var(--zz-delay, 5s) linear forwards; }
.zz-rotate.is-held .zz-bar.is-active::after { animation-play-state: paused; }
.zz-bar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
@keyframes zz-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .zz-rotator > [data-rotate-item], .zz-rotator > [data-rotate-item].is-leaving { transform: none; }
}
.zz-hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.zz-hero-title-wrap { margin-bottom: 28px; }
.zz-hero-title {
  max-width: 11em;
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 4.4vw, 64px); font-weight: 600; line-height: 1.04; letter-spacing: -.04em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .2);
}
.zz-hero-btn-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.zz-hero-btn-wrap .primary-button, .zz-hero-btn-wrap .secondary-button { padding: 16px 28px; font-size: 16px; }
@media screen and (min-width: 1200px) and (max-height: 820px) {
  /* short landscape screens (tablets, small laptops): tighter spacing, a smaller product card and a title sized to the
     screen height, so the title and both buttons stay on the first screen */
  .zz-hero-layout { gap: 24px; padding-top: calc(var(--phila-header-h) + 24px); padding-bottom: 40px; }
  .zz-hero-product-wrap { width: 140px; }
  .zz-hero-title { font-size: clamp(40px, min(4.4vw, 7.8vh), 64px); }
  .zz-hero-title-wrap { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .zz-hero-bg { animation: zz-zoom 1.6s var(--phila-ease) both; }
  .zz-hero-people { animation: zz-up 1.1s .15s var(--phila-ease) both; }
  .zz-hero-content-left, .zz-hero-product-wrap, .zz-hero-title, .zz-hero-btn-wrap { animation: zz-up .9s var(--phila-ease) both; }
  .zz-hero-content-left { animation-delay: .25s; }
  .zz-hero-product-wrap { animation-delay: .35s; }
  .zz-hero-title { animation-delay: .45s; }
  .zz-hero-btn-wrap { animation-delay: .6s; }
}
@keyframes zz-zoom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes zz-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ================================================================ inner page hero */
.phila-page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(780px, 88vh);
  padding-top: calc(var(--phila-header-h) + 72px); padding-bottom: 84px;
  background-color: var(--phila-dark);
}
.phila-page-hero.is-short { min-height: min(580px, 72vh); }
.phila-page-hero > .w-container { width: 100%; }
.phila-page-hero-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.phila-page-hero-people {
  position: absolute; z-index: -2;
  right: max(30px, calc((100vw - 1500px) / 2 + 30px)); bottom: 0;
  width: auto; height: 80%; max-width: 50%;
  object-fit: contain; object-position: right bottom;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35));
}
.phila-page-hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 14, 14, .6) 0%, rgba(14, 14, 14, 0) 30%),
    linear-gradient(90deg, rgba(14, 14, 14, .84) 0%, rgba(14, 14, 14, .58) 45%, rgba(14, 14, 14, .18) 100%),
    linear-gradient(0deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, 0) 45%);
}
.phila-page-hero-inner { max-width: 940px; }
.phila-page-hero.has-people .phila-page-hero-inner { max-width: min(640px, 46vw); } /* keeps clear of the people photo */
.phila-page-hero.has-people .phila-page-hero-title { font-size: clamp(36px, 3.8vw, 56px); }
.phila-page-hero-title {
  margin: 0;
  color: #fff;
  font-family: var(--phila-head-font); font-size: clamp(38px, 4.6vw, 68px); font-weight: 600; line-height: 1.05; letter-spacing: -.035em;
}
.phila-page-hero.is-short .phila-page-hero-title { font-size: clamp(36px, 4vw, 60px); }
.phila-page-hero-text { max-width: 660px; margin: 22px 0 0; color: rgba(255, 255, 255, .8); font-size: 18px; line-height: 1.65; }
.phila-page-hero-text strong { color: #fff; font-weight: 600; }
.phila-page-hero .phila-btn-row { margin-top: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .phila-page-hero-bg { animation: zz-zoom 1.6s var(--phila-ease) both; }
  .phila-page-hero-people { animation: zz-up 1.1s .15s var(--phila-ease) both; }
  .phila-page-hero-inner > * { animation: zz-up .9s var(--phila-ease) both; }
  .phila-page-hero-inner > :nth-child(2) { animation-delay: .1s; }
  .phila-page-hero-inner > :nth-child(3) { animation-delay: .2s; }
  .phila-page-hero-inner > :nth-child(4) { animation-delay: .3s; }
  .phila-page-hero-inner > :nth-child(5) { animation-delay: .4s; }
}

.phila-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-bottom: 26px;
  color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.5;
}
.phila-breadcrumb a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.phila-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.phila-breadcrumb .sep { opacity: .55; }
.phila-breadcrumb [aria-current] { color: #fff; }
.phila-breadcrumb.is-dark { color: var(--phila-muted); }
.phila-breadcrumb.is-dark a { color: var(--phila-text); }
.phila-breadcrumb.is-dark a:hover { color: var(--phila-ink); }
.phila-breadcrumb.is-dark [aria-current] { color: var(--phila-ink); }

/* ================================================================ home: clients, about, what we do */
.phila-intro { padding-bottom: var(--section-gap); background-color: var(--_color---neutral-100); }
.phila-clients { border-bottom: 1px solid var(--phila-line); }
.phila-clients-inner { display: flex; align-items: center; gap: 48px; padding: 30px 0; }
.phila-clients-label { flex: none; max-width: 160px; margin: 0; color: var(--phila-text); font-size: 14px; line-height: 1.5; }
.phila-clients-logos { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 36px; }
.phila-client-logo { width: auto; height: 44px; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s ease, opacity .3s ease; }
.phila-client-logo:hover { filter: none; opacity: 1; }

/* authorised distributor strip, as on 91phila.com: heading left, brand tiles right (2 columns on phones) */
.phila-section.phila-distributors { padding-top: 88px; padding-bottom: 88px; }
.phila-distributors-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); align-items: center; gap: 32px 72px; }
.phila-distributors .phila-head { margin-bottom: 0; }
.phila-distributor-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.phila-distributor {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 18px;
  border: 1px solid var(--phila-line); border-radius: var(--phila-radius);
  background-color: #fff;
}
.phila-distributor.is-solid { border-color: var(--tile-bg); background-color: var(--tile-bg); } /* logos printed on a dark square */
.phila-distributor img { display: block; width: var(--logo-w); max-width: 100%; height: auto; }
@media screen and (max-width: 991px) {
  .phila-section.phila-distributors { padding-top: 64px; padding-bottom: 64px; }
  .phila-distributors-inner { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 479px) {
  .phila-section.phila-distributors { padding-top: 48px; padding-bottom: 48px; }
  .phila-distributor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .phila-distributor { min-height: 88px; padding: 14px; }
  .phila-distributor img { width: calc(var(--logo-w) * .8); }
}

/* intro: heading left, about text + link right, straight above the three cards */
.phila-intro-head { padding-top: 88px; }
.phila-intro-head .phila-head { margin-bottom: 44px; }
.phila-intro-head .phila-h2 { max-width: 16.5em; font-size: clamp(28px, 2.8vw, 42px); }
.phila-intro-head .phila-lead { font-size: 17px; }
.phila-intro-head .phila-btn-row { margin-top: 18px; }
.phila-cards-wrap { padding-top: 0; }
.phila-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.phila-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--phila-line); border-radius: var(--phila-radius);
  background-color: #fff; color: inherit; text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.phila-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 20, 20, .08); }
.phila-card-media { aspect-ratio: 5 / 4; overflow: hidden; background-color: var(--_color---neutral-300); }
.phila-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--phila-ease); }
.phila-card:hover .phila-card-media img { transform: scale(1.04); }
.phila-card-body { display: flex; flex: 1; flex-direction: column; padding: 26px 28px 30px; }
.phila-card-num { margin-bottom: 12px; color: var(--phila-pink-text); font-size: 14px; font-weight: 600; }
.phila-card-title { margin: 0 0 10px; font-family: var(--phila-head-font); font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.phila-card-text { margin: 0 0 24px; color: var(--phila-text); font-size: 16px; line-height: 1.6; }
.phila-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--phila-ink); font-weight: 600; }

/* ================================================================ home: features (photo cards with icons) */
.phila-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.phila-feature {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 440px;
  border-radius: var(--phila-radius);
  background-color: var(--phila-dark);
}
.phila-feature-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--phila-ease); }
.phila-feature:hover .phila-feature-img { transform: scale(1.05); }
.phila-feature-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 14, 14, .05) 0%, rgba(14, 14, 14, .38) 42%, rgba(14, 14, 14, .9) 100%);
}
.phila-feature-body { padding: 30px; }
.phila-feature-icon { display: block; width: 54px; height: 54px; margin-bottom: 18px; }
.phila-feature-title { margin: 0 0 10px; color: #fff; font-family: var(--phila-head-font); font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.phila-feature-text { margin: 0; color: rgba(255, 255, 255, .84); font-size: 15px; line-height: 1.65; }

/* ================================================================ industries */
.phila-industries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.phila-industry {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--phila-line); border-radius: var(--phila-radius);
  background-color: #fff; color: inherit; text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.phila-industry:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 20, 20, .08); }
.phila-industry-media {
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 1 / 1; padding: 28px 28px 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #e9e9e6 0%, #f4f4f2 60%, #fafaf9 100%);
}
.phila-industry-media img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: center bottom; transition: transform .8s var(--phila-ease); }
.phila-industry:hover .phila-industry-media img { transform: scale(1.04); }
.phila-industry-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-top: 1px solid var(--phila-line); }
.phila-industry-title { margin: 0; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.phila-industry-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--phila-pink-text); font-size: 15px; font-weight: 600; white-space: nowrap; }

.phila-everyone {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 56px;
  margin-top: 80px; padding: 48px 56px 0;
  overflow: hidden;
  border: 1px solid var(--phila-line); border-radius: var(--phila-radius);
  background-color: #fff;
}
.phila-everyone-media { align-self: end; }
.phila-everyone-media img { display: block; width: 100%; height: auto; }
.phila-everyone-body { padding-bottom: 48px; }
.phila-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 24px 0 34px; padding: 0; list-style: none; }
.phila-ticks li { position: relative; padding-left: 32px; color: var(--phila-ink); font-weight: 500; line-height: 1.45; }
.phila-ticks li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--phila-pink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5.1' fill='none' stroke='%23eb008d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ================================================================ products */
.phila-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.phila-product {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--phila-line); border-radius: var(--phila-radius);
  background-color: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}
.phila-product:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20, 20, 20, .08); }
.phila-product-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background-color: #f3f3f1; }
.phila-product-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .8s var(--phila-ease); }
.phila-product:hover .phila-product-media img { transform: scale(1.04); }
.phila-product-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.phila-product-cats { margin-bottom: 8px; color: var(--phila-pink-text); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.phila-product-cats a { color: inherit; text-decoration: none; }
.phila-product-cats a:hover { text-decoration: underline; }
.phila-product-name { margin: 0 0 4px; font-family: var(--phila-head-font); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.phila-product-name a { color: var(--phila-ink); text-decoration: none; }
.phila-product-name a:hover { color: var(--phila-pink); }
.phila-product-sub { margin: 0 0 14px; color: var(--phila-muted); font-size: 14px; line-height: 1.5; }
.phila-product-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--phila-line);
}
.phila-price { color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 20px; font-weight: 600; }
.phila-sizes { color: var(--phila-muted); font-size: 13px; }
.phila-product-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 16px; }
.phila-product { container: product / inline-size; }
.phila-wa-short, .phila-cat-short { display: none; }
/* narrow cards (two per row on phones): one category, name up to 3 lines, price over sizes, a full-width "Order" button;
   the photo and the name already open the product page, so "Details" is dropped */
@container product (max-width: 279px) {
  .phila-product-body { padding: 14px 14px 16px; }
  .phila-product-cats { margin-bottom: 6px; font-size: 11px; letter-spacing: .06em; }
  .phila-product-cats-more, .phila-cat-long { display: none; }
  .phila-cat-short { display: inline; }
  .phila-product-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 4px; font-size: 15px; line-height: 1.3; }
  .phila-product-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
  .phila-product-meta { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 10px; }
  .phila-price { font-size: 17px; }
  .phila-sizes { font-size: 12px; }
  .phila-product-actions { margin-top: 12px; }
  .phila-product-actions .phila-wa-btn { width: 100%; padding: 11px 12px; }
  .phila-product-actions .phila-link { display: none; }
  .phila-wa-long { display: none; }
  .phila-wa-short { display: inline; }
}

/* ================================================================ why choose us + numbered pillars */
.phila-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 80px; }
.phila-why-media { position: sticky; top: 110px; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--phila-radius); background-color: #2a2a2a; }
.phila-why-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phila-why-body .phila-h2 { margin-bottom: 22px; }
.phila-why-body .phila-btn-row { margin-top: 30px; }
.phila-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 56px; }
.phila-pillar { display: flex; gap: 18px; padding: 28px 0; border-top: 1px solid var(--phila-line); }
.phila-pillar-num { flex: none; min-width: 26px; color: var(--phila-pink-text); font-family: var(--phila-head-font); font-size: 15px; font-weight: 600; line-height: 1.75; }
.phila-pillar-title { margin: 0 0 8px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.phila-pillar-text { margin: 0; color: var(--phila-text); font-size: 15px; line-height: 1.7; }
.phila-pillar-text strong { color: var(--phila-ink); font-weight: 600; }
.is-dark .phila-pillar { border-top-color: rgba(255, 255, 255, .14); }
.is-dark .phila-pillar-num { color: #ff4fae; } /* lighter pink keeps the numbers readable on the dark background */
.is-dark .phila-pillar-title, .is-dark .phila-pillar-text strong { color: #fff; }
.is-dark .phila-pillar-text { color: rgba(255, 255, 255, .7); }

/* ================================================================ home: customisation techniques */
.phila-techniques { overflow: hidden; }
.phila-watermark {
  position: absolute; left: 50%; top: 40px; z-index: 0;
  width: min(1500px, 100%); height: auto;
  transform: translateX(-50%);
  pointer-events: none; user-select: none;
}
.phila-techniques > .w-container { position: relative; z-index: 1; }
.phila-tech { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 80px; }
.phila-tech-aside { position: sticky; top: 110px; }
.phila-tech-aside .phila-btn-row { margin-top: 28px; }
.phila-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.phila-collage figure, .phila-photo-strip figure { margin: 0; overflow: hidden; border-radius: var(--phila-radius); }
.phila-collage figure { aspect-ratio: 1; }
.phila-collage img, .phila-photo-strip img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--phila-ease); }
.phila-collage figure:hover img, .phila-photo-strip figure:hover img { transform: scale(1.05); }
.phila-tech-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.phila-tech-item {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px;
  border: 1px solid var(--phila-line); border-radius: var(--phila-radius);
  background-color: rgba(255, 255, 255, .94);
}
.phila-tech-num { color: var(--phila-pink-text); font-family: var(--phila-head-font); font-size: 15px; font-weight: 600; }
.phila-tech-title { margin: 0 0 10px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.phila-tech-text { margin: 0; color: var(--phila-text); font-size: 15px; line-height: 1.7; }
.phila-tech-text strong { color: var(--phila-ink); font-weight: 600; }
.phila-tech-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.phila-tech-tags li { padding: 6px 12px; border-radius: 100px; background-color: var(--phila-alt); color: var(--phila-ink); font-size: 13px; font-weight: 500; line-height: 1.3; }

/* ================================================================ reviews: a compact wall, each card only as tall as its text */
.phila-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
.phila-review-col { display: flex; flex-direction: column; gap: 20px; }
.phila-review {
  padding: 24px 26px;
  border: 1px solid var(--phila-line); border-radius: var(--phila-radius);
  background-color: #fff;
}
.phila-review-stars { display: flex; gap: 2px; margin-bottom: 14px; color: #fbbc04; }
.phila-star { display: flex; width: 16px; height: 16px; }
.phila-star svg { width: 100%; height: 100%; }
.phila-review-text { margin: 0 0 18px; color: var(--phila-ink); font-size: 16px; line-height: 1.6; }
.phila-review-meta { display: flex; align-items: center; gap: 12px; }
.phila-review-avatar {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background-color: var(--phila-pink-soft); color: var(--phila-pink-text);
  font-size: 15px; font-weight: 600; line-height: 1;
}
.phila-review-who { display: flex; flex-direction: column; line-height: 1.35; }
.phila-review-name { color: var(--phila-ink); font-size: 15px; font-weight: 600; }
.phila-review-date { color: var(--phila-muted); font-size: 13px; }
.phila-review-more { display: none; }
@media screen and (max-width: 991px) { .phila-review-more:not([hidden]) { display: inline-block; } }

/* ================================================================ order steps */
.phila-order { border-top: 1px solid var(--phila-line); }
.phila-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.phila-step { position: relative; display: flex; flex-direction: column; padding-top: 30px; border-top: 2px solid var(--phila-line); }
.phila-step::before {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background-color: var(--phila-pink); box-shadow: 0 0 0 4px #fff;
}
.phila-step-label { color: var(--phila-muted); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.phila-step-num { margin: 4px 0 14px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.phila-step-title { color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 20px; font-weight: 600; line-height: 1.3; }

/* ================================================================ industry pages: tiles, gallery, range */
.phila-tiles-section { padding-top: 72px; padding-bottom: 72px; }
.phila-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.phila-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  aspect-ratio: 3 / 4;
  border-radius: var(--phila-radius);
  background-color: var(--phila-dark);
}
.phila-tile-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--phila-ease); }
.phila-tile:hover .phila-tile-img { transform: scale(1.05); }
.phila-tile-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 40%, rgba(14, 14, 14, .86) 100%); }
.phila-tile-title { margin: 0; padding: 24px; color: #fff; font-family: var(--phila-head-font); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }

.phila-gallery { columns: 3; column-gap: 20px; margin-top: 56px; }
.phila-gallery-item { break-inside: avoid; margin: 0 0 20px; overflow: hidden; border-radius: var(--phila-radius); background-color: var(--phila-alt); }
.phila-gallery-item img { display: block; width: 100%; height: auto; transition: transform 1s var(--phila-ease); }
.phila-gallery-item:hover img { transform: scale(1.03); }
.phila-gallery-item.is-cutout { padding: 24px 24px 0; background: radial-gradient(120% 90% at 50% 100%, #e9e9e6 0%, #f4f4f2 60%, #fafaf9 100%); }
.phila-gallery-item.is-cutout img { transform-origin: center bottom; }

.phila-range { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.phila-range-item { padding: 32px 30px; border-radius: var(--phila-radius); background-color: var(--phila-alt); }
.phila-range-title { margin: 0 0 12px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.phila-range-text { margin: 0; color: var(--phila-text); font-size: 15px; line-height: 1.7; }

/* ================================================================ CTA band */
.phila-cta { position: relative; isolation: isolate; overflow: hidden; padding: 140px 0; background-color: var(--phila-dark); text-align: center; }
.phila-cta-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.phila-cta-shade { position: absolute; inset: 0; z-index: -1; background-color: rgba(14, 14, 14, .7); }
.phila-cta-inner { max-width: 900px; margin: 0 auto; }
.phila-cta .phila-btn-row { justify-content: center; margin-top: 36px; }

/* ================================================================ about page */
.phila-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 80px; }
.phila-split.is-reverse .phila-split-media { order: 2; }
.phila-split-media { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--phila-radius); background-color: var(--_color---neutral-300); }
.phila-split-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phila-split-body .phila-h2 { margin-bottom: 24px; }
.phila-split-body .phila-lead + .phila-text { margin-top: 18px; }
.phila-split-body .phila-h3 { margin-top: 36px; }
.phila-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--phila-line); }
.phila-stat-num { color: var(--phila-ink); font-family: var(--phila-head-font); font-size: clamp(34px, 3.4vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.phila-stat-label { margin-top: 10px; color: var(--phila-muted); font-size: 14px; line-height: 1.4; }
.phila-diff { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 64px; }
.phila-diff .phila-pillars { grid-template-columns: 1fr; margin-top: 0; }
.phila-diff .phila-pillar:last-child { border-bottom: 1px solid var(--phila-line); }
.phila-diff-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.phila-diff-media img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--phila-radius); }
.phila-diff-media img:nth-child(2) { margin-top: 64px; }

/* ================================================================ OEM page */
.phila-process { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 80px; }
.phila-process-aside { position: sticky; top: 110px; }
.phila-process-media { margin-top: 36px; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--phila-radius); }
.phila-process-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phila-process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--phila-line); }
.phila-process-step {
  display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "num title" "num text"; column-gap: 24px;
  padding: 30px 0; border-bottom: 1px solid var(--phila-line);
}
.phila-process-num { grid-area: num; padding-top: 5px; color: var(--phila-pink-text); font-family: var(--phila-head-font); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.phila-process-title { grid-area: title; margin: 0 0 8px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.phila-process-text { grid-area: text; margin: 0; color: var(--phila-text); font-size: 16px; line-height: 1.7; }

.phila-clients-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--phila-line); border-left: 1px solid var(--phila-line); }
.phila-clients-grid .phila-client-logo {
  box-sizing: border-box; width: 100%; max-width: none; height: 160px; padding: 40px 36px;
  border-right: 1px solid var(--phila-line); border-bottom: 1px solid var(--phila-line);
}

.phila-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 80px; }
.phila-faq .phila-head { margin-bottom: 0; }
.phila-faq-list { border-top: 1px solid var(--phila-line); }
.phila-faq-item { border-bottom: 1px solid var(--phila-line); }
.phila-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 21px; font-weight: 600; line-height: 1.35;
  list-style: none; cursor: pointer;
}
.phila-faq-item summary::-webkit-details-marker { display: none; }
.phila-faq-icon { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--phila-ink); border-radius: 50%; }
.phila-faq-icon::before, .phila-faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.6px; background-color: var(--phila-ink);
  transform: translate(-50%, -50%); transition: transform .3s ease;
}
.phila-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.phila-faq-item[open] .phila-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.phila-faq-item p { margin: 0; padding: 0 60px 28px 0; color: var(--phila-text); font-size: 16px; line-height: 1.75; }

/* ================================================================ contact page */
.phila-info-section { padding-top: 72px; padding-bottom: 72px; } /* just one row of cards, so less room around it */
.phila-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.phila-info { padding: 30px 28px; border: 1px solid var(--phila-line); border-radius: var(--phila-radius); background-color: #fff; }
.phila-info-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 22px;
  border-radius: 50%; background-color: var(--phila-pink-soft); color: var(--phila-pink);
}
.phila-info-icon svg { width: 22px; height: 22px; }
.phila-info-title { margin: 0 0 12px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 20px; font-weight: 600; line-height: 1.3; }
.phila-info p { margin: 0; color: var(--phila-text); font-size: 15px; line-height: 1.7; }
.phila-info a { color: var(--phila-text); text-decoration: none; transition: color .2s ease; }
.phila-info a:hover { color: var(--phila-pink); }
.phila-info-links { display: flex; flex-direction: column; gap: 6px; }
.phila-hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--phila-line); color: var(--phila-text); font-size: 15px; line-height: 1.5; }
.phila-hours-row:last-child { border-bottom: 0; }
.phila-hours-row span:last-child { color: var(--phila-ink); font-weight: 500; white-space: nowrap; }
.phila-photo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.phila-photo-strip figure { aspect-ratio: 3 / 4; }
.phila-contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; gap: 64px; }
.phila-contact .phila-head { margin-bottom: 36px; }
.phila-contact-map { min-height: 520px; overflow: hidden; border-radius: var(--phila-radius); background-color: var(--phila-line); }
.phila-contact-map iframe { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; }

.phila-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.phila-field { display: flex; flex-direction: column; gap: 8px; margin: 0; font-weight: 400; }
.phila-field.is-wide { grid-column: 1 / -1; }
.phila-field > span { color: var(--phila-ink); font-size: 15px; font-weight: 500; }
.phila-field em { color: var(--phila-pink-text); font-style: normal; }
.phila-field input, .phila-field textarea {
  width: 100%; margin: 0; padding: 14px 16px;
  border: 1px solid var(--phila-field); border-radius: var(--phila-radius);
  background-color: #fff; color: var(--phila-ink);
  font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.phila-field textarea { min-height: 150px; resize: vertical; }
.phila-field input:focus, .phila-field textarea:focus { outline: none; border-color: var(--phila-ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .08); }
.phila-field.is-invalid input { border-color: var(--phila-error); box-shadow: 0 0 0 3px rgba(208, 71, 62, .12); }
.phila-form-note { margin: 18px 0 0; color: var(--phila-muted); font-size: 14px; line-height: 1.6; }
.phila-form-error { margin: 12px 0 0; color: var(--phila-error); font-size: 14px; font-weight: 500; }
.phila-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 22px; padding: 18px 34px;
  border: 0; border-radius: 100px;
  background-color: var(--phila-pink); color: #fff;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background-color .3s ease;
}
.phila-submit:hover { background-color: var(--phila-pink-dark); }
.phila-submit .button-icon { width: 20px; height: 20px; }

/* ================================================================ shop listing */
.phila-shop-tools { display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; }
.phila-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.phila-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 18px;
  border: 1px solid var(--phila-line); border-radius: 100px;
  background-color: #fff; color: var(--phila-ink);
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.phila-chip span { color: var(--phila-muted); font-size: 13px; }
.phila-chip:hover { border-color: var(--phila-ink); }
.phila-chip.is-active { border-color: var(--phila-ink); background-color: var(--phila-ink); color: #fff; }
.phila-chip.is-active span { color: rgba(255, 255, 255, .62); }
.phila-shop-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 18px; border-top: 1px solid var(--phila-line); }
.phila-shop-filters .phila-chip { padding: 8px 14px; font-size: 14px; }
.phila-shop-inputs { display: flex; flex-wrap: wrap; gap: 10px; }
.phila-search, .phila-select { margin: 0; font-weight: 400; }
.phila-search input, .phila-select select {
  height: 44px; margin: 0; padding: 0 16px;
  border: 1px solid var(--phila-line); border-radius: 100px;
  background-color: #fff; color: var(--phila-ink);
  font: inherit; font-size: 15px;
}
.phila-search input {
  width: 240px; padding-left: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='9' cy='9' r='6' fill='none' stroke='%236b6b6b' stroke-width='1.6'/%3E%3Cpath d='m13.5 13.5 4 4' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 16px center / 16px no-repeat;
}
.phila-select select {
  padding-right: 40px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 12px no-repeat;
}
.phila-search input:focus, .phila-select select:focus { outline: none; border-color: var(--phila-ink); }
.phila-shop-count { margin: 0; color: var(--phila-muted); font-size: 14px; }
.phila-shop-empty { margin: 32px 0 0; padding: 40px; border: 1px dashed var(--phila-field); border-radius: var(--phila-radius); color: var(--phila-muted); text-align: center; }
.phila-shop-banner { display: grid; grid-template-columns: 1fr 1fr 1.1fr; align-items: stretch; gap: 20px; margin-top: 80px; }
.phila-shop-banner img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: var(--phila-radius); }
.phila-shop-banner-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 36px; border-radius: var(--phila-radius); background-color: var(--phila-alt); }

/* ================================================================ product page */
.phila-pd-section { padding-top: 40px; }
.phila-pd-section .phila-breadcrumb { margin-bottom: 32px; }
.phila-pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: 64px; }
.phila-pd-gallery { position: sticky; top: 110px; }
.phila-pd-main { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--phila-radius); background-color: #f3f3f1; }
.phila-pd-thumbs { display: flex; gap: 12px; margin-top: 12px; }
.phila-pd-thumbs a { display: block; width: 110px; overflow: hidden; border: 1px solid var(--phila-line); border-radius: 8px; transition: border-color .2s ease; }
.phila-pd-thumbs a:hover { border-color: var(--phila-ink); }
.phila-pd-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.phila-pd-info .phila-product-cats { margin-bottom: 10px; }
.phila-pd-title { margin: 0 0 6px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: clamp(30px, 3vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.phila-pd-sub { margin: 0; color: var(--phila-muted); font-size: 17px; }
.phila-pd-price { margin: 22px 0 28px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 30px; font-weight: 600; }
.phila-pd-order { display: flex; flex-direction: column; gap: 22px; padding: 28px; border: 1px solid var(--phila-line); border-radius: var(--phila-radius); background-color: var(--phila-alt); }
.phila-pd-label { margin-bottom: 10px; color: var(--phila-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.phila-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.phila-opt { position: relative; margin: 0; font-weight: 400; cursor: pointer; }
.phila-opt input { position: absolute; opacity: 0; pointer-events: none; }
.phila-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 11px 16px;
  border: 1px solid var(--phila-field); border-radius: 100px;
  background-color: #fff; color: var(--phila-ink);
  font-size: 15px; font-weight: 500; line-height: 1;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.phila-opt:hover span { border-color: var(--phila-ink); }
.phila-opt input:checked + span { border-color: var(--phila-ink); background-color: var(--phila-ink); color: #fff; }
.phila-opt input:focus-visible + span { outline: 2px solid var(--phila-pink); outline-offset: 2px; }
.phila-pd-field.is-missing .phila-opt span { border-color: var(--phila-error); }
.phila-pd-field.is-missing .phila-pd-label::after { content: " · please choose a size"; color: var(--phila-error); font-weight: 500; letter-spacing: 0; text-transform: none; }
.phila-qty {
  width: 120px; height: 46px; margin: 0; padding: 0 16px;
  border: 1px solid var(--phila-field); border-radius: 100px;
  background-color: #fff; color: var(--phila-ink); font-size: 16px;
}
.phila-qty:focus { outline: none; border-color: var(--phila-ink); }
.phila-pd-note { margin: -6px 0 0; color: var(--phila-muted); font-size: 14px; line-height: 1.6; }
.phila-pd-desc { margin-top: 36px; color: var(--phila-text); font-size: 16px; line-height: 1.75; }
.phila-pd-desc h4 { margin: 28px 0 10px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 20px; font-weight: 600; line-height: 1.3; }
.phila-pd-desc h4:first-child { margin-top: 0; }
.phila-pd-desc p { margin: 0 0 14px; font-size: 16px; line-height: 1.75; }
.phila-pd-desc ul, .phila-pd-desc ol { margin: 0 0 16px; padding-left: 20px; }
.phila-pd-desc li { margin-bottom: 6px; }
.phila-pd-desc strong { color: var(--phila-ink); }

/* ================================================================ terms and privacy */
.phila-prose { max-width: 820px; color: var(--phila-text); font-size: 16px; line-height: 1.8; }
.phila-prose h3 { margin: 44px 0 14px; color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.phila-prose h3:first-child { margin-top: 0; }
.phila-prose p { margin: 0 0 16px; font-size: 16px; line-height: 1.8; }
.phila-prose ul { margin: 0 0 18px; padding-left: 22px; }
.phila-prose li { margin-bottom: 8px; }
.phila-prose strong { color: var(--phila-ink); }

/* ================================================================ footer + floating WhatsApp */
.footer-newsletter-text { line-height: 1.7; }
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background-color: var(--phila-wa); color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }

/* ================================================================ responsive */
@media screen and (max-width: 1279px) {
  .phila-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phila-products.is-row > :nth-child(n + 4) { display: none; }
  .phila-industry-body { flex-direction: column; align-items: flex-start; gap: 6px; }
  .phila-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phila-tech-list { grid-template-columns: 1fr; }
}

@media screen and (max-width: 1199px) {
  /* home hero: below 1200px the people photo would get too small beside the title, so it moves underneath */
  .zz-hero-section { display: flex; flex-direction: column; }
  .zz-hero-wrapper { order: 1; }
  .zz-hero-people {
    order: 2; position: relative; right: auto;
    display: block; width: 100%; max-width: 760px; height: auto;
    margin: 12px auto 0;
  }
  .zz-hero-shade { background: linear-gradient(180deg, rgba(14, 14, 14, .66) 0%, rgba(14, 14, 14, .32) 55%, rgba(14, 14, 14, .12) 100%); }
  .zz-hero-layout {
    flex-direction: column-reverse; justify-content: flex-start;
    min-height: 0; padding-top: calc(var(--phila-header-h) + 36px); padding-bottom: 0; gap: 36px;
  }
}

@media screen and (max-width: 991px) {

  /* page hero */
  .phila-page-hero { min-height: 0; padding-top: calc(var(--phila-header-h) + 64px); padding-bottom: 64px; }
  .phila-page-hero.is-short { min-height: 0; }
  .phila-page-hero.has-people { padding-bottom: 0; flex-direction: column; align-items: stretch; }
  .phila-page-hero.has-people .phila-page-hero-inner { max-width: 760px; }
  .phila-page-hero.has-people .phila-page-hero-people {
    position: relative; right: auto; order: 2;
    display: block; width: 100%; max-width: 640px; height: auto; margin: 40px auto 0;
  }
  .phila-page-hero-text { font-size: 17px; }

  /* sections */
  .phila-head { margin-bottom: 40px; }
  .phila-head.is-split { grid-template-columns: 1fr; gap: 18px; }
  .phila-lead { font-size: 17px; }

  .phila-clients-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 0; }
  .phila-clients-label { max-width: none; }
  .phila-clients-logos { justify-content: flex-start; gap: 20px 36px; width: 100%; }
  .phila-client-logo { height: 38px; }
  .phila-intro-head { padding-top: 60px; }
  .phila-intro-head .phila-head { margin-bottom: 32px; }
  .phila-cards { gap: 18px; }
  .phila-card-body { padding: 20px 20px 24px; }
  .phila-card-title { font-size: 21px; }
  .phila-card-text { font-size: 15px; }

  .phila-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .phila-feature { min-height: 380px; }
  .phila-feature-body { padding: 24px; }
  .phila-feature-title { font-size: 22px; }
  .phila-industries { gap: 18px; }
  .phila-industry-body { padding: 18px 20px; }
  .phila-industry-title { font-size: 20px; }
  .phila-everyone { grid-template-columns: 1fr; gap: 0; margin-top: 56px; padding: 36px 32px 0; }
  .phila-everyone-body { order: 1; padding-bottom: 36px; }
  .phila-everyone-media { order: 2; }

  .phila-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .phila-products.is-row > :nth-child(n + 4) { display: flex; }

  .phila-why, .phila-tech, .phila-process, .phila-faq, .phila-split, .phila-diff, .phila-contact, .phila-pd { grid-template-columns: 1fr; gap: 48px; }
  .phila-why-media, .phila-tech-aside, .phila-process-aside, .phila-pd-gallery { position: static; }
  .phila-why-media { aspect-ratio: 16 / 10; }
  .phila-process-media { aspect-ratio: 16 / 10; }
  .phila-pd-main { max-height: 72vh; }
  .phila-split-media { aspect-ratio: 16 / 11; }
  .phila-split.is-reverse .phila-split-media { order: 0; }
  .phila-pillars { margin-top: 40px; }
  .phila-collage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phila-tech-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phila-reviews-section .phila-head-side { align-items: flex-start; }
  /* tablets and phones: one swipeable row, still sized to each review, most detailed first */
  .phila-reviews {
    display: flex; align-items: flex-start; gap: 14px;
    margin: 0 -25px; padding: 0 25px 4px; scroll-padding: 0 25px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .phila-reviews::-webkit-scrollbar { display: none; }
  .phila-review-col { display: contents; }
  .phila-review { flex: 0 0 46%; order: var(--rank); scroll-snap-align: start; }
  /* long reviews show 6 lines with a "Read more" button (added by the site script only when the text is cut) */
  .phila-review-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
  .phila-review.is-open .phila-review-text { display: block; -webkit-line-clamp: unset; }
  .phila-review-more {
    margin: -8px 0 16px; padding: 0; border: 0; background: none;
    color: var(--phila-ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer;
  }

  .phila-steps { gap: 18px; }
  .phila-step-num { font-size: 40px; }
  .phila-step-title { font-size: 17px; }

  .phila-tiles-section { padding-top: 56px; padding-bottom: 56px; }
  .phila-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .phila-tile { aspect-ratio: 4 / 3; }
  .phila-gallery { columns: 2; column-gap: 16px; margin-top: 40px; }
  .phila-gallery-item { margin-bottom: 16px; }
  .phila-cta { padding: 100px 0; }
  .phila-diff-media img:nth-child(2) { margin-top: 0; }
  .phila-process-step { grid-template-columns: 84px minmax(0, 1fr); }
  .phila-faq-item summary { font-size: 19px; }
  .phila-photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .phila-contact-map, .phila-contact-map iframe { min-height: 400px; }
  .phila-shop-banner { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .phila-shop-banner-text { grid-column: 1 / -1; }
  .phila-pd-section { padding-top: 28px; }
}

@media screen and (max-width: 767px) {
  /* buttons a size down on phones */
  .primary-button, .secondary-button { padding: 14px 24px; font-size: 16px; }
  .zz-hero-product-wrap { display: none; }
  .zz-hero-title-wrap { margin-bottom: 22px; }

  .phila-page-hero { padding-top: calc(var(--phila-header-h) + 48px); padding-bottom: 52px; }
  .phila-page-hero-title br { display: none; }
  .phila-page-hero-text { font-size: 16px; }
  .phila-breadcrumb { margin-bottom: 20px; font-size: 13px; }
  .phila-eyebrow { font-size: 12px; letter-spacing: .14em; }
  .phila-lead { font-size: 16px; }

  .phila-client-logo { height: 32px; max-width: 110px; }
  .phila-clients-logos { gap: 18px 28px; }
  .phila-cards { grid-template-columns: 1fr; }
  .phila-card-media { aspect-ratio: 16 / 10; }

  .phila-features { grid-template-columns: 1fr; }
  .phila-feature { min-height: 340px; }
  .phila-industries { grid-template-columns: 1fr; }
  .phila-industry-media { aspect-ratio: 4 / 3; }
  .phila-industry-body { flex-direction: row; align-items: center; }
  .phila-everyone { padding: 28px 22px 0; }
  .phila-ticks { grid-template-columns: 1fr; }

  .phila-pillars, .phila-tech-list { grid-template-columns: 1fr; }
  .phila-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phila-tech-item { padding: 24px; }
  .phila-reviews { margin: 0 -15px; padding: 0 15px 4px; scroll-padding: 0 15px; }
  .phila-review { flex-basis: 84%; padding: 22px; }

  .phila-steps { grid-template-columns: 1fr; gap: 0; }
  .phila-step { padding: 0 0 28px 30px; border-top: 0; border-left: 2px solid var(--phila-line); }
  .phila-step:last-child { padding-bottom: 0; }
  .phila-step::before { top: 2px; left: -7px; }
  .phila-step-num { margin: 2px 0 6px; font-size: 34px; }

  .phila-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .phila-tile { aspect-ratio: 1; }
  .phila-tile-title { padding: 16px; font-size: 17px; }
  .phila-gallery { column-gap: 12px; }
  .phila-gallery-item { margin-bottom: 12px; }
  .phila-range-item { padding: 26px 22px; }
  .phila-stats { gap: 14px; }
  .phila-stat-label { font-size: 13px; }
  .phila-process-step { grid-template-columns: 1fr; grid-template-areas: "num" "title" "text"; padding: 24px 0; }
  .phila-process-num { padding: 0 0 8px; }
  .phila-process-title { font-size: 21px; }
  .phila-clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phila-clients-grid .phila-client-logo { height: 120px; padding: 30px 26px; }
  .phila-faq-item p { padding-right: 0; }
  .phila-cta { padding: 80px 0; }
  .phila-info-grid { grid-template-columns: 1fr; }
  /* category and size chips scroll sideways on phones instead of wrapping into a tall block */
  .phila-chip-row { flex-wrap: nowrap; margin: 0 -15px; padding: 0 15px 2px; overflow-x: auto; scrollbar-width: none; }
  .phila-chip-row::-webkit-scrollbar { display: none; }
  .phila-chip { flex: none; }
  .phila-shop-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .phila-shop-filters > .phila-chip-row { min-width: 0; }
  .phila-shop-inputs { width: 100%; }
  .phila-search { flex: 1 1 200px; }
  .phila-search input { width: 100%; }
  .phila-select { flex: 1 1 160px; }
  .phila-select select { width: 100%; }
  .phila-pd-order { padding: 22px; }
  .footer-copiright-block { padding-bottom: 84px; }
}

@media screen and (max-width: 479px) {
  .zz-hero-layout { padding-top: calc(var(--phila-header-h) + 28px); gap: 28px; }
  .zz-hero-title { font-size: 36px; letter-spacing: -.03em; }
  .zz-hero-btn-wrap .primary-button, .zz-hero-btn-wrap .secondary-button { width: 100%; padding: 16px 20px; }
  .zz-hero-text { font-size: 18px; }
  .phila-page-hero .phila-btn-row .primary-button, .phila-page-hero .phila-btn-row .secondary-button { width: 100%; }

  .phila-products { gap: 12px; }
  .phila-form-grid { grid-template-columns: 1fr; }
  .phila-submit { width: 100%; }
  .phila-shop-banner { grid-template-columns: 1fr; }
  .phila-shop-banner img { min-height: 200px; }
  .phila-shop-banner-text { padding: 28px 24px; }
  .phila-diff-media { gap: 10px; }
  .phila-stat-num { font-size: 30px; }
  .phila-photo-strip { gap: 10px; }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* ================================================================ mobile menu (tablets and phones) */
@media screen and (max-width: 991px) {
  .header-middle { position: relative; left: auto; right: auto; z-index: 10; } /* logo stays visible above the open menu */
  .nav-menu-wrapper {
    width: min(400px, 100%); height: 100vh; height: 100dvh;
    padding: calc(var(--phila-header-h) + 4px) 28px 40px;
    background-color: #fff;
    text-align: left;
  }
  .nav-menu-inner { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 28px; width: 100%; }
  .header-nav-menu-list { grid-row-gap: 0; align-items: stretch; width: 100%; }
  .header-nav-list-item { width: 100%; border-bottom: 1px solid var(--phila-line); }
  .header-nav-list-item > .header-nav-link, .header-nav-dropdown { display: flex; width: 100%; }
  .header-nav-dropdown { flex-direction: column; }
  .header-nav-link, .header-nav-dropdown-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 0; }
  .header-nav-link-text, .header-dropdown-text {
    color: var(--phila-ink); font-family: var(--phila-head-font); font-size: 21px; font-weight: 500; letter-spacing: -.01em;
  }
  .header-nav-link-line { display: none !important; }
  .header-nav-link.w--current .header-nav-link-text,
  .header-nav-dropdown.is-current-parent .header-dropdown-text { color: var(--phila-pink-text); }
  .header-nav-dropdown-toggle .link-icon { transition: transform .25s ease; }
  .header-nav-dropdown-toggle.w--open .link-icon { transform: rotate(180deg); }
  .header-nav-dropdown-body { position: static; width: 100%; min-width: 0; }
  .header-nav-dropdown-inner { margin: 0 0 14px; padding: 0; background-color: transparent; }
  .nav-dropdown-link-block { padding: 10px 0 10px 2px; color: var(--phila-text); font-size: 17px; }
  .nav-dropdown-link-block:hover, .nav-dropdown-link-block.w--current { color: var(--phila-pink-text); }
  .nav-dropdown-shape { width: 12px; background-color: var(--phila-pink); }
  .header-right-side { width: 100%; margin-top: 0; }
  .header-right-side .primary-button { width: 100%; padding: 16px 24px; font-size: 16px; }
  .phila-menu-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--phila-muted); font-size: 14px; line-height: 1.5; text-align: left; }
  .phila-menu-extra a { color: var(--phila-ink); font-size: 16px; font-weight: 500; text-decoration: none; }
  html.phila-menu-open, html.phila-menu-open body { overflow: hidden; }
  html.phila-menu-open .wa-float { display: none; }
}
@media screen and (min-width: 992px) {
  .phila-menu-extra { display: none; }
}
@media screen and (max-width: 767px) {
  .nav-menu-wrapper { width: 100%; padding-left: 20px; padding-right: 20px; box-shadow: none; }
}

/* ================================================================ phones: compact layouts */
@media screen and (max-width: 767px) {
  /* swipe rails (one card in view, the next one peeking) instead of long stacks */
  .phila-features, .phila-industries, .phila-tech-list {
    display: flex; gap: 12px;
    margin-left: -15px; margin-right: -15px; padding: 0 15px 4px; scroll-padding: 0 15px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .phila-features::-webkit-scrollbar, .phila-industries::-webkit-scrollbar, .phila-tech-list::-webkit-scrollbar { display: none; }
  .phila-feature, .phila-industry, .phila-tech-item { flex: 0 0 80%; scroll-snap-align: start; }
  .phila-feature { min-height: 380px; }
  .phila-industry-media { aspect-ratio: 1 / 1; }
  .phila-industry-body { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; }
  .phila-tech-tags li { padding: 5px 10px; font-size: 12px; }
  .phila-industry:hover, .phila-card:hover, .phila-product:hover { transform: none; }

  /* what we do: image beside the text */
  .phila-cards { gap: 12px; }
  .phila-card { flex-direction: row; }
  .phila-card-media { flex: 0 0 36%; aspect-ratio: auto; }
  .phila-card-body { padding: 16px 16px 18px; }
  .phila-card-num { margin-bottom: 4px; font-size: 12px; }
  .phila-card-title { margin-bottom: 6px; font-size: 18px; }
  .phila-card-text { margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
  .phila-card-cta { font-size: 14px; }

  /* client logos in a tidy 4 x 2 grid */
  .phila-clients-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 18px 14px; }
  .phila-client-logo { height: 28px; max-width: 100%; }

  .phila-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .phila-ticks li { padding-left: 28px; font-size: 14px; }
  .phila-ticks li::before { width: 20px; height: 20px; }
  .phila-watermark { display: none; }

  /* order steps: number and title on one line */
  .phila-step { flex-direction: row; align-items: baseline; gap: 12px; padding: 0 0 18px 24px; }
  .phila-step::before { top: 6px; }
  .phila-step-label { display: none; }
  .phila-step-num { min-width: 30px; margin: 0; color: var(--phila-pink-text); font-size: 20px; }
  .phila-step-title { font-size: 17px; }

  /* contact details: icon beside the text */
  .phila-info-grid { gap: 10px; }
  .phila-info { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .phila-info > :not(.phila-info-icon) { grid-column: 2; }
  .phila-info-icon { grid-column: 1; grid-row: 1 / span 6; width: 40px; height: 40px; margin: 0; }
  .phila-info-icon svg { width: 18px; height: 18px; }
  .phila-info-title { margin: 0 0 6px; font-size: 17px; }

  .phila-clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phila-clients-grid .phila-client-logo { height: 84px; padding: 22px 10px; }
}
@media screen and (max-width: 479px) {
  .phila-shop-banner { grid-template-columns: 1fr 1fr; gap: 10px; }
  .phila-shop-banner img { min-height: 150px; }
  /* footer: the two link lists side by side */
  .footer-contant-wrapper { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  /* the template pins these with id rules, so !important is needed to span both columns */
  .footer-contant-wrapper > .footer-about-wrapper, .footer-contant-wrapper > .footer-newsletter-block { grid-column: 1 / -1 !important; }
  .footer-column { width: auto; }
  .footer-link { font-size: 14px; }
}

@media screen and (max-width: 767px) {
  .phila-info-section { padding-top: 40px; padding-bottom: 48px; }
}