/* Hard stop any stray horizontal overflow */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: "Aptos Narrow", Helvetica, Arial, sans-serif;
}

/* source-code-pro-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-code-pro-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.custom-text {
  font-family: 'Source Code Pro', monospace; /* sans-serif fallback looks closer */
  color: #121212;
  font-size: 48px;
  display: inline-block; /* makes font application unambiguous */
  padding-bottom: 10px;
}

/* Use a distinctive class on the exact span that contains the text */
.source-code-pro {
  font-family: 'Source Code Pro', monospace;
  font-size: 40px;       /* tweak */
  color: #121212;        /* tweak */
  font-weight: lighter;
  display: inline-block; /* avoids inheritance oddities */
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px; /* space between rows */
  width: 100%;
  font-family: "Aptos Narrow", Arial, sans-serif;
  color: #121212;
  padding-top: 50px;
}

.hero-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  width: 100%;
  /* padding-left: 160px;  <-- remove this; it caused overflow */
  margin-left: 160px;           /* same visual offset, no overflow */
  max-width: 1200px;
}

.hero-row > div {
  text-align: center;
  padding: 5px;
  flex-shrink: 0;            /* prevents flex from squashing the boxes */
  white-space: nowrap;       /* prevents internal line breaks from spaced letters */
  line-height: 1;            /* keeps vertical alignment consistent */
  /* background: rgba(0, 100, 255, 0.1); */ /* debug only; remove when done */
  /* border: 1px solid #aaa; */   /* debug only; remove when done */
}

/* Individual div styles */
#text1, #text3, #text5 {
  font-size: 56pt;
  display: inline-block;
  transform-origin: center; /* <-- makes sure it shrinks evenly left and right */
  /* letter-spacing: 0.4em; */
}

#text2, #text4 {
  font-size: 14pt;
}

/* #text1, #text2, #text3 { */
  /* width: 220px; */
  /* text-align: center; */
  /* transform-origin: center; */
/* } */

/* big vs small text */
.bigletters { letter-spacing: 0.4em; }
.bigletters .ls { letter-spacing: 0.4em; }
.bigletters .last { letter-spacing: 0; }   /* trims the trailing gap */
.smallletters { font-size: 14pt; }

@media (max-width: 768px) {
  .hero-row {
    flex-direction: column;
    align-items: center;
  }
}

.box_image {
	position: relative;
  display: block;
  width: 100%;
  top: 5px;
  /* left: 300px; <-- remove this; it pushed the page horizontally */
  background: none;
}

/* ensure the image never exceeds the viewport */
#img_1 {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* center if the image is narrower */
}

.carousel-container {
  background: #565656;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */ /* optional: remove if placing in scrollable page */
  overflow: hidden;
}

.carousel {
  display: flex;
  gap: 10px;
  /* animation: scroll-left linear infinite; */
  will-change: transform;
  --scroll-distance: 1000px;      /* will be set by JS */
  --scroll-duration: 30s;         /* will be set by JS */
  animation: scroll-left var(--scroll-duration) linear infinite;
}

@keyframes scroll-left {
  to { transform: translateX(calc(-1 * var(--scroll-distance))); }
}

.carousel:hover {
  /* animation-play-state: paused; */
  .carousel.is-paused { animation-play-state: paused; }
}

.slide {
  flex: 0 0 auto;
  width: 300px;
  max-width: 80vw;
  height: 200px;
  background: #565656;
  color: #efefef;
  font-family: "Aptos Narrow", Arial, sans-serif;
  font-size: 1.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 10px; */
  border-left: 1px solid #BBBBBB;
  padding: 50px;
  transition: transform 0.3s ease;
}

@media (max-width: 600px) {
  .slide {
    width: 80vw;
    font-size: 1.5em;
    height: 150px;
  }
}

/* ===== Two white panels below carousel ===== */
.below-panels {
  display: flex;
  flex-direction: row;  /* side-by-side */
  width: 100%;
  /* no fixed height here—children carry the height */
}

