/* =========================================================================
   SazehFlow v7 — theme layer: «engineered» identity + dark / light modes.
   Loaded after style.css / liquid-glass.css / scene3d.css.  The stylesheets are token-driven (--ink-rgb, --surface-*, --text-*,
   --border-*, --glass-*); this file flips the tokens for html[data-theme="light"], keeps cinematic areas dark in both modes
   ("dark zones": hero, header over the hero, footer, preloader, contact CTA, photo captions) and adds the drafting-sheet
   language: blueprint grid, dimension-line section labels, crosshair / structural symbols, registration brackets, title block.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  --blueprint:#6fa8d4;--blueprint-rgb:111,168,212;
  --grid-line:rgba(var(--ink-rgb),.045);--grid-major:rgba(var(--ink-rgb),.075);
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,'Liberation Mono',monospace;
  --sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/svg%3E");
}
html[data-theme="light"]{
  color-scheme:light;
  --ink-rgb:20,22,28;--paper-rgb:247,245,239;
  --surface-0:#f7f5ef;--surface-1:#f1eee6;--surface-2:#ffffff;--surface-3:#e9e5da;
  --text-strong:#12151b;--text:#262a32;--text-muted:#4b4f59;--text-subtle:#666a74;
  --border:rgba(20,22,28,.16);--border-strong:rgba(20,22,28,.3);--border-subtle:rgba(20,22,28,.08);
  --accent:#6f4e14;--accent-hover:#5f4210;--accent-press:#4f360d;--accent-soft:rgba(var(--gold-rgb),.18);--accent-line:rgba(111,78,20,.5);
  --info:#2f6aa8;--blueprint:#2f6aa8;--blueprint-rgb:47,106,168;
  --gold-text:#62440f;--success:#166236;--danger:#9c2a20;--warning:#7a4f08;--crit:#a3420f;
  --glass-bg:linear-gradient(155deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.6) 100%);
  --glass-bg-hover:linear-gradient(155deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.78) 100%);
  --glass-border:rgba(20,22,28,.12);
  --shadow-1:0 1px 2px rgba(20,22,28,.1);--shadow-2:0 8px 26px rgba(20,22,28,.1),inset 0 1px 0 rgba(255,255,255,.8);--shadow-3:0 18px 48px rgba(20,22,28,.16);
  --focus-ring:0 0 0 3px rgba(111,78,20,.4);
  --grid-line:rgba(var(--ink-rgb),.06);--grid-major:rgba(var(--ink-rgb),.1);
  scrollbar-color:#b9b4a6 var(--surface-0);
}

/* Dark zones: same values as the default dark tokens, restated so they survive inside the light theme. */
.topbar,.hero,.site-header:not(.is-scrolled),.site-footer,#preloader,.hero-intro,.contact,.slide,.timeline-modal,.progress-card-media,.back-to-top,.nav-backdrop,.cost3d-label,.prose pre,.blog-cta-box,.post-cta{
  --ink-rgb:255,255,255;--paper-rgb:12,12,11;
  --surface-0:#0c0c0b;--surface-1:#171716;--surface-2:#1b1b1a;--surface-3:#242322;
  --text-strong:#fff;--text:#ecebe8;--text-muted:#a9a59d;--text-subtle:#8f8c86;
  --border:rgba(255,255,255,.14);--border-strong:rgba(255,255,255,.24);--border-subtle:rgba(255,255,255,.08);
  --accent:#c6974f;--accent-hover:#d2a660;--accent-press:#a97a33;--accent-soft:rgba(var(--gold-rgb),.14);--accent-line:rgba(var(--gold-rgb),.42);
  --info:#6f97c9;--blueprint:#6fa8d4;--blueprint-rgb:111,168,212;
  --gold-text:#ead0a2;--success:#8fd4a8;--danger:#f0a0a0;--warning:#e0b877;--crit:#e8845c;
  --glass-bg:linear-gradient(155deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.07) 100%);
  --glass-bg-hover:linear-gradient(155deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.09) 100%);--glass-border:rgba(255,255,255,.2);
  --dark:#171716;--dark-muted:#a9a59d;color-scheme:dark;
  --grid-line:rgba(255,255,255,.045);--grid-major:rgba(255,255,255,.075);
}

