/* ===== V3 Revised Round 2: Hybrid Split ===== */
/* Fixes this round:
   1. Transparent PNG fix: removed mix-blend-mode:difference, 
      removed brightness(0) invert(1) on logo, use actual logo colors
   2. Logo +60% (75px → 120px), left-aligned to hero text
   3. Hero right: text positioned bottom-left to avoid face overlap
   4. Carousel 16:10 aspect ratio, same height
   5. All headlines same style as hero left title
*/

:root {
    --blue: #0062a7;
    --blue-glow: #0080d4;
    --grey-light: #4b4c4c;
    --grey-dark: #c5c4c6;
    --copper: #c18a65;
    --cream: #edf0f9;
    --white: #ffffff;
    --dark: #0f1118;
    --dark-mid: #1a1d26;
    --text-dark: #1a1a2e;
    --font-display: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: white; }

/* ================================================================
   Cookie Banner
   ================================================================ */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: var(--white); border-top: 1px solid #ddd;
    padding: 1rem 2rem; transform: translateY(0); transition: transform .4s ease;
}
.cookie-banner.hidden { transform: translateY(100%); pointer-events: none; }
.cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cookie-inner p { font-size: .85rem; color: var(--grey-light); flex: 1; }
.cookie-inner a { color: var(--blue); }
.cookie-buttons { display: flex; gap: .75rem; }
.btn-cookie {
    padding: .5rem 1.4rem; border-radius: 4px; font-size: .82rem; font-family: var(--font-body);
    cursor: pointer; border: 1px solid var(--blue); background: var(--blue); color: white; transition: all .2s;
}
.btn-cookie:hover { background: var(--blue-glow); }
.btn-cookie--outline { background: transparent; color: var(--blue); }
.btn-cookie--outline:hover { background: rgba(0,98,167,.06); }

/* ================================================================
   Navigation
   FIX 1: No more mix-blend-mode or filter invert – use two logo states
   FIX 2: Logo 120px (75 × 1.6), left-aligned via nav layout
   ================================================================ */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 1.2rem 2.5rem 1.2rem calc(2.5rem + 90px); transition: all .3s;
}
.nav.scrolled {
    background: rgba(237,240,249,.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
    padding: .8rem 2.5rem .8rem calc(2.5rem + 90px);
}
.nav__inner {
    /* 3. No max-width centering – logo sits at left edge, matching hero padding */
    display: flex; align-items: center; justify-content: space-between;
}

.nav__logo-img {
    height: 180px;               /* 1. was 120px → ×1.5 = 180px */
    transition: height .3s, opacity .3s;
}
/* Dark-bg logo visible by default, light-bg hidden */
.nav__logo-img--dark { display: block; }
.nav__logo-img--light { display: none; }
/* When scrolled (light bg), swap logos */
.nav.scrolled .nav__logo-img--dark { display: none; }
.nav.scrolled .nav__logo-img--light { display: block; }
.nav.scrolled .nav__logo-img { height: 70px; }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
    text-decoration: none;
    color: var(--grey-dark);      /* 2. light text over dark hero */
    font-size: .85rem; font-weight: 400; letter-spacing: .04em;
    transition: color .2s, opacity .2s;
}
.nav.scrolled .nav__links a { color: var(--text-dark); }
.nav__links a:hover { opacity: .6; }
.lang-toggle {
    background: none; border: 1px solid rgba(255,255,255,.4); color: var(--grey-dark);
    padding: .3rem .7rem; font-size: .75rem; font-family: var(--font-body);
    letter-spacing: .1em; border-radius: 3px; cursor: pointer; transition: all .2s;
}
.nav.scrolled .lang-toggle { border-color: var(--grey-light); color: var(--grey-light); }
.lang-toggle:hover { opacity: .6; }

