/* Modern redesign stylesheet for Kallenbäck Konsultation AB */
/* ---------- CSS RESET (lightweight) ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,video{max-width:100%;display:block}
ul{list-style:none;padding:0;margin:0}
a{text-decoration:none;color:var(--c-accent);transition:color .25s}
a:hover,a:focus{color:var(--c-accent-alt)}
svg{flex-shrink:0}

/* ---------- THEME TOKENS ---------- */
:root{
    --c-bg:#0d1f29;
    --c-bg-alt:#102838;
    --c-surface:#132c3b;
    --c-surface-alt:#1b394e;
    --c-border:rgba(255,255,255,.08);
    --c-text:#e9f2f7;
    --c-text-soft:#b8c7d0;
    --c-accent:#ffb347;
    --c-accent-alt:#ffc86e;
    --c-focus:#5dd0ff;
    --gradient-accent:linear-gradient(135deg,#ffb347 0%,#ffcf81 60%,#ffe6b0 100%);
    --radius-xs:4px;--radius-sm:8px;--radius:14px;--radius-lg:28px;--radius-pill:999px;
    --shadow-sm:0 2px 4px -1px rgba(0,0,0,.25);--shadow:0 4px 24px -4px rgba(0,0,0,.35);--shadow-glow:0 0 0 1px rgba(255,255,255,.04),0 4px 30px -2px rgba(255,179,71,.25);
    --container-max:1180px;--gutter:clamp(1rem,4vw,3rem);
    --transition:250ms cubic-bezier(.4,.2,.2,1);
    --fw-reg:400;--fw-med:500;--fw-semi:600;--fw-bold:700;
}

/* ---------- ACCESSIBILITY ---------- */
:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--c-accent);color:#11222c}

/* ---------- GLOBAL LAYOUT ---------- */
body{min-height:100dvh;display:flex;flex-direction:column;}
section{position:relative}
.section{padding:clamp(3.5rem,8vw,6rem) var(--gutter);max-width:var(--container-max);margin:0 auto;}
.section-head,.section-intro{max-width:900px;margin:0 auto 2.75rem auto;text-align:center}
.section-title{font-family:'Playfair Display',serif;font-weight:700;line-height:1.15;font-size:clamp(2.1rem,4.3vw,3.2rem);background:linear-gradient(90deg,#fff 0%,#d7e5ec 60%,#9fb8c6 100%);background-clip:text;-webkit-background-clip:text;color:transparent;letter-spacing:.5px;margin-bottom:.75rem}
.section-lead{font-size:clamp(1.05rem,1.45vw,1.25rem);color:var(--c-text-soft);font-weight:var(--fw-med);}

/* ---------- HEADER / NAV ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:.9rem var(--gutter);backdrop-filter:saturate(160%) blur(14px);background:linear-gradient(135deg,rgba(13,31,41,.85),rgba(19,44,59,.65));border-bottom:1px solid var(--c-border);}
.brand{display:flex;align-items:center;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.15rem;letter-spacing:.5px;color:var(--c-text)}
.logo svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.main-nav ul{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.6rem)}
.main-nav a{font-size:.95rem;font-weight:var(--fw-med);letter-spacing:.4px;position:relative;padding:.4rem .2rem;color:var(--c-text-soft)}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gradient-accent);transition:var(--transition);border-radius:2px}
.main-nav a:hover,.main-nav a:focus,.main-nav a.active{color:#fff}
.main-nav a:hover::after,.main-nav a:focus::after,.main-nav a.active::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.4rem .6rem;cursor:pointer}
.nav-toggle span{width:26px;height:2px;background:var(--c-text);transition:var(--transition)}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:flex-start;padding:0;overflow:hidden;color:#fff}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-video{width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(115%) contrast(105%)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 25% 35%,rgba(255,179,71,.35),rgba(13,31,41,.85) 55%),linear-gradient(160deg,rgba(13,31,41,.9),rgba(13,31,41,.4));mix-blend-mode:overlay;pointer-events:none}
.hero-content{padding:clamp(4rem,12vw,8rem) var(--gutter);max-width:860px}
.hero-content h1{display:grid;gap:.7rem}
.hero-content .sub{font-size:clamp(.95rem,1.4vw,1.15rem);font-weight:var(--fw-semi);letter-spacing:2.5px;text-transform:uppercase;color:var(--c-accent-alt);opacity:.9}
.hero-content .main{font-family:'Playfair Display',serif;font-size:clamp(2.8rem,6vw,4.4rem);font-weight:700;line-height:1.05;letter-spacing:.5px;background:linear-gradient(90deg,#fff,#e2e9ec);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-content p{font-size:clamp(1.05rem,1.5vw,1.35rem);max-width:60ch;margin:1.3rem 0 2.2rem;color:var(--c-text-soft);font-weight:var(--fw-med)}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- BUTTONS ---------- */
.btn{--btn-bg:var(--gradient-accent);--btn-color:#142732;position:relative;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;padding:.95rem 1.55rem;border-radius:var(--radius-pill);background:var(--btn-bg);color:var(--btn-color);box-shadow:var(--shadow-sm);letter-spacing:.5px;transition:var(--transition);isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%);mix-blend-mode:overlay;opacity:.4;transition:var(--transition)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-glow)}
.btn:hover::before{opacity:.75}
.btn:active{transform:translateY(-1px)}
.btn.alt{--btn-bg:var(--c-surface-alt);--btn-color:var(--c-text);box-shadow:0 2px 10px -2px rgba(0,0,0,.45);}
.btn.alt:hover{background:var(--c-surface-alt);box-shadow:0 4px 26px -4px rgba(0,0,0,.6)}
.btn-ghost{padding:.6rem 1.1rem;border:1px solid var(--c-border);border-radius:var(--radius-pill);font-size:.8rem;letter-spacing:1px;font-weight:600;text-transform:uppercase;background:rgba(255,255,255,.04);color:var(--c-text-soft);transition:var(--transition)}
.btn-ghost:hover{border-color:var(--c-accent-alt);color:#fff}

/* ---------- ABOUT ---------- */
.about-layout{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start;margin-top:2.5rem}
.about-portrait{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:0 6px 36px -8px rgba(0,0,0,.55)}
.about-portrait img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;filter:saturate(108%) contrast(102%)}
.about-highlights{display:grid;gap:1.1rem;font-size:1rem;line-height:1.55;color:var(--c-text-soft)}
.about-highlights li{padding:1rem 1.1rem;background:linear-gradient(135deg,var(--c-surface),var(--c-surface-alt));border:1px solid var(--c-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);backdrop-filter:blur(6px)}
.about-highlights strong{color:#fff;font-weight:600}

/* ---------- SERVICES ---------- */
.service-grid{display:grid;gap:clamp(1.8rem,3vw,2.4rem);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));max-width:1100px;margin:0 auto}
.service-card{border:1px solid var(--c-border);background:linear-gradient(160deg,var(--c-surface) 0%,var(--c-surface-alt) 100%);padding:1.95rem 1.75rem 2.1rem;border-radius:var(--radius);position:relative;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;gap:1rem;min-height:260px;isolation:isolate}
.service-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,179,71,.18),transparent 70%);opacity:.9;pointer-events:none}
.service-card .icon{width:60px;height:60px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(140deg,rgba(255,179,71,.15),rgba(255,179,71,.05));box-shadow:0 2px 10px -2px rgba(0,0,0,.5);}
.service-card h3{font-size:1.15rem;font-weight:600;letter-spacing:.5px}
.service-card p{font-size:.95rem;line-height:1.5;color:var(--c-text-soft)}
.service-card:hover{box-shadow:var(--shadow-glow);transform:translateY(-4px);transition:var(--transition)}

/* ---------- PORTFOLIO ---------- */
.portfolio-grid{display:grid;gap:clamp(1rem,1.8vw,1.5rem);grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));max-width:1040px;margin:2.2rem auto 0 auto}
.portfolio-item{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--c-surface);aspect-ratio:4/3;border:1px solid var(--c-border);box-shadow:0 3px 20px -6px rgba(0,0,0,.6);cursor:default;transition:var(--transition)}
.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:800ms cubic-bezier(.6,.2,.1,1);filter:brightness(.9) saturate(108%)}
.portfolio-item figcaption{position:absolute;inset:auto 0 0 0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.0));padding:1.1rem 1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;font-size:.8rem}
.portfolio-item .cat{font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--c-accent-alt);font-size:.65rem}
.portfolio-item .name{font-size:.9rem;font-weight:500;line-height:1.3;color:#fff}
.portfolio-item:hover img{transform:scale(1.08);filter:brightness(1) saturate(118%)}
.cv-cta{margin:3.2rem auto 0 auto;text-align:center;max-width:680px;background:linear-gradient(120deg,var(--c-surface-alt),var(--c-surface));padding:2rem 2.4rem;border-radius:var(--radius);border:1px solid var(--c-border);box-shadow:var(--shadow-sm)}
.cv-cta p{margin-bottom:1.2rem;color:var(--c-text-soft);font-size:1rem}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));max-width:900px;margin:0 auto 0 auto}
.contact-card{background:linear-gradient(140deg,var(--c-surface),var(--c-surface-alt));padding:1.4rem 1.3rem 1.55rem;border-radius:var(--radius-sm);border:1px solid var(--c-border);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 25%,rgba(255,179,71,.18),transparent 70%);opacity:.65;pointer-events:none}
.contact-card h3{font-size:.9rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--c-accent-alt);margin-bottom:.4rem}
.contact-card p a{color:#fff;font-weight:600;word-break:break-word}
.contact-card p a:hover{text-decoration:underline}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:auto;padding:2.6rem var(--gutter);text-align:center;font-size:.8rem;letter-spacing:.6px;color:var(--c-text-soft);background:linear-gradient(180deg,var(--c-bg-alt),#09161f)}
.footer-content{display:flex;align-items:center;justify-content:center;gap:.5rem}
.site-footer p{opacity:.8}

/* ---------- REVEAL ANIMATIONS ---------- */
[data-reveal]{--reveal-translate:22px;--reveal-delay:0s;opacity:0;transform:translate3d(0,var(--reveal-translate),0);transition:opacity .9s var(--transition),transform .9s var(--transition)}
[data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0)}
.service-card[data-reveal]{--reveal-delay:.1s}
.service-card:nth-child(2)[data-reveal]{transition-delay:.12s}
.service-card:nth-child(3)[data-reveal]{transition-delay:.24s}
.portfolio-item[data-reveal]{transition-duration:1s}

/* ---------- MEDIA QUERIES ---------- */
@media (max-width:960px){
    .main-nav{position:fixed;inset:64px 0 auto 0;padding:1.6rem var(--gutter) 2.8rem;background:linear-gradient(165deg,#0d1f29,#132c3b);backdrop-filter:blur(18px) saturate(180%);transform:translateY(-120%);transition:var(--transition);border-bottom:1px solid var(--c-border);}
    .main-nav ul{flex-direction:column;align-items:flex-start;gap:1.1rem}
    .nav-toggle{display:flex}
    .nav-open .main-nav{transform:translateY(0)}
    body.nav-open{overflow:hidden}
}
@media (max-width:480px){
    .portfolio-grid{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- UTILITIES ---------- */
.hidden{display:none!important}