:root {
  --blue:#1f497d;
  --blue2:#2087e8;
  --dark:#02060b;
  --muted:#a6b2c1;
  --max:1460px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--dark);
  color:#fff;
  font-family:Inter, Arial, sans-serif;
  line-height:1.5
}

img {
  max-width:100%;
  display:block
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

.container {
  width:min(calc(100% - 64px), var(--max));
  margin:auto
}

.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .95) 55%, rgba(8, 22, 38, .78) 100%);
  border-bottom:1px solid rgba(32, 135, 232, .28);
  box-shadow:0 18px 50px rgba(0, 0, 0, .22);
  backdrop-filter:blur(16px)
}

.nav {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}

.logo-link img {
    height: 75px
}

.nav-links {
  display:flex;
  align-items:center;
  gap:28px;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.07em;
  color:#102033;
  background:rgba(255, 255, 255, .25);
  padding:13px 18px;
  border:1px solid rgba(31, 73, 125, .13)
}

.nav-links a:hover {
  color:var(--blue)
}

.lang-switch {
  display:flex;
  gap:10px;
  font-weight:700
}

.lang-switch .active {
  color:var(--blue)
}

.hero {
  position:relative;
  min-height:760px;
  height:86vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#000
}

.hero-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.86;
  filter:saturate(.92) contrast(1.05);
  animation:zoom 18s ease-in-out infinite alternate
}

@keyframes zoom {
  to {
  transform:scale(1.05)
}
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 24% 48%, rgba(32, 135, 232, .18), transparent 30%), linear-gradient(90deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .18) 42%, rgba(0, 0, 0, .82) 74%, rgba(0, 0, 0, .92) 100%), linear-gradient(to top, #02060b 0%, rgba(2, 6, 11, .62) 28%, transparent 70%)
}

.hero-wire {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(32, 135, 232, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 135, 232, .1) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.3
}

.hero-content {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr minmax(420px, 640px);
  align-items:center;
  padding-top:110px
}

.hero-copy {
  grid-column:2;
  padding:44px 46px;
  background:linear-gradient(135deg, rgba(4, 13, 23, .78), rgba(4, 13, 23, .42));
  border-left:2px solid rgba(32, 135, 232, .76);
  box-shadow:0 34px 90px rgba(0, 0, 0, .42);
  backdrop-filter:blur(10px)
}

h1, h2, h3, p {
  margin-top:0
}

h1 {
  font-size:clamp(42px, 4.35vw, 72px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:uppercase
}

h1 span {
  color:var(--blue2)
}

h2 {
  font-size:clamp(28px, 3.2vw, 48px);
  line-height:1.12;
  text-transform:uppercase
}

.hero p {
  font-size:clamp(18px, 1.35vw, 22px);
  color:rgba(255, 255, 255, .84)
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(32, 135, 232, .75);
  background:rgba(31, 73, 125, .16);
  padding:13px 20px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  color:#fff;
  transition:.25s
}

.btn:hover {
  background:rgba(31, 73, 125, .36);
  transform:translateY(-2px)
}

.section {
  padding:72px 0
}

.kicker {
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--blue2);
  font-size:13px;
  margin-bottom:10px
}

