@font-face {
    font-family: "Avenir Web";
    src: url("./fonts/Avenir.ttc") format("collection"),
         url("./fonts/Avenir.ttc") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --ink: #231f20;
    --brand: #a97c50;
    --brand-light: #c6a27d;
    --paper: #f5f1eb;
    --paper-deep: #e9e0d5;
    --white: #fffdf9;
    --line: rgba(169, 124, 80, 0.22);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: "Avenir Web", Avenir, "Segoe UI", Tahoma, Arial, sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
.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;
}

/* Loading screen */
.loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: var(--paper);
    transition: opacity 450ms ease, visibility 450ms ease;
}
.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(169, 124, 80, 0.12), transparent 34%),
        linear-gradient(90deg, transparent 49.9%, rgba(169, 124, 80, 0.08) 50%, transparent 50.1%);
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__content { position: relative; width: min(62vw, 260px); text-align: center; }
.loader__logo { width: 100%; animation: loader-breathe 1.25s ease-in-out infinite alternate; }
.loader__track {
    width: 74%;
    height: 1px;
    margin: 24px auto 0;
    overflow: hidden;
    background: rgba(169, 124, 80, 0.2);
}
.loader__track::after {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    background: var(--brand);
    animation: loader-line 1s var(--ease) infinite;
}

/* Hero */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 68svh;
    align-items: center;
    justify-content: center;
    padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.25) 32%, transparent 58%),
        linear-gradient(135deg, var(--paper) 0%, #faf8f4 48%, var(--paper-deep) 100%);
}
.hero::before, .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid var(--line);
    border-radius: 50%;
    pointer-events: none;
}
.hero::before {
    width: min(76vw, 880px);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero::after {
    width: min(48vw, 560px);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    border-color: rgba(169, 124, 80, 0.1);
    transform: translate(-50%, -50%);
}
.hero__inner { width: min(100%, 940px); text-align: center; }
.brand-main {
    width: min(78vw, 543px);
    margin-inline: auto;
    filter: drop-shadow(0 20px 24px rgba(77, 48, 25, 0.08));
}
.brand-divider {
    display: flex;
    width: min(78vw, 620px);
    align-items: center;
    gap: 14px;
    margin: clamp(34px, 5vw, 58px) auto clamp(28px, 4vw, 44px);
    color: var(--brand);
}
.brand-divider::before, .brand-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--line));
}
.brand-divider::after { background: linear-gradient(90deg, var(--line), transparent); }
.brand-divider span {
    width: 6px;
    height: 6px;
    border: 1px solid currentColor;
    transform: rotate(45deg);
}
.brand-family {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: clamp(22px, 4vw, 52px);
    width: min(100%, 850px);
    margin-inline: auto;
    padding: 0;
    list-style: none;
}
.brand-family li { display: grid; min-height: 84px; place-items: center; }
.brand-family img {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
    filter: saturate(0.88);
    transition: transform 280ms var(--ease), filter 280ms ease;
}
.brand-family li:hover img {
    transform: translateY(-4px);
    filter: saturate(1.05) drop-shadow(0 9px 10px rgba(35, 31, 32, 0.12));
}

/* Contact information */
.contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 32svh;
}
.contact__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 5vw, 76px) clamp(28px, 6vw, 92px);
    overflow: hidden;
}
.contact__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M48 54 177 119M48 54 194 31M177 119 194 31'/%3E%3Ccircle cx='48' cy='54' r='3'/%3E%3Ccircle cx='177' cy='119' r='3'/%3E%3Ccircle cx='194' cy='31' r='3'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.18'%3E%3Cpath d='M0 0 14 9v31h36V9L64 0v88H50V54H14v34H0Z' transform='translate(25 19) scale(.62)'/%3E%3Cpath d='M0 0 14 9v31h36V9L64 0v88H50V54H14v34H0Z' transform='translate(158 91) scale(.42)'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-size: 240px 180px;
    opacity: 0.55;
    pointer-events: none;
}
.contact__panel--en { background: var(--ink); color: var(--white); }
.contact__panel--fa {
    background: var(--brand);
    color: #1f1812;
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}
.contact__content { position: relative; z-index: 1; width: min(100%, 650px); }
.contact__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.72;
}
.contact__eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.contact h2 {
    max-width: 620px;
    margin: 0 0 20px;
    font-family: "Avenir Web", Avenir, "Segoe UI", sans-serif;
    font-size: clamp(1.2rem, 1.7vw, 1.7rem);
    font-weight: 500;
    line-height: 1.35;
}
.contact__panel--fa h2 {
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
}
.contact address {
    display: grid;
    gap: 8px;
    margin: 0;
    font-size: clamp(0.86rem, 1vw, 1rem);
    font-style: normal;
    line-height: 1.8;
    opacity: 0.82;
}
.contact p { margin: 0; }
.contact__meta { font-variant-numeric: tabular-nums; }

/* Entrance motion */
.motion-item { opacity: 0; transform: translateY(18px); }
body.is-ready .motion-item {
    animation: reveal 700ms var(--ease) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes loader-breathe {
    from { opacity: 0.55; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes loader-line {
    from { transform: translateX(-115%); }
    to { transform: translateX(245%); }
}
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
    .hero { min-height: 62svh; padding-block: 64px 52px; }
    .hero::before { width: 120vw; }
    .hero::after { width: 78vw; }
    .brand-main { width: min(86vw, 500px); }
    .brand-family {
        grid-template-columns: repeat(5, minmax(56px, 1fr));
        gap: 20px;
        overflow-x: auto;
        padding: 8px 2px 14px;
        scrollbar-width: thin;
        scrollbar-color: var(--brand-light) transparent;
        scroll-snap-type: x proximity;
    }
    .brand-family li { min-width: 72px; min-height: 72px; scroll-snap-align: center; }
    .brand-family img { max-height: 60px; }
    .contact { grid-template-columns: 1fr; }
    .contact__panel { min-height: 300px; padding: 48px clamp(24px, 7vw, 52px); }
}

@media (max-width: 480px) {
    .hero { min-height: 58svh; padding-inline: 20px; }
    .brand-divider { margin-block: 30px 22px; }
    .brand-family { grid-template-columns: repeat(5, 74px); justify-content: start; }
    .contact__panel { min-height: 320px; padding-block: 42px; }
    .contact h2 { font-size: 1.15rem; }
    .contact address { font-size: 0.9rem; line-height: 1.75; }
}

@media (orientation: landscape) and (max-height: 560px) {
    .hero { min-height: 100svh; padding-block: 40px; }
    .brand-main { width: min(46vw, 420px); }
    .brand-divider { margin-block: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .motion-item { opacity: 1; transform: none; }
}

/* Reusable presentation helpers */
.delay-1 { --delay: 80ms; }
.delay-2 { --delay: 190ms; }
.delay-3 { --delay: 280ms; }
.delay-4 { --delay: 380ms; }
.delay-5 { --delay: 460ms; }
.nowrap { white-space: nowrap; }

/* Keep content accessible when JavaScript is unavailable. */
.no-js .loader { display: none; }
.no-js .motion-item { opacity: 1; transform: none; }