/* ==========================================================================
   1. SHARED STYLES (Գործում է բոլոր էջերի համար)
   ========================================================================== */
:root {
    --black: #1a1a1a;
    --white: #FFFFFF;
    --red: #E60000;
    --gray: #999999;
    --font-script: 'Pinyon Script', cursive;
    --font-clean: 'Inter', sans-serif;
    --container-pd: 5vw;
    --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; line-height: 1.3; }
.container { padding: 0 var(--container-pd); max-width: 1800px; margin: 0 auto; }
.clean-text { font-family: var(--font-clean); font-weight: 300; }
.red-script { font-family: var(--font-script); color: var(--red); }
.line { width: 100%; height: 1px; background: rgba(0,0,0,0.1); }

/* Header & Footer Styles (Shared) */
.header { height: 120px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--font-script); font-size: 2.5rem; color: var(--red); text-decoration: none; position: relative; top: 5px; }
.nav a { text-decoration: none; color: var(--black); font-family: var(--font-clean); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-left: 40px; opacity: 0.6; transition: 0.3s; }
.nav a:hover, .nav a.active { opacity: 1; color: var(--red); }
.status { display: flex; align-items: center; font-size: 0.75rem; color: var(--gray); letter-spacing: 1px; text-transform: uppercase; }
.red-dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; margin-right: 10px; }

.footer { padding: 50px var(--container-pd); }
/* --- Footer-ի վերջնական ոճերը --- */
.footer { 
    padding: 100px var(--container-pd) 50px;
}

.footer-wrap {
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Հիմնադրման տարեթվի ոճը */
.est-date {
    display: block;
    font-family: var(--font-clean);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 8px;
    color: var(--black);
}

.f-center {
    text-align: center;
    line-height: 1.8;
    color: var(--gray);
}

.f-right {
    display: flex;
    gap: 30px;
}

.f-right a {
    text-decoration: none;
    color: var(--black);
    transition: 0.3s ease;
}

.f-right a:hover { 
    color: var(--red); 
}

/* Մոբայլ տարբերակ */
@media (max-width: 900px) {
    .footer-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }
    .f-right {
        gap: 20px;
    }
}

/* ==========================================================================
   2. INDEX PAGE (Վերականգնված Ձեռագիր Ոճը)
   ========================================================================== */
.home-page .hero { padding: 10vh var(--container-pd) 15vh; }
.home-page .hero-title { font-family: var(--font-clean); font-size: clamp(3rem, 9vw, 7rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
.home-page .hero-title .red-script { font-size: 1.3em; display: block; margin-top: -20px; }

/* Այս հատվածը վերականգնում է Index-ի ծառայությունների տեսքը */
.home-page .services { padding-bottom: 100px; }
.home-page .section-header { display: flex; align-items: center; gap: 20px; margin-bottom: 60px; }
.home-page .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); white-space: nowrap; }

.home-page .service-item { 
    padding: 50px 0; 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    display: flex; 
    align-items: baseline; 
    transition: 0.4s var(--easing); 
}
.home-page .service-item:hover { padding-left: 20px; border-bottom-color: var(--red); }
.home-page .num { font-size: 0.85rem; color: var(--red); width: 80px; }

.home-page .script-heading { 
    font-family: var(--font-script); 
    font-size: 3rem; 
    font-weight: 400; 
    color: var(--black); 
    margin-right: 60px; 
    width: 40%; 
    transition: 0.4s ease; 
}
.home-page .service-item:hover .script-heading { color: var(--red); }

/* ==========================================================================
   3. PORTFOLIO CANVAS (Global Styles)
   ========================================================================== */
.portfolio-canvas { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 100px 60px; 
    padding: 80px 0; 
}

/* Լայն նախագծի համար */
.canvas-item.wide { grid-column: span 2; }

.canvas-link { text-decoration: none; color: var(--black); display: block; }

.canvas-img-wrapper { 
    width: 100%; 
    aspect-ratio: 16 / 10; 
    overflow: hidden; 
    position: relative; 
    margin-bottom: 30px; 
    border: 1px solid rgba(0,0,0,0.05); 
}

/* Լայն նախագծի նկարի չափսը */
.canvas-item.wide .canvas-img-wrapper { aspect-ratio: 21 / 10; }

