:root {
  
  --primary-blue: #1e3a8a; 
  --primary-blue-light: #3b82f6; 
  --footer-link-color: #e0f2fe; 
  --footer-link-hover: #bfdbfe;
  --gray-dark: #1f2937; 
  --gray-medium: #6b7280; 
  --gray-light: #d1d5db; 
  --warm-white: #f8fafc; 
  --wood-tone: #d97706; 
  --white: #ffffff;
  --black: #000000;
  --cookie-text: #ffffff; 
  --cookie-link: #ffffff; 
  --placeholder-color: #4b5563; 

  --font-family-headings: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
  --font-size-h1: clamp(2rem, 4vw, 3rem); 
  --font-size-h2: clamp(1.75rem, 3.5vw, 2.25rem);
  --font-size-h3: clamp(1.5rem, 3vw, 1.75rem);
  --font-size-h4: clamp(1.25rem, 2.5vw, 1.5rem);
  --font-size-h5: clamp(1.125rem, 2.25vw, 1.25rem);
  --font-size-h6: clamp(1rem, 2vw, 1.125rem);
  --font-size-body: 1rem;
  --font-size-small: 0.9375rem; 
  --line-height-headings: 1.3; 
  --line-height-body: 1.8; 
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem; 
  --spacing-3xl: 3rem; 
  --spacing-4xl: 4rem; 

  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--gray-dark);
  background-color: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-headings);
  color: var(--gray-dark);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  margin: 0;
}

a {
  color: var(--primary-blue);
  text-decoration: none;
}

a:hover {
  color: var(--primary-blue-light);
  text-decoration: underline;
}

.error-404 p,
.error-404 .message {
  color: var(--gray-dark) !important;
}

.error-404 a {
  color: var(--primary-blue) !important;
}

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

.blueprint-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto var(--spacing-md) auto;
}

.blueprint-text {
  position: relative;
  left: 0;
  margin-left: var(--spacing-md);
  z-index: 1;
}

.blueprint-caption {
  text-align: center;
  margin-top: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-dark);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15; 
  margin: 0; 
  border: 0;
  padding: 0;
}

button {
  cursor: pointer;
}

input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

h1 { font-size: var(--font-size-h1); margin-bottom: var(--spacing-lg); }
h2 { font-size: var(--font-size-h2); margin-bottom: var(--spacing-md); }
h3 { font-size: var(--font-size-h3); margin-bottom: var(--spacing-md); }
h4 { font-size: var(--font-size-h4); margin-bottom: var(--spacing-sm); }
h5 { font-size: var(--font-size-h5); margin-bottom: var(--spacing-sm); }
h6 { font-size: var(--font-size-h6); margin-bottom: var(--spacing-sm); }

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: var(--spacing-sm);
}

.lead {
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.small {
  font-size: var(--font-size-small);
}

.pl-container {
  width: 100%;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}

main .pl-container,
.content-container {
  max-width: 65ch; 
  margin: 0 auto;
  text-align: left;
}

.pl-flex {
  display: flex;
}

.pl-flex-column {
  flex-direction: column;
}

.pl-flex-wrap {
  flex-wrap: wrap;
}

.pl-justify-center {
  justify-content: center;
}

.pl-align-center {
  align-items: center;
}

.pl-gap-sm {
  gap: var(--spacing-sm);
}

.pl-gap-md {
  gap: var(--spacing-md);
}

.pl-grid {
  display: grid;
  gap: var(--spacing-md);
}

.pl-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.row[class*='g-'] > [class*='col-']:has([class*='card']) {
  display: flex !important;
  flex-direction: column !important;
}

[class*='card'] {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pl-btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-normal);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  white-space: normal;
  word-wrap: break-word;
  min-width: fit-content;
}

.pl-btn-primary {
  background-color: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
}

