/* =========================================================
   PIS Theme — Main Stylesheet
   Design tokens, reset, layout, components, RTL logical properties,
   responsive breakpoints, animations (respects prefers-reduced-motion).
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
	--pis-navy: #052D5C;
	--pis-navy-dark: #031E3D;
	--pis-blue: #0768D7;
	--pis-light-blue: #078BFF;
	--pis-bg: #F5F9FD;
	--pis-white: #FFFFFF;
	--pis-text: #092B52;
	--pis-muted: #5F7185;
	--pis-border: #E3EAF2;
	--pis-radius: 14px;
	--pis-radius-sm: 8px;
	--pis-shadow: 0 10px 30px -12px rgba(5, 45, 92, .18);
	--pis-shadow-sm: 0 4px 14px -6px rgba(5, 45, 92, .14);
	--pis-container: 1220px;
	--pis-font: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
	--pis-transition: 220ms cubic-bezier(.4,0,.2,1);
	--pis-header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}
body {
	margin: 0;
	font-family: var(--pis-font);
	color: var(--pis-text);
	background: var(--pis-white);
	line-height: 1.75;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
svg { display: block; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
	white-space: nowrap;
}
.skip-link {
	position: fixed;
	inset-inline-start: 8px;
	top: -60px;
	background: var(--pis-navy);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--pis-radius-sm);
	z-index: 9999;
	transition: top var(--pis-transition);
}
.skip-link:focus { top: 8px; }

:focus-visible {
	outline: 3px solid var(--pis-light-blue);
	outline-offset: 2px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-weight: 700; color: var(--pis-text); margin: 0 0 .6em; line-height: 1.3; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--pis-muted); }
.container { max-width: var(--pis-container); margin-inline: auto; padding-inline: 20px; }
.section-pad { padding-block: clamp(48px, 6vw, 96px); }
.section-pad--sm { padding-block: clamp(32px, 4vw, 56px); }

.entry-content h2 { margin-top: 1.4em; }
.entry-content h3 { margin-top: 1.2em; }
.entry-content p, .entry-content ul, .entry-content ol { color: var(--pis-text); }
.entry-content img { border-radius: var(--pis-radius); margin-block: 1em; }
.entry-content a { color: var(--pis-blue); text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--pis-radius-sm);
	font-weight: 700;
	font-size: .96rem;
	transition: background var(--pis-transition), color var(--pis-transition), transform var(--pis-transition), box-shadow var(--pis-transition);
	white-space: nowrap;
	border: 2px solid transparent;
}
.btn--primary { background: var(--pis-blue); color: #fff; }
.btn--primary:hover { background: var(--pis-navy); transform: translateY(-2px); box-shadow: var(--pis-shadow-sm); }
.btn--outline { background: transparent; border-color: var(--pis-blue); color: var(--pis-blue); }
.btn--outline:hover { background: var(--pis-blue); color: #fff; transform: translateY(-2px); }
.btn--outline-white { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn--outline-white:hover { background: #fff; color: var(--pis-navy); transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--pis-navy); }
.btn--white:hover { background: var(--pis-bg); transform: translateY(-2px); }
.btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.btn--sm { padding: 9px 18px; font-size: .88rem; }
.btn--block { width: 100%; }
.btn:focus-visible { outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255,255,255,.97);
	backdrop-filter: saturate(180%) blur(6px);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--pis-transition), padding var(--pis-transition), border-color var(--pis-transition);
}
.site-header.is-stuck {
	box-shadow: var(--pis-shadow-sm);
	border-color: var(--pis-border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
	transition: padding var(--pis-transition);
}
.site-header.is-stuck .site-header__inner { padding-block: 10px; }
.site-logo img { height: 56px; width: auto; transition: height var(--pis-transition); }
.site-header.is-stuck .site-logo img { height: 44px; }

.site-header__nav { flex: 1; display: flex; justify-content: center; }
.primary-menu { display: flex; align-items: center; gap: 30px; }
.primary-menu > li > a {
	font-weight: 600;
	color: var(--pis-text);
	padding: 8px 2px;
	position: relative;
	transition: color var(--pis-transition);
}
.primary-menu > li > a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0; inset-inline-end: 0;
	bottom: 0;
	height: 2px;
	background: var(--pis-blue);
	transform: scaleX(0);
	transition: transform var(--pis-transition);
	transform-origin: center;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a { color: var(--pis-blue); }
.primary-menu > li > a:hover::after,
.primary-menu > li.current-menu-item > a::after { transform: scaleX(1); }

.primary-menu li { position: relative; }
.primary-menu ul.sub-menu {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	background: #fff;
	box-shadow: var(--pis-shadow);
	border-radius: var(--pis-radius-sm);
	min-width: 220px;
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--pis-transition), transform var(--pis-transition), visibility var(--pis-transition);
	z-index: 20;
}
.primary-menu li:hover > ul.sub-menu,
.primary-menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; }
.primary-menu .sub-menu a:hover { background: var(--pis-bg); }

.site-header__actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: var(--pis-text);
	transition: background var(--pis-transition);
}
.icon-btn:hover { background: var(--pis-bg); }
.icon-btn svg { width: 20px; height: 20px; }

.hamburger { display: none; flex-direction: column; gap: 5px; width: 32px; height: 32px; align-items: center; justify-content: center; }
.hamburger span { width: 22px; height: 2px; background: var(--pis-text); border-radius: 2px; transition: transform var(--pis-transition), opacity var(--pis-transition); }

.site-search-panel { max-height: 0; overflow: hidden; transition: max-height var(--pis-transition); border-top: 1px solid transparent; }
.site-search-panel:not([hidden]) { max-height: 100px; border-color: var(--pis-border); }
.site-search-panel .container { padding-block: 14px; }

.pis-search-form { display: flex; gap: 8px; }
.pis-search-form__input { flex: 1; padding: 12px 16px; border: 1px solid var(--pis-border); border-radius: var(--pis-radius-sm); background: var(--pis-bg); }
.pis-search-form__submit { width: 46px; background: var(--pis-blue); color: #fff; border-radius: var(--pis-radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pis-search-form__submit svg { width: 18px; height: 18px; flex: none; }

/* ---------- Mobile menu ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 900; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(5,20,40,.55); }
.mobile-menu__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(340px, 88vw);
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 20px;
	box-shadow: -10px 0 40px rgba(0,0,0,.2);
	animation: slideIn .28s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
:root[dir="ltr"] .mobile-menu__panel { inset-inline-end: auto; inset-inline-start: 0; }
.mobile-menu__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-menu__header img { height: 40px; width: auto; }
.mobile-menu-list li { border-bottom: 1px solid var(--pis-border); }
.mobile-menu-list a { display: flex; justify-content: space-between; padding: 14px 4px; font-weight: 600; }
.mobile-menu__footer { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.mobile-menu__phone { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--pis-blue); font-weight: 700; }
.mobile-menu__phone svg { width: 18px; height: 18px; flex: none; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs-bar { background: var(--pis-bg); border-bottom: 1px solid var(--pis-border); }
.pis-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; font-size: .88rem; color: var(--pis-muted); }
.pis-breadcrumbs a { color: var(--pis-muted); }
.pis-breadcrumbs a:hover { color: var(--pis-blue); }
.pis-breadcrumbs li.sep { opacity: .6; }
.pis-breadcrumbs [aria-current="page"] { color: var(--pis-text); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; min-height: min(88vh, 780px); display: flex; align-items: center; }
.hero__media {
	position: absolute; inset: 0;
	background-size: cover;
	/* Shift the visible crop toward the image's left/open side so the busier
	   part of the photo sits away from the text column on the right. */
	background-position: 25% center;
	transform: scale(1.04);
	animation: heroZoom 16s ease-in-out infinite alternate;
}
:root[dir="ltr"] .hero__media { background-position: 75% center; }
@keyframes heroZoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.hero__overlay {
	position: absolute;
	inset: 0;
	/* Dark, opaque toward the text side (right, in RTL) fading out toward the
	   image side (left) so the photo stays visible while the title/CTA keep
	   strong contrast — matches the reference layout's "text on the side" look. */
	background: linear-gradient(to left, rgba(4,20,42,.90) 0%, rgba(5,45,92,.72) 32%, rgba(5,45,92,.32) 62%, rgba(5,45,92,.05) 85%);
}
:root[dir="ltr"] .hero__overlay {
	background: linear-gradient(to right, rgba(4,20,42,.90) 0%, rgba(5,45,92,.72) 32%, rgba(5,45,92,.32) 62%, rgba(5,45,92,.05) 85%);
}
.hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	/* .hero itself is a flex container (for vertical centering), which makes
	   .hero__inner its only in-flow flex item. Without an explicit width, a
	   flex item shrink-wraps to its content instead of filling the row, which
	   let it drift away from the container's true edge and made the
	   padding below inconsistent. Forcing it to fill the row (then capping
	   with max-width) guarantees the padding is always measured from the
	   real right/left edge of the hero section. */
	width: 100%;
	max-width: 1500px;
	margin-inline: auto;
	box-sizing: border-box;
	/* Scales smoothly with viewport width instead of jumping at fixed
	   breakpoints, so there's always real breathing room from the edge
	   on wide screens without needing to tune multiple media queries. */
	padding-inline: clamp(24px, 8vw, 140px);
	padding-block: 60px;
}
.hero__content { max-width: 600px; width: 100%; }
.hero__eyebrow {
	display: inline-block;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.3);
	padding: 6px 16px;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	margin-bottom: 18px;
}
.hero__title { color: #fff; margin-bottom: .5em; }
.hero__description { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 560px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Reveal-up animation ---------- */
.reveal-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease var(--delay, 0ms), transform .6s ease var(--delay, 0ms); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.reveal-up { opacity: 1; transform: none; transition: none; }
	.hero__media { animation: none; }
}

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--pis-white); padding-block: 40px; border-bottom: 1px solid var(--pis-border); }
.trust-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item__icon svg { width: 22px; height: 22px; flex: none; }
.trust-item__icon { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--pis-bg); color: var(--pis-blue); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.trust-item h3 { font-size: 1rem; margin-bottom: .2em; }
.trust-item p { font-size: .88rem; margin: 0; }