.canvas-img-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 1.2s var(--easing); 
}

/* Showcase Overlay (View Case) */
.canvas-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.4s ease; z-index: 2;
}

.canvas-overlay span { 
    font-size: 4rem; 
    color: var(--white); 
    font-family: var(--font-script); 
    transform: translateY(20px); 
    transition: 0.4s ease; 
}

.canvas-link:hover .canvas-overlay { opacity: 1; }
.canvas-link:hover .canvas-overlay span { transform: translateY(0); }
.canvas-link:hover img { transform: scale(1.05); }

/* Նախագծի մանրամասների հավասարեցում */
.canvas-details { 
    display: flex; 
    align-items: baseline; 
    border-top: 1px solid rgba(0,0,0,0.1); 
    padding-top: 20px; 
}

.c-num { font-size: 0.85rem; color: var(--red); width: 60px; font-family: var(--font-clean); }
.c-title { 
    font-size: 2.5rem; 
    font-weight: 400; 
    font-family: var(--font-script); 
    margin-right: 30px; 
    color: var(--black); 
    text-transform: none; /* Որպեսզի ձեռագիրն ավելի գեղեցիկ լինի */
}
  
/* Animation */
.fade-in, .fade-up { opacity: 0; transform: translateY(30px); transition: 1.2s var(--easing); }
.fade-in.visible, .fade-up.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   5. SERVICES PAGE ONLY (.services-page)
   ========================================================================== */
.services-page .services-hero {
    padding: 100px 0 60px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.services-page .hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-family: var(--font-clean);
    font-weight: 300;
    line-height: 1.1;
}

.services-page .services-intro-text {
    max-width: 600px;
    margin-top: 30px;
    font-size: 1.2rem;
    color: var(--gray);
    line-height: 1.6;
}

.services-page .expertise-details {
    padding: 40px 0 100px;
}

.services-page .expertise-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    padding: 80px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.services-page .exp-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.services-page .script-heading {
    font-family: var(--font-script);
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--black);
}

.services-page .exp-content p {
    font-size: 1.1rem;
    margin-bottom: 40px;
    color: var(--black);
}

.services-page .exp-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.services-page .exp-list li {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 25px;
    position: relative;
    color: var(--gray);
}

.services-page .exp-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
}

@media (max-width: 900px) {
    .services-page .expertise-row { grid-template-columns: 1fr; padding: 40px 0; }
    .services-page .script-heading { font-size: 2.8rem; }
}

/* ==========================================================================
   ANIMATIONS (Reveal from bottom)
   ========================================================================== */

/* Սկզբնական վիճակ. տարրը 60px ներքև է և թափանցիկ */
.fade-in, .fade-up { 
    opacity: 0; 
    transform: translateY(60px); 
    transition: transform 1.2s var(--easing), opacity 1.2s var(--easing); 
    will-change: transform, opacity;
}

/* Ակտիվ վիճակ. տարրը բարձրանում է իր տեղը և դառնում տեսանելի */
.fade-in.visible, .fade-up.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* ==========================================================================
   VIEW MORE BUTTON
   ========================================================================== */
.view-more-container {
    display: flex;
    justify-content: center;
    padding: 60px 0 100px; /* Վերևից և ներքևից բացատներ */
}

.view-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 20px 50px;
    border: 2px solid var(--black);
    text-decoration: none;
    color: var(--black);
    font-family: var(--font-clean);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s var(--easing);
    position: relative;
    background: transparent;
}

/* Hover էֆեկտ. կոդը լցվում է սևով, տեքստը դառնում է սպիտակ */
.view-more-btn:hover {
    background-color: var(--black);
    color: var(--white);
}

.btn-arrow {
    color: var(--red); /* Մեր բրենդային կարմիրը */
    font-size: 1.2rem;
    transition: transform 0.4s var(--easing);
}

/* Hover ժամանակ սլաքի շարժումը դեպի աջ */
.view-more-btn:hover .btn-arrow {
    transform: translateX(10px);
    color: var(--white); /* Սլաքը սպիտակում է սև ֆոնի վրա */
}

