/*
Theme Name: Kat & Kat Digital Studio
Author: Kat
Description: A luxury-clean portfolio theme for UGC creators.
Version: 1.0
*/

:root{
   --ink:#0B0D12;
   --porcelain:#F6F2EC;
   --graphite:#2A2F3A;
   --mist:#C9CDD6;
   --pink:#FF2DAA;
   --gold:#B89B5E;

   --radius:16px;
   --radius-lg:24px;
   --shadow:0 18px 50px rgba(11,13,18,.10);
   --shadow-soft:0 10px 30px rgba(11,13,18,.08);

   --font-heading:"Playfair Display", serif;
   --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

   --max:1120px;

    --col-ink-black: #0B0D12;
    --col-porcelain: #F6F2EC;
    
    /* Secondary / Support */
    --col-graphite: #2A2F3A;
    --col-mist: #C9CDD6;
    
    /* Accents */
    --col-pop-pink: #FF2DAA;
    --col-antique-gold: #B89B5E;
    
    /* Fonts */
    --font-head: 'Playfair Display', serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body {
   background-image: url('bg-fur.webp');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-position: center;

   margin:0;
   font-family:var(--font-body);
   color:var(--graphite);
   /* background:var(--porcelain); */
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;        }
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Top bar */
.topbar{
   position:sticky; top:0; z-index:50;
   backdrop-filter:saturate(140%) blur(10px);
   background:rgba(246,242,236,.84);
   border-bottom:1px solid rgba(201,205,214,.55);
}
.topbar-inner{
   display:flex; align-items:center; justify-content:space-between;
   padding:14px 0;
   gap:16px;
}

/* Logo lockup */
.logo{
   display:flex; flex-direction:column; line-height:1;
   gap:8px;
   min-width:220px;
}
.logo .wordmark{
   font-family:var(--font-heading);
   font-weight:700;
   font-size:26px;
   letter-spacing:-.02em;
   color:var(--ink);
}
.logo .underline{
   position:relative;
   width:140px;
   height:3px;
   background:var(--gold);
   border-radius:999px;
   transform:translateY(-2px);
}
.logo .underline::after{
   content:"";
   position:absolute;
   right:-8px; top:50%;
   width:10px; height:10px;
   background:var(--pink);
   border-radius:999px;
   transform:translateY(-50%);
   box-shadow:0 0 0 4px rgba(255,45,170,.12);
}
.logo .sub{
   font-size:11px;
   letter-spacing:.18em;
   font-weight:600;
   color:rgba(42,47,58,.85);
   text-transform:uppercase;
}

/* Nav */
nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end}
.navlink{
   font-size:12px;
   letter-spacing:.16em;
   text-transform:uppercase;
   font-weight:700;
   color:rgba(42,47,58,.80);
   padding:10px 10px;
   border-radius:12px;
   transition:background .2s ease, color .2s ease;
}
.navlink:hover{background:rgba(201,205,214,.25); color:var(--ink)}
.nav-cta{display:flex; gap:10px; margin-left:6px}

/* --- HAMBURGER MENU STYLES --- */

/* 1. The Hamburger Button (Hidden by default) */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1002; /* Above the menu overlay */
    position: relative;
}

.hamburger .bar {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background-color: var(--col-ink-black);
    transition: all 0.3s ease-in-out;
}

/* 2. Mobile Specific Styles (Under 768px) */
@media (max-width: 768px) {
    
    /* Show the button */
    .hamburger {
        display: block;
    }

    /* Transform Nav into Full-Screen Overlay */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--col-porcelain); /* Matches site background */
        
        /* Flexbox to center everything */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        
        /* Hidden state */
        opacity: 0;
        pointer-events: none; /* User can't click through when hidden */
        transition: opacity 0.3s ease;
        z-index: 1001;
    }

    /* Active State (Visible) */
    nav.active {
        opacity: 1;
        pointer-events: all;
    }

    /* Adjust Link Sizes for Mobile */
    nav .navlink {
        font-size: 24px; /* Larger text for mobile taps */
        font-family: var(--font-head); /* Switch to serif for elegance */
    }

    /* Stack the buttons vertically */
    .nav-cta {
        flex-direction: column;
        width: 100%;
        max-width: 250px;
        text-align: center;
        gap: 15px;
    }

    /* 3. Hamburger Animation (Turn into X) */
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Buttons */
.btn{
   display:inline-flex; align-items:center; justify-content:center;
   gap:10px;
   padding:12px 16px;
   border-radius:14px;
   border:1px solid transparent;
   font-weight:700;
   cursor:pointer;
   transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
   user-select:none;
   white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
   background:var(--pink);
   color:var(--ink);
   box-shadow:0 10px 24px rgba(255,45,170,.18);
}
.btn-primary:hover{box-shadow:0 16px 32px rgba(255,45,170,.22)}
.btn-secondary{
   background:transparent;
   color:var(--ink);
   border-color:rgba(11,13,18,.25);
}
.btn-secondary:hover{
   border-color:var(--pink);
   color:var(--pink);
}