/* ---------- Section header ---------- */
.section-header { max-width: 680px; margin-bottom: 40px; }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; margin-bottom: 32px; }
.section-header__eyebrow { display: inline-block; color: var(--pis-blue); font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.section-header__title { margin-bottom: .3em; }
.section-header__title--light { color: #fff; }
.section-header__subtitle { font-size: 1.02rem; }
.section-header__subtitle--light { color: rgba(255,255,255,.82); }

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.services-grid--archive { grid-template-columns: repeat(3, 1fr); }
.service-card { background: #fff; border: 1px solid var(--pis-border); border-radius: var(--pis-radius); overflow: hidden; transition: transform var(--pis-transition), box-shadow var(--pis-transition); display: flex; flex-direction: column; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--pis-shadow); }
/* The icon badge is meant to hang partly below the image, into the white
   body area (bottom: -24px). It used to be a direct child of this element,
   which also clipped the zoom-in hover effect (overflow: hidden) — so the
   badge's overflowing bottom edge was being cut off in a flat line instead
   of showing as a full rounded square. The image + its clipping now live in
   an inner frame, so this outer element can stay overflow: visible and let
   the badge hang below it as intended. */
.service-card__media { position: relative; display: block; }
.service-card__media-frame { display: block; aspect-ratio: 4/3; overflow: hidden; }
.service-card__media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.service-card:hover .service-card__media-frame img { transform: scale(1.07); }
.service-card__icon { position: absolute; bottom: -24px; inset-inline-start: 20px; width: 56px; height: 56px; background: var(--pis-blue); color: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: var(--pis-shadow-sm); overflow: hidden; }
/* Reused for both service cards and food-export product cards; without an
   explicit size the icon svg has no width/height of its own, so it rendered
   at the browser's large default size and just overflowed/clipped inside
   the small round badge. Sized generously (not the earlier 22px) so the
   glyph actually reads at a glance instead of disappearing into the badge. */
.service-card__icon svg { width: 30px; height: 30px; flex: none; stroke-width: 1.6; }
.service-card__body { padding: 34px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.service-card__title { font-size: 1.1rem; margin-bottom: .4em; }
.service-card__title a:hover { color: var(--pis-blue); }
.service-card__desc { font-size: .92rem; flex: 1; }
.service-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--pis-blue); }
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--pis-transition); }
.service-card:hover .service-card__link svg { transform: translateX(-4px); }
:root[dir="ltr"] .service-card:hover .service-card__link svg { transform: translateX(4px); }