@media (max-width: 768px) {
    .view-more-btn {
        width: 100%;
        justify-content: center;
        padding: 18px 30px;
    }
}

/* ==========================================================================
   UNIFIED HERO TITLE (Index & About Consistency)
   ========================================================================== */
.home-page .hero-title,
.about-page .hero-title {
    font-family: var(--font-clean);
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    padding: 10vh 0 5vh;
}

.home-page .hero-title .red-script,
.about-page .hero-title .red-script {
    font-size: 1.3em;
    display: block;
    margin-top: -20px;
}

/* ==========================================================================
   ABOUT PAGE BEAUTIFICATION
   ========================================================================== */

/* Trinity Section */
.about-trinity {
    padding: 60px 0;
    margin-bottom: 80px;
}

.trinity-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 40px 0;
    font-family: var(--font-clean);
    font-size: clamp(1rem, 3vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 300;
}

.trinity-wrap .dot {
    font-size: 1.5em;
    line-height: 0;
}

/* Manifesto Grid */
.about-manifesto {
    padding-bottom: 120px;
}

.manifesto-grid {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 40px;
}

.manifesto-text {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: -0.01em;
}

/* Metrics (Refined) */
.about-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 80px 0;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.metric-item .label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--red);
    margin-bottom: 15px;
}

.metric-value {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    font-weight: 300;
}

/* Info Grid Styling */
.about-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    padding: 100px 0 150px;
}

.about-info-grid p {
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--black);
}

/* Responsive Logic */
@media (max-width: 900px) {
    .manifesto-grid, .about-info-grid, .about-metrics-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .trinity-wrap { gap: 15px; letter-spacing: 0.1em; }
}

/* ==========================================================================
   THE METAMORPHOSIS (Rebranding Design)
   ========================================================================== */
.about-evolution {
    padding: 100px 0;
    margin-bottom: 50px;
}

.evolution-grid {
    display: grid;
    grid-template-columns: 1fr 0.5fr 1fr;
    align-items: center;
    text-align: center;
}

.evo-block.old h3 {
    font-size: 2rem;
    opacity: 0.3; /* Հին բրենդը ստվերված է */
    text-decoration: line-through;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.evo-transition {
    position: relative;
    padding: 0 20px;
}

.evo-transition .red-script {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

.evo-arrow {
    font-size: 2rem;
    color: var(--red);
    font-weight: 300;
}

.evo-block.new h3 {
    font-size: 4rem; /* Նոր բրենդը շեշտված է */
    color: var(--black);
    line-height: 1;
}

.evo-block .label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray);
    margin-bottom: 15px;
}

/* Մոբայլ տարբերակ */
@media (max-width: 900px) {
    .evolution-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .evo-block.new h3 { font-size: 3rem; }
}

/* ==========================================================================
   GLOBAL HERO (Այժմ գործում է բոլոր էջերի համար)
   ========================================================================== */
.hero { padding: 10vh var(--container-pd) 15vh; }

.hero-title { 
    font-family: var(--font-clean); 
    font-size: clamp(3rem, 9vw, 7rem); 
    font-weight: 300; 
    line-height: 1.1; 
    letter-spacing: -0.02em; 
}

.hero-title .red-script { 
    font-size: 1.3em; 
    display: block; 
    margin-top: -20px; 
}

.hero-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 60px;
}

/* ==========================================================================
   CONTACT GALLERY: THE STUDIO ECHO
   ========================================================================== */
.contact-gallery {
    padding-bottom: 150px;
}

.contact-echo-item {
    padding: 80px 0;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.echo-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--red);
    margin-bottom: 30px;
}

.echo-link {
    font-size: clamp(1.8rem, 5vw, 4rem);
    text-decoration: none;
    color: var(--black);
    font-weight: 300;
    transition: 0.5s var(--easing);
    display: inline-block;
}

.echo-link:hover {
    color: var(--red);
    transform: translateX(20px);
}

.echo-status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.echo-status-row p {
    font-size: 1.5rem;
}

#yerevan-time {
    font-size: 2.2rem;
    margin-left: 10px;
}

.social-minimal a {
    text-decoration: none;
    color: var(--black);
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: 0.3s;
}

.social-minimal a:hover {
    color: var(--red);
}