/* Burger */
.nav__burger { display: none; background: none; border: none; cursor: pointer; width: 28px; height: 20px; position: relative; }
.nav__burger span { display: block; width: 100%; height: 1.5px; background: white; position: absolute; left: 0; transition: all .3s; }
.nav.scrolled .nav__burger span { background: var(--text-dark); }
.nav__burger span:first-child { top: 4px; }
.nav__burger span:last-child { bottom: 4px; }
.nav__burger.active span:first-child { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav__burger.active span:last-child { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ================================================================
   Hero
   ================================================================ */
.hero {
    min-height: 72vh;            /* 2. was 60vh → +20% = 72vh */
    display: flex; position: relative; overflow: hidden;
}

/* Left panel */
.hero__left {
    flex: 1; background: var(--dark);
    display: flex; align-items: center;
    padding: 5rem 2.5rem 3rem calc(2.5rem + 90px);
    position: relative; overflow: hidden;
}
.hero__content {
    position: relative; z-index: 2;
    width: 100%;
    max-width: 500px;
}
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700; line-height: 1.15; color: white;
}
.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--blue-glow); }

/* Right panel – portrait background */
.hero__right {
    flex: 1; background: var(--cream);
    display: flex;
    align-items: center;          /* 2. restored: text vertically centered, same height as left headline */
    padding: 5rem 3rem 3rem;
    position: relative; overflow: hidden;
}
.hero__right-bg {
    position: absolute; inset: 0; z-index: 0;
    display: flex; align-items: center; justify-content: center;
}
.hero__right-bg-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
}
.hero__right-inner {
    position: relative; z-index: 2; max-width: 420px;
}
.hero__right-text p {
    font-size: 1.14rem;
    line-height: 1.75;
    color: var(--grey-light);
    font-weight: 300; margin-bottom: 1.5rem;
}
.hero__tagline { display: flex; gap: 1rem; }
.hero__tagline span {
    font-family: var(--font-display);
    font-size: 1.14rem;          /* 2. matched to body text size */
    font-weight: 600; color: var(--blue); letter-spacing: .04em;
}

/* ================================================================
   Keywords Marquee – 1.05rem
   ================================================================ */
.keywords {
    padding: 2.2rem 0;
    border-top: 1px solid rgba(0,98,167,.08);
    border-bottom: 1px solid rgba(0,98,167,.08);
    overflow: hidden; background: var(--white);
}
.keywords__track {
    display: flex; gap: 2.5rem; white-space: nowrap;
    animation: marquee 28s linear infinite;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--grey-light); font-weight: 400; opacity: .3;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ================================================================
   Sections – general
   ================================================================ */
.section { padding: 7rem 2.5rem; }
.section__inner { max-width: 1000px; margin: 0 auto; }
.section__header { margin-bottom: 3.5rem; }

/* FIX 5: All headlines same style as hero title */
.section__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);  /* same as .hero__title */
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}
.section__intro {
    font-size: 1.14rem;
    line-height: 1.8;
    color: var(--grey-light);
    max-width: 600px; font-weight: 300;
}

/* ================================================================
   Services
   ================================================================ */
.services { background: var(--white); }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.service-card {
    padding: 2rem 1.5rem; transition: all .5s;
    opacity: 0; transform: translateY(30px);
}
.service-card.visible { opacity: 1; transform: translateY(0); }
.service-card__number {
    font-family: var(--font-display);
    font-size: 2.5rem; font-weight: 800;
    color: var(--blue); opacity: .15;
}
.service-card__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600; margin: .5rem 0;
}
.service-card__line { width: 30px; height: 2px; background: var(--copper); margin: .8rem 0; }
.service-card__text {
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--grey-light);
    font-weight: 300;
}

/* ================================================================
   Portfolio Carousel
   FIX 4: 16:10 aspect ratio, keep current height
   Height stays ~360px (from 600px SVG scaled down in 720px container)
   16:10 means width = height × 1.6 → ~576px, rounding up a bit
   ================================================================ */
.portfolio { background: var(--cream); }
.portfolio__carousel {
    max-width: 900px;           /* wider for 16:10 */
    margin: 0 auto; overflow: hidden; padding: 0 2rem 2rem;
}
.portfolio__track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.portfolio__slide { min-width: 100%; padding: 0 .5rem; }
.portfolio__slide img {
    width: 100%;
    aspect-ratio: 16 / 10;     /* FIX 4: enforce 16:10 */
    object-fit: cover;
    border-radius: 6px; display: block;
}
.portfolio__controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.portfolio__btn {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--grey-light);
    background: none; font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s; color: var(--text-dark);
}
.portfolio__btn:hover { border-color: var(--blue); color: var(--blue); }
.portfolio__dots { display: flex; gap: .5rem; }
.portfolio__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--grey-light); opacity: .25;
    cursor: pointer; transition: all .3s; border: none;
}
.portfolio__dot.active { opacity: 1; background: var(--blue); }