/* header: glass bar in both themes once scrolled */
html[data-theme="light"] .site-header.is-scrolled{background:rgba(var(--paper-rgb),.84);border-bottom-color:var(--border)}
html[data-theme="light"] .site-header.is-scrolled .logo-mark img,html[data-theme="light"] .site-header.is-scrolled .logo-text{filter:none}
html[data-theme="light"] .site-header.is-scrolled .logo-mark img{filter:brightness(0) opacity(.86)}
html[data-theme="light"] body.nav-open .site-header{background:rgba(var(--paper-rgb),.98)}
html[data-theme="light"] body.nav-open .site-header .logo-mark img{filter:brightness(0) opacity(.86)}
html[data-theme="light"] .nav-drop-menu{background:var(--surface-2);border-color:var(--border);box-shadow:var(--shadow-3)}
html[data-theme="light"] ::selection{background:rgba(var(--gold-rgb),.35);color:#12151b}

/* ---------------------------------------------------------------- theme toggle */
.theme-toggle{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;color:var(--text-strong);
  background:rgba(var(--ink-rgb),.06);border:1px solid var(--border);transition:background var(--dur-2),transform var(--dur-2) var(--ease-out),border-color var(--dur-2)}
.theme-toggle:hover{background:rgba(var(--ink-rgb),.12);border-color:var(--accent-line);transform:rotate(-14deg)}
.theme-toggle:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.theme-toggle svg{grid-area:1/1;width:18px;height:18px;transition:opacity var(--dur-3),transform var(--dur-3) var(--ease-out)}
.theme-toggle .ico-sun{opacity:0;transform:rotate(-70deg) scale(.6)}
html[data-theme="light"] .theme-toggle .ico-sun{opacity:1;transform:none}
html[data-theme="light"] .theme-toggle .ico-moon{opacity:0;transform:rotate(70deg) scale(.6)}
html:not([data-theme="light"]) .theme-toggle .ico-moon{opacity:1}
/* smooth cross-fade when the theme flips (never for reduced-motion users) */
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .35s,border-color .35s,color .35s,fill .35s,stroke .35s,box-shadow .35s!important}