/* ---------- About section ---------- */
.about-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-section__media img { border-radius: var(--pis-radius); box-shadow: var(--pis-shadow); }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 26px; }
.about-features li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--pis-text); }
.about-features svg { width: 20px; height: 20px; color: var(--pis-blue); flex: none; }

/* ---------- Statistics ---------- */
.statistics-section { background: var(--pis-bg); }
.statistics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-item__value { display: block; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); font-weight: 800; color: var(--pis-blue); }
.stat-item__label { color: var(--pis-muted); font-weight: 600; }

/* ---------- How it works ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.step-item { text-align: center; padding: 10px; }
.step-item__number { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pis-navy); color: #fff; font-weight: 800; margin-bottom: 14px; }
.step-item p { font-size: .92rem; }

/* ---------- Coverage section (homepage, dark) ---------- */

/* ---------- Testimonials ---------- */
.testimonials-slider__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.testimonials-slider__track::-webkit-scrollbar { display: none; }
.testimonials-slider__slide { flex: 0 0 min(380px, 88vw); scroll-snap-align: start; }
.testimonial-card { background: var(--pis-bg); border-radius: var(--pis-radius); padding: 28px; height: 100%; border: 1px solid var(--pis-border); }
.testimonial-card__mark { width: 30px; height: 30px; color: var(--pis-light-blue); margin-bottom: 10px; }
.testimonial-card__text { color: var(--pis-text); font-size: 1rem; }
.testimonial-card__rating { display: flex; gap: 3px; color: #f5b301; margin-bottom: 10px; }
.testimonial-card__rating svg { width: 16px; height: 16px; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonial-card__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-card__avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--pis-border); color: var(--pis-muted); overflow: hidden; }
.testimonial-card__avatar--placeholder svg { width: 22px; height: 22px; flex: none; }
.testimonial-card__author strong { display: block; font-size: .95rem; }
.testimonial-card__author span { font-size: .82rem; color: var(--pis-muted); }
.testimonials-slider__nav { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.slider-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--pis-border); display: flex; align-items: center; justify-content: center; transition: background var(--pis-transition); }
.slider-btn:hover { background: var(--pis-bg); }
.slider-btn svg { width: 18px; height: 18px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-grid--related { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.post-card { background: #fff; border: 1px solid var(--pis-border); border-radius: var(--pis-radius); overflow: hidden; transition: transform var(--pis-transition), box-shadow var(--pis-transition); }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--pis-shadow); }
.post-card__media { position: relative; display: block; aspect-ratio: 3/2; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.07); }
.post-card__category { position: absolute; top: 14px; inset-inline-start: 14px; background: var(--pis-blue); color: #fff; font-size: .76rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.post-card__body { padding: 22px 20px; }
.post-card__date { font-size: .8rem; color: var(--pis-muted); }
.post-card__title { font-size: 1.05rem; margin: .3em 0; }
.post-card__title a:hover { color: var(--pis-blue); }
.post-card__excerpt { font-size: .9rem; }
.post-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--pis-blue); }
.post-card__link svg { width: 16px; height: 16px; }

/* ---------- Partners ---------- */
.partners-track { display: flex; gap: 50px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.partners-track::-webkit-scrollbar { display: none; }
.partners-track__item { flex: none; filter: grayscale(1); opacity: .7; transition: filter var(--pis-transition), opacity var(--pis-transition); }
.partners-track__item:hover { filter: none; opacity: 1; }
.partners-track__item img { height: 46px; width: auto; object-fit: contain; }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(120deg, var(--pis-blue), var(--pis-light-blue)); color: #fff; }
.cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 50px; flex-wrap: wrap; }
.cta-banner__text h2 { color: #fff; margin-bottom: .2em; }
.cta-banner__text p { color: rgba(255,255,255,.9); margin: 0; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background-size: cover; background-position: center; position: relative; color: #fff; padding-block: 70px; }
.page-hero__inner { position: relative; z-index: 2; text-align: center; }
.page-hero__title { color: #fff; margin-bottom: .3em; }
.page-hero__subtitle { color: rgba(255,255,255,.88); max-width: 640px; margin-inline: auto; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--pis-muted); }

/* ---------- About page ---------- */
.about-page__block { margin-bottom: 60px; }
.about-page__block--split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-page__grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-card { background: var(--pis-bg); border-radius: var(--pis-radius); padding: 28px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--pis-border); border-radius: var(--pis-radius-sm); padding: 16px 18px; font-weight: 700; }
.value-item__icon { color: var(--pis-blue); width: 26px; height: 26px; flex: none; display: inline-flex; overflow: hidden; }
.value-item__icon svg { width: 100%; height: 100%; }

/* ---------- Service page ---------- */
.service-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: start; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 30px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { width: 20px; height: 20px; color: var(--pis-blue); flex: none; margin-top: 3px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 20px 0 30px; }
.feature-grid__item { background: var(--pis-bg); border-radius: var(--pis-radius-sm); padding: 18px 20px; }
/* Every other icon usage in the theme has its own scoped size rule — the
   feature-grid icons (shipping-methods / packaging sections) were missing
   theirs, so they rendered at the browser's large intrinsic SVG size. */
.feature-grid__item svg { width: 28px; height: 28px; color: var(--pis-blue); margin-bottom: 10px; }
.feature-grid__item h3 { font-size: 1rem; margin-bottom: .3em; }
.process-timeline { margin: 24px 0 30px; }
.process-timeline__item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
.process-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 19px; top: 42px; bottom: 0; width: 2px; background: var(--pis-border); }
.process-timeline__number { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--pis-blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 1; }
.service-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0; }
.service-gallery img { border-radius: var(--pis-radius-sm); aspect-ratio: 1; object-fit: cover; }
.service-content__seo-note { font-size: .88rem; color: var(--pis-muted); border-top: 1px solid var(--pis-border); padding-top: 18px; margin-top: 20px; }
.service-sidebar__card { background: var(--pis-bg); border-radius: var(--pis-radius); padding: 26px; position: sticky; top: calc(var(--pis-header-h) + 20px); }
.service-sidebar__list { margin: 14px 0 22px; }
.service-sidebar__list li { border-bottom: 1px solid var(--pis-border); }
.service-sidebar__list a { display: block; padding: 12px 4px; font-weight: 600; }
.service-sidebar__list a:hover { color: var(--pis-blue); }

