/* =========================================================================
   Web Negar Mahabad — Design System
   مدرن، مینیمال، تکنولوژی‌محور. فضای سفید کافی، آیکون خطی، بدون شلوغی.
   ========================================================================= */

/* ---------- 1. Design tokens ------------------------------------------- */
:root{
	/* Color */
	--ink:        #10151F;
	--ink-soft:   #4B5568;
	--ink-faint:  #8993A6;
	--paper:      #FFFFFF;
	--paper-soft: #F5F7FA;
	--paper-deep: #EEF1F6;
	--line:       #E4E8EF;
	--line-soft:  #EEF1F5;
	--brand:      #0B84FF;
	--brand-deep: #0662C7;
	--brand-ink:  #063B84;
	--brand-soft: #EAF3FF;
	--brand-soft-2: #DCEBFF;

	/* Type */
	--font-base: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--fs-xs:  0.8125rem;
	--fs-sm:  0.9375rem;
	--fs-base:1rem;
	--fs-md:  1.125rem;
	--fs-lg:  1.375rem;
	--fs-xl:  1.75rem;
	--fs-2xl: 2.25rem;
	--fs-3xl: 3rem;
	--fs-4xl: 3.6rem;

	--lh-tight: 1.2;
	--lh-normal: 1.55;
	--lh-loose: 1.85;

	/* Space */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	/* Shape */
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* Shadow — subtle only, per brand guidance */
	--shadow-xs: 0 1px 2px rgba(16,21,31,.05);
	--shadow-sm: 0 6px 16px -10px rgba(16,21,31,.18);
	--shadow-md: 0 16px 40px -20px rgba(16,21,31,.22);

	--ease: cubic-bezier(.4,0,.2,1);
	--container-w: 1280px;
}

/* ---------- 2. Reset ----------------------------------------------------*/
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--font-base);
	font-size:var(--fs-base);
	line-height:var(--lh-normal);
	color:var(--ink);
	background:var(--paper);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,button{ font-family:inherit; font-size:inherit; color:inherit; }
svg{ display:block; }

.icon{ width:1em; height:1em; }

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	*, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{
	position:fixed; inset-inline-start:-999px; top:1rem; z-index:999;
	background:var(--ink); color:#fff; padding:.75rem 1.25rem; border-radius:var(--radius-sm);
}
.skip-link:focus{ inset-inline-start:1rem; }

:focus-visible{ outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---------- 3. Layout helpers -------------------------------------------*/
.container{
	width:100%;
	max-width:var(--container-w);
	margin-inline:auto;
	padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}
.section{ padding-block:var(--sp-9); }
.section--tight{ padding-block:var(--sp-8); }
.section--soft{ background:var(--paper-soft); }

.section-head{
	max-width:640px;
	margin-bottom:var(--sp-7);
}
.section-head.is-center{ margin-inline:auto; text-align:center; }
.section-head--split{
	max-width:none;
	display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-6);
}

.eyebrow{
	display:inline-flex; align-items:center; gap:.5em;
	font-family:var(--font-mono);
	font-size:var(--fs-xs);
	letter-spacing:.06em;
	color:var(--brand-deep);
	background:var(--brand-soft);
	padding:.4em .9em;
	border-radius:var(--radius-pill);
	margin-bottom:var(--sp-4);
	font-weight:500;
}
.eyebrow::before{
	content:'';
	width:.45em; height:.45em; border-radius:50%;
	background:var(--brand);
	flex:none;
}

h1,h2,h3{ line-height:var(--lh-tight); font-weight:700; letter-spacing:-.01em; }
.section-title{ font-size:var(--fs-2xl); margin-bottom:var(--sp-3); }
.section-desc{ color:var(--ink-soft); font-size:var(--fs-md); }

.grid{ display:grid; gap:var(--sp-6); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:920px){
	.grid-3{ grid-template-columns:repeat(2,1fr); }
	.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
	.grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
	.section{ padding-block:var(--sp-8); }
	.section--tight{ padding-block:var(--sp-7); }
}