/* Sections */
main section{padding:86px 0}
.section-kicker{
   font-size:12px;
   letter-spacing:.16em;
   text-transform:uppercase;
   color:rgba(42,47,58,.70);
   margin:0 0 14px;
   font-weight:800;
}
.section-title{
   font-family:var(--font-heading);
   color:var(--ink);
   font-size:38px;
   line-height:1.15;
   letter-spacing:-.02em;
   margin:0 0 14px;
}
.muted{color:rgba(42,47,58,.78)}
.divider{
   height:1px;
   background:linear-gradient(to right, rgba(184,155,94,.55), rgba(201,205,214,.45));
   border-radius:999px;
   margin:22px 0 0;
}

/* MODAL STYLES */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 13, 18, 0.95); /* Ink Black with opacity */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px); /* Adds that luxury blurred background look */
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 450px; /* Limits width to mimic phone screen on desktop */
    aspect-ratio: 9 / 16;
    background: #000;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

/* Mobile Tweak: Make it full screen on phones */
@media (max-width: 600px) {
    .modal-content {
        max-width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .modal-close {
        top: 20px;
        right: 20px;
        z-index: 10;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
}/* MODAL STYLES */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 13, 18, 0.95); /* Ink Black with opacity */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px); /* Adds that luxury blurred background look */
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 450px; /* Limits width to mimic phone screen on desktop */
    aspect-ratio: 9 / 16;
    background: #000;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

/* Mobile Tweak: Make it full screen on phones */
@media (max-width: 600px) {
    .modal-content {
        max-width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .modal-close {
        top: 20px;
        right: 20px;
        z-index: 10;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
}

/* Bio Links Menu (Under the buttons) */
.bio-links-row {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--col-mist); /* A nice divider line */
}

.bio-links-row ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between links */
}

.bio-links-row li a {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--col-graphite);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
}

/* Add a tiny arrow after each link automatically */
.bio-links-row li a::after {
    content: '↗'; /* North East Arrow to indicate external link */
    font-size: 16px;
    margin-left: 4px;
    opacity: 0.5;
    transition: transform 0.3s;
}

.bio-links-row li a:hover {
    color: var(--col-pop-pink);
}

.bio-links-row li a:hover::after {
    transform: translate(2px, -2px); /* Animate arrow on hover */
    opacity: 1;
}

/* Align SVG icon with text */
.bio-links-row li a {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
}

/* Ensure SVG inherits the link color (graphite -> pink on hover) */
.menu-icon svg {
    display: block; /* Removes weird baseline spacing */
    fill: currentColor;
    transition: transform 0.3s;
}

/* Optional: Slight pop on hover */
.bio-links-row li a:hover .menu-icon svg {
    transform: scale(1.1);
}

/* Hero */
.hero{padding:74px 0 96px}
.hero-grid{
   display:grid;
   grid-template-columns: 1.12fr .88fr;
   gap:36px;
   align-items:center;
}
.hero h1{
   font-family:var(--font-heading);
   color:var(--ink);
   font-size:56px;
   line-height:1.05;
   letter-spacing:-.03em;
   margin:0 0 16px;
}
.hero p{
   margin:0 0 22px;
   font-size:18px;
   line-height:1.65;
   color:rgba(42,47,58,.86);
   max-width:56ch;
}
.pillrow{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px}
.pill{
   border:1px solid rgba(201,205,214,.70);
   background:rgba(246,242,236,.72);
   border-radius:999px;
   padding:10px 12px;
   font-size:12px;
   letter-spacing:.12em;
   text-transform:uppercase;
   color:rgba(42,47,58,.78);
   font-weight:800;
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap}

