/* =========================================================================
   Rooyan Soft — stylesheet
   -------------------------------------------------------------------------
   Design plan
   Color   : --c-primary #024c61 (deep municipal teal), --c-secondary #3db6c9
             (brand cyan, from the company mark), tints derived from both,
             text fixed to #000 per brief with reduced-opacity black for
             secondary text.
   Type    : One family, Vazirmatn (self-hosted, fa+en in one face), set on
             a deliberate scale. Weight, not a second family, carries the
             hierarchy — headlines sit at 650/700, body at 400/450.
   Layout  : Built with logical properties (inline-start/end, not left/
             right) so the whole site mirrors correctly between the fa
             (rtl, default) and en (ltr) versions from one stylesheet.
   Motif   : A map/network vocabulary (nodes, thin connective lines, pin
             marks) echoes the GIS core of Rooyan's products, used once,
             boldly, in the hero — not repeated as decoration everywhere.
   Panels  : Content group boxes are bordered, flat panels with a 3px
             accent edge, not the identical soft-shadow rounded card kit.
   ========================================================================= */

/* ---------- Fonts -------------------------------------------------------- */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Reset --------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

/* ---------- Tokens --------------------------------------------------------*/
:root {
    --c-primary: #024c61;
    --c-primary-dark: #012f3d;
    --c-primary-tint: #e6eff1;
    --c-secondary: #3db6c9;
    --c-secondary-dark: #2b93a3;
    --c-secondary-tint: #eaf7f9;
    --c-secondary-tint-2: #d5eef2;

    --c-ink: #000000;
    --c-ink-75: rgba(0, 0, 0, .75);
    --c-ink-55: rgba(0, 0, 0, .56);
    --c-ink-35: rgba(0, 0, 0, .38);

    --c-surface: #ffffff;
    --c-surface-alt: #f5fafb;
    --c-border: rgba(2, 76, 97, .16);
    --c-border-soft: rgba(2, 76, 97, .10);

    --radius-sm: 4px;
    --radius-md: 8px;

    --fs-xs: .8125rem;
    --fs-sm: .9375rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.125rem;
    --fs-hero: clamp(2.15rem, 1.55rem + 3vw, 3.35rem);

    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .875rem;
    --sp-4: 1.25rem;
    --sp-5: 1.75rem;
    --sp-6: 2.5rem;
    --sp-7: 3.5rem;
    --sp-8: 5rem;

    --content-width: 1180px;
    --border-w: 1px;
}

/* ---------- Base ----------------------------------------------------------*/
html { scroll-behavior: smooth; }

body {
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--c-ink);
    background: var(--c-surface);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body { font-feature-settings: "ss01"; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.35; color: var(--c-primary); }
p { color: var(--c-ink-75); }
p + p { margin-block-start: var(--sp-3); }

/* Long-form body copy (company story, group/product intros, article bodies)
   reads better justified; short UI copy — card blurbs, labels, nav — is
   intentionally left out so single short lines don't get stretched. */
.prose p,
.prose-p,
.article-body p {
    text-align: justify;
    text-align-last: start;
}

.container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

@media (min-width: 720px) {
    .container { padding-inline: var(--sp-6); }
}

.section { padding-block: var(--sp-7); }
.section--alt { background: var(--c-surface-alt); }
.section--primary { background: var(--c-primary); color: #fff; }

.section-head {
    max-width: 640px;
    margin-block-end: var(--sp-6);
}
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-2xl); margin-block-end: var(--sp-2); }
.section-head p { font-size: var(--fs-md); color: var(--c-ink-55); }
.section--primary .section-head h2 { color: #fff; }
.section--primary .section-head p { color: rgba(255,255,255,.72); }

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

.phone-number {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Directional chevrons: keep pointing toward the reading "end" (.i-end) or
   "start" (.i-start) regardless of language direction, by flipping the one
   static arrow shape rather than keeping two mirrored assets. */
html[dir="rtl"] .i-end,
html[dir="ltr"] .i-start {
    transform: scaleX(-1);
}

/* ---------- Buttons --------------------------------------------------------*/
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .8em 1.6em;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: var(--border-w) solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn--solid { background: var(--c-secondary); color: #012f3d; }
.btn--solid:hover { background: var(--c-secondary-dark); }
.btn--outline { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.1); }
.btn--ghost { color: var(--c-primary); border-color: var(--c-border); }
.btn--ghost:hover { background: var(--c-secondary-tint); border-color: var(--c-secondary); }
.btn--link { display: inline-flex; align-items: center; color: var(--c-secondary-dark); font-weight: 600; padding: 0; gap: .35em; }
.btn--link:hover { color: var(--c-primary); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Header / Nav ---------------------------------------------------*/
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-surface);
    border-block-end: var(--border-w) solid var(--c-border-soft);
}

.topbar {
    background: var(--c-primary);
    color: rgba(255,255,255,.85);
    font-size: var(--fs-xs);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 38px; flex-wrap: wrap; }
.topbar-contacts { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.topbar-contacts a { display: inline-flex; align-items: center; gap: .4em; color: inherit; }
.topbar-contacts a:hover { color: #fff; }
.topbar-contacts .icon { width: 1em; height: 1em; opacity: .85; }

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: #fff;
    font-weight: 600;
}
.lang-switch .icon { width: 1em; height: 1em; }

.navbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-3); }