/* ---------- 4. Buttons ---------------------------------------------------*/
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:.6em;
	font-weight:600; font-size:var(--fs-sm);
	padding:.9em 1.6em;
	border-radius:var(--radius-pill);
	border:1.5px solid transparent;
	transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
	white-space:nowrap;
}
.btn .icon{ width:1.05em; height:1.05em; }
.is-rtl .btn .icon{ transform:scaleX(-1); }

.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:var(--brand-deep); transform:translateY(-2px); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

.btn--soft{ background:var(--brand-soft); color:var(--brand-deep); }
.btn--soft:hover{ background:var(--brand-soft-2); transform:translateY(-2px); }

.btn--block{ width:100%; }
.btn--sm{ padding:.65em 1.25em; font-size:var(--fs-xs); }
.btn--lg{ padding:1.05em 2em; font-size:var(--fs-base); }

/* ---------- 5. Header ------------------------------------------------- */
.site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(255,255,255,.85);
	backdrop-filter:saturate(180%) blur(14px);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	border-bottom:1px solid var(--line-soft);
}
.site-header__inner{
	display:flex; align-items:center; gap:var(--sp-6);
	height:76px;
}

.brand{ display:flex; align-items:center; gap:.65rem; margin-inline-end:auto; }
.brand__mark{ width:34px; height:auto; flex:none; }
.brand__word{ font-weight:700; font-size:var(--fs-md); color:var(--ink); display:flex; flex-direction:column; line-height:1.15; }
.brand__word em{ font-style:normal; font-weight:400; color:var(--ink-soft); font-size:.72em; }

.main-nav ul{ display:flex; align-items:center; gap:var(--sp-6); }
.main-nav a{
	font-size:var(--fs-sm); font-weight:500; color:var(--ink-soft);
	position:relative; padding-block:.4rem;
	transition:color .16s var(--ease);
}
.main-nav a::after{
	content:''; position:absolute; inset-inline-start:0; bottom:-2px;
	width:0; height:2px; background:var(--brand); border-radius:2px;
	transition:width .2s var(--ease);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after, .main-nav a.is-active::after{ width:100%; }
.main-nav a.is-active{ color:var(--ink); font-weight:600; }

.header-actions{ display:flex; align-items:center; gap:var(--sp-4); margin-inline-start:auto; }

.lang-switch{
	display:flex; align-items:center; gap:.3rem;
	font-family:var(--font-mono);
	font-size:.75rem;
	background:var(--paper-soft);
	border:1px solid var(--line);
	border-radius:var(--radius-pill);
	padding:.3rem .3rem .3rem .7rem;
}
.is-rtl .lang-switch{ padding:.3rem .7rem .3rem .3rem; }
.lang-switch__icon{ width:14px; height:14px; color:var(--ink-faint); }
.lang-switch a{
	color:var(--ink-soft); padding:.3rem .55rem; border-radius:var(--radius-pill);
	transition:background-color .16s var(--ease), color .16s var(--ease);
}
.lang-switch a.is-active{ background:var(--ink); color:#fff; }
.lang-switch a:hover:not(.is-active){ background:var(--paper-deep); }

.nav-toggle{
	display:none; align-items:center; justify-content:center;
	width:42px; height:42px; border-radius:var(--radius-sm);
	background:transparent; border:1px solid var(--line); color:var(--ink);
	position:relative;
}
.nav-toggle .icon{ position:absolute; width:20px; height:20px; transition:opacity .15s, transform .15s; }
.nav-toggle__close{ opacity:0; transform:scale(.7); }
.nav-toggle[aria-expanded="true"] .nav-toggle__open{ opacity:0; transform:scale(.7); }
.nav-toggle[aria-expanded="true"] .nav-toggle__close{ opacity:1; transform:scale(1); }

@media (max-width:900px){
	.header-cta{ display:none; }
	.main-nav{
		position:fixed; inset:76px 0 0 0; z-index:90;
		background:var(--paper);
		padding:var(--sp-6) var(--sp-5);
		transform:translateY(-8px);
		opacity:0; visibility:hidden;
		transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
		overflow-y:auto;
	}
	.main-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
	.main-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
	.main-nav a{ display:block; padding:var(--sp-4) 0; font-size:var(--fs-lg); border-bottom:1px solid var(--line-soft); }
	.main-nav a::after{ display:none; }
	.nav-toggle{ display:inline-flex; }
	.lang-switch{ font-size:.7rem; }
}

/* ---------- 6. Hero ------------------------------------------------------*/
.hero{
	position:relative;
	padding-block:var(--sp-9) var(--sp-8);
	overflow:clip;
}
.hero__inner{
	display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-8);
	align-items:center;
	position:relative; z-index:2;
}
.hero__title{
	font-size:var(--fs-4xl);
	margin-bottom:var(--sp-5);
}
.hero__title .hl{ color:var(--brand); }
.hero__desc{
	font-size:var(--fs-md); color:var(--ink-soft); max-width:46ch; margin-bottom:var(--sp-6);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-8); }