@media (max-width: 900px) {
    .echo-status-row { flex-direction: column; gap: 30px; }
    .hero-footer { flex-direction: column; align-items: flex-start; gap: 30px; }
}

/* Footer-ի հղումների (հեռախոս և էլ. հասցե) ընդհանուր ոճը */
.footer-link {
    text-decoration: none;
    color: var(--gray); /* Օգտագործում ենք ձեր սահմանած մոխրագույնը */
    transition: 0.3s var(--easing); /* Օգտագործում ենք ձեր նախընտրած սահունությունը */
    display: block;
    margin-top: 5px;
    font-family: var(--font-clean);
}

.footer-link:hover {
    color: var(--red); /* Մկնիկը վրան պահելիս դառնում է FORGES-ի կարմիրը */
    padding-left: 5px; /* Նուրբ շարժման էֆեկտ */
}

/* Ծառայությունների հղումների ոճը index-ում */
.service-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.service-item {
    position: relative;
    padding-right: 50px; /* Տեղ սլաքի համար */
}

.service-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--red);
    opacity: 0;
    transition: 0.4s var(--easing);
}

.service-item-link:hover .service-arrow {
    opacity: 1;
    transform: translateY(-50%) translateX(10px);
}

/* ==========================================================================
   SERVICES PAGE LINK REFINEMENT
   ========================================================================== */
.expertise-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: 0.4s var(--easing);
}

.expertise-row {
    transition: background-color 0.4s var(--easing), padding-left 0.4s var(--easing);
}

/* Hover էֆեկտ ամբողջ տողի համար */
.expertise-link:hover .expertise-row {
    background-color: rgba(230, 0, 0, 0.02); /* Շատ նուրբ կարմիր ֆոն */
    padding-left: 20px;
}

.expertise-link:hover .script-heading {
    color: var(--red);
}

/* Սլաքի և "Explore" տեքստի անիմացիան */
.exp-footer {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.4s var(--easing);
}

.expertise-link:hover .exp-footer {
    opacity: 1;
    transform: translateX(0);
}

.view-detail {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--red);
    font-weight: 500;
}

.service-arrow {
    font-size: 1.2rem;
    color: var(--red);
}

/* Footer հղումների վերջնական ճշգրտում */
.footer-link {
    text-decoration: none;
    color: var(--gray);
    display: block;
    margin-top: 5px;
    transition: 0.3s var(--easing);
}

.footer-link:hover {
    color: var(--red);
}

/* ==========================================================================
   PAGE TRANSITION / PRELOADER (FIXED)
   ========================================================================== */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 10000; /* Ապահովում ենք, որ լինի ամեն ինչից վերև */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.5s ease, visibility 0.5s;
    pointer-events: all;
}

/* Անհետացման վիճակը */
.loader.loaded {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s var(--easing);
}

.loader-content.active {
    opacity: 1;
    transform: translateY(0);
}