.trust-strip {
  background:linear-gradient(90deg, #06101b, #0d2234)
}

.trust-grid, .cards, .application-cards {
  display:grid;
  grid-template-columns:repeat(4, 1fr)
}

.trust-grid article {
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  align-items:center;
  padding:22px 28px;
  border-right:1px solid rgba(255, 255, 255, .15)
}

.trust-grid svg {
  width:48px;
  color:var(--blue2)
}

.trust-grid p, .section-intro p, .service-card p, .about-panel p, .seo-section p, .case-grid p, .application-cards p {
  color:var(--muted)
}

.services-section, .seo-section {
  background:linear-gradient(110deg, #07111c, #0d263b)
}

.services-layout {
  display:grid;
  grid-template-columns:.8fr 1.55fr;
  gap:48px;
  align-items:center
}

.cards {
  grid-template-columns:repeat(3, 1fr);
  gap:16px
}

.service-card {
  background:#08111c;
  border:1px solid rgba(255, 255, 255, .18);
  overflow:hidden
}

.service-card img {
  height:170px;
  width:100%;
  object-fit:cover
}

.service-card div {
  padding:18px
}

.portfolio-about {
  background:#07111b
}

.split-grid {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:28px
}

.portfolio-top {
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-bottom:16px
}

.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.filter {
  background:transparent;
  color:#fff;
  border:1px solid transparent;
  padding:9px 16px;
  text-transform:uppercase;
  cursor:pointer
}

.filter.active, .filter:hover {
  border-color:rgba(32, 135, 232, .8);
  background:rgba(31, 73, 125, .35)
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px
}

.project {
  position:relative;
  min-height:160px;
  overflow:hidden;
  border:1px solid rgba(255, 255, 255, .14);
  cursor:pointer
}

.project img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s
}

.project:hover img {
  transform:scale(1.06);
  opacity:.78
}

.project span {
  position:absolute;
  left:12px;
  bottom:10px;
  text-transform:uppercase;
  font-size:13px;
  background:rgba(0, 0, 0, .55);
  padding:7px 10px
}

.about-panel {
  border-left:1px solid rgba(255, 255, 255, .1);
  padding-left:24px
}

.about-panel img {
  width:100%;
  height:250px;
  object-fit:cover;
  object-position:center top;
  margin:18px 0
}

.seo-layout {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:42px;
  align-items:center
}

.seo-visual img {
  width:100%;
  height:430px;
  object-fit:cover;
  border:1px solid rgba(255, 255, 255, .14)
}

.seo-grid, .case-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px
}

.case-grid {
  grid-template-columns:repeat(3, 1fr)
}

.seo-grid div, .case-grid div, .application-cards article {
  border:1px solid rgba(255, 255, 255, .12);
  padding:20px;
  background:rgba(0, 0, 0, .16)
}