.hero__stats{ display:flex; gap:var(--sp-7); flex-wrap:wrap; }
.hero__stat b{ display:block; font-family:var(--font-mono); font-size:var(--fs-xl); font-weight:600; color:var(--ink); }
.hero__stat span{ font-size:var(--fs-xs); color:var(--ink-faint); }

.hero__visual{
	position:relative;
	aspect-ratio:1/1;
	border-radius:var(--radius-lg);
	background:linear-gradient(160deg, var(--brand-soft), var(--paper) 65%);
	border:1px solid var(--line-soft);
	overflow:hidden;
}
.hero__visual canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__visual-badge{
	position:absolute; inset-inline-start:var(--sp-5); bottom:var(--sp-5);
	background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
	border:1px solid var(--line-soft);
	border-radius:var(--radius-md);
	padding:var(--sp-4) var(--sp-5);
	display:flex; align-items:center; gap:.75rem;
	box-shadow:var(--shadow-sm);
	max-width:78%;
}
.hero__visual-badge .icon{ width:22px; height:22px; color:var(--brand); flex:none; }
.hero__visual-badge strong{ display:block; font-size:var(--fs-sm); }
.hero__visual-badge span{ font-size:var(--fs-xs); color:var(--ink-faint); }

@media (max-width:920px){
	.hero__inner{ grid-template-columns:1fr; }
	.hero__title{ font-size:var(--fs-3xl); }
	.hero__visual{ aspect-ratio:16/11; }
}
@media (max-width:560px){
	.hero__title{ font-size:var(--fs-2xl); }
	.hero__stats{ gap:var(--sp-5); }
}

/* ---------- 7. Marquee ---------------------------------------------------*/
.marquee{
	border-block:1px solid var(--line-soft);
	background:var(--paper-soft);
	padding-block:var(--sp-4);
	overflow:hidden;
	position:relative;
}
.marquee__label{
	font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-faint);
	position:absolute; inset-inline-start:0; top:0; bottom:0;
	display:flex; align-items:center;
	background:linear-gradient(90deg, var(--paper-soft) 60%, transparent);
	padding-inline:clamp(1.25rem,4vw,2.5rem) 3rem;
	z-index:2;
}
.is-rtl .marquee__label{ background:linear-gradient(270deg, var(--paper-soft) 60%, transparent); }
.marquee__track{
	display:flex; gap:var(--sp-8);
	white-space:nowrap;
	animation:marquee 32s linear infinite;
	width:max-content;
	padding-inline-start:14rem;
}
.marquee__track span{ font-size:var(--fs-sm); color:var(--ink-soft); display:flex; align-items:center; gap:var(--sp-8); }
.marquee__track span::after{ content:'/'; color:var(--line); margin-inline-start:var(--sp-8); }
@keyframes marquee{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}
.is-rtl .marquee__track{ animation-name:marquee-rtl; }
@keyframes marquee-rtl{
	from{ transform:translateX(0); }
	to{ transform:translateX(50%); }
}

