/* source: assets/home-base-v147.css */
:root {
    --navy: #0f2c6b;
    --navy-deep: #0a1f4d;
    --cyan: #2bb8d4;
    --cyan-soft: #7dd3e6;
    --cyan-deep: #14839e;

    --bg: #fbfaf7;
    --bg-soft: #f2efe8;
    --paper: #ffffff;
    --ink: #0a1f4d;
    --ink-soft: #2a3f6b;
    --muted: #7d7b72;
    --line: rgba(74, 66, 47, 0.16);
    --line-strong: rgba(74, 66, 47, 0.26);
    --accent-bg: #e8f6fa;
    --amber: #d9822b;
    --terracotta: #c05f33;

    /* Tier colors — refined to match each metal */
    --silver-bg: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%);
    --silver-border: #c9c2b4;
    --silver-accent: #7a756a;
    --silver-deep: #56524a;
    --silver-text-bg: #e6e2d8;

    --gold-bg: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%);
    --gold-border: #d19a35;
    --gold-accent: #b07a1c;
    --gold-deep: #7a5910;
    --gold-text-bg: #f1dca1;

    --diamond-bg: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%);
    --diamond-border: #5fb7cc;
    --diamond-accent: #15809b;
    --diamond-deep: #0d5970;
    --diamond-text-bg: #c6e8f0;

    --signature-bg: linear-gradient(160deg, #0f2c6b 0%, #10506b 100%);
    --signature-border: #2bb8d4;
    --signature-accent: #7dd3e6;
    --signature-deep: #ffffff;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  ::selection { background: var(--cyan); color: var(--navy); }

  /* ============ FLOATING CTA — Classic, Elegant, Inviting ============ */
  .float-cta {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--navy);
    color: var(--paper);
    text-decoration: none;
    padding: 0;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 44, 107, 0.25), 0 0 0 1px rgba(43, 184, 212, 0.18);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    width: 56px;
    height: 56px;
    cursor: pointer;
  }
  .float-cta:hover {
    width: auto;
    padding-right: 1.5rem;
    background: var(--cyan-deep);
    box-shadow: 0 12px 36px rgba(43, 184, 212, 0.35), 0 0 0 1px rgba(43, 184, 212, 0.4);
    transform: translateY(-2px);
  }
  .float-cta .cta-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .float-cta .cta-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--cyan);
    opacity: 0;
    animation: pulse-ring 2.5s ease-out infinite;
  }
  @keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  .float-cta .cta-icon svg {
    width: 24px; height: 24px;
    fill: currentColor;
    position: relative;
    z-index: 1;
  }
  .float-cta .cta-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    transition: opacity 0.3s ease 0.1s, max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.3;
    padding: 0;
  }
  .float-cta:hover .cta-text {
    opacity: 1;
    max-width: 280px;
    padding-right: 0.75rem;
  }
  body.fa .float-cta .cta-text {
    font-family: 'Shabnam', sans-serif;
    font-weight: 500;
  }
  body.fa .float-cta {
    right: auto;
    left: 2rem;
  }
  body.fa .float-cta:hover {
    padding-right: 0;
    padding-left: 1.5rem;
  }
  body.fa .float-cta:hover .cta-text {
    padding-right: 0;
    padding-left: 0.75rem;
  }
  /* Hide on very small viewports if button blocks content */
  @media (max-width: 380px) {
    .float-cta { bottom: 1.25rem; right: 1.25rem; }
    body.fa .float-cta { left: 1.25rem; right: auto; }
  }
  @media (max-width: 640px) {
    .float-cta { bottom: 1.5rem; right: 1.5rem; }
    body.fa .float-cta { left: 1.5rem; right: auto; }
  }

  /* Screen-reader-only text — visible to search engines and assistive tech, hidden visually */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ============ FARSI / RTL MODE ============ */
  body.fa {
    font-family: 'Shabnam', sans-serif;
    direction: rtl;
  }
  /* CRITICAL OVERRIDE: Force modern Persian font on ALL headings, labels, and body text in Farsi mode.
     This prevents the English display font from being used on Persian text. */
  body.fa h1,
  body.fa h2,
  body.fa h3,
  body.fa h4,
  body.fa p,
  body.fa span,
  body.fa li,
  body.fa a,
  body.fa button,
  body.fa label,
  body.fa div,
  body.fa .section-label,
  body.fa .about-text p,
  body.fa .promo-head h2,
  body.fa .promo-info h3,
  body.fa .stats .number,
  body.fa .stat .label,
  body.fa .addons h2,
  body.fa .reels h2,
  body.fa .reels-head h2,
  body.fa .services h2,
  body.fa .services-head h2,
  body.fa .contact h2,
  body.fa .footer-cta-text,
  body.fa .youtube-feature h2,
  body.fa .marquee-track,
  body.fa .terms-grid h3,
  body.fa .term-item h3,
  body.fa .nav-links a,
  body.fa .mobile-menu a,
  body.fa .lang-toggle,
  body.fa .nav-cta {
    font-family: 'Shabnam', sans-serif !important;
    font-weight: 500;
    letter-spacing: 0;
  }
  /* Headings need slightly heavier weight in Farsi */
  body.fa h1,
  body.fa h2,
  body.fa h3,
  body.fa .section-label,
  body.fa .promo-info h3,
  body.fa .stats .number {
    font-weight: 600 !important;
  }
  body.fa h1 em, body.fa h2 em, body.fa h3 em {
    font-style: normal;
    font-weight: 700;
  }
  /* Keep the English display italic for Latin words explicitly marked .keep-en */
  body.fa .keep-en {
    font-family: 'Google Sans', sans-serif !important;
    font-style: italic;
    direction: ltr;
    display: inline-block;
  }
  body.fa .price-amount,
  body.fa .promo-price .amount {
    direction: ltr;
  }
  /* CRITICAL: All English-stamped elements stay LTR even in RTL mode */
  body.fa .price-name,
  body.fa .service-num,
  body.fa .price-period,
  body.fa .reels-tag,
  body.fa .featured-tag,
  body.fa .addon-price,
  body.fa .whatsapp-number,
  body.fa .contact-email,
  body.fa .promo-price,
  body.fa .promo-info h3,
  body.fa .promo-card,
  body.fa .price-amount,
  body.fa .price-features li {
    direction: ltr;
    text-align: left;
  }
  /* Promo card flex direction in RTL */
  body.fa .promo-card {
    direction: rtl;
  }
  body.fa .promo-info h3 {
    direction: ltr;
    text-align: right;
  }
  /* Fix promo description text direction in Farsi */
  body.fa .promo-info p {
    direction: rtl;
    text-align: right;
  }
  /* Fix promo-price layout in RTL */
  body.fa .promo-price {
    text-align: right;
  }
  body.fa .promo-price .amount {
    justify-content: flex-start;
  }
  /* Hide EN by default, FA hidden initially */
  .lang-fa { display: none; }
  body.fa .lang-en { display: none; }
  body.fa .lang-fa { display: inline; }
  body.fa .lang-fa.block { display: block; }

  /* Language toggle — sliding switch, same style as the mobile menu overlay */
  .lang-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 68px;
    height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    padding: 2px;
    cursor: pointer;
    direction: ltr;
    margin-right: 0.6rem;
    transition: border-color 0.25s ease;
  }
  .lang-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    border-radius: 999px;
    background: var(--cyan);
    box-shadow: 0 2px 6px rgba(15, 44, 107, 0.22);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.fa .lang-toggle::before { transform: translateX(100%); }
  .lang-toggle span {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
    font-family: 'Google Sans', sans-serif;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--navy);
    transition: color 0.3s ease, font-weight 0.3s ease;
  }
  .lang-toggle .seg-fa { font-family: 'Shabnam', sans-serif !important; letter-spacing: 0; }
  .lang-toggle .seg-en { color: #fff; font-weight: 600; }
  body.fa .lang-toggle .seg-en { color: var(--navy); font-weight: 400; }
  body.fa .lang-toggle .seg-fa { color: #fff; font-weight: 600; }
  .lang-toggle:hover { border-color: var(--cyan); }
  body.fa .lang-toggle { margin-right: 0; margin-left: 0.6rem; }

  /* Nav CTA in Farsi - use Shabnam properly sized */
  body.fa .nav-cta {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.55rem 1.1rem;
  }

  /* Pricing note in Farsi - readable font */
  body.fa .pricing-note {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.7;
  }

  /* Service tags stay LTR even in Farsi */
  body.fa .service-desc ul li,
  body.fa .marquee-track {
    direction: ltr;
  }
  body.fa .service-desc ul {
    flex-direction: row-reverse;
  }
  /* Bullet arrows flip in RTL */
  body.fa .price-features li::before {
    content: '←';
  }
  body.fa .arrow {
    transform: scaleX(-1);
    display: inline-block;
  }
  body.fa .btn:hover .arrow { transform: scaleX(-1) translate(4px, -4px); }

  /* Section labels — keep LTR for English mono labels */
  body.fa .section-label {
    direction: ltr;
    justify-content: flex-end;
    text-align: right;
  }

  /* About text styling for Farsi - bigger, more readable */
  body.fa .about-text p {
    font-family: 'Shabnam', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.75;
  }
  body.fa .hero-text p,
  body.fa .services-head p,
  body.fa .pricing-head p,
  body.fa .promo-head p,
  body.fa .reels-head p,
  body.fa .contact .lead {
    line-height: 1.85;
    font-size: 1.05rem;
  }

  /* Hero title — clean Farsi look */
  body.fa h1.hero-title em {
    font-family: 'Shabnam', sans-serif;
    font-style: normal;
    font-weight: 700;
    color: var(--cyan-deep);
  }
  body.fa h1.hero-title { line-height: 1.5; }
  body.fa h2 { line-height: 1.45; }

  /* Address @username properly - keep LTR so @ comes first */
  body.fa .contact-item a[href*="instagram"] {
    direction: ltr;
    display: inline-block;
  }
  body.fa .contact-item a[href*="mailto"],
  body.fa .contact-item a[href*="tel"] {
    direction: ltr;
    display: inline-block;
  }

  /* Contact h2 in Farsi */
  body.fa .contact h2 em {
    font-family: 'Shabnam', sans-serif;
    font-weight: 700;
  }

  /* Promo card amount alignment - keep LTR */
  body.fa .promo-price .period {
    text-align: right;
  }

  /* "Best value" tag in Farsi */
  body.fa .featured-tag {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    direction: rtl;
  }

  /* Stat labels in Farsi */
  body.fa .stat .label {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.85rem;
  }
  /* Contact item label */
  body.fa .contact-item .label {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.85rem;
  }
  /* Period under price */
  body.fa .promo-price .period {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    text-transform: none;
  }
  /* Footer */
  body.fa footer {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    font-size: 0.85rem;
  }
  /* Hero meta in Farsi */
  body.fa .hero-meta {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.8rem;
  }
  /* Reels tag stays LTR */
  body.fa .reels-tag { direction: ltr; }

  /* Addon meta in Farsi */
  body.fa .addon-name {
    font-family: 'Shabnam', sans-serif;
  }
  body.fa .addon-name .meta {
    font-family: 'Shabnam', sans-serif;
  }
  body.fa .term-text {
    font-family: 'Shabnam', sans-serif;
  }

  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* ============ NAV ============ */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 1rem 2rem;
    background: rgba(251, 250, 247, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transition: border-color 0.3s ease, padding 0.3s ease;
  }
  nav.scrolled {
    border-bottom-color: var(--line);
    padding: 0.75rem 2rem;
  }

  nav .inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .logo {
    display: flex;
    align-items: center;
    height: 36px;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
    max-width: 60%;
  }
  .logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }
  .brand-txt { font-family: 'Google Sans', sans-serif; font-size: 1.5rem; color: var(--navy); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
  .brand-txt span { color: var(--cyan-deep); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .nav-links li { display: flex; align-items: center; gap: 1.6rem; }
  .nav-links li:not(:last-child)::after { content: '|'; color: var(--line-strong); font-weight: 400; }
  body.fa .nav-links { font-family: 'Shabnam', sans-serif; letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
  .nav-links a {
    position: relative;
    color: var(--ink-soft);
    text-decoration: none;
    padding-bottom: 0.35rem;
    transition: color 0.2s ease;
  }
  .nav-links a:hover { color: var(--cyan-deep); }
  .nav-links a.on {
    color: var(--navy);
  }
  .nav-links a.on::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--cyan);
  }
  body.fa .nav-links a.on::before { background: var(--cyan); }
  .nav-phone { font-family: 'Roboto', sans-serif; font-size: 0.76rem; color: var(--navy); text-decoration: none; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
  .nav-phone:hover { color: var(--cyan-deep); }
  .nav-book { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--cyan); color: #fff; text-decoration: none; border-radius: 999px; padding: 0.55rem 1.15rem; font-size: 0.82rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(43,184,212,0.35); transition: background 0.25s ease; }
  .nav-book:hover { background: var(--cyan-deep); }
  body.fa .nav-book { font-size: 0.85rem; }
  .deep-link { margin-top: 2.6rem; text-align: center; font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .deep-link a { color: var(--cyan-deep); text-decoration: none; }
  .deep-link a:hover { text-decoration: underline; }
  .deep-link .arrow { display: inline-block; }
  body.fa .deep-link { font-family: 'Shabnam', sans-serif; letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
  body.fa .deep-link .arrow { transform: scaleX(-1); }
  .mobile-menu .mm-phone { font-family: 'Roboto', sans-serif; font-size: 1.05rem; color: var(--cyan-soft); direction: ltr; unicode-bidi: isolate; }

  .nav-cta {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    transition: all 0.3s ease;
  }
  .nav-cta:hover {
    border-color: var(--cyan);
    color: var(--cyan-deep);
    background: var(--accent-bg);
  }

  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--navy);
  }
  .nav-toggle svg { width: 24px; height: 24px; }

  /* ============ HERO ============ */
  .hero {
    min-height: calc(100vh - 103px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6.5rem 0 2rem;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: 5%;
    right: -15%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(43, 184, 212, 0.18) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(15, 44, 107, 0.12) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
  }

  .hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 2;
  }
  .hero-meta .pulse {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--cyan);
    border-radius: 50%;
    margin-inline-end: 0.6rem;
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(43, 184, 212, 0.6); }
    50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 0 6px rgba(43, 184, 212, 0); }
  }

  .hero-content {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  h1.hero-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.22;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    max-width: 24ch;
    color: var(--navy);
  }
  h1.hero-title em { font-style: italic; color: var(--cyan-deep); }
  .nowrap-line { white-space: nowrap; }

  .hero-text p.hero-lead {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    line-height: 1.3;
    color: var(--navy);
    max-width: 28ch;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
  }
  .hero-text p.hero-lead em {
    font-style: italic;
    color: var(--cyan-deep);
  }
  body.fa .hero-text p.hero-lead {
    font-family: 'Shabnam', sans-serif;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    line-height: 1.7;
  }
  body.fa .hero-text p.hero-lead em { font-style: normal; }

  .hero-text p {
    font-size: 1.125rem;
    color: var(--ink-soft);
    max-width: 36rem;
    line-height: 1.55;
    margin-bottom: 2rem;
  }
  .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Hero visual — collage of two images */
  .hero-visual {
    position: relative;
    aspect-ratio: 4 / 3.3;
    max-width: 100%;
  }
  .hero-img {
    position: absolute;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    box-shadow: 0 20px 60px rgba(15, 44, 107, 0.25);
  }
  .hero-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Subtle blue tint overlay - unifies image colors with brand */
  .hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 44, 107, 0.18) 0%, rgba(43, 184, 212, 0.12) 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
  }
  .hero-img.main {
    top: 0; left: 0;
    width: 72%; height: 68%;
    z-index: 2;
  }
  .hero-img.accent {
    bottom: 0; right: 0;
    width: 58%; height: 52%;
    z-index: 3;
  }

  /* ============ BUTTONS ============ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--navy);
    color: var(--paper);
    box-shadow: 0 4px 20px rgba(15, 44, 107, 0.2);
  }
  .btn-primary:hover {
    background: var(--navy-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(15, 44, 107, 0.3);
  }
  .btn-cyan {
    background: var(--cyan);
    color: var(--navy);
    box-shadow: 0 4px 20px rgba(43, 184, 212, 0.25);
  }
  .btn-cyan:hover {
    background: var(--cyan-deep);
    color: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(43, 184, 212, 0.4);
  }
  /* Soft cyan variant — tempting but secondary */
  .btn-cyan-soft {
    background: var(--accent-bg);
    color: var(--cyan-deep);
    border: 1px solid var(--cyan);
    box-shadow: 0 2px 12px rgba(43, 184, 212, 0.15);
  }
  .btn-cyan-soft:hover {
    background: var(--cyan);
    color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(43, 184, 212, 0.35);
  }
  .btn-ghost {
    color: var(--navy);
    border: 1px solid var(--line-strong);
    background: transparent;
  }
  .btn-ghost:hover {
    border-color: var(--cyan);
    background: var(--accent-bg);
    color: var(--cyan-deep);
  }
  .arrow { transition: transform 0.3s ease; display: inline-block; }
  .btn:hover .arrow { transform: translate(4px, -4px); }

  /* ============ MARQUEE ============ */
  .marquee {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.75rem 0;
    background: var(--accent-bg);
  }
  .marquee-track {
    display: flex;
    gap: 4rem;
    white-space: nowrap;
    will-change: transform;
    font-family: 'Google Sans', sans-serif;
    font-size: 1.75rem;
    color: var(--navy);
  }
  .marquee-track .sep { color: var(--cyan); font-style: italic; }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ============ SECTION ============ */
  section { padding: 8rem 0; position: relative; }

  /* ============ DEPARTMENT (3 services + value) ============ */
  .department { background: var(--navy); color: var(--paper); overflow: hidden; position: relative; }
  .department::before {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(43,184,212,0.22) 0%, transparent 60%);
    filter: blur(70px);
    pointer-events: none;
  }
  .department .container { position: relative; z-index: 2; }
  .department .section-label { color: var(--cyan-soft); }
  .department .section-label::before { background: var(--cyan-soft); }
  .department h2 { color: var(--paper); max-width: 20ch; }
  .department h2 em { color: var(--cyan-soft); }
  .department-tagline {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.25;
    color: var(--cyan-soft);
    margin-top: 1rem;
    max-width: 22ch;
  }
  body.fa .department-tagline { font-family: 'Shabnam', sans-serif; }
  .dept-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 3.5rem 0;
  }
  .dept-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
  }
  .dept-card:hover {
    border-color: var(--cyan);
    background: rgba(43,184,212,0.08);
    transform: translateY(-3px);
  }
  .dept-card .dept-num {
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--cyan-soft);
    margin-bottom: 1rem;
  }
  .dept-card h3 {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--paper);
    margin-bottom: 0.5rem;
  }
  .dept-card .dept-line {
    font-size: 0.95rem;
    color: var(--cyan-soft);
    font-weight: 500;
    margin-bottom: 0.6rem;
  }
  .dept-card .dept-desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.55;
  }
  .dept-card .dept-price {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-family: 'Google Sans', sans-serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--paper);
  }
  .dept-card .dept-price sup { font-size: 0.6em; color: var(--cyan-soft); }
  body.fa .dept-card h3,
  body.fa .department-tagline { font-family: 'Shabnam', sans-serif; }
  body.fa .dept-card .dept-price { font-family: 'Shabnam', sans-serif; }
  .dept-value {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 2.5rem;
    max-width: 56rem;
  }
  .dept-value p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    margin-bottom: 1rem;
  }
  .dept-value p:last-child { margin-bottom: 0; }
  .dept-value strong { color: var(--paper); font-weight: 600; }
  .dept-value .highlight { color: var(--cyan-soft); }
  @media (max-width: 860px) {
    .dept-grid { grid-template-columns: 1fr; }
  }

  .section-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .section-label::before {
    content: '';
    width: 32px; height: 1px;
    background: var(--cyan);
  }

  h2 {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: var(--navy);
  }
  h2, h3, h4, .dept-line, .department-tagline, .hero-lead { text-wrap: balance; }
  p { text-wrap: pretty; }
  h2 em { font-style: italic; color: var(--cyan-deep); }

  /* ============ ABOUT ============ */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    align-items: start;
  }
  .about-meta { position: sticky; top: 7rem; }
  .about-text p {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.75rem;
    line-height: 1.35;
    margin-bottom: 1.5rem;
    color: var(--ink);
  }
  .about-text p em { font-style: italic; color: var(--cyan-deep); }
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
  }
  .stat .number {
    font-family: 'Google Sans', sans-serif;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: var(--cyan-deep);
  }
  body.fa .stat .number { font-family: 'Shabnam', sans-serif; }
  .stat .label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ============ REELS SECTION ============ */
  .reels {
    background: var(--navy);
    color: var(--paper);
    overflow: hidden;
  }
  .reels h2 { color: var(--paper); }
  .reels h2 em { color: var(--cyan-soft); }
  .reels .section-label { color: var(--cyan-soft); }
  .reels .section-label::before { background: var(--cyan-soft); }

  .reels-head {
    display: block;
    margin-bottom: 4rem;
  }
  .reels-head p {
    margin-top: 1.25rem;
    color: rgba(255,255,255,0.7);
    max-width: 32rem;
  }
  .reels-head a.ig-link {
    color: var(--cyan-soft);
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(125, 211, 230, 0.4);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
    display: inline-block;
    margin-top: 1rem;
  }
  .reels-head a.ig-link:hover {
    color: var(--paper);
    border-color: var(--paper);
  }

  .reels-controls-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .reels-tag {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan-soft);
  }

  .reels-controls {
    display: flex;
    gap: 0.5rem;
  }
  .reel-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  .reel-btn:hover:not(:disabled) {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--navy);
    transform: scale(1.05);
  }
  .reel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .reel-btn svg { width: 18px; height: 18px; }

  .reels-viewport {
    overflow: hidden;
    margin: 0 -1rem;
    padding: 0 1rem;
  }
  .reels-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reel-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    background: var(--paper);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  }
  .reel-card iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .reel-card.loaded iframe {
    opacity: 1;
  }
  /* Placeholder shown before iframe loads (or if it fails) */
  .reel-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a2f5a 0%, #2bb8d4 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
    text-decoration: none;
    overflow: hidden;
  }
  .reel-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 50%),
      radial-gradient(circle at 70% 80%, rgba(43,184,212,0.3), transparent 50%);
  }
  .reel-placeholder-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
  }
  .reel-placeholder:hover .reel-placeholder-icon {
    transform: scale(1.1);
  }
  .reel-placeholder-icon svg {
    width: 22px;
    height: 22px;
    fill: white;
    margin-left: 3px;
  }
  .reel-placeholder-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0.85;
    padding: 0 1rem;
  }
  /* Fallback state: show clear "open on instagram" message */
  .reel-card.failed .reel-placeholder-text::before {
    content: 'Watch on Instagram';
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
  }
  .reel-card.failed .reel-placeholder-text {
    font-size: 0.6rem;
    opacity: 0.65;
  }
  /* Loading shimmer */
  .reel-card:not(.loaded):not(.failed) .reel-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: reelShimmer 2s ease-in-out infinite;
    z-index: 1;
  }
  @keyframes reelShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .reel-pin-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--cyan);
    color: var(--navy);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .reel-pin-badge svg { width: 11px; height: 11px; }

  .reels-progress {
    display: flex;
    gap: 0.4rem;
    margin-top: 2rem;
    justify-content: center;
  }
  .reels-dot {
    width: 24px;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    transition: all 0.4s ease;
    cursor: pointer;
    border: none;
    padding: 0;
  }
  .reels-dot.active {
    background: var(--cyan);
    width: 40px;
  }

  .ig-cta {
    text-align: center;
    margin-top: 3rem;
  }

  /* ============ YOUTUBE FEATURE ============ */
  /* ============ YOUTUBE FEATURE — Standalone section with distinct vibe ============ */
  .youtube-feature {
    background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg-soft) 100%);
    padding: 7rem 0;
    position: relative;
    overflow: hidden;
  }
  .youtube-feature::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(43, 184, 212, 0.12) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
  }
  .youtube-feature::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(15, 44, 107, 0.08) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
  }
  .youtube-feature > .container {
    position: relative;
    z-index: 2;
  }
  .youtube-head {
    text-align: center;
    margin-bottom: 3rem;
  }
  .youtube-tag {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }
  body.fa .youtube-tag {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.85rem;
  }
  .youtube-tag .yt-icon {
    width: 18px; height: 18px;
    fill: var(--cyan-deep);
  }
  .youtube-head h2 {
    margin: 0 auto;
    max-width: 18ch;
  }
  .youtube-frame {
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: var(--paper);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 44, 107, 0.18), 0 0 0 1px rgba(43, 184, 212, 0.15);
    position: relative;
  }
  .youtube-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
  .yt-cta {
    text-align: center;
    margin-top: 2rem;
  }
  /* YouTube button - red branded */
  .btn-youtube {
    background: var(--navy);
    color: var(--paper);
    box-shadow: 0 4px 20px rgba(15, 44, 107, 0.25), 0 0 0 1px rgba(43, 184, 212, 0.2);
  }
  .btn-youtube:hover {
    background: var(--cyan-deep);
    color: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(43, 184, 212, 0.4);
  }

  /* ============ SERVICES ============ */
  .services { background: var(--bg); }
  .cur { unicode-bidi: isolate; direction: ltr; }

  /* About section — soft cyan-tinted background to differentiate */
  section#about {
    background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg) 100%);
    position: relative;
  }
  section#about::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(43, 184, 212, 0.08) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
  }
  section#about > .container {
    position: relative;
    z-index: 1;
  }
  .services-head {
    display: block;
    margin-bottom: 5rem;
  }
  .services-head p {
    margin-top: 1.25rem;
    color: var(--ink-soft);
    font-size: 1.05rem;
    max-width: 34rem;
  }
  .service-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .service-row {
    display: grid;
    grid-template-columns: 80px 1.5fr 2fr 60px;
    gap: 2rem;
    align-items: start;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.3s ease, padding 0.3s ease;
  }
  .service-row:hover {
    background: rgba(255, 255, 255, 0.6);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .service-num {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: var(--cyan-deep);
    letter-spacing: 0.1em;
    padding-top: 0.5rem;
  }
  .service-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.875rem;
    line-height: 1.15;
    color: var(--navy);
  }
  .service-desc {
    color: var(--ink-soft);
    font-size: 0.95rem;
  }
  .service-desc ul {
    list-style: none;
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .service-desc ul li {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
  }
  .service-arrow {
    color: var(--navy);
    align-self: center;
    text-align: right;
    font-size: 1.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .service-row:hover .service-arrow {
    transform: translateX(8px);
    color: var(--cyan-deep);
  }

  /* ============ PRICING - VIDEO PRODUCTION ============ */
  .pricing-head {
    text-align: center;
    margin-bottom: 4rem;
  }
  .pricing-head .section-label { justify-content: center; }
  .pricing-head .section-label::before { display: none; }
  .pricing-head h2 { max-width: 24ch; margin: 0 auto 1rem; }
  .pricing-head p {
    color: var(--ink-soft);
    max-width: 36rem;
    margin: 0 auto;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
  }

  /* Base price card */
  .price-card {
    border-radius: 12px;
    padding: 2rem 1.5rem;
    transition: all 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid;
  }
  .price-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(15, 44, 107, 0.15);
  }

  /* === SILVER tier === */
  .price-card.tier-silver {
    background: var(--silver-bg);
    border-color: var(--silver-border);
  }
  .price-card.tier-silver .price-name {
    color: var(--silver-deep);
    background: var(--silver-text-bg);
  }
  .price-card.tier-silver .price-amount { color: var(--silver-deep); }
  .price-card.tier-silver .price-amount sup { color: var(--silver-accent); }
  .price-card.tier-silver .price-features li::before { color: var(--silver-accent); }

  /* === GOLD tier === */
  .price-card.tier-gold {
    background: var(--gold-bg);
    border-color: var(--gold-border);
  }
  .price-card.tier-gold .price-name {
    color: var(--gold-deep);
    background: var(--gold-text-bg);
  }
  .price-card.tier-gold .price-amount { color: var(--gold-deep); }
  .price-card.tier-gold .price-amount sup { color: var(--gold-accent); }
  .price-card.tier-gold .price-features li::before { color: var(--gold-accent); }

  /* === DIAMOND tier === */
  .price-card.tier-diamond {
    background: var(--diamond-bg);
    border-color: var(--diamond-border);
  }
  .price-card.tier-diamond .price-name {
    color: var(--diamond-deep);
    background: var(--diamond-text-bg);
  }
  .price-card.tier-diamond .price-amount { color: var(--diamond-deep); }
  .price-card.tier-diamond .price-amount sup { color: var(--diamond-accent); }
  .price-card.tier-diamond .price-features li::before { color: var(--diamond-accent); }

  /* === SIGNATURE tier (premium navy) === */
  .price-card.tier-signature {
    background: var(--signature-bg);
    color: var(--paper);
    border-color: var(--signature-border);
  }
  .price-card.tier-signature .price-name {
    color: var(--signature-accent);
    background: rgba(125, 211, 230, 0.15);
  }
  .price-card.tier-signature .price-tagline { color: rgba(255,255,255,0.6); }
  .price-card.tier-signature .price-amount { color: var(--paper); }
  .price-card.tier-signature .price-amount sup { color: var(--signature-accent); }
  .price-card.tier-signature .price-period { color: rgba(255,255,255,0.5); }
  .price-card.tier-signature .price-features { border-color: rgba(255,255,255,0.15); }
  .price-card.tier-signature .price-features li { color: rgba(255,255,255,0.85); }
  .price-card.tier-signature .price-features li::before { color: var(--signature-accent); }
  .price-card.tier-signature .btn-ghost {
    color: var(--paper);
    border-color: rgba(255,255,255,0.25);
  }
  .price-card.tier-signature .btn-ghost:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--navy);
  }

  /* "Best Value" badge — positioned on Silver */
  .featured-tag {
    position: absolute;
    top: -12px;
    right: 1.25rem;
    background: var(--cyan);
    color: var(--navy);
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(43, 184, 212, 0.3);
    z-index: 5;
  }

  .price-name {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    align-self: flex-start;
    font-weight: 600;
  }

  .price-tagline {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    min-height: 2.5rem;
  }
  .price-card.tier-silver .price-tagline,
  .price-card.tier-gold .price-tagline,
  .price-card.tier-diamond .price-tagline {
    color: var(--ink-soft);
    opacity: 0.7;
  }

  /* LARGER, more prominent prices */
  .price-amount {
    font-family: 'Google Sans', sans-serif;
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .price-amount sup {
    font-size: 2.75rem;
    vertical-align: top;
    font-style: italic;
    margin-right: 0;
    top: 0;
    position: relative;
    line-height: 1;
    font-weight: 400;
  }
  .price-period {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    color: var(--muted);
    margin: 0.5rem 0 1.75rem;
    letter-spacing: 0.05em;
  }
  .price-period .loc-fee {
    display: inline-block;
    margin-top: 0.35rem;
    font-weight: 600;
    color: var(--cyan-deep);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  body.fa .price-period .loc-fee {
    font-family: 'Shabnam', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
  }
  .price-card.tier-silver .price-period,
  .price-card.tier-gold .price-period,
  .price-card.tier-diamond .price-period {
    color: rgba(15,44,107,0.55);
  }
  .price-card.tier-silver .price-period .loc-fee,
  .price-card.tier-gold .price-period .loc-fee {
    color: var(--cyan-deep);
  }

  .price-features {
    list-style: none;
    border-top: 1px solid;
    border-color: rgba(0,0,0,0.1);
    padding-top: 1.25rem;
    margin-bottom: 1.75rem;
    flex-grow: 1;
  }
  .price-features li {
    font-size: 0.875rem;
    color: var(--ink-soft);
    padding: 0.4rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .price-features li::before {
    content: '→';
    flex-shrink: 0;
    font-weight: 600;
  }
  /* Fee-note: special list item with cyan-emphasis at bottom */
  .price-features li.fee-note {
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--line);
    font-weight: 500;
    color: var(--cyan-deep);
    font-size: 0.82rem;
  }
  .price-features li.fee-note::before {
    content: '✦' !important;
    color: var(--cyan) !important;
  }
  body.fa .price-features li.fee-note {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.85rem;
    text-align: right;
    direction: rtl;
  }
  .price-card.tier-signature .price-features li.fee-note {
    border-top-color: rgba(255,255,255,0.18);
    color: var(--cyan-soft);
  }
  .price-card.tier-signature .price-features li.fee-note::before {
    color: var(--cyan-soft) !important;
  }

  .price-card .btn {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
  }
  .price-card.tier-silver .btn-ghost { border-color: var(--silver-accent); color: var(--silver-deep); }
  .price-card.tier-silver .btn-ghost:hover { background: var(--silver-accent); color: var(--paper); border-color: var(--silver-accent); }
  .price-card.tier-gold .btn-ghost { border-color: var(--gold-accent); color: var(--gold-deep); }
  .price-card.tier-gold .btn-ghost:hover { background: var(--gold-accent); color: var(--paper); border-color: var(--gold-accent); }
  .price-card.tier-diamond .btn-ghost { border-color: var(--diamond-accent); color: var(--diamond-deep); }
  .price-card.tier-diamond .btn-ghost:hover { background: var(--diamond-accent); color: var(--paper); border-color: var(--diamond-accent); }

  .pricing-note {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    font-family: 'Roboto', sans-serif;
    max-width: 82ch;
    text-wrap: pretty;
  }
  .keep-together { white-space: nowrap; }

  /* Bottom CTA blocks for pricing and promo sections */
  .pricing-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 3rem auto 0;
  }
  @media (max-width: 768px) {
    .pricing-cta-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }
  .pricing-bottom-cta,
  .promo-bottom-cta {
    margin-top: 0;
    padding: 1.75rem 2rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    box-shadow: 0 4px 20px rgba(15, 44, 107, 0.04);
    position: relative;
    overflow: hidden;
  }
  .promo-bottom-cta {
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    align-items: center;
    padding: 2rem 2.5rem;
    gap: 2rem;
  }
  .pricing-bottom-cta::before,
  .promo-bottom-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  }
  /* Color-code the two pricing CTAs — left = cyan, right = ghost */
  .pricing-bottom-cta.cta-promo::before {
    background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  }
  .pricing-bottom-cta.cta-samples::before {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  }
  body.fa .pricing-bottom-cta::before,
  body.fa .promo-bottom-cta::before {
    left: auto;
    right: 0;
  }
  .pricing-bottom-cta .cta-text,
  .promo-bottom-cta .cta-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }
  body.fa .pricing-bottom-cta .cta-text,
  body.fa .promo-bottom-cta .cta-text {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.95rem;
    line-height: 1.85;
  }
  .pricing-bottom-cta .cta-text strong,
  .promo-bottom-cta .cta-text strong {
    color: var(--navy);
    font-weight: 600;
  }
  .pricing-bottom-cta .btn,
  .promo-bottom-cta .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .pricing-bottom-cta .btn {
    align-self: flex-start;
  }
  body.fa .pricing-bottom-cta .btn {
    align-self: flex-end;
  }
  /* Both bottom CTAs use ghost-style buttons — outline only, no fill */
  .pricing-bottom-cta .btn-ghost {
    color: var(--navy);
    border: 1px solid var(--line-strong);
    background: transparent;
  }
  .pricing-bottom-cta .btn-ghost:hover {
    border-color: var(--cyan);
    background: var(--accent-bg);
    color: var(--cyan-deep);
  }
  @media (max-width: 768px) {
    .promo-bottom-cta {
      flex-direction: column;
      align-items: flex-start;
      padding: 1.5rem;
    }
    .pricing-bottom-cta .btn,
    .promo-bottom-cta .btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* ============ PROMOTIONAL PACKAGES ============ */
  .promo {
    background: var(--bg-soft);
    position: relative;
    overflow: hidden;
  }
  .promo::before {
    content: '';
    position: absolute;
    top: 30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(43, 184, 212, 0.12) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
  }
  .promo .container { position: relative; z-index: 2; }

  .promo-head {
    text-align: center;
    margin-bottom: 4rem;
  }
  .promo-head .section-label { justify-content: center; }
  .promo-head .section-label::before { display: none; }
  .promo-head h2 { max-width: 22ch; margin: 0 auto 1rem; }
  .promo-head p {
    color: var(--ink-soft);
    max-width: 36rem;
    margin: 0 auto;
  }

  .promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .promo-card {
    border-radius: 12px;
    padding: 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid;
    box-shadow: 0 0 0 1px rgba(43, 184, 212, 0.18), 0 8px 32px rgba(43, 184, 212, 0.12);
  }
  .promo-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 6rem;
    opacity: 0.06;
    transform: rotate(-15deg);
  }
  /* Cyan glow accent ring */
  .promo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(43, 184, 212, 0.08) 0%, transparent 50%, rgba(43, 184, 212, 0.05) 100%);
    opacity: 0.7;
  }
  .promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(43, 184, 212, 0.35), 0 20px 50px rgba(43, 184, 212, 0.25);
  }

  /* Color variants for promo cards */
  .promo-card.tier-silver { background: var(--silver-bg); border-color: var(--silver-border); }
  .promo-card.tier-silver .promo-info h3 em { color: var(--silver-deep); }
  .promo-card.tier-silver .amount { color: var(--silver-deep); }
  .promo-card.tier-silver .amount sup { color: var(--silver-accent); }

  .promo-card.tier-gold { background: var(--gold-bg); border-color: var(--gold-border); }
  .promo-card.tier-gold .promo-info h3 em { color: var(--gold-deep); }
  .promo-card.tier-gold .amount { color: var(--gold-deep); }
  .promo-card.tier-gold .amount sup { color: var(--gold-accent); }

  .promo-card.tier-diamond { background: var(--diamond-bg); border-color: var(--diamond-border); }
  .promo-card.tier-diamond .promo-info h3 em { color: var(--diamond-deep); }
  .promo-card.tier-diamond .amount { color: var(--diamond-deep); }
  .promo-card.tier-diamond .amount sup { color: var(--diamond-accent); }

  .promo-card.tier-signature {
    background: var(--signature-bg);
    border-color: var(--signature-border);
    color: var(--paper);
  }
  .promo-card.tier-signature .promo-info h3 { color: var(--paper); }
  .promo-card.tier-signature .promo-info h3 em { color: var(--signature-accent); }
  .promo-card.tier-signature .promo-info p { color: rgba(255,255,255,0.7); }
  .promo-card.tier-signature .amount { color: var(--paper); }
  .promo-card.tier-signature .amount sup { color: var(--signature-accent); }
  .promo-card.tier-signature .period { color: rgba(255,255,255,0.5); }

  .promo-info h3 {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 1.65rem;
    color: var(--navy);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
  }
  .promo-info h3 em {
    font-style: italic;
  }
  .promo-info p {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .promo-info .bundle-count {
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .promo-price {
    text-align: right;
    flex-shrink: 0;
  }
  .promo-price .amount {
    font-family: 'Google Sans', sans-serif;
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    display: flex;
    align-items: flex-start;
    gap: 0.1rem;
    justify-content: flex-end;
  }
  .promo-price .amount sup {
    font-size: 2.2rem;
    vertical-align: top;
    font-style: italic;
    margin-right: 0;
    position: relative;
    top: 0;
    line-height: 1;
  }
  .promo-price .period {
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.4rem;
  }

  /* ============ ADD-ONS ============ */
  .addons { background: var(--bg); }
  #pricing { padding-bottom: 3rem; }
  .addons { padding-top: 3rem; }
  .reviews { background: var(--bg-soft); text-align: center; }
  .reviews .section-label { justify-content: center; }
  .reviews h2 { margin-bottom: 3rem; }
  .reviews-slider { max-width: 1100px; margin: 0 auto; position: relative; }
  .rev-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--navy); font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(15,44,107,0.10); transition: color 0.2s ease, border-color 0.2s ease; }
  .rev-nav:hover { color: var(--cyan-deep); border-color: var(--cyan-deep); }
  .rev-prev { left: -14px; }
  .rev-next { right: -14px; }
  .reviews-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 4px 10px; }
  .reviews-track::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; text-align: start; }
  .review-stars { color: var(--cyan-deep); letter-spacing: 3px; font-size: 0.95rem; }
  .review-head { display: flex; align-items: center; gap: 0.5rem; }
  .review-score { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
  .review-date { color: var(--muted); unicode-bidi: isolate; }
  .review-name a { color: var(--navy); text-decoration: none; }
  .review-name a:hover { text-decoration: underline; }
  .review-text { color: var(--ink-soft); line-height: 1.6; font-size: 0.9rem; flex: 1; margin-top: 0.6rem; }
  .review-author { display: flex; align-items: center; gap: 0.7rem; }
  .review-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 0.9rem; flex-shrink: 0; }
  .review-name { font-weight: 700; color: var(--navy); font-size: 1.1rem; }
  .review-src { font-size: 0.75rem; color: var(--muted); }
  .review-more { color: var(--cyan-deep); font-weight: 600; white-space: nowrap; }
  .reviews-cta { margin-top: 2rem; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: center; margin-bottom: 1.6rem; font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .footer-links a { color: var(--muted); }
  .footer-links a:hover { color: var(--cyan-deep); }
  body.fa .footer-links { font-family: 'Shabnam', sans-serif; letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
  .fa-glyph { font-family: 'Shabnam', sans-serif; }
  /* Warm accent touches */
  .featured-tag { background: var(--amber) !important; border-color: var(--amber) !important; color: #fff !important; }
  .promo .section-label { color: var(--amber); }
  .promo .section-label::before, .promo .section-label::after { background: var(--amber); }
  .addons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 3rem;
    margin-top: 4rem;
    border-top: 1px solid var(--line-strong);
  }
  .addon-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line-strong);
    align-items: baseline;
  }
  .addon-name {
    font-size: 0.95rem;
    color: var(--ink-soft);
  }
  .addon-name .meta {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.2rem;
  }
  .addon-price {
    font-family: 'Google Sans', sans-serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--cyan-deep);
    white-space: nowrap;
    font-weight: 400;
  }
  body.fa .addon-price { font-family: 'Shabnam', sans-serif; }

  /* ============ EVENT VIDEOGRAPHY ============ */
  .evt-base {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    margin-top: 4rem;
    padding: 1.5rem 1.8rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--cyan-deep);
    border-radius: 14px;
  }
  .evt-base .addon-name { font-size: 1.05rem; color: var(--ink); font-weight: 500; }
  .evt-base .addon-price { font-size: 1.7rem; }
  .addons-subhead {
    margin-top: 2.8rem;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
  }
  .addons-subhead + .addons-grid { margin-top: 1.3rem; }
  .addon-name .tier-dot {
    display: inline-block;
    width: 0.6rem; height: 0.6rem;
    border-radius: 50%;
    margin-inline-end: 0.5rem;
    border: 1px solid rgba(74, 66, 47, 0.22);
  }
  .tier-dot.d-silver { background: var(--silver-border); }
  .tier-dot.d-gold { background: var(--gold-border); }
  .tier-dot.d-signature { background: var(--signature-bg); border-color: var(--signature-border); }
  body.fa .addons-subhead { font-family: 'Shabnam', sans-serif; letter-spacing: 0; }

  /* ============ WEB DESIGN ============ */
  .webdesign { background: var(--bg); }
  .webdesign-head p {
    color: var(--ink-soft);
    font-size: 1.05rem;
    max-width: 38rem;
    margin-top: 1rem;
  }
  .webdesign-panel {
    margin-top: 3.5rem;
    background: var(--p-bg, var(--bg-soft));
    border: 1px solid var(--p-border, var(--line-strong));
    border-radius: 20px;
    padding: 3.5rem;
    color: var(--navy);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: center;
  }
  .webdesign-panel::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, var(--p-glow, rgba(43,184,212,0.3)) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
  }
  .webdesign-claim { position: relative; z-index: 2; }
  /* Tier tints: webdesign=silver, ads=gold, photo=diamond */
  .webdesign .webdesign-panel { --p-bg: var(--silver-bg); --p-border: var(--silver-border); --p-accent: var(--silver-accent); --p-deep: var(--silver-deep); --p-line: rgba(75,85,99,0.25); --p-glow: rgba(107,114,128,0.22); }
  .ads .webdesign-panel { --p-bg: var(--gold-bg); --p-border: var(--gold-border); --p-accent: var(--gold-accent); --p-deep: var(--gold-deep); --p-line: rgba(122,89,16,0.22); --p-glow: rgba(212,167,60,0.3); }
  .photo .webdesign-panel { --p-bg: var(--diamond-bg); --p-border: var(--diamond-border); --p-accent: var(--diamond-accent); --p-deep: var(--diamond-deep); --p-line: rgba(13,89,112,0.22); --p-glow: rgba(43,184,212,0.3); }
  .webdesign-claim .claim-eyebrow {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--p-accent, var(--cyan-deep));
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .webdesign-claim .claim-eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: var(--p-accent, var(--cyan));
  }
  .webdesign-claim .claim-tier { margin-bottom: 0; }
  .webdesign-claim .claim-price {
    font-family: 'Google Sans', sans-serif;
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--navy);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .webdesign-claim .claim-price .from {
    flex-basis: 100%;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--p-accent, var(--cyan-deep));
    margin-bottom: 0.3rem;
  }
  .webdesign-claim .claim-price .big {
    font-size: clamp(3.25rem, 7vw, 5rem);
  }
  .webdesign-claim .claim-price .big sup {
    font-size: 0.45em;
    top: -0.5em;
    position: relative;
    color: var(--p-accent, var(--cyan-deep));
  }
  .webdesign-claim .claim-price .unit {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--ink-soft);
  }
  .webdesign-claim .claim-label {
    margin-top: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 32ch;
  }
  .webdesign-claim .claim-divider {
    height: 1px;
    background: var(--p-line, var(--line));
    margin: 1.75rem 0;
  }
  .webdesign-claim .claim-sub {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 30ch;
  }
  .webdesign-claim .claim-condition {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--p-line, var(--line));
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.7;
    color: var(--p-deep, var(--cyan-deep));
  }
  .webdesign-claim .single-line {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.6rem;
  }
  .webdesign-features { position: relative; z-index: 2; }
  .webdesign-features .wd-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--p-line, var(--line));
  }
  .webdesign-features .wd-item:last-child { border-bottom: none; }
  .webdesign-features .wd-num {
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    color: var(--p-accent, var(--cyan-deep));
    letter-spacing: 0.05em;
    padding-top: 0.2rem;
  }
  .webdesign-features .wd-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--navy);
    line-height: 1.2;
  }
  .webdesign-features .wd-desc {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-top: 0.25rem;
    line-height: 1.55;
  }
  .webdesign-cta {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .webdesign-panel .btn-cyan { box-shadow: 0 4px 20px rgba(43,184,212,0.3); }
  .webdesign-note {
    font-size: 0.82rem;
    color: var(--muted);
  }
  body.fa .webdesign-claim .claim-price .from,
  body.fa .webdesign-features .wd-title { font-family: 'Shabnam', sans-serif; }
  body.fa .webdesign-claim .claim-price { font-family: 'Shabnam', sans-serif; }
  body.fa .webdesign-claim .claim-condition,
  body.fa .webdesign-claim .claim-eyebrow { font-family: 'Shabnam', sans-serif; }
  /* Website portfolio — open-air accordion, integrated into the section background */
  .portfolio-showcase { margin-top: clamp(3.8rem, 7vw, 6.5rem); }
  .portfolio-top { max-width: 980px; }
  .portfolio-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan-deep);
  }
  .portfolio-kicker::before { content: ''; width: 34px; height: 1px; background: var(--cyan); }
  .portfolio-top h3 {
    max-width: 900px;
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(2.15rem, 5vw, 4.15rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--navy);
    text-wrap: balance;
  }
  .portfolio-top h3 em { color: var(--cyan-deep); font-style: italic; }
  .portfolio-top p {
    max-width: 74ch;
    margin-top: 1.1rem;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.7;
  }
  .portfolio-accordion {
    display: flex;
    gap: 10px;
    height: clamp(360px, 40vw, 500px);
    margin-top: 2.4rem;
    direction: ltr;
  }
  .portfolio-card {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: var(--navy-deep);
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    box-shadow: 0 24px 54px -34px rgba(8,24,64,0.72);
    transition: flex-basis .64s cubic-bezier(.22,.8,.24,1), box-shadow .35s ease;
  }
  .portfolio-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
  .portfolio-card.active { box-shadow: 0 34px 70px -34px rgba(8,24,64,0.72); }
  .portfolio-media { position: absolute; inset: 0; background: var(--navy-deep); }
  .portfolio-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--ox, 50%) center;
    transform: scale(1.035);
    filter: saturate(.72) contrast(1.04);
    transition: transform .7s cubic-bezier(.22,.8,.24,1), object-position .58s ease, filter .45s ease;
  }
  .portfolio-card.active .portfolio-media img { object-position: center center; transform: scale(1); filter: saturate(1) contrast(1); }
  .portfolio-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,22,54,.08) 0%, rgba(7,22,54,.08) 42%, rgba(7,22,54,.76) 78%, rgba(7,22,54,.96) 100%);
    transition: background .45s ease;
    pointer-events: none;
  }
  .portfolio-card:not(.active) .portfolio-media::after { background: linear-gradient(180deg, rgba(7,22,54,.54), rgba(7,22,54,.76)); }
  .portfolio-card:nth-child(1) { --ox: 54%; }
  .portfolio-card:nth-child(2) { --ox: 62%; }
  .portfolio-card:nth-child(3) { --ox: 44%; }
  .portfolio-card:nth-child(4) { --ox: 58%; }
  .portfolio-card:nth-child(5) { --ox: 50%; }
  .portfolio-v {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%,-50%) rotate(-90deg);
    transform-origin: center;
    font-family: 'Google Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 3px 14px rgba(0,0,0,.52);
    opacity: 1;
    transition: opacity .22s ease;
    pointer-events: none;
  }
  .portfolio-card.active .portfolio-v { opacity: 0; }
  .portfolio-caption {
    position: absolute;
    z-index: 3;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.4rem;
    direction: ltr;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .42s ease .14s, transform .48s cubic-bezier(.22,.8,.24,1) .14s;
    pointer-events: none;
  }
  .portfolio-card.active .portfolio-caption { opacity: 1; transform: none; }
  .portfolio-rule { display: block; width: 36px; height: 3px; margin-bottom: 0.75rem; border-radius: 3px; background: var(--cyan); }
  .portfolio-eyebrow {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--cyan-soft);
  }
  .portfolio-title {
    display: block;
    margin-top: 0.25rem;
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    white-space: nowrap;
  }
  .portfolio-desc { display: block; max-width: 42ch; margin-top: 0.5rem; color: rgba(255,255,255,.78); font-size: 0.78rem; line-height: 1.5; }
  .portfolio-visit {
    position: absolute;
    z-index: 4;
    right: 1.35rem;
    top: 1.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.72rem;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    background: rgba(7,22,54,.44);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s ease .2s, transform .35s ease .2s, background .2s ease;
  }
  .portfolio-card.active .portfolio-visit { opacity: 1; transform: none; }
  .portfolio-card.active:hover .portfolio-visit { background: var(--cyan-deep); }
  body.fa .portfolio-kicker,
  body.fa .portfolio-top h3,
  body.fa .portfolio-eyebrow,
  body.fa .portfolio-title,
  body.fa .portfolio-desc,
  body.fa .portfolio-visit { font-family: 'Shabnam', sans-serif; letter-spacing: 0; }
  body.fa .portfolio-top { text-align: right; }
  body.fa .portfolio-top h3 { line-height: 1.35; letter-spacing: 0; }
  body.fa .portfolio-top h3 em { font-style: normal; }
  body.fa .portfolio-caption { direction: rtl; text-align: right; }
  body.fa .portfolio-visit { direction: rtl; }
  @media (max-width: 700px) {
    .portfolio-showcase { margin-top: 3.8rem; }
    .portfolio-top h3 { font-size: clamp(2rem, 10vw, 3rem); }
    .portfolio-top p { font-size: 0.92rem; }
    .portfolio-accordion { height: 360px; gap: 7px; margin-top: 1.8rem; }
    .portfolio-card { border-radius: 14px; }
    .portfolio-v { font-size: 0.65rem; letter-spacing: .13em; }
    .portfolio-caption { left: 1rem; right: 1rem; bottom: 1rem; }
    .portfolio-desc { display: none; }
    .portfolio-visit { top: 0.8rem; right: 0.8rem; padding: .42rem .58rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .portfolio-card,
    .portfolio-media img,
    .portfolio-v,
    .portfolio-caption,
    .portfolio-visit { transition: none; }
  }
  @media (max-width: 860px) {
    .webdesign-panel {
      grid-template-columns: 1fr;
      gap: 2.5rem;
      padding: 2.5rem 1.75rem;
    }
    .webdesign-claim .claim-price .big { font-size: clamp(3.5rem, 16vw, 5rem); }
  }

  /* ============ ADS (Meta & Google) ============ */
  .ads { background: var(--bg-soft); }
  .photo { background: var(--bg); }
  .ads-head p {
    color: var(--ink-soft);
    font-size: 1.05rem;
    max-width: 38rem;
    margin-top: 1rem;
  }
  .ads-platforms {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 2.5rem;
    padding-bottom: 0.25rem;
  }
  .ads-platforms.has-overflow {
    padding-right: 2.5rem;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(to right, black 0, black calc(100% - 2.5rem), transparent 100%);
  }
  body.fa .ads-platforms.has-overflow {
    padding-right: 0;
    padding-left: 2.5rem;
    -webkit-mask-image: linear-gradient(to left, black 0, black calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(to left, black 0, black calc(100% - 2.5rem), transparent 100%);
  }
  .ads-platforms::-webkit-scrollbar { display: none; }
  .ads-pill, .kw-pill {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    background: var(--paper);
  }
  .kw-pill { cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
  .kw-pill:hover { border-color: var(--cyan-deep); }
  .kw-pill.is-open { background: var(--cyan); color: #fff; border-color: var(--cyan); transform: translateY(-1px); }
  body.fa .kw-pill { font-family: 'Shabnam', sans-serif; letter-spacing: 0; text-transform: none; font-size: 0.86rem; }
  .kw-popover {
    position: fixed;
    z-index: 200;
    max-width: 300px;
    background: var(--navy);
    color: #fff;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    font-size: 0.85rem;
    line-height: 1.6;
    box-shadow: 0 16px 40px rgba(15,44,107,0.28);
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  body.fa .kw-popover { font-family: 'Shabnam', sans-serif; transform-origin: top right; }
  .kw-popover.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  @media (max-width: 860px) {
    .ads-platforms { gap: 0.6rem; }
    .kw-popover { max-width: calc(100vw - 2.4rem); }
  }

  /* ============ TERMS ============ */
  .terms {
    background: var(--navy);
    color: var(--paper);
    padding: 5rem 0;
  }
  .terms h2 {
    color: var(--paper);
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }
  .terms h2 em { color: var(--cyan-soft); }
  .terms .section-label { color: var(--cyan-soft); }
  .terms .section-label::before { background: var(--cyan-soft); }

  .terms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
    margin-top: 2rem;
  }
  .term-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  .term-num {
    font-family: 'Google Sans', sans-serif;
    font-style: italic;
    color: var(--cyan-soft);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    padding-top: 0.1rem;
  }
  body.fa .term-num { font-family: 'Shabnam', sans-serif; }
  .term-text {
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* ============ CONTACT ============ */
  .contact {
    text-align: center;
    padding: 10rem 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .contact::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(43, 184, 212, 0.1) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
  }
  .contact .container { position: relative; z-index: 2; }
  .contact h2 { max-width: 18ch; margin: 0 auto 1.5rem; }
  .contact p.lead {
    color: var(--ink-soft);
    max-width: 32rem;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
  }
  .contact-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .whatsapp-number,
  .contact-email {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
    font-family: 'Google Sans', sans-serif;
    font-size: 2rem;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.25rem;
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  .whatsapp-number:hover,
  .contact-email:hover {
    color: var(--cyan-deep);
    border-color: var(--cyan);
  }
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--line);
    text-align: left;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-item .label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    margin-bottom: 0.75rem;
  }
  .contact-item a, .contact-item span {
    color: var(--ink);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5;
  }
  .contact-item a:hover { color: var(--cyan-deep); }

  /* ============ FOOTER ============ */
  footer {
    border-top: 1px solid var(--line);
    padding: 4rem 0 2rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: var(--muted);
    background: var(--bg-soft);
  }

  /* Social media grid in footer */
  .footer-social {
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
  }
  .footer-social-head {
    text-align: center;
    margin-bottom: 2rem;
  }
  .footer-social-head .label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    margin-bottom: 0.5rem;
  }
  body.fa .footer-social-head .label {
    font-family: 'Shabnam', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.85rem;
  }
  .footer-social-head h3 {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.6rem;
    color: var(--navy);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  body.fa .footer-social-head h3 {
    font-family: 'Shabnam', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
  }
  .footer-social-head h3 em {
    color: var(--cyan-deep);
    font-style: italic;
  }
  body.fa .footer-social-head h3 em {
    font-style: normal;
    font-weight: 700;
  }

  .social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    max-width: 920px;
    margin: 0 auto;
  }
  .social-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    position: relative;
    overflow: hidden;
  }
  body.fa .social-link {
    font-family: 'Shabnam', sans-serif;
    direction: ltr;
    text-align: left;
  }
  .social-link:hover {
    border-color: var(--cyan);
    background: var(--accent-bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 44, 107, 0.08);
  }
  .social-link .icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    color: var(--navy);
    transition: color 0.3s ease;
  }
  .social-link:hover .icon { color: var(--cyan-deep); }
  .social-link .text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .social-link .handle {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .social-link .purpose {
    font-family: 'Roboto', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Color-code purposes via small dot */
  .social-link .purpose::before {
    content: '●';
    margin-right: 0.4rem;
    font-size: 0.7rem;
  }
  .social-link[data-group="studio"] .purpose::before { color: var(--cyan); }
  .social-link[data-group="show"] .purpose::before { color: #d97706; }
  .social-link[data-group="ai"] .purpose::before { color: #8b5cf6; }

  /* Footer bottom row */
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .footer-inner a { color: var(--muted); text-decoration: none; }
  .footer-inner a:hover { color: var(--cyan-deep); }

  /* Reveal */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .reel-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
  }
  @media (max-width: 960px) {
    .services-head, .reels-head { grid-template-columns: 1fr; gap: 1.5rem; }
    .services .services-head { grid-template-columns: 1fr; gap: 1.5rem; }
    .services .services-head > div, .services .services-head > p { grid-column: auto; }
    .about-grid { grid-template-columns: 1fr; gap: 3rem; }
    .about-meta { position: static; }
    .marquee-track { font-size: 1.5rem; gap: 3rem; }
    /* Mobile/tablet hero */
    .hero {
      min-height: calc(100vh - 96px);
      padding: 5.5rem 0 0.5rem;
      display: flex;
      flex-direction: column;
    }
    .hero .container {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 1rem;
    }
    /* CENTERING STRATEGY:
       - hero-visual gets margin-top: auto (pushes content down from top)
       - hero-meta gets margin-top: auto with order:3 (pushes itself to bottom)
       - The combined block (photo + text + buttons) sits naturally in the middle
       - meta line stays at very bottom border */
    /* Move meta (long AI sentence) to BOTTOM of hero — last thing user sees above fold */
    .hero-meta {
      order: 3;
      margin-top: auto; /* pushes meta to absolute bottom */
      margin-bottom: 0;
      padding-top: 1rem;
      padding-bottom: 0;
      border-top: 1px solid var(--line);
      border-bottom: none;
      font-size: 0.65rem;
      line-height: 1.7;
      flex-shrink: 0;
    }
    .hero-content {
      order: 2;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      flex-shrink: 0;
      margin-bottom: auto; /* combined with hero-visual margin-top:auto, vertically centers the block */
    }
    .hero-visual {
      order: 1;
      max-width: 100%;
      width: 100%;
      margin: auto auto 0; /* margin-top: auto centers photo+content block as a group */
      aspect-ratio: 16 / 11;
      flex-shrink: 0;
    }
    .hero-img.main {
      width: 78%;
      height: 80%;
      top: 0;
      left: 0;
    }
    .hero-img.accent {
      width: 52%;
      height: 58%;
      bottom: 0;
      right: 0;
    }
    /* Compact hero text on mobile so title + para + buttons fit above fold */
    h1.hero-title {
      font-size: clamp(2rem, 7vw, 2.75rem);
      margin-bottom: 0.6rem;
      line-height: 1.3;
    }
    .hero-text p {
      font-size: 0.9rem;
      line-height: 1.45;
      margin-bottom: 0.85rem;
    }
    .hero-cta-group .btn {
      padding: 0.7rem 1.15rem;
      font-size: 0.82rem;
    }
    .addons-grid, .terms-grid { grid-template-columns: 1fr; gap: 0; }
    .terms-grid { gap: 1.5rem; }
    .service-row { grid-template-columns: 60px 1fr 30px; gap: 1.5rem; }
    .service-row .service-desc { grid-column: 2 / 4; }
    .promo-grid { grid-template-columns: 1fr; }
    .social-grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* Header switches to the compact burger menu earlier than the rest of the mobile layout,
     so the nav links never wrap into an ugly second line on narrow desktop/tablet widths. */
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-toggle { display: flex; }
    .mobile-actions { display: flex; align-items: center; gap: 0.6rem; }
    .nav-phone { display: none; }
    .nav-book { padding: 0.42rem 0.85rem; font-size: 0.7rem; }
    body.fa .nav-book { font-size: 0.75rem; }
  }
  @media (max-width: 640px) {
    .container { padding: 0 1.25rem; }
    .rev-nav { width: 34px; height: 34px; font-size: 0.95rem; }
    .rev-prev { left: 2px; }
    .rev-next { right: 2px; }
    /* Phone: the top bar disappears entirely — one floating circle opens everything */
    nav { display: none; }
    nav .inner { gap: 0.5rem; }
    .logo { height: 34px; max-width: 55%; flex-shrink: 1; }
    nav .inner { gap: 0.4rem; }
    section { padding: 5rem 0; }
    /* Phone hero — the top bar is gone here, so give the headline breathing room without a big gap */
    .hero { min-height: 88vh; padding: 5.75rem 0 0.75rem; justify-content: flex-start; }
    .hero-visual {
      max-width: 100%;
      aspect-ratio: 16 / 10;
      margin: 0 auto;
    }
    .hero-content { gap: 0.85rem; }
    .hero-meta {
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      line-height: 1.65;
    }
    .pricing-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr; gap: 1.5rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .marquee-track { font-size: 1.25rem; gap: 2.5rem; }
    .hero-meta { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .service-row { grid-template-columns: 1fr; gap: 0.5rem; }
    .service-arrow { display: none; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .whatsapp-number, .contact-email { font-size: 1.4rem; }
    .social-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .footer-social { padding-bottom: 2rem; margin-bottom: 2rem; }
    .reel-card { flex: 0 0 100%; }
    .reels-track { gap: 1rem; }
    .promo-card { grid-template-columns: 1fr; gap: 1rem; padding: 2rem; }
    .promo-price { text-align: left; }
    .price-amount { font-size: 3.5rem; }
    .price-amount sup { font-size: 2.2rem; }
    .promo-price .amount { font-size: 3rem; justify-content: flex-start; }
    .promo-price .amount sup { font-size: 1.9rem; }
  }
  /* Extra small phones — even more compact */
  @media (max-width: 380px) {
    .logo { height: 30px; max-width: 50%; }
    nav { padding: 0.75rem 1rem; }
    .hero-visual { aspect-ratio: 16 / 12; }
    .hero { padding: 5.5rem 0 1rem; justify-content: flex-start; }
  }

  /* Mobile menu */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--navy);
    z-index: 200;
    padding: 6rem 2rem 2rem;
    flex-direction: column;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    color: var(--paper);
    text-decoration: none;
    font-family: 'Google Sans', sans-serif;
    font-size: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mobile-menu a:hover { color: var(--cyan-soft); }
  .mobile-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--paper);
    font-size: 2rem;
    cursor: pointer;
  }
  body.fa .mobile-close { right: auto; left: 1.25rem; }

  /* Floating circular menu button — phone only, mirrors the chat circle */
  .floating-menu-btn {
    display: none;
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--paper);
    border: none;
    z-index: 150;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(15, 44, 107, 0.25), 0 0 0 1px rgba(43, 184, 212, 0.18);
    cursor: pointer;
  }
  .floating-menu-btn svg { width: 24px; height: 24px; }
  body.fa .floating-menu-btn { right: auto; left: 1.25rem; }

  /* Overlay header: brand logo + language switch (phone only) */
  .mobile-menu .mm-head {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    margin-bottom: 2rem;
  }
  .mobile-menu .mm-brand { border-bottom: none !important; padding: 0 !important; width: 100%; }
  .mobile-menu .mm-brand img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* iOS-style sliding switch. Menu links sit at the start side, so the switch is pushed to the end side. */
  .mobile-menu .mm-lang-row {
    display: flex;
    justify-content: flex-end;
  }
  body.fa .mobile-menu .mm-lang-row { justify-content: flex-start; }
  .mobile-menu .mm-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 122px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px;
    cursor: pointer;
    direction: ltr;
  }
  .mobile-menu .mm-lang::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: 999px;
    background: var(--cyan);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.fa .mobile-menu .mm-lang::before { transform: translateX(100%); }
  .mobile-menu .mm-lang span {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
    font-family: 'Google Sans', sans-serif;
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, font-weight 0.3s ease;
  }
  .mobile-menu .mm-lang .seg-fa { font-family: 'Shabnam', sans-serif; }
  .mobile-menu .mm-lang .seg-en { color: #06233f; font-weight: 600; }
  body.fa .mobile-menu .mm-lang .seg-en { color: rgba(255, 255, 255, 0.7); font-weight: 400; }
  body.fa .mobile-menu .mm-lang .seg-fa { color: #06233f; font-weight: 600; }

  @media (max-width: 640px) {
    .floating-menu-btn { display: flex; }
    .mobile-menu { padding-top: 3rem; padding-bottom: 1.25rem; }
    .mobile-menu .mm-head { gap: 3rem; margin-bottom: 3rem; }
    .mobile-menu .mm-brand img { width: 78%; }
    .mobile-menu .mm-lang { width: 104px; height: 38px; }
    .mobile-menu .mm-lang span { font-size: 0.88rem; }
    .mobile-menu > a:first-of-type { padding-top: 0; margin-top: -4px; }
    .mobile-menu .mm-head { display: flex; }
    .mobile-menu a { font-size: 1.15rem; padding: 0.6rem 0; }
  }

  /* ============ COOKIE CONSENT BANNER ============ */
  .cookie-banner {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    max-width: 580px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 1.25rem 1.4rem 1.1rem;
    box-shadow: 0 12px 40px rgba(15, 44, 107, 0.18), 0 2px 8px rgba(15, 44, 107, 0.08);
    z-index: 9998;
    transform: translateY(calc(100% + 2rem));
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s ease;
    pointer-events: none;
  }
  .cookie-banner.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .cookie-banner-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
  }
  .cookie-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--cyan-deep);
  }
  .cookie-banner-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.25rem;
    color: var(--navy);
    margin: 0;
    line-height: 1.2;
  }
  body.fa .cookie-banner-title {
    font-family: 'Shabnam', sans-serif;
    font-weight: 600;
    font-size: 1rem;
  }
  .cookie-banner-text {
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 1rem;
  }
  body.fa .cookie-banner-text {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.78rem;
    line-height: 1.85;
  }
  .cookie-banner-text a {
    color: var(--cyan-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cookie-banner-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  .cookie-btn {
    flex: 1;
    min-width: 110px;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
  }
  body.fa .cookie-btn {
    font-family: 'Shabnam', sans-serif;
  }
  .cookie-btn-decline {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line-strong);
  }
  .cookie-btn-decline:hover {
    background: var(--bg-soft);
    color: var(--ink);
    border-color: var(--ink-soft);
  }
  .cookie-btn-accept {
    background: var(--navy);
    color: var(--paper);
    border-color: var(--navy);
  }
  .cookie-btn-accept:hover {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 44, 107, 0.25);
  }
  @media (max-width: 640px) {
    .cookie-banner {
      bottom: 0.75rem;
      left: 0.75rem;
      right: 0.75rem;
      padding: 1rem 1.15rem 0.9rem;
      border-radius: 12px;
    }
    .cookie-banner-title { font-size: 1.05rem; }
    .cookie-banner-text { font-size: 0.78rem; }
    .cookie-btn {
      font-size: 0.78rem;
      padding: 0.6rem 0.85rem;
      min-width: 100px;
    }
  }

  /* ============ EXIT-INTENT / TIMED PROMO POPUP ============ */
  .promo-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 44, 107, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .promo-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
  .promo-popup {
    background: var(--paper);
    border-radius: 16px;
    padding: 2.5rem 2.25rem 2rem;
    max-width: 440px;
    width: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0 30px 80px rgba(15, 44, 107, 0.4);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--line);
  }
  .promo-popup-overlay.active .promo-popup {
    transform: scale(1) translateY(0);
  }
  .promo-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.2s ease;
  }
  .promo-popup-close:hover {
    background: var(--bg-soft);
    color: var(--ink);
  }
  body.fa .promo-popup-close {
    right: auto;
    left: 0.75rem;
  }
  .promo-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    background: var(--accent-bg);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
  }
  .promo-popup-badge .pulse {
    width: 6px;
    height: 6px;
    background: var(--cyan);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
  .promo-popup h3 {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
  }
  .promo-popup h3 em {
    font-style: italic;
    color: var(--cyan-deep);
  }
  body.fa .promo-popup h3 {
    font-family: 'Shabnam', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0;
  }
  body.fa .promo-popup h3 em {
    font-style: normal;
    font-weight: 700;
  }
  .promo-popup p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
  }
  body.fa .promo-popup p {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.9rem;
    line-height: 1.85;
  }
  .promo-code-box {
    background: var(--navy);
    color: var(--paper);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
  }
  .promo-code-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan-soft);
    margin-bottom: 0.5rem;
    display: block;
  }
  body.fa .promo-code-label {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.7rem;
  }
  .promo-code {
    font-family: 'Roboto', sans-serif;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--cyan-soft);
    cursor: pointer;
    user-select: all;
    transition: color 0.2s ease;
    display: inline-block;
    direction: ltr;
  }
  .promo-code:hover { color: var(--paper); }
  .promo-code-hint {
    display: block;
    margin-top: 0.4rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
  }
  body.fa .promo-code-hint {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.7rem;
    text-transform: none;
  }
  .promo-code-hint.copied { color: var(--cyan); }
  .promo-popup-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--cyan);
    color: var(--navy);
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(43, 184, 212, 0.3);
  }
  .promo-popup-cta:hover {
    background: var(--cyan-deep);
    color: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(43, 184, 212, 0.4);
  }
  .promo-popup-expiry {
    margin-top: 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  body.fa .promo-popup-expiry {
    font-family: 'Shabnam', sans-serif;
    font-size: 0.7rem;
    text-transform: none;
  }
  @media (max-width: 640px) {
    .promo-popup {
      padding: 2rem 1.5rem 1.5rem;
      max-width: 100%;
    }
    .promo-popup h3 { font-size: 1.65rem; }
    body.fa .promo-popup h3 { font-size: 1.3rem; }
    .promo-popup p { font-size: 0.9rem; }
    .promo-code { font-size: 1.5rem; }
  }

  /* ============================================================
     PROCESS — auto-advancing tabs (Create / Promote / Convert)
  ============================================================ */
  .process { background: var(--bg-soft); }
  .process .proc-head { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
  .process .proc-sub { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin-top: 1rem; }
  .proc-tabs { display: flex; flex-direction: column; gap: 0.6rem; max-width: 720px; margin: 0 auto; }
  .proc-tab {
    text-align: left; background: none; border: none; cursor: pointer;
    padding: 1.25rem 1.4rem; border-radius: 16px; width: 100%;
    display: flex; flex-direction: column; gap: 0;
    transition: background .35s ease, box-shadow .35s ease;
    font-family: 'Roboto', sans-serif;
  }
  .proc-tab .proc-num {
    font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 0.4rem; opacity: 0.85;
  }
  .proc-tab .proc-title {
    font-family: 'Google Sans', sans-serif; font-size: 1.7rem; line-height: 1.12;
    color: var(--ink-soft); transition: color .35s ease;
  }
  .proc-tab .proc-desc {
    color: var(--ink-soft); font-size: 1rem; line-height: 1.6;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, margin .4s ease;
  }
  .proc-tab .proc-bar {
    display: block; height: 3px; background: var(--line); border-radius: 3px;
    max-height: 0; opacity: 0;
    transition: opacity .3s ease, margin .4s ease, max-height .4s ease;
  }
  .proc-tab .proc-bar i { display: block; height: 100%; width: 0; background: var(--cyan); border-radius: 3px; }
  .proc-tab.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,44,107,0.05), 0 12px 34px rgba(15,44,107,0.09);
  }
  .proc-tab.active .proc-title { color: var(--navy); }
  .proc-tab.active .proc-desc { max-height: 240px; opacity: 1; margin-top: 0.55rem; }
  .proc-tab.active .proc-bar { max-height: 5px; opacity: 1; margin-top: 1.1rem; }
  .proc-tab.active .proc-bar i { animation: procfill var(--dur, 6s) linear forwards; }
  @keyframes procfill { from { width: 0; } to { width: 100%; } }
  @media (prefers-reduced-motion: reduce) { .proc-tab.active .proc-bar i { animation: none; width: 100%; } }
  body.fa .proc-tab { text-align: right; }

  /* ============================================================
     INDUSTRIES — hover-expand accordion (brand panels, no images)
  ============================================================ */
  .industries .ind-head { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
  .industries .ind-sub { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin-top: 1rem; }
  .ind-accordion { display: flex; gap: 12px; height: clamp(300px, 38vw, 430px); }
  .ind-accordion .acc-item {
    position: relative; flex: 1 1 0%; min-width: 0; border-radius: 12px; overflow: hidden;
    cursor: pointer; outline: none; padding: 1.5rem 1.4rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--bg-soft); border: 1px solid var(--line-strong);
    transition: flex-grow .6s cubic-bezier(.22,1,.36,1), background .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  .ind-accordion .acc-item.active {
    flex-grow: var(--grow, 4);
    background: #fff; border-color: var(--cyan);
    box-shadow: 0 16px 40px rgba(15, 44, 107, 0.12);
  }
  .ind-accordion .acc-item:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43, 184, 212, 0.28); }
  .ind-accordion .acc-num {
    position: absolute; top: 1.2rem; left: 1.4rem;
    font-family: 'Roboto', sans-serif; font-size: 0.74rem; letter-spacing: 0.18em;
    color: var(--cyan-deep);
  }
  .ind-accordion .acc-body { display: flex; flex-direction: column; }
  /* caption is vertical while collapsed, turns horizontal when the panel opens */
  .ind-accordion .acc-cap {
    display: block; font-family: 'Google Sans', sans-serif;
    font-size: clamp(1.5rem, 2vw, 2.1rem); line-height: 1.04; color: var(--navy); white-space: nowrap;
    writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center;
    transition: font-size .4s ease;
  }
  .ind-accordion .acc-item.active .acc-cap { writing-mode: horizontal-tb; transform: none; }
  .ind-accordion .acc-desc {
    display: block; font-family: 'Roboto', sans-serif; color: var(--ink-soft);
    font-size: 0.92rem; line-height: 1.5; max-width: 38ch;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, margin .4s ease;
  }
  .ind-accordion .acc-item.active .acc-desc { max-height: 130px; opacity: 1; margin-top: 0.55rem; }
  body.fa .ind-accordion .acc-num { left: auto; right: 1.4rem; }

  @media (max-width: 760px) {
    .proc-tab .proc-title { font-size: 1.45rem; }
    .ind-accordion { flex-direction: column; height: auto; gap: 10px; }
    .ind-accordion .acc-item { flex: none; justify-content: flex-start; padding: 1.3rem 1.4rem;
      background: #fff; border-color: var(--cyan); box-shadow: 0 10px 26px rgba(15,44,107,0.08); }
    .ind-accordion .acc-num { position: static; margin-bottom: 0.6rem; }
    .ind-accordion .acc-cap { writing-mode: horizontal-tb; transform: none; white-space: normal; }
    .ind-accordion .acc-desc { max-height: none; opacity: 1; margin-top: 0.5rem; max-width: none; }
    body.fa .ind-accordion .acc-num { right: auto; }
  }
  /* ===== Update: pricing note, department, contact, web-design accordion ===== */
  .pricing-note { margin: 0.5rem auto 0; max-width: 82ch; }

  .department-intro {
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    max-width: 60rem;
    margin-top: 1.4rem;
  }
  .department-intro strong { color: var(--paper); font-weight: 600; }
  body.fa .department-intro { font-family: 'Shabnam', sans-serif; }

  /* department cards: inline one-liner + footer button pinned to bottom */
  .dept-card { display: flex; flex-direction: column; }
  .dept-card h3 .dept-name { display: block; }
  .dept-card .dept-line {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: var(--cyan-soft);
    font-weight: 500;
    margin-top: 0.8rem;
    margin-bottom: 0;
  }
  body.fa .dept-card .dept-line { font-family: 'Shabnam', sans-serif; }
  .dept-card .dept-desc { margin-top: 0.65rem; margin-bottom: 1.6rem; }
  .dept-card .dept-foot {
    margin-top: auto;
    padding-top: 1.7rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .dept-card .dept-foot .dept-price {
    margin: 0; padding: 0; border: none;
    font-family: 'Google Sans', sans-serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--paper);
  }
  .dept-card .dept-foot .dept-price sup { font-size: 0.6em; color: var(--cyan-soft); }
  body.fa .dept-card .dept-foot .dept-price { font-family: 'Shabnam', sans-serif; }
  .dept-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: 'Roboto', sans-serif; font-size: 0.82rem; font-weight: 500;
    color: var(--cyan-soft); text-decoration: none;
    padding: 0.42rem 0.95rem; border: 1px solid rgba(43,184,212,0.4);
    border-radius: 999px; white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  .dept-btn:hover { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
  .dept-btn .arrow { transition: transform .25s ease; }
  .dept-btn:hover .arrow { transform: translateX(3px); }
  body.fa .dept-btn { font-family: 'Shabnam', sans-serif; }
  body.fa .dept-btn .arrow { transform: scaleX(-1); }
  body.fa .dept-btn:hover .arrow { transform: scaleX(-1) translateX(3px); }

  /* contact: phone + email on one line */
  .contact-direct {
    display: flex; align-items: center; justify-content: center;
    gap: 0.9rem; flex-wrap: wrap; margin-top: 1.4rem;
  }
  .contact-direct a {
    color: var(--cyan-deep); text-decoration: none; font-weight: 500; font-size: 1.05rem;
  }
  .contact-direct a:hover { text-decoration: underline; }
  .contact-sep { color: var(--muted); }
  @media (max-width: 480px) {
    .contact-sep { display: none; }
    .contact-direct { flex-direction: column; gap: 0.5rem; }
  }

  /* web-design features: auto-advancing accordion with timer bars */
  .wd-accordion .wd-item { cursor: pointer; transition: opacity .3s ease; }
  .wd-accordion .wd-item .wd-title { transition: color .3s ease; }
  .wd-accordion .wd-item:not(.active) .wd-title { color: rgba(255,255,255,0.55); }
  .wd-accordion .wd-desc {
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
    transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, margin .4s ease;
  }
  .wd-accordion .wd-item.active .wd-desc { max-height: 200px; opacity: 1; margin-top: 0.25rem; }
  .wd-accordion .wd-bar {
    display: block; height: 3px; background: rgba(15,44,107,0.12);
    border-radius: 3px; max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: opacity .3s ease, margin .4s ease, max-height .4s ease;
  }
  .wd-accordion .wd-bar i { display: block; height: 100%; width: 0; background: var(--p-accent, var(--cyan)); border-radius: 3px; }
  .wd-accordion .wd-item.active .wd-bar { max-height: 5px; opacity: 1; margin-top: 0.7rem; }
  .wd-accordion .wd-item.active .wd-bar i { animation: procfill var(--wd-dur, 5s) linear forwards; }
  @media (prefers-reduced-motion: reduce) {
    .wd-accordion .wd-item.active .wd-bar i { animation: none; width: 100%; }
    .wd-accordion .wd-desc { max-height: none; opacity: 1; margin-top: 0.25rem; }
  }

  /* ===== Keep key phrases on a single line ===== */
  .department h2 { max-width: 30ch; }
  .department h2 .lang-en em, .department h2 .lang-fa em { display: block; white-space: nowrap; }
  .department-tagline { max-width: none; white-space: nowrap; }
  @media (max-width: 480px) {
    .department-tagline { white-space: normal; }
    .department h2 .lang-en em, .department h2 .lang-fa em { white-space: normal; }
  }

  /* ===== Contact phone + email, more prominent ===== */
  .contact-direct { gap: 1.1rem; margin-top: 1.6rem; }
  .contact-direct a { font-size: 1.2rem; font-weight: 400; }
  @media (max-width: 480px) { .contact-direct a { font-size: 1.1rem; } }

  /* ===== Web-design features: active item = white card (image-2 style) ===== */
  .webdesign-panel { align-items: stretch; }
  .webdesign-features {
    display: flex; flex-direction: column; justify-content: space-between; gap: 0.35rem;
  }
  .wd-title, .wd-desc, .claim-label, .claim-sub { text-wrap: pretty; }
  .webdesign-features .wd-item {
    border-bottom: none; border-radius: 14px;
    padding: 0.95rem 1.15rem;
    align-items: start;
    transition: background .35s ease, box-shadow .35s ease;
  }
  .webdesign-features .wd-item.active {
    background: var(--paper);
    box-shadow: 0 12px 30px rgba(8,24,64,0.12);
  }
  .webdesign-features .wd-item.active .wd-num { color: var(--cyan-deep); }
  .webdesign-features .wd-item.active .wd-title { color: var(--navy); }
  .webdesign-features .wd-item.active .wd-desc { color: var(--ink-soft); }
  .wd-accordion .wd-item.active .wd-bar { background: rgba(15,44,107,0.14); }
  .wd-accordion .wd-item.active .wd-bar i { background: var(--cyan-deep); }

  /* ===== Web-design left column: two inset price-boxes ===== */
  .wd-priceboxes { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.25rem; }
  .webdesign-claim .wd-pricebox {
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--p-border, var(--line-strong));
    border-radius: 16px;
    padding: 1.5rem 1.6rem;
    margin: 0;
    transition: border-color .3s ease, background .3s ease;
  }
  .webdesign-claim .wd-pricebox--primary {
    background: rgba(255,255,255,0.8);
    border-color: var(--p-accent, var(--cyan-deep));
  }
  .webdesign-claim .wd-pricebox .claim-label { margin-top: 0.55rem; max-width: none; }
  .webdesign-claim .wd-pricebox .claim-sub { margin-top: 0.7rem; max-width: none; }
  .webdesign-claim .wd-pricebox .claim-condition {
    margin-top: 0.8rem; padding-top: 0.8rem;
    border-top: 1px solid var(--p-line, var(--line));
  }

  /* On shorter non-mobile screens, compress the hero so it still fits above the marquee on first load */
  @media (min-width: 961px) and (max-height: 920px) {
    .hero { padding-top: 4.25rem; padding-bottom: 1rem; min-height: calc(100vh - 103px); }
    h1.hero-title { font-size: clamp(1.9rem, 4.4vh, 3.2rem) !important; margin-bottom: 0.6rem !important; line-height: 1.2 !important; }
    .hero-text p.hero-lead { font-size: clamp(1rem, 2.1vh, 1.4rem) !important; margin-bottom: 0.6rem !important; }
    body.fa .hero-text p.hero-lead { font-size: clamp(0.95rem, 1.9vh, 1.2rem) !important; }
    .hero-text p { font-size: 0.95rem !important; margin-bottom: 0.8rem !important; }
    .hero-cta-group .btn { padding: 0.6rem 1.05rem !important; font-size: 0.8rem !important; }
  }
  @media (min-width: 641px) and (max-width: 960px) and (max-height: 920px) {
    .hero { padding-top: 4.25rem; padding-bottom: 1rem; min-height: calc(100vh - 96px); }
    h1.hero-title { font-size: clamp(1.9rem, 4.4vh, 3.2rem) !important; margin-bottom: 0.6rem !important; line-height: 1.2 !important; }
    .hero-text p.hero-lead { font-size: clamp(1rem, 2.1vh, 1.4rem) !important; margin-bottom: 0.6rem !important; }
    body.fa .hero-text p.hero-lead { font-size: clamp(0.95rem, 1.9vh, 1.2rem) !important; }
    .hero-text p { font-size: 0.95rem !important; margin-bottom: 0.8rem !important; }
    .hero-cta-group .btn { padding: 0.6rem 1.05rem !important; font-size: 0.8rem !important; }
    .hero-visual { aspect-ratio: 16 / 8 !important; }
  }

/* source: assets/portfolio-showcase-v050.css */
/* Tehranto selected web work v050 — compact direct project links */
.workfolio {
  --work-accent: #2bb8d4;
  position: relative;
  margin-top: clamp(4.2rem, 7vw, 7rem);
  isolation: isolate;
}

.workfolio-kicker {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--cyan-deep);
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.workfolio-kicker::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--cyan);
}

