/* =========================================================
   Wisdom — landing page
   Architecture: oversized display type, alternating white /
   tint bands, 28px radii, pill buttons, no shadows,
   exactly one accent colour.
   ========================================================= */

/* ---- Fonts (self-hosted variable woff2) ---------------- */
@font-face {
  font-family: "Sansita Swashed";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/sansita-swashed-latin.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: "Sansita Swashed";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/sansita-swashed-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Petrona";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/petrona-latin.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: "Petrona";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/petrona-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Fonts (self-hosted Farsi) -------------------------
   Farsi is the default language, so these two are the faces
   most visitors actually see, and they are the pair preloaded
   in <head>. Block FD stands in for Sansita Swashed on display
   type, IRANSansX Medium for Petrona on everything else.

   Block FD is variable, but none of its axes is weight — they
   are RUND (roundness 0–100), DSTY (dot shape 1–4) and CSHM
   (eye of the letter, 1 square / 2 wide). So it is declared at
   a single weight and the Farsi display rules further down ask
   for that same weight; see the note there. RUND 100 is the
   rounded cut, which is the one that matches the 28px radii
   and pill buttons this page is built from.

   IRANSansX is a single-weight woff declared over a weight
   range, so the 600/700 rules elsewhere reuse the same file
   instead of asking the browser to synthesise a bold. */
@font-face {
  font-family: "Block FD";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Block-FD-VF.woff2") format("woff2-variations");
  font-variation-settings: "RUND" 100, "DSTY" 1, "CSHM" 1;
}
@font-face {
  font-family: "IRANSansX";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/IRANSansX-Medium.woff") format("woff");
}

/* ---- Tokens ------------------------------------------- */
:root {
  /* colour */
  --ink:        #14231a;   /* headlines, body */
  --ink-2:      #48544c;   /* secondary text — 7.9:1 on white, 7.3:1 on canvas */
  --hairline:   #d6ded4;
  --paper:      #ffffff;
  --canvas:     #f4f7f2;   /* alternating band */
  --wash:       #eefbe1;   /* faint brand tint, decorative only */
  --brand:      #58cc02;   /* fills only — never text on white */
  --brand-deep: #2a6d04;   /* brand as text — 6.4:1 on white */

  /* type */
  --font-display: "Sansita Swashed", Georgia, serif;
  --font-body: "Petrona", Georgia, "Times New Roman", serif;
  --font-fa-display: "Block FD", "Sansita Swashed", Tahoma, sans-serif;
  --font-fa-body: "IRANSansX", Tahoma, "Segoe UI", sans-serif;

  --t-display: clamp(2.6rem, 7.4vw, 5.5rem);
  --t-h2:      clamp(2rem, 4.6vw, 3.5rem);
  --t-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --t-lead:    clamp(1.1875rem, 1.7vw, 1.5rem);
  --t-body:    1.125rem;    /* 18px — Petrona sets small at 17 */
  --t-ui:      1rem;
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;

  /* space */
  --gap:       1.75rem;     /* 28px */
  --section:   clamp(4.5rem, 10vw, 7.5rem);
  --maxw:      1200px;
  --readable:  46ch;

  /* radii */
  --r-card: 28px;
  --r-pill: 999px;
  --r-sm:   12px;
}

/* ---- Reset -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Focus & skip link -------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.contact :focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute; top: -100px; inset-inline-start: 1rem;
  z-index: 100; background: var(--ink); color: var(--brand);
  padding: 0.75rem 1.25rem; border-radius: var(--r-pill); text-decoration: none;
}
.skip:focus-visible { top: 1rem; }

/* ---- Type --------------------------------------------- */
.display, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.02em; }
.h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.018em; }
.h3 {
  font-family: var(--font-body);
  font-size: var(--t-h3); font-weight: 700; line-height: 1.3;
  letter-spacing: -0.005em; margin: 0 0 0.5rem;
}
.eyebrow {
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.11em;
  margin-bottom: 1.25rem;
}
.lead {
  font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2);
  font-weight: 400; max-width: 34ch;
}
.lead-sm { font-size: 1.1875rem; line-height: 1.55; max-width: var(--readable); }
.note { font-size: var(--t-small); color: var(--ink-2); }

