/* =====================================================================
   Tafakor Pardazan — Design System
   Single stylesheet serves both fa (RTL) and en (LTR) via CSS logical
   properties (margin-inline, inset-inline-start, text-align:start, etc.)
   instead of a mirrored stylesheet — no [dir] duplication needed.
   ===================================================================== */

/* ---------- Design tokens ------------------------------------------- */
:root{
	/* brand palette — do not introduce colors outside this set */
	--c-navy:#021C25;
	--c-dark-teal:#091E27;
	--c-teal:#0E3338;
	--c-forest-teal:#053A3D;
	--c-green-teal:#165A54;
	--c-lime:#91DA73;
	--c-bright-green:#69B437;
	--c-forest-green:#23643D;
	--c-deep-green:#022C22;
	--c-white:#F6FAF8;

	--bg-primary: var(--c-navy);
	--bg-secondary: var(--c-dark-teal);
	--bg-card: var(--c-teal);
	--bg-card-alt: var(--c-forest-teal);
	--bg-deep: var(--c-deep-green);
	--accent: var(--c-lime);
	--accent-strong: var(--c-bright-green);
	--accent-deep: var(--c-forest-green);

	--text-primary: var(--c-white);
	--text-muted: rgba(246,250,248,.68);
	--text-faint: rgba(246,250,248,.46);
	--border-soft: rgba(246,250,248,.12);
	--border-strong: rgba(145,218,115,.35);

	/* spacing scale — Spectrum-style 4px ramp, name = value*100 in px units of 4 */
	--space-100: 4px;
	--space-200: 8px;
	--space-300: 12px;
	--space-400: 16px;
	--space-500: 20px;
	--space-600: 24px;
	--space-700: 28px;
	--space-800: 32px;
	--space-900: 40px;
	--space-1000: 48px;
	--space-1100: 56px;
	--space-1200: 64px;
	--space-1300: 72px;
	--space-1400: 80px;

	/* corner radius scale */
	--radius-100: 8px;   /* tags, small controls */
	--radius-200: 12px;  /* buttons, inputs */
	--radius-300: 16px;  /* cards */
	--radius-400: 24px;  /* large media / hero surfaces */
	--radius-full: 999px;
	--radius-sm: var(--radius-100);
	--radius-md: var(--radius-300);
	--radius-lg: var(--radius-400);

	/* elevation — subtle, layered shadows */
	--elevation-1: 0 1px 2px rgba(2,12,16,.28);
	--elevation-2: 0 8px 24px rgba(2,12,16,.28);
	--elevation-3: 0 16px 40px rgba(2,12,16,.38);
	--shadow-card: var(--elevation-2);
	--shadow-lift: var(--elevation-3);

	/* motion — fast, purposeful, never decorative */
	--motion-fast: 130ms;
	--motion-regular: 190ms;
	--motion-slow: 320ms;
	--ease-out: cubic-bezier(.32,.72,0,1);

	--container: 1240px;
	--space-section: clamp(var(--space-1200), 9vw, 128px);

	--font-fa: 'Vazir', Tahoma, 'Segoe UI', sans-serif;
	--font-en: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	color-scheme: dark;
}

html[lang^="fa"] body,
body.is-rtl{ font-family: var(--font-fa); }
html[lang^="en"] body,
body.is-ltr{ font-family: var(--font-en); }

/* ---------- Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	*,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
	margin:0;
	background:var(--bg-primary);
	color:var(--text-primary);
	font-size:16px;
	line-height:1.75;
	font-weight:400;
	overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
input,textarea,select{ font:inherit; color:inherit; }

h1,h2,h3,h4{ font-weight:700; line-height:1.35; letter-spacing:-0.01em; }
h1{ font-size:clamp(2rem, 3.4vw, 3.1rem); }
h2{ font-size:clamp(1.5rem, 2.4vw, 2.2rem); }
h3{ font-size:1.15rem; }

/* numerals always render LTR even inside RTL Persian text */
.tp-numeral, .tp-project-meta dd, .tp-steps__number{ direction:ltr; unicode-bidi:isolate; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-100); }

.screen-reader-text{
	position:absolute !important;
	inset-inline-start:-9999px;
	width:1px; height:1px; overflow:hidden;
}
.tp-skip-link{
	position:fixed; inset-block-start:-60px; inset-inline-start:12px; z-index:1000;
	background:var(--accent); color:var(--c-navy); padding:10px 18px; border-radius:var(--radius-sm);
	font-weight:700; transition:inset-block-start var(--motion-fast) var(--ease-out);
}
.tp-skip-link:focus{ position:fixed; inset-block-start:12px; width:auto; height:auto; }