.application-section {
  background:linear-gradient(110deg, #06101a, #0a1d2e)
}

.application-grid {
  display:grid;
  grid-template-columns:.8fr 1.4fr;
  gap:44px
}

.application-cards {
  gap:12px
}

.application-cards img {
  width:100%;
  height:130px;
  object-fit:cover;
  margin:-20px -20px 18px;
  width:calc(100% + 40px);
  max-width:none
}

.contact-strip {
  background:linear-gradient(90deg, #07111c, #102842 52%, #07111c);
  border-top:1px solid rgba(255, 255, 255, .1)
}

.contact-inner {
  min-height:86px;
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  gap:20px
}

.footer {
  background:#010307;
  color:rgba(255, 255, 255, .55);
  padding:24px 0;
  font-size:13px
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:20px
}

.footer nav {
  display:flex;
  gap:24px
}

.modal {
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(0, 0, 0, .82);
  z-index:100
}

.modal.open {
  display:grid
}

.modal-card {
  width:min(980px, 100%);
  background:#07111b;
  border:1px solid rgba(255, 255, 255, .16)
}

.modal-img {
  width:100%;
  max-height:65vh;
  object-fit:contain;
  background:#fff
}

.modal-body {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:24px
}

.close {
  background:transparent;
  color:#fff;
  border:1px solid rgba(255, 255, 255, .22);
  padding:10px 14px
}

.cookie-banner {
  position:fixed;
  left:24px;
  right:24px;
  bottom:24px;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px;
  background:rgba(4, 13, 23, .94);
  border:1px solid rgba(32, 135, 232, .34)
}

.cookie-banner.show {
  display:flex
}

.legal-page {
  max-width:960px
}

.legal-page h1, .legal-page h2 {
  color:#101825;
  text-transform:none
}

.legal-page p {
  color:#4d5a6a
}

.section.light {
  background:#f4f6f9;
  color:#101825
}

@media(max-width:1050px) {
  .nav-links a {
  display:none
}

.hero-content, .services-layout, .split-grid, .application-grid, .seo-layout, .seo-grid, .case-grid {
  grid-template-columns:1fr
}

.hero-copy {
  grid-column:1
}

.cards, .application-cards {
  grid-template-columns:1fr
}

.trust-grid {
  grid-template-columns:1fr
}

.portfolio-grid {
  grid-template-columns:repeat(2, 1fr)
}
}

@media(max-width:700px) {
  .container {
  width:min(calc(100% - 28px), var(--max))
}

.logo-link img {
  height:48px
}

.hero {
  height:auto
}

.hero-content {
  padding-top:130px
}

.hero-copy {
  padding:30px 24px
}

.portfolio-grid {
  grid-template-columns:1fr
}

.contact-inner {
  grid-template-columns:1fr
}

.footer-inner {
  flex-direction:column
}

.cookie-banner {
  flex-direction:column;
  align-items:flex-start
}
}

/* =========================================================
   ARTJOHN CLEAN CROP + RESPONSIVE SYSTEM
   Based on the accepted layout. No global layout overrides.
   ========================================================= */

/* --- Crop system: visible and editable per image in HTML ---
   Use inline custom properties on the existing .img-crop wrapper only:
   style="--img-scale:1.25; --img-x:65%; --img-y:40%;"
   No layout, navigation or global image rules are changed by this block.
--- */

.img-crop {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.img-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-x, 50%) var(--img-y, 50%);
  transform: scale(var(--img-scale, 1));
  transform-origin: var(--img-x, 50%) var(--img-y, 50%);
}

.crop-card {
  aspect-ratio: 16 / 10;
}

.crop-portfolio {
  aspect-ratio: 4 / 3;
}

.crop-wide {
  aspect-ratio: 16 / 9;
}

.crop-portrait {
  aspect-ratio: 4 / 5;
}

.crop-square {
  aspect-ratio: 1 / 1;
}

.focus-top {
  --img-x: 50%;
  --img-y: 0%;
}

.focus-bottom {
  --img-x: 50%;
  --img-y: 100%;
}

.focus-left {
  --img-x: 0%;
  --img-y: 50%;
}

.focus-right {
  --img-x: 100%;
  --img-y: 50%;
}

.focus-60-40 {
  --img-x: 60%;
  --img-y: 40%;
}

.focus-70-35 {
  --img-x: 70%;
  --img-y: 35%;
}

/* --- Component-specific crop integration --- */

.service-card > .img-crop {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.project {
  min-height: 0;
}

.project > .img-crop {
  width: 100%;
}

.project > .img-crop img {
  transition: transform .4s ease, opacity .4s ease;
}

.project:hover > .img-crop img {
  transform: scale(calc(var(--img-scale, 1) * 1.06));
  opacity: .78;
}

.about-panel > .img-crop {
  margin: 18px 0;
  border: 1px solid rgba(255,255,255,.14);
}

.seo-visual > .img-crop {
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

.application-cards article > .img-crop {
  margin: -20px -20px 18px;
  width: calc(100% + 40px);
}

/* --- Mobile navigation: invisible on desktop, visible only below tablet breakpoint --- */

.mobile-menu-button {
  display: none;
  border: 1px solid rgba(31,73,125,.28);
  background: rgba(255,255,255,.72);
  color: #102033;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

/* --- Tablet --- */

@media (max-width: 1050px) {
  .mobile-menu-button {
    display: inline-flex;
  }

  .nav-links {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 104px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(255,255,255,.96);
    color: #102033;
    padding: 22px;
    border: 1px solid rgba(31,73,125,.18);
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
  }

  .nav-links.open {
    display: flex;
  }

  .hero-content,
  .services-layout,
  .split-grid,
  .application-grid,
  .seo-layout,
  .seo-grid,
  .case-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    grid-column: 1;
    max-width: 720px;
  }

  .cards,
  .application-cards,
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .crop-portfolio {
    aspect-ratio: 1 / 1;
  }

  .about-panel {
    border-left: 0;
    padding-left: 0;
  }
}

/* --- Smartphone --- */

@media (max-width: 700px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .nav {
    height: 92px;
  }

  .logo-link img {
    height: 48px;
  }

  .hero {
    min-height: 720px;
    height: auto;
  }

  .hero-content {
    padding-top: 130px;
  }

  .hero-copy {
    padding: 30px 24px;
  }

  .hero-copy h1,
  h1 {
    font-size: 40px;
  }

  .hero p {
    font-size: 18px;
  }

  .portfolio-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .crop-card,
  .crop-wide {
    aspect-ratio: 4 / 3;
  }
}


/* =========================================================
   TARGETED FIX: ABOUT IMAGE / SIGNATURE MUST NOT BE CROPPED
   ========================================================= */

/* This class is intentionally NOT cropped.
   It is for portrait/composite images that contain important content
   near the bottom, e.g. signature or caption graphics. */
.about-panel .img-natural {
  width: 100%;
  overflow: visible;
  margin: 18px 0 26px;
  border: 1px solid rgba(255,255,255,.14);
}

.about-panel .img-natural img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Make sure only the about visual can show its full height.
   Other crop containers remain unchanged. */
.about-panel {
  height: auto;
}