.brand { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { color: var(--c-primary); font-size: var(--fs-md); font-weight: 700; }
.brand-text span { color: var(--c-ink-55); font-size: .75rem; }

.main-nav { display: none; }
.main-nav ul { display: flex; align-items: stretch; gap: var(--sp-1); }
.main-nav > ul > li { position: relative; display: flex; align-items: center; }
.main-nav > ul > li > a,
.main-nav > ul > li > button.nav-toggle {
    display: flex;
    align-items: center;
    gap: .3em;
    padding: .9rem .85rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-primary);
    border-bottom: 2px solid transparent;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.is-open > button.nav-toggle,
.main-nav > ul > li > a.is-active {
    color: var(--c-secondary-dark);
    border-block-end-color: var(--c-secondary);
}
.main-nav .nav-toggle .icon { width: .8em; height: .8em; transition: transform .15s ease; }
.main-nav li.is-open > .nav-toggle .icon { transform: rotate(180deg); }

.dropdown {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 260px;
    background: var(--c-surface);
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 32px -18px rgba(2,26,34,.28);
    padding: var(--sp-2);
    display: none;
    z-index: 50;
}
.main-nav li.is-open .dropdown { display: block; }
.dropdown a {
    display: flex;
    align-items: center;
    gap: .65em;
    padding: .7rem .8rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--c-ink-75);
}
.dropdown a:hover { background: var(--c-secondary-tint); color: var(--c-primary); }
.dropdown a .icon { width: 1.1em; height: 1.1em; color: var(--c-secondary-dark); flex-shrink: 0; }
.dropdown-footer {
    border-block-start: var(--border-w) solid var(--c-border-soft);
    margin-block-start: var(--sp-2);
    padding-block-start: var(--sp-2);
}
.dropdown-footer a { font-weight: 600; color: var(--c-secondary-dark); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-primary);
}

@media (min-width: 960px) {
    .main-nav { display: block; }
    .menu-btn { display: none; }
}

/* Mobile drawer nav */
.mobile-nav {
    display: none;
    border-block-start: var(--border-w) solid var(--c-border-soft);
    background: var(--c-surface);
}
.mobile-nav.is-open { display: block; }
.mobile-nav .container { padding-block: var(--sp-3); }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav > .container > ul > li { border-block-end: var(--border-w) solid var(--c-border-soft); }
.mobile-nav a, .mobile-nav button.nav-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem .2rem;
    font-weight: 600;
    color: var(--c-primary);
    text-align: start;
}
.mobile-nav .dropdown-inline { display: none; padding-inline-start: var(--sp-4); padding-block-end: var(--sp-2); }
.mobile-nav li.is-open .dropdown-inline { display: block; }
.mobile-nav .dropdown-inline a { padding: .6rem .2rem; font-weight: 400; color: var(--c-ink-75); }
.mobile-nav .nav-toggle .icon { width: .85em; height: .85em; transition: transform .15s ease; }
.mobile-nav li.is-open .nav-toggle .icon { transform: rotate(180deg); }

@media (min-width: 960px) {
    .mobile-nav { display: none !important; }
}