/* ---------- FAQ ---------- */
.faq-section { background: var(--pis-bg); }
.faq-accordion { max-width: 780px; margin-inline: auto; }
.faq-item { background: #fff; border: 1px solid var(--pis-border); border-radius: var(--pis-radius-sm); margin-bottom: 12px; overflow: hidden; }
.faq-item__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; font-weight: 700; text-align: start; }
.faq-item__icon { width: 20px; height: 20px; transition: transform var(--pis-transition); flex: none; }
.faq-item__question[aria-expanded="true"] .faq-item__icon { transform: rotate(180deg); }
.faq-item__answer { padding: 0 20px; }
.faq-item__answer p { padding-bottom: 18px; margin: 0; }

/* ---------- Contact page ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; }
.contact-info__list { margin: 20px 0 24px; display: flex; flex-direction: column; gap: 18px; }
.contact-info__list li { display: flex; gap: 14px; }
.contact-info__list svg { width: 22px; height: 22px; color: var(--pis-blue); flex: none; margin-top: 2px; }
.contact-info__list strong { display: block; font-size: .85rem; color: var(--pis-muted); font-weight: 600; }
.contact-map { border-radius: var(--pis-radius); overflow: hidden; }
.contact-map iframe { width: 100%; height: 280px; border: 0; display: block; }

/* ---------- Forms ---------- */
.pis-form__row { margin-bottom: 18px; }
.pis-form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pis-form__row--split-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pis-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.pis-form input[type="text"], .pis-form input[type="email"], .pis-form input[type="tel"], .pis-form input[type="number"], .pis-form input[type="search"], .pis-form select, .pis-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--pis-border);
	border-radius: var(--pis-radius-sm);
	background: var(--pis-bg);
	transition: border-color var(--pis-transition);
}
.pis-form input:focus, .pis-form select:focus, .pis-form textarea:focus { border-color: var(--pis-blue); background: #fff; }
.pis-form__checkbox label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.pis-form__checkbox input { margin-top: 4px; }
.pis-form__section-title { font-size: 1.1rem; margin: 26px 0 16px; padding-top: 10px; border-top: 1px solid var(--pis-border); }
.pis-form__section-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pis-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { padding: 16px 18px; border-radius: var(--pis-radius-sm); margin-bottom: 20px; font-weight: 600; }
.form-alert--success { background: #e6f6ec; color: #1c7a3d; }
.form-alert--error { background: #fdecec; color: #b3261e; }
.form-alert--error ul { list-style: disc; padding-inline-start: 20px; }
.quote-form-wrap, .contact-form-wrap { background: #fff; }

/* ---------- Coverage page ---------- */

/* ---------- Blog layout / single post ---------- */
.blog-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 46px; }
.single-post-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 46px; }
.single-post__meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--pis-muted); font-size: .88rem; margin-bottom: 24px; }
.single-post__meta span { display: flex; align-items: center; gap: 6px; }
.single-post__meta svg { width: 16px; height: 16px; }
.single-post__share { display: flex; align-items: center; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--pis-border); }
.single-post__share a, .single-post__share button { width: 38px; height: 38px; border-radius: 50%; background: var(--pis-bg); display: flex; align-items: center; justify-content: center; color: var(--pis-text); transition: background var(--pis-transition); }
.single-post__share a:hover, .single-post__share button:hover { background: var(--pis-blue); color: #fff; }
.single-post__share svg { width: 17px; height: 17px; }
.related-articles { margin-top: 50px; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: var(--pis-radius-sm); border: 1px solid var(--pis-border); font-weight: 600; padding-inline: 8px; }
.pagination .page-numbers.current { background: var(--pis-blue); color: #fff; border-color: var(--pis-blue); }
.pagination .page-numbers:hover:not(.current) { background: var(--pis-bg); }

/* ---------- Widgets / sidebar ---------- */
.widget { background: var(--pis-bg); border-radius: var(--pis-radius); padding: 22px; margin-bottom: 24px; }
.widget-title { font-size: 1rem; margin-bottom: 14px; }

/* ---------- Comments ---------- */
.comments-area { max-width: 800px; }
.comment-list { margin: 20px 0; }
.comment-list .comment { border: 1px solid var(--pis-border); border-radius: var(--pis-radius-sm); padding: 16px; margin-bottom: 14px; }
.comment-respond input, .comment-respond textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--pis-border); border-radius: var(--pis-radius-sm); margin-bottom: 12px; background: var(--pis-bg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--pis-navy-dark); color: rgba(255,255,255,.82); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-block: 60px; }
.footer-logo { margin-bottom: 16px; }
.footer-col h3 { color: #fff; font-size: 1.02rem; margin-bottom: 18px; }
.footer-menu li, .footer-contact-list li { margin-bottom: 12px; }
.footer-menu a:hover { color: #fff; }
.footer-contact-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.footer-contact-list svg { width: 18px; height: 18px; color: var(--pis-light-blue); flex: none; margin-top: 2px; }
.footer-contact-list a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social__link { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background var(--pis-transition); }
.footer-social__link:hover { background: var(--pis-light-blue); }
.footer-social__link svg { width: 17px; height: 17px; color: #fff; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; padding-block: 20px; flex-wrap: wrap; gap: 12px; font-size: .86rem; }
.footer-legal-menu { display: flex; gap: 20px; }
.footer-legal-menu a:hover { color: #fff; }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
	position: fixed;
	inset-inline-end: 24px;
	bottom: 24px;
	width: 58px; height: 58px;
	background: #25D366;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	z-index: 400;
	transition: transform var(--pis-transition);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; color: #fff; }

/* ---------- 404 ---------- */
.error-404-page__inner { text-align: center; max-width: 560px; margin-inline: auto; }
.error-404-page__code { display: block; font-size: clamp(4rem, 3rem + 4vw, 7rem); font-weight: 800; color: var(--pis-border); line-height: 1; }
.error-404-page__actions { display: flex; gap: 14px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.error-404-page__search { max-width: 380px; margin-inline: auto; }

/* ---------- Hero: food export link ---------- */
.hero__food-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.hero__food-link:hover { opacity: .85; }
.hero__food-link-icon { width: 18px; height: 18px; flex: none; }

/* ---------- Food Export section (homepage + landing page) ---------- */
.food-export-section { background: var(--pis-bg); }
.food-export-section__desc { max-width: 640px; color: var(--pis-muted); margin-top: 10px; }
.food-export-section__cta { text-align: center; margin-top: 30px; }
.food-export-section__empty { text-align: center; color: var(--pis-muted); padding: 30px 0; }
.food-export-grid { margin-top: 10px; }
.food-product-card__badge { position: absolute; inset-inline-start: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; background: rgba(5, 45, 92, .85); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.food-product-card__badge svg { width: 14px; height: 14px; }

/* Homepage-only compact treatment: noticeably smaller than the main
   Services section so it reads as one specialty, not a second pillar. */
.food-export-section--compact .food-export-section__title { font-size: 1.5rem; margin: .2em 0 .3em; }
.food-export-section--compact .section-header__eyebrow { font-size: .82rem; }
.food-export-section--compact .section-header--split > a { flex: none; }
.services-grid--3 { grid-template-columns: repeat(3, 1fr); }

.food-export-intro { max-width: 820px; margin-inline: auto; text-align: center; color: var(--pis-muted); font-size: 1.05rem; }
.food-export-methods__note { text-align: center; color: var(--pis-muted); margin-top: 22px; font-size: .92rem; }
.food-export-coldchain { background: var(--pis-bg); }
.food-export-coldchain__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.food-export-coldchain__media img { border-radius: var(--pis-radius); width: 100%; height: auto; }
.food-export-markets__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.food-export-markets__inner .btn { margin-top: 18px; }

.food-product-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0 30px; }
.food-product-facts__item { display: flex; align-items: center; gap: 12px; background: var(--pis-bg); border-radius: var(--pis-radius-sm); padding: 14px 16px; }
.food-product-facts__item svg { width: 24px; height: 24px; color: var(--pis-blue); flex: none; }
.food-product-facts__item strong { display: block; font-size: .82rem; color: var(--pis-muted); font-weight: 700; }
.food-product-facts__item span { font-weight: 700; }

/* ---------- Quote form: conditional food/agricultural fields ---------- */
.pis-form__conditional { border-top: 1px dashed var(--pis-border); padding-top: 20px; margin-top: 10px; }
.pis-form__hint { color: var(--pis-muted); font-size: .9rem; margin-top: -6px; margin-bottom: 16px; }

/* ---------- Footer: Google review link ---------- */
.footer-review-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; color: inherit; }
.footer-review-link svg { width: 18px; height: 18px; color: var(--pis-gold, #e6a723); }

/* ---------- Coming soon page (standalone, no header/footer) ----------
   Still deliberately minimal — logo, heading, nothing else — per request.
   The one accent is a "route line": a thin line with a travelling dot,
   echoing the shipping/logistics motif of the brand instead of a generic
   underline bar. It is the page's single motion moment. */
.coming-soon-page { margin: 0; }
.coming-soon {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	padding: 64px 20px 32px;
	background: radial-gradient(ellipse 60% 55% at 50% 36%, var(--pis-bg) 0%, #fff 72%);
}
.coming-soon__main {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.coming-soon__logo-wrap { position: relative; margin-bottom: 44px; }
.coming-soon__logo-wrap::before {
	content: "";
	position: absolute;
	inset: -34px;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(7, 139, 255, .16) 0%, rgba(7, 139, 255, 0) 70%);
}
.coming-soon__logo { position: relative; z-index: 1; display: block; width: min(230px, 56vw); height: auto; }
.coming-soon__title {
	color: var(--pis-navy);
	font-weight: 800;
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
	letter-spacing: -.01em;
	line-height: 1.25;
	margin: 0;
}
.coming-soon__route { position: relative; width: 130px; height: 20px; margin-top: 30px; display: flex; align-items: center; justify-content: center; }
.coming-soon__route::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--pis-border);
	transform: translateY(-50%);
}
.coming-soon__route-dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pis-blue);
	box-shadow: 0 0 0 4px rgba(7, 104, 215, .15);
	animation: pis-route-travel 3.2s ease-in-out infinite;
}
@keyframes pis-route-travel {
	0%, 100% { transform: translateX(-54px); }
	50% { transform: translateX(54px); }
}
@media (prefers-reduced-motion: reduce) {
	.coming-soon__route-dot { animation: none; }
}
.coming-soon__copyright { color: var(--pis-muted); font-size: .82rem; margin: 0; }
@media (max-width: 480px) {
	.coming-soon { padding: 48px 16px 24px; }
	.coming-soon__logo-wrap { margin-bottom: 32px; }
	.coming-soon__route { margin-top: 24px; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px) {
	.services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.site-header__nav { display: none; }
	.hamburger { display: flex; }
	.services-grid, .services-grid--archive, .services-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.blog-grid, .blog-grid--related { grid-template-columns: repeat(2, 1fr); }
	.trust-bar__grid, .statistics-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
	.about-section__grid, .about-page__block--split, .contact-layout, .service-layout, .blog-layout, .single-post-layout { grid-template-columns: 1fr; }
	.about-page__grid-3, .values-grid { grid-template-columns: repeat(2, 1fr); }
	.check-list, .feature-grid { grid-template-columns: 1fr; }
	.service-gallery { grid-template-columns: repeat(3, 1fr); }
	.service-sidebar__card { position: static; }
	.food-export-coldchain__grid { grid-template-columns: 1fr; }
	.food-product-facts { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
	.site-header__cta { display: none; }
	.services-grid, .services-grid--archive, .services-grid--3, .blog-grid, .blog-grid--related { grid-template-columns: 1fr; }
	.trust-bar__grid, .statistics-grid, .steps-grid, .about-page__grid-3, .values-grid { grid-template-columns: 1fr; }
	.pis-form__row--split, .pis-form__row--split-3 { grid-template-columns: 1fr; }
	.cta-banner__inner { flex-direction: column; text-align: center; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.section-header--split { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
	.container { padding-inline: 16px; }
	.about-features { grid-template-columns: 1fr; }
	.service-gallery { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr; }
	.hero { min-height: auto; padding-block: 90px 60px; }
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; }
}