.workfolio-head {
  margin-top: 1.2rem;
}

.workfolio-head h3 {
  max-width: 960px;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(3rem, 6.3vw, 6.4rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.058em;
  color: var(--navy);
  text-wrap: balance;
}

.workfolio-head h3 em {
  display: block;
  color: var(--cyan-deep);
  font-weight: 500;
  font-style: italic;
}

.workfolio-head p {
  max-width: 720px;
  margin-top: 1.35rem;
  color: var(--ink-soft);
  font-size: clamp(.95rem, 1.3vw, 1.08rem);
  line-height: 1.72;
}

.workfolio-accordion-wrap {
  position: relative;
  margin-top: clamp(2.7rem, 5vw, 4.8rem);
}

.workfolio-accordion-wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 18% 7% -8% 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 184, 212, .14), transparent 67%);
  filter: blur(34px);
  pointer-events: none;
}

.workfolio-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: .8rem;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.workfolio-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.workfolio-meta > span:first-child::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(43, 184, 212, .12);
}

.workfolio-meta-hint {
  margin-left: .45rem;
  color: var(--navy);
  letter-spacing: .08em;
}

.workfolio-accordion {
  display: flex;
  gap: clamp(8px, .8vw, 12px);
  width: 100%;
  height: clamp(460px, 48vw, 640px);
  direction: ltr;
}