.panel {
  flex: 1 1 50%;
  background: #ffffff;
  min-height: 500px;  /* keep minimum */
  height: auto;       /* grow to fit content */
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e8e8e8;
  min-width: 0;       /* allow flex items to shrink and avoid horizontal scroll */
}

/* .panel--left {
  #left-line {
    font-family: "Aptos Narrow", Arial, sans-serif;
    color: #397039;
    font-size: 40px;
    padding-left: 20px;
  }
  padding-left: 100px;
  
} */

/* Style the H2 lines to match your previous left-line look */
.panel--left .left-line {
  font-family: "Aptos Narrow", Arial, sans-serif;
  color: #397039;
  font-size: 40px;
  font-weight: lighter;
  line-height: 1.1;
  margin: 0;                 /* remove default h2 margins */
  padding-left: 20px;        /* keep your original indent */
}

/* Remove the invalid nested block that was here:
.panel--left  {
  #left-line { ... }   <-- delete this entire nested bit

/* Keep the panel padding itself (not nested) */
.panel--left { padding-left: 100px; }

.panel--right {
  /* Label styling controls (tweak these) */
  --contact-label-font-family: "Aptos Narrow", Arial, sans-serif;
  --contact-label-font-size: 14pt;
  --contact-label-color: #121212;
  min-height: 680px;
}

/* Container */
.contact{
  width: min(92%, 720px);
  margin-left: 5px;
  color: #121212;
  overflow: visible; /* was auto; let the parent grow instead */
}