.hero-card{
   background:rgba(255,255,255,.35);
   border:1px solid rgba(201,205,214,.55);
   border-radius:var(--radius-lg);
   padding:22px;
   box-shadow:var(--shadow-soft);
   position:relative;
   overflow:hidden;
}
.hero-card::before{
   content:"";
   position:absolute;
   inset:-2px;
   background:
   radial-gradient(80% 80% at 20% 10%, rgba(255,45,170,.12), transparent 60%),
   radial-gradient(70% 70% at 90% 40%, rgba(184,155,94,.12), transparent 55%);
   pointer-events:none;
}
.hero-card-inner{position:relative}
.mini-title{
   font-weight:900;
   letter-spacing:.14em;
   text-transform:uppercase;
   font-size:12px;
   color:rgba(42,47,58,.70);
   margin:0 0 10px;
}
.card-head{
   font-family:var(--font-heading);
   color:var(--ink);
   font-size:22px;
   margin:0 0 10px;
   line-height:1.2;
}
.stat{
   display:grid;
   grid-template-columns: 1fr 1fr;
   gap:12px;
   margin-top:14px;
}
.stat .box{
   border-radius:18px;
   padding:14px;
   border:1px solid rgba(201,205,214,.55);
   background:rgba(246,242,236,.65);
}
.stat .label{
   font-size:11px;
   letter-spacing:.16em;
   text-transform:uppercase;
   color:rgba(42,47,58,.65);
   font-weight:900;
   margin-bottom:8px;
}
.stat .value{
   font-size:16px;
   color:var(--ink);
   font-weight:900;
}
.tiny-note{
   margin-top:16px;
   font-size:13px;
   color:rgba(42,47,58,.72);
   line-height:1.55;
}