.loader-thought {
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.loader-thought.red-script {
    font-size: 3rem;
    text-transform: none;
    letter-spacing: 0;
    margin-top: -10px;
}

.loader-line {
    width: 0;
    height: 1px;
    background: var(--red);
    margin: 20px auto 0;
    transition: width 1s var(--easing);
}

.loader-content.active .loader-line {
    width: 100px;
}

/* ==========================================================================
   AGENCY CASE STUDY SYSTEM (FORGES Standards)
   ========================================================================== */

/* Inward Column Logic (Strictly not edge-to-edge) */
.inward-column {
    max-width: 1250px; 
    margin: 0 auto;
    padding: 0 5vw;
}

/* Mathematical Vertical Spacing (Strictly Equal) */
.unit-space {
    padding: 150px 0;
}

/* Red Label Styling */
.red-label {
    color: var(--red) !important;
    display: block;
    font-family: var(--font-clean);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Meta Strip */
.meta-strip {
    display: flex;
    gap: 80px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Brand DNA Specialized Section */
.brand-dna-section {
    padding-top: 40px;
}

.dna-colors {
    display: flex;
    gap: 40px;
    margin-top: 60px;
}

.swatch-item {
    text-align: center;
}

.swatch {
    width: 120px;
    height: 120px;
    border-radius: 0; /* Քառակուսի */
    margin-bottom: 15px;
    border: 1px solid rgba(0,0,0,0.1); /* Բարակ եզրագիծ */
}

.dna-typography {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Gallery Controls (Inward) */
.img-frame { width: 100%; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
/* Հովեր էֆեկտ նկարների համար (ըստ ցանկության) */
.img-frame:hover img { transform: scale(1.03); }

.gallery-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.gallery-asym-grid { display: flex; flex-direction: column; gap: 40px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.gallery-row-final { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }

/* Next Project Transition (Editorial) */
.next-work-editorial { padding-top: 60px; display: flex; flex-direction: column; align-items: center; }
.next-label-strip { width: 100%; display: flex; justify-content: space-between; margin-bottom: 40px; }
.next-project-card { text-decoration: none; display: block; width: 100%; max-width: 800px; position: relative; }
.next-img-preview { width: 100%; height: 350px; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); }
.next-img-preview img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 1s var(--easing); opacity: 0.7; }
.next-title-box { margin-top: -50px; position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; }
.next-project-card h2 { font-size: clamp(4rem, 10vw, 8rem); color: var(--white); transition: 0.5s var(--easing); }
.next-arrow-svg { width: 80px; color: var(--red); margin-top: 20px; transition: 0.5s; }

.next-project-card:hover .next-img-preview img { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }
.next-project-card:hover h2 { color: var(--red); transform: translateY(-10px); }

@media (max-width: 900px) {
    .meta-strip, .gallery-row-3, .pair, .gallery-row-final, .dna-colors { grid-template-columns: 1fr; gap: 40px; flex-direction: column; }
    .next-img-preview { height: 250px; }
    .swatch { width: 100%; } /* Մոբայլում սվոչները լայնանում են */
}

/* Service Detail Specifics */
.service-logic-grid {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 80px;
    padding-top: 40px;
}

.five-line-text {
    font-size: 1.3rem;
    line-height: 1.8;
    max-width: 800px;
    opacity: 0.9;
}

.logic-aside h2 {
    font-size: 3rem;
}

/* Portfolio grid internal spacing */
.service-detail-master .portfolio-canvas {
    padding: 60px 0;
}

/* Ensuring Next Service card is clean without image if preferred */
.next-work-editorial .next-title-box {
    margin-top: 0;
    padding: 60px 0;
}

@media (max-width: 900px) {
    .service-logic-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Next Service Transition Visibility Fix */
.service-next-link .next-title-box h2 {
    color: var(--black); /* Փոխում ենք սպիտակից սևի */
    transition: 0.4s var(--easing);
}

.service-next-link:hover .next-title-box h2 {
    color: var(--red); /* Hover-ի ժամանակ դառնում է կարմիր */
    transform: translateY(-10px);
}

.service-next-link .next-arrow-svg {
    color: var(--red);
}

/* Ընդհանուր մաքուր դիզայնի համար */
.service-detail-master .hero-title {
    padding: 100px 0 50px;
}

.services-intro-text {
    max-width: 700px;
}

/* ==========================================================================
   INFINITE HERO ANIMATION: THE BREATHING STRATEGY
   ========================================================================== */

/* 1. Ձեռագիր տեքստի լողացող էֆեկտ (The Floating Soul) */
@keyframes scriptFloat {
    0%, 100% {
        transform: translateY(0) rotate(-1deg);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-10px) rotate(1deg); /* Նուրբ բարձրացում և թեքում */
        opacity: 1;
        text-shadow: 0 10px 20px rgba(230, 0, 0, 0.1); /* Թեթև կարմիր լուսավորություն */
    }
}

/* 2. Ռազմավարական գծի անվերջ շարժում (The Strategic Horizon) */
@keyframes lineExpand {
    0% {
        width: 0;
        left: 0;
        opacity: 0;
    }
    50% {
        width: 100%;
        left: 0;
        opacity: 0.5;
    }
    100% {
        width: 0;
        left: 100%;
        opacity: 0;
    }
}

/* Կիրառում ենք անիմացիաները */

/* Հենց ձեռագիր տեքստի վրա */
.service-detail-master .hero-title .red-script {
    display: inline-block;
    animation: scriptFloat 5s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Ստեղծում ենք նոր անիմացիոն գիծ վերնագրի տակ */
.service-detail-master .hero-title::after {
    content: '';
    display: block;
    position: relative;
    bottom: -20px;
    height: 1px;
    background: var(--red);
    animation: lineExpand 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Լրացուցիչ. ողջ վերնագրի համար շատ նուրբ "մշուշային" էֆեկտ */
.service-detail-master .hero-title {
    animation: heroBreathe 10s ease-in-out infinite;
}

@keyframes heroBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); } /* Հազիվ նկատելի մեծացում */
}

/* ==========================================================================
   ULTRA-MINIMAL NEXT SERVICE TRANSITION
   ========================================================================== */
.next-service-master {
    padding-top: 80px;
    position: relative;
}

.next-service-link {
    text-decoration: none;
    display: block;
    margin-top: 40px;
}

/* Գլխավոր վերնագիրը */
.next-main-title {
    font-size: clamp(4rem, 12vw, 10rem); /* Հսկայական չափս */
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--black);
    text-transform: uppercase;
    transition: transform 0.8s var(--easing), opacity 0.5s;
}

/* Ձեռագիր հատվածը, որը սկզբում թաքնված է */
.next-hover-title {
    font-size: clamp(3rem, 10vw, 8rem);
    margin-top: -20px;
    opacity: 0;
    transform: translateY(30px) rotate(2deg);
    transition: all 0.8s var(--easing);
    pointer-events: none;
}

/* Hover էֆեկտ. Վերնագիրը բարձրանում է, ձեռագիրը հայտնվում է */
.next-service-link:hover .next-main-title {
    transform: translateY(-20px);
    opacity: 0.2; /* Տեքստը դառնում է թափանցիկ, որ ձեռագիրը փայլի */
}

.next-service-link:hover .next-hover-title {
    opacity: 1;
    transform: translateY(-40px) rotate(0deg);
}

/* Ստորին գիծը և տեքստը */
.next-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    overflow: hidden;
}

.explore-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--red);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s var(--easing);
}