/* ---------- 8. Intro / two-col feature ------------------------------------*/
.intro{
	display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-8); align-items:center;
}
.intro__art{
	position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg);
	overflow:hidden; border:1px solid var(--line-soft);
	background:var(--paper-soft);
}
.intro__art img{ width:100%; height:100%; object-fit:cover; }
.intro__list{ display:flex; flex-direction:column; gap:var(--sp-5); margin-top:var(--sp-6); }
.intro__list li{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.intro__list .icon{ width:20px; height:20px; color:var(--brand); flex:none; margin-top:.2em; }
.intro__list strong{ display:block; margin-bottom:.2em; font-size:var(--fs-sm); }
.intro__list span{ color:var(--ink-soft); font-size:var(--fs-sm); }

@media (max-width:920px){
	.intro{ grid-template-columns:1fr; }
	.intro__art{ aspect-ratio:16/9; }
}

/* ---------- 9. Service cards ----------------------------------------------*/
.svc-card{
	background:var(--paper);
	border:1px solid var(--line);
	border-radius:var(--radius-md);
	padding:var(--sp-6);
	transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
	height:100%;
}
.svc-card:hover{ border-color:var(--brand); transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.svc-card__icon{
	width:52px; height:52px; border-radius:var(--radius-sm);
	background:var(--brand-soft); color:var(--brand-deep);
	display:flex; align-items:center; justify-content:center;
	margin-bottom:var(--sp-5);
}
.svc-card__icon .icon{ width:24px; height:24px; }
.svc-card h3{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.svc-card p{ color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.svc-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.svc-card__tags span{
	font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);
	background:var(--paper-soft); border:1px solid var(--line-soft);
	padding:.28rem .6rem; border-radius:var(--radius-pill);
}

.section-foot{ display:flex; justify-content:center; margin-top:var(--sp-7); }

/* ---------- 10. Why-us cards -----------------------------------------------*/
.why-grid{ grid-template-columns:repeat(3,1fr); }
.why-card{ padding:var(--sp-6) var(--sp-5); border-radius:var(--radius-md); background:var(--paper); }
.why-card .icon{ width:26px; height:26px; color:var(--brand); }
.why-card__icon{
	width:50px; height:50px; border-radius:50%;
	border:1.5px solid var(--line);
	display:flex; align-items:center; justify-content:center;
	margin-bottom:var(--sp-4);
}
.why-card h3{ font-size:var(--fs-base); margin-bottom:var(--sp-2); }
.why-card p{ color:var(--ink-soft); font-size:var(--fs-sm); }
@media (max-width:920px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- 11. Portfolio cards --------------------------------------------*/
.pf-grid{ grid-template-columns:repeat(2,1fr); }
.pf-card{
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	overflow:hidden;
	background:var(--paper);
	transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.pf-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--line); }
.pf-card__media{
	position:relative; aspect-ratio:16/10; overflow:hidden;
	background:var(--paper-soft);
	border-bottom:1px solid var(--line-soft);
}
.pf-card__media img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s var(--ease); }
.pf-card:hover .pf-card__media img{ transform:scale(1.04); }
.pf-card__browser{
	position:absolute; top:0; inset-inline:0; height:26px;
	background:rgba(16,21,31,.85); display:flex; align-items:center; gap:5px;
	padding-inline:12px; z-index:2;
}
.pf-card__browser span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); }
.pf-card__body{ padding:var(--sp-5) var(--sp-6) var(--sp-6); }
.pf-card__cat{ font-family:var(--font-mono); font-size:.72rem; color:var(--brand-deep); margin-bottom:.4rem; display:block; }
.pf-card h3{ font-size:var(--fs-md); margin-bottom:.5rem; }
.pf-card p{ color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.pf-card__link{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:.5em; }
.pf-card__link .icon{ width:16px; height:16px; color:var(--brand); transition:transform .2s var(--ease); }
.pf-card__link:hover .icon{ transform:translate(3px,-3px); }
.is-rtl .pf-card__link:hover .icon{ transform:translate(-3px,-3px); }

@media (max-width:760px){ .pf-grid{ grid-template-columns:1fr; } }

/* ---------- 12. Process steps -----------------------------------------------*/
.process-grid{ grid-template-columns:repeat(4,1fr); position:relative; }
.process-step{ position:relative; padding-inline-start:var(--sp-5); border-inline-start:2px solid var(--line); }
.is-rtl .process-step{ padding-inline-start:0; padding-inline-end:var(--sp-5); border-inline-start:none; border-inline-end:2px solid var(--line); }
.process-step__num{
	font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--brand);
	display:block; margin-bottom:var(--sp-3);
}
.process-step h3{ font-size:var(--fs-base); margin-bottom:var(--sp-2); }
.process-step p{ color:var(--ink-soft); font-size:var(--fs-sm); }
@media (max-width:920px){ .process-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-7) var(--sp-6);} }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }

/* ---------- 13. CTA band -----------------------------------------------------*/
.cta-band{
	position:relative;
	border-radius:var(--radius-lg);
	background:var(--ink);
	color:#fff;
	padding:var(--sp-8);
	overflow:hidden;
	text-align:center;
}
.cta-band::before{
	content:'';
	position:absolute; inset:0;
	background:
		radial-gradient(560px 280px at 15% 0%, rgba(11,132,255,.35), transparent 60%),
		radial-gradient(560px 280px at 85% 100%, rgba(11,132,255,.25), transparent 60%);
	pointer-events:none;
}
.cta-band__inner{ position:relative; z-index:1; max-width:640px; margin-inline:auto; }
.cta-band h2{ font-size:var(--fs-2xl); margin-bottom:var(--sp-3); }
.cta-band p{ color:rgba(255,255,255,.72); margin-bottom:var(--sp-6); font-size:var(--fs-md); }
.cta-band .btn--primary{ background:#fff; color:var(--ink); }
.cta-band .btn--primary:hover{ background:var(--brand); color:#fff; }

/* ---------- 14. About page ----------------------------------------------------*/
.about-hero{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; }
.about-hero p{ color:var(--ink-soft); font-size:var(--fs-md); margin-bottom:var(--sp-4); }
.about-hero p.lede{ color:var(--ink); font-weight:500; font-size:var(--fs-lg); }
.stat-row{ display:flex; gap:var(--sp-7); margin-top:var(--sp-7); flex-wrap:wrap; }
.stat-row b{ display:block; font-family:var(--font-mono); font-size:var(--fs-2xl); font-weight:600; color:var(--brand-deep); }
.stat-row span{ font-size:var(--fs-xs); color:var(--ink-faint); }
.about-mission{
	background:var(--paper-soft); border:1px solid var(--line-soft);
	border-radius:var(--radius-lg); padding:var(--sp-7);
	display:grid; grid-template-columns:auto 1fr; gap:var(--sp-6); align-items:flex-start;
}
.about-mission .icon{ width:34px; height:34px; color:var(--brand); }
.about-mission h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-3); }
.about-mission p{ color:var(--ink-soft); font-size:var(--fs-md); }
@media (max-width:920px){
	.about-hero{ grid-template-columns:1fr; }
	.about-mission{ grid-template-columns:1fr; }
}

/* ---------- 15. Contact page ----------------------------------------------------*/
.contact-grid{ grid-template-columns:.85fr 1.15fr; align-items:flex-start; }
.contact-info-list{ display:flex; flex-direction:column; gap:var(--sp-5); margin-block:var(--sp-6); }
.contact-info-item{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.contact-info-item__icon{
	width:44px; height:44px; border-radius:var(--radius-sm); background:var(--brand-soft); color:var(--brand-deep);
	display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info-item__icon .icon{ width:20px; height:20px; }
.contact-info-item strong{ display:block; font-size:var(--fs-xs); color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:.3em; text-transform:uppercase; letter-spacing:.04em;}
.contact-info-item span, .contact-info-item a{ font-size:var(--fs-md); }
.contact-info-item a:hover{ color:var(--brand-deep); }

.map-frame{
	border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
	aspect-ratio:16/10; background:var(--paper-soft);
}
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.15); }