/* ---- Buttons ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.5rem;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--t-ui); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-fill { background: var(--brand); color: var(--ink); }        /* 7.8:1 */
.btn-fill:hover { background: #4eb802; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(20,35,26,0.4); }
.btn-ghost:hover { background: var(--canvas); border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--brand); }
.btn-ink:hover { background: #0b1710; }
.btn-outline-ink { background: transparent; color: var(--ink); border-color: rgba(20,35,26,0.62); }
.btn-outline-ink:hover { background: rgba(20,35,26,0.07); border-color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0.5rem 1.125rem; font-size: var(--t-small); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-row-center { justify-content: center; }

/* ---- Nav ---------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.nav.is-stuck { border-bottom-color: var(--hairline); }
.nav-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0.625rem clamp(1.25rem, 5vw, 2.5rem);
  display: flex; align-items: center; gap: 1.5rem;
}
/* The brand is the logo lockup — a tooth over the wordmark —
   swapped per language by main.js. It is near square, so it is
   sized by height and the width follows.

   The lockup is vertical, so at nav height the wordmark under
   the tooth is decorative rather than readable — the mark is
   what carries recognition there, and the link takes its
   accessible name from aria-label. The footer has the room to
   run it large enough to read. A horizontal lockup, if one
   exists, would be a better fit for the nav: it is a one-line
   change, since the file path is just a translation key. */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--ink);
  margin-inline-end: auto;
}
.brand-logo { height: 56px; width: auto; display: block; }
.brand-logo-lg { height: 84px; }
.nav-links { display: flex; gap: 0.25rem; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 0.75rem; border-radius: var(--r-sm);
  font-size: var(--t-ui); color: var(--ink); text-decoration: none;
}
.nav-links a:hover { background: var(--canvas); }

.nav-tools { display: flex; align-items: center; gap: 0.5rem; }
.nav-cta { min-height: 42px; padding: 0 1.125rem; font-size: var(--t-small); }

.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--canvas); border: 0; border-radius: var(--r-pill); cursor: pointer;
}
.menu-bars { display: grid; gap: 5px; }
.menu-bars i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.menu-panel[hidden] { display: none; }
.menu-panel {
  border-top: 1px solid var(--hairline);
  padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1rem;
  display: grid;
}
.menu-panel a {
  padding: 0.875rem 0; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.menu-panel a:last-child { border-bottom: 0; }

/* ---- Hero --------------------------------------------- */
.hero { padding: clamp(3.5rem, 9vw, 6.5rem) 0 var(--section); text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero .lead { margin: 1.75rem 0 2rem; max-width: 40ch; }
.hero .cta-row { justify-content: center; }
.hero .note { margin-top: 1.25rem; }

/* Signature: the swash — Sansita Swashed's flourish, drawn as a smile. */
.swash-word { position: relative; display: inline-block; white-space: nowrap; }
.swash {
  position: absolute; left: -0.06em; right: -0.06em; bottom: -0.24em;
  width: calc(100% + 0.12em); height: 0.34em; overflow: visible;
}
.swash path {
  fill: none; stroke: var(--brand); stroke-width: 7px; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 350ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Sections ----------------------------------------- */
.section { padding: var(--section) 0; background: var(--paper); }
.band { padding: var(--section) 0; background: var(--canvas); }

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head .h2 { max-width: 18ch; }
.sec-head .lead-sm { margin-top: 1.125rem; }
/* ---- Service cards ------------------------------------ */
.cards { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--paper); border-radius: var(--r-card);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.card p { color: var(--ink-2); max-width: 42ch; }
.card-mark {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--wash); margin-bottom: 1.25rem;
}
.card-mark img { width: 39px; height: 39px; object-fit: contain; }

/* ---- Work --------------------------------------------- */
.work-grid {
  display: grid; gap: var(--gap); justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 460px));
}
.work-link {
  display: grid; gap: 1rem; text-decoration: none;
  border-radius: var(--r-card); padding-bottom: 0.5rem;
}
.work-shot {
  display: grid; align-content: center; justify-items: start; gap: 10px;
  aspect-ratio: 16 / 9; border-radius: var(--r-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* A real screenshot instead of the drawn placeholder. cover +
   top means a full-page shot of any height crops to its own top,
   which is what a site thumbnail should show. */
.work-shot-img { padding: 0; overflow: hidden; background: var(--canvas); }
.work-shot-img img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
}

.work-link:hover .work-shot { transform: translateY(-6px); }
.work-meta { display: grid; gap: 2px; }
.work-name { font-weight: 700; font-size: 1.1875rem; }
.work-kind { color: var(--ink-2); font-size: var(--t-small); }
.work-go {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--brand-deep); font-size: var(--t-small); font-weight: 600;
}
/* A drawn chevron, not a "›" character: angle-quote glyphs are
   Bidi_Mirrored, so inside an RTL run the browser can flip them
   on its own and undo the html[lang="fa"] override below. A
   shape built from borders isn't text, so it only ever points
   the way its own transform says. */
.work-go::after {
  content: "";
  width: 0.36em; height: 0.36em;
  border-style: solid; border-color: currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
.work-link:hover .work-go { text-decoration: underline; }

/* ---- Motion reels ------------------------------------- */
.reels {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Reel order is content, not layout — fixed left-to-right regardless
     of dir="rtl"/"ltr" on <html>, unlike the rest of the page's
     deliberate language-mirrored layout. .reel-title re-asserts rtl
     below so Farsi titles still read correctly within each card. */
  direction: ltr;
}
.reel-stage {
  display: block; width: 100%;
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--r-card); background: var(--paper);
  margin-bottom: 1.25rem;
}
.reel-video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.reel-spinner {
  position: absolute; inset: 0; margin: auto;
  width: 32px; height: 32px;
  border: 3px solid rgba(20,35,26,0.15);
  border-top-color: var(--brand);
  border-radius: 50%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
  animation: reel-spin 0.7s linear infinite;
}
.reel-stage.is-loading .reel-spinner { opacity: 1; }
@keyframes reel-spin { to { transform: rotate(360deg); } }
.reel-title { font-size: 1.125rem; margin-bottom: 0.125rem; }
html[lang="fa"] .reel-title { direction: rtl; text-align: right; }