/* ---------- Layout ------------------------------------------------- */
.tp-container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--space-500); }
@media (min-width:640px){ .tp-container{ padding-inline:var(--space-800); } }

.tp-section{ padding-block:var(--space-section); }
.tp-section--alt{ background:var(--bg-secondary); }

.tp-section__head{ max-width:640px; margin-block-end:var(--space-1100); }
.tp-section__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-500); flex-wrap:wrap; max-width:none; }
.tp-section__title{ margin-block-start:var(--space-300); }

.tp-eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-size:.8rem; font-weight:700; letter-spacing:.02em;
	color:var(--accent); text-transform:none;
}
.tp-eyebrow::before{
	content:""; width:8px; height:8px; border-radius:50%;
	background:var(--accent-strong); flex:none;
}

.tp-grid{ display:grid; gap:var(--space-600); }
.tp-grid--3{ grid-template-columns:repeat(3,1fr); }
.tp-grid--4{ grid-template-columns:repeat(4,1fr); }
.tp-grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){
	.tp-grid--3, .tp-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
	.tp-grid--2, .tp-grid--3, .tp-grid--4{ grid-template-columns:1fr; }
}

/* ---------- Buttons ----------------------------------------------------
   Component heights follow a Spectrum-style size ramp: sm=32px, md(default)
   =40px, lg=48px — set via block padding plus a fixed line-height, so every
   button in the system sits on the same baseline grid regardless of label
   length. ------------------------------------------------------------- */
.tp-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:var(--space-200);
	min-height:40px; padding-inline:var(--space-600); padding-block:0;
	border-radius:var(--radius-200);
	font-weight:700; font-size:.95rem; line-height:1;
	transition:transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
	border:1.5px solid transparent; white-space:nowrap;
}
.tp-btn--primary{ background:var(--accent); color:var(--c-navy); box-shadow:var(--elevation-1); }
.tp-btn--primary:hover{ background:var(--accent-strong); transform:translateY(-2px); box-shadow:var(--elevation-2); }
.tp-btn--primary:active{ transform:translateY(0); box-shadow:var(--elevation-1); }
.tp-btn--ghost{ border-color:var(--border-soft); color:var(--text-primary); }
.tp-btn--ghost:hover{ border-color:var(--border-strong); background:rgba(145,218,115,.08); }
.tp-btn--outline{ border-color:var(--accent-strong); color:var(--accent); }
.tp-btn--outline:hover{ background:rgba(145,218,115,.1); }
.tp-btn--lg{ min-height:48px; padding-inline:var(--space-800); font-size:1rem; }
.tp-btn--sm{ min-height:32px; padding-inline:var(--space-400); font-size:.85rem; }

.tp-link-arrow{
	display:inline-flex; align-items:center; gap:6px;
	color:var(--accent); font-weight:700; font-size:.92rem;
	border-block-end:1px solid transparent; transition:border-color var(--motion-fast) var(--ease-out), gap var(--motion-fast) var(--ease-out);
}
.tp-link-arrow::after{ content:"\2190"; }
html[dir="ltr"] .tp-link-arrow::after{ content:"\2192"; }
.tp-link-arrow:hover{ border-block-end-color:var(--accent); gap:10px; }

/* ---------- Header ----------------------------------------------------- */
.tp-header{
	position:sticky; inset-block-start:0; z-index:100;
	background:rgba(2,28,37,.82);
	backdrop-filter:saturate(140%) blur(10px);
	-webkit-backdrop-filter:saturate(140%) blur(10px);
	border-block-end:1px solid var(--border-soft);
	transition:box-shadow var(--motion-regular) var(--ease-out);
}
.tp-header.is-scrolled{ box-shadow:0 8px 24px rgba(2,12,16,.3); }
.tp-header__inner{ display:flex; align-items:center; gap:24px; min-height:76px; }
.tp-header__brand{ margin-inline-end:auto; }
.tp-logo{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; color:var(--text-primary); }
.tp-logo__mark{ display:inline-flex; }
.custom-logo{ max-height:48px; width:auto; }