.contact-form{
	background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
	padding:var(--sp-7);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.field{ margin-bottom:var(--sp-5); }
.field label{ display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:.5rem; }
.field label .req{ color:var(--brand); font-weight:400; }
.field input, .field textarea{
	width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm);
	padding:.85em 1em; background:var(--paper-soft);
	transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color:var(--brand); background:var(--paper); outline:none; }
.field textarea{ resize:vertical; min-height:140px; }
.field.has-error input, .field.has-error textarea{ border-color:#E0483E; }
.field__err{ color:#E0483E; font-size:var(--fs-xs); margin-top:.4rem; display:none; }
.field.has-error .field__err{ display:block; }

.form-msg{
	display:none; align-items:center; gap:.6rem;
	padding:.9em 1.1em; border-radius:var(--radius-sm); font-size:var(--fs-sm); margin-bottom:var(--sp-5);
}
.form-msg.is-success{ display:flex; background:#E7F7EE; color:#137A45; }
.form-msg.is-error{ display:flex; background:#FDECEA; color:#B3261E; }

.hp-field{ position:absolute; inset-inline-start:-9999px; opacity:0; height:0; }

@media (max-width:640px){
	.form-row{ grid-template-columns:1fr; }
	.contact-grid{ grid-template-columns:1fr; }
	.contact-form{ padding:var(--sp-5); }
}

/* ---------- 16. Footer -----------------------------------------------------*/
.site-footer{
	background:var(--ink); color:rgba(255,255,255,.75);
	padding-block:var(--sp-8) var(--sp-6);
	margin-top:var(--sp-9);
}
.site-footer__grid{
	display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--sp-7);
	padding-bottom:var(--sp-7); border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-col h3{ color:#fff; font-size:var(--fs-sm); margin-bottom:var(--sp-4); font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ color:rgba(255,255,255,.65); font-size:var(--fs-sm); transition:color .16s; }
.footer-col a:hover{ color:#fff; }
.footer-col--brand p{ font-size:var(--fs-sm); margin-block:var(--sp-4); max-width:34ch; color:rgba(255,255,255,.6); }
.site-footer .brand__word{ color:#fff; }
.site-footer .brand__word em{ color:rgba(255,255,255,.55); }

.social-row{ display:flex; gap:.6rem; }
.social-row a{
	width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
	display:flex; align-items:center; justify-content:center;
	transition:background-color .16s, border-color .16s;
}
.social-row a:hover{ background:var(--brand); border-color:var(--brand); }
.social-row .icon{ width:17px; height:17px; }

.footer-contact li{ display:flex; align-items:flex-start; gap:.7rem; }
.footer-contact .icon{ width:17px; height:17px; margin-top:.2em; color:var(--brand); flex:none; }

.site-footer__bottom{
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
	padding-top:var(--sp-6); font-size:var(--fs-xs); color:rgba(255,255,255,.45);
}

@media (max-width:920px){
	.site-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
	.site-footer__grid{ grid-template-columns:1fr; }
	.site-footer__bottom{ flex-direction:column; }
}

/* ---------- 17. Page hero (interior pages) ------------------------------------*/
.page-hero{ padding-block:var(--sp-8) var(--sp-7); }
.page-hero .section-head{ max-width:680px; }
.page-hero.is-center .section-head{ margin-inline:auto; text-align:center; }

/* ---------- 18. Misc / utility ------------------------------------------------*/
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.divider-motif{
	display:flex; align-items:center; gap:.5rem; color:var(--line);
	margin-block:var(--sp-8);
}
.divider-motif::before, .divider-motif::after{ content:''; height:1px; flex:1; background:var(--line); }
.divider-motif svg{ width:14px; height:14px; color:var(--brand); flex:none; }

::selection{ background:var(--brand); color:#fff; }