/* ---------- Hero -----------------------------------------------------------*/
.hero {
    position: relative;
    background: var(--c-primary);
    color: #fff;
    overflow: hidden;
}
.hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--sp-6);
    padding-block: var(--sp-8);
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--c-secondary);
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-block-end: var(--sp-3);
}
.hero-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--c-secondary);
}
.hero h1 {
    color: #fff;
    font-size: var(--fs-hero);
    max-width: 15ch;
    margin-block-end: var(--sp-4);
}
.hero p.lede {
    color: rgba(255,255,255,.78);
    font-size: var(--fs-md);
    max-width: 46ch;
    margin-block-end: var(--sp-5);
}
.hero-slogan {
    color: var(--c-secondary);
    font-size: var(--fs-lg);
    font-style: italic;
    font-weight: 600;
    max-width: 34ch;
    margin-block-end: var(--sp-3);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-graphic { position: relative; z-index: 1; }
.hero-graphic svg { width: 100%; height: auto; }

@media (min-width: 900px) {
    .hero .container { grid-template-columns: 1.05fr .95fr; }
}

/* ---------- Slider ----------------------------------------------------------*/
.slider {
    position: relative;
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-surface-alt);
}
.slider-track { display: flex; transition: transform .5s ease; }
.slide {
    flex: 0 0 100%;
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-6);
    align-items: center;
}
.slide-icon {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-md);
    background: var(--c-primary);
    color: var(--c-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.slide-icon .icon { width: 34px; height: 34px; }
.slide-tag { color: var(--c-secondary-dark); font-weight: 700; font-size: var(--fs-xs); margin-block-end: var(--sp-1); }
.slide h3 { font-size: var(--fs-lg); margin-block-end: var(--sp-2); }
.slide p { font-size: var(--fs-sm); }

@media (min-width: 640px) {
    .slide { grid-template-columns: auto 1fr; }
}

.slider-nav {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    padding-block-end: var(--sp-4);
}
.slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-border);
    border: 0;
    padding: 0;
}
.slider-dot.is-active { background: var(--c-secondary); }

/* ---------- Panel grid (services / products / news boxes on home) ---------*/
.box-grid {
    display: grid;
    gap: var(--sp-4);
}
@media (min-width: 720px) {
    .box-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.panel {
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    background: var(--c-surface);
    border-inline-start: 3px solid var(--c-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    height: 100%;
}
.panel-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--c-secondary-tint);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.panel-icon .icon { width: 26px; height: 26px; }
.panel h3 { font-size: var(--fs-md); }
.panel p { font-size: var(--fs-sm); flex-grow: 1; }
.panel .btn--link { margin-block-start: var(--sp-1); }

/* ---------- Company intro / stats -------------------------------------------*/
.intro-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1.2fr .8fr; } }

.stat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.stat {
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    text-align: center;
    background: var(--c-surface-alt);
}
.stat strong { display: block; font-size: var(--fs-xl); color: var(--c-primary); }
.stat span { font-size: var(--fs-xs); color: var(--c-ink-55); }
.stat--icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; }
.stat--icon .icon { width: 26px; height: 26px; color: var(--c-primary); }

.pull-quote {
    border-inline-start: 3px solid var(--c-secondary);
    padding-inline-start: var(--sp-4);
    margin: 0;
    max-width: 70ch;
}
.pull-quote-text { font-size: var(--fs-lg); font-style: italic; font-weight: 600; color: var(--c-primary); margin-block-end: var(--sp-2); }
.pull-quote-note { font-size: var(--fs-sm); color: var(--c-ink-55); text-align: justify; text-align-last: start; }

/* ---------- Card (services / products / news listing) -----------------------*/
.card-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
    display: flex;
    flex-direction: column;
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-surface);
    height: 100%;
}
.card-banner {
    height: 140px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary-dark));
    color: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-banner .icon { width: 46px; height: 46px; }
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex-grow: 1; }
.card-tag { color: var(--c-secondary-dark); font-size: var(--fs-xs); font-weight: 700; }
.card h3 { font-size: var(--fs-md); }
.card p { font-size: var(--fs-sm); flex-grow: 1; }
.card-meta { font-size: var(--fs-xs); color: var(--c-ink-35); }
.card .btn--link { margin-block-start: var(--sp-2); }