.tp-nav{ flex:1; }
.tp-nav__list{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.tp-nav__list a{ font-size:.95rem; font-weight:500; color:var(--text-muted); padding-block:8px; position:relative; }
.tp-nav__list a:hover,
.tp-nav__list .current-menu-item > a{ color:var(--text-primary); }
.tp-nav__list .current-menu-item > a::after{
	content:""; position:absolute; inset-inline:0; inset-block-end:0; height:2px; background:var(--accent); border-radius:2px;
}
.tp-nav__list ul{ /* submenu */
	position:absolute; inset-inline-start:0; inset-block-start:100%;
	background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
	padding:8px; min-width:200px; box-shadow:var(--shadow-card);
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), visibility var(--motion-fast) var(--ease-out);
}
.tp-nav__list li{ position:relative; }
.tp-nav__list li:hover > ul,
.tp-nav__list li:focus-within > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.tp-nav__list ul a{ display:block; padding:8px 10px; border-radius:8px; }
.tp-nav__list ul a:hover{ background:rgba(145,218,115,.08); }

.tp-header__actions{ display:flex; align-items:center; gap:14px; }
.tp-header__cta{ white-space:nowrap; }

.tp-lang-switch{ display:flex; align-items:center; gap:4px; border:1px solid var(--border-soft); border-radius:999px; padding:3px; }
.tp-lang-switch__item{ padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:700; color:var(--text-muted); }
.tp-lang-switch__item.is-active{ background:var(--accent); color:var(--c-navy); }

.tp-nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.tp-nav-toggle__bar{ width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform var(--motion-regular) var(--ease-out), opacity var(--motion-regular) var(--ease-out); }
.tp-nav-toggle[aria-expanded="true"] .tp-nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.tp-nav-toggle[aria-expanded="true"] .tp-nav-toggle__bar:nth-child(2){ opacity:0; }
.tp-nav-toggle[aria-expanded="true"] .tp-nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:980px){
	.tp-nav{
		position:fixed; inset:76px 0 0 0; background:var(--bg-primary);
		padding:28px 20px; overflow-y:auto;
		transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
		transition:opacity var(--motion-regular) var(--ease-out), transform var(--motion-regular) var(--ease-out), visibility var(--motion-regular) var(--ease-out);
	}
	.tp-nav.is-open{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
	.tp-nav__list{ flex-direction:column; align-items:stretch; gap:4px; }
	.tp-nav__list a{ padding:14px 4px; border-block-end:1px solid var(--border-soft); }
	.tp-nav__list ul{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding-inline-start:16px; display:none; }
	.tp-nav__list li.is-expanded > ul{ display:block; }
	.tp-header__cta{ display:none; }
	.tp-nav-toggle{ display:inline-flex; }
}

/* ---------- Hero --------------------------------------------------- */
.tp-hero{ position:relative; padding-block:clamp(56px,8vw,110px); overflow:hidden; }
.tp-hero::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background:
		radial-gradient(60% 55% at 75% 15%, rgba(22,90,84,.55), transparent 65%),
		radial-gradient(45% 45% at 10% 85%, rgba(35,100,61,.35), transparent 65%),
		var(--bg-primary);
}
.tp-hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.tp-hero__title{ margin-block-start:16px; }
.tp-hero__sub{ margin-block-start:18px; max-width:52ch; color:var(--text-muted); font-size:1.05rem; }
.tp-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-block-start:32px; }
.tp-hero__visual{ display:flex; justify-content:center; }

/* ---------- Hero stats band -------------------------------------------
   A standalone band directly under the hero: a single continuous circuit
   trace running through all three nodes (alternating solid circle / hollow
   square), echoing the node-and-edge language of the hero diagram above —
   a readout pulled from the same visual system, not a generic stats strip.
   The trace is one unbroken line (not three disconnected segments) so it
   reads as a literal signal path, with each fact as a tap point on it. */