/* ================================================================
   About
   ================================================================ */
.about { background: var(--white); }
.about__inner { display: flex; align-items: flex-start; gap: 3.5rem; }
.about__text { flex: 1; }
.about__text p {
    font-size: 1.14rem;
    line-height: 1.8;
    color: var(--grey-light);
    font-weight: 300;
}
.about__portrait {
    flex-shrink: 0;
    align-self: center;          /* 3. image centered to the text block, not top-aligned */
}
.about__portrait-img {
    width: 320px; height: auto;
    max-width: 100%;
    object-fit: contain;
    /* FIX 1: no filter, PNG transparency renders correctly on white bg */
}

/* ================================================================
   Contact (dark background)
   FIX 5: headline same size/weight as hero title
   ================================================================ */
.contact { background: var(--dark); color: white; text-align: center; }
.contact__inner { display: flex; flex-direction: column; align-items: center; }
.contact__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);  /* FIX 5: same as hero + section titles */
    font-weight: 700;                      /* FIX 5: same weight */
    line-height: 1.15;
    margin-bottom: 1rem;
}
.contact__text {
    font-size: 1.14rem;
    color: var(--grey-dark);
    font-weight: 300; margin-bottom: .5rem;
}
.contact__email {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 500; color: var(--blue-glow);
    text-decoration: none; border-bottom: 2px solid transparent;
    transition: border-color .3s;
}
.contact__email:hover { border-color: var(--blue-glow); }
.contact__phone {
    margin-top: .8rem; font-size: 1rem;
    color: var(--grey-dark);
    font-weight: 300;
}

/* ================================================================
   Footer
   ================================================================ */
.footer { padding: 2.5rem 2.5rem; border-top: 1px solid rgba(0,98,167,.08); }
.footer__inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer__logo-img {
    height: 36px; opacity: 1;           /* 1. full opacity */
}
.footer__links { display: flex; gap: 1.5rem; }
.footer__links a { font-size: .82rem; color: var(--grey-light); text-decoration: none; transition: color .2s; }
.footer__links a:hover { color: var(--blue); }
.footer__copy { font-size: .75rem; color: var(--grey-light); opacity: .4; }

/* ================================================================
   Reveal Animations
   ================================================================ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   Responsive / Mobile
   ================================================================ */
@media (max-width: 900px) {
    .hero { flex-direction: column; min-height: auto; }
    .hero__left { min-height: 45vh; padding: 8rem 1.5rem 3rem; }
    .hero__right { padding: 3rem 1.5rem; min-height: 35vh; }
    .hero__right-inner { max-width: 100%; }
    .nav__logo-img { height: 100px; }       /* mobile: prominent */
    .nav.scrolled .nav__logo-img { height: 50px; }
    .nav__links {
        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(237,240,249,.97);
        flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    }
    .nav__links.open { display: flex; }
    .nav__links a { font-size: 1.3rem; color: var(--text-dark) !important; }
    .nav__burger { display: block; z-index: 1001; }
    .section { padding: 4rem 1.5rem; }
    .about__inner { flex-direction: column-reverse; text-align: center; gap: 2rem; }
    .about__portrait-img { width: 260px; }
    .portfolio__carousel { max-width: 100%; padding: 0 1rem 1.5rem; }
    .footer__inner { flex-direction: column; text-align: center; }
    .cookie-inner { flex-direction: column; text-align: center; }
    .services__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero__left { min-height: 40vh; padding: 6rem 1rem 2rem; }
    .hero__right { padding: 2rem 1rem; }
    .hero__title { font-size: 1.8rem; }
    .hero__bg-word { font-size: 4rem; }
    .nav__logo-img { height: 80px; }        /* small mobile: still readable */
    .section { padding: 3rem 1rem; }
    .keywords__track { font-size: .8rem; }
}