.pl-btn-primary:hover {
  background-color: var(--primary-blue-light);
  border-color: var(--primary-blue-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pl-btn-secondary {
  background-color: var(--warm-white);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.pl-btn-secondary:hover {
  background-color: var(--primary-blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pl-btn-outline {
  background-color: transparent;
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.pl-btn-outline:hover {
  background-color: var(--primary-blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn,
.pl-btn,
.cookie-btn,
.accept-btn,
.reject-btn {
  border-radius: var(--border-radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  margin: 0 var(--spacing-sm) !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  min-width: 100px;
}

.pl-card {
  background-color: var(--white);
  border: var(--border-width) solid var(--gray-light);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pl-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-blue);
}

.pl-card-header {
  margin-bottom: var(--spacing-md);
}

.pl-card-body {
  flex-grow: 1;
}

.pl-card-footer {
  margin-top: auto;
  padding-top: var(--spacing-md);
  border-top: var(--border-width) solid var(--gray-light);
}

.pl-form-group {
  margin-bottom: var(--spacing-lg);
}

.pl-form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-dark);
}

.pl-form-input,
.pl-form-textarea,
.pl-form-select {
  width: 100%;
  padding: var(--spacing-sm);
  border: var(--border-width) solid var(--gray-light);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  transition: border-color var(--transition-fast);
  background-color: var(--white);
}

.pl-form-input:focus,
.pl-form-textarea:focus,
.pl-form-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.pl-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-helper-text {
  font-size: 0.9375rem;
  color: var(--gray-dark);
  margin-top: var(--spacing-xs);
  line-height: 1.5;
}

.privacy-text {
  text-align: left !important;
  max-width: 65ch;
  line-height: 1.8;
  margin: var(--spacing-md) auto;
}

.personal-touch-text,
.studio-text {
  text-align: left !important;
  max-width: 65ch;
  margin: 0 auto;
  line-height: 1.8;
}

.faq-intro {
  text-align: left !important;
  max-width: 65ch;
  margin: 0 auto var(--spacing-lg) auto;
  line-height: 1.8;
}

.faq-answer {
  font-size: 1.0625rem; 
  line-height: 1.8;
}

.pl-navbar {
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-sm) 0;
  position: relative;
  overflow: visible;
}

.pl-nav-link {
  color: var(--gray-dark);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: color var(--transition-fast);
  font-weight: var(--font-weight-semibold); 
  font-size: 1.0625rem; 
  margin-right: var(--spacing-md); 
}

.pl-nav-link:hover,
.pl-nav-link:focus {
  color: var(--primary-blue);
  outline: none;
}

.navbar-brand img,
.logo {
  max-width: 100%;
  height: auto;
  margin-left: 0 !important;
  position: relative;
  left: 0;
}

.pl-btn:focus,
.pl-nav-link:focus,
.pl-form-input:focus,
.pl-form-textarea:focus,
.pl-form-select:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.pl-hero {
  background: linear-gradient(rgba(30, 58, 138, 0.7), rgba(30, 58, 138, 0.7)), url('../images/hero-bg.webp') center/cover;
  color: var(--white);
  padding: var(--spacing-3xl) 0; 
  text-align: center;
  min-height: 90vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

.pl-hero h1 {
  color: var(--white);
  margin-bottom: var(--spacing-lg);
  word-break: break-word;
  overflow: visible;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); 
  max-width: 100%;
  line-height: 1.2;
}

.pl-hero .hero-subtitle {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.pl-hero .btn,
.pl-hero .pl-btn {
  margin: var(--spacing-md) auto; 
  display: block;
  max-width: fit-content;
  padding: var(--spacing-md) var(--spacing-2xl) !important; 
}

.section-spacing {
  padding: var(--spacing-xl) 0; 
  margin-bottom: 0;
}

.testimonials-nav {
  padding: var(--spacing-md);
  margin: 0 var(--spacing-sm);
}

.pl-footer {
  background-color: var(--primary-blue); 
  color: var(--warm-white);
  padding: var(--spacing-xl) 0; 
  font-size: 1rem; 
}

.pl-footer a {
  color: var(--footer-link-color);
  font-weight: var(--font-weight-medium);
}

.pl-footer a:hover {
  color: var(--footer-link-hover);
}

.pl-footer ul li {
  margin-bottom: var(--spacing-sm); 
  line-height: 1.6;
}

.pl-footer .footer-column {
  flex: 1;
  margin-right: var(--spacing-lg); 
}

.pl-footer .footer-column:last-child {
  margin-right: 0;
}

.pl-footer .copyright {
  font-size: var(--font-size-small);
  line-height: 1.6; 
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
}

.pl-footer h5,
.pl-footer .footer-title {
  font-weight: var(--font-weight-bold) !important; 
}

body.services-page .pl-container {
  max-width: 100%;
}

body.services-page main .container {
  max-width: 100%;
}

body.services-page main .pl-container {
  max-width: 100%;
  padding-left: clamp(1.25rem, 4vw, 5rem);
  padding-right: clamp(1.25rem, 4vw, 5rem);
}

body.services-page main p,
body.services-page main .lead {
  max-width: none;
}

footer {
  line-height: 1.6;
}

footer ul {
  line-height: 1.6;
}

footer p {
  line-height: 1.6;
}

.cookie-banner,
#cookie-consent,
#cookie-banner {
  background-color: var(--primary-blue);
  color: var(--cookie-text);
  padding: var(--spacing-md) var(--spacing-lg);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: auto;
  max-height: 120px;
  overflow: visible;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.cookie-banner p {
  color: var(--cookie-text) !important;
  font-size: 0.9375rem; 
  margin: 0 var(--spacing-sm) 0 0;
  flex: 1;
  min-width: 200px;
}

.cookie-banner a.learn-more {
  color: var(--cookie-link) !important;
  text-decoration: underline;
  font-weight: var(--font-weight-medium);
}

.cookie-banner .btn,
.cookie-banner .accept-btn,
.cookie-banner .reject-btn {
  padding: var(--spacing-sm) var(--spacing-md) !important;
  margin: 0 var(--spacing-sm) !important;
  flex-shrink: 0;
  white-space: nowrap;
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
  color: var(--gray-dark) !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--primary-blue) !important;
}

.bg-light,
.bg-white {
  color: var(--gray-dark);
}

.bg-light a,
.bg-white a {
  color: var(--primary-blue);
}

.bg-dark a {
  color: var(--primary-blue-light);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

.form-text {
  color: var(--gray-dark);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.btn,
.pl-btn {
  border-radius: var(--border-radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
  transition: all var(--transition-normal) !important;
  white-space: normal;
  word-wrap: break-word;
}

.card.h-100,
.gamelift-card.h-100,
[class*='-card'].h-100 {
  min-height: 500px !important;
}

.card.h-100 > *,
.gamelift-card.h-100 > *:not(img):not(.btn) {
  flex-grow: 1;
}

main p,
.pl-container p,
.prose p,
.content p,
.article p,
.policy-text,
.introduction-text {
  max-width: 70ch;
  text-align: left;
  line-height: 1.8;
  margin-bottom: var(--spacing-md);
}

.start-consultation h2 + p {
  margin-top: 0; 
}

.what-are-cookies {
  margin-top: var(--spacing-lg); 
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

.testimonial-arrow,
.swiper-button-next,
.swiper-button-prev {
  padding: 1rem;
  margin: 0 var(--spacing-sm);
  z-index: 10;
}

main {
  margin-bottom: var(--spacing-md); 
}

@media (min-width: 768px) {
  .pl-container {
    padding-right: var(--spacing-lg);
    padding-left: var(--spacing-lg);
  }

  .pl-hero {
    padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    min-height: 90vh;
  }

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

  .cookie-banner {
    flex-direction: row;
    padding: var(--spacing-lg);
  }

  .footer .row {
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .pl-hero {
    min-height: 90vh;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .personal-touch-text,
  .studio-text,
  .faq-intro {
    max-width: 50ch;
  }
}

.pl-text-center { text-align: center; }
.pl-mb-sm { margin-bottom: var(--spacing-sm); }
.pl-mb-md { margin-bottom: var(--spacing-md); }
.pl-mb-lg { margin-bottom: var(--spacing-lg); }
.pl-py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.pl-px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

.pl-card,
.pl-btn,
.pl-nav-link {
  transition: all var(--transition-normal);
}

.pl-hero .pl-btn {
  transition: all var(--transition-slow);
}

img[data-src] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[data-src].loaded {
  opacity: 1;
}

.swiper {
  width: 100%;
  height: 100%;
}

.fancybox__container {
  z-index: 9999;
}

.col:has(img:only-child),
[class*='col-']:has(img:not([class*='card']):only-child) {
  display: block !important;
  align-items: stretch;
}

.consultation-section h2 {
  margin-bottom: var(--spacing-sm);
}

.policy-title,
.policy-intro {
  text-align: left !important;
  max-width: 70ch;
  margin: 0 auto;
}

.bg-light a, .bg-white a {
  color: #f3f3f3;
}