/* ---------- Breadcrumb / page header ----------------------------------------*/
.page-header {
    background: var(--c-primary);
    color: #fff;
    padding-block: var(--sp-6);
}
.breadcrumb { font-size: var(--fs-xs); color: rgba(255,255,255,.65); margin-block-end: var(--sp-2); display: flex; gap: .5em; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: #fff; }
.page-header h1 { color: #fff; font-size: var(--fs-2xl); max-width: 46ch; }
.page-header p { color: rgba(255,255,255,.75); font-size: var(--fs-md); max-width: 60ch; margin-block-start: var(--sp-2); }

/* ---------- Product / group detail pages ------------------------------------*/
.highlight-box {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--c-secondary-tint);
    border: var(--border-w) solid var(--c-secondary-tint-2);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    color: var(--c-primary);
    font-weight: 600;
    margin-block-end: var(--sp-6);
}
.highlight-box .icon { width: 26px; height: 26px; color: var(--c-secondary-dark); flex-shrink: 0; }

.check-list { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .check-list--2 { grid-template-columns: repeat(2, 1fr); } }
.check-list li { display: flex; align-items: flex-start; gap: .65em; font-size: var(--fs-sm); color: var(--c-ink-75); }
.check-list .icon { width: 1.2em; height: 1.2em; color: var(--c-secondary-dark); flex-shrink: 0; margin-block-start: .15em; }

.subsystem {
    display: grid;
    gap: var(--sp-4);
    padding-block: var(--sp-6);
    border-block-end: var(--border-w) solid var(--c-border-soft);
}
.subsystem:last-child { border-block-end: 0; }
@media (min-width: 860px) { .subsystem { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.subsystem-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.subsystem-icon {
    width: 48px; height: 48px; border-radius: var(--radius-sm);
    background: var(--c-primary); color: var(--c-secondary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.subsystem-icon .icon { width: 24px; height: 24px; }
.subsystem h3 { font-size: var(--fs-md); margin-block-end: var(--sp-1); }
.subsystem p { font-size: var(--fs-sm); }

.process-rail {
    display: grid;
    gap: var(--sp-4);
    counter-reset: step;
}
@media (min-width: 860px) { .process-rail { grid-template-columns: repeat(4, 1fr); } }
.process-step {
    position: relative;
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    background: var(--c-surface);
    counter-increment: step;
}
.process-step::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-secondary);
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-block-end: var(--sp-3);
}
.process-step h4 { font-size: var(--fs-sm); color: var(--c-primary); margin-block-end: var(--sp-2); }
.process-step p { font-size: var(--fs-xs); margin-block-end: var(--sp-2); }
.process-step ul { display: grid; gap: .35em; }
.process-step li { font-size: var(--fs-xs); color: var(--c-ink-55); display: flex; gap: .4em; align-items: flex-start; }
.process-step li::before { content: "—"; color: var(--c-secondary-dark); flex-shrink: 0; }

@media (min-width: 860px) {
    .process-rail { position: relative; }
    .process-rail::before {
        content: "";
        position: absolute;
        top: 15px;
        inset-inline: 8%;
        height: 2px;
        background: var(--c-border);
        z-index: 0;
    }
}

.achievement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 720px) { .achievement-grid { grid-template-columns: repeat(4, 1fr); } }
.achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
}
.achievement-icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--c-secondary-tint); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
}
.achievement-icon .icon { width: 22px; height: 22px; }
.achievement span { font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-75); }

.kpi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--sp-2); }
.kpi-list li {
    display: flex; align-items: center; gap: .6em;
    font-size: var(--fs-sm); padding: .6em .2em;
    border-block-end: var(--border-w) dashed var(--c-border);
}
.kpi-list .icon { width: 1.1em; height: 1.1em; color: var(--c-secondary-dark); flex-shrink: 0; }

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-6);
}
.cta-band h3 { color: #fff; font-size: var(--fs-lg); max-width: 40ch; }

.related-strip { display: flex; gap: var(--sp-3); overflow-x: auto; padding-block-end: var(--sp-2); }
.related-chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6em;
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: .6em 1em;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-primary);
    white-space: nowrap;
}
.related-chip:hover { border-color: var(--c-secondary); background: var(--c-secondary-tint); }
.related-chip .icon { width: 1.15em; height: 1.15em; color: var(--c-secondary-dark); }

