:root {
  --navy: #24384d;
  --navy-900: #102235;
  --teal: #003b4a;
  --green: #19a85b;
  --green-dark: #11844a;
  --mint: #e9f8f0;
  --paper: #f8faf9;
  --white: #ffffff;
  --ink: #102235;
  --muted: #657485;
  --line: rgba(36, 56, 77, 0.12);
  --shadow: 0 24px 80px rgba(16, 34, 53, 0.12);
  --radius: 8px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Manrope, Arial, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid rgba(25, 168, 91, 0.45); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 999; transform: translateY(-160%); padding: .8rem 1rem; background: var(--green); color: white; border-radius: var(--radius); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 110px 0; position: relative; }
.site-header { position: fixed; inset: 16px 0 auto; z-index: 100; pointer-events: none; }
.nav-shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; background: rgba(255,255,255,.74); box-shadow: 0 18px 50px rgba(16,34,53,.08); backdrop-filter: blur(18px); pointer-events: auto; transition: background .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled .nav-shell { background: rgba(255,255,255,.92); box-shadow: 0 18px 60px rgba(16,34,53,.14); }
.brand { display: inline-flex; align-items: center; min-width: 190px; }
.brand-mark { width: 188px; height: 72px; display: grid; place-items: center; overflow: visible; }
.brand-mark img { width: 176px; max-height: 70px; object-fit: contain; transform: scale(1.12); transform-origin: left center; }
.site-menu { display: flex; align-items: center; gap: 8px; }
.site-menu a { padding: 10px 14px; color: var(--teal); font-weight: 700; font-size: .92rem; border-radius: 999px; transition: color .2s ease, background .2s ease, transform .2s ease; }
.site-menu a:hover { color: var(--green-dark); background: rgba(25,168,91,.09); transform: translateY(-1px); }
.nav-cta { background: var(--navy) !important; color: white !important; box-shadow: 0 12px 30px rgba(36,56,77,.24); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--navy); padding: 12px; }
.menu-toggle span { display: block; height: 2px; background: #fff; margin: 5px 0; border-radius: 20px; transition: transform .2s ease, opacity .2s ease; }
.hero { min-height: auto; display: flex; align-items: center; padding: 140px 0 104px; background: radial-gradient(circle at 12% 20%, rgba(25,168,91,.13), transparent 30%), linear-gradient(135deg, #ffffff 0%, #f3f8f6 55%, #eef5f5 100%); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.beam { position: absolute; width: 44vw; height: 44vw; border-radius: 50%; filter: blur(12px); opacity: .46; animation: drift 14s ease-in-out infinite alternate; }
.beam-one { right: -16vw; top: 5vh; background: radial-gradient(circle, rgba(25,168,91,.25), transparent 65%); }
.beam-two { left: -20vw; bottom: -18vw; background: radial-gradient(circle, rgba(36,56,77,.2), transparent 67%); animation-delay: -6s; }
.grid-noise { position: absolute; inset: 0; background-image: linear-gradient(rgba(36,56,77,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(36,56,77,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hero-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; } .hero-copy { min-width: 0; }
.eyebrow { margin: 0 0 18px; color: var(--green-dark); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3, .btn, .nav-cta, .service-top span { font-family: Sora, Manrope, Arial, sans-serif; }
h1 { font-size: clamp(2.8rem, 5.3vw, 5rem); line-height: 1.02; max-width: 900px; overflow-wrap: anywhere; hyphens: auto; margin-bottom: 22px; color: var(--navy-900); } h1 span { display: block; }
h2 { font-size: clamp(2.1rem, 4.2vw, 4.5rem); line-height: 1.02; color: var(--navy); margin-bottom: 22px; }
h3 { font-size: 1.22rem; line-height: 1.2; margin-bottom: 12px; color: var(--teal); }
.hero-subtitle, .section-heading p, .about-copy p, .contact-copy p { color: var(--muted); font-size: 1.08rem; max-width: 700px; }
.rotator { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-bottom: 22px; color: var(--teal); font-weight: 800; font-size: clamp(1.25rem, 2.5vw, 2rem); }
.rotator span { color: var(--green); position: relative; }
.rotator span.is-changing { animation: wordFlip .38s ease; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 34px 0 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 800; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; cursor: pointer; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { color: white; background: var(--green); box-shadow: 0 18px 36px rgba(25,168,91,.28); }
.btn-primary:hover { background: var(--green-dark); box-shadow: 0 22px 42px rgba(25,168,91,.34); }
.btn-secondary { color: var(--teal); background: white; border-color: var(--line); box-shadow: 0 14px 36px rgba(16,34,53,.08); }
.trust-line { color: var(--teal); font-weight: 800; overflow-wrap: anywhere; }
.hero-visual { min-height: 520px; position: relative; }
.browser-card, .campaign-card, .website-card, .analytics-card, .design-card, .brand-card { position: absolute; border: 1px solid rgba(255,255,255,.74); border-radius: var(--radius); background: rgba(255,255,255,.82); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.browser-card { width: min(430px, 88vw); height: 318px; right: 6%; top: 80px; padding: 18px; } .web-card::after { content: ""; position: absolute; inset: 56px 28px auto auto; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(from 20deg, var(--green), #8ee8b0, var(--navy), var(--green)); opacity: .18; animation: spinSoft 12s linear infinite; }
.browser-bar { display: flex; gap: 7px; height: 18px; align-items: center; }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(36,56,77,.22); }
.mock-hero { margin-top: 26px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.mock-hero div:first-child { height: 150px; border-radius: var(--radius); background: linear-gradient(135deg, var(--navy), var(--teal)); grid-row: span 2; }
.mock-hero div:nth-child(2), .mock-hero div:nth-child(3) { border-radius: var(--radius); background: var(--mint); }
.mock-lines { display: grid; gap: 11px; margin-top: 24px; }
.mock-lines span { height: 11px; border-radius: 999px; background: rgba(36,56,77,.12); }
.mock-lines span:nth-child(2) { width: 78%; }.mock-lines span:nth-child(3) { width: 55%; }.web-label { position: absolute; right: 22px; bottom: 20px; padding: 8px 12px; border-radius: 999px; color: var(--teal); background: var(--mint); font-weight: 800; font-size: .78rem; }
.campaign-card { left: 0; top: 38px; width: 176px; padding: 22px; z-index: 3; }
.campaign-card p, .website-card p, .brand-card p { color: var(--muted); margin-bottom: 4px; font-weight: 800; }.campaign-card strong { display: block; color: var(--green); font-size: 2.8rem; line-height: 1; }.campaign-card span { color: var(--teal); font-weight: 800; }.website-card { right: -6px; top: 10px; width: 190px; padding: 20px; z-index: 2; }.website-card strong { display: block; color: var(--teal); font-size: 1.45rem; line-height: 1.1; }.website-card span { display: block; margin-top: 8px; color: var(--muted); font-weight: 800; font-size: .82rem; }.brand-card { left: 42%; bottom: 0; width: 190px; padding: 18px; z-index: 4; }.brand-card div { display: flex; gap: 10px; margin-top: 12px; }.brand-card span { width: 38px; height: 38px; border-radius: 50%; background: var(--green); box-shadow: inset 0 0 0 7px rgba(255,255,255,.32); }.brand-card span:nth-child(2) { background: var(--navy); }.brand-card span:nth-child(3) { background: #dff6ea; }
.analytics-card { left: 18px; bottom: 88px; width: 250px; height: 170px; display: flex; align-items: end; gap: 16px; padding: 24px; z-index: 4; }
.chart-bar { flex: 1; border-radius: 999px 999px 6px 6px; background: linear-gradient(to top, var(--green), #83e7aa); animation: pulseBar 2.8s ease-in-out infinite; }.h-1{height:45%}.h-2{height:72%;animation-delay:.2s}.h-3{height:58%;animation-delay:.4s}.h-4{height:86%;animation-delay:.6s}
.design-card { right: 0; bottom: 42px; width: 218px; padding: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; z-index: 3; }.design-card span { aspect-ratio: 1; border-radius: var(--radius); background: var(--mint); animation: swatchPulse 3.2s ease-in-out infinite; }.design-card span:first-child { background: var(--green); }.design-card span:nth-child(2) { animation-delay: .25s; }.design-card span:nth-child(3) { animation-delay: .5s; }.design-card span:nth-child(4) { background: var(--navy); animation-delay: .75s; }.design-card em { grid-column: 1 / -1; color: var(--teal); font-style: normal; font-weight: 800; font-size: .78rem; } .cursor-dot { position: absolute; right: 29%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 10px rgba(25,168,91,.12), 0 16px 30px rgba(25,168,91,.25); z-index: 5; }
.float-a { animation: float 7s ease-in-out infinite; }.float-b { animation: float 6s ease-in-out infinite -1s; }.float-c { animation: float 8s ease-in-out infinite -2s; }.float-d { animation: float 7.5s ease-in-out infinite -3s; }.float-e { animation: floatSide 7.2s ease-in-out infinite -1.5s; }.float-f { animation: float 6.8s ease-in-out infinite -2.5s; }.float-g { animation: cursorMove 5.6s ease-in-out infinite; }
.section-heading { max-width: 760px; margin-bottom: 46px; }
.card-grid, .why-grid, .highlight-grid { display: grid; gap: 18px; }
.services-grid { grid-template-columns: repeat(3, 1fr); gap: 42px 18px; }
.service-card, .why-card, .highlight-card, .step-card, .project-card { border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.82); box-shadow: 0 18px 50px rgba(16,34,53,.07); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.service-card:hover, .why-card:hover, .project-card:hover, .step-card:hover { transform: translateY(-7px); box-shadow: 0 28px 76px rgba(16,34,53,.13); border-color: rgba(25,168,91,.35); }
.service-card { padding: 18px 18px 26px; position: relative; overflow: hidden; background: linear-gradient(145deg, var(--pastel-a, #ffffff), var(--pastel-b, #f8faf9)); border: 1px solid var(--pastel-line, rgba(36,56,77,.12)); }.service-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, var(--pastel-line, #b8ead0), rgba(255,255,255,.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; pointer-events: none; }.service-card::after { content: ""; position: absolute; right: -52px; top: -52px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, var(--pastel-glow, rgba(25,168,91,.18)), transparent 68%); transition: transform .25s ease; }.service-card:hover::after { transform: scale(1.18); }
.service-image { position: relative; z-index: 1; height: 158px; margin-bottom: 24px; border-radius: 18px; overflow: hidden; background: #eef5f5; box-shadow: 0 18px 36px var(--image-shadow, rgba(36,56,77,.12)); } .service-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .55s ease, filter .55s ease; filter: saturate(1.02) contrast(1); } .service-card:hover .service-image img { transform: scale(1.06); filter: saturate(1.08) contrast(1.02); } .service-card h3, .service-card p { position: relative; z-index: 1; } .service-web { --pastel-a:#f0fff8; --pastel-b:#ffffff; --pastel-line:#8de8c1; --pastel-glow:rgba(119,232,185,.38); --image-shadow:rgba(25,168,91,.18); } .service-campaign { --pastel-a:#fff7ed; --pastel-b:#f6fbff; --pastel-line:#ffd49a; --pastel-glow:rgba(255,196,121,.36); --image-shadow:rgba(238,155,72,.16); } .service-brand { --pastel-a:#f5f0ff; --pastel-b:#ffffff; --pastel-line:#c8b6ff; --pastel-glow:rgba(196,181,253,.35); --image-shadow:rgba(124,58,237,.14); } .service-social { --pastel-a:#eef7ff; --pastel-b:#ffffff; --pastel-line:#93c5fd; --pastel-glow:rgba(147,197,253,.35); --image-shadow:rgba(59,130,246,.14); } .service-seo { --pastel-a:#f1fff7; --pastel-b:#f8fbff; --pastel-line:#9be7b5; --pastel-glow:rgba(134,239,172,.34); --image-shadow:rgba(22,163,74,.14); } .service-strategy { --pastel-a:#fff1f7; --pastel-b:#f8fffb; --pastel-line:#f9a8d4; --pastel-glow:rgba(249,168,212,.32); --image-shadow:rgba(219,39,119,.12); }
.service-card p, .why-card p, .highlight-card p, .step-card p, .project-info p { color: var(--muted); margin-bottom: 0; }
.dark-band { color: white; background: radial-gradient(circle at 75% 20%, rgba(25,168,91,.24), transparent 34%), linear-gradient(135deg, var(--navy-900), var(--navy)); }
.dark-band h2, .dark-band h3 { color: white; }.dark-band p { color: rgba(255,255,255,.72); }.dark-band .eyebrow { color: #8df0b5; }
.split-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
.highlight-grid { grid-template-columns: repeat(3, 1fr); margin-top: 52px; }.highlight-card { padding: 28px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); box-shadow: none; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }.timeline::before { content: ""; position: absolute; left: 5%; right: 5%; top: 35px; height: 2px; background: linear-gradient(90deg, var(--green), rgba(36,56,77,.14)); }.step-card { padding: 26px; position: relative; z-index: 1; }.step-card span { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 28px; color: white; background: var(--navy); font-weight: 800; box-shadow: 0 12px 24px rgba(36,56,77,.2); }
.portfolio { background: white; }.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }.project-card { overflow: hidden; background: var(--paper); }.real-portfolio-grid { gap: 28px; }.real-project { background: #fff; }.project-preview { min-height: 280px; padding: 18px; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--teal)); }.preview-inner { height: 330px; margin-top: 22px; border-radius: var(--radius); background: rgba(255,255,255,.92); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; transform: translateY(0); transition: transform .55s ease; }.project-card:hover .preview-inner { transform: translateY(-42px); }.preview-inner span { grid-column: 1 / -1; height: 90px; border-radius: var(--radius); background: linear-gradient(135deg, var(--green), #9ff0bd); }.preview-inner strong { height: 86px; border-radius: var(--radius); background: rgba(36,56,77,.12); }.preview-inner i { height: 120px; border-radius: var(--radius); background: rgba(36,56,77,.08); }.preview-two { background: linear-gradient(135deg, #102235, #19a85b); }.preview-three { background: linear-gradient(135deg, #003b4a, #d9fff0); }.preview-four { background: linear-gradient(135deg, #24384d, #5fd991); }.real-preview { display: block; min-height: 320px; padding: 0; background: #eef5f5; border-bottom: 1px solid var(--line); overflow: hidden; }.real-preview img { width: 100%; height: 360px; object-fit: cover; object-position: top center; transition: transform .7s ease; }.real-project:hover .real-preview img { transform: translateY(-28px) scale(1.02); }.project-info { padding: 26px; }.project-info span { display: inline-flex; margin-bottom: 12px; color: var(--green-dark); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }.project-link { display: inline-flex; margin-top: 18px; color: var(--teal); font-weight: 800; border-bottom: 2px solid var(--green); }
.why-grid { grid-template-columns: repeat(4, 1fr); }.why-card { padding: 26px; }
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; } address { display: grid; gap: 10px; margin-top: 34px; font-style: normal; } address a { color: white; font-weight: 800; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 26px; border-radius: var(--radius); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }.field { display: grid; gap: 7px; }.field.full { grid-column: 1 / -1; } label { color: white; font-weight: 800; font-size: .9rem; } input, select, textarea { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 13px 14px; color: white; background: rgba(255,255,255,.12); } option { color: var(--ink); } textarea { resize: vertical; } .field small { min-height: 18px; color: #ffcbc7; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ff8b82; } .form-success { display: none; grid-column: 1 / -1; margin: 0; color: #9ff0bd !important; font-weight: 800; }.form-success.is-visible { display: block; }
.site-footer { padding: 40px 0; color: rgba(255,255,255,.72); background: var(--navy-900); }.footer-layout { display: grid; gap: 14px; }.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }.site-footer a { color: white; font-weight: 800; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes float { 0%,100%{ transform: translate3d(0,0,0) rotate(0deg); } 50%{ transform: translate3d(0,-18px,0) rotate(1deg); } } @keyframes floatSide { 0%,100%{ transform: translate3d(0,0,0) rotate(0deg); } 50%{ transform: translate3d(14px,-14px,0) rotate(-1deg); } } @keyframes cursorMove { 0%,100%{ transform: translate3d(0,0,0); } 45%{ transform: translate3d(-74px,54px,0); } 70%{ transform: translate3d(36px,-42px,0); } } @keyframes swatchPulse { 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(.92); opacity: .78; } } @keyframes spinSoft { to{ transform: rotate(360deg); } }
@keyframes drift { from{ transform: translate3d(0,0,0) scale(1); } to{ transform: translate3d(-30px,20px,0) scale(1.08); } }
@keyframes pulseBar { 0%,100%{ transform: scaleY(.85); } 50%{ transform: scaleY(1); } }
@keyframes wordFlip { from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform: translateY(0); } }
@media (max-width: 980px) { .section { padding: 84px 0; } .hero-layout, .split-layout, .contact-layout { grid-template-columns: 1fr; gap: 44px; } .hero { padding-top: 130px; } .hero-visual { min-height: 470px; } .services-grid, .highlight-grid { grid-template-columns: repeat(2, 1fr); } .timeline, .why-grid { grid-template-columns: repeat(2, 1fr); } .timeline::before { display: none; } .portfolio-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .brand { min-width: 150px; } .brand-mark { width: 146px; height: 58px; } .brand-mark img { width: 140px; max-height: 56px; } .container { width: calc(100% - 28px); max-width: 360px; margin-left: 14px; margin-right: auto; } .nav-shell { width: calc(100% - 28px); max-width: 360px; margin-left: 14px; margin-right: auto; border-radius: 24px; align-items: flex-start; } .menu-toggle { display: block; flex: 0 0 auto; } .site-menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 12px; border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 18px 50px rgba(16,34,53,.14); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s ease; } .site-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .site-menu a { text-align: center; } .menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2){ opacity:0; }.menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } h1 { font-size: clamp(1.95rem, 8vw, 2.35rem); line-height: 1.12; } h2 { font-size: clamp(2rem, 11vw, 3.2rem); } .hero-actions { display: grid; gap: 12px; } .btn { width: 100%; } .hero-visual { min-height: 520px; } .browser-card { right: 0; top: 82px; width: 92%; } .campaign-card { left: 0; top: 0; } .website-card { right: 0; top: 24px; width: 166px; } .analytics-card { width: 58%; left: 0; bottom: 120px; } .design-card { width: 44%; right: 0; bottom: 64px; } .brand-card { left: 0; bottom: 12px; width: 170px; } .cursor-dot { display: none; } .services-grid, .highlight-grid, .timeline, .why-grid, .contact-form { grid-template-columns: 1fr; } .field.full { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } }












/* 2026 creative refresh */
body::before { content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 8% 18%, rgba(25,168,91,.08), transparent 24%), radial-gradient(circle at 88% 12%, rgba(96,165,250,.08), transparent 24%), radial-gradient(circle at 80% 78%, rgba(249,168,212,.08), transparent 24%); }
.services { background: linear-gradient(180deg, #fff 0%, #f6fbfb 100%); }
.services-heading { display: grid; grid-template-columns: .85fr 1fr; gap: 38px; align-items: end; max-width: none; }
.services-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.services-heading h2 { margin-bottom: 0; }
.services-heading h2 span { display: block; color: #19a85b; font-size: .52em; line-height: 1.05; }
.services-heading p { margin-bottom: 8px; }
.service-card { min-height: 368px; display: flex; flex-direction: column; justify-content: flex-start; padding: 28px; isolation: isolate; }
.service-card:nth-child(2n) { margin-top: 26px; }
.service-card:nth-child(3n) { min-height: 404px; }
.service-card:hover { transform: translateY(-9px) rotate(.35deg); }
.service-card:nth-child(2n):hover { transform: translateY(-9px) rotate(-.35deg); }
.service-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.service-icon { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 18px 24px var(--image-shadow, rgba(36,56,77,.13))); transition: transform .35s ease; }
.service-card:hover .service-icon { transform: translateY(-4px) rotate(-4deg) scale(1.04); }
.service-top span { padding: 8px 11px; border-radius: 999px; color: var(--teal); background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.7); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.service-card h3 { font-size: clamp(1.45rem, 2vw, 1.95rem); letter-spacing: 0; max-width: 280px; }
.service-card p { font-size: 1rem; }
.service-web { --pastel-a:#eafff7; --pastel-b:#f8fbff; --pastel-line:#82e6c1; --pastel-glow:rgba(45,212,191,.3); --image-shadow:rgba(20,184,166,.18); }
.service-campaign { --pastel-a:#fff4e8; --pastel-b:#fffafe; --pastel-line:#ffc078; --pastel-glow:rgba(251,146,60,.25); --image-shadow:rgba(251,146,60,.16); }
.service-brand { --pastel-a:#f5efff; --pastel-b:#fbfffb; --pastel-line:#c4b5fd; --pastel-glow:rgba(167,139,250,.26); --image-shadow:rgba(139,92,246,.16); }
.service-social { --pastel-a:#ecf7ff; --pastel-b:#fbf7ff; --pastel-line:#93c5fd; --pastel-glow:rgba(96,165,250,.25); --image-shadow:rgba(59,130,246,.16); }
.service-seo { --pastel-a:#ecfff5; --pastel-b:#f7fbff; --pastel-line:#86efac; --pastel-glow:rgba(34,197,94,.22); --image-shadow:rgba(22,163,74,.15); }
.service-strategy { --pastel-a:#fff0f7; --pastel-b:#f4fff8; --pastel-line:#f9a8d4; --pastel-glow:rgba(244,114,182,.22); --image-shadow:rgba(219,39,119,.14); }
.creative-band { border-radius: 0 0 54px 54px; overflow: hidden; }
.creative-band::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 0%, #000, transparent 78%); pointer-events:none; }
.process-2026 { background: #fff; }
.process-2026 .timeline { align-items: stretch; }
.process-2026 .step-card { background: linear-gradient(180deg, #ffffff, #f7fbfb); border-color: rgba(36,56,77,.1); }
.process-2026 .step-card:nth-child(odd) { margin-top: 42px; }
.process-2026 .step-card span { background: linear-gradient(135deg, #19a85b, #14b8a6); }
.portfolio-2026 { background: linear-gradient(180deg, #ffffff, #f7fbff); }
.portfolio-2026 .real-project { border: 0; box-shadow: 0 30px 90px rgba(16,34,53,.11); }
.portfolio-2026 .real-project:nth-child(2) { transform: translateY(42px); }
.why-2026 { background: radial-gradient(circle at 12% 20%, rgba(96,165,250,.11), transparent 28%), radial-gradient(circle at 90% 0%, rgba(249,168,212,.13), transparent 28%), #fff; }
.why-2026 .why-grid { grid-template-columns: 1.2fr .8fr 1fr 1fr; }
.why-2026 .why-card { background: rgba(255,255,255,.72); backdrop-filter: blur(14px); }
.why-2026 .why-card:nth-child(1) { grid-row: span 2; background: linear-gradient(145deg, #eafff7, #fff); }
.why-2026 .why-card:nth-child(2) { background: linear-gradient(145deg, #fff4e8, #fff); }
.why-2026 .why-card:nth-child(3) { background: linear-gradient(145deg, #eef6ff, #fff); }
.why-2026 .why-card:nth-child(4) { background: linear-gradient(145deg, #fff0f7, #fff); }
@media (max-width: 980px) { .services-heading { grid-template-columns: 1fr; gap: 10px; } .service-card:nth-child(2n), .service-card:nth-child(3n), .portfolio-2026 .real-project:nth-child(2), .process-2026 .step-card:nth-child(odd) { transform: none; margin-top: 0; } .why-2026 .why-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) { .service-card { min-height: auto; padding: 22px; } .service-icon { width: 74px; height: 74px; } .service-top { margin-bottom: 24px; } .why-2026 .why-grid { grid-template-columns: 1fr; } }


/* Hero 2026 wow refresh */
.hero { padding: 136px 0 116px; background: linear-gradient(135deg, #f7fffb 0%, #ffffff 42%, #eef8f8 100%); }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:170px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.92)); pointer-events:none; }
.hero-layout { grid-template-columns: .92fr 1.08fr; gap: 72px; }
.hero-copy-2026 { position: relative; z-index: 2; }
.hero-kicker { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.hero-kicker span { padding: 8px 12px; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(36,56,77,.08); color:#0d3a46; font: 800 .72rem Sora, Manrope, sans-serif; text-transform:uppercase; letter-spacing:.08em; box-shadow:0 10px 30px rgba(16,34,53,.06); }
.hero h1 { font-size: clamp(2.8rem, 4.55vw, 4.65rem); line-height: .98; letter-spacing: -0.015em; max-width: 760px; }
.hero h1 span:nth-child(1) { color:#0c2135; }
.hero h1 span:nth-child(2) { color:#17354a; }
.hero h1 span:nth-child(3) { background: linear-gradient(90deg, #0c2135, #19a85b 72%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-subtitle { max-width: 620px; }
.hero-proof { display:grid; gap:8px; margin-top:22px; max-width:580px; }
.hero-proof span { width: fit-content; padding: 9px 13px; border-radius:999px; background:rgba(255,255,255,.56); border:1px solid rgba(36,56,77,.08); color:#24425b; font-weight:800; font-size:.88rem; box-shadow:0 12px 32px rgba(16,34,53,.06); }
.mesh { position:absolute; width:360px; height:360px; border-radius:50%; filter: blur(24px); opacity:.42; animation: meshDrift 16s ease-in-out infinite alternate; }
.mesh-one { right: 11%; top: 12%; background: radial-gradient(circle, rgba(25,168,91,.34), transparent 64%); }
.mesh-two { left: 18%; bottom: 4%; background: radial-gradient(circle, rgba(96,165,250,.22), transparent 66%); animation-delay:-7s; }
.orbit-line { position:absolute; border:1px solid rgba(25,168,91,.16); border-radius:50%; transform: rotate(-16deg); animation: orbitSpin 24s linear infinite; }
.orbit-one { width:720px; height:220px; right:3%; top:25%; }
.orbit-two { width:520px; height:170px; right:12%; top:36%; animation-direction: reverse; opacity:.58; }
.hero-visual-2026 { min-height: 570px; perspective: 1100px; }
.visual-halo { position:absolute; inset: 70px 20px 30px 30px; border-radius:40px; background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(25,168,91,.08)); border:1px solid rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 40px 120px rgba(16,34,53,.08); transform: rotate(-2deg); }
.hero-visual-2026 .browser-card { right: 8%; top: 112px; width: min(470px, 88vw); height: 336px; transform: rotateY(-9deg) rotateX(4deg); }
.hero-visual-2026 .campaign-card { left: 6%; top: 52px; transform: rotate(-2deg); }
.hero-visual-2026 .website-card { right: 2%; top: 40px; transform: rotate(2deg); }
.hero-visual-2026 .analytics-card { left: 8%; bottom: 116px; transform: rotate(1.5deg); }
.hero-visual-2026 .design-card { right: 4%; bottom: 68px; transform: rotate(-1deg); }
.hero-visual-2026 .brand-card { left: 45%; bottom: 18px; }
.visual-chip { position:absolute; z-index:6; padding:10px 13px; border-radius:999px; color:#0d3a46; background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.82); box-shadow:0 18px 42px rgba(16,34,53,.12); font:800 .75rem Sora, Manrope, sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.chip-one { left: 4%; bottom: 38px; animation: floatSide 7s ease-in-out infinite; }
.chip-two { right: 28%; top: 6px; animation: float 7.5s ease-in-out infinite -2s; }
.spark { position:absolute; z-index:7; width:12px; height:12px; border-radius:50%; background:#19a85b; box-shadow:0 0 0 10px rgba(25,168,91,.12); animation: sparkPulse 3s ease-in-out infinite; }
.spark-one { right: 35%; top: 44%; }
.spark-two { left: 16%; bottom: 31%; animation-delay:.8s; background:#60a5fa; box-shadow:0 0 0 10px rgba(96,165,250,.12); }
.spark-three { right: 10%; bottom: 30%; animation-delay:1.4s; background:#f9a8d4; box-shadow:0 0 0 10px rgba(249,168,212,.13); }
h2 { font-size: clamp(1.68rem, 3.36vw, 3.6rem); }
@keyframes meshDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(34px,-24px,0) scale(1.12); } }
@keyframes orbitSpin { to { transform: rotate(344deg); } }
@keyframes sparkPulse { 0%,100% { transform: scale(.75); opacity:.55; } 50% { transform: scale(1.15); opacity:1; } }
@media (max-width: 980px) { .hero-layout { grid-template-columns: 1fr; } .hero-visual-2026 { min-height: 520px; } .orbit-line { display:none; } .hero h1 { font-size: clamp(2.35rem, 10vw, 4rem); } }
@media (max-width: 760px) { .hero { padding: 118px 0 76px; } .hero h1 { font-size: clamp(2.05rem, 8vw, 2.35rem); line-height:1.12; } .hero-kicker span:nth-child(n+3), .hero-proof { display:none; } .hero-visual-2026 { min-height: 520px; margin-top: 18px; } .visual-chip, .spark { display:none; } .hero-visual-2026 .browser-card { right:0; top:82px; width:92%; transform:none; } .hero-visual-2026 .campaign-card { left:0; top:0; transform:none; } .hero-visual-2026 .website-card { right:0; top:24px; width:166px; transform:none; } .hero-visual-2026 .analytics-card { left:0; bottom:120px; transform:none; } .hero-visual-2026 .design-card { right:0; bottom:64px; transform:none; } }

/* Why lab redesign */
.why-lab { position: relative; overflow: hidden; background: radial-gradient(circle at 10% 16%, rgba(96,165,250,.13), transparent 26%), radial-gradient(circle at 90% 12%, rgba(249,168,212,.16), transparent 27%), linear-gradient(180deg, #ffffff, #f7fbfb); }
.why-lab-layout { display:grid; grid-template-columns: .9fr 1.1fr; gap: 62px; align-items:center; }
.why-lab-visual { min-height: 560px; position:relative; border-radius: 36px; background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(234,255,247,.62)); border:1px solid rgba(255,255,255,.82); box-shadow:0 34px 100px rgba(16,34,53,.1); overflow:hidden; }
.why-lab-visual::before { content:""; position:absolute; inset:38px; border-radius:50%; border:1px solid rgba(25,168,91,.18); animation: orbitSpin 20s linear infinite; }
.why-lab-visual::after { content:""; position:absolute; width:280px; height:280px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background: conic-gradient(from 90deg, rgba(25,168,91,.78), rgba(96,165,250,.45), rgba(249,168,212,.48), rgba(25,168,91,.78)); opacity:.82; animation: spinSoft 14s linear infinite; }
.signal-orbit { position:absolute; inset:72px; border-radius:50%; border:1px dashed rgba(36,56,77,.18); z-index:2; animation: orbitSpin 32s linear infinite reverse; }
.signal-orbit span { position:absolute; width:18px; height:18px; border-radius:50%; background:#19a85b; box-shadow:0 0 0 12px rgba(25,168,91,.12); }
.signal-orbit span:nth-child(1){ left:10%; top:18%; }.signal-orbit span:nth-child(2){ right:8%; top:42%; background:#60a5fa; box-shadow:0 0 0 12px rgba(96,165,250,.12); }.signal-orbit span:nth-child(3){ left:44%; bottom:4%; background:#f9a8d4; box-shadow:0 0 0 12px rgba(249,168,212,.14); }
.metric-tile { position:absolute; z-index:3; width:190px; padding:18px; border-radius:18px; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.9); box-shadow:0 24px 60px rgba(16,34,53,.13); backdrop-filter: blur(14px); }
.metric-tile strong { display:block; font:800 2.45rem Sora, Manrope, sans-serif; color:#102235; line-height:1; }.metric-tile span { color:#657485; font-weight:800; font-size:.88rem; }
.metric-main { left:34px; top:52px; }.metric-small { right:28px; top:188px; width:154px; }.metric-accent { left:72px; bottom:52px; width:228px; }
.why-lab-content .section-heading { max-width: 720px; margin-bottom: 30px; }.why-lab-content h2 span { display:block; color:#19a85b; font-size:.58em; margin-bottom:8px; }
.why-lab .why-flow { grid-template-columns: 1fr 1fr; gap:16px; }
.why-flow .why-card { position:relative; min-height:190px; padding:24px; border:1px solid rgba(36,56,77,.08); background:rgba(255,255,255,.72); box-shadow:0 22px 70px rgba(16,34,53,.08); backdrop-filter:blur(14px); overflow:hidden; }
.why-flow .why-card::after { content:""; position:absolute; right:-38px; top:-38px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(25,168,91,.18), transparent 68%); }
.why-flow .why-card:nth-child(2)::after { background:radial-gradient(circle, rgba(96,165,250,.2), transparent 68%); }.why-flow .why-card:nth-child(3)::after { background:radial-gradient(circle, rgba(249,168,212,.2), transparent 68%); }.why-flow .why-card:nth-child(4)::after { background:radial-gradient(circle, rgba(255,196,121,.22), transparent 68%); }
.why-index { display:inline-flex; margin-bottom:18px; padding:7px 10px; border-radius:999px; color:#0d3a46; background:#eafff7; font:800 .72rem Sora, Manrope, sans-serif; letter-spacing:.08em; }
@media (max-width: 980px) { .why-lab-layout { grid-template-columns:1fr; } .why-lab-visual { min-height:420px; } }
@media (max-width: 760px) { .why-lab-visual { min-height:340px; } .why-lab .why-flow { grid-template-columns:1fr; } .metric-tile { transform:scale(.82); transform-origin:center; } .metric-main{left:10px;top:28px}.metric-small{right:0;top:138px}.metric-accent{left:18px;bottom:22px} }

.rotator span { color:#13a85b !important; text-shadow: 0 10px 26px rgba(25,168,91,.18); }





/* Team section */
.team-section { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(25,168,91,.12), transparent 28%), radial-gradient(circle at 84% 8%, rgba(96,165,250,.13), transparent 30%), linear-gradient(180deg, #ffffff, #f7fbfb); }
.team-section::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(36,56,77,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(36,56,77,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent); pointer-events:none; }
.team-layout { position:relative; z-index:1; }
.team-heading { display:grid; grid-template-columns: .95fr 1fr; gap:48px; align-items:end; max-width:none; }
.team-heading h2 { max-width: 720px; margin-bottom:0; }
.team-heading p:last-child { margin-left:auto; margin-bottom:10px; }
.team-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; align-items:stretch; }
.team-card { position:relative; min-height: 510px; padding:24px; border-radius:32px; border:1px solid rgba(36,56,77,.08); background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(248,250,249,.62)); box-shadow:0 28px 86px rgba(16,34,53,.1); overflow:hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; isolation:isolate; }
.team-card::before { content:""; position:absolute; inset:14px; border-radius:26px; background: radial-gradient(circle at 50% 26%, var(--team-glow, rgba(25,168,91,.2)), transparent 43%); opacity:.95; z-index:-1; }
.team-card::after { content:""; position:absolute; width:190px; height:190px; right:-76px; top:-70px; border-radius:50%; background: conic-gradient(from 160deg, var(--team-accent, #19a85b), rgba(255,255,255,.55), transparent, var(--team-accent, #19a85b)); opacity:.18; filter: blur(.2px); }
.team-card:hover { transform: translateY(-10px) rotate(.35deg); box-shadow:0 36px 110px rgba(16,34,53,.16); border-color: color-mix(in srgb, var(--team-accent, #19a85b) 42%, white); }
.team-card-performance { --team-accent:#f6b51e; --team-glow:rgba(246,181,30,.18); margin-top:34px; }
.team-card-social { --team-accent:#5b8fb9; --team-glow:rgba(91,143,185,.18); }
.team-photo { height:342px; display:grid; place-items:end center; border-radius:26px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)); overflow:hidden; }
.team-photo img { width:min(100%, 330px); height:auto; display:block; transform: translateY(10px) scale(1.02); filter: drop-shadow(0 26px 34px rgba(16,34,53,.12)); transition: transform .35s ease; }
.team-card:hover .team-photo img { transform: translateY(2px) scale(1.055); }
.team-info { position:relative; z-index:1; padding:24px 4px 4px; }
.team-info span { display:inline-flex; margin-bottom:12px; padding:8px 12px; border-radius:999px; color:#0d3a46; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.8); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.team-info h3 { max-width:260px; margin:0; font-size:clamp(1.35rem, 2vw, 2rem); color:var(--navy); }
@media (max-width: 980px) { .team-heading { grid-template-columns:1fr; gap:12px; } .team-heading p:last-child { margin-left:0; } .team-grid { grid-template-columns:1fr 1fr; } .team-card-performance { margin-top:0; } }
@media (max-width: 760px) { .team-grid { grid-template-columns:1fr; } .team-card { min-height:auto; padding:18px; border-radius:26px; } .team-photo { height:280px; } .team-photo img { width:min(100%, 285px); } }

/* Compact team override */
.team-section-compact { padding: 72px 0 86px; background: linear-gradient(180deg, #f7fbfb, #ffffff); }
.team-section-compact .team-heading { display:block; margin-bottom:28px; }
.team-section-compact .team-heading h2 { font-size: clamp(1.55rem, 2.6vw, 2.45rem); margin:0; }
.team-section-compact .team-grid { gap:18px; }
.team-section-compact .team-card { min-height: 360px; padding:18px; border-radius:24px; box-shadow:0 18px 60px rgba(16,34,53,.08); }
.team-section-compact .team-card-performance { margin-top:18px; }
.team-section-compact .team-photo { height:220px; border-radius:20px; }
.team-section-compact .team-photo img { width:min(100%, 220px); }
.team-section-compact .team-info { padding:18px 2px 2px; }
.team-section-compact .team-info span { font-size:.66rem; padding:7px 10px; margin-bottom:10px; }
.team-section-compact .team-info h3 { font-size: clamp(1.18rem, 1.7vw, 1.55rem); line-height:1.08; }
@media (max-width: 980px) { .team-section-compact .team-card-performance { margin-top:0; } }
@media (max-width: 760px) { .team-section-compact { padding:58px 0 68px; } .team-section-compact .team-photo { height:210px; } .team-section-compact .team-photo img { width:min(100%, 215px); } }

/* Team in references flow */
.portfolio + .team-section-compact { background: radial-gradient(circle at 12% 16%, rgba(96,165,250,.12), transparent 30%), radial-gradient(circle at 86% 0%, rgba(249,168,212,.13), transparent 30%), linear-gradient(180deg, #f7fbff, #ffffff); }
.portfolio + .team-section-compact .team-heading h2 { color: var(--navy); }
.portfolio + .team-section-compact .team-grid { margin-top: 8px; }
.portfolio + .team-section-compact + .contact { margin-top: 0; }

/* Reference service tags and logo */
.project-scroll-preview { position: relative; height: 360px; min-height: 360px; background: #eaf2ef; }
.project-scroll-preview img:first-child { height: auto; min-height: 100%; object-fit: cover; object-position: top center; animation: projectAutoScroll 9s ease-in-out infinite alternate; will-change: transform; }
.real-project:hover .project-scroll-preview img:first-child { animation-play-state: paused; transform: translateY(calc(-100% + 360px)) scale(1.01); }
.project-logo-badge { position:absolute; right:22px; top:22px; width:86px; height:86px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.85); box-shadow:0 18px 46px rgba(16,34,53,.18); backdrop-filter: blur(12px); z-index:2; }
.project-logo-badge img { width:68px; height:68px; object-fit:contain; display:block; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.project-info .project-tags span { display:inline-flex; margin:0; padding:8px 11px; border-radius:999px; border:1px solid var(--tag-line); background:var(--tag-bg); color:var(--tag-color); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.tag-web { --tag-bg:#eafff7; --tag-line:#82e6c1; --tag-color:#00624d; }
.tag-campaign { --tag-bg:#fff4e8; --tag-line:#ffc078; --tag-color:#8b4a00; }
.tag-logo { --tag-bg:#f5f0ff; --tag-line:#c8b6ff; --tag-color:#4c2a84; }
@keyframes projectAutoScroll { 0%, 18% { transform: translateY(0); } 82%, 100% { transform: translateY(calc(-100% + 360px)); } }
@media (prefers-reduced-motion: reduce) { .project-scroll-preview img:first-child { animation:none; } .real-project:hover .project-scroll-preview img:first-child { transform:none; } }
@media (max-width: 760px) { .project-scroll-preview { height:300px; min-height:300px; } .real-project:hover .project-scroll-preview img:first-child { transform: translateY(calc(-100% + 300px)) scale(1.01); } .project-logo-badge { width:68px; height:68px; right:14px; top:14px; } .project-logo-badge img { width:52px; height:52px; } @keyframes projectAutoScroll { 0%, 18% { transform: translateY(0); } 82%, 100% { transform: translateY(calc(-100% + 300px)); } } }

/* Project logo in info head */
.project-info-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.project-info-head .project-tags { margin-bottom:0; }
.project-info-head .project-logo-badge { position:static; flex:0 0 auto; width:72px; height:72px; box-shadow:0 14px 34px rgba(16,34,53,.12); background:rgba(255,255,255,.94); }
.project-info-head .project-logo-badge img { width:56px; height:56px; }
.project-info-head .project-logo-beskyd img { width:60px; height:60px; }
.project-preview .project-logo-badge { display:none; }
@media (max-width: 760px) { .project-info-head { align-items:center; } .project-info-head .project-logo-badge { width:58px; height:58px; } .project-info-head .project-logo-badge img { width:44px; height:44px; } .project-info-head .project-logo-beskyd img { width:48px; height:48px; } }

/* Static transparent header */
.site-header { position:absolute; inset: 18px 0 auto; pointer-events:none; }
.nav-shell { width:min(1160px, calc(100% - 32px)); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.site-header.is-scrolled .nav-shell { background:transparent; box-shadow:none; }
.brand { min-width: 210px; }
.brand-mark { width:216px; height:84px; justify-items:start; }
.brand-mark img { width:202px; max-height:82px; transform:scale(1.12); }
.site-menu { background: rgba(255,255,255,.26); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px; backdrop-filter: blur(14px); box-shadow:0 16px 42px rgba(16,34,53,.06); }
@media (max-width: 760px) { .site-header { inset:14px 0 auto; } .brand { min-width: 168px; } .brand-mark { width:168px; height:64px; } .brand-mark img { width:161px; max-height:62px; } .nav-shell { width:calc(100% - 28px); max-width:360px; margin-left:14px; margin-right:auto; align-items:center; } .site-menu { position:absolute; top:calc(100% + 10px); left:0; right:0; border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 18px 50px rgba(16,34,53,.14); padding:12px; } }

/* Header fine tune */
.brand-mark { width: 150px; height: 98px; overflow: visible; }
.brand-mark img { width: 232px; max-height: 96px; transform: translateX(-36px) scale(1.12); transform-origin: left center; }
.site-menu { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
@media (max-width: 760px) { .brand-mark { width: 118px; height: 76px; } .brand-mark img { width:188px; max-height:74px; transform:translateX(-42px) scale(1.1); } }


/* Hero kicker spacer */
.hero-kicker-spacer { min-height: 31px; margin-bottom: 18px; }
.hero-kicker-spacer span { display:none; }

/* Project logo no circle */
.project-info-head .project-logo-badge { width:104px; height:74px; border-radius:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; padding:0; }
.project-info-head .project-logo-badge img { width:104px; height:74px; object-fit:contain; }
.project-info-head .project-logo-beskyd img { width:122px; height:74px; object-fit:contain; }
@media (max-width: 760px) { .project-info-head .project-logo-badge { width:82px; height:58px; } .project-info-head .project-logo-badge img { width:82px; height:58px; } .project-info-head .project-logo-beskyd img { width:92px; height:58px; } }

/* Bigger LVV logo */
.project-info-head .project-logo-lvv { width:154px; height:112px; margin-top:-18px; margin-right:-10px; }
.project-info-head .project-logo-lvv img { width:154px; height:112px; object-fit:contain; }
@media (max-width: 760px) { .project-info-head .project-logo-lvv { width:112px; height:82px; margin-top:-10px; margin-right:-6px; } .project-info-head .project-logo-lvv img { width:112px; height:82px; } }

/* Portfolio: three compact real projects */
.real-portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.portfolio-2026 .real-project:nth-child(2) {
  transform: translateY(24px);
}

.portfolio-2026 .real-project:nth-child(3) {
  transform: translateY(0);
}

.real-preview {
  min-height: 250px;
}

.real-preview img {
  height: 300px;
}

.project-info {
  padding: 22px;
}

.project-info h3 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.project-info p {
  font-size: 0.92rem;
  line-height: 1.62;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-logo-heating img {
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .real-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .real-portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-2026 .real-project:nth-child(2),
  .portfolio-2026 .real-project:nth-child(3) {
    transform: none;
  }
}

/* Modern contact redesign */
.contact-modern {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(25,168,91,.28), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(96,165,250,.20), transparent 30%),
    linear-gradient(135deg, #0b1f33 0%, #122d43 48%, #0c1828 100%);
}

.contact-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 35%, #000, transparent 78%);
  pointer-events: none;
}

.contact-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: .72;
  pointer-events: none;
}

.contact-glow-one {
  width: 340px;
  height: 340px;
  right: 8%;
  top: 18%;
  background: rgba(25,168,91,.24);
}

.contact-glow-two {
  width: 260px;
  height: 260px;
  left: 6%;
  bottom: 8%;
  background: rgba(96,165,250,.18);
}

.contact-modern-layout {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: stretch;
}

.contact-panel {
  position: relative;
  padding: clamp(2rem, 4vw, 3.2rem);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow: 0 36px 100px rgba(0,0,0,.20);
  backdrop-filter: blur(16px);
}

.contact-panel::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -46px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(141,240,181,.35);
}

.contact-panel h2 {
  max-width: 11ch;
  font-size: clamp(2.35rem, 5vw, 4.7rem);
  line-height: .98;
  letter-spacing: -0.045em;
}

.contact-panel p {
  max-width: 58ch;
  color: rgba(255,255,255,.76);
}

.contact-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 2rem 0;
}

.contact-proof-grid span {
  min-height: 92px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .6rem;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
  line-height: 1.25;
}

.contact-proof-grid strong {
  color: #8df0b5;
  font-size: .78rem;
  letter-spacing: .1em;
}

.contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 1.6rem;
}

.contact-methods strong {
  grid-column: 1 / -1;
  color: #fff;
}

.contact-methods a {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border-radius: 18px;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.contact-methods a span {
  color: #8df0b5;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.contact-form-modern {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 34px;
  background: rgba(255,255,255,.13);
  box-shadow: 0 36px 110px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}

.form-heading {
  grid-column: 1 / -1;
  padding: 0 0 .35rem;
}

.form-heading span {
  display: inline-flex;
  margin-bottom: .65rem;
  color: #8df0b5;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.form-heading h3 {
  max-width: 18ch;
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.contact-form-modern input,
.contact-form-modern select,
.contact-form-modern textarea {
  background: rgba(255,255,255,.92);
  color: var(--navy);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.contact-form-modern label {
  color: rgba(255,255,255,.86);
}

.contact-form-modern textarea::placeholder {
  color: rgba(36,56,77,.45);
}

@media (max-width: 980px) {
  .contact-modern-layout {
    grid-template-columns: 1fr;
  }

  .contact-panel h2 {
    max-width: 14ch;
  }
}

@media (max-width: 760px) {
  .contact-panel,
  .contact-form-modern {
    border-radius: 26px;
  }

  .contact-proof-grid,
  .contact-methods {
    grid-template-columns: 1fr;
  }

  .contact-panel h2 {
    font-size: clamp(2rem, 11vw, 3rem);
  }
}
/* Contact section refined back to focused content */
.contact-modern-layout {
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.contact-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.contact-panel::after {
  display: none;
}

.contact-panel h2 {
  max-width: 12.5ch;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.contact-panel p {
  max-width: 620px;
  color: rgba(255,255,255,.75);
}

.contact-proof-grid {
  display: none;
}

.contact-methods {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 2.2rem;
  padding: 12px;
  border-radius: 28px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}

.contact-methods::before {
  content: "";
  position: absolute;
  inset: 10px auto auto 10px;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: radial-gradient(circle at 36% 32%, rgba(141,240,181,.65), rgba(25,168,91,.16) 62%, transparent 70%);
  opacity: .75;
  pointer-events: none;
}

.contact-methods strong,
.contact-methods a {
  position: relative;
  z-index: 1;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.085);
  border: 1px solid rgba(255,255,255,.13);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.contact-methods strong {
  grid-column: 1 / -1;
  min-height: 82px;
  padding-left: 6rem;
  font-size: 1.08rem;
}

.contact-methods a:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.13);
  border-color: rgba(141,240,181,.35);
}

.contact-methods a span {
  color: #8df0b5;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

@media (max-width: 980px) {
  .contact-panel h2 {
    max-width: 14ch;
  }
}

@media (max-width: 760px) {
  .contact-methods {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .contact-methods strong {
    padding-left: 5.2rem;
  }

  .contact-panel h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}
/* Reference previews: stronger scroll movement */
.project-scroll-preview,
.real-preview.project-scroll-preview {
  height: 255px;
  min-height: 255px;
}

.real-preview img,
.project-scroll-preview img:first-child {
  height: auto;
  min-height: 100%;
}

.real-project:hover .project-scroll-preview img:first-child {
  transform: translateY(calc(-100% + 255px)) scale(1.01);
}

@keyframes projectAutoScroll {
  0%, 14% { transform: translateY(0); }
  86%, 100% { transform: translateY(calc(-100% + 255px)); }
}

.project-info-head .project-logo-heating {
  width: 118px;
  height: 90px;
  margin-top: -10px;
  margin-right: -4px;
}

.project-info-head .project-logo-heating img,
.project-logo-heating img {
  width: 116px;
  height: 88px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 760px) {
  .project-scroll-preview,
  .real-preview.project-scroll-preview {
    height: 240px;
    min-height: 240px;
  }

  .real-project:hover .project-scroll-preview img:first-child {
    transform: translateY(calc(-100% + 240px)) scale(1.01);
  }

  @keyframes projectAutoScroll {
    0%, 14% { transform: translateY(0); }
    86%, 100% { transform: translateY(calc(-100% + 240px)); }
  }

  .project-info-head .project-logo-heating {
    width: 94px;
    height: 72px;
    margin-top: -6px;
  }

  .project-info-head .project-logo-heating img,
  .project-logo-heating img {
    width: 92px;
    height: 70px;
  }
}
/* References without service tags */
.project-info-head {
  justify-content: flex-end;
  min-height: 92px;
  margin-bottom: -6px;
}

.project-info-head .project-logo-badge {
  margin-left: auto;
}

@media (max-width: 760px) {
  .project-info-head {
    min-height: 72px;
    margin-bottom: 0;
  }
}
/* Reference title and logo aligned */
.project-info-head {
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  margin-bottom: 18px;
}

.project-info-head h3 {
  margin: 0;
  padding: 0;
  max-width: 58%;
}

.project-info > .project-info-head + p {
  margin-top: 0;
}

.project-info-head .project-logo-lvv {
  margin-top: 0;
}

.project-info-head .project-logo-heating {
  margin-top: 0;
}

@media (max-width: 760px) {
  .project-info-head {
    min-height: 0;
    margin-bottom: 16px;
  }

  .project-info-head h3 {
    max-width: 62%;
  }
}
/* Tighter hero to services transition */
.hero {
  padding-bottom: 74px;
}

.services {
  padding-top: 82px;
}

.services-heading h2 {
  max-width: 680px;
}

.services-heading p {
  max-width: 620px;
}

@media (max-width: 760px) {
  .hero {
    padding-bottom: 58px;
  }

  .services {
    padding-top: 64px;
  }
}

.contact-form button[disabled] { opacity: .68; cursor: wait; transform: none; }
/* Hero visual pastel refresh */
.hero-visual-2026 .visual-halo {
  background:
    radial-gradient(circle at 22% 34%, rgba(96,165,250,.22), transparent 30%),
    radial-gradient(circle at 82% 24%, rgba(249,168,212,.24), transparent 28%),
    radial-gradient(circle at 68% 78%, rgba(251,191,36,.18), transparent 32%),
    radial-gradient(circle at 35% 78%, rgba(25,168,91,.20), transparent 34%);
}

.hero-visual-2026 .browser-card,
.hero-visual-2026 .campaign-card,
.hero-visual-2026 .website-card,
.hero-visual-2026 .analytics-card,
.hero-visual-2026 .design-card,
.hero-visual-2026 .brand-card {
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,252,255,.72));
}

.hero-visual-2026 .browser-card {
  box-shadow: 0 30px 90px rgba(96,165,250,.12), 0 24px 70px rgba(16,34,53,.10);
}

.hero-visual-2026 .campaign-card {
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,246,255,.78));
}

.hero-visual-2026 .website-card {
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(245,240,255,.78));
}

.hero-visual-2026 .analytics-card {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,247,237,.78));
}

.hero-visual-2026 .design-card {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(240,253,250,.78));
}

.hero-visual-2026 .brand-card {
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(253,244,255,.78));
}

.visual-chip {
  color: #0d3a46;
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 18px 42px rgba(16,34,53,.10);
}

.chip-one {
  background: linear-gradient(135deg, #e0f2fe, #ffffff);
  color: #075985;
}

.chip-two {
  background: linear-gradient(135deg, #fce7f3, #ffffff);
  color: #9d174d;
}

.chip-three {
  position: absolute;
  left: 33%;
  top: 22px;
  z-index: 6;
  background: linear-gradient(135deg, #ede9fe, #ccfbf1);
  color: #4c1d95;
  animation: floatSide 7.2s ease-in-out infinite -3s;
}

.chart-bar:nth-child(1) { background: linear-gradient(to top, #60a5fa, #bae6fd); }
.chart-bar:nth-child(2) { background: linear-gradient(to top, #19a85b, #86efac); }
.chart-bar:nth-child(3) { background: linear-gradient(to top, #a78bfa, #ddd6fe); }
.chart-bar:nth-child(4) { background: linear-gradient(to top, #f472b6, #fbcfe8); }

.design-card span:first-child { background: linear-gradient(135deg, #19a85b, #86efac); }
.design-card span:nth-child(2) { background: linear-gradient(135deg, #dbeafe, #bae6fd); }
.design-card span:nth-child(3) { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.design-card span:nth-child(4) { background: linear-gradient(135deg, #24384d, #a78bfa); }

.brand-card span:first-child { background: #19a85b; }
.brand-card span:nth-child(2) { background: #60a5fa; }
.brand-card span:nth-child(3) { background: #f9a8d4; }

.web-card::after {
  background: conic-gradient(from 20deg, #19a85b, #60a5fa, #f9a8d4, #fbbf24, #19a85b);
  opacity: .22;
}

.mock-hero div:first-child {
  background: linear-gradient(135deg, #102235 0%, #164b63 52%, #60a5fa 100%);
}

.mock-hero div:nth-child(2) {
  background: linear-gradient(135deg, #e0f2fe, #f8fafc);
}

.mock-hero div:nth-child(3) {
  background: linear-gradient(135deg, #fce7f3, #ecfdf5);
}

@media (max-width: 760px) {
  .chip-three { display: none; }
}
/* Mobile contact overlap fix */
@media (max-width: 760px) {
  .contact-modern {
    overflow: hidden;
  }

  .contact-modern .container,
  .contact-modern-layout,
  .contact-panel,
  .contact-form-modern {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .contact-modern-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px;
  }

  .contact-panel {
    order: 1;
  }

  .contact-form-modern {
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 20px;
    border-radius: 24px;
    box-sizing: border-box;
  }

  .contact-form-modern .field,
  .contact-form-modern .field.full,
  .contact-form-modern .form-heading,
  .contact-form-modern .btn,
  .contact-form-modern .form-success {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .contact-form-modern input,
  .contact-form-modern select,
  .contact-form-modern textarea {
    max-width: 100%;
    min-width: 0;
  }

  .contact-panel h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .form-heading h3 {
    max-width: 100%;
    font-size: clamp(1.3rem, 7vw, 1.75rem);
  }
}
/* Warmer header and social icons */
.site-menu a:not(.nav-cta) {
  position: relative;
}

.site-menu a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97316, #be123c);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .2s ease, transform .2s ease;
}

.site-menu a:not(.nav-cta):hover {
  color: #9f1239;
  background: rgba(249,115,22,.08);
}

.site-menu a:not(.nav-cta):hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-cta {
  background: linear-gradient(135deg, #24384d 0%, #9f1239 58%, #f97316 130%) !important;
  box-shadow: 0 16px 34px rgba(190,18,60,.22), 0 10px 30px rgba(249,115,22,.14) !important;
}

.nav-cta:hover {
  background: linear-gradient(135deg, #102235 0%, #be123c 54%, #fb923c 128%) !important;
}

.visual-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.social-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font: 900 .88rem/1 Sora, Manrope, Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(16,34,53,.16);
  text-transform: none;
}

.social-facebook {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.social-instagram {
  position: relative;
  background: radial-gradient(circle at 28% 82%, #fbbf24 0 20%, transparent 21%), linear-gradient(135deg, #7c3aed, #ec4899 55%, #fb923c);
}

.social-instagram::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.social-instagram::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

.social-tiktok {
  background: linear-gradient(135deg, #111827, #be123c 62%, #22d3ee 140%);
  font-size: .95rem;
}

@media (max-width: 760px) {
  .site-menu a:not(.nav-cta)::after {
    left: 38%;
    right: 38%;
  }
}
/* Header CTA restored and social chip icons removed */
.nav-cta,
.nav-cta:hover {
  background: var(--navy) !important;
  color: white !important;
  box-shadow: 0 12px 30px rgba(36,56,77,.24) !important;
}

.social-icon {
  display: none !important;
}
/* Contact company details alignment */
.contact-methods {
  grid-template-columns: 1fr;
}

.contact-methods::before {
  display: none;
}

.contact-methods .company-details,
.contact-methods a {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  text-align: left;
  gap: .28rem;
  padding: 1.15rem 1.25rem;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.085);
  border: 1px solid rgba(255,255,255,.13);
}

.contact-methods .company-details {
  min-height: 0;
}

.contact-methods .company-details strong {
  display: block;
  grid-column: auto;
  min-height: 0;
  padding: 0 0 .35rem;
  font-size: 1.08rem;
  color: #fff;
}

.contact-methods .company-details span {
  display: block;
  color: rgba(255,255,255,.76);
  font-weight: 700;
  line-height: 1.45;
}

.contact-methods a {
  min-height: 78px;
}

.contact-methods a span {
  margin-bottom: .1rem;
}
/* Contact billing details refined */
.contact-methods .company-details {
  background: transparent;
  border: 0;
  padding: .2rem 0 .55rem;
  border-radius: 0;
}

.contact-methods .company-details .contact-label {
  display: block;
  margin-bottom: .65rem;
  color: #8df0b5;
  font: 900 .72rem Sora, Manrope, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.contact-methods .company-details strong {
  position: relative;
  display: inline-block;
  width: fit-content;
  margin-bottom: .35rem;
  padding: 0 0 .25rem;
  color: #fff;
  font-size: 1.18rem;
}

.contact-methods .company-details strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8df0b5, rgba(141,240,181,0));
}

.contact-methods .company-details span:not(.contact-label) {
  color: rgba(255,255,255,.76);
}
/* Contact billing box restored */
.contact-methods .company-details {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  text-align: left;
  gap: .28rem;
  padding: 1.15rem 1.25rem;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.085);
  border: 1px solid rgba(255,255,255,.13);
}

.contact-methods .company-details strong {
  display: block;
  width: auto;
  margin-bottom: .35rem;
  padding: 0;
  color: #fff;
  font-size: 1.18rem;
}

.contact-methods .company-details strong::after {
  display: none;
}
/* Contact billing final fix */
.contact-methods {
  grid-template-columns: 1fr;
  gap: 12px;
}

.contact-methods .contact-billing {
  display: grid;
  gap: 8px;
}

.contact-methods .contact-label {
  display: block;
  margin: 0 0 0 2px;
  color: #8df0b5;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.contact-methods .company-details {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  text-align: left;
  gap: .3rem;
  min-height: 0;
  padding: 1.15rem 1.25rem;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.085);
  border: 1px solid rgba(255,255,255,.13);
}

.contact-methods .company-details strong {
  display: block;
  width: auto;
  min-height: 0;
  margin: 0 0 .35rem;
  padding: 0;
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.25;
}

.contact-methods .company-details strong::after,
.contact-methods .company-details::after,
.contact-methods .company-details::before {
  display: none !important;
  content: none !important;
}

.contact-methods .company-details span {
  display: block;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-weight: 700;
  line-height: 1.45;
}

.contact-methods a {
  justify-items: start;
  text-align: left;
}
/* Contact billing hard reset */
.contact-methods {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.contact-methods .contact-billing {
  display: grid !important;
  grid-column: 1 / -1 !important;
  gap: 8px !important;
  width: 100% !important;
}

.contact-methods .contact-label {
  display: block !important;
  margin: 0 0 2px 2px !important;
  padding: 0 !important;
  color: #8df0b5 !important;
  background: transparent !important;
  border: 0 !important;
  font: 900 .72rem Sora, Manrope, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

.contact-methods .company-details {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 1.15rem 1.25rem !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.contact-methods .company-details strong {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 .45rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 1.18rem !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.contact-methods .company-details strong::before,
.contact-methods .company-details strong::after {
  display: none !important;
  content: none !important;
}

.contact-methods .company-details span:not(.contact-label) {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.76) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.contact-methods > a {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  justify-items: start !important;
  text-align: left !important;
}
/* Contact three stacked cards */
.contact-methods {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.contact-methods::before,
.contact-methods::after {
  display: none !important;
  content: none !important;
}

.contact-methods .contact-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 92px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: .35rem !important;
  padding: 1.15rem 1.25rem !important;
  border-radius: 20px !important;
  color: #fff !important;
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: none !important;
  text-align: left !important;
  text-decoration: none !important;
}

.contact-methods .contact-card-billing {
  min-height: 0 !important;
}

.contact-methods .contact-card span {
  display: block !important;
  margin: 0 0 .1rem !important;
  padding: 0 !important;
  color: #8df0b5 !important;
  background: transparent !important;
  border: 0 !important;
  font: 900 .72rem Sora, Manrope, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

.contact-methods .contact-card strong {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 1.08rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.contact-methods .contact-card strong::before,
.contact-methods .contact-card strong::after {
  display: none !important;
  content: none !important;
}

.contact-methods .contact-card p {
  margin: .15rem 0 0 !important;
  color: rgba(255,255,255,.76) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.contact-methods .contact-card:hover {
  transform: translateY(-3px) !important;
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(141,240,181,.35) !important;
}
/* Contact original restored */
.contact-methods {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 2.2rem !important;
  padding: 12px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(14px) !important;
}

.contact-methods::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 10px auto auto 10px !important;
  width: 74px !important;
  height: 74px !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 36% 32%, rgba(141,240,181,.65), rgba(25,168,91,.16) 62%, transparent 70%) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

.contact-methods > strong,
.contact-methods > a {
  position: relative !important;
  z-index: 1 !important;
  min-height: 92px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: .25rem !important;
  padding: 1.15rem 1.2rem !important;
  border-radius: 20px !important;
  color: #fff !important;
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: none !important;
  text-align: left !important;
  text-decoration: none !important;
}

.contact-methods > strong {
  grid-column: 1 / -1 !important;
  min-height: 82px !important;
  padding-left: 6rem !important;
  font-size: 1.08rem !important;
}

.contact-methods > strong::before,
.contact-methods > strong::after {
  display: none !important;
  content: none !important;
}

.contact-methods > a:hover {
  transform: translateY(-3px) !important;
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(141,240,181,.35) !important;
}

.contact-methods > a span {
  display: block !important;
  margin: 0 !important;
  color: #8df0b5 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

.contact-methods .contact-billing,
.contact-methods .contact-card,
.contact-methods .company-details,
.contact-methods .contact-label {
  all: unset !important;
}

@media (max-width: 760px) {
  .contact-methods {
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  .contact-methods > strong {
    padding-left: 5.2rem !important;
  }
}
/* Hero headline slightly smaller */
.hero h1 {
  font-size: clamp(2.38rem, 3.87vw, 3.95rem);
}

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(2rem, 8.5vw, 3.4rem);
  }
}

@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(1.74rem, 6.8vw, 2rem);
  }
}
/* Mobile menu readability fix */
@media (max-width: 760px) {
  .site-header {
    z-index: 999 !important;
  }

  .site-menu {
    background: #ffffff !important;
    border: 1px solid rgba(36,56,77,.12) !important;
    box-shadow: 0 22px 60px rgba(16,34,53,.22) !important;
    backdrop-filter: none !important;
    z-index: 1000 !important;
  }

  .site-menu a:not(.nav-cta) {
    color: var(--teal) !important;
    background: transparent !important;
  }

  .site-menu a:not(.nav-cta):hover,
  .site-menu a:not(.nav-cta):focus-visible {
    color: var(--green-dark) !important;
    background: rgba(25,168,91,.08) !important;
  }

  .menu-toggle {
    box-shadow: 0 14px 34px rgba(16,34,53,.2) !important;
  }
}



/* Form spam trap */
.spam-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }