/* Brand system from ideal design, pages 7, 9–10 and 13–21. */
@font-face { font-family: Manrope; src: url("./assets/fonts/Manrope-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: Modam; src: url("./assets/fonts/ModamVF.ttf") format("truetype"); font-weight: 200 900; font-stretch: 70% 100%; font-style: normal; font-display: swap; }
:root { --ink: #000000; --ink-2: #1b331b; --paper: #f4f3ea; --white: #f4f3ea; --brand: #4d6e4e; --blue: #4d6e4e; --acid: #f4f3ea; --mist: #c3beb2; --muted: #4d6e4e; --font-ui: "Manrope", sans-serif; }
html[lang="fa"] { --font-ui: "Modam", "Vazirmatn Local", sans-serif; font-family: var(--font-ui); }
html[lang="fa"] body,
html[lang="fa"] body * { font-family: var(--font-ui) !important; }
.hero h1 em, .inner-hero h1 em { font-family: var(--font-ui) !important; font-style: normal; }
.site-header { background: var(--paper); color: var(--ink-2); border-bottom: 1px solid #1b331b26; }
.site-header.scrolled { background: #f4f3eaf5; color: var(--ink-2); box-shadow: none; }
.site-header .brand-logo { background-image: url("./assets/see1-logo-green-tight.png"); }
html[lang="fa"] .image-brand { width: 150px; }
html[lang="fa"] .site-header .brand-logo,
html[lang="fa"] .footer .brand-logo { width: 150px; height: 52px; background-image: url("./assets/see1-logo-fa.png"); background-repeat: no-repeat; background-size: contain; background-position: center; }
html[lang="fa"] .footer .brand-logo { filter: invert(1); }
.nav-cta, .language-link { border-color: #1b331b60; }
.nav-cta:hover { color: var(--paper); background: var(--ink-2); }
/* Original brand-book artwork. No redrawn dots, substituted glyphs or recoloring. */
/* Brand-first hierarchy: original wordmark, one statement, then the action. */
.hero, .see1-hero { background: #000; color: var(--paper); min-height: 100svh; isolation: isolate; display: flex; flex-direction: column; padding-top: var(--header-h); }
.hero-image, .hero-brand-wash, .hero-shade, .hero-grid { display: none; }
.hero::before, .hero::after { content: none; }
.hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.see1-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .32); }
.hero-content, .see1-hero .hero-content { flex: 1; padding: clamp(64px,9vh,120px) 0 60px; align-items: center; justify-content: center; text-align: center; }
.hero h1.hero-wordmark, .see1-hero h1.hero-wordmark { position: relative; width: min(58vw,800px); max-width: none; aspect-ratio: 1268 / 340; margin: 0; overflow: hidden; flex: none; }
.hero-wordmark img { position: absolute; max-width: none; width: 161.5142%; height: auto; left: -30.7571%; top: -251.1765%; }
.hero h1.hero-wordmark--fa, .see1-hero h1.hero-wordmark--fa { width: min(66vw, 900px); aspect-ratio: 1744 / 399; overflow: visible; }
.hero-wordmark--fa img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: contain; filter: invert(1); }
.hero-copy, .see1-hero .hero-copy { max-width: 720px; margin: 42px 0 30px; font-size: clamp(18px,1.6vw,24px); line-height: 1.7; color: var(--paper); text-shadow: 0 2px 18px rgba(0, 0, 0, .75); }
.hero .button-light { background: var(--paper); color: var(--ink-2); border-color: var(--paper); padding: 17px 27px; }
.hero .text-link.light { color: var(--paper); }
.hero-actions { justify-content: center; }
.hero-pillars { position: relative; inset: auto; flex: none; border-color: #1b331b33; }
.hero-pillars a { min-height: 95px; color: var(--paper); border-color: rgba(244, 243, 234, .26); background: rgba(0, 0, 0, .16); backdrop-filter: blur(4px); }
.hero-pillars a span { color: var(--mist); }
.hero-pillars a:hover { background: rgba(77, 110, 78, .88); color: var(--paper); }
.inner-hero, [dir="rtl"] .inner-hero { position: relative; isolation: isolate; background: var(--ink); overflow: hidden; }
.inner-hero::before { content: ""; position: absolute; inset: 110px auto 40px 0; width: 34%; background: url("./assets/brand-book/page-20.jpg") center / contain no-repeat; z-index: -1; }
[dir="ltr"] .inner-hero::before { left: auto; right: 0; }
.inner-hero h1 { max-width: 65%; }
.activity-grid { gap: 0; }
.activity-card { border: 0; background: var(--paper); border-top: 1px solid #1b331b44; padding: 0 28px 28px; }
.activity-card.dark-card { background: var(--ink); }
.activity-card.green-card { background: var(--ink); color: var(--paper); }
.activity-glyph, .dark-card .activity-glyph, .green-card .activity-glyph { font-size: 0; height: auto; width: calc(100% + 56px); aspect-ratio: 16 / 9; flex: none; border-radius: 0; margin: 0 -28px 32px; background: url("./assets/brand-book/page-14.jpg") center / contain no-repeat; }
.dark-card .activity-glyph { background-image: url("./assets/brand-book/page-20.jpg"); }
.green-card .activity-glyph { background-image: url("./assets/brand-book/page-17.jpg"); }
.product-card { background: var(--ink); }
.product-card:hover { background: var(--ink-2); color: var(--paper); }
.home-intro, .signal-section, .about-manifesto, .teams-section, .contact-directory { background: var(--paper); }
.venture-card:nth-child(even) { background: #c3beb244; }
.action-section, .inner-cta { background: var(--ink-2); position: relative; overflow: hidden; }
.action-section::after, .inner-cta::after { content: none; }
.footer { background: var(--ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; }
@media(max-width:1050px) { .site-nav { background: var(--paper); color: var(--ink-2); } }
@media(max-width:720px) {
 .hero, .see1-hero { min-height: min(100svh,820px); padding-top: var(--header-h); }
 .hero-content, .see1-hero .hero-content { padding-top: 70px; padding-bottom: 65px; }
 .hero h1.hero-wordmark, .see1-hero h1.hero-wordmark { width: 86vw; }
 .hero h1.hero-wordmark--fa, .see1-hero h1.hero-wordmark--fa { width: 88vw; }
 .hero-copy, .see1-hero .hero-copy { max-width: 310px; margin-top: 32px; margin-bottom: 28px; font-size: 18px; }
 .hero-actions { gap: 16px; }
 .hero-pillars a { min-height: 85px; padding: 20px 12px; }
 .hero-pillars strong { font-size: 20px; }
 .inner-hero { padding-bottom: 260px; }
 .inner-hero h1 { max-width: 100%; }
 .inner-hero::before, [dir="ltr"] .inner-hero::before { inset: auto 0 24px; width: 100%; height: 210px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }

.see1-hero h1 b { color: var(--ink-2); }

/* Curved mobile navigation inspired by the supplied drawer reference. */
@media (max-width: 1050px) {
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .65s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .65s;
  }
  body.menu-open .menu-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-toggle {
    z-index: 110;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(27, 51, 27, .22);
    background: var(--paper);
    transition: background .3s ease, border-color .3s ease;
  }
  .menu-toggle span {
    position: absolute;
    width: 26px;
    height: 1px;
    margin: 0;
    transform-origin: center;
    transition: transform .45s cubic-bezier(.76, 0, .24, 1), opacity .25s ease;
  }
  .menu-toggle span:nth-child(1) { transform: translateY(-6px); }
  .menu-toggle span:nth-child(2) { transform: translateY(0); }
  .menu-toggle span:nth-child(3) { transform: translateY(6px); }
  .menu-toggle.open span:nth-child(1) { transform: rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: rotate(-45deg); }
  .site-nav {
    z-index: 105;
    width: min(88vw, 520px);
    height: 100dvh;
    inset: 0 0 0 auto;
    padding: calc(var(--header-h) + 40px) clamp(28px, 7vw, 56px) 34px clamp(42px, 10vw, 86px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    overflow-y: auto;
    background: var(--paper);
    color: var(--ink-2);
    box-shadow: -26px 0 70px rgba(0, 0, 0, .12);
    transform: translateX(110%);
    transition: transform .8s cubic-bezier(.76, 0, .24, 1);
  }
  .site-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: -82px;
    width: 164px;
    border-radius: 50%;
    background: var(--paper);
    pointer-events: none;
  }
  .site-nav.open { transform: translateX(0); }
  .site-nav > a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 15px;
    min-height: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(27, 51, 27, .24);
    font: 600 clamp(25px, 5vw, 38px)/1.15 var(--font-ui);
    letter-spacing: -.025em;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .5s ease, transform .65s cubic-bezier(.76, 0, .24, 1), color .25s ease;
  }
  .site-nav.open > a { opacity: 1; transform: none; }
  .site-nav > a:nth-child(1) { transition-delay: .12s; }
  .site-nav > a:nth-child(2) { transition-delay: .17s; }
  .site-nav > a:nth-child(3) { transition-delay: .22s; }
  .site-nav > a:nth-child(4) { transition-delay: .27s; }
  .site-nav > a:nth-child(5) { transition-delay: .32s; }
  .site-nav > a:nth-child(6) { transition-delay: .37s; }
  .site-nav > a:nth-child(7) { transition-delay: .42s; }
  .site-nav > a:not(.nav-cta):not(.language-link)::before {
    content: counter(menu-item, decimal-leading-zero);
    counter-increment: menu-item;
    flex: 0 0 30px;
    color: var(--brand);
    font: 500 11px/1 var(--font-ui);
    letter-spacing: .02em;
  }
  .site-nav { counter-reset: menu-item; }
  .site-nav > a:hover { color: var(--brand); }
  .site-nav > a::after { display: none; }
  .site-nav .language-link { align-self: flex-start; margin-top: 20px; padding: 9px 12px; font-size: 14px; border: 1px solid rgba(27, 51, 27, .35); }
  .site-nav .nav-cta { align-self: flex-start; margin-top: 26px; padding: 12px 16px; font-size: 15px; border: 1px solid var(--ink-2); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-backdrop, .site-nav, .site-nav > a, .menu-toggle span { transition-duration: .01ms !important; }
}