.workfolio-card {
  --card-accent: var(--cyan);
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: clamp(16px, 1.6vw, 24px);
  background: var(--navy-deep);
  box-shadow: 0 22px 46px -34px rgba(7, 26, 64, .75);
  cursor: pointer;
  outline: none;
  transition:
    flex-basis .62s cubic-bezier(.22, .8, .24, 1),
    box-shadow .45s ease,
    transform .45s cubic-bezier(.22, .8, .24, 1);
}

.workfolio-card::before,
.workfolio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity .48s ease, background .48s ease;
}

.workfolio-card::before {
  background: linear-gradient(180deg, rgba(4, 15, 38, .04), rgba(4, 15, 38, .04) 40%, rgba(4, 15, 38, .84));
}

.workfolio-card::after {
  background: linear-gradient(180deg, rgba(5, 18, 45, .46), rgba(5, 18, 45, .74));
}

.workfolio-card.is-active {
  box-shadow: 0 34px 70px -40px rgba(7, 26, 64, .9);
  transform: translateY(-4px);
}

.workfolio-card.is-active::after {
  opacity: 0;
}

.workfolio-card.is-live::before {
  opacity: 0;
}

.workfolio-card:focus-visible {
  box-shadow:
    0 0 0 4px rgba(43, 184, 212, .28),
    0 34px 70px -40px rgba(7, 26, 64, .9);
}

.workfolio-card-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.045);
  transition: filter .5s ease, opacity .35s ease, transform .75s cubic-bezier(.22, .8, .24, 1);
}

.workfolio-card.is-active .workfolio-card-image {
  filter: saturate(1) contrast(1);
  transform: scale(1);
}

.workfolio-card.is-live .workfolio-card-image {
  opacity: .18;
}

.workfolio-card-index {
  position: absolute;
  z-index: 4;
  top: 1rem;
  left: 50%;
  color: rgba(255, 255, 255, .78);
  font-family: 'Roboto', sans-serif;
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .14em;
  transform: translateX(-50%);
  transition: opacity .28s ease;
}

.workfolio-card.is-active .workfolio-card-index {
  opacity: 0;
}

.workfolio-card-vertical {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  color: #fff;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(.72rem, 1vw, .92rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .66);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: opacity .28s ease;
  pointer-events: none;
}

.workfolio-card.is-active .workfolio-card-vertical {
  opacity: 0;
}

.workfolio-live-shell {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 18, 45, .92), rgba(5, 18, 45, .25) 18%, rgba(5, 18, 45, .25) 82%, rgba(5, 18, 45, .92)),
    rgba(5, 18, 45, .8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .36s ease, visibility 0s linear .36s;
}

.workfolio-card.is-loading .workfolio-live-shell,
.workfolio-card.is-live .workfolio-live-shell {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.workfolio-card.is-live .workfolio-live-shell {
  pointer-events: auto;
}

.workfolio-live-viewport {
  position: relative;
  width: min(390px, 100%);
  height: 100%;
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 0 44px rgba(0, 0, 0, .22);
}

.workfolio-live-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .28s ease;
}

.workfolio-card.is-live .workfolio-live-frame {
  opacity: 1;
}

.workfolio-live-loader {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: workfolio-spin .85s linear infinite;
  pointer-events: none;
}

.workfolio-card.is-live .workfolio-live-loader {
  opacity: 0;
}

@keyframes workfolio-spin {
  to { transform: rotate(360deg); }
}

.workfolio-live-toolbar {
  position: absolute;
  z-index: 7;
  top: .8rem;
  right: .8rem;
  left: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .3s ease;
}