/* Intro text */
.contact-intro{
  margin: 0 0 16px 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Form grid */
.contact-form .fields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Labels (customizable via variables) */
.contact-form label{
  display: block;
  font-family: var(--contact-label-font-family);
  font-size: var(--contact-label-font-size);
  color: var(--contact-label-color);
  margin-bottom: 6px;
  line-height: 1.2;
}

.contact-form .req{ color: #c60000; font-size: 0.9em; }
.contact-form .opt{ color: #666;     font-size: 0.85em; }

/* Inputs */
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"]{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #fff;
  color: #222;                    /* legible user-entered text */
  font-size: 1rem;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-form input:focus{
  border-color: #2a66f5;
  box-shadow: 0 0 0 3px rgba(42,102,245,.15);
}

/* Name fields side-by-side on wider screens */
.name-group{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Small helper text */
.hint{
  display: block;
  margin-top: 6px;
  color: #666;
}

/* Submit button */
.btn-send{
  margin-top: 14px;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: #121212;           /* matches your site color */
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .04s ease;
}
.btn-send:hover{ background:#1e1e1e; }
.btn-send:active{ transform: translateY(1px); }

/* Responsive: put first/last name on one row when there's room */
@media (min-width: 560px){
  .name-group{ grid-template-columns: 1fr 1fr; }

}

.panel__content {
  width: min(90%, 900px);
  max-width: 100%;    /* never exceed the panel width */
}

/* Optional: make the two panels stack on narrow screens */
@media (max-width: 768px) {
  .below-panels {
    flex-direction: column;
  }
  .panel {
    height: 400px;   /* adjust if you want a shorter mobile height */
    min-height: 400px;
  }
}

/* Keep it out of view without type="hidden" */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* (Optional) belt-and-suspenders */
#hp { opacity: 0; pointer-events: none; }

/* ===== Footer (clean, centered) ===== 
.site-footer {
  background: #f6f6f6;
  color: #121212;
  border-top: 1px solid #e8e8e8;
}

.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;  
  align-items: center;     
  justify-content: center;
  gap: 10px;
  text-align: center;      
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }

.footer-links span[aria-hidden="true"] { opacity: .55; }

.footer-meta {
  opacity: .8;
  font-size: .9rem;
  text-align: center;
} */

/* ===== Footer (centered, conflict-proof) ===== */
.site-footer {
  background: #f6f6f6;
  color: #121212;
  border-top: 1px solid #e8e8e8;
  width: 100%;
}

.site-footer .footer-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;              /* center the container itself */
  padding: 18px 16px;
  display: grid;
  row-gap: 10px;
  justify-items: center;        /* center everything inside */
  text-align: center;
}

.footer-links {
  display: inline-flex;         /* shrink to content and center via grid parent */
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0; padding: 0;
}

.footer-links a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }

.footer-links span[aria-hidden="true"] { opacity: .55; }

.footer-meta {
  opacity: .8;
  font-size: .9rem;
}

/* ===== Cookie banner ===== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .25s ease;
  z-index: 9999;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-text h2 {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  color: #111;
}
.cookie-text p {
  margin: 0;
  color: #333;
  max-width: 70ch;
}
.cookie-text a { color: #2a66f5; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  cursor: pointer;
}
.cookie-btn--primary {
  background: #121212; color: #fff; border-color: #121212;
}
.cookie-btn--primary:hover { background: #1e1e1e; }
.cookie-btn--outline {
  background: #fff; color: #121212; border-color: #ccc;
}
.cookie-btn--outline:hover { border-color: #999; }

@media (max-width: 640px) {
  .cookie-inner { align-items: flex-start; }
  .cookie-actions { width: 100%; justify-content: flex-start; }
}

/* =========================
   MOBILE OVERRIDES
   Append below your current CSS
   ========================= */

/* 1) Fluid typography for hero and left panel headings */
h1.source-code-pro {
  /* scale between 28px and 40px depending on viewport */
  font-size: clamp(28px, 5vw, 40px);
}
.panel--left .left-line {
  font-size: clamp(26px, 4.2vw, 40px);
}

/* 2) Images must never overflow */
#img_1,
.hero2 img,
.panel__content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3) Prevent any horizontal overflow from flex children on small screens */
.hero-row,
.below-panels,
.panel,
.footer-inner,
.cookie-inner {
  min-width: 0;
}

/* 4) Carousel: make slides readable on narrow screens */
@media (max-width: 768px) {
  .carousel-container {
    height: auto;               /* allow the section to size to content */
    min-height: 260px;          /* safety floor */
    padding: 12px 0;
  }
  .carousel {
    gap: 8px;
  }
  .slide {
    width: 80vw;                /* wide enough per slide, but not full */
    max-width: 520px;
    height: clamp(160px, 32vh, 220px);
    font-size: clamp(18px, 4.5vw, 22px);
    border-radius: 10px;
  }
}

/* 5) Two panels below the carousel: stack on phones, keep equal width on tablets+ */
@media (max-width: 900px) {
  .below-panels {
    flex-direction: column;
  }
  .panel {
    align-items: stretch;       /* content can align to top */
    justify-content: flex-start;
    padding: 16px 0;            /* breathable space */
    min-height: auto;           /* let content define height on small screens */
  }
  .panel__content,
  .contact {
    width: min(94%, 680px);
    max-width: 100%;
    margin: 0 auto;
  }
}

/* If you want the RIGHT panel to remain taller on mobile (so the form never feels cramped): */
@media (max-width: 900px) {
  .panel--right { padding-bottom: 16px; }
}

/* 6) Contact form: comfortable tap targets + no overflow */
@media (max-width: 560px) {
  .contact-intro { font-size: 0.95rem; }
  .contact-form label { font-size: clamp(14px, 3.6vw, 16px); }
  .contact-form input[type="text"],
  .contact-form input[type="tel"],
  .contact-form input[type="email"] {
    height: 48px;               /* 44px+ touch targets */
    font-size: 16px;            /* avoid iOS auto-zoom on focus */
  }
  .btn-send {
    height: 48px;
    font-size: 16px;
    width: 100%;                /* easier to tap */
  }
  .name-group { grid-template-columns: 1fr; } /* stack first/last name on very narrow */
}

/* 7) Hero rows: avoid large left offsets on narrow devices */
@media (max-width: 768px) {
  .hero { gap: 14px; }
  .hero-row {
    margin-left: 0 !important;  /* cancel any desktop offset */
    padding: 0 16px;            /* soft page padding */
    gap: 12px;
  }
  .panel--left { padding-left: 16px !important; } /* softer indent on mobile */
}

/* 8) Footer: center reliably on small screens */
@media (max-width: 768px) {
  .site-footer .footer-inner {
    display: grid;
    justify-items: center;
    row-gap: 8px;
    padding: 16px;
    text-align: center;
  }
  .footer-links { 
    justify-content: center; 
    gap: 8px; 
  }
  .footer-meta { font-size: 0.9rem; }
}

/* 9) Cookie banner: stack actions and avoid cramping text */
@media (max-width: 640px) {
  .cookie-inner {
    padding: 14px;
    gap: 12px;
    align-items: flex-start;
  }
  .cookie-text h2 { font-size: 1rem; margin-bottom: 4px; }
  .cookie-text p  { font-size: 0.95rem; }
  .cookie-actions { width: 100%; justify-content: flex-start; }
  .cookie-btn { height: 44px; font-size: 16px; }
}

/* 10) Safety: never let generic elements cause right-scroll */
html, body {
  overflow-x: hidden;
}

/* ===== HERO: mobile rescue (place at very end of style.css) ===== */
@media (max-width: 768px) {
  /* Let hero cells wrap; earlier desktop rules used nowrap */
  .hero-row > div { white-space: normal; }

  /* Stack the two hero rows nicely on phones */
  .hero { gap: 12px; }
  .hero-row {
    margin-left: 0 !important;  /* cancel desktop offset */
    padding: 0 16px;
    flex-direction: column;
    align-items: center;         /* change to flex-start for left-align */
    gap: 8px;
    text-align: center;          /* change to left for left-align */
  }

  /* BIG words */
  #text1, #text3, #text5 {
    font-size: clamp(28px, 9vw, 42px);
  }

  /* Keep letter-spacing under control so it fits */
  .bigletters .ls { letter-spacing: clamp(0.04em, 0.9vw, 0.18em); }
  .bigletters .last { letter-spacing: 0; }

  /* Small words (“in”, “but/not/sure”) */
  #text2, #text4 {
    font-size: clamp(16px, 4.2vw, 20px);
  }
}