.next-arrow-long {
    height: 1px;
    background: var(--red);
    width: 0;
    transition: width 0.8s var(--easing);
}

/* Hover անիմացիաներ ստորին հատվածի համար */
.next-service-link:hover .explore-text {
    opacity: 1;
    transform: translateX(0);
}

.next-service-link:hover .next-arrow-long {
    width: 100px;
}

@media (max-width: 900px) {
    .next-main-title { font-size: 4rem; }
    .next-hover-title { font-size: 3rem; }
}

/* ==========================================================================
   AGENCY PROJECT REVEAL (The Editorial Transition)
   ========================================================================== */
.next-project-master {
    padding-top: 100px;
    position: relative;
}

.next-project-reveal {
    text-decoration: none;
    display: block;
    margin-top: 50px;
    overflow: hidden;
}

.project-title-stack {
    position: relative;
    padding-bottom: 20px;
}

/* Հիմնական վերնագիրը (30 Store) */
.project-main-name {
    font-size: clamp(5rem, 15vw, 12rem); /* Ավելի մեծ, քան ծառայություններինը */
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--black);
    text-transform: uppercase;
    font-weight: 300;
    transition: all 0.9s var(--easing);
}

/* Ձեռագիր հատվածը */
.project-script-name {
    font-size: clamp(3rem, 10vw, 8rem);
    color: var(--red);
    position: absolute;
    top: 50%;
    left: 10%;
    opacity: 0;
    transform: translateY(20px) rotate(5deg);
    transition: all 0.8s var(--easing);
    pointer-events: none;
}

/* Hover էֆեկտներ */
.next-project-reveal:hover .project-main-name {
    transform: translateY(-30px);
    opacity: 0.1; /* Տեքստը դառնում է գրեթե անտեսանելի */
    letter-spacing: 0.05em; /* Տառերը մի փոքր բացվում են */
}

.next-project-reveal:hover .project-script-name {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg); /* Հայտնվում է հենց մեջտեղում */
}

/* Ստորին հատվածի զարգացումը */
.project-next-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.explore-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--red);
    opacity: 0.5;
    transition: opacity 0.4s;
}

