/*
Theme Name: JALI IT
Author: JALI IT
Description: A focused consultancy theme for JALI IT.
Version: 1.3.0
Text Domain: jali-it
*/

:root { --ink:#102b32; --muted:#5f7175; --mint:#b9ecd0; --lime:#d7f26d; --paper:#f8faf7; --line:#dbe4df; --dark:#12333b; --radius:1.25rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; }
.shell { width:min(1160px,calc(100% - 3rem)); margin-inline:auto; }
.site-header { position:absolute; z-index:5; width:100%; padding:1.25rem 0; }
.navigation { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:inline-flex; align-items:center; gap:.55rem; color:var(--ink); font-size:1.1rem; font-weight:800; letter-spacing:.07em; text-decoration:none; }
.brand em { color:#4b8d73; font-style:normal; }
.brand-mark { display:grid; width:2rem; height:2rem; place-items:center; border-radius:50%; background:var(--ink); color:var(--lime); font-family:Georgia,serif; font-size:1.25rem; font-weight:400; letter-spacing:0; }
.site-navigation ul { display:flex; gap:1.7rem; margin:0; padding:0; list-style:none; }
.site-navigation a { color:var(--ink); font-size:.9rem; font-weight:600; text-decoration:none; }
.button { display:inline-flex; align-items:center; gap:.65rem; padding:.83rem 1.2rem; border:1px solid var(--ink); border-radius:100px; background:var(--ink); color:#fff; font-size:.9rem; font-weight:700; text-decoration:none; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); background:#27535c; }
.button-small { padding:.58rem 1rem; font-size:.82rem; }

.hero { overflow:hidden; min-height:745px; padding:10.5rem 0 5rem; background:linear-gradient(135deg,#f9fbf7,#e7f3eb); }
.hero-grid { display:grid; min-height:560px; grid-template-columns:1.1fr .9fr; align-items:center; gap:3rem; }
.eyebrow,.section-number { margin:0 0 1rem; color:#4c806c; font-size:.73rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.section-label { display:flex; align-items:center; gap:.55rem; }
.section-label svg { width:1.1rem; height:1.1rem; stroke:currentColor; stroke-width:1.6; }
.hero h1,.intro h2,.section-heading h2,.approach h2,.contact h2 { margin:0; font-size:clamp(3rem,6vw,5.9rem); letter-spacing:-.07em; line-height:.95; }
.hero h1 { max-width:9.5ch; font-size:clamp(2.75rem,4.6vw,4.75rem); line-height:1.02; }
.hero h1 span { font-family:Georgia,serif; font-style:italic; font-weight:400; }
.hero-lead { max-width:31rem; margin:2rem 0; color:var(--muted); font-size:1.18rem; }
.hero-actions,.contact-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.35rem; }
.text-link,.linkedin-link { color:var(--ink); font-size:.9rem; font-weight:750; text-decoration:none; }
.hero-art { position:relative; min-height:480px; border-radius:47% 53% 44% 56% / 46% 43% 57% 54%; background:#bbebd1; isolation:isolate; }
.orb { position:absolute; z-index:0; border-radius:50%; }
.orb-one { top:12%; right:16%; width:44%; aspect-ratio:1; background:var(--lime); box-shadow:0 0 0 30px rgb(255 255 255/.22); }
.orb-two { bottom:11%; left:13%; width:32%; aspect-ratio:1; background:#83c6a8; }
.portrait { position:absolute; z-index:2; top:12%; left:18%; width:52%; aspect-ratio:1; object-fit:cover; border:10px solid rgb(255 255 255/.58); border-radius:50%; box-shadow:0 22px 38px rgb(16 43 50/.2); }
.portrait-caption { position:absolute; z-index:3; bottom:13%; left:19%; margin:0; color:var(--ink); font-size:.82rem; font-weight:800; letter-spacing:.04em; }
.portrait-caption span { color:#4c806c; font-size:.69rem; letter-spacing:.12em; text-transform:uppercase; }
.grid-lines { position:absolute; z-index:0; inset:0; opacity:.45; background-image:linear-gradient(rgb(16 43 50/.09) 1px,transparent 1px),linear-gradient(90deg,rgb(16 43 50/.09) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(circle at center,#000 15%,transparent 72%); pointer-events:none; }

.intro { padding:8.5rem 0; }
.intro-grid { display:grid; grid-template-columns:1.15fr .75fr; gap:6rem; align-items:end; }
.intro h2,.section-heading h2,.approach h2 { font-size:clamp(2.5rem,4.4vw,4.4rem); }
.intro h2 em,.approach h2 em { font-family:Georgia,serif; font-weight:400; }
.intro-grid p { margin:0; color:var(--muted); font-size:1.12rem; }
.intro-grid p + p { margin-top:1rem; }
.credentials { padding:0 0 7rem; }
.credentials-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.credentials-grid div { display:flex; flex-direction:column; gap:.45rem; min-height:150px; padding:1.5rem; border-right:1px solid var(--line); }
.credentials-grid div:first-child { border-left:1px solid var(--line); }
.credentials-grid strong { font-size:1.7rem; letter-spacing:-.05em; }
.credentials-grid span { color:var(--muted); font-size:.86rem; }
.customers { padding:0 0 7rem; }
.customers-heading { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:2rem; }
.customers-heading p:last-child { max-width:32rem; margin:0; color:var(--muted); font-size:.95rem; }
.customer-list { display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.customer-logo,.customer-wordmark { display:grid; flex:1 1 33.333%; min-width:220px; min-height:112px; place-items:center; overflow:hidden; padding:1.4rem 1.5rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; transition:background .2s,color .2s; }
.customer-logo img { display:block; max-width:150px; max-height:60px; object-fit:contain; mix-blend-mode:multiply; }
.customer-logo-novonesis img { max-width:190px; max-height:78px; transform:scale(1.18); }
.customer-logo-carlsberg img { max-width:175px; max-height:78px; transform:scale(1.68); }
.customer-logo-chr-hansen img { max-width:175px; max-height:78px; transform:scale(1.45); }
.customer-logo-bode { background:#fff; }
.customer-logo-bode img { max-width:180px; filter:brightness(0); mix-blend-mode:normal; }
.customer-logo:hover,.customer-wordmark:hover { background:var(--lime); }
.customer-wordmark { color:#31505a; font-family:Georgia,serif; font-size:1.35rem; letter-spacing:-.03em; }
.customer-logo-abco img { max-width:135px; mix-blend-mode:normal; }
.services { padding:6.5rem 0; background:var(--dark); color:#eff8f3; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:3.25rem; }
.section-heading .eyebrow { color:var(--mint); }
.section-lead { max-width:25rem; margin:0; color:#b9cbcb; font-size:.96rem; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgb(255 255 255/.22); }
.service-card { min-height:285px; padding:1.7rem 1.5rem; border-right:1px solid rgb(255 255 255/.18); }
.service-card:first-child { border-left:1px solid rgb(255 255 255/.18); }
.service-icon { display:grid; width:3rem; height:3rem; place-items:center; border:1px solid rgb(185 236 208/.5); border-radius:.8rem; color:var(--lime); background:rgb(255 255 255/.05); }
.service-icon svg { width:1.75rem; height:1.75rem; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.service-card h3 { margin:3.35rem 0 .75rem; font-size:1.28rem; }
.service-card p { margin:0; color:#b9cbcb; font-size:.92rem; }
.approach { padding:8.5rem 0; }
.approach-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:8rem; }
.approach-list { border-top:1px solid var(--line); }
.approach-list article { display:flex; gap:2rem; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.approach-icon { display:grid; width:2.35rem; height:2.35rem; flex:0 0 auto; place-items:center; border:1px solid #a9cdb8; border-radius:.7rem; background:#eff8f1; color:#3d8067; }
.approach-icon svg { width:1.35rem; height:1.35rem; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.approach-list h3 { margin:0 0 .35rem; font-size:1.15rem; }
.approach-list p { max-width:30rem; margin:0; color:var(--muted); }
.contact { padding:0 0 6rem; }
.contact-panel { padding:5.5rem; overflow:hidden; border-radius:var(--radius); background:var(--lime); background-image:radial-gradient(circle at 93% 18%,#f3ffd0 0 7%,transparent 7.2%),radial-gradient(circle at 90% 20%,transparent 0 11%,rgb(18 51 59/.12) 11.2% 11.7%,transparent 12%); }
.contact h2 { margin-bottom:1.7rem; font-size:clamp(3rem,5.3vw,5rem); }
.contact-panel > p:not(.eyebrow) { max-width:32rem; margin:0 0 2rem; color:#385156; font-size:1.1rem; }
.button-light { border-color:#fff; background:#fff; color:var(--ink); }
.site-footer { padding:2.5rem 0; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:2rem; align-items:start; }
.footer-grid p { margin:0; color:var(--muted); font-size:.8rem; }
.footer-grid p:last-child { text-align:right; }
.content-section { padding:10rem 0 6rem; }
.prose { max-width:780px; }
.prose h1 { font-size:3rem; letter-spacing:-.05em; }
.prose p { font-size:1.1rem; }

@media (max-width:800px) { .site-navigation { display:none; } .hero { min-height:auto; padding-top:8.5rem; } .hero-grid,.intro-grid,.approach-grid,.customers-heading { grid-template-columns:1fr; gap:3rem; } .hero-art { min-height:330px; } .portrait { top:8%; left:24%; width:51%; } .portrait-caption { bottom:9%; left:24%; } .intro,.approach { padding:5.5rem 0; } .credentials,.customers { padding-bottom:5.5rem; } .credentials-grid { grid-template-columns:1fr; } .credentials-grid div { min-height:auto; border-left:1px solid var(--line); border-bottom:1px solid var(--line); } .credentials-grid div:last-child { border-bottom:0; } .customer-logo,.customer-wordmark { flex-basis:50%; min-width:0; } .service-grid { grid-template-columns:1fr 1fr; } .service-card:nth-child(odd) { border-left:1px solid rgb(255 255 255/.18); } .service-card { min-height:220px; } .service-card h3 { margin-top:2.5rem; } .contact-panel { padding:3.5rem 2rem; } .footer-grid { grid-template-columns:1fr; } .footer-grid p:last-child { text-align:left; } }
@media (max-width:480px) { .shell { width:min(100% - 2rem,1160px); } .button-small { display:none; } .hero h1 { font-size:3.25rem; } .service-grid { grid-template-columns:1fr; } .service-card { border-left:1px solid rgb(255 255 255/.18); } .hero-actions { align-items:flex-start; flex-direction:column; } .contact-panel { padding:3rem 1.5rem; } }

/* Visual refinement */
body { background:radial-gradient(circle at 92% 0%,#edf8ed 0,transparent 30rem),var(--paper); }
.navigation { padding:.7rem .85rem .7rem 1rem; border:1px solid rgb(16 43 50/.08); border-radius:999px; background:rgb(248 250 247/.72); box-shadow:0 8px 28px rgb(16 43 50/.05); backdrop-filter:blur(12px); }
.site-navigation a { position:relative; padding:.35rem 0; }
.site-navigation a::after { position:absolute; right:0; bottom:0; left:0; height:2px; background:#4b8d73; content:""; transform:scaleX(0); transform-origin:right; transition:transform .2s ease; }
.site-navigation a:hover::after { transform:scaleX(1); transform-origin:left; }
.hero { position:relative; background:linear-gradient(125deg,#fbfcf8 0%,#e9f5ec 58%,#d5eedb 100%); }
.hero::before { position:absolute; top:0; right:0; width:42vw; height:100%; background:linear-gradient(90deg,transparent,rgb(255 255 255/.22)); content:""; pointer-events:none; }
.hero-copy { position:relative; z-index:1; }
.hero h1 { text-wrap:balance; }
.button { box-shadow:0 9px 20px rgb(16 43 50/.15); }
.button:hover { box-shadow:0 13px 24px rgb(16 43 50/.22); }
.text-link { border-bottom:1px solid currentColor; padding-bottom:.2rem; }
.hero-art { overflow:hidden; border:1px solid rgb(16 43 50/.12); box-shadow:0 35px 70px rgb(34 83 68/.18); transform:rotate(2deg); }
.portrait { border-width:12px; filter:saturate(.92) contrast(1.04); }
.signal-card { backdrop-filter:blur(10px); }
.intro { position:relative; }
.intro::before { position:absolute; top:22%; left:0; width:3px; height:8rem; background:var(--lime); content:""; }
.credentials-grid { overflow:hidden; border-radius:.9rem; box-shadow:0 12px 25px rgb(16 43 50/.05); }
.credentials-grid div { position:relative; background:#fff; transition:background .2s,transform .2s; }
.credentials-grid div:nth-child(2) { background:#f0f8f1; }
.credentials-grid div:nth-child(3) { background:#e1f1e6; }
.credentials-grid div:hover { z-index:1; background:var(--lime); transform:translateY(-5px); }
.credentials-grid strong { font-size:2rem; }
.service-card { position:relative; overflow:hidden; transition:background .25s,transform .25s; }
.service-card::after { position:absolute; right:1.4rem; bottom:1.35rem; color:var(--lime); content:"↗"; font-size:1.15rem; opacity:0; transform:translate(-6px,6px); transition:opacity .25s,transform .25s; }
.service-card:hover { background:#1c4650; transform:translateY(-8px); }
.service-card:hover::after { opacity:1; transform:translate(0); }
.service-card:hover .service-icon { background:var(--lime); color:var(--dark); }
.approach-list article { transition:padding .2s,background .2s; }
.approach-list article:hover { padding-left:1rem; background:#f0f7f1; }
.approach-list article:hover .approach-icon { border-color:#5baa83; background:var(--lime); color:var(--dark); }
.contact-panel { position:relative; box-shadow:0 24px 50px rgb(69 109 72/.18); }
.contact-panel::after { position:absolute; right:-5rem; bottom:-7rem; width:20rem; height:20rem; border:1px solid rgb(16 43 50/.15); border-radius:50%; box-shadow:0 0 0 2.5rem rgb(255 255 255/.2),0 0 0 5rem rgb(16 43 50/.07); content:""; pointer-events:none; }
.contact-panel > * { position:relative; z-index:1; }
.site-footer { background:#f1f6f1; }
@media (max-width:800px) { .navigation { padding:.5rem .65rem .5rem .8rem; } .hero-art { transform:none; } .intro::before { display:none; } .credentials-grid div:hover { transform:none; } }
@media (max-width:800px) { .section-heading { align-items:flex-start; flex-direction:column; gap:1rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }