/*
Theme Name: Arch Creative 2026 - Clean
Theme URI: 
Author: Arch Creative
Author URI: 
Description: 
Version: 2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: ArchCreative2026
*/


:root{
    --black:#020204;
    --grey:#e9e7e5;
    --white:#F7F2F0;
    --primary:#042826;
    --green:#00AA44;
    --blue:#9CC9FF;
    --purple:##5929FF;
    --purple-light:#DBB8FF;
    --pink:#EB3BCA;
    --pink-light:#FFC5FB;
    --orange:#FF5E33;
    --orange-light:#FFC05A;
    --S:0.75rem;
    --M:1rem;
    --L:1.5rem;
    --XL:2rem;
    --XXL:3rem;
}


@font-face {
    font-family: 'articulat';
    src: url('/wp-content/themes/arch26/font/ed912572923b301a744d70bd2b6a67c3.woff2') format('woff2'),
        url('/wp-content/themes/arch26/font/ed912572923b301a744d70bd2b6a67c3.woff') format('woff'),
        url('/wp-content/themes/arch26/font/ed912572923b301a744d70bd2b6a67c3.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'articulat';
    src: url('/wp-content/themes/arch26/font/11a257e2222711f05d4b9f2bae515776.woff2') format('woff2'),
        url('/wp-content/themes/arch26/font/11a257e2222711f05d4b9f2bae515776.woff') format('woff'),
        url('/wp-content/themes/arch26/font/11a257e2222711f05d4b9f2bae515776.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#passionmode { margin-top:2rem;text-decoration: none;display:block; }

* { box-sizing: border-box;color:var(--primary); }
.invert * { color:var(--white); }
html, body { font-family:'articulat', sans-serif;padding:0;margin:0;color:var(--primary); }
body { overflow-x: hidden;background:var(--white); transition: background 0.6s ease; }



.container-outer { width:100%;max-width:1728px;margin:0 auto;padding:0 var(--XL);}
.container-inner { width:100%;max-width:1572px;margin:0 auto;padding:5rem 0; }
.container-text  { width:100%;max-width:780px;margin:0 auto; }

a.button { margin:var(--L) 0;font-size:1.25rem;font-weight:500;text-decoration:none;color:var(--white);background:var(--primary);padding:0.5rem 0.8rem;border-radius:100rem;display:inline-block;position:relative; }
a.button.arrow::after { position:relative;top:1px;margin-left:0.5rem;background:url("/wp-content/themes/arch26/img/arrow-right-white.svg") no-repeat center;background-size:contain;;content:'';width:0.9rem;height:0.9rem;display:inline-block; }
a.button.white { background:var(--white);color:var(--primary); }
a.button.white.arrow::after { background:url("/wp-content/themes/arch26/img/arrow-right-primary.svg") no-repeat center;background-size:contain;; }

a.button:hover { background:var(--green); }


.h-5xl, .h-4xl, .h-3xl, .h-2xl, .h-xl, .h-l, .h-m, .h-s, .h-xs { display:block; }

.h-5xl { font-size:clamp(3rem,10vw,7.5rem); font-style:normal; font-weight:800; line-height:clamp(3rem,9vw,7rem); letter-spacing:clamp(-0.15rem,-0.5vw,-0.375rem); margin-bottom:clamp(1rem,3vw,2.5rem); }
.h-4xl { font-size:clamp(2.75rem,9vw,6.75rem); font-style:normal; font-weight:800; line-height:clamp(2.75rem,8.5vw,6.5rem); letter-spacing:clamp(-0.12rem,-0.45vw,-0.3375rem); margin-bottom:clamp(0.9rem,2.7vw,2.25rem); }
.h-3xl { font-size:clamp(2.25rem,7vw,5.25rem); font-style:normal; font-weight:800; line-height:clamp(2.25rem,6.5vw,5rem); letter-spacing:clamp(-0.09rem,-0.3vw,-0.21rem); margin-bottom:clamp(0.75rem,2vw,1.75rem); }
.h-2xl { font-size:clamp(2rem,6vw,4.5rem); font-style:normal; font-weight:800; line-height:clamp(2rem,5.5vw,4.25rem); letter-spacing:clamp(-0.07rem,-0.25vw,-0.18rem); margin-bottom:clamp(0.65rem,1.8vw,1.5rem); }
.h-xl { font-size:clamp(1.75rem,5vw,3.75rem); font-style:normal; font-weight:800; line-height:clamp(1.75rem,4.5vw,3.5rem); letter-spacing:clamp(-0.05rem,-0.2vw,-0.1125rem); margin-bottom:clamp(0.55rem,1.5vw,1.25rem); }
.h-l { font-size:clamp(1.5rem,4vw,3rem); font-style:normal; font-weight:800; line-height:clamp(1.5rem,3.5vw,2.75rem); letter-spacing:clamp(-0.04rem,-0.15vw,-0.09rem); margin-bottom:clamp(0.45rem,1.2vw,1rem); }
.h-m { font-size:clamp(1.25rem,3vw,2rem); font-style:normal; font-weight:800; line-height:clamp(1.25rem,2.5vw,1.75rem); letter-spacing:clamp(-0.02rem,-0.1vw,-0.04rem); margin-bottom:clamp(0.35rem,1vw,0.75rem); }
.h-s { font-size:clamp(1rem,2.5vw,1.5rem); font-style:normal; font-weight:800; line-height:clamp(1rem,2vw,1.5rem); letter-spacing:clamp(-0.015rem,-0.08vw,-0.03rem); margin-bottom:clamp(0.3rem,0.8vw,0.6rem); }

.h-xs { font-size:clamp(0.875rem,2vw,1rem); font-style:normal; font-weight:800; line-height:clamp(1rem,2vw,1.125rem); letter-spacing:clamp(-0.008rem,-0.05vw,-0.01rem); margin-bottom:clamp(0.25rem,0.6vw,0.5rem); }
.t-3xl { font-size:clamp(1.75rem,5vw,3rem); font-style:normal; font-weight:500; line-height:clamp(1.75rem,5vw,3rem); letter-spacing:clamp(-0.015rem,-0.1vw,-0.03rem); }
.t-2xl { font-size:clamp(1.5rem,4vw,2.25rem); font-style:normal; font-weight:500; line-height:clamp(1.5rem,4vw,2.25rem); letter-spacing:clamp(-0.012rem,-0.08vw,-0.0225rem); }
.t-xl { font-size:clamp(1.25rem,3vw,1.5rem); font-style:normal; font-weight:500; line-height:clamp(1.5rem,3vw,2rem); letter-spacing:clamp(-0.01rem,-0.05vw,-0.015rem); }
.t-l { font-size:clamp(1.125rem,2.5vw,1.25rem); font-style:normal; font-weight:500; line-height:clamp(1.25rem,2.5vw,1.5rem); letter-spacing:clamp(-0.008rem,-0.04vw,-0.0125rem); }
.t-m, p { font-size:clamp(0.95rem,2vw,1rem); font-style:normal; font-weight:500; line-height:clamp(1.1rem,2vw,1.25rem); letter-spacing:clamp(-0.006rem,-0.03vw,-0.01rem); }
.t-s { font-size:clamp(0.8rem,1.5vw,0.875rem); font-style:normal; font-weight:500; line-height:clamp(1rem,1.5vw,1.125rem); letter-spacing:clamp(-0.005rem,-0.02vw,-0.00875rem); }

.eyebrow { text-transform:uppercase; }

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

.rounded { border-radius:var(--XXL);overflow:hidden; }

/* ==== NAV === */
.site-header { position:fixed; top:0;left:0;right:0;z-index:9999;transform:translateY(0);transition:all 0.25s ease;background:var(--white);border-bottom:1px solid transparent; }
.header-hidden { transform:translateY(-100%); }
.header-spacer { height:var(--header-height, 100px); }
.header-active { /* box-shadow:0rem 0rem 1rem rgba(0,0,0,0.2); */ border-bottom:1px solid var(--primary); }
header .container-inner { padding:1rem 0;}
nav { display:flex;justify-content: space-between;gap:1rem;align-items: center;padding:var(--M) 0; }
.nav-menu { list-style:none;padding:0;margin:0;display:flex;gap:1rem;align-items:center; }
.nav-menu a { text-decoration:none;color:var(--primary);padding:0.5rem 0.8rem;position:relative;display:inline-block; }

.nav-menu li { position: relative; }
.nav-menu li::before { background:var(--grey);content:'';display:block;position:absolute;left:0;bottom:0;width:100%;height:100%;border-radius:100rem;mix-blend-mode: multiply; }
.nav-menu li:hover a { color:var(--white); }
.nav-menu li:hover::before { background:var(--primary); }
.nav-menu li.start-project::before { background:var(--primary); }
.nav-menu li.start-project a { color:var(--white);font-weight:500; }
.nav-menu li.start-project a::after { position:relative;top:1px;margin-left:0.5rem;background:url("/wp-content/themes/arch26/img/arrow-right-white.svg") no-repeat center;background-size:contain;;content:'';width:0.9rem;height:0.9rem;display:inline-block; }
.logo img { width:107px;height:auto; }

.invert .nav-menu li::before { mix-blend-mode: normal; }
.invert .nav-menu li.start-project::before { background:var(--white); }
.invert .nav-menu li.start-project a::after  { background:url("/wp-content/themes/arch26/img/arrow-right-primary.svg") no-repeat center;background-size:contain;; }
.invert .nav-menu li.start-project a { color:var(--primary); } 
.invert .nav-menu li:hover::before { background:var(--black); }
.invert .nav-menu li.start-project a:hover { color:var(--white); }
.invert .nav-menu li.start-project a:hover::after  { background:url("/wp-content/themes/arch26/img/arrow-right-white.svg") no-repeat center;background-size:contain;; }

/* ==== FOOTER === */
footer { color:var(--white);padding-top:5rem; }
footer * { color:var(--white);}
footer .two-column { align-items:flex-end;}
footer img { width:100%;max-width:500px;margin:auto 0 auto auto;display:block; }
.footer-menu { list-style:none;display:flex;gap:var(--M);padding:0;margin:var(--XL) 0 0; }
.footer-menu a { text-decoration: none;font-size:1.25rem; }
footer .email-link { text-decoration: none;margin-top:8rem; }
footer h3 { margin:1rem 0 3rem;}

.tag { padding:0.5rem;background:var(--grey);border-radius:100rem;text-decoration: none; }

/* === MODULES === */

.bordered { border-bottom:1px solid var(--primary);}

/* -- Banner -- */
.banner { position:relative;text-align:center;padding:10em 0 5rem;display:flex;flex-direction:column;gap:4rem;justify-content:center;align-items:center; }

/* -- Project Slider -- */
.project-card { position:relative; }
.project-slider-item { border-radius:var(--XXL);overflow:hidden;position:relative;display:inline-block;width:100%; }
.project-slider-item img { width:100%;height:auto;display:block; }
.project-slider .slick-list { overflow: visible; }
.project-slider .tag, .project-card .tag { padding:0.5rem;background:var(--green);position:absolute;top:2rem;left:2rem;border-radius:100rem;text-decoration: none; }


.slick-slide { opacity:0; transition:all 0.5s ease-in-out;transform-origin: 50% 100%;will-change: transform; }
.slick-invisible-left { transform:translate(95%, 50%) rotate(-54deg) scale(0.7); }
.slick-invisible-right { transform:translate(-95%, 50%) rotate(54deg) scale(0.7); } 
.slick-active-left { transform:translate(43%, 32%) rotate(-36deg) scale(0.8);opacity:1;  }
.slick-active-right { transform:translate(-43%, 32%) rotate(36deg) scale(0.8);opacity:1;  }
.slick-offscreen-left { transform:translate(14%, 4%) rotate(-18deg) scale(0.9);opacity:1; }
.slick-offscreen-right { transform:translate(-14%, 4%) rotate(18deg) scale(0.9);opacity:1; }
.slick-center { transform:rotate(0deg) scale(1);opacity:1;position:relative;z-index:3;  }

.project-slider-arrows { position:relative;text-align:center;width:100%;height:30px;margin:var(--XXL) 0;display:flex;justify-content:center;gap:1rem; }

.project-details { display:block;text-align:center;max-width:600px;margin:var(--XXL) auto; }

.slick-next, .slick-prev { transform:none;position:static;width:28px;height:14px;background:url("/wp-content/themes/arch26/img/arrow-right-primary-slider.svg") no-repeat center;background-size:contain;cursor:pointer; }
.slick-prev { transform:scale(-1);}
.slick-next .slick-next-icon:before, .slick-next .slick-prev-icon:before, .slick-prev .slick-next-icon:before, .slick-prev .slick-prev-icon:before { display:none; }



/* -- Video -- */
.video-container { width:780px; margin:0 auto; position:relative;max-width:100%; }
.video-container img { width:100%; display:block; }

.video-sticky { position:sticky; top:2rem; }


/* -- Track Slider -- */
.track-wrapper { overflow: visible; position: relative; width: 100%;margin-top:var(--XXL); } 
.track { display: inline-flex; gap: var(--S); transform: translateX(0); will-change: transform; cursor: grab; } 
.track.dragging { cursor: grabbing; } .track-item { flex: 0 0 auto; min-width: 360px; max-width: 420px; user-select: none; } 
.track-item img { width: 100%; pointer-events: none; -webkit-user-drag: none;}
.track-item .rounded { display:block;margin-bottom:var(--L); }

/* -- Logo Grid -- */
.logo-grid { width:100%;position:relative;display:block; }
.logo-grid-row { width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--M);align-items:center;opacity:0;position:absolute;top:0;left:0;width:100%;height:auto;transition:opacity 0.5s ease-in-out; }
.logo-grid-row:first-child { position:static; }
.logo-grid-row.active-row { opacity:1; }
.logo-grid-row .logo-grid-item { opacity:0;transition:all 0.5s ease-in-out;position:relative;top:-25%; }
.logo-grid-row.active-row .logo-grid-item.active-item { opacity:1;top:0; }
.logo-grid img { width:100%;height:auto;display:block; }



/* -- Two Column -- */
.two-column { display:flex;gap:var(--XXL);align-items:center;flex-wrap:wrap; }
.two-column > div { flex:1 1 360px; }



/* -- Articles -- */
.article-tags { display:flex;gap:var(--S);flex-wrap:wrap;margin:0 0 var(--M);align-items:center; }



/* -- Filter -- */
.filter { }

:root{--gap:var(--XL);--row-gap:var(--XXL); }

.flex-12 { display:flex;flex-wrap:wrap;gap:var(--gap);row-gap:var(--row-gap); }
.col-1 {flex:0 0 calc(100% / 12);}
.col-2 {flex:0 0 calc(100% / 6);}
.col-3 {flex:0 0 calc(100% / 4);}
.col-4 {flex:0 0 calc(100% / 3);}
.col-5 {flex:0 0 calc(100% * 5 / 12);}
.col-6 {flex:0 0 50%;}
.col-7 {flex:0 0 calc(100% * 7 / 12);}
.col-8 {flex:0 0 calc(100% * 8 / 12);}
.col-9 {flex:0 0 75%;}
.col-10 {flex:0 0 calc(100% * 10 / 12);}
.col-11 {flex:0 0 calc(100% * 11 / 12);}
.col-12 {flex:0 0 100%;}
.col-off-1 {margin-left:calc((100% / 12) - var(--gap));}
.col-off-2 {margin-left:calc((100% / 6) - var(--gap));}
.col-off-3 {margin-left:calc((100% / 4) - var(--gap));}
.col-off-4 {margin-left:calc((100% / 3) - var(--gap));}
.col-off-5 {margin-left:calc((100% * 5 / 12) - var(--gap));}
.col-off-6 {margin-left:calc(50% - var(--gap));}
.col-off-7 {margin-left:calc((100% * 7 / 12) - var(--gap));}
.col-off-8 {margin-left:calc((100% * 8 / 12) - var(--gap));}
.col-off-9 {margin-left:calc(75% - var(--gap));}
.col-off-10 {margin-left:calc((100% * 10 / 12) - var(--gap));}
.col-off-11 {margin-left:calc((100% * 11 / 12) - var(--gap));}


.project-grid { display:flex;gap:var(--S);row-gap:var(--XXL);flex-wrap:wrap; }
.project-grid > div { flex:1 1 250px; }



.cursor-tooltip {
    position: absolute;
    pointer-events: none;
    background:var(--blue);
    padding: 6px 10px;
    border-radius: 100rem;
    z-index: 9999;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(.22,1.8,.36,1);
}

.cursor-tooltip.entering {
    opacity: 1;
    transform: translateY(0);
}

.cursor-tooltip.leaving {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.22,1.8,.36,1);
}