.project-arrow-line {
    height: 1px;
    background: var(--red);
    width: 60px;
    transition: width 0.8s var(--easing);
}

.next-project-reveal:hover .explore-label {
    opacity: 1;
}

.next-project-reveal:hover .project-arrow-line {
    width: 200px; /* Գիծը երկարում է */
}

/* Մոբայլի համար */
@media (max-width: 900px) {
    .project-main-name { font-size: 4.5rem; }
    .project-script-name { font-size: 3rem; left: 0; }
    .project-arrow-line { width: 40px; }
}

/* ==========================================================================
   ADAPTIVE DESIGN (Mobile & Tablet)
   ========================================================================== */

/* 1. Fluid Typography & Spacing */
:root {
    --container-pd: clamp(20px, 5vw, 80px); /* Հեռախոսի վրա ավելի փոքր padding */
}

/* 2. Responsive Hero Section */
.hero-title {
    font-size: clamp(2.5rem, 9vw, 7rem) !important;
    line-height: 1.1;
}

.unit-space {
    padding: clamp(60px, 12vw, 150px) 0; /* 150px-ը դառնում է 60px հեռախոսի վրա */
}

/* 3. Portfolio & Gallery Grid Fix */
@media (max-width: 1024px) {
    .portfolio-canvas {
        grid-template-columns: 1fr 1fr; /* Պլանշետների համար 2 սյունակ */
        gap: 30px;
    }
    
    .gallery-row-3 {
        grid-template-columns: 1fr 1fr; /* Երրորդ նկարը կիջնի ներքև */
    }
}

@media (max-width: 768px) {
    /* Header Adaptation */
    .header {
        height: 90px;
    }
    
    /* Հեռացնում ենք Nav-ը և սարքում Burger (կամ թողնում ենք սյունակով) */
    .nav {
        display: none; /* Հեռախոսի համար սովորաբար Burger Menu է պետք */
    }

    .portfolio-canvas, 
    .gallery-row-3, 
    .gallery-row-final, 
    .pair, 
    .service-logic-grid, 
    .about-metrics-grid,
    .about-info-grid {
        grid-template-columns: 1fr !important; /* Ամեն ինչ դառնում է 1 սյունակ */
        gap: 40px;
    }

    /* Inward Column-ը հեռախոսի վրա պետք է ավելի լայն լինի */
    .inward-column {
        padding: 0 25px;
    }

    /* Massive Next Service Transition-ի փոքրացում */
    .next-main-title {
        font-size: 3rem !important;
    }
    
    .next-hover-title {
        font-size: 2.2rem !important;
    }
}

/* 4. Service Detail Logic Fix */
.service-logic-grid {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 40px;
}

/* Burger Icon */
.burger-menu {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 10001;
    transition: 0.3s;
}

.burger-line {
    width: 25px;
    height: 1px;
    background-color: var(--black);
    transition: 0.4s var(--easing);
}