.workfolio-card.is-loading .workfolio-live-toolbar,
.workfolio-card.is-live .workfolio-live-toolbar {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.workfolio-live-status,
.workfolio-live-exit {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .76rem;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(5, 18, 45, .82);
  box-shadow: 0 8px 22px rgba(3, 14, 36, .22);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.workfolio-live-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #59e5a5;
  box-shadow: 0 0 0 4px rgba(89, 229, 165, .14);
}

.workfolio-live-exit {
  cursor: pointer;
}

.workfolio-card-open {
  position: absolute;
  z-index: 6;
  right: clamp(1.05rem, 2vw, 1.8rem);
  bottom: clamp(1.05rem, 2vw, 1.8rem);
  left: clamp(1.05rem, 2vw, 1.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .9rem 1.25rem;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .42s ease .14s, transform .5s cubic-bezier(.22, .8, .24, 1) .14s;
}

.workfolio-card.is-active .workfolio-card-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.workfolio-card.is-loading .workfolio-card-open,
.workfolio-card.is-live .workfolio-card-open {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

.workfolio-card-copy {
  min-width: 0;
}

.workfolio-card-rule {
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: .72rem;
  background: var(--card-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--card-accent) 45%, transparent);
}

.workfolio-card-category {
  display: block;
  color: var(--card-accent);
  font-family: 'Roboto', sans-serif;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.workfolio-card-title {
  display: block;
  overflow: hidden;
  margin-top: .38rem;
  padding-bottom: .08em;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workfolio-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
}

.workfolio-live-trigger,
.workfolio-visit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  padding: 0 .9rem;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(3, 14, 36, .28);
  font-family: inherit;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.22, .8, .24, 1);
}

.workfolio-live-trigger {
  background: rgba(255, 255, 255, .96);
  color: var(--navy);
}

.workfolio-visit {
  background: rgba(5, 18, 45, .52);
  color: #fff;
}

.workfolio-live-trigger:hover,
.workfolio-live-trigger:focus-visible,
.workfolio-visit:hover,
.workfolio-visit:focus-visible {
  transform: translateY(-3px);
}

.workfolio-live-trigger:hover,
.workfolio-live-trigger:focus-visible {
  background: #fff;
}

.workfolio-visit:hover,
.workfolio-visit:focus-visible {
  background: rgba(5, 18, 45, .78);
}

.workfolio-note {
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: var(--muted);
  font-size: .73rem;
}

.workfolio-note strong {
  color: var(--navy);
}

.workfolio-note-line {
  flex: 1;
  width: 100%;
  max-width: 190px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

body.fa .workfolio-kicker,
body.fa .workfolio-head h3,
body.fa .workfolio-meta,
body.fa .workfolio-card-category,
body.fa .workfolio-card-title,
body.fa .workfolio-live-trigger,
body.fa .workfolio-visit,
body.fa .workfolio-live-status,
body.fa .workfolio-live-exit {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
}

body.fa .workfolio-head {
  text-align: right;
}

body.fa .workfolio-head h3 {
  font-size: clamp(2.8rem, 5.6vw, 5.6rem);
  line-height: 1.14;
  letter-spacing: 0;
}

body.fa .workfolio-head h3 em {
  font-style: normal;
}

body.fa .workfolio-card-open {
  direction: rtl;
  text-align: right;
}

body.fa .workfolio-note-line {
  background: linear-gradient(-90deg, var(--cyan), transparent);
}

@media (max-width: 1040px) {
  .workfolio-card-open {
    grid-template-columns: 1fr;
  }

  .workfolio-actions {
    justify-content: flex-start;
  }

  body.fa .workfolio-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .workfolio {
    margin-top: 4rem;
  }

  .workfolio-head h3 {
    font-size: clamp(2.75rem, 14vw, 4.2rem);
    line-height: .94;
  }

  body.fa .workfolio-head h3 {
    font-size: clamp(2.5rem, 12vw, 3.8rem);
  }

  .workfolio-accordion-wrap {
    margin-right: calc(var(--pad, 20px) * -1);
    margin-left: calc(var(--pad, 20px) * -1);
    overflow-x: auto;
    padding: .25rem var(--pad, 20px) 1.1rem;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .workfolio-accordion-wrap::-webkit-scrollbar {
    display: none;
  }

  .workfolio-meta {
    position: sticky;
    left: 0;
    width: calc(100vw - (var(--pad, 20px) * 2));
  }

  .workfolio-meta-hint {
    display: none;
  }

  .workfolio-accordion {
    width: max-content;
    height: min(150vw, 610px);
  }

  .workfolio-card {
    scroll-snap-align: center;
  }

  .workfolio-card-open {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }

  .workfolio-card-title {
    font-size: 1.42rem;
  }

  .workfolio-note {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .workfolio-meta {
    font-size: .58rem;
  }

  .workfolio-card-vertical {
    font-size: .7rem;
  }

  .workfolio-live-trigger,
  .workfolio-visit {
    min-height: 39px;
    padding: 0 .72rem;
    font-size: .56rem;
  }

  .workfolio-note-line {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workfolio-card,
  .workfolio-card-image,
  .workfolio-card-open,
  .workfolio-card-vertical,
  .workfolio-live-shell,
  .workfolio-live-frame,
  .workfolio-live-toolbar {
    transition-duration: .01ms !important;
  }

  .workfolio-live-loader {
    animation: none;
  }
}

/* Compact website links: clearly separated from the feature pills above. */
.workfolio-minimal {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3.6vw, 2.8rem);
  border: 1px solid rgba(15,44,107,.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 12%, rgba(43,184,212,.14), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,247,251,.92));
  box-shadow: 0 22px 70px rgba(15,44,107,.08);
}
.workfolio-minimal .workfolio-kicker {
  margin-bottom: .85rem;
  color: var(--cyan-deep, #14839e);
}
.workfolio-minimal .workfolio-head { display: block; max-width: 900px; }
.workfolio-minimal .workfolio-head h3 {
  max-width: 880px;
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.workfolio-minimal .workfolio-head p,
.workfolio-minimal .workfolio-meta,
.workfolio-minimal .workfolio-card-image,
.workfolio-minimal .workfolio-live-shell,
.workfolio-minimal .workfolio-live-toolbar,
.workfolio-minimal .workfolio-card-index,
.workfolio-minimal .workfolio-card-copy,
.workfolio-minimal .workfolio-live-trigger,
.workfolio-minimal .workfolio-note {
  display: none !important;
}
.workfolio-minimal .workfolio-accordion-wrap {
  margin-top: 1.75rem;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.workfolio-minimal .workfolio-accordion-wrap::before { display: none; }
.workfolio-minimal .workfolio-accordion {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  width: 100%;
  height: auto;
  min-width: 0;
  counter-reset: portfolio-link;
}
.workfolio-minimal .workfolio-card,
.workfolio-minimal .workfolio-card.is-active {
  position: relative;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(125,211,230,.24);
  border-radius: 15px;
  background: var(--navy, #0f2c6b);
  box-shadow: 0 10px 28px rgba(15,44,107,.14);
  isolation: isolate;
  transform: none;
  counter-increment: portfolio-link;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.workfolio-minimal .workfolio-card::before,
.workfolio-minimal .workfolio-card::after { display: none; }
.workfolio-minimal .workfolio-card:hover,
.workfolio-minimal .workfolio-card:focus-within {
  border-color: var(--cyan, #2bb8d4);
  background: #0a2359;
  box-shadow: 0 15px 32px rgba(15,44,107,.22);
  transform: translateY(-2px);
}
.workfolio-minimal .workfolio-card-vertical,
.workfolio-minimal .workfolio-card.is-active .workfolio-card-vertical {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2.8rem 0 1.1rem;
  transform: none;
  opacity: 1;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.workfolio-minimal .workfolio-card-vertical::before {
  content: "0" counter(portfolio-link);
  margin-right: .7rem;
  color: var(--cyan-soft, #7dd3e6);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .08em;
}
.workfolio-minimal .workfolio-card:hover .workfolio-card-vertical,
.workfolio-minimal .workfolio-card:focus-within .workfolio-card-vertical { color: #fff; }
.workfolio-minimal .workfolio-card-open,
.workfolio-minimal .workfolio-card.is-active .workfolio-card-open {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.workfolio-minimal .workfolio-actions { position: absolute; inset: 0; display: block; }
.workfolio-minimal .workfolio-visit,
.workfolio-minimal .workfolio-card.is-active .workfolio-visit {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  font-size: 0;
  opacity: 1;
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.workfolio-minimal .workfolio-visit::after {
  content: "↗";
  position: absolute;
  top: 50%;
  right: .95rem;
  color: var(--cyan-deep, #14839e);
  font-size: .8rem;
  transform: translateY(-50%);
}
.workfolio-minimal .workfolio-card:hover .workfolio-visit::after,
.workfolio-minimal .workfolio-card:focus-within .workfolio-visit::after { color: var(--cyan-soft, #7dd3e6); }
body.fa .workfolio-minimal .workfolio-card-vertical {
  padding: 0 1.1rem 0 2.8rem;
  font-family: "Shabnam", sans-serif;
}
body.fa .workfolio-minimal .workfolio-card-vertical::before {
  margin-right: 0;
  margin-left: .7rem;
  direction: ltr;
}
body.fa .workfolio-minimal .workfolio-visit::after { right: auto; left: .95rem; }

/* source: assets/website-projects-v128.css */
/* Shared website portfolio: four-column Home grid and compact Web Design hero. */
:root {
  --website-project-gap: .8rem;
  --website-project-radius: 1rem;
  --website-project-panel-radius: 1.5rem;
  --website-project-border: color-mix(in srgb, var(--cyan) 22%, transparent);
  --website-project-shadow: 0 .6rem 1.4rem color-mix(in srgb, var(--navy) 10%, transparent);
}

.website-projects { min-width: 0; }
.website-projects-head { margin-bottom: 1.2rem; }
.website-projects-kicker {
  margin-bottom: .6rem;
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.website-projects-title {
  margin: 0;
  color: var(--navy);
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.website-projects-title em { color: var(--cyan-deep); }
.website-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--website-project-gap);
}
.website-project-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: .9rem .7rem;
  min-width: 0;
  min-height: 112px;
  padding: 1rem 1.15rem;
  border: 1px solid var(--website-project-border);
  border-radius: var(--website-project-radius);
  background: linear-gradient(145deg, var(--navy), var(--navy-deep));
  color: var(--paper);
  text-decoration: none;
  box-shadow: var(--website-project-shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.website-project-link:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
}
.website-project-link:focus-visible {
  outline: 3px solid var(--cyan-deep);
  outline-offset: 4px;
}
.website-project-number {
  grid-column: 1;
  grid-row: 1;
  color: var(--cyan-soft);
  font-size: .7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.website-project-name {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  min-width: 0;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(.92rem, 1.15vw, 1.05rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: start;
  text-wrap: balance;
  unicode-bidi: isolate;
}
.website-project-visit {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--cyan-soft);
  font-size: .68rem;
  white-space: nowrap;
}
.website-project-arrow { font-size: 1.1rem; line-height: 1; }
.website-projects--home {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--website-project-border);
  border-radius: var(--website-project-panel-radius);
  background: linear-gradient(135deg, var(--paper), var(--accent-bg));
}
.web-design-hero .service-hero-grid { align-items: start; }
.web-design-hero h1 { font-size: clamp(2rem, 4.3vw, 3.35rem); }
.web-design-hero .eyebrow { margin-bottom: .9rem; }
.website-projects--hero { margin: 1.4rem 0; }
.website-projects--hero .website-projects-head { margin-bottom: .75rem; }
.website-projects--hero .website-projects-title {
  font-size: 1.05rem;
  line-height: 1.5;
  letter-spacing: 0;
}
.website-projects--hero .website-projects-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.website-projects--hero .website-project-link {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: .65rem;
  min-height: 62px;
  padding: .75rem .85rem;
  border-radius: .85rem;
}
.website-projects--hero .website-project-name {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: .88rem;
}
.website-projects--hero .website-project-visit { grid-column: 3; }
.website-projects--hero .website-project-visit .lang-en,
.website-projects--hero .website-project-visit .lang-fa { display: none; }
.web-design-hero .lead { margin-top: 1.4rem; font-size: 1rem; }
.web-design-hero .cta-row { margin-top: 1.5rem; }
body.fa .website-projects-kicker,
body.fa .website-projects-title,
body.fa .website-project-number,
body.fa .website-project-visit { font-family: 'Shabnam', sans-serif; letter-spacing: 0; }
body.fa .website-projects-title { line-height: 1.5; }
body.fa .website-project-name { text-align: end; }
body.fa .website-projects--hero .website-project-visit .lang-fa { display: none; }

@media (max-width: 980px) {
  .website-projects--home .website-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .website-projects--home { padding: 1rem; }
  .website-projects-grid { gap: .65rem; }
  .website-project-link { min-height: 108px; padding: .85rem; }
  .website-projects--hero { margin-top: 1.1rem; }
  .website-projects--hero .website-project-link { min-height: 66px; gap: .45rem; padding: .65rem; }
  .website-projects--hero .website-project-name { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .website-project-link { transition: none; }
  .website-project-link:hover { transform: none; }
}

/* Approved selection: Home uses outlined links; Web Design uses the numbered list. */
:root {
  --website-project-line:color-mix(in srgb,var(--navy) 17%,transparent);
  --website-project-muted:color-mix(in srgb,var(--navy) 68%,var(--paper));
  --website-project-wash:color-mix(in srgb,var(--cyan) 5%,var(--paper));
}

.website-projects-approved .web-design-hero h1 {
  font-size:clamp(2.5rem,6vw,4rem);
}

.website-projects-approved .web-design-hero .lead {
  font-size:1.08rem;
  margin-top:1.4rem;
}

.website-projects-approved .web-design-hero .cta-row {
  margin-top:1.35rem;
  gap:.7rem;
}

.website-projects-approved .web-design-hero .btn {
  padding:.65rem 1.1rem;
  font-size:.86rem;
}

.website-projects-approved .web-design-hero .service-hero-grid {
  align-items:center;
}

.website-projects-approved .website-projects {
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:none;
  margin:1.8rem 0 0;
}

.website-projects-approved .website-projects-head {
  margin-bottom:.65rem;
}

.website-projects-approved .website-projects-kicker {
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.1em;
  color:var(--website-project-muted);
  margin-bottom:.6rem;
}

.website-projects-approved .website-projects-title {
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.025em;
  line-height:1.7;
  color:var(--website-project-muted);
}

.website-projects-approved .website-projects--home .website-projects-title {
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:400;
  line-height:1.25;
  color:var(--navy);
  max-width:700px;
  margin-bottom:1.5rem;
}

.website-projects-approved .website-projects-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem 1.1rem;
}

.website-projects-approved .website-project-link {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto;
  align-items:center;
  min-height:44px;
  gap:.4rem;
  padding:.45rem 0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--navy);
  transform:none;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}

.website-projects-approved .website-project-number {
  display:none;
}

.website-projects-approved .website-project-name {
  grid-column:1;
  grid-row:1;
  align-self:center;
  font-size:.82rem;
  font-weight:400;
  line-height:1.5;
  text-wrap:pretty;
}

.website-projects-approved .website-project-visit {
  grid-column:2;
  grid-row:1;
  color:var(--cyan-deep);
  gap:0;
}

.website-projects-approved .website-project-visit .lang-en,.website-projects-approved .website-project-visit .lang-fa {
  display:none;
}

.website-projects-approved .website-project-arrow {
  font-size:.87rem;
}

.website-projects-approved .website-project-link:hover {
  color:var(--cyan-deep);
  transform:none;
}

.website-projects-approved .website-project-link:focus-visible {
  outline:2px solid var(--cyan-deep);
  outline-offset:4px;
}

body.fa.website-projects-approved .website-projects-title,body.fa.website-projects-approved .website-projects-kicker {
  letter-spacing:0;
}

body.website-projects-approved--home .website-projects-grid {
  gap:.55rem;
}

body.website-projects-approved--home .website-project-link {
  padding:.5rem .65rem;
  border:1px solid var(--website-project-line);
  border-radius:8px;
  background:color-mix(in srgb,var(--paper) 65%,transparent);
}

body.website-projects-approved--home .website-project-link:hover {
  border-color:var(--cyan-deep);
  background:var(--website-project-wash);
}

body.website-projects-approved--web .website-projects--hero .website-projects-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

body.website-projects-approved--web .website-projects-grid {
  gap:0 1.4rem;
}

body.website-projects-approved--web .website-project-link {
  grid-template-columns:1.25rem minmax(0,1fr) auto;
  border-bottom:1px solid var(--website-project-line);
  gap:.6rem;
  min-height:42px;
}

body.website-projects-approved--web .website-project-number {
  display:block;
  grid-column:1;
  grid-row:1;
  font-size:.61rem;
  font-weight:400;
  color:var(--website-project-muted);
}

body.website-projects-approved--web .website-project-name {
  grid-column:2;
}

body.website-projects-approved--web .website-project-visit {
  grid-column:3;
}

@media(max-width:980px) {
.website-projects-approved .website-projects-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(max-width:520px) {
.website-projects-approved .website-projects-grid {
  gap:.25rem .8rem;
}

.website-projects-approved .website-project-name {
  font-size:.8rem;
}

.website-projects-approved .website-project-link {
  min-height:44px;
}

.website-projects-approved .web-design-hero .btn {
  padding:.6rem .9rem;
  font-size:.82rem;
}

.website-projects-approved .web-design-hero .lead {
  font-size:1rem;
}

.website-projects-approved .website-projects {
  margin-top:1.5rem;
}

body.website-projects-approved--web .website-projects-grid {
  column-gap:.8rem;
}

body.website-projects-approved--web .website-project-link {
  gap:.35rem;
  grid-template-columns:1rem minmax(0,1fr) auto;
}
}

@media(prefers-reduced-motion:reduce) {
.website-projects-approved .website-project-link {
  transition:none;
}
}

/* source: assets/portfolio-library-v128.css */
/* Tehranto portfolio library v126 — original-quality video playback */
.tp-library-page,
.tp-library-modal {
  --tp-navy: var(--navy, #0f2c6b);
  --tp-navy-deep: var(--navy-deep, #0a1f4d);
  --tp-cyan: var(--cyan, #2bb8d4);
  --tp-cyan-soft: var(--cyan-soft, #7dd3e6);
  --tp-cyan-deep: var(--cyan-deep, #14839e);
  --tp-paper: var(--paper, #fbfaf7);
  --tp-paper-2: var(--paper-warm, var(--bg-soft, #f2efe8));
  --tp-ink: var(--ink, #17233a);
  --tp-muted: var(--muted, #7d8798);
  --tp-line: var(--line, rgba(15, 44, 107, .13));
}
.tp-portfolio .lang-fa,
.tp-library-page .lang-fa,
.tp-library-modal .lang-fa {
  display: none !important;
}
body:not(.fa) .tp-portfolio .lang-en,
body:not(.fa) .tp-library-page .lang-en,
body:not(.fa) .tp-library-modal .lang-en {
  display: inline !important;
}
body:not(.fa) .tp-portfolio .lang-fa,
body:not(.fa) .tp-library-page .lang-fa,
body:not(.fa) .tp-library-modal .lang-fa,
body.fa .tp-portfolio .lang-en,
body.fa .tp-library-page .lang-en,
body.fa .tp-library-modal .lang-en {
  display: none !important;
}
body.fa .tp-portfolio .lang-fa,
body.fa .tp-library-page .lang-fa,
body.fa .tp-library-modal .lang-fa {
  display: inline !important;
}
.tp-portfolio {
  --tp-navy: var(--navy, #0f2c6b);
  --tp-navy-deep: var(--navy-deep, #0a1f4d);
  --tp-cyan: var(--cyan, #2bb8d4);
  --tp-cyan-soft: var(--cyan-soft, #7dd3e6);
  --tp-cyan-deep: var(--cyan-deep, #14839e);
  --tp-paper: var(--paper, #fbfaf7);
  --tp-paper-2: var(--paper-warm, var(--surface-alt, #f2efe8));
  --tp-ink: var(--ink, #17233a);
  --tp-muted: var(--muted, #7d8798);
  --tp-line: var(--line, rgba(15, 44, 107, .13));
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: var(--tp-navy);
  color: #fff;
}
.tp-portfolio *,
.tp-library-modal * { box-sizing: border-box; }
.tp-portfolio-container {
  width: min(1280px, calc(100% - 4rem));
  margin: 0 auto;
}
.tp-portfolio-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
.tp-compact-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 390px);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  margin-bottom: 1.65rem;
}
.tp-portfolio--compact {
  padding: clamp(3.5rem, 6vw, 5.2rem) 0;
}
.tp-portfolio--compact h2 {
  font-size: clamp(1.9rem, 3.5vw, 3.35rem);
  line-height: 1.02;
}
.tp-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.1rem;
  color: var(--tp-cyan-soft);
  font-family: "Roboto", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tp-kicker::before { content: ""; width: 30px; height: 1px; background: currentColor; }
body.fa .tp-kicker { font-family: "Shabnam", sans-serif; letter-spacing: 0; font-size: .84rem; }
.tp-portfolio h2 {
  max-width: 860px;
  margin: 0;
  color: #fff;
  font-family: "Google Sans", sans-serif;
  font-size: clamp(2.15rem, 4.8vw, 4.7rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
}
.tp-portfolio h2 em { color: var(--tp-cyan-soft); font-style: normal; }
body.fa .tp-portfolio h2 {
  font-family: "Shabnam", sans-serif;
  letter-spacing: -.025em;
  line-height: 1.22;
}
.tp-intro {
  max-width: 44ch;
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: .96rem;
  line-height: 1.75;
}

.tp-tier-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
}
.tp-tier {
  min-width: 0;
  min-height: 108px;
  padding: 1.15rem 1.25rem;
  border: 0;
  border-inline-end: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: #fff;
  text-align: start;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1rem;
  align-content: center;
  transition: background .28s ease, transform .28s ease;
}
.tp-tier:last-child { border-inline-end: 0; }
.tp-tier:hover, .tp-tier:focus-visible {
  z-index: 1;
  outline: none;
  background: var(--tp-cyan);
  color: var(--tp-navy-deep);
}
.tp-tier-name { font-family: "Google Sans", sans-serif; font-size: 1.05rem; font-weight: 600; }
body.fa .tp-tier-name { font-family: "Shabnam", sans-serif; }
.tp-tier-price { font: 600 1.05rem/1 "Google Sans", sans-serif; direction: ltr; }
.tp-tier-meta { grid-column: 1 / -1; color: rgba(255,255,255,.58); font-size: .7rem; }
.tp-tier:hover .tp-tier-meta { color: rgba(10,31,77,.68); }
.tp-samples-btn {
  width: 100%;
  margin-bottom: .55rem;
  cursor: pointer;
}
.tp-card-samples {
  width: 100%;
  min-height: 48px;
  margin-top: .35rem;
  padding: .62rem .85rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  color: var(--cyan-deep);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.price-card .tp-samples-btn,
.price-card .btn {
  min-height: 48px;
  box-sizing: border-box;
  line-height: 1.2;
}
.tp-card-samples:hover,
.tp-card-samples:focus-visible {
  outline: none;
  border-color: var(--cyan-deep);
  background: var(--cyan-deep);
  color: #fff;
}
.pcard.t-signature .tp-card-samples {
  border-color: rgba(125,211,230,.55);
  background: rgba(255,255,255,.08);
  color: var(--cyan-soft);
}
.pcard.t-signature .tp-card-samples:hover,
.pcard.t-signature .tp-card-samples:focus-visible {
  background: var(--cyan);
  color: var(--navy-deep);
}
.tp-photo-sample-actions,
.tp-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.15rem;
}
.evt-base .tp-event-actions {
  margin-top: .85rem;
}
.tp-photo-sample-btn,
.tp-event-sample-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .72rem 1.05rem;
  border: 1px solid var(--cyan, #2bb8d4);
  border-radius: 999px;
  background: var(--cyan, #2bb8d4);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.tp-photo-sample-btn:hover,
.tp-photo-sample-btn:focus-visible,
.tp-event-sample-btn:hover,
.tp-event-sample-btn:focus-visible {
  outline: none;
  border-color: var(--cyan-deep, #14839e);
  background: var(--cyan-deep, #14839e);
  color: #fff;
  transform: translateY(-1px);
}
.tp-photo-sample-btn.is-secondary,
.tp-event-sample-btn.is-secondary {
  background: transparent;
  color: var(--cyan-deep, #14839e);
}
.tp-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.8rem 0 .75rem;
  color: rgba(255,255,255,.52);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.fa .tp-section-label { letter-spacing: 0; }

.tp-carousel {
  position: relative;
  min-height: 238px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(43,184,212,.20), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.tp-carousel-track {
  height: 214px;
  display: flex;
  gap: 9px;
}
.tp-industry {
  position: relative;
  flex: 1 1 0;
  min-width: 54px;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(125,211,230,.12), transparent 54%),
    rgba(255,255,255,.035);
  color: #fff;
  cursor: pointer;
  text-align: start;
  transition: flex .75s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease;
}
.tp-industry-art,
.tp-industry-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tp-industry-art {
  object-fit: cover;
  opacity: 1;
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.08);
  transition: opacity .55s ease, filter .55s ease, transform 1s cubic-bezier(.16,1,.3,1);
}
.tp-industry-wash {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,28,74,.16), rgba(8,28,74,.5)),
    linear-gradient(120deg, rgba(43,184,212,.08), transparent 58%);
}
.tp-industry.is-active .tp-industry-art {
  opacity: 1;
  filter: saturate(.96) contrast(1.04);
  transform: scale(1);
}
.tp-industry::before,
.tp-industry::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(125,211,230,.18);
  transition: transform .75s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  z-index: 2;
}
.tp-industry::before { width: 86px; height: 86px; top: -22px; right: -22px; transform: rotate(18deg); }
.tp-industry::after { width: 48px; height: 48px; bottom: 18px; left: 22px; transform: rotate(-12deg); opacity: .35; }
.tp-industry.is-active {
  flex: 4.25 1 0;
  border-color: rgba(125,211,230,.46);
  background:
    radial-gradient(circle at 74% 28%, rgba(125,211,230,.22), transparent 30%),
    linear-gradient(135deg, rgba(43,184,212,.23), rgba(255,255,255,.045));
}
.tp-industry.is-active::before { transform: rotate(35deg) scale(1.35); }
.tp-industry-copy {
  position: absolute;
  inset: auto 1rem 1rem;
  min-width: 230px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .32s ease .12s, transform .55s cubic-bezier(.16,1,.3,1) .08s;
  z-index: 3;
}
.tp-industry.is-active .tp-industry-copy { opacity: 1; transform: none; }
.tp-industry-title {
  display: block;
  max-width: 18ch;
  margin-bottom: .45rem;
  font-family: "Google Sans", sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.04;
}
body.fa .tp-industry-title { font-family: "Shabnam", sans-serif; line-height: 1.25; }
.tp-industry-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--tp-cyan-soft);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tp-industry-meta svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}
.tp-industry-meta .tp-play-icon,
.tp-industry-meta .tp-play-icon path {
  color: #fff;
  fill: #fff;
}
body.fa .tp-industry-meta { letter-spacing: 0; }
.tp-industry-rail {
  position: absolute;
  inset: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(255,255,255,.72);
  font: 600 .69rem/1 "Roboto", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .22s ease;
  z-index: 3;
}
body.fa .tp-industry-rail { font-family: "Shabnam", sans-serif; letter-spacing: 0; }
.tp-industry.is-active .tp-industry-rail { opacity: 0; }
.tp-industry-index {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  color: var(--tp-cyan-soft);
  font: 500 .64rem/1 "Roboto", sans-serif;
  z-index: 3;
}
.tp-carousel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
}
.tp-progress {
  position: relative;
  flex: 1;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
.tp-progress::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255,255,255,.19);
  transform: translateY(-50%);
}
.tp-progress span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 10%;
  height: 2px;
  border-radius: 999px;
  background: var(--tp-cyan-soft);
  transform: translateY(-50%);
  transition: width .55s cubic-bezier(.16,1,.3,1);
}
.tp-progress span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--tp-navy);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(125,211,230,.58), 0 4px 14px rgba(0,0,0,.22);
  opacity: .9;
  transform: translateY(-50%);
  transition: width .2s ease, height .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.tp-progress:hover span::after,
.tp-progress:focus-visible span::after,
.tp-progress.is-scrubbing span::after {
  width: 18px;
  height: 18px;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(125,211,230,.22), 0 5px 18px rgba(0,0,0,.3);
}
.tp-progress:focus-visible::before { background: rgba(255,255,255,.32); }
body.fa .tp-progress span { right: 0; left: auto; }
body.fa .tp-progress span::after { right: auto; left: -7px; }
.tp-all-link {
  color: var(--tp-cyan-soft);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 600;
}
.tp-all-link:hover { color: #fff; }

@media (min-width: 681px) {
  .tp-carousel-track {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
  }
  .tp-carousel-track .tp-industry { cursor: grab; }
  .tp-carousel-track.is-dragging,
  .tp-carousel-track.is-dragging .tp-industry { cursor: grabbing; }
  .tp-carousel-track.is-dragging .tp-industry { pointer-events: none; }
}

.tp-library-page {
  padding: clamp(9rem, 14vw, 12rem) 0 0;
  background: var(--tp-paper, #fbfaf7);
  color: var(--tp-ink, #17233a);
}
.tp-library-hero { padding-bottom: clamp(4rem, 8vw, 7rem); }
.tp-library-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: clamp(2.5rem, 8vw, 7rem);
  align-items: end;
}
.tp-library-page h1 {
  max-width: 960px;
  margin: 0 0 1.5rem;
  color: var(--tp-navy);
  font-family: "Google Sans", sans-serif;
  font-size: clamp(3.6rem, 8vw, 8rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .88;
}
.tp-library-page h1 em { display: block; color: var(--tp-cyan-deep); font-style: normal; }
body.fa .tp-library-page h1 { font-family: "Shabnam", sans-serif; letter-spacing: -.04em; line-height: 1.12; }
.tp-library-hero-copy > p,
.tp-library-grid-head > p { max-width: 42ch; margin: 0; color: var(--tp-muted); font-size: .92rem; line-height: 1.8; }
.tp-library-count {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--tp-line);
  color: var(--tp-navy);
  font: 700 2.2rem/1 "Google Sans", sans-serif;
}
.tp-library-count small { color: var(--tp-muted); font: 500 .7rem/1.2 "Roboto", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
body.fa .tp-library-count,
body.fa .tp-library-count small { font-family: "Shabnam", sans-serif; letter-spacing: 0; }
.tp-library-lead { max-width: 640px; color: var(--tp-muted); font-size: 1.05rem; line-height: 1.8; }
.tp-library-stat { padding-top: 1.2rem; border-top: 1px solid var(--tp-line); color: var(--tp-muted); font-size: .8rem; line-height: 1.7; }
.tp-library-stat strong { display: block; color: var(--tp-navy); font: 600 2.1rem/1 "Google Sans", sans-serif; margin-bottom: .5rem; }
.tp-library-page .tp-portfolio { padding-top: 5.5rem; }
.tp-library-grid-section { padding: clamp(4.5rem, 8vw, 7rem) 0; background: var(--tp-paper-2); }
.tp-library-grid-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: end;
  gap: clamp(3rem, 9vw, 8rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.tp-library-grid-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--tp-navy);
  font-family: "Google Sans", sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 4.5rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}
.tp-library-grid-head > p { justify-self: end; text-align: left; }
body.fa .tp-library-grid-head > p { justify-self: start; text-align: right; }
body.fa .tp-library-grid-head h2 { font-family: "Shabnam", sans-serif; line-height: 1.25; }
.tp-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tp-line); }
.tp-category {
  min-height: 190px;
  padding: 1.5rem;
  border: 0;
  border-inline-end: 1px solid var(--tp-line);
  border-bottom: 1px solid var(--tp-line);
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tp-category:nth-child(3n) { border-inline-end: 0; }
.tp-category.is-tier { background: rgba(43,184,212,.055); }
.tp-category.is-tier .tp-type-icon { border-color: rgba(43,184,212,.34); background: rgba(43,184,212,.1); }
.tp-category:hover,
.tp-category:focus-visible {
  position: relative;
  z-index: 1;
  outline: 0;
  background: #168ca6;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 58px rgba(22,140,166,.24);
}
.tp-category:hover .tp-type-icon,
.tp-category:focus-visible .tp-type-icon {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.13);
  color: #fff;
}
.tp-category:hover .tp-category-count,
.tp-category:hover h3,
.tp-category:hover .tp-category-kind,
.tp-category:focus-visible .tp-category-count,
.tp-category:focus-visible h3,
.tp-category:focus-visible .tp-category-kind { color: #fff; }
.tp-category-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; }
.tp-type-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--tp-line); border-radius: 50%; color: var(--tp-cyan-deep); }
.tp-type-icon svg { width: 17px; height: 17px; }
.tp-type-icon .tp-play-icon { width: 21px; height: 21px; color: var(--tp-cyan-deep); }
.tp-category:hover .tp-play-icon,
.tp-category:focus-visible .tp-play-icon { color: #fff; }
.tp-category-count { color: var(--tp-muted); font-size: .7rem; }
.tp-category h3 { margin: 0 0 .45rem; color: var(--tp-navy); font-family: "Google Sans", sans-serif; font-size: 1.35rem; }
body.fa .tp-category h3 { font-family: "Shabnam", sans-serif; }
.tp-category-kind { color: var(--tp-cyan-deep); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
body.fa .tp-category-kind { letter-spacing: 0; }

.tp-library-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  padding: .75rem;
  background: rgba(4,14,36,.88);
  backdrop-filter: blur(12px);
}
.tp-library-modal.is-open { display: grid; }
body.tp-modal-open { overflow: hidden !important; }
.tp-modal-dialog {
  position: relative;
  width: min(1440px, 100%);
  height: min(900px, calc(100vh - 1.5rem));
  height: min(900px, calc(100dvh - 1.5rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 360px);
  direction: ltr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: var(--tp-paper, #fbfaf7);
  box-shadow: 0 34px 110px rgba(0,0,0,.48);
}
.tp-modal-stage {
  padding: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: #000;
}
.tp-stage-head {
  display: none;
}
body.fa .tp-stage-head { direction: rtl; }
.tp-stage-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .92rem/1.2 "Google Sans", sans-serif; }
body.fa .tp-stage-title { font-family: "Shabnam", sans-serif; }
.tp-stage-format { color: var(--tp-cyan-soft); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tp-stage-area { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: .5rem .75rem; }
.tp-media-frame {
  position: relative;
  width: min(484px, calc(100% - 1.5rem));
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
  /* Keep the embedded viewport stable while switching or rotating media. */
  transition: none;
}
.tp-media-frame.is-landscape,
.tp-media-frame.is-image-landscape {
  width: min(100%, 1050px);
  height: auto;
  aspect-ratio: 16 / 9;
}
.tp-media-frame.is-square { width: min(100%, 760px); height: auto; aspect-ratio: 1; }
.tp-media-frame.is-drive-preview {
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.tp-media-frame.is-drive-preview > iframe {
  transform-origin: top left;
  max-width: none;
  max-height: none;
}
.tp-media-frame iframe,
.tp-media-frame > video,
.tp-media-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.tp-modal-sidebar { min-height: 0; display: flex; flex-direction: column; direction: ltr; background: var(--tp-paper, #fbfaf7); }
body.fa .tp-modal-sidebar { direction: rtl; }
.tp-sidebar-head { padding: 1.15rem 1.15rem .9rem; border-bottom: 1px solid var(--tp-line); }
.tp-sidebar-head h3 { margin: 0 2.4rem .35rem 0; color: var(--tp-navy); font-family: "Google Sans", sans-serif; font-size: 1.25rem; }
body.fa .tp-sidebar-head h3 { margin: 0 0 .35rem 2.4rem; font-family: "Shabnam", sans-serif; }
.tp-sidebar-head p { margin: 0; color: var(--tp-muted); font-size: .7rem; }
.tp-modal-close {
  position: absolute;
  z-index: 3;
  top: .85rem;
  right: .85rem;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tp-line);
  border-radius: 50%;
  background: #fff;
  color: var(--tp-navy);
  font-size: 1.25rem;
  cursor: pointer;
}
.tp-media-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .72rem;
  scrollbar-width: thin;
  scrollbar-color: var(--tp-cyan) var(--tp-paper-2);
}
.tp-media-item {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  margin-bottom: .62rem;
  padding: .48rem;
  border: 1px solid var(--tp-line);
  border-radius: 12px;
  background: #fff;
  color: var(--tp-ink);
  text-align: start;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tp-media-item:hover,
.tp-media-item.is-active { border-color: var(--tp-cyan); background: rgba(43,184,212,.07); transform: translateX(-2px); }
body.fa .tp-media-item:hover,
body.fa .tp-media-item.is-active { transform: translateX(2px); }
.pcard[data-open-tp] {
  cursor: pointer;
}
.pcard[data-open-tp]:focus-visible {
  outline: 3px solid var(--tp-cyan);
  outline-offset: 5px;
}
.tp-thumb {
  position: relative;
  width: 86px;
  height: 62px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--tp-navy), var(--tp-cyan-deep));
}
.tp-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tp-media-item.is-missing-thumb .tp-thumb {
  background:
    radial-gradient(circle at 30% 25%, rgba(125,211,230,.34), transparent 42%),
    linear-gradient(145deg, #164d7b, #082a5c);
}
.tp-media-item.is-missing-thumb .tp-thumb img { display: none; }
.tp-thumb-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.tp-thumb-icon span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(6,20,47,.72); backdrop-filter: blur(4px); }
.tp-thumb-icon svg { width: 15px; height: 15px; }
.tp-item-copy { min-width: 0; }
.tp-item-copy strong { display: block; margin-bottom: .3rem; overflow: hidden; color: var(--tp-navy); font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.tp-item-meta { display: flex; align-items: center; gap: .42rem; color: var(--tp-muted); font-size: .62rem; }
.tp-format-pill { padding: .18rem .38rem; border-radius: 999px; background: var(--tp-paper-2); color: var(--tp-cyan-deep); }

@media (max-width: 980px) {
  .tp-portfolio-head, .tp-compact-head, .tp-library-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tp-tier-strip { grid-template-columns: repeat(2, 1fr); }
  .tp-tier:nth-child(2) { border-inline-end: 0; }
  .tp-tier:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .tp-industry { min-width: 46px; padding: .7rem; }
  .tp-carousel-track { gap: 6px; }
  .tp-modal-dialog { grid-template-columns: minmax(0, 1fr) 300px; }
  .tp-category-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-category:nth-child(3n) { border-inline-end: 1px solid var(--tp-line); }
  .tp-category:nth-child(2n) { border-inline-end: 0; }
}

@media (max-width: 680px) {
  .tp-portfolio-container { width: min(100% - 2rem, 1280px); }
  .tp-tier-strip { grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .tp-tier { min-height: 96px; padding: .9rem; }
  .tp-tier-name, .tp-tier-price { font-size: .88rem; }
  .tp-section-label span:last-child { display: none; }
  .tp-carousel { min-height: 218px; padding: 8px; border-radius: 18px; }
  .tp-carousel {
    overflow: hidden;
    touch-action: pan-x;
  }
  .tp-carousel-track {
    height: 200px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .tp-carousel-track::-webkit-scrollbar { display: none; }
  .tp-carousel-track::before,
  .tp-carousel-track::after {
    content: "";
    flex: 0 0 max(0px, calc(50vw - 129px));
  }
  .tp-industry,
  .tp-industry.is-near {
    display: block;
    flex: 0 0 58px;
    min-width: 58px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: flex .42s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease;
  }
  .tp-industry.is-active {
    display: block;
    flex: 0 0 min(70vw, 258px);
  }
  .tp-library-page { padding-top: 7.5rem; }
  .tp-library-page h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .tp-library-grid-head { grid-template-columns: 1fr; align-items: start; gap: 1.4rem; }
  .tp-library-grid-head > p,
  body.fa .tp-library-grid-head > p { justify-self: start; text-align: inherit; }
  .tp-category-grid { grid-template-columns: 1fr; }
  .tp-category, .tp-category:nth-child(2n), .tp-category:nth-child(3n) { border-inline-end: 0; }
  .tp-library-modal { padding: 0; align-items: stretch; }
  .tp-modal-dialog {
    width: 100%;
    height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 69dvh) minmax(0, 31dvh);
    border: 0;
    border-radius: 0;
  }
  .tp-stage-area { padding: .35rem; }
  .tp-modal-sidebar { min-height: 0; }
  .tp-media-frame {
    width: auto;
    height: min(680px, calc(69dvh - .7rem));
    max-width: 100%;
    max-height: 100%;
  }
  .tp-media-frame.is-landscape, .tp-media-frame.is-image-landscape { width: 100%; }
  .tp-sidebar-head { padding: .75rem 1rem .6rem; }
  .tp-sidebar-head h3 { margin-bottom: .2rem; font-size: 1rem; }
  .tp-media-list { padding: .55rem; }
  .tp-media-item { min-height: 64px; grid-template-columns: 74px minmax(0,1fr); margin-bottom: .45rem; }
  .tp-thumb { width: 74px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-industry,
  .tp-industry-copy,
  .tp-media-frame,
  .tp-progress span { transition: none !important; }
}

/* source: assets/photo-orbit-v134.css */
/* Shared Tehranto photography orbit v120 */
/*
 * Keep the full-bleed orbit visual without letting its off-screen cards widen
 * the document. `body { overflow-x: hidden; }` alone is not enough on iOS
 * Safari because the root viewport can still be horizontally panned.
 */
html,
body {
  max-width: 100%;
  overscroll-behavior-x: none;
}

html {
  overflow-x: clip;
}

.tp-photo-orbit {
  --tp-orbit-navy: var(--navy, #0f2c6b);
  --tp-orbit-cyan: var(--cyan, #2bb8d4);
  --tp-orbit-cyan-deep: var(--cyan-deep, #14839e);
  --tp-orbit-muted: var(--muted, #66738f);
  --tp-orbit-line: var(--line, rgba(15, 44, 107, .14));
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(3.5rem, 7vw, 7rem);
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  background: transparent;
  scroll-margin-top: 5rem;
}

.tp-photo-orbit-inner {
  width: min(calc(100% - 3rem), 1280px);
  margin-inline: auto;
}

.tp-photo-orbit-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .72fr);
  align-items: end;
  gap: clamp(2.5rem, 7vw, 8rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.tp-photo-orbit-kicker {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.3rem;
  color: var(--tp-orbit-cyan-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.tp-photo-orbit-kicker::before {
  width: 2.8rem;
  height: 1px;
  content: "";
  background: currentColor;
}

.tp-photo-orbit-heading h2 {
  margin: 0;
  color: var(--tp-orbit-navy);
  font-size: clamp(3rem, 5.5vw, 5.7rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .96;
}

.tp-photo-orbit-heading h2 em {
  color: var(--tp-orbit-cyan-deep);
  font-weight: 500;
}

.tp-photo-orbit-description {
  min-width: 0;
}

.tp-photo-orbit-description > p {
  max-width: 36rem;
  margin: 0;
  color: var(--tp-orbit-muted);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.65;
}

.tp-photo-orbit-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.45rem;
}

.tp-photo-orbit-filters {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  padding: .3rem;
  border: 1px solid var(--tp-orbit-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 30px rgba(15, 44, 107, .05);
}

.tp-photo-orbit-filters button {
  min-height: 34px;
  padding: .5rem .78rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tp-orbit-muted);
  cursor: pointer;
  font: inherit;
  font-size: .69rem;
  font-weight: 650;
  white-space: nowrap;
}

.tp-photo-orbit-filters button:hover,
.tp-photo-orbit-filters button:focus-visible {
  outline: none;
  color: var(--tp-orbit-cyan-deep);
}

.tp-photo-orbit-filters button.is-active {
  background: var(--tp-orbit-navy);
  color: #fff;
}

.tp-photo-orbit-cue {
  min-height: 44px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem;
  border: 1px solid var(--tp-orbit-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--tp-orbit-navy);
  font-size: .67rem;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(15, 44, 107, .05);
  backdrop-filter: blur(12px);
}

.tp-photo-orbit-cue > span:first-child {
  color: var(--tp-orbit-cyan-deep);
  font-size: 1rem;
}

.tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-mobile { display: none !important; }

.tp-photo-sample-btn[data-photo-orbit-jump] { text-decoration: none; }

.tp-photo-orbit-frame {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior-x: none;
  border: 0;
  background: transparent;
}

.tp-photo-orbit-viewport {
  position: relative;
  width: 100%;
  height: clamp(31rem, 42vw, 38rem);
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  border: 0;
  background: transparent;
  cursor: grab;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
}

@supports not (overflow: clip) {
  html,
  .tp-photo-orbit,
  .tp-photo-orbit-frame,
  .tp-photo-orbit-viewport {
    overflow-x: hidden;
  }
}

.tp-photo-orbit-viewport.is-dragging { cursor: grabbing; }

.tp-photo-orbit-viewport:focus-visible {
  outline: 3px solid var(--tp-orbit-cyan);
  outline-offset: -3px;
}

.tp-photo-orbit-wheel {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.tp-photo-orbit-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 136px;
  height: 170px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: clamp(1rem, 1.7vw, 1.4rem);
  background: rgba(226, 239, 250, .35);
  box-shadow: 0 20px 50px rgba(15, 44, 107, .23);
  cursor: inherit;
  transform-origin: center;
  will-change: transform, opacity, filter;
  animation: tp-photo-orbit-arrive .42s cubic-bezier(.2, .8, .2, 1) both;
}

.tp-photo-orbit-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.tp-photo-orbit-card.is-image-ready img { opacity: 1; }

.tp-photo-orbit-card.is-food-product {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tp-photo-orbit-card.is-food-product img {
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(15, 44, 107, .18));
}

.tp-photo-orbit-card:focus-visible {
  outline: 3px solid var(--tp-orbit-cyan);
  outline-offset: 3px;
}

@keyframes tp-photo-orbit-arrive {
  from { opacity: 0; }
}

/* Shared black full-screen photography viewer. */
.tp-photo-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #000;
  color: #fff;
}

.tp-photo-lightbox::backdrop {
  background: #000;
  backdrop-filter: none;
}

.tp-photo-lightbox-media {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 8vw, 7rem) clamp(4.5rem, 10vw, 10rem) 4.6rem;
  background: #000;
}

.tp-photo-lightbox-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}

.tp-photo-lightbox-close,
.tp-photo-lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(10, 31, 77, .8);
  color: #fff;
  cursor: pointer;
  font: inherit;
  backdrop-filter: blur(12px);
}

.tp-photo-lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
  width: 4rem;
  height: 4rem;
  border-width: 2px;
  font-size: 2.4rem;
  line-height: 1;
}

.tp-photo-lightbox-nav {
  top: 50%;
  width: 3.7rem;
  height: 3.7rem;
  font-size: 1.35rem;
  transform: translateY(-50%);
}

.tp-photo-lightbox-nav.is-prev { left: 1.5rem; }
.tp-photo-lightbox-nav.is-next { right: 1.5rem; }

.tp-photo-lightbox-close:hover,
.tp-photo-lightbox-close:focus-visible,
.tp-photo-lightbox-nav:hover,
.tp-photo-lightbox-nav:focus-visible {
  outline: none;
  border-color: var(--tp-orbit-cyan, #2bb8d4);
  background: rgba(20, 131, 158, .86);
}

.tp-photo-lightbox-label {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: #000;
  color: rgba(255, 255, 255, .72);
  font-size: .76rem;
}

body.tp-photo-lightbox-open { overflow: hidden; }

@media (max-width: 900px) {
  .tp-photo-orbit-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.6rem;
  }
}

@media (max-width: 640px) {
  .tp-photo-orbit {
    padding: 4rem 0 3rem;
  }

  .tp-photo-orbit-inner {
    width: min(calc(100% - 1.25rem), 1280px);
  }

  .tp-photo-orbit-heading {
    margin-bottom: 1rem;
  }

  .tp-photo-orbit-kicker {
    margin-bottom: 1rem;
    font-size: .65rem;
  }

  .tp-photo-orbit-heading h2 {
    font-size: clamp(2.5rem, 11vw, 3.35rem);
  }

  .tp-photo-orbit-description > p {
    font-size: .98rem;
    line-height: 1.55;
  }

  .tp-photo-orbit-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
    margin-top: 1.1rem;
  }

  .tp-photo-orbit-filters {
    width: 100%;
    justify-content: space-between;
  }

  .tp-photo-orbit-filters button {
    min-width: 0;
    padding-inline: .58rem;
    font-size: .64rem;
  }

  .tp-photo-orbit-cue {
    justify-self: start;
    padding-inline: .62rem;
    font-size: .62rem;
  }

  body .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-desktop { display: none !important; }
  body:not(.fa) .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-mobile.lang-en { display: inline !important; }
  body:not(.fa) .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-mobile.lang-fa { display: none !important; }
  body.fa .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-mobile.lang-en { display: none !important; }
  body.fa .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-mobile.lang-fa { display: inline !important; }

  .tp-photo-orbit-viewport {
    height: min(126vw, 33rem);
    min-height: 29rem;
  }

  .tp-photo-orbit-card { border-radius: .85rem; }

  .tp-photo-lightbox-media { padding: 5.2rem .7rem 4.4rem; }

  .tp-photo-lightbox-close {
    top: .8rem;
    right: .8rem;
    width: 3.7rem;
    height: 3.7rem;
    font-size: 2.25rem;
  }

  .tp-photo-lightbox-nav {
    top: auto;
    bottom: 4.8rem;
    width: 3.35rem;
    height: 3.35rem;
    transform: none;
  }

  .tp-photo-lightbox-nav.is-prev { left: 1rem; }
  .tp-photo-lightbox-nav.is-next { right: 1rem; }
}

@media (max-width: 360px) {
  .tp-photo-orbit-filters button {
    padding-inline: .42rem;
    font-size: .59rem;
  }

  .tp-photo-orbit-cue {
    padding-inline: .48rem;
    font-size: .58rem;
  }

  .tp-photo-orbit-cue > span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-photo-orbit-card { animation-duration: .01ms; }
}

/* Display-only frames: keep mobile controls clear of the rear orbit. */
.tp-photo-merged-hero .tp-photo-orbit-card:hover img,
.tp-photo-merged-hero .tp-photo-orbit-card:focus-visible img,
.tp-photo-merged-hero .tp-photo-orbit-card:active img { transform: none; }
@media (max-width: 820px) {
  .tp-photo-merged-hero .tp-photo-merged-orbit-frame { margin-top: -4rem; }
}

/* source: assets/photography-merged-hero-v120.css */
/* Approved Photography hero/orbit composition v120. */

.tp-photo-merged-hero {
  --tp-photo-hero-max: 1280px;
  position: relative;
  min-height: 0;
  margin: 0;
  padding: clamp(5.5rem, 8vw, 7rem) 0 clamp(2.75rem, 4vw, 4.5rem);
  overflow-x: clip;
  overflow-y: visible;
  background: var(--bg, #fbfaf7);
  isolation: isolate;
}

.tp-photo-merged-copy {
  position: relative;
  z-index: 145;
  width: min(calc(100% - 3rem), var(--tp-photo-hero-max));
  margin-inline: auto;
  text-align: center;
  pointer-events: none;
}

.tp-photo-merged-copy .eyebrow {
  justify-content: center;
  margin-bottom: 1.45rem;
}

.tp-photo-merged-copy h1 {
  max-width: 16ch;
  margin: 0 auto;
  color: var(--navy, #0f2c6b);
  font-size: clamp(3.8rem, 6.1vw, 6.35rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .95;
}

.tp-photo-merged-copy h1 em {
  color: var(--cyan-deep, #14839e);
  font-weight: 500;
}

.tp-photo-merged-copy .lead {
  max-width: 50rem;
  margin: 2rem auto 0;
  color: var(--ink-soft, #2a3f6b);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.6;
}

.tp-photo-merged-actions {
  position: relative;
  z-index: 170;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: clamp(2.75rem, 4vw, 4rem) auto 0;
}

.tp-photo-merged-actions .tp-photo-sample-btn {
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.25rem;
  border: 1px solid var(--cyan, #2bb8d4);
  border-radius: 999px;
  background: var(--cyan, #2bb8d4);
  color: var(--navy, #0f2c6b);
  box-shadow: 0 14px 32px rgba(20, 131, 158, .16);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(14px);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.tp-photo-merged-actions .tp-photo-sample-btn.is-secondary {
  background: rgba(255, 255, 255, .88);
  color: var(--cyan-deep, #14839e);
}

.tp-photo-merged-actions .tp-photo-sample-btn.is-active {
  border-color: var(--cyan, #2bb8d4);
  background: var(--cyan, #2bb8d4);
  color: var(--navy, #0f2c6b);
}

.tp-photo-merged-actions .tp-photo-sample-btn:hover,
.tp-photo-merged-actions .tp-photo-sample-btn:focus-visible {
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(15, 44, 107, .2);
}

.tp-photo-merged-orbit-frame {
  position: relative;
  z-index: 20;
  inset: auto;
  height: auto;
  margin-top: -10.35rem;
  overflow: visible;
  pointer-events: auto;
}

.tp-photo-merged-viewport {
  width: 100%;
  height: clamp(34rem, 42vw, 40rem);
  min-height: 34rem;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}

.tp-photo-merged-hero .tp-photo-orbit-card {
  border-color: rgba(255, 255, 255, .92);
  background: rgba(226, 239, 250, .62);
  /* Keep depth without letting stacked cards form a cropped shadow band. */
  box-shadow: 0 6px 16px rgba(15, 44, 107, .045);
}

.tp-photo-merged-hero .tp-photo-orbit-card img {
  filter: none;
  transition: opacity .28s ease, transform .38s ease;
}

.tp-photo-merged-hero .tp-photo-orbit-card:hover img,
.tp-photo-merged-hero .tp-photo-orbit-card:focus-visible img,
.tp-photo-merged-hero .tp-photo-orbit-card:active img {
  transform: scale(1.025);
}

.tp-photo-merged-hero .tp-photo-orbit-card.is-food-product {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tp-photo-merged-hero .tp-photo-orbit-card.is-food-product img {
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(15, 44, 107, .18));
}

/* Pull the pricing row toward the orbit so the moving gallery sits between both rows. */
.tp-photo-merged-hero + .photography-pricing-section {
  position: relative;
  z-index: 2;
  margin-top: -10rem;
}

body.fa .tp-photo-merged-copy .eyebrow { justify-content: center; }

@supports not (overflow: clip) {
  .tp-photo-merged-hero,
  .tp-photo-merged-viewport {
    overflow-x: hidden;
  }
}

@media (max-width: 820px) {
  .tp-photo-merged-hero {
    padding-top: 5.25rem;
    padding-bottom: 2.75rem;
  }

  .tp-photo-merged-copy,
  body.fa .tp-photo-merged-copy {
    width: min(calc(100% - 1.4rem), var(--tp-photo-hero-max));
    text-align: left;
  }

  body.fa .tp-photo-merged-copy { text-align: right; }

  .tp-photo-merged-copy .eyebrow {
    justify-content: flex-start;
  }

  body.fa .tp-photo-merged-copy .eyebrow { justify-content: flex-end; }

  .tp-photo-merged-copy h1 {
    max-width: 11ch;
    margin-inline: 0;
    font-size: clamp(3rem, 13vw, 4.1rem);
    line-height: .98;
  }

  .tp-photo-merged-copy .lead {
    max-width: 35rem;
    margin: 1.45rem 0 0;
    font-size: .98rem;
    line-height: 1.55;
  }

  .tp-photo-merged-actions {
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 2.4rem .7rem 0;
  }

  .tp-photo-merged-actions .tp-photo-sample-btn {
    min-width: 0;
    min-height: 3rem;
    padding: .7rem .5rem;
    font-size: .68rem;
    white-space: normal;
    text-align: center;
  }

  .tp-photo-merged-orbit-frame { margin-top: -9.75rem; }

  .tp-photo-merged-viewport {
    height: min(126vw, 33rem);
    min-height: 29rem;
  }

  .tp-photo-merged-hero + .photography-pricing-section { margin-top: -8rem; }
}

@media (max-width: 430px) {
  .tp-photo-merged-copy h1 { font-size: clamp(2.75rem, 13.5vw, 3.55rem); }
  .tp-photo-merged-copy .lead { font-size: .93rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-photo-merged-hero * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* source: assets/home-photography-merged-v139.css */
/* Homepage uses the approved Photography-page composition without a section seam. */

.tp-photo-merged-hero--home {
  --tp-photo-hero-max: 1280px;
}

.tp-photo-merged-hero--home .tp-photo-merged-copy .section-label {
  justify-content: center;
  width: max-content;
  margin: 0 auto 1.45rem;
}

.tp-photo-merged-hero--home .tp-photo-merged-copy h2 {
  max-width: 16ch;
  margin: 0 auto;
  color: var(--navy, #0f2c6b);
  font-family: "Google Sans", sans-serif;
  font-size: clamp(3.8rem, 6.1vw, 6.35rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .95;
}

.tp-photo-merged-hero--home .tp-photo-merged-copy h2 em {
  color: var(--cyan-deep, #14839e);
  font-weight: 500;
}

.tp-photo-merged-hero--home .tp-photo-merged-copy .lead {
  max-width: 50rem;
}

.tp-photo-merged-hero--home + .photography-pricing-section {
  padding: 4.5rem 0;
  background: var(--bg, #fbfaf7);
}

.photography-pricing-section .container {
  max-width: 1280px;
  padding: 0 1.5rem;
}

.photography-pricing-section .section-label {
  justify-content: flex-start;
  margin-bottom: 1.25rem;
  font-size: .72rem;
}

.photography-pricing-section h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.22;
}

.photo-price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.photo-price-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--paper, #fff);
}

.photo-price-card--diamond {
  border-color: var(--diamond-border);
  background: var(--diamond-bg);
}

.photo-price-name {
  color: var(--ink-soft);
  font-family: "Roboto", sans-serif;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.photo-price-value {
  color: var(--navy);
  font-family: "Google Sans", sans-serif;
  font-size: 2.6rem;
  line-height: 1;
}

.photo-price-card--diamond .photo-price-value { color: var(--diamond-deep); }

.photo-price-value sup {
  position: relative;
  top: -.6em;
  color: var(--cyan-deep);
  font-size: .45em;
}

.photo-price-card--diamond .photo-price-value sup { color: var(--diamond-accent); }

.photo-price-value .unit {
  color: var(--muted);
  font-size: 1rem;
  font-style: italic;
}

.photo-price-desc {
  flex: 1;
  color: var(--ink-soft);
  font-size: .9rem;
}

.photo-price-note {
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  color: var(--cyan-deep);
  font-family: "Roboto", sans-serif;
  font-size: .7rem;
  line-height: 1.7;
}

body.fa .tp-photo-merged-hero--home .tp-photo-merged-copy .section-label {
  justify-content: center;
}

body.fa .photo-price-name,
body.fa .photo-price-note,
body.fa .photo-price-value {
  font-family: "Shabnam", sans-serif;
}

body.fa .photo-price-name { letter-spacing: .03em; }

@media (max-width: 820px) {
  .tp-photo-merged-hero--home .tp-photo-merged-copy .section-label,
  body.fa .tp-photo-merged-hero--home .tp-photo-merged-copy .section-label {
    justify-content: flex-start;
    margin-inline: 0;
  }

  body.fa .tp-photo-merged-hero--home .tp-photo-merged-copy .section-label {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: auto;
  }

  .tp-photo-merged-hero--home .tp-photo-merged-copy h2 {
    max-width: 11ch;
    margin-inline: 0;
    font-size: clamp(3rem, 13vw, 4.1rem);
    line-height: .98;
  }

  .photo-price-cards {
    grid-template-columns: 1fr;
  }

  .tp-photo-merged-hero--home + .photography-pricing-section {
    padding: 3.2rem 0;
  }
}

@media (max-width: 430px) {
  .tp-photo-merged-hero--home .tp-photo-merged-copy h2 {
    font-size: clamp(2.75rem, 13.5vw, 3.55rem);
  }
}

.tp-photo-merged-hero--home,
.tp-photo-merged-hero--home + .tp-airbnb-home-row,
.photography-pricing-section.photo {
  background: #fff;
}


/* source: assets/site-polish-v070.css */
/* Tehranto v070 — focused interaction and presentation refinements */

/* Package sample buttons: filled tier colors, compact and visually distinct. */
.price-card .tp-samples-btn,
.pcard .tp-card-samples {
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 8px 20px rgba(10, 31, 77, .09);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.price-card .tp-samples-btn:hover,
.price-card .tp-samples-btn:focus-visible,
.pcard .tp-card-samples:hover,
.pcard .tp-card-samples:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(.97);
  box-shadow: 0 12px 24px rgba(10, 31, 77, .14);
}
.price-card.tier-silver .tp-samples-btn,
.pcard.t-silver .tp-card-samples {
  border-color: #948b7b !important;
  background: linear-gradient(135deg, #ddd8cd, #c8c0b2) !important;
  color: #403c35 !important;
}
.price-card.tier-gold .tp-samples-btn,
.pcard.t-gold .tp-card-samples {
  border-color: #b8860b !important;
  background: linear-gradient(135deg, #f3d986, #e4bb4f) !important;
  color: #5c4006 !important;
}
.price-card.tier-diamond .tp-samples-btn,
.pcard.t-diamond .tp-card-samples {
  border-color: #168ca6 !important;
  background: linear-gradient(135deg, #b8e8f1, #74cde0) !important;
  color: #073f52 !important;
}
.price-card.tier-signature .tp-samples-btn,
.pcard.t-signature .tp-card-samples {
  border-color: #7dd3e6 !important;
  background: linear-gradient(135deg, #2f759f, #1d557d) !important;
  color: #fff !important;
}

/* Keep short prices and their units together; longer copy may wrap normally. */
.price-amount,
.pc-price,
.x-price,
.addon-price,
.bundle-price,
.dept-price,
.tp-tier-price,
.unit,
.keep-together {
  white-space: nowrap;
}

/* Homepage section rhythm. */
.extras-section {
  background: var(--bg-soft, #f2efe8) !important;
}
.event-section {
  background: var(--bg, #fbfaf7) !important;
}

/* Event offer: same navy, minimal language as the selected website buttons. */
.event-section .evt-base {
  overflow: hidden;
  padding: 1.15rem 1.35rem;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(43,184,212,.22), transparent 38%),
    linear-gradient(135deg, #173b7b 0%, #0f2c6b 62%, #0a2458 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(10,31,77,.16);
}
.event-section .evt-base .addon-name {
  color: #fff;
  font-weight: 650;
}
.event-section .evt-base .addon-name .meta {
  color: rgba(255,255,255,.66);
}
.event-section .evt-base .addon-price {
  color: var(--cyan-soft, #7dd3e6);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
}
.event-section .evt-base .tp-event-sample-btn {
  min-height: 40px;
  padding: .62rem 1rem;
  border: 0;
  background: var(--cyan, #2bb8d4);
  color: #071d48;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}

/* Portfolio hero: description under the title, quick jump and web work in view one. */
.tp-library-hero-grid.tp-library-hero-v051 {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}
.tp-library-hero-main {
  max-width: 1080px;
}
.tp-library-hero-main .tp-library-hero-lead {
  max-width: 740px;
  margin: 1.35rem 0 0;
  color: var(--tp-muted);
  font-size: clamp(.94rem, 1.25vw, 1.08rem);
  line-height: 1.8;
}
.tp-library-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.tp-library-scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .74rem 1.1rem;
  border-radius: 999px;
  background: var(--tp-cyan);
  color: var(--tp-navy-deep);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.tp-library-scroll:hover,
.tp-library-scroll:focus-visible {
  outline: none;
  transform: translateY(-2px);
  background: var(--tp-cyan-soft);
}
.tp-web-portfolio {
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--tp-line);
}
.tp-web-portfolio-label {
  margin: 0 0 clamp(1.15rem, 1.5vw, 1.4rem);
  color: var(--tp-cyan-deep);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tp-web-portfolio-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}
.tp-web-portfolio-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 68px;
  padding: .8rem .9rem;
  border-radius: 16px;
  background: var(--tp-navy);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(10,31,77,.12);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.tp-web-portfolio-link:hover,
.tp-web-portfolio-link:focus-visible {
  outline: none;
  transform: translateY(-2px);
  background: var(--tp-navy-deep);
  box-shadow: 0 14px 28px rgba(10,31,77,.17);
}
.tp-web-portfolio-link span {
  color: var(--tp-cyan-soft);
  font-size: .7rem;
  font-weight: 650;
}
.tp-web-portfolio-link strong {
  overflow: hidden;
  font-size: .82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-web-portfolio-link b {
  color: var(--tp-cyan);
  font-size: 1rem;
  font-weight: 400;
}
body.fa .tp-web-portfolio-label,
body.fa .tp-web-portfolio-link,
body.fa .tp-library-hero-main .tp-library-hero-lead {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
}

@media (max-width: 980px) {
  .tp-web-portfolio-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .event-section .evt-base {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .event-section .evt-base .addon-price {
    grid-row: 1;
    justify-self: start;
  }
  .tp-web-portfolio-links {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    padding: 0 .1rem .55rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tp-web-portfolio-links::-webkit-scrollbar {
    display: none;
  }
  .tp-web-portfolio-link {
    flex: 0 0 min(76vw, 260px);
    scroll-snap-align: start;
  }
}

/* source: assets/ambient-cards-v050.css */
/* Tehranto v050 — ambient treatment retained only for Special Offers */
:root {
  --offer-card-line: rgba(15, 44, 107, .13);
  --offer-card-shadow: 0 18px 52px rgba(15, 44, 107, .09);
  --offer-card-shadow-hover: 0 24px 64px rgba(15, 44, 107, .14);
}

:where(
  .promo-card,
  .special-offer-cards .pcard,
  body.special-offers-page .pcard
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--offer-card-line);
  box-shadow: var(--offer-card-shadow);
  transition: box-shadow .28s ease, border-color .28s ease;
}

:where(
  .promo-card,
  .special-offer-cards .pcard,
  body.special-offers-page .pcard
)::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 92% 8%, rgba(43, 184, 212, .19), transparent 34%),
    radial-gradient(circle at 7% 96%, rgba(15, 44, 107, .075), transparent 42%);
  content: "";
  pointer-events: none;
}

:where(
  .promo-card,
  .special-offer-cards .pcard,
  body.special-offers-page .pcard
) > * {
  position: relative;
  z-index: 1;
}

:where(
  .promo-card,
  .special-offer-cards .pcard,
  body.special-offers-page .pcard
):hover {
  border-color: rgba(43, 184, 212, .42);
  box-shadow: var(--offer-card-shadow-hover);
}

.promo-card::before {
  top: 0;
  right: 0;
  font-size: 0;
  opacity: 1;
  transform: none;
}

.promo-card::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  :where(
    .promo-card,
    .special-offer-cards .pcard,
    body.special-offers-page .pcard
  ) {
    transition: none;
  }
}

/* source: assets/hero-services-v107.css */
/* Tehranto v107 — approved three-service floating Hero collage.
   This stylesheet intentionally scopes every text rule to the visual cards so
   the Homepage headline, body copy, and CTA typography stay unchanged. */

.hero-service-collage {
  position: relative;
  min-height: 440px;
  height: clamp(440px, 46vw, 570px);
  max-width: 100%;
  aspect-ratio: auto;
  overflow: visible;
  isolation: isolate;
}

.hero-service-card {
  position: absolute;
  width: 58%;
  height: 44%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  background: #071a42;
  box-shadow: 0 22px 58px rgba(15, 44, 107, 0.25);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transform-origin: center;
  will-change: transform;
  transition: box-shadow 0.45s ease, filter 0.45s ease;
}

.hero-service-card:hover,
.hero-service-card:focus-visible {
  z-index: 20;
  outline: 2px solid rgba(43, 184, 212, 0.72);
  outline-offset: 3px;
  box-shadow: 0 32px 78px rgba(15, 44, 107, 0.35);
  filter: saturate(1.08);
  animation-play-state: paused;
}

.hero-service-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Each vertical source is optically centered for the wide floating card. */
.hero-service-video img {
  object-position: 50% 52%;
}

.hero-service-web img {
  object-position: 50% 58%;
}

.hero-service-ads img {
  object-position: 50% 54%;
}

.hero-service-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 13, 36, 0.02) 35%, rgba(3, 13, 36, 0.93) 100%),
    linear-gradient(90deg, rgba(3, 13, 36, 0.32), transparent 64%);
  content: "";
  pointer-events: none;
}

.hero-service-video {
  z-index: 4;
  top: 18%;
  left: -11%;
  animation: hero-float-video 18s cubic-bezier(.45, .05, .55, .95) -5s infinite alternate;
}

.hero-service-web {
  z-index: 5;
  top: 1%;
  right: -1%;
  animation: hero-float-web 22s cubic-bezier(.42, .08, .58, .92) -12s infinite alternate;
}

.hero-service-ads {
  z-index: 6;
  right: 10%;
  bottom: 1%;
  animation: hero-float-ads 20s cubic-bezier(.46, .06, .54, .94) -8s infinite alternate;
}

/* Desktop keeps the approved v106 geometry; only Video Production is raised
   above the other two cards in the stacking order. */
@media (min-width: 961px) {
  .hero-service-card {
    width: 50%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .hero-service-video {
    z-index: 7;
    top: 16%;
    left: -4%;
  }

  .hero-service-web {
    z-index: 5;
    top: 1%;
    right: -1%;
    bottom: auto;
  }

  .hero-service-ads {
    z-index: 6;
    top: auto;
    right: 7%;
    bottom: 0;
  }

  .hero-service-copy {
    right: 1.1rem;
    bottom: 1rem;
    left: 1.1rem;
  }

  .hero-service-title {
    font-size: clamp(1.12rem, 1.55vw, 1.4rem);
  }

  .hero-service-line {
    font-size: clamp(0.76rem, 0.9vw, 0.88rem);
    white-space: nowrap;
  }

  .hero-service-price {
    font-size: 0.75rem;
  }

  .hero-service-price b {
    font-size: 1.05rem;
  }

  .hero-service-arrow {
    width: 39px;
    height: 39px;
  }
}

@keyframes hero-float-video {
  0% { transform: translate3d(-3px, 4px, 0) rotate(-4.2deg); }
  48% { transform: translate3d(8px, -8px, 0) rotate(-2.7deg); }
  100% { transform: translate3d(-5px, 7px, 0) rotate(-4.8deg); }
}

@keyframes hero-float-web {
  0% { transform: translate3d(4px, -5px, 0) rotate(2.6deg); }
  52% { transform: translate3d(-7px, 7px, 0) rotate(1.4deg); }
  100% { transform: translate3d(6px, 2px, 0) rotate(3.1deg); }
}

@keyframes hero-float-ads {
  0% { transform: translate3d(-4px, 6px, 0) rotate(-1.2deg); }
  45% { transform: translate3d(7px, -5px, 0) rotate(-2.1deg); }
  100% { transform: translate3d(-6px, -1px, 0) rotate(-0.6deg); }
}

.hero-service-copy {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 0.9rem;
  left: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.7rem;
  color: #fff;
}

.hero-service-text {
  min-width: 0;
}

.hero-service-kicker {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--cyan);
  font-family: "Roboto", sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.fa .hero-service-kicker {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
}

.hero-service-title {
  display: block;
  color: #fff;
  font-family: "Google Sans", sans-serif;
  font-size: clamp(0.98rem, 1.45vw, 1.26rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

body.fa .hero-service-title {
  font-family: "Shabnam", sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}

.hero-service-line {
  display: block;
  margin-top: 0.22rem;
  color: rgba(255, 255, 255, 0.86);
  font-family: "Google Sans", sans-serif;
  font-size: clamp(0.68rem, 0.85vw, 0.8rem);
  line-height: 1.25;
}

body.fa .hero-service-line {
  font-family: "Shabnam", sans-serif;
  line-height: 1.55;
}

.hero-service-price {
  display: inline-flex;
  align-items: baseline;
  margin-top: 0.42rem;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.fa .hero-service-price {
  font-family: "Shabnam", sans-serif;
}

.hero-service-price b {
  margin-inline: 0.2rem;
  color: #fff;
  font-family: "Google Sans", sans-serif;
  font-size: 0.95rem;
}

.hero-service-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(10px);
}

@media (min-width: 961px) and (max-height: 920px) {
  .hero-service-collage {
    min-height: 400px;
    height: min(48vw, 470px);
  }
}

@media (max-width: 960px) {
  .hero-service-collage {
    order: 1;
    width: min(100%, 680px);
    min-height: 500px;
    height: 56vw;
    max-height: 570px;
    margin: 0 auto;
    aspect-ratio: auto !important;
  }

  .hero-service-card {
    width: 58%;
    height: 43%;
  }

  .hero-service-video {
    top: 27%;
    left: 0;
  }

  .hero-service-web {
    top: 1%;
    right: 0;
  }

  .hero-service-ads {
    right: 17%;
    bottom: 1%;
  }
}

@media (min-width: 641px) and (max-width: 960px) and (max-height: 920px) {
  .hero-service-collage {
    min-height: 460px;
    height: 52vw !important;
  }
}

@media (max-width: 640px) {
  .hero-text .hero-cta-group {
    position: relative;
    z-index: 8;
    top: clamp(4.5rem, 20vw, 5rem);
  }

  .hero-service-collage {
    width: min(100%, 430px);
    min-height: 600px;
    height: 150vw;
    max-height: 650px;
    margin-top: 0;
    aspect-ratio: auto !important;
  }

  .hero-service-card {
    width: min(60vw, 265px);
    height: auto;
    aspect-ratio: 6 / 7;
    border-radius: 16px;
  }

  .hero-service-video {
    z-index: 6;
    top: 27%;
    left: 0;
  }

  .hero-service-web {
    z-index: 4;
    top: auto;
    right: 12%;
    bottom: 0;
  }

  .hero-service-ads {
    z-index: 5;
    top: 1%;
    right: 0;
    bottom: auto;
  }

  .hero-service-copy {
    right: 0.82rem;
    bottom: 0.78rem;
    left: 0.82rem;
  }

  .hero-service-kicker {
    display: none;
  }

  .hero-service-title {
    font-size: 0.98rem;
  }

  .hero-service-line {
    font-size: 0.69rem;
    white-space: nowrap;
  }

  .hero-service-price {
    margin-top: 0.3rem;
    font-size: 0.63rem;
  }

  .hero-service-price b {
    font-size: 0.9rem;
  }

  .hero-service-arrow {
    width: 33px;
    height: 33px;
    font-size: 0.88rem;
  }
}

@media (max-width: 380px) {
  .hero-service-collage {
    min-height: 560px;
    height: 152vw;
  }

  .hero-service-card {
    width: 62vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-service-card {
    animation: none;
    transition: none;
  }

  .hero-service-video { transform: rotate(-4.2deg); }
  .hero-service-web { transform: rotate(2.6deg); }
  .hero-service-ads { transform: rotate(-1.2deg); }
}

/* source: assets/hero-atmosphere-v138.css */
.hero { isolation: isolate; }

.hero .glyph-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: .72;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero::before,
.hero::after {
  opacity: 0;
}

@media (max-width: 700px) {
  .hero .glyph-matrix { opacity: .6; }
}

.beam-collision-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .24;
}

.collision-beam {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(to bottom, transparent, #2369a68c 55%, #2369a6);
  box-shadow: 0 0 5px #2369a624;
}

.collision-explosion {
  position: absolute;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
}

.collision-flash {
  position: absolute;
  left: -23px;
  top: -2px;
  width: 48px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(to right, transparent, #2369a6, transparent);
  filter: blur(2px);
}

.collision-particle {
  position: absolute;
  inset: 0 auto auto 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #2369a6, #2369a6);
}

@media (prefers-reduced-motion: reduce) {
  .beam-collision-layer { display: none; }
}

/* source: assets/home-inline-v147.css */

  /* Keep the Homepage's light/soft section rhythm explicit after section reordering. */
  .home-surface--base { background: var(--bg); }
  .home-surface--soft { background: var(--bg-soft); }


  .website-projects-approved--home .workfolio-minimal .website-projects-grid {
    margin-top: 1.75rem;
    gap: .75rem;
  }
  .website-projects-approved--home .workfolio-minimal .website-project-link {
    min-height: 52px;
    padding: .65rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, white 85%, var(--paper));
  }
  .website-projects-approved--home .workfolio-minimal .website-project-name {
    font-size: 1rem;
    font-weight: 400;
  }
  .website-projects-approved--home .workfolio-minimal .website-project-arrow {
    font-size: 1.1rem;
  }
  .website-projects-approved--home .workfolio-minimal .website-project-link:hover {
    background: var(--website-project-wash);
  }
  @media (max-width: 520px) {
    .website-projects-approved--home .workfolio-minimal .website-projects-grid { gap: .6rem; }
    .website-projects-approved--home .workfolio-minimal .website-project-link { padding: .6rem; }
    .website-projects-approved--home .workfolio-minimal .website-project-name { font-size: .85rem; }
  }


/* source: assets/founder-message-v172.css */
/* Personal-message layout inspired by the user's TestimonialsSection reference. */
.founder-message {
  padding-block: clamp(3.5rem, 6vw, 5rem);
  background: var(--bg);
  overflow: clip;
}
.founder-message .founder-row {
  position: relative;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  align-items: center;
}
.founder-row::before, .founder-row::after {
  content: "";
  position: absolute;
  inset-inline: -7vw;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 15%, var(--line) 85%, transparent);
  pointer-events: none;
}
.founder-row::before { top: 0; }
.founder-row::after { bottom: 0; }
.founder-portrait {
  position: relative;
  align-self: stretch;
  min-height: 272px;
}
.founder-portrait::before, .founder-portrait::after {
  content: "";
  position: absolute;
  top: -64px;
  bottom: -64px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 20%, var(--line) 80%, transparent);
  z-index: 1;
  pointer-events: none;
}
.founder-portrait::before { inset-inline-start: 0; }
.founder-portrait::after { inset-inline-end: 0; }
.founder-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 50% 35%;
  -webkit-mask-image: none;
  mask-image: none;
}

/* A restrained brand-blue tint replaces the former full white fade. */
.founder-portrait-tint {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 14%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--navy) 12%, transparent));
  pointer-events: none;
}

.founder-copy { padding: 1.5rem 0 1.5rem clamp(1.75rem, 3.5vw, 3rem); }
.founder-copy blockquote { margin: 0; }
.founder-copy blockquote p {
  margin: 0;
  max-width: none;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.4rem, 2.1vw, 1.875rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.025em;
  color: #72767e;
}
.founder-copy blockquote .lang-en { display: block; }
.founder-copy blockquote .lang-fa { display: none; }
.founder-copy blockquote strong { color: var(--navy); font-weight: 600; }
.founder-byline { margin-top: 1.75rem; }
.founder-byline h2 {
  margin: 0 0 .3rem;
  font: 500 1.25rem/1.35 'Google Sans', sans-serif;
  letter-spacing: -.015em;
  color: var(--navy);
}
.founder-byline p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
body.fa .founder-copy { padding: 1.5rem clamp(1.75rem, 3.5vw, 3rem) 1.5rem 0; }
body.fa .founder-copy blockquote .lang-en { display: none; }
body.fa .founder-copy blockquote .lang-fa { display: block; }
body.fa .founder-copy blockquote p, body.fa .founder-byline h2, body.fa .founder-byline p {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
}
body.fa .founder-copy blockquote p { line-height: 1.75; font-size: clamp(1.25rem, 1.85vw, 1.6rem); }
@media (max-width: 760px) {
  .founder-message { padding-block: 3rem; }
  .founder-message .founder-row { grid-template-columns: minmax(0, 1fr); }
  .founder-portrait { width: 192px; min-height: 192px; margin: 0 auto; }
  .founder-portrait::before, .founder-portrait::after { top: -32px; bottom: -24px; }
  .founder-copy, body.fa .founder-copy { padding: 1.75rem .5rem; }
  .founder-copy blockquote p { font-size: 1.4rem; line-height: 1.45; }
  .founder-byline { margin-top: 1.25rem; }
}

.founder-identity {display:flex;align-items:center;flex-wrap:wrap;gap:.3rem 1rem;margin-bottom:.2rem;}
.founder-identity h2 {margin:0;}
.founder-linkedin {display:inline-flex;align-items:center;gap:.3rem;min-height:36px;font-size:.85rem;font-weight:400;color:#536784;text-decoration:underline;text-decoration-color:#53678455;text-underline-offset:.25rem;}
body:is(.fa,:not(.fa)) .founder-linkedin > :is(.lang-en,.lang-fa) {font-weight:inherit;}
.founder-linkedin:hover {color:var(--navy);text-decoration-color:currentColor;}
.founder-linkedin:focus-visible {outline:2px solid #2369a6;outline-offset:4px;border-radius:2px;}
@media(max-width:760px) {.founder-linkedin {min-height:44px;}}

/* source: assets/home-section-surfaces-v139.css */
/* Homepage section contrast and the approved pricing spacing. */
#webdesign,
#services {
  background: #f5f5f5;
}
#reviews.tp-review-section {
  background: #fff;
}
#pricing .pricing-head {
  padding: 3rem 1rem 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 640px) {
  #pricing .pricing-head {
    padding: 2rem .25rem;
    margin-bottom: 2rem;
  }
}

/* source: assets/review-wall-v145.css */
/* Independent static design inspired by the public Testimonial-v2 preview. */
.tp-review-section {padding:clamp(5rem,8vw,8rem) 1.25rem;background:var(--bg,#faf9f7);color:var(--navy,#12316c);}
.tp-review-section > .container {max-width:1120px;margin-inline:auto;}
.tp-review-heading {text-align:center;max-width:800px;margin:0 auto 2rem;}
.tp-review-eyebrow {display:inline-flex;align-items:center;gap:.75rem;font-family:'Roboto',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-deep,#2369a6);}
.tp-review-eyebrow::before {content:"";width:32px;height:1px;flex:0 0 32px;background:var(--cyan,#29b6cf);}
body.fa .tp-review-eyebrow {font-family:'Shabnam',sans-serif;letter-spacing:.04em;}
.tp-review-heading h2 {font-size:clamp(2rem,4.2vw,3.8rem);line-height:1.12;letter-spacing:-.045em;margin:1.35rem 0 1rem;}
.tp-review-heading h2 em {color:#2369a6;}
.tp-review-heading > p {font-size:1.05rem;line-height:1.7;color:#12316cb3;max-width:660px;margin:auto;}
.tp-review-proof {display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.4rem;}
.tp-review-proof > * {font-size:.78rem;color:#12316c;text-decoration:none;padding:.5rem .85rem;border:1px solid #12316c20;border-radius:999px;background:#fff9;}
.tp-review-proof a:hover {border-color:#2369a65c;background:#f5f5f5;}
.tp-review-proof a:focus-visible {outline:2px solid #2369a6;outline-offset:3px;}
.tp-review-proof-arrow {color:#2369a6;display:inline-block;margin-inline-start:.25rem;}
.tp-review-proof-stars {font-size:inherit;line-height:inherit;letter-spacing:.04em;white-space:nowrap;}
.tp-review-wall {display:grid;grid-template-columns:repeat(var(--review-columns,3),minmax(0,1fr));gap:24px;height:740px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);}
.tp-review-column {min-width:0;}
.tp-review-track {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;animation:tp-review-drift var(--review-duration,50s) linear infinite alternate;animation-play-state:paused;will-change:transform;}
.tp-review-column:nth-child(2) .tp-review-track {animation-direction:alternate-reverse;}
.tp-review-section[data-review-active="true"] .tp-review-track {animation-play-state:running;}
.tp-review-wall:focus-within .tp-review-track {animation-play-state:paused;}
@media (hover:hover) {.tp-review-wall:hover .tp-review-track {animation-play-state:paused;}}
.tp-review-card {display:flex;flex-direction:column;padding:32px;border:1px solid #12316c20;border-radius:24px;background:#f5f5f5;box-shadow:0 10px 18px -12px #12316c22;min-height:268px;box-sizing:border-box;}
.tp-review-meta {display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1.3rem;}
.tp-review-source {color:#2369a6;font-size:.74rem;font-weight:700;letter-spacing:.04em;}
.tp-review-stars {color:#2369a6;letter-spacing:.12em;font-size:.82rem;white-space:nowrap;}
.tp-review-card blockquote {font-size:1rem;font-weight:400;line-height:1.65;margin:0 0 1.35rem;color:#243757;letter-spacing:0;text-align:left;}
.tp-review-card blockquote:before {content:"“";}
.tp-review-card blockquote:after {content:"”";}
.tp-review-person {display:flex;gap:.8rem;align-items:center;margin-top:auto;}
.tp-review-initials {display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:#edf3fa;border:1px solid #d7e3f1;color:#12316c;font-size:.8rem;font-weight:700;}
.tp-review-person cite {display:block;font-size:.92rem;font-weight:700;font-style:normal;color:#12316c;}
.tp-review-origin {display:block;font-size:.76rem;margin-top:.2rem;color:#64738a;}
.tp-review-link {font-size:.74rem;color:#2369a6;text-decoration:none;margin-top:1.1rem;align-self:flex-start;}
.tp-review-ctas {display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2rem;}
.tp-review-cta {color:#12316c;font-size:.87rem;text-decoration:none;border-bottom:1px solid #12316c40;padding:.55rem 0;}
.tp-review-section a:hover {color:#2369a6;}
.tp-review-section :is(a,button):focus-visible,.tp-airbnb-teaser a:focus-visible {outline:3px solid #3e83cd;outline-offset:5px;}
.tp-review-section[data-review-mode="static"] .tp-review-wall,.tp-review-section[data-review-paused="true"] .tp-review-wall,.tp-review-section[data-review-reduced="true"] .tp-review-wall {height:auto;overflow:visible;mask-image:none;}
.tp-review-section[data-review-mode="static"] .tp-review-track,.tp-review-section[data-review-paused="true"] .tp-review-track,.tp-review-section[data-review-reduced="true"] .tp-review-track {animation:none;transform:none;will-change:auto;}
.tp-review-section[data-review-mode="static"] > .container {max-width:960px;}
@keyframes tp-review-drift {from{transform:translateY(0)}to{transform:translateY(var(--review-travel,0px))}}
.tp-airbnb-home-row {padding:0 max(1.5rem,9vw) 4rem;background:var(--bg,#faf9f7);}
.tp-airbnb-photo-row {padding-block:0 3rem;}
.tp-airbnb-teaser {display:flex;justify-content:space-between;align-items:center;gap:2rem;max-width:1240px;margin:auto;border:1px solid #2369a62c;border-radius:24px;padding:1.75rem 2rem;background:linear-gradient(120deg,#eaf2fa,#fff 75%);color:#12316c;}
.tp-airbnb-proof {font-size:.75rem;color:#2369a6;letter-spacing:.025em;}
.tp-airbnb-teaser :is(h2,h3) {font-size:1.35rem;margin:.65rem 0 .5rem;line-height:1.25;letter-spacing:-.025em;}
.tp-airbnb-teaser p {font-size:.94rem;line-height:1.6;margin:0;max-width:660px;color:#12316cb3;}
.tp-airbnb-teaser a {flex:0 0 auto;text-decoration:none;background:#12316c;color:white;border-radius:999px;padding:.9rem 1.25rem;font-size:.85rem;}
.tp-airbnb-teaser--feature {padding:2.25rem 2.5rem;}
.tp-airbnb-teaser--feature h2 {font-size:clamp(1.5rem,2.7vw,2.2rem);}
body.fa .tp-review-card .tp-review-link {align-self:flex-start;}
@media(max-width:699px) {
 .tp-review-wall {height:640px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);}
 .tp-review-track {gap:18px;}
 .tp-review-card {padding:26px;min-height:240px;}
 .tp-review-ctas {gap:.6rem 1rem;}
 .tp-airbnb-home-row {padding:0 1.25rem 3rem;}
 .tp-airbnb-teaser {flex-direction:column;align-items:flex-start;padding:1.5rem;gap:1.25rem;border-radius:20px;}
 .tp-airbnb-teaser a {width:100%;box-sizing:border-box;text-align:center;}
}
@media(prefers-reduced-motion:reduce) {.tp-review-track{animation:none!important;will-change:auto;}}

.tp-review-section[data-review-touch-paused="true"] .tp-review-track {animation-play-state:paused;}

.tp-review-section[data-review-layout="balanced"] .tp-review-wall {display:block;}
.tp-review-section[data-review-layout="balanced"] .tp-review-track {display:grid;grid-template-columns:repeat(var(--review-columns,3),minmax(0,1fr));align-items:stretch;}
.tp-review-section[data-review-layout="balanced"] .tp-review-card {min-width:0;}
.tp-review-linkedin-mark {display:grid;place-items:center;width:20px;height:20px;border-radius:3px;background:#2369a6;color:#fff;font:700 .8rem/1 Roboto,sans-serif;letter-spacing:-.04em;}

/* source: assets/site-ui-guardrails-v141.css */
/* Shared language, control and keyboard fixes. Keep approved layout unchanged. */
body :is(button, input, select, textarea) {
  font-family: 'Roboto', sans-serif;
}
body.fa :is(button, input, select, textarea),
body.fa .lang-fa {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
}

/* Bright cyan needs navy text; the darker hover surface supports white. */
.btn-cyan {
  color: var(--navy, #0f2c6b);
}
.btn-cyan:hover,
.btn-cyan:focus-visible {
  background: #116e87;
  color: #fff;
}
.blog-filters button.active,
.blog-filters button:hover {
  color: var(--navy, #0f2c6b);
}
.kw-pill {
  color: #116e87;
}
.kw-pill:hover,
.kw-pill:focus-visible {
  color: var(--navy, #0f2c6b);
}
.tp-photo-sample-btn:not(.is-secondary),
.tp-event-sample-btn:not(.is-secondary) {
  color: var(--navy, #0f2c6b);
}
.tp-photo-merged-actions .tp-photo-sample-btn.is-secondary,
.tp-photo-sample-btn.is-secondary,
.tp-event-sample-btn.is-secondary {
  color: #116e87;
}
.tp-photo-merged-actions .tp-photo-sample-btn.is-active {
  color: var(--navy, #0f2c6b);
}
.tp-photo-merged-actions .tp-photo-sample-btn.is-secondary:hover,
.tp-photo-merged-actions .tp-photo-sample-btn.is-secondary:focus-visible,
.tp-photo-sample-btn:hover,
.tp-photo-sample-btn:focus-visible,
.tp-event-sample-btn:hover,
.tp-event-sample-btn:focus-visible,
.tp-card-samples:hover,
.tp-card-samples:focus-visible,
.tp-category:hover,
.tp-category:focus-visible {
  background: #116e87;
  color: #fff;
}

/* The Event Coverage row must not stretch around a legacy top margin. */
.tp-event-actions {
  align-items: center;
}
.dept-hero .tp-event-actions > .btn,
.dept-hero .tp-event-actions > .tp-event-sample-btn {
  justify-content: center;
  min-height: 52px;
  margin-top: 0;
  padding: .85rem 1.7rem;
  font-size: .95rem;
  line-height: 1.4;
}
.dept-hero .tp-event-sample-btn.is-secondary {
  border-color: #7dd3e6;
  background: transparent;
  color: #bcecf4;
}
.dept-hero .tp-event-sample-btn.is-secondary:hover,
.dept-hero .tp-event-sample-btn.is-secondary:focus-visible {
  background: #7dd3e6;
  color: var(--navy, #0f2c6b);
}

/* A two-color focus ring stays visible on both white and navy sections. */
body :is(a, button, input, select, textarea, summary):focus:focus-visible {
  outline: 2px solid #2369a6;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #fff;
}

/* source: assets/body-typography-v143.css */
/* Body prose uses Regular; headings, prices and controls keep their hierarchy.
   The explicit body state outranks the legacy Homepage Persian 500 override. */
body:is(.fa, :not(.fa)) :is(
  p:where(:not(.tp-kicker, .tp-contact-kicker, .tp-photo-orbit-kicker, .tp-web-portfolio-label, .lab-kicker, .option-number, .deep-link)),
  blockquote,
  .price-tagline, .price-desc, .price-period, .price-features li,
  .pc-desc, .pc-note, .photo-price-desc, .pl-meta,
  .claim-condition, .wd-desc, .f-desc, .x-desc, .term-text,
  .service-desc, .service-desc li, .prose li, .guide li,
  .dept-line, .dept-value, .d-label, .addon-name .meta,
  .tp-review-highlights, .tp-review-origin,
  .promo-popup-expiry
) {
  font-weight: 400;
}

/* Bilingual wrappers must inherit their prose or semantic strong emphasis,
   rather than independently turning every Persian span into Medium. */
body:is(.fa, :not(.fa)) :is(
  p:where(:not(.tp-kicker, .tp-contact-kicker, .tp-photo-orbit-kicker, .tp-web-portfolio-label, .lab-kicker, .option-number, .deep-link)),
  blockquote,
  .price-tagline, .price-desc, .price-period, .price-features li,
  .pc-desc, .pc-note, .photo-price-desc, .pl-meta,
  .claim-condition, .wd-desc, .f-desc, .x-desc, .term-text,
  .service-desc, .service-desc li, .prose li, .guide li,
  .dept-line, .dept-value, .d-label, .addon-name .meta,
  .tp-review-highlights, .tp-review-origin,
  .promo-popup-expiry
) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: inherit;
}

/* Financial notes are explanatory copy, with color retained for emphasis. */
body #pricing .price-features li.fee-note,
body #pricing .price-period .loc-fee {
  font-weight: 400;
}

/* source: assets/home-semantics-v147.css */
/* Semantic subsection headings retain the approved visual hierarchy. */
.tp-subsection-title{font-family:'Google Sans',sans-serif;font-weight:700;font-size:clamp(2.25rem,5vw,4rem);line-height:1.2;letter-spacing:-.02em;margin-bottom:1.5rem;color:var(--navy);text-wrap:balance}
.tp-subsection-title em{font-style:italic;color:var(--cyan-deep)}
body.fa .tp-subsection-title{font-family:Shabnam,sans-serif;letter-spacing:0;line-height:1.45}
.tp-portfolio .tp-subsection-title{max-width:860px;margin:0;color:#fff;font-size:clamp(2.15rem,4.8vw,4.7rem);letter-spacing:-.045em;line-height:.98}
.tp-portfolio .tp-subsection-title em{color:var(--tp-cyan-soft);font-style:normal}
body.fa .tp-portfolio .tp-subsection-title{font-family:Shabnam,sans-serif;letter-spacing:-.025em;line-height:1.22}
.photography-pricing-section .tp-subsection-title{margin-bottom:1rem;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.22}
.youtube-head .tp-subsection-title{margin:0 auto;max-width:18ch}
.founder-byline .founder-name{margin:0;font:500 1.25rem/1.35 'Google Sans',sans-serif;letter-spacing:-.015em;color:var(--navy)}
body.fa .founder-byline .founder-name{font-family:Shabnam,sans-serif;letter-spacing:0}