/* ISACO MASTER · visual system (2026-11-06)
   Loaded last on every page. One palette, one type scale, one set of
   component shapes. Earlier files keep layout; this file sets the look. */

/* Fonts are self-hosted so they load in China and Iran without Google Fonts.
   Inter covers Latin letters and numbers, Vazirmatn covers Persian;
   Chinese uses the system font (PingFang / Microsoft YaHei). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/vazirmatn-arabic-var.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  /* palette */
  --c-ink:#1a2d40;        /* headings */
  --c-text:#2c3e50;       /* body copy */
  --c-muted:#55667a;      /* secondary copy, 5.9:1 on white */
  --c-soft:#8fa3b8;       /* decorative numbers and icons only */
  --c-line:#dbe2ea;
  --c-tint:#e8eff7;
  --c-surface:#f3f6f9;
  --c-brand:#12365c;      /* primary buttons, active states */
  --c-brand-deep:#0b2440; /* footer, closing band, dark cards */
  --c-link:#1d5f9e;
  --c-wa:#0f7a3d;         /* WhatsApp only */
  --c-wa-deep:#0b6331;
  --c-amber:#8a4b08;      /* estimates and notes only */
  --c-amber-tint:#fdf3e3;
  /* shape */
  --r-sm:4px; --r:6px; --r-lg:10px;
  --shadow:0 1px 2px #0b244010,0 6px 20px #0b24400d;
  /* type */
  --f-sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --f-fa:"Vazirmatn","Inter",Tahoma,"Segoe UI",sans-serif;
  /* legacy variable names used by the older stylesheets */
  --navy:var(--c-brand); --ink:var(--c-ink); --muted:var(--c-muted); --line:var(--c-line); --mist:var(--c-surface);
}

/* ---------- base ---------- */
body{font-family:var(--f-sans);font-size:16px;line-height:1.7;color:var(--c-text);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
html[dir="rtl"] body{font-family:var(--f-fa)}
h1,h2,h3,h4{font-weight:600;letter-spacing:.01em}
/* headings on light backgrounds; headings over photos and dark bands keep their own white */
main :is(.section-intro,.section-head,.faq-section>div:first-child) h2{color:var(--c-ink)}
strong,b{font-weight:600}
a{text-underline-offset:3px}
:focus-visible{outline:2px solid var(--c-link);outline-offset:2px}
strong[id*="price"],strong[id*="total"],.route-facts strong,.query-price-block strong,.step-num,dd,td{font-variant-numeric:tabular-nums}

/* ---------- section headings ----------
   The English line becomes a small label; the Chinese sentence is the title. */
.english-heading,.eyebrow,.section-head .eyebrow{display:block;font-family:"Inter",var(--f-sans);font-size:15px!important;line-height:1.4;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--c-link);margin:0 0 14px}
html[dir="rtl"] .english-heading,html[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none;font-family:var(--f-fa)}
.section-intro h2,.section-head h2,.section h2,.faq-section h2,.closing h2{font-size:36px!important;line-height:1.3;font-weight:600;letter-spacing:.01em;margin-top:0}
.section-intro>p:last-child:not(.english-heading){font-size:16px!important;line-height:1.75;color:var(--c-muted);margin-top:14px;max-width:38em;margin-inline:auto}
.section-head>p,.section-head p:not(.eyebrow){font-size:15px;color:var(--c-muted);line-height:1.75}
h3{font-size:20px;line-height:1.45}