/* Mobile Overlay Styles */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.mobile-nav-overlay.active {
    transform: translateY(0);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.mobile-nav-links a {
    font-size: 2rem;
    text-decoration: none;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 4px;
}

/* Show burger only on mobile */
@media (max-width: 768px) {
    .burger-menu { display: flex; }
    .nav { display: none; }
    
    /* Active Burger State (X) */
    .burger-menu.open .burger-line:nth-child(1) {
        transform: translateY(3.5px) rotate(45deg);
        background-color: var(--red);
    }
    .burger-menu.open .burger-line:nth-child(2) {
        transform: translateY(-3.5px) rotate(-45deg);
        background-color: var(--red);
    }
}

/* ==========================================================================
   PORTFOLIO ADAPTATION FIX
   ========================================================================== */

/* Պլանշետների համար (1024px-ից ցածր) */
@media (max-width: 1024px) {
    .portfolio-canvas {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px; /* Ավելի փոքր բացատներ */
    }
}

/* Հեռախոսների համար (768px-ից ցածր) */
@media (max-width: 768px) {
    .portfolio-canvas {
        grid-template-columns: 1fr !important; /* Միայն 1 սյունակ */
        gap: 60px; /* Ուղղահայաց հեռավորություն նախագծերի միջև */
        padding: 40px 0;
    }

    /* Ստիպում ենք "Wide" տարրին զբաղեցնել միայն 1 սյունակ */
    .canvas-item.wide {
        grid-column: span 1 !important;
    }

    /* Նկարների չափսերի ուղղում հեռախոսի վրա */
    .canvas-img-wrapper {
        aspect-ratio: 1 / 1; /* Հեռախոսի վրա քառակուսի նկարներն ավելի լավ են նայվում */
    }

    .canvas-item.wide .canvas-img-wrapper {
        aspect-ratio: 1 / 1; /* Լայն նախագծերը նույնպես դառնում են քառակուսի */
    }

    /* Տեքստային հատվածի փոքրացում */
    .c-title {
        font-size: 1.8rem;
        margin-right: 15px;
    }

    .canvas-details {
        padding-top: 15px;
        flex-wrap: wrap; /* Որպեսզի տեքստը տեղավորվի */
    }

    .canvas-details .clean-text {
        width: 100%;
        margin-top: 5px;
        font-size: 0.75rem;
    }
}

/* Saroom Specific Branding */
:root {
    --saroom-emerald: #1b3a36; /* Մուգ զմրուխտյա նախշից */
    --saroom-stone: #d9e2e1;    /* Բաց քարե երանգ */
    --font-bebas: 'Arm Hmks Bebas Neue', 'Bebas Neue', sans-serif;
}

/* Saroom Headline Style */
.saroom-page .hero-title, 
.saroom-page .next-main-title,
.saroom-page .c-title {
    font-family: var(--font-bebas);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.saroom-pattern-bg {
    background-image: url('1.pdf'); /* Ձեր ուղարկած նախշը */
    background-repeat: repeat;
    background-size: 300px;
    opacity: 0.05;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
}

/* Saroom Floral Overlay */
.floral-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(27, 58, 54, 0.4), rgba(26, 26, 26, 0.8)); /* Emerald to Charcoal gradient */
    z-index: 1;
}

.img-frame.floral-frame img {
    filter: contrast(1.1) saturate(1.1); /* Ծաղիկների գույներն ավելի վառ ենք դարձնում */
}

/* --- Permanent Gate Styles --- */
.permanent-gate {
    background-color: var(--white);
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Էջը չի սքրոլվում */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.gate-container {
    text-align: center;
    /* Օգտագործում ենք ձեր շնչառության անիմացիան */
    animation: heroBreathe 10s ease-in-out infinite;
}

.statement-text {
    font-size: clamp(2rem, 8vw, 5rem);
    margin: 0;
}

.statement-text.red-script {
    font-size: clamp(3.5rem, 12vw, 8rem);
    margin-top: -15px;
    /* Օգտագործում ենք ձեր լողացող ձեռագրի անիմացիան */
    animation: scriptFloat 5s ease-in-out infinite !important;
}

/* Անվերջ ընդլայնվող և կրճատվող գիծ */
.infinite-line {
    height: 1px;
    background-color: var(--red);
    margin: 30px auto 0;
    width: 0;
    /* Օգտագործում ենք ձեր ռազմավարական գծի անիմացիան */
    animation: lineExpand 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Համոզվեք, որ fade-in-ը միշտ տեսանելի է այս էջում */
.permanent-gate .fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* --- Infinite Loader Logic --- */
.infinite-forge {
    background-color: var(--white);
    overflow: hidden; /* Անջատում ենք սքրոլը */
    height: 100vh;
    width: 100vw;
}

.loader-locked {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Կենտրոնական տեքստի անվերջ "շնչառությունը" */
.loader-content.active {
    animation: contentBreathe 4s ease-in-out infinite;
}

@keyframes contentBreathe {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* Անվերջ կարմիր գիծը */
.infinite-line {
    width: 0;
    height: 1px;
    background: var(--red);
    margin: 30px auto;
    animation: linePulse 3s cubic-bezier(0.85, 0, 0.15, 1) infinite;
}

@keyframes linePulse {
    0% { width: 0; opacity: 0; }
    50% { width: 150px; opacity: 1; }
    100% { width: 0; opacity: 0; }
}

/* Status text styling */
.forge-status {
    font-size: 0.7rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gray);
    margin-top: 20px;
    opacity: 0.6;
}