/* ===========================================================
   SPC — theme switch (light ⇄ dark). Colours for the dark theme
   live in theme-dark.css; this file styles the toggle itself and
   the short cross-fade while the theme changes.
   =========================================================== */
.theme-toggle{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;
  color:var(--ink);border-radius:40px;}
.tt-track{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;
  width:58px;height:30px;padding:0 8px;border-radius:40px;border:1px solid var(--line);
  background:color-mix(in oklab,var(--paper) 70%,transparent);transition:background-color .35s,border-color .35s;}
.tt-track svg{position:relative;z-index:1;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  opacity:.45;transition:opacity .3s,color .3s;}
.tt-moon{fill:currentColor;stroke:none;}
.tt-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .35s;}
.theme-toggle:not(.is-dark) .tt-sun{opacity:1;color:var(--bg);}
.theme-toggle.is-dark .tt-moon{opacity:1;color:var(--bg);}
.theme-toggle.is-dark .tt-knob{transform:translateX(28px);}
.theme-toggle:hover .tt-track{border-color:var(--ink-faint);}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* dark header variant (sector/contact pages sit on a dark hero) */
.topbar.dark .theme-toggle{color:#eef3f9;}
.topbar.dark .tt-track{border-color:rgba(238,243,249,.22);background:rgba(8,12,18,.35);}
.topbar.dark .tt-knob{background:#eef3f9;}
.topbar.dark .theme-toggle:not(.is-dark) .tt-sun,.topbar.dark .theme-toggle.is-dark .tt-moon{color:#0b0f15;}
html[dir="rtl"] .tt-knob{left:auto;right:3px;}
html[dir="rtl"] .theme-toggle.is-dark .tt-knob{transform:translateX(-28px);}
@media(max-width:600px){.tt-track{width:50px;height:28px;padding:0 6px;}.tt-knob{width:20px;height:20px;}
  .theme-toggle.is-dark .tt-knob{transform:translateX(22px);}html[dir="rtl"] .theme-toggle.is-dark .tt-knob{transform:translateX(-22px);}}

/* brief, global cross-fade only while switching (never during normal scrolling) */
html.theme-switching,html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease!important;}
@media(prefers-reduced-motion:reduce){html.theme-switching *{transition:none!important;}}
html.theme-switching .tt-knob{transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .35s!important;}

/* ---- hero copy over the live 3D scene: heavier weight + a very soft shadow ---- */
.hero h1,.hero p,.hero .kicker{text-shadow:0 1px 2px rgba(16,20,26,.06),0 4px 18px rgba(16,20,26,.12);}
html[data-theme="dark"] .hero h1,html[data-theme="dark"] .hero p,html[data-theme="dark"] .hero .kicker{
  text-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 20px rgba(0,0,0,.45);}
.hero p{color:var(--ink);font-weight:500;}
html[dir="rtl"] body .hero h1{font-weight:800!important;}   /* beats fa.css :is() heading weight */
html[dir="rtl"] body .hero p{font-weight:600;}

/* ---- phone header (≤600px): one row that always fits, down to 320px ----
   [back] [logo] ············ [call to action] [☰]
   (start/end flip with the page direction). Language and theme live in the ☰ menu
   on phones; back becomes a 36px icon button. */
@media (max-width:600px){
  html body .topbar{display:flex;align-items:center;gap:8px;padding:12px 14px;}
  html body .topbar:not(.dark) .meta{display:none!important;}
  html body .topbar.dark .meta{display:flex!important;flex:none;}
  html body .topbar .wordmark{flex:none;justify-self:auto;}
  html body .topbar .brand-link{padding:8px 2px;}                        /* taller tap target */
  html body .topbar .brand-text{font-size:19px;}
  html body .topbar .actions{margin-inline-start:auto;gap:6px;justify-self:auto;}

  html body .topbar.dark .back{width:36px;height:36px;padding:0;justify-content:center;gap:0;}
  html body .topbar.dark .back i{font-size:15px;}
  .topbar .back .back-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

  html body .topbar .lang,html body .topbar .theme-toggle{display:none!important;}

  html body .topbar .btn{padding:0 14px;height:36px;font-size:12px;gap:6px;white-space:nowrap;}
}
@media (max-width:380px){
  html body .topbar{gap:5px;padding:12px 10px;}
  html body .topbar .actions{gap:4px;}
  html body .topbar .brand-text{font-size:16px;}
  html body .topbar.dark .back{width:34px;height:34px;}
  html body .topbar .btn{padding:0 10px;height:34px;font-size:11.5px;}
  html body .topbar .btn i{display:none;}
}

/* ---- hero copy on narrow phones: keep every line inside the screen ---- */
@media (max-width:600px){
  .hero{padding-left:16px;padding-right:16px;}
  .hero .kicker{letter-spacing:.16em;line-height:1.7;max-width:100%;}
}
@media (max-width:400px){
  .hero h1{font-size:clamp(30px,9.6vw,40px);}
  html[dir="rtl"] .hero h1{font-size:clamp(30px,9vw,36px);}
}

/* footer wordmark: its 38px floor made "SAZEH PEYVAND" wider than a 320px screen
   (the page then zoomed out); on phones it scales with the width instead */
@media (max-width:600px){ .foot-mark{font-size:9.4vw;} }

/* ---- header backdrop once content scrolls under it (html.hdr-stuck, set by the
   inline script in the layout). Light header → page colour; the dark
   header of the sector/contact pages → ink, so its white logo and buttons
   stay readable over the light sections too. ---- */
/* no backdrop-filter: blurring the page behind a fixed bar makes Chromium paint the About
   video (a hardware video layer) black on some GPUs — a near-opaque fill instead */
html.hdr-stuck .topbar{background-color:color-mix(in oklab,var(--bg) 95%,transparent);box-shadow:0 1px 0 var(--line);}
html.hdr-stuck .topbar.dark{background-color:rgba(7,11,18,.95);box-shadow:0 1px 0 rgba(238,243,249,.08);}
@media (min-width:601px){ html.hdr-stuck .topbar{padding-top:14px;padding-bottom:14px;} }

/* ---- comfortable tap targets on touch screens ---- */
@media (max-width:600px){
  .foot-col a{display:inline-block;padding:7px 0;}
  .cta .back-all{display:inline-block;padding:12px 0;}
}
@media (max-width:600px){ .ct-line{padding-block:6px;} }

/* ---- sector hero: blueprint tags that would sit on the copy or past the frame
   get .is-hidden from SectorRuntime (fades out, overriding the script's opacity) ---- */
.bp-tag.is-hidden{opacity:0!important;}
/* capability column glyph "[ A ]" must not break over lines */
.cap-h .gl{white-space:nowrap;flex:none;}

/* ---- hero copy (desktop): bottom-right, in the open ground beside the works,
   instead of centred over the sheds. Physically right in both languages (the 3D
   scene isn't mirrored); text keeps its reading alignment. ---- */
@media (min-width:901px){
  .hero{align-items:flex-end;justify-content:flex-end;text-align:start;
    padding:0 var(--pad,clamp(28px,4vw,64px)) clamp(64px,9vh,110px);}
  html[dir="rtl"] .hero{align-items:flex-start;}             /* RTL cross-axis start = right */
  .hero > .kicker,.hero > h1,.hero > p{width:min(600px,40vw);max-width:none;}
  .hero .kicker{margin-bottom:16px;letter-spacing:.22em;}
  .hero h1{font-size:clamp(38px,3.55vw,66px);}
  html[dir="rtl"] body .hero h1{font-size:clamp(30px,3.1vw,54px);line-height:1.25;}   /* beats fa.css */
  .hero p{margin-top:16px;font-size:clamp(15px,1.05vw,18px);}
  .hero .scrollcue{left:0;right:0;margin-inline:auto;width:max-content;}
}

/* ---- hero copy (phones / tablets): title + text low in the open ground below the
   works, just above the scroll cue (bottom: 8vh); the kicker line up top ---- */
@media (max-width:900px){
  .hero{justify-content:flex-end;padding-top:0;padding-bottom:calc(8vh + 92px);}
  .hero p{margin-top:14px;}
  /* the kicker line sits up top, in the open sky under the header */
  .hero .kicker{position:absolute;top:calc(64px + 3vh);left:16px;right:16px;margin:0;}
}

/* ---- contact details with line icons (contact sidebar + footer) ---- */
.ct-blk.has-ic{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;}
.ct-blk.has-ic>*:not(.ct-ic){grid-column:2;}
.ct-blk.has-ic>.ct-line{justify-self:start;}
.ct-ic{grid-column:1;grid-row:1 / span 4;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 30%,var(--line));
  background:color-mix(in oklab,var(--accent) 8%,transparent);transition:background .3s,color .3s,transform .4s cubic-bezier(.16,1,.3,1);}
.ct-blk.has-ic:hover .ct-ic{background:var(--accent);color:#fff;transform:translateY(-2px);}
.ct-addr .a-item h3{display:flex;align-items:center;gap:7px;}
.ct-addr .a-item h3 svg{color:var(--accent);flex:none;}
.foot-h{display:flex;align-items:center;gap:10px;}
.foot-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--accent);
  border:1px solid rgba(118,211,255,.22);background:rgba(58,162,228,.08);}
.foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.foot-links a{display:inline-flex;align-items:center;gap:10px;}
.foot-links a svg{color:#7e8a9c;flex:none;transition:color .3s;}
.foot-links a:hover svg{color:var(--accent);}
@media(max-width:600px){.ct-blk.has-ic{grid-template-columns:38px minmax(0,1fr);column-gap:14px;}.ct-ic{width:38px;height:38px;border-radius:10px;}}

/* ---- footer wordmark: brushed-steel letters; every few seconds a crisp band of
   chrome light passes across them, and a matching light runs along the rule below ---- */
.foot-mark{
  background-image:
    linear-gradient(105deg,transparent 0 40%,#aab4c2 43.5%,#4b5666 47.4%,#ffffff 49.4%,#ffffff 50.4%,#5a6676 52.6%,#b9c2ce 56.5%,transparent 60% 100%),
    linear-gradient(180deg,#ffffff 0%,#ffffff 45%,#cdd6e2 100%);
  background-size:300% 100%,100% 100%;
  background-repeat:no-repeat;
  background-position:100% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  animation:fmSheen 8s cubic-bezier(.55,0,.35,1) 1.5s infinite,fmBloom 8s cubic-bezier(.55,0,.35,1) 1.5s infinite;
}
/* the metal catches the light: a soft bloom while the band crosses */
@keyframes fmBloom{
  0%,6%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));}
  15%{filter:drop-shadow(0 0 16px rgba(255,255,255,.28));}
  32%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));}
}
/* ...and a glint flashes on the last letter as the band leaves it */
.foot-mark::after{content:"";position:absolute;top:4%;right:1.5%;width:.42em;height:.42em;pointer-events:none;
  background:radial-gradient(circle,#fff 0 6%,rgba(255,255,255,.55) 14%,transparent 38%),
    linear-gradient(90deg,transparent 46%,#fff 50%,transparent 54%),
    linear-gradient(0deg,transparent 46%,#fff 50%,transparent 54%);
  -webkit-mask:radial-gradient(circle,#000 0 30%,transparent 70%);mask:radial-gradient(circle,#000 0 30%,transparent 70%);
  opacity:0;transform:scale(0) rotate(0);
  animation:fmGlint 8s ease-out 1.5s infinite;}
@keyframes fmGlint{
  0%,19%{opacity:0;transform:scale(0) rotate(0);}
  22.5%{opacity:1;transform:scale(1.15) rotate(45deg);}
  29%{opacity:0;transform:scale(.3) rotate(90deg);}
  100%{opacity:0;transform:scale(0) rotate(90deg);}
}
@keyframes fmSheen{
  0%{background-position:100% 0,0 0;}
  32%,100%{background-position:0% 0,0 0;}
}
.footer .foot-bottom{position:relative;}
.footer .foot-bottom::before{content:"";position:absolute;top:-1px;left:0;width:28%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#c9d2de,transparent);opacity:0;
  animation:fmRule 8s cubic-bezier(.55,0,.35,1) 1.5s infinite;}
@keyframes fmRule{
  0%{transform:translateX(-30%);opacity:0;}
  4%{opacity:1;}
  28%{opacity:1;}
  32%,100%{transform:translateX(360%);opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .foot-mark,.foot-mark::after,.footer .foot-bottom::before{animation:none;} }