/* ---------- About page --------------------------------------------------- */
.charter-list { display: grid; gap: var(--sp-2); }
.charter-list li {
    display: flex; gap: .7em; align-items: flex-start;
    font-size: var(--fs-sm); padding-block: .5em;
    border-block-end: var(--border-w) solid var(--c-border-soft);
}
.charter-list li span.num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--c-secondary-tint); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 700;
}

/* ---------- News detail ---------------------------------------------------*/
.article-meta { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-xs); color: var(--c-ink-55); margin-block-end: var(--sp-2); }
.article-body { max-width: 72ch; font-size: var(--fs-md); }
.article-body p { margin-block-end: var(--sp-3); }

/* ---------- Forms ---------------------------------------------------------*/
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); margin-block-end: .5em; }
.field input, .field textarea {
    width: 100%;
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: .8em .9em;
    font-size: var(--fs-sm);
    background: var(--c-surface);
}
.field input:focus, .field textarea:focus { border-color: var(--c-secondary); }
.field textarea { resize: vertical; min-height: 130px; }

.alert {
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    margin-block-end: var(--sp-4);
    display: flex;
    gap: .6em;
    align-items: flex-start;
}
.alert--success { background: var(--c-secondary-tint); color: var(--c-primary); border: var(--border-w) solid var(--c-secondary-tint-2); }
.alert--error { background: #fdeeec; color: #7a2418; border: var(--border-w) solid #f4cec7; }
.alert .icon { width: 1.2em; height: 1.2em; flex-shrink: 0; margin-block-start: .1em; }

.contact-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr .85fr; } }
.contact-info-list { display: grid; gap: var(--sp-4); }
.contact-info-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact-info-item .icon-wrap {
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    background: var(--c-secondary-tint); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-item .icon-wrap .icon { width: 20px; height: 20px; }
.contact-info-item strong { display: block; font-size: var(--fs-xs); color: var(--c-ink-55); font-weight: 600; margin-block-end: .2em; }
.contact-info-item span, .contact-info-item a { font-size: var(--fs-sm); color: var(--c-ink); }

.mini-map {
    border: var(--border-w) solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-primary);
}
.mini-map svg { width: 100%; height: auto; display: block; }
.mini-map iframe { width: 100%; height: 260px; border: 0; display: block; }
.mini-map-caption {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--c-ink-55);
    background: var(--c-surface-alt);
}
.mini-map-caption .icon { width: 1.1em; height: 1.1em; color: var(--c-secondary-dark); flex-shrink: 0; }

/* ---------- Footer ----------------------------------------------------------*/
.site-footer { background: var(--c-primary-dark); color: rgba(255,255,255,.72); }
.footer-top { padding-block: var(--sp-7); }
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr .9fr .9fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-3); }
.footer-brand img { height: 34px; }
.footer-brand strong { color: #fff; font-size: var(--fs-md); }
.footer-col h4 { color: #fff; font-size: var(--fs-sm); margin-block-end: var(--sp-3); }
.footer-col ul { display: grid; gap: var(--sp-2); }
.footer-col a { font-size: var(--fs-sm); }
.footer-col a:hover { color: #fff; }
.footer-col p { color: rgba(255,255,255,.65); font-size: var(--fs-sm); }
.footer-contact li { display: flex; gap: .6em; align-items: flex-start; font-size: var(--fs-sm); }
.footer-contact .icon { width: 1.1em; height: 1.1em; color: var(--c-secondary); flex-shrink: 0; margin-block-start: .2em; }
.footer-bottom {
    border-block-start: var(--border-w) solid rgba(255,255,255,.12);
    padding-block: var(--sp-4);
    font-size: var(--fs-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: space-between;
}

/* ---------- 404 -------------------------------------------------------------*/
.state-404 { text-align: center; padding-block: var(--sp-8); }
.state-404 .icon { width: 56px; height: 56px; color: var(--c-secondary-dark); margin-inline: auto; margin-block-end: var(--sp-4); }
.state-404 h1 { font-size: var(--fs-2xl); margin-block-end: var(--sp-2); }
.state-404 p { margin-block-end: var(--sp-5); }

/* ---------- Utility ----------------------------------------------------------*/
.text-center { text-align: center; }
.mt-0 { margin-block-start: 0 !important; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

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