/* ---- Contact ------------------------------------------ */
.contact { background: var(--brand); padding: clamp(4.5rem, 10vw, 7rem) 0; }
.contact-inner { text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.contact-title { max-width: 16ch; }
.contact-sub { color: rgba(20,35,26,0.86); max-width: 42ch; font-size: 1.1875rem; }
.contact .cta-row { margin-top: 0.75rem; }

/* ---- Footer ------------------------------------------- */
.footer { padding: 3rem 0; background: var(--paper); }
.footer-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.5rem;
  border-top: 1px solid var(--hairline); padding-top: 2.5rem;
}
.brand-sm { margin-bottom: 0.5rem; }
.foot-tag, .foot-rights { color: var(--ink-2); font-size: var(--t-small); }
.foot-rights { margin-top: 0.5rem; }

/* ---- Responsive --------------------------------------- */
@media (min-width: 861px) {
  .menu-panel { display: none; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .sec-head .h2, .contact-title { max-width: none; }
}
@media (max-width: 560px) {
  .cta-row .btn { width: 100%; }
}

/* ---- Language switch ----------------------------------
   One button, labelled with the language it switches to, so
   its own label has to render in that language's font. */

/* The markup ships in Farsi. When a stored English choice is
   read in <head>, the body waits the few milliseconds it takes
   main.js to swap the copy rather than flashing Farsi. The
   attribute is only ever set by script, so a no-JS visitor
   never hits this rule. */
html[data-i18n-pending] body { visibility: hidden; }

.lang-btn {
  min-height: 42px; padding: 0 1rem;
  background: transparent; color: var(--ink);
  border: 1px solid rgba(20,35,26,0.28); border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 600; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.lang-btn:hover { background: var(--canvas); border-color: var(--ink); }
.lang-btn[lang="fa"] { font-family: var(--font-fa-body); }
.lang-btn[lang="en"] { font-family: "Petrona", Georgia, serif; }

/* ---- Farsi ---------------------------------------------
   Same layout, mirrored by dir="rtl" on <html>. Only the
   type changes: two Farsi faces, no uppercasing, no negative
   tracking, and the looser leading Arabic script needs. */
html[lang="fa"] {
  --font-display: var(--font-fa-display);
  --font-body: var(--font-fa-body);
}
html[lang="fa"] body { line-height: 1.85; }
html[lang="fa"] .display,
html[lang="fa"] .h2,
html[lang="fa"] .h3 { letter-spacing: 0; }
/* Block FD has no weight axis, so the 700 the Latin display
   rules ask for would be a browser-synthesised fake bold —
   smeared outlines on a face that is already solid by design.
   The weight is pinned to the one the file actually has and
   synthesis is switched off.

   It is also compact — 1.07em from ascender to descender where
   IRANSansX spends 1.5em — so Farsi display type runs close to
   the Latin scale rather than a step under it, on tighter
   leading than the body face wants. */
html[lang="fa"] {
  --t-display: clamp(2.5rem, 7vw, 5.2rem);
  --t-h2:      clamp(1.95rem, 4.4vw, 3.35rem);
}
html[lang="fa"] .display,
html[lang="fa"] .h2 {
  font-weight: 400;
  font-synthesis: none;
  /* Block FD's space glyph is 0.024em — next to nothing, so
     headline words collide without this. Roughly the 0.25em a
     normal space would be. */
  word-spacing: 0.22em;
}
html[lang="fa"] .display { line-height: 1.28; }
html[lang="fa"] .h2 { line-height: 1.3; }
html[lang="fa"] .eyebrow { text-transform: none; letter-spacing: 0.02em; }
html[lang="fa"] .lead { max-width: 38ch; }
html[lang="fa"] .sec-head .h2 { max-width: 22ch; }
html[lang="fa"] .contact-title { max-width: 20ch; }
html[lang="fa"] .work-go::after { transform: rotate(135deg); }

/* The swash is drawn left-to-right under a left-to-right
   word; under an RTL word it reads better mirrored. */
html[lang="fa"] .swash { transform: scaleX(-1); bottom: -0.04em; }

/* Latin strings that stay Latin inside Farsi copy. */
html[lang="fa"] .work-kind { direction: rtl; }

/* ---- Motion preferences -------------------------------
   Off by OS setting: elements rest in their finished state
   rather than freezing mid-animation. Native <video> ignores
   this rule entirely — main.js pauses reel videos separately. */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] .swash path { stroke-dashoffset: 0; }