/* Cards / Grid */
.grid{
   display:grid;
   grid-template-columns:repeat(3, 1fr);
   gap:16px;
   margin-top:18px;
}
.card{
   border-radius:22px;
   overflow:hidden;
   border:1px solid rgba(201,205,214,.65);
   background:rgba(255,255,255,.32);
   box-shadow:var(--shadow-soft);
   transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.card:hover{
   transform:translateY(-2px);
   box-shadow:var(--shadow);
   border-color:rgba(184,155,94,.55);
}
.thumb{
   aspect-ratio: 9 / 16;
   background:
   linear-gradient(180deg, rgba(11,13,18,.12), rgba(11,13,18,.02)),
   radial-gradient(120% 70% at 20% 20%, rgba(255,45,170,.12), transparent 60%),
   radial-gradient(120% 70% at 90% 60%, rgba(184,155,94,.12), transparent 55%);
   display:flex;
   align-items:flex-end;
   padding:14px;
}
.badge{
   display:inline-flex;
   align-items:center;
   gap:8px;
   background:rgba(246,242,236,.86);
   border:1px solid rgba(201,205,214,.65);
   padding:10px 12px;
   border-radius:999px;
   font-size:12px;
   font-weight:900;
   color:rgba(42,47,58,.85);
   letter-spacing:.06em;
}
.badge .dot{
   width:8px; height:8px; border-radius:999px;
   background:var(--pink);
   box-shadow:0 0 0 4px rgba(255,45,170,.12);
}
.card-body{padding:16px 16px 18px}
.card-title{
   font-weight:900;
   color:var(--ink);
   margin:0 0 6px;
   font-size:16px;
}
.card-meta{
   margin:0;
   font-size:13px;
   color:rgba(42,47,58,.78);
   line-height:1.55;
}
.spec{
   margin-top:16px;
   font-size:13px;
   color:rgba(42,47,58,.70);
   border-left:3px solid rgba(184,155,94,.6);
   padding-left:12px;
}

/* Services */
.two-col{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:18px;
   margin-top:22px;
   align-items:start;
}
.panel{
   border-radius:22px;
   padding:20px;
   border:1px solid rgba(201,205,214,.65);
   background:rgba(255,255,255,.30);
   box-shadow:var(--shadow-soft);
}
.panel h3{
   font-family:var(--font-heading);
   font-size:22px;
   margin:0 0 10px;
   color:var(--ink);
}
ul.clean{
   margin:0;
   padding:0;
   list-style:none;
   display:grid;
   gap:10px;
}
.li{
   display:flex;
   gap:10px;
   align-items:flex-start;
   line-height:1.55;
   color:rgba(42,47,58,.88);
}
.li .tick{
   width:18px; height:18px;
   border-radius:999px;
   border:1px solid rgba(184,155,94,.7);
   display:inline-flex; align-items:center; justify-content:center;
   margin-top:2px;
   flex:0 0 auto;
   background:rgba(246,242,236,.7);
   position:relative;
}
.li .tick::after{
   content:"";
   width:6px; height:6px; border-radius:999px;
   background:var(--pink);
}
.meta-row{
   display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}
.chip{
   font-size:12px;
   font-weight:900;
   letter-spacing:.10em;
   text-transform:uppercase;
   border-radius:999px;
   padding:10px 12px;
   border:1px solid rgba(201,205,214,.65);
   background:rgba(246,242,236,.70);
   color:rgba(42,47,58,.78);
}

/* About */
.about-wrap{
   display:grid;
   grid-template-columns: .9fr 1.1fr;
   gap:22px;
   margin-top:22px;
   align-items:start;
}
.portrait{
   border-radius:var(--radius-lg);
   border:1px solid rgba(201,205,214,.65);
   background:
   radial-gradient(70% 60% at 30% 20%, rgba(255,45,170,.12), transparent 60%),
   radial-gradient(70% 60% at 80% 70%, rgba(184,155,94,.12), transparent 55%),
   rgba(255,255,255,.28);
   box-shadow:var(--shadow-soft);
   padding:22px;
   min-height:340px;
   display:flex;
   flex-direction:column;
   justify-content:flex-end;
   gap:10px;
}
.portrait .tag{
   display:inline-flex;
   align-items:center;
   gap:8px;
   width:max-content;
   padding:10px 12px;
   border-radius:999px;
   border:1px solid rgba(201,205,214,.65);
   background:rgba(246,242,236,.86);
   font-size:12px;
   font-weight:900;
   letter-spacing:.10em;
   text-transform:uppercase;
   color:rgba(42,47,58,.82);
}
.portrait .tag .gold{
   width:18px; height:3px; border-radius:999px; background:var(--gold);
   position:relative;
}
.portrait .tag .gold::after{
   content:"";
   position:absolute; right:-7px; top:50%;
   width:8px; height:8px; border-radius:999px;
   background:var(--pink);
   transform:translateY(-50%);
}
.about-copy{
   border-radius:var(--radius-lg);
   border:1px solid rgba(201,205,214,.65);
   background:rgba(255,255,255,.30);
   box-shadow:var(--shadow-soft);
   padding:22px;
}
.about-copy p{
   margin:0 0 14px;
   line-height:1.7;
   color:rgba(42,47,58,.86);
   font-size:16px;
}

/* Contact */
.contact{
   border-radius:var(--radius-lg);
   border:1px solid rgba(201,205,214,.65);
   background:rgba(255,255,255,.32);
   box-shadow:var(--shadow-soft);
   padding:24px;
   margin-top:22px;
}
.contact-row{
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   justify-content:space-between;
   gap:14px;
   margin-top:10px;
}
.email{
   font-weight:900;
   color:var(--ink);
   font-size:16px;
}
.small{
   font-size:13px;
   color:rgba(42,47,58,.74);
   line-height:1.6;
}

/* Footer */
footer{
   padding:34px 0;
   border-top:1px solid rgba(201,205,214,.6);
   background:rgba(246,242,236,.9);
}
.footer-inner{
   display:flex;
   gap:18px;
   justify-content:space-between;
   align-items:flex-start;
   flex-wrap:wrap;
}
.footer-left{
   display:flex;
   flex-direction:column;
   gap:6px;
}
.footer-title{
   font-weight:900;
   color:var(--ink);
}
.footer-meta{
   font-size:13px;
   color:rgba(42,47,58,.72);
}

/* Responsive */
@media (max-width: 980px){
   .hero-grid{grid-template-columns:1fr; gap:18px}
   .hero h1{font-size:46px}
   .grid{grid-template-columns:repeat(2, 1fr)}
   .two-col{grid-template-columns:1fr}
   .about-wrap{grid-template-columns:1fr}
   nav{gap:10px}
}
@media (max-width: 560px){
   .logo{min-width:auto}
   .hero h1{font-size:38px}
   main section{padding:70px 0}
   .grid{grid-template-columns:1fr}
   .nav-cta{display:none}
}