.tp-hero-band{
	background:var(--bg-secondary);
	border-block:1px solid var(--border-soft);
	padding-block:var(--space-1100);
}
.tp-hero__stats{
	position:relative;
	display:flex; justify-content:space-between;
	width:668px; max-width:100%; margin-inline:auto;
}
.tp-hero__stats::before{
	content:""; position:absolute; inset-block-start:13px; inset-inline:90px;
	height:1px;
	background:linear-gradient(to right, transparent, var(--border-soft) 12%, var(--border-soft) 88%, transparent);
}
.tp-hero__stat{
	flex:0 0 180px; position:relative;
	padding-block-start:28px; text-align:center;
}
.tp-hero__stat::after{
	content:""; position:absolute; inset-block-start:8px; inset-inline-start:50%;
	transform:translateX(-50%); width:12px; height:12px; border-radius:50%;
	background:var(--accent); box-shadow:0 0 0 5px var(--bg-secondary);
}
.tp-hero__stat:nth-child(2)::after{
	border-radius:3px; background:var(--bg-secondary); border:2px solid var(--accent-strong);
	width:11px; height:11px;
}
.tp-hero__stat dt{ font-size:.8rem; letter-spacing:.01em; color:var(--text-faint); margin-block-end:11px; }
.tp-hero__stat dd{ font-weight:700; font-size:1.25rem; color:var(--text-primary); line-height:1.3; }
@media (max-width:640px){
	.tp-hero-band{ padding-block:var(--space-900); }
	.tp-hero__stats{ flex-direction:column; align-items:center; gap:var(--space-700); width:auto; }
	.tp-hero__stats::before{ content:none; }
	.tp-hero__stat{ flex:0 0 auto; width:auto; min-width:160px; }
	.tp-hero__stat dd{ font-size:1.1rem; }
}
.tp-hero__diagram{ width:100%; max-width:460px; }
.tp-hero__photo{
	width:100%; max-width:460px; aspect-ratio:1/1; border-radius:var(--radius-400);
	overflow:hidden; box-shadow:var(--elevation-3); border:1px solid var(--border-soft);
}
.tp-hero__photo img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:980px){
	.tp-hero__inner{ grid-template-columns:1fr; }
	.tp-hero__visual{ order:-1; max-width:340px; margin-inline:auto; }
}

/* ---------- Cards ---------------------------------------------------- */
.tp-card{
	background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md);
	overflow:hidden; display:flex; flex-direction:column;
	transition:transform var(--motion-regular) var(--ease-out), box-shadow var(--motion-regular) var(--ease-out), border-color var(--motion-regular) var(--ease-out);
}
.tp-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--border-strong); }
.tp-card--capability{ padding:30px 26px; gap:14px; }
/* Icon + title sit in a row wherever a card carries both (capability,
   solution, why-us, and the About-page expertise grid all reuse this). */
.tp-card__head{ display:flex; align-items:center; gap:14px; }
.tp-card__head .tp-card__title{ margin:0; }
.tp-card--product, .tp-card--project{ padding:0; }
.tp-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; display:block; background:var(--bg-deep); }
.tp-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--motion-slow) var(--ease-out); }
.tp-card:hover .tp-card__media img{ transform:scale(1.05); }
.tp-card__body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tp-card__title{ font-size:1.1rem; }
.tp-card__title a:hover{ color:var(--accent); }
.tp-card__text{ color:var(--text-muted); font-size:.95rem; }

.tp-card__icon{
	display:inline-flex; align-items:center; justify-content:center;
	width:48px; height:48px; border-radius:var(--radius-sm);
	background:rgba(145,218,115,.12); color:var(--accent); flex:none;
}
.tp-card__icon--outline{ background:transparent; border:1.5px solid var(--border-strong); }
.tp-card__icon--lg{ width:64px; height:64px; }
.tp-icon{ width:24px; height:24px; }
.tp-card__icon--lg .tp-icon{ width:32px; height:32px; }

.tp-badge{
	position:absolute; inset-inline-start:14px; inset-block-start:14px;
	background:rgba(2,28,37,.75); color:var(--accent);
	font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:999px;
	backdrop-filter:blur(4px);
}
.tp-tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:6px; }
.tp-tag-list li{ font-size:.75rem; color:var(--text-muted); border:1px solid var(--border-soft); padding:4px 10px; border-radius:999px; }

/* ---------- Placeholder illustration ---------------------------------- */
.tp-placeholder{ width:100%; height:100%; }

/* ---------- Capabilities / Why-us grids -------------------------------- */
.tp-why-card{ padding:28px 24px; border:1px solid var(--border-soft); border-radius:var(--radius-md); background:var(--bg-primary); display:flex; flex-direction:column; gap:14px; }