/* ---------------------------------------------------------------- engineered identity */
/* 1 · drafting grid under every content section (fine 32 px + major 160 px lines, fading toward the edges) */
main>section.section-pad:not(.section-dark)::after,.blog-main .blog-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 25%,transparent 85%);mask-image:radial-gradient(120% 90% at 50% 40%,#000 25%,transparent 85%)}
main>section.section-pad{position:relative}

/* 2 · section labels become drawing callouts: [symbol] 02 / TITLE ———|  (dimension line with end ticks) */
.section-label{font-family:var(--mono);letter-spacing:.16em;opacity:.9}
html[lang="fa"] .section-label{font-family:var(--font-fa);letter-spacing:.04em}
.section-label:before{width:16px;height:16px;transform:none;box-shadow:none;background:var(--accent);
  -webkit-mask:var(--sym) center/contain no-repeat;mask:var(--sym) center/contain no-repeat}
.section-label:after{content:"";flex:1;max-width:clamp(80px,22vw,260px);height:9px;opacity:.55;
  background:linear-gradient(var(--accent),var(--accent)) center/100% 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 50%/1px 100% no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 50%/1px 100% no-repeat}
/* structural symbols per section (I-beam, column, crane, divider/compass, spec sheet, plan, hard hat, level, survey mark) */
#about{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14M5 20h14M12 4v16M8 4v2M16 4v2M8 20v-2M16 20v-2'/%3E%3C/svg%3E")}
#projects{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21h12M8 21V8h8v13M10 8V4h4v4M8 13h8'/%3E%3C/svg%3E")}
#inprogress{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21V6M5 21h6M2 6h20M8 3l-4 3M8 3l9 3M17 6v7M15 13h4v3h-4z'/%3E%3C/svg%3E")}
#approach{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 6 21M12 3l6 18M8.5 14h7M12 3v-1'/%3E%3C/svg%3E")}
#articles{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 12h7M9 16h7'/%3E%3C/svg%3E")}
#company{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6M9 11h.01M15 11h.01'/%3E%3C/svg%3E")}
#team{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16a8 8 0 0 1 16 0M2 16h20v3H2zM12 4v4M9 8h6'/%3E%3C/svg%3E")}
#faq{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='9' width='20' height='6' rx='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Cpath d='M6 9v2M10 9v2M14 9v2M18 9v2'/%3E%3C/svg%3E")}
#contact{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 21h18zM12 10v5M12 18h.01'/%3E%3C/svg%3E")}

/* 3 · registration brackets (⌜ ⌝ ⌞ ⌟) on key cards — corners light up on hover */
.company-fact-tile,.progress-card,.post-card,.contact-form,.calc-card,.sch-tile,.ctl-card,.bl-card{position:relative}
.company-fact-tile::before,.progress-card::before,.post-card::before,.contact-form::before,.calc-card::before,.bl-card::before{content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;border-radius:inherit;opacity:.5;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100%/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100%/1px 12px no-repeat;
  transition:opacity var(--dur-2)}
.company-fact-tile:hover::before,.progress-card:hover::before,.post-card:hover::before,.contact-form:focus-within::before,.calc-card:hover::before,.bl-card:hover::before{opacity:1}

/* 4 · hero HUD: north arrow, scale bar, drawing revision — decorative, sits opposite the live-stage chip */
.eng-hud{position:absolute;z-index:3;inset-inline-start:clamp(18px,4vw,56px);bottom:clamp(22px,4vh,44px);display:flex;align-items:flex-end;gap:16px;color:rgba(255,255,255,.72);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;direction:ltr}
.eng-hud svg{display:block;color:var(--accent)}
.eng-hud .scale{display:grid;gap:5px}.eng-hud .scale i{display:block;height:6px;width:150px;background:
  linear-gradient(90deg,currentColor 0 25%,transparent 25% 50%,currentColor 50% 75%,transparent 75%) 0 0/100% 100%;border:1px solid currentColor;opacity:.85}
.eng-hud .scale span{display:flex;justify-content:space-between;opacity:.8}
.eng-hud .rev{padding-inline-start:14px;border-inline-start:1px solid rgba(255,255,255,.28);line-height:1.8}
.eng-hud .rev b{color:var(--accent);font-weight:600}
@media (max-width:1100px){.eng-hud{display:none}}

/* 5 · title block (footer) — like the corner table of a drawing sheet */
.title-block{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr repeat(4,1fr);margin:0 5vw 26px;border:1px solid var(--border-strong);font-family:var(--mono);direction:ltr;font-size:10.5px}
.title-block>div{padding:9px 14px;border-inline-end:1px solid var(--border);min-width:0}
.title-block>div:last-child{border-inline-end:0}
.title-block small{display:block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:3px}
.title-block b{font-weight:600;letter-spacing:.06em;color:var(--text-strong)}
.title-block .tb-name b{font-family:var(--font-fa);letter-spacing:0;font-size:13px}
.title-block .tb-rev b{color:var(--accent)}
@media (max-width:760px){.title-block{grid-template-columns:1fr 1fr}.title-block .tb-name{grid-column:1/-1;border-bottom:1px solid var(--border)}}

/* 6 · technical micro-typography for Latin tags */
.hero-badge,.eyebrow{font-family:var(--mono);letter-spacing:.1em}
html[lang="fa"] .hero-badge,html[lang="fa"] .eyebrow{font-family:var(--font-fa);letter-spacing:.02em}
.hero-stats-bar strong,.stats strong,.calc-result-value,.gauge b{font-variant-numeric:tabular-nums}

/* 7 · hatch rule (concrete section symbol) for dividers */
.eng-hatch{height:8px;border-block:1px solid var(--border);background:repeating-linear-gradient(-45deg,var(--border) 0 1px,transparent 1px 6px)}

/* light theme polish for components that carried their own dark values */
html[data-theme="light"] .btn-ghost-lg,html[data-theme="light"] .nav-contact{--ink-rgb:20,22,28}
html[data-theme="light"] .hero .btn-ghost-lg{--ink-rgb:255,255,255}
html[data-theme="light"] img.team-photo,html[data-theme="light"] .project-image{filter:none}
html[data-theme="light"] .cursor-dot{background:#12151b}html[data-theme="light"] .cursor-ring{border-color:rgba(18,21,27,.5)}

@media print{.theme-toggle,.eng-hud{display:none!important}html[data-theme="light"],html[data-theme="dark"]{color-scheme:light}}
@media (prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle svg{transition:none}html.theme-anim *{transition:none!important}}

/* light theme: the dark theme's glow shadows under headings only muddy dark text on paper */
html[data-theme="light"] main>section:not(.hero):not(.contact) :is(h1,h2,h3,h4,p,span,strong,em,a,li){text-shadow:none}

/* light theme: recessed wells, charts and table shells carried near-black translucent fills */
html[data-theme="light"] :is(.ctl-form,.sch-form,.bl-app,.calc-card,.ctl-import-opts) :is(input,select,textarea){background:rgba(20,22,28,.05);border-color:var(--border);box-shadow:inset 0 1px 2px rgba(20,22,28,.12)}
html[data-theme="light"] :is(.ctl-form,.sch-form,.bl-app,.ctl-import-opts) :is(input,select):focus{background:#fff;box-shadow:inset 0 1px 2px rgba(20,22,28,.1),0 0 0 3px rgba(var(--gold-rgb),.3)}
html[data-theme="light"] :is(.sch-gscroll,.sch-tscroll,.ctl-chart){background:rgba(20,22,28,.035)}
html[data-theme="light"] select option{background:#fff;color:#12151b}

/* the billing sheet preview is real paper: dark ink in both themes */
.bl-paper,.bl-sheet,#printReport{--dark-muted:#555;--dark:#fff;--text-strong:#111;--text:#1c1d21;--text-muted:#555;--text-subtle:#666;--ink-rgb:20,22,28;--border:rgba(20,22,28,.2);--border-subtle:rgba(20,22,28,.1);color:#111}
/* dimmed helper text must not rely on opacity for its contrast */
html[data-theme="light"] :is(.sch-unit,.cell-sub,.field-hint,.hint){opacity:1}

.prose pre code{color:inherit}

/* customer area entry in the header */
.client-login{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid rgba(var(--ink-rgb),.28);border-radius:999px;color:var(--text-strong);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.client-login:hover{background:rgba(var(--ink-rgb),.08);border-color:var(--gold-text)}
@media (max-width:640px){.client-login span{display:none}.client-login{padding:9px}}