/* ===== HERO: mobile LANDSCAPE rescue (place at very end) =====
   Triggers on short, wide viewports typical of phone landscape. */
@media (orientation: landscape) and (max-height: 480px),
       (orientation: landscape) and (max-width: 1024px) {

  /* Allow text to wrap and prevent horizontal blowout */
  .hero-row > div { white-space: normal; }

  /* Use the horizontal space but allow wrapping across lines if needed */
  .hero { gap: 10px; }
  .hero-row {
    margin-left: 0 !important;        /* cancel any desktop offset */
    padding: 0 16px;
    flex-direction: row;               /* keep items on the same row when possible */
    flex-wrap: wrap;                   /* wrap if they don't fit */
    justify-content: center;           /* center the group */
    align-items: center;
    gap: 10px 16px;                    /* row/column gap */
    text-align: center;
  }

  /* Scale big words down a bit more for landscape */
  #text1, #text3, #text5 {
    font-size: clamp(24px, 7vw, 36px);
  }

  /* Tame letter-spacing so long words still fit */
  .bigletters .ls   { letter-spacing: clamp(0.03em, 0.7vw, 0.16em); }
  .bigletters .last { letter-spacing: 0; }

  /* Small words */
  #text2, #text4 { font-size: clamp(14px, 3.6vw, 18px); }

  /* Safety: no horizontal scrollbars from hero on short wide screens */
  .hero, .hero-row { overflow-x: hidden; }
}