/* ---------- Solutions asymmetric grid ---------------------------------- */
.tp-solutions__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tp-solution-card{
	background:var(--bg-card-alt); border:1px solid var(--border-soft); border-radius:var(--radius-md);
	padding:28px 24px; display:flex; flex-direction:column; gap:14px;
	transition:transform var(--motion-regular) var(--ease-out), border-color var(--motion-regular) var(--ease-out);
}
.tp-solution-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.tp-solution-card--lg{ grid-column:span 2; grid-row:span 2; background:var(--bg-deep); padding:40px 34px; justify-content:center; }
.tp-solution-card--lg .tp-card__title{ font-size:1.4rem; }
@media (max-width:980px){
	.tp-solutions__grid{ grid-template-columns:repeat(2,1fr); }
	.tp-solution-card--lg{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:640px){
	.tp-solutions__grid{ grid-template-columns:1fr; }
	.tp-solution-card--lg{ grid-column:auto; padding:28px 24px; }
}

/* ---------- About teaser ------------------------------------------------ */
.tp-about-teaser__inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.tp-about-teaser__visual{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--elevation-2); }
.tp-about-teaser__visual img{ width:100%; height:100%; object-fit:cover; }
.tp-about-teaser__text{ color:var(--text-muted); margin-block:18px 28px; max-width:56ch; }
@media (max-width:980px){ .tp-about-teaser__inner{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------------------------------------------------- */
.tp-cta-band{
	padding-block:var(--space-section);
	background:linear-gradient(135deg, var(--c-forest-green), var(--c-deep-green) 70%);
	text-align:center;
}
.tp-cta-band__inner{ max-width:640px; margin-inline:auto; }
.tp-cta-band__sub{ color:var(--text-muted); margin-block:16px 32px; }

/* ---------- Footer -------------------------------------------------- */
.tp-footer{ background:var(--bg-deep); border-block-start:1px solid var(--border-soft); }
.tp-footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-block:64px; }
.tp-footer__brand{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.tp-footer__desc{ color:var(--text-muted); font-size:.92rem; max-width:34ch; }
.tp-footer__title{ font-size:.95rem; margin-block-end:18px; color:var(--text-primary); }
.tp-footer__list{ display:flex; flex-direction:column; gap:12px; }
.tp-footer__list a{ color:var(--text-muted); font-size:.92rem; }
.tp-footer__list a:hover{ color:var(--accent); }
.tp-footer__list--contact li{ color:var(--text-muted); font-size:.92rem; }
.tp-footer__address{ color:var(--text-faint); }
.tp-social{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:18px; }
.tp-social__link{ font-size:.78rem; font-weight:700; border:1px solid var(--border-soft); padding:7px 14px; border-radius:999px; color:var(--text-muted); }
.tp-social__link:hover{ color:var(--accent); border-color:var(--border-strong); }
.tp-footer__bottom{ border-block-start:1px solid var(--border-soft); padding-block:22px; }
.tp-footer__bottom-inner p{ color:var(--text-faint); font-size:.82rem; text-align:center; }

@media (max-width:980px){ .tp-footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .tp-footer__top{ grid-template-columns:1fr; } }

/* ---------- Generic page header/content -------------------------------- */
.tp-page__header{ padding-block:56px 40px; background:var(--bg-secondary); border-block-end:1px solid var(--border-soft); }
.tp-page__title{ margin-block-start:10px; }
.tp-page__lead{ margin-block-start:16px; color:var(--text-muted); max-width:60ch; }
.tp-page__content{ padding-block:56px; max-width:840px; }
.tp-page__content p{ color:var(--text-muted); margin-block-end:1.2em; }
.tp-page__content h2{ margin-block:1.4em .6em; }
.tp-page__content ul{ list-style:disc; padding-inline-start:1.4em; color:var(--text-muted); margin-block-end:1.2em; }
.tp-page__content ul li{ margin-block-end:.4em; }
.tp-page__content img{ border-radius:var(--radius-md); margin-block:1.4em; }
.tp-page__thumb{ margin-block-end:28px; border-radius:var(--radius-lg); overflow:hidden; }

/* ---------- Closing CTA panel (single service/solution/product/project) --
   Sits inside the page container rather than as a full-bleed band, and
   carries its own bottom margin so it never butts up against the footer. */
.tp-page-cta{ margin-block:var(--space-400) var(--space-section); }
.tp-page-cta__panel{
	display:flex; align-items:center; justify-content:space-between; gap:var(--space-800);
	padding:var(--space-1000) var(--space-1100);
	background:
		radial-gradient(70% 120% at 0% 0%, rgba(145,218,115,.10), transparent 60%),
		linear-gradient(135deg, var(--c-forest-green), var(--c-deep-green) 75%);
	border:1px solid var(--border-strong); border-radius:var(--radius-400);
	box-shadow:var(--elevation-2);
}
.tp-page-cta__text{ max-width:52ch; }
.tp-page-cta__title{ font-size:clamp(1.3rem, 2vw, 1.7rem); }
.tp-page-cta__sub{ margin-block-start:var(--space-300); color:var(--text-muted); }
.tp-page-cta__actions{ display:flex; flex-direction:column; align-items:center; gap:var(--space-400); flex:none; }
@media (max-width:760px){
	.tp-page-cta__panel{ flex-direction:column; align-items:stretch; text-align:center; padding:var(--space-900) var(--space-600); gap:var(--space-600); }
	.tp-page-cta__text{ max-width:none; }
	.tp-page-cta__actions .tp-btn{ width:100%; }
}

/* ---------- About: profile (photo + flowing text, no boxed callouts) --- */
.tp-about-profile__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.tp-about-profile__photo{
	border-radius:var(--radius-400); overflow:hidden; box-shadow:var(--elevation-2);
	aspect-ratio:4/3; position:sticky; inset-block-start:100px;
}
.tp-about-profile__photo img{ width:100%; height:100%; object-fit:cover; }
.tp-about-profile__text p{ color:var(--text-muted); margin-block-end:1.2em; }
.tp-about-profile__mission{
	color:var(--text-primary) !important; font-size:1.15rem; font-weight:600; line-height:1.6;
	padding-inline-start:20px; border-inline-start:2px solid var(--accent-strong);
}
.tp-about-profile__tags{ margin-block-start:32px; }
.tp-about-profile__tags-label{ display:block; font-size:.82rem; color:var(--text-faint); margin-block-end:10px; }
.tp-tag-list--lg{ gap:10px; margin-block-start:0; }
.tp-tag-list--lg li{ font-size:.85rem; padding:7px 16px; }
@media (max-width:980px){
	.tp-about-profile__grid{ grid-template-columns:1fr; gap:32px; }
	.tp-about-profile__photo{ position:static; aspect-ratio:16/9; }
}

/* ---------- About: approach as a schematic trace (echoes hero stats) --- */
.tp-approach-trace{
	display:flex; gap:var(--space-600); margin-block-start:var(--space-900);
	flex-wrap:wrap;
}
.tp-approach-trace__item{
	flex:1; min-width:200px; position:relative; padding-block-start:26px;
}
.tp-approach-trace__item::before{
	content:""; position:absolute; inset-inline:0; inset-block-start:11px; height:1px; background:var(--border-soft);
}
.tp-approach-trace__item::after{
	content:""; position:absolute; inset-block-start:6px; inset-inline-start:0;
	width:11px; height:11px; border-radius:50%; background:var(--accent);
	box-shadow:0 0 0 4px var(--bg-secondary);
}
.tp-approach-trace__item:nth-child(2n)::after{
	border-radius:3px; background:var(--bg-secondary); border:2px solid var(--accent-strong); width:10px; height:10px;
}
.tp-approach-trace__item .tp-card__title{ margin-block-end:8px; }
@media (max-width:640px){
	.tp-approach-trace{ flex-direction:column; gap:var(--space-700); }
}

/* ---------- Team section (About page) — scroll-snap carousel ------------
   Native overflow-x scrolling + scroll-snap-align, no JS carousel library:
   touch/trackpad scrolling works for free. Prev/next sit directly on the
   list itself — one flanking each side, vertically centered — rather than
   detached up in the section header, so their relationship to what they
   control is immediate. The track reserves a gutter so they never sit on
   top of a card. */
.tp-team-carousel{ margin-block-start:36px; position:relative; }
.tp-team-track{
	display:flex; gap:var(--space-600);
	overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
	scrollbar-width:none; -ms-overflow-style:none;
	padding-block:4px; padding-inline:60px;
}
@media (prefers-reduced-motion: reduce){
	.tp-team-track{ scroll-behavior:auto; }
}
.tp-team-track::-webkit-scrollbar{ display:none; }

.tp-team-nav__btn{
	position:absolute; inset-block-start:50%; transform:translateY(-50%); z-index:2;
	width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:var(--bg-card); border:1px solid var(--border-soft); color:var(--text-muted);
	box-shadow:var(--elevation-2);
	transition:border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.tp-team-nav__btn--prev{ inset-inline-start:0; }
.tp-team-nav__btn--next{ inset-inline-end:0; }
.tp-team-nav__btn:hover{ border-color:var(--border-strong); color:var(--accent); background:rgba(145,218,115,.08); }
.tp-team-nav__btn:disabled{ opacity:.35; pointer-events:none; }
/* Chevrons point the reading-flow direction; flip them for RTL so "next"
   still visually points toward where new cards scroll in from. */
html[dir="rtl"] .tp-team-nav__btn svg{ transform:scaleX(-1); }
@media (max-width:640px){
	.tp-team-track{ padding-inline:44px; }
	.tp-team-nav__btn{ width:36px; height:36px; }
}
.tp-team-card{
	display:flex; flex-direction:column; align-items:center; text-align:center;
	gap:4px; padding:var(--space-800) var(--space-600);
	background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-300);
	transition:transform var(--motion-regular) var(--ease-out), border-color var(--motion-regular) var(--ease-out), box-shadow var(--motion-regular) var(--ease-out);
	flex:0 0 240px; scroll-snap-align:start;
}
.tp-team-card:hover, .tp-team-card:focus-visible{
	transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--elevation-2);
}
.tp-team-card__media{
	width:104px; height:104px; border-radius:50%; overflow:hidden; flex:none;
	background:var(--bg-deep); margin-block-end:var(--space-400);
	border:1px solid var(--border-soft);
}
.tp-team-card__media img{ width:100%; height:100%; object-fit:cover; }
.tp-team-card__media .tp-placeholder{ width:100%; height:100%; }
.tp-team-card__name{ font-weight:700; font-size:1.02rem; color:var(--text-primary); }
.tp-team-card__role{ font-size:.85rem; color:var(--text-faint); }

/* Native <dialog> — its own UA styles handle centering + the inert
   background automatically; we only reset the box and restyle it. */
.tp-team-dialog{
	position:relative;
	border:1px solid var(--border-soft); border-radius:var(--radius-400);
	background:var(--bg-card); color:var(--text-primary);
	padding:0; width:min(560px, 92vw); max-height:min(640px, 86vh);
	box-shadow:var(--elevation-3);
}
.tp-team-dialog::backdrop{ background:rgba(2,12,16,.72); }
@starting-style{
	.tp-team-dialog[open]{ opacity:0; transform:scale(.97); }
}
.tp-team-dialog[open]{
	opacity:1; transform:scale(1);
	transition:opacity var(--motion-regular) var(--ease-out), transform var(--motion-regular) var(--ease-out), overlay var(--motion-regular) allow-discrete, display var(--motion-regular) allow-discrete;
}
.tp-team-dialog__close{
	position:absolute; inset-block-start:var(--space-400); inset-inline-end:var(--space-400);
	width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	color:var(--text-muted); background:transparent; transition:background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.tp-team-dialog__close:hover{ background:rgba(145,218,115,.1); color:var(--accent); }
.tp-team-dialog__content{ overflow-y:auto; max-height:min(640px, 86vh); padding:var(--space-900); }
.tp-team-modal__media{
	width:96px; height:96px; border-radius:50%; overflow:hidden;
	margin-block-end:var(--space-500); border:1px solid var(--border-soft); background:var(--bg-deep);
}
.tp-team-modal__media img{ width:100%; height:100%; object-fit:cover; }
.tp-team-modal__name{ font-size:1.3rem; }
.tp-team-modal__role{ color:var(--accent); font-size:.9rem; font-weight:700; margin-block-start:4px; }
.tp-team-modal__desc{ color:var(--text-muted); margin-block-start:var(--space-500); }
.tp-team-modal__desc p{ margin-block-end:1em; }
.tp-team-modal__links{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:var(--space-600); }
.tp-team-modal__links a{
	font-size:.82rem; font-weight:700; color:var(--accent); border:1px solid var(--border-strong);
	padding:7px 16px; border-radius:var(--radius-full);
}
.tp-team-modal__links a:hover{ background:rgba(145,218,115,.1); }
@media (max-width:640px){
	.tp-team-dialog{ width:94vw; max-height:88vh; }
	.tp-team-dialog__content{ padding:var(--space-700); max-height:88vh; }
}

/* ---------- Contact page ------------------------------------------------ */
.tp-contact__grid{ display:grid; grid-template-columns:1.3fr .8fr; gap:48px; padding-block:56px; align-items:start; }
.tp-notice{ background:var(--bg-card); border:1px dashed var(--border-strong); border-radius:var(--radius-md); padding:20px 24px; margin-block-end:24px; color:var(--text-muted); }
.tp-contact__info-card{ background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:28px; position:sticky; inset-block-start:100px; }
.tp-contact__list{ display:flex; flex-direction:column; gap:18px; margin-block:20px; }
.tp-contact__list li{ display:flex; gap:12px; align-items:flex-start; }
.tp-contact__list strong{ display:block; font-size:.82rem; color:var(--text-faint); margin-block-end:2px; }
.tp-contact__list a{ color:var(--text-primary); font-weight:600; }
.tp-contact__list a:hover{ color:var(--accent); }
@media (max-width:980px){ .tp-contact__grid{ grid-template-columns:1fr; } .tp-contact__info-card{ position:static; } }

/* Contact Form 7 baseline styling */
.wpcf7-form p{ margin-block-end:18px; }
.wpcf7-form label{ display:block; margin-block-end:8px; font-size:.9rem; color:var(--text-muted); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
	width:100%; padding:13px 16px; border-radius:var(--radius-sm);
	border:1.5px solid var(--border-soft); background:var(--bg-card);
	color:var(--text-primary);
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus{ border-color:var(--accent-strong); }
.wpcf7-form input[type="submit"]{
	background:var(--accent); color:var(--c-navy); border:0; border-radius:var(--radius-sm);
	padding:14px 30px; font-weight:700; cursor:pointer;
}
.wpcf7-form input[type="submit"]:hover{ background:var(--accent-strong); }
.wpcf7-not-valid-tip{ color:#ff9d9d; font-size:.82rem; margin-block-start:4px; }
.wpcf7-response-output{ border-radius:var(--radius-sm); padding:12px 16px !important; margin-block-start:16px !important; }

/* ---------- Product / Project single header ---------------------------- */
.tp-page__header--media{ background:var(--bg-secondary); padding-block:0; overflow:hidden; }
.tp-product-hero{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding-block:48px; }
.tp-product-hero__media{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.tp-product-hero__media img{ width:100%; height:100%; object-fit:cover; }
.tp-project-meta{ display:flex; gap:28px; margin-block-start:20px; }
.tp-project-meta dt{ font-size:.78rem; color:var(--text-faint); }
.tp-project-meta dd{ font-weight:700; }
@media (max-width:980px){ .tp-product-hero{ grid-template-columns:1fr; padding-block:32px; } }

/* ---------- Pagination / empty state ------------------------------------ */
.tp-pagination{ display:flex; justify-content:center; gap:10px; margin-block-start:48px; }
.tp-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--border-soft); color:var(--text-muted); padding-inline:10px; }
.tp-pagination .page-numbers.current{ background:var(--accent); color:var(--c-navy); border-color:var(--accent); }
.tp-empty-state{ text-align:center; padding-block:60px; color:var(--text-muted); }

/* ---------- 404 ---------------------------------------------------------- */
.tp-404__inner{ text-align:center; max-width:520px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:18px; }
.tp-404__code{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(145,218,115,.1); color:var(--accent); }
.tp-404__code .tp-icon{ width:36px; height:36px; }

/* ---------- Floating WhatsApp button --------------------------------------
   Fixed at a physical screen corner (not logical inset-inline) — a chat
   launcher is persistent UI chrome, not content, so it stays in the corner
   users expect regardless of fa/en text direction. */
.tp-whatsapp-float{
	position:fixed; z-index:90;
	bottom:max(20px, env(safe-area-inset-bottom, 0px));
	right:20px;
	width:56px; height:56px; border-radius:50%;
	background:var(--accent-strong); color:var(--c-navy);
	display:flex; align-items:center; justify-content:center;
	box-shadow:var(--elevation-3);
	transition:transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.tp-whatsapp-float:hover{ background:var(--accent); transform:translateY(-2px) scale(1.04); }
.tp-whatsapp-float svg{ width:28px; height:28px; }
@media (max-width:640px){
	.tp-whatsapp-float{ width:50px; height:50px; right:16px; }
	.tp-whatsapp-float svg{ width:25px; height:25px; }
}