/* ---------- hero ---------- */
.hero-english{font-family:"Inter",var(--f-sans);font-size:16px!important;font-weight:600;letter-spacing:.01em;text-transform:none;color:#ffffffd9;margin-bottom:18px}
html[dir="rtl"] .hero-english{letter-spacing:0;text-transform:none}
.hero-title{font-weight:600;letter-spacing:.02em;line-height:1.2}
.hero-desc{font-size:17px!important;line-height:1.8}

/* ---------- buttons ---------- */
.button,.outline-button{border-radius:var(--r);font-size:15px!important;font-weight:600;gap:18px;min-height:48px;padding:12px 22px;letter-spacing:.01em}
.button.dark{background:var(--c-brand);color:#fff}
.button.dark:hover{background:var(--c-brand-deep)}
.outline-button{border-width:1.5px}
.outline-button:hover{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.hero .outline-button,.closing .outline-button{border-color:#ffffffcc;color:#fff}
.hero .outline-button:hover,.closing .outline-button:hover{background:#fff;color:var(--c-brand);border-color:#fff}
.text-button{font-size:15px!important;font-weight:600;color:var(--c-link);gap:10px}
.text-button:hover{color:var(--c-brand)}
.button span,.outline-button span,.text-button span{font-size:1.1em!important;line-height:1}

/* ---------- forms ---------- */
input,select,textarea{border-radius:var(--r)!important;border-color:#c5cfda!important;font-size:16px!important;color:var(--c-text)}
input:focus,select:focus,textarea:focus{border-color:var(--c-link)!important;outline:2px solid #1d5f9e33;outline-offset:0}
label>span,.field-label,legend{font-size:14px!important;color:var(--c-muted)!important;font-weight:500}
::placeholder{color:#7b8a9a}

/* ---------- header ---------- */
.header{background:#fffffff5;border-bottom:1px solid var(--c-line);box-shadow:none;color:var(--c-ink)}
.header.scrolled{box-shadow:0 1px 0 var(--c-line),0 8px 24px #0b24400f}
.brand strong{font-family:"Inter",var(--f-sans);font-weight:700;letter-spacing:.14em;color:var(--c-brand)}
.brand small{font-family:"Inter",var(--f-sans);font-size:11px!important;font-weight:600;letter-spacing:.32em;color:var(--c-muted)}
.desktop-nav{font-size:14px!important;gap:22px}
.desktop-nav a{color:var(--c-text);font-weight:500;padding-block:6px;border-bottom:2px solid transparent}
.desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--c-brand);border-bottom-color:var(--c-brand)}
/* header actions: one shape for all three, colour carries the meaning */
.wa-button{background:transparent;border:1.5px solid var(--c-wa);color:var(--c-wa);border-radius:999px;font-size:14px!important;min-height:40px;padding:0 16px}
.wa-button:hover{background:var(--c-wa);color:#fff}
.lang-switch{background:transparent;border:1.5px solid var(--c-line);border-radius:999px;padding:2px}
.lang-switch button{color:var(--c-text);font-size:14px!important;font-weight:600;min-height:34px;border-radius:999px}
.lang-switch button:hover{background:var(--c-surface)}
.lang-switch button[aria-pressed="true"]{background:var(--c-brand);color:#fff}
.nav-cta{border-radius:999px!important;background:var(--c-brand)!important;border:1.5px solid var(--c-brand)!important;color:#fff!important;font-size:14px!important;font-weight:600;min-height:40px;padding:0 18px!important}
.nav-cta:hover{background:var(--c-brand-deep)!important;border-color:var(--c-brand-deep)!important}
#mobile-nav{background:#fff;border-top:1px solid var(--c-line)}
#mobile-nav a{color:var(--c-ink);font-size:16px!important;border-bottom:1px solid var(--c-line)}

/* ---------- cards and panels ---------- */
.tip-today{background:var(--c-brand-deep);border-radius:var(--r-lg);box-shadow:none;padding:32px 36px}
.tip-today h3{color:#fff;font-size:26px!important}
.tip-today p{color:#d5e0ec;font-size:16px!important}
.tip-today .tip-tag{background:#ffffff1f;color:#fff}
.tip-today a{color:#fff;text-decoration:underline;text-decoration-color:#ffffff66}
.tip-card{border-radius:var(--r-lg)!important;border:1px solid var(--c-line)!important;box-shadow:none!important;background:#fff}
.tip-card h3{font-size:18px!important;color:var(--c-ink)}
.tip-card p{font-size:15px!important;color:var(--c-muted);line-height:1.8}
.tip-tag{border-radius:var(--r-sm)!important;background:var(--c-tint)!important;color:var(--c-brand)!important;font-size:13px!important;font-weight:600;padding:2px 8px!important}
.tip-meta{font-size:13px!important;color:var(--c-muted)}
.tip-today .tip-meta{color:#c3d1e0}
.route-info,.inquiry,.query-filters,.quote-preview,.query-docs,.inquiry-contact,.planning-summary,.road-form,.business-panel,.port-card,.route-card,.destination-panel,.scope-card{border-radius:var(--r-lg)}
.mode-tabs button,.hot-routes button,.business-tabs button,.port-tabs button,.destination-tabs button,[data-query-port],.source-pill{border-radius:var(--r)!important}
.inquiry{border:1px solid var(--c-line);box-shadow:var(--shadow)}
.route-info{background:var(--c-surface);border-color:var(--c-line)}
.route-facts strong,.query-price-block strong{color:var(--c-brand)}

/* estimates: amber label wherever a price is not from a published source */
.estimate-note{margin:16px 0 0;padding:10px 14px;border-radius:var(--r);background:var(--c-amber-tint);color:var(--c-amber);font-size:14px;line-height:1.6;font-weight:500}
.estimate-note[hidden]{display:none}
.source-pill[data-kind="demo"]{background:var(--c-amber-tint)!important;color:var(--c-amber)!important;border-color:#e9c995!important}
.source-pill[data-kind="public"]{background:var(--c-surface)!important;color:var(--c-muted)!important}
.query-price-block[data-kind="demo"] strong,.route-facts>div[data-kind="demo"] strong{color:var(--c-amber)}
.route-facts>div[data-kind="demo"]>span::after{content:" · 估算";color:var(--c-amber);font-weight:600}
html[data-lang="en"] .route-facts>div[data-kind="demo"]>span::after{content:" · estimate"}
html[data-lang="fa"] .route-facts>div[data-kind="demo"]>span::after{content:" · برآورد"}
.query-total[hidden]{display:none!important}

/* ---------- steps / faq ---------- */
.step-num{font-family:"Inter",var(--f-sans);font-size:15px!important;font-weight:700;letter-spacing:.1em;color:var(--c-link)!important;border-bottom-color:var(--c-line)}
.steps h3{font-size:19px!important}
.steps p{font-size:15px!important;color:var(--c-muted)}
.faqs summary{font-size:17px!important;font-weight:600;color:var(--c-ink)}
.faqs p{font-size:15px!important;color:var(--c-muted);line-height:1.85}

/* ---------- closing band and footer ---------- */
.closing,.scope-section,.sea-preparation{background:var(--c-brand)!important}
.closing p{color:#c9d6e4!important;font-size:14px!important}
.closing h2{color:#fff!important;font-size:30px!important}
.footer{background:var(--c-brand-deep)!important;color:#b9c7d6}
.footer .brand strong{color:#fff}
.footer .brand small{color:#9fb1c4}
.footer-links h3{color:#fff!important;font-size:14px!important;letter-spacing:.04em}
.footer-links a,.footer-links span{color:#b9c7d6;font-size:14px!important}
.footer-links a:hover{color:#fff!important}
.footer-bottom{color:#9fb1c4!important;border-color:#ffffff1f!important;font-size:14px!important}
.footer-bottom a{color:#d5e0ec}
.footer-contact{border-color:#ffffff1f!important;color:#d5e0ec}
.footer-contact>strong{color:#fff}
.footer-contact a{color:#d5e0ec}
.footer .back-top,.footer [href="#main"]{border-color:#ffffff40!important;color:#fff!important}
/* page footers on sea, road and tips pages share one layout */
.sea-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-block:28px;font-size:14px;color:#b9c7d6}
.sea-footer p{flex:1 1 360px;margin:0;line-height:1.7}
.sea-footer a{color:#fff;font-weight:600}

/* ---------- layout rhythm ---------- */
.section,.business-section,.about-section,.inquiry-section,.faq-section{padding-block:96px}
/* tips page and the road planning figure */
#tips-main .section-intro{margin-bottom:40px}
#tips-main{padding-top:24px}
.planning-summary strong,.plan-capacity,[id*="plan-"] strong{color:var(--c-brand)}
@media(max-width:800px){
  body{font-size:16px}
  .section-intro h2,.section-head h2,.section h2,.faq-section h2{font-size:27px!important;line-height:1.35}
  .closing h2{font-size:24px!important}
  .hero-desc{font-size:16px!important}
  .section,.business-section,.about-section,.inquiry-section,.faq-section{padding-block:64px}
  .tip-today{padding:24px 22px}
  .tip-today h3{font-size:21px!important}
  .desktop-nav{font-size:15px!important}
}
.result-empty>span{color:var(--c-brand)!important}
.quote-results{border-radius:var(--r-lg)}
/* Home page header: the inquiry form and the WhatsApp quote button are already on the page. */
.home-page .nav-cta{display:none!important}
html[data-lang="en"] .desktop-nav,html[data-lang="fa"] .desktop-nav{gap:14px}
html[data-lang="en"] .home-page .desktop-nav,html[data-lang="en"] body.home-page .desktop-nav{gap:11px}
/* Mobile header: the phone/email row was removed, so the reserved second row goes too. */
@media(max-width:800px){
  .nav{height:70px!important;padding-bottom:0!important}
  html{scroll-padding-top:90px}
  .road-subnav,.sea-subnav{top:70px!important}
  .road-page section[id],.sea-page section[id],.clearance-grid article[id],.quote-results{scroll-margin-top:140px}
  .inquiry{scroll-margin-top:90px}
  #mobile-nav{max-height:calc(100dvh - 70px - 68px);overflow:auto}
}
@media(max-width:800px){.road-hero-copy,.sea-hero-copy{padding-top:120px}}
/* English and Persian: the tab buttons already read "Sea freight", so the small English subtitle would repeat it. */
html[data-lang="en"] .business-tabs button span,html[data-lang="fa"] .business-tabs button span{display:none}
/* Persian: money ranges, day ranges and codes read left-to-right inside right-to-left text. */
html[dir="rtl"] :is(.query-price-block strong,.route-facts>div:first-child strong,.rate,.result-empty>span){direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- hero actions (2026-11-08) ---------- */
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.hero-actions .hero-link{margin-top:0}
.hero .hero-link-primary{background:#ffffff;border-color:#ffffff;color:var(--c-brand)}
.hero .hero-link-primary:hover{background:var(--c-tint);border-color:var(--c-tint);color:var(--c-brand-deep)}

/* ---------- logo (2026-11-08) ---------- */
.brand{display:inline-flex;align-items:center}
.brand .brand-logo{display:block;height:54px;width:auto;max-width:none}
.brand .brand-logo--dark{height:60px}
@media (max-width:560px){.brand .brand-logo{height:44px}}

/* ---------- dark bands: scope, sea preparation, closing (2026-11-08) ---------- */
.scope-section,.sea-preparation,.closing{color:#ffffff}
.scope-section h2,.sea-preparation h2,.closing h2{color:#ffffff!important}
.scope-section .eyebrow,.sea-preparation .eyebrow,.closing .eyebrow,
.scope-section .english-heading,.sea-preparation .english-heading,.closing .english-heading{color:#9cc3ea!important}
.scope-section p,.sea-preparation p,.closing p{color:#c9d6e3}

/* ---------- contrast fixes found by the 2026-11-08 audit ---------- */
.scope-section .section-head>p{color:#c9d6e3}
.sea-table td a{color:var(--c-link)}
.road-form legend>span,.steps .step-num{color:var(--c-link)!important}
.road-footer p{color:#b9c7d6}
.footer .road-footer p{color:#b9c7d6!important}

.source-note{font-size:13px;color:#55667a;line-height:1.8;margin:0 0 22px}