:root{ --accent: #ca8040; }

    :root{
      --gutter: 64px;
      --cols-palvelut: 4;
      --cols-svlive: 2;
      --cols-tiimi: 3;
      --cols-referenssit: 4;
      --cols-contact: 1.1fr 0.9fr;
      --nav-h: 84px;
      --bg: oklch(16% 0.015 262);
      --bg-alt: oklch(21% 0.02 262);
      --bg-alt-2: oklch(24.5% 0.022 262);
      --fg: oklch(96% 0.01 90);
      --fg-muted: oklch(72% 0.02 262);
      --fg-dim: oklch(56% 0.02 262);
      --border: oklch(32% 0.02 262);
      --border-soft: oklch(27% 0.02 262);
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth; background:var(--bg); min-height:100%;}
    body{margin:0; min-height:100%; font-family:'Manrope',system-ui,sans-serif; background:var(--bg); color:var(--fg);}
    h1,h2,h3{font-family:'Bebas Neue','Arial Narrow',sans-serif; letter-spacing:0.01em; margin:0;}
    a{color:inherit; text-decoration:none;}
    a:hover{opacity:0.82;}
    p{margin:0;}
    section[id]{scroll-margin-top:calc(var(--nav-h) + 18px);}
    .eyebrow{font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; font-size:12px;}
    @keyframes pulseDot{
      0%{ box-shadow:0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
      70%{ box-shadow:0 0 0 12px color-mix(in oklch, var(--accent) 0%, transparent); }
      100%{ box-shadow:0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
    }
    .navlink{font-size:15px; font-weight:800; color:var(--fg);}
    .btn-primary{padding:16px 32px; font-weight:800; font-size:15px; display:inline-block; clip-path:polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));}
    .btn-secondary{padding:16px 32px; color:var(--fg); font-weight:700; font-size:15px; display:inline-block; position:relative; clip-path:polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));}
    .btn-secondary::after{content:""; position:absolute; inset:0; padding:1px; background:var(--border); clip-path:polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}
    .pkg-card{background:linear-gradient(165deg, color-mix(in oklch, var(--accent) 22%, var(--bg-alt)) 0%, var(--bg-alt) 60%); padding:40px; display:flex; flex-direction:column; gap:18px; clip-path:polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); position:relative; overflow:hidden;}
    .pkg-card::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--accent); z-index:2;}
    .pkg-card::after{content:""; position:absolute; inset:0; padding:1px; background:color-mix(in oklch, var(--accent) 45%, var(--border-soft)); clip-path:polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;}
    .pkg-num{font-family:'Manrope',monospace; font-size:13px; font-weight:800; letter-spacing:0.06em; color:var(--accent); background:transparent; padding:7px 12px 7px 10px; display:inline-flex; align-items:center; gap:7px; width:fit-content;}
    .pkg-num-dot{width:6px; height:6px; border-radius:50%; background:#ff3b30; flex-shrink:0; animation:pulseDot 1.8s infinite;}
    .pkg-tag{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:6px 12px; border:1px solid var(--border); color:var(--fg-muted);}
    .rec-badge{position:absolute; top:12px; left:12px; z-index:2; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,0.6); padding:5px 10px; font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#fff; border-radius:2px;}
    .rec-badge .dot{width:6px; height:6px; border-radius:50%; background:#ff3b30; flex-shrink:0;}
    .team-card{background:var(--bg-alt); display:flex; flex-direction:column; clip-path:polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); overflow:hidden; position:relative;}
    .team-card::after{content:""; position:absolute; inset:0; padding:1px; background:color-mix(in oklch, var(--accent) 45%, var(--border-soft)); clip-path:polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;}
    .team-card::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--accent); z-index:2;}
    .team-photo{width:100%; aspect-ratio:16/11; overflow:hidden; position:relative;}
    .team-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.82) contrast(0.96) brightness(0.9);}
    .team-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, color-mix(in oklch, var(--bg-alt) 75%, transparent) 100%);}
    .logo-slot{background:var(--bg-alt); border:1px dashed var(--border); height:132px; display:flex; align-items:center; justify-content:center; padding:12px;}
    .img-band{width:100%; background:linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-alt-2) 100%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
    .img-band::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 45%, color-mix(in oklch, var(--border) 60%, transparent) 45.5%, transparent 46%);}
    .img-band-inner{display:flex; align-items:center; gap:12px; position:relative;}
    .img-band-label{font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-dim);}
    .gallery-tile{background:linear-gradient(150deg, var(--bg-alt-2) 0%, var(--bg-alt) 100%); border:1px solid var(--border-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; clip-path:polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px)); overflow:hidden;}
    .contact-row{display:flex; align-items:center; gap:16px;}
    .icon-circle{width:44px; height:44px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
    .social-circle{width:46px; height:46px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
    .video-embed{position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden;}
    .video-embed iframe, .video-embed video{position:absolute; inset:0; width:100%; height:100%; border:0;}
    /* --- Nav / mobile menu --- */
    .nav-toggle-checkbox{display:none;}
    .nav-hamburger{display:none; width:26px; height:18px; position:relative; cursor:pointer; flex-direction:column; justify-content:space-between; flex-shrink:0;}
    .nav-hamburger span{display:block; height:2px; width:100%; background:var(--fg); border-radius:2px;}
    .nav-mobile-panel{display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border-soft); flex-direction:column; padding:22px var(--gutter) 30px; gap:20px; z-index:49; max-height:calc(100vh - var(--nav-h)); overflow-y:auto;}
    #nav-toggle:checked ~ .nav-mobile-panel{display:flex;}
    /* --- Responsive --- */
    @media (max-width: 980px){
      :root{
        --gutter: 32px;
        --cols-palvelut: 2;
        --cols-tiimi: 2;
        --cols-referenssit: 3;
        --cols-contact: 1fr;
      }
      #yhteystiedot{ gap:32px !important; }
    }
    @media (max-width: 760px){
      :root{
        --gutter: 20px;
        --cols-palvelut: 1;
        --cols-svlive: 1;
        --cols-tiimi: 1;
        --cols-referenssit: 2;
        --nav-h: 68px;
      }
    }
    @media (max-width: 430px){
      .nav-brand-text{display:none;}
    }
    /* Nav switches to the hamburger menu earlier than the content breakpoints:
       the full desktop link row (incl. YouTube icon + CTA) needs ~1080px to fit
       without crowding the wordmark logo. */
    @media (max-width: 1080px){
      .nav-links-desktop{display:none !important;}
      .nav-hamburger{display:flex;}
    }