/* 1.1.general-setting-pages *************************/
/****************************************************/
:root {
	--pr-color: #fff;
	--second-color: #0a0a0a;
	--cubicbz: cubic-bezier(.9, 0, .1, 1);
	--fz-big: 60px;
}

* {
	box-sizing: border-box;
	font-family: 'Syne', sans-serif;
	font-weight: 800;
	margin: 0;
	padding: 0;
	font-feature-settings: 'pnum' on, 'lnum' on;
}

body {
	background: var(--second-color);
}

/******************************************/
section {
	padding-top: 150px;
	padding-bottom: 50px;
}

.wrapp {
	width: 100%;
	height: auto;
	overflow: hidden;
	z-index: 1;
}

.content {
	width: 100%;
	padding: 0 70px;
}

.char {
	display: inline-block;
}

/* Paralax Effect On GSAP **********************************/
/* header ********/
.header {
	position: relative;
	display: flex;
	padding: 0 70px;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
}

.header__marq {
	position: absolute;
	bottom: 0;
	left: 0;
}

.header__marq {
	width: 100%;
	height: auto;
	background: #171717;
	overflow: hidden;
}

.header__marq-wrapp {
	display: flex;
	width: 100%;
	height: auto;
	padding: 8px 5px;
}

.header__marq-txt {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	padding-right: 55px;
	margin-right: 15px;
	text-transform: uppercase;
	color: var(--pr-color);
	color: #9e9e9e;
	font-size: 35px;
}

.header__marq-star {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 0;
}

.header__marq-star img {
	display: block;
	width: 100%;
	height: 100%;
}

.title {
	position: relative;
	margin: 0;
	font-size: 85px;
	text-align: center;
	color: var(--pr-color);
	text-transform: uppercase;
	mix-blend-mode: difference;
	z-index: 2;
}



.title_paralax {
	display: inline-block;
	will-change: transform;
}

/* Promote frequently-animated elements to their own layer for smoother frames */
.header__img,
.header__marq-wrapp,
.header__marq-star img,
.header__marq,
.header__cta,
.about__img img,
.work__item-img img {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.title .stroke {
	display: inline-block;
	color: transparent;
	-webkit-text-stroke: 1px var(--pr-color);
}

.header__img {
	position: absolute;
	width: 45%;
	height: 100%;
	top: 0;
	right: 100px;
	clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	overflow: hidden;
}

.header__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-title {
	position: relative;
	margin: 0;
	margin-bottom: 60px;
	line-height: .8;
	font-size: 70px;
	text-align: center;
	color: var(--pr-color);
	text-transform: uppercase;
}

.section-title .stroke {
	color: transparent;
	-webkit-text-stroke: 1px var(--pr-color);
}

.section-title__square {
	position: absolute;
	display: inline-block;
	width: 130px;
	height: 130px;
	border: 2px solid #ffd54a;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

/* about ********/
.about .section-title {
	text-align: left;
}

.about__wrapp {
	display: flex;
	justify-content: space-between;
}

.about__img,
.about__txt {
	width: calc(50% - 35px);
	height: auto;
}

.about__txt {
	padding-right: 70px;
}

.about__p {
	line-height: 1.4;
	font-size: 20px;
	color: #4b4b4b;
}

.about__img {
	height: 100vh;
	overflow: hidden;
}

.about__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* benefits ********/
.benefits__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	width: 100%;
	height: auto;
}

.benefits__item {
	list-style: none;
	width: calc(33.33% - 27px);
}

.benefits__num {
	display: inline-block;
	font-size: 60px;
	color: transparent;
	-webkit-text-stroke: 1px var(--pr-color);
}

.benefits__p {
	font-size: 20px;
	color: #4b4b4b;
}

/* work ********/
.work {
	padding-top: 150px;
}

.work__wrapp {
	display: flex;
	flex-wrap: wrap;
	row-gap: 120px;
	justify-content: space-between;
	padding: 0 120px;
}

.work__item {
	position: relative;
	width: calc(50% - 60px);
	height: 100vh;
}

.work__item-num {
	position: absolute;
	display: inline-block;
	font-size: 70px;
	color: var(--pr-color);
	mix-blend-mode: difference;
	z-index: 2;
}

.work__item-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.work__item-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* serv ********/
.serv__item {
	position: relative;
	padding: 40px 0;
	border-bottom: 1px solid #2f2e2e;
}

.serv__item-arrow {
	position: absolute;
	display: inline-block;
	width: 55px;
	height: 55px;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.serv__item-arrow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: rotate(180deg);
}

.serv__item-txt {
	font-size: 50px;
	color: #4b4b4b;
	text-transform: uppercase;
}

/* footer ********/
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.footer__div {
	font-size: 70px;
	letter-spacing: 15px;
	color: var(--pr-color);
	text-transform: uppercase;
}

.footer__div span {
	display: inline-block;
}

.footer__links{
  margin-top: 10px;
  font-size: 12px;
  color: #9e9e9e;
  text-transform: none;
  letter-spacing: 0.5px;
}

.footer__links a{
  color: #9e9e9e;
  text-decoration: none;
}

.footer__links a:hover{
  color: #ffd54a;
}


/* ==== FAST FR8 image tuning ==== */

/* Hero image: keep the van more to the right side */
.header__img img {
	object-fit: cover;
	object-position: 70% center; /* move focus to the right */
}

/* About image: keep van roughly centered */
.about__img img {
	object-fit: cover;
	object-position: center center;
}

/* Portfolio images: keep vehicles centered vertically */
.work__item-img img {
	object-fit: cover;
	object-position: center center;
}


@media (max-width: 768px) {
	.header {
		padding: 0 20px;
	}

	.header__img {
		width: 100%;
		right: 0;
	}

	.content {
		padding: 0 20px;
	}

	.about__wrapp {
		flex-direction: column;
	}

	.about__img,
	.about__txt,
	.work__item {
		width: 100%;
		height: auto;
	}

	.about__img {
		height: 60vh;
	}
}

/* CONTACT SECTION */

.contact {
  padding: 140px 0;
  background-color: #050505;
}

.contact .content {
  max-width: 960px;
  margin: 0 auto;
}

.contact__intro {
  margin-top: 20px;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: #bfbfbf;
}

/* animated CONTACT US inside contact section */
.contact__letters {
  margin: 30px 0 10px;
}

.contact__form {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.contact__field {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact__field--full {
  width: 100%;
}

.contact__field label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a9a9a;
}

.contact__field input,
.contact__field select,
.contact__field textarea {
  padding: 10px 12px;
  background-color: #111;
  border: 1px solid #333;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: #f5f5f5;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: #666;
}

.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
  border-color: #ffd54a; /* yellow accent */
  background-color: #151515;
}

.contact__btn {
  align-self: flex-start;
  margin-top: 10px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background-color: #ffd54a;
  color: #050505;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.contact__btn:hover {
  background-color: #ffeb8a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.contact__btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* basic mobile adjustment */
@media (max-width: 768px) {
  .contact {
    padding: 90px 0;
  }

  .contact__row {
    flex-direction: column;
  }
}

/* keep existing footer look, just allow extra content */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative; /* so the meta bar can sit at the bottom */
}

/* existing .footer__div stays as-is */

/* small meta bar at bottom of footer */
.footer__meta {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  color: #9e9e9e;
  line-height: 1.4;
  text-transform: none;
}

.footer__meta a {
  color: #9e9e9e;
  text-decoration: none;
}

.footer__meta a:hover {
  color: #ffd54a;
}
/* **********************************************************/
/* HERO TITLE – TABLET & MOBILE POSITION */
@media (max-width: 768px) {
  .header {
    min-height: 100vh;
  }

  .header .title {
    position: absolute;
    top: 38vh !important;      /* tweak this value to move up/down */
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 5;
    text-align: center;
    width: 90%;
  }
}

/* MOBILE – GLOBAL TYPE, TITLES & LAYOUT (<= 600px) */
@media (max-width: 600px) {

  /* main body text */
  .about__p,
  .benefits__p,
  .contact__intro {
    font-size: 13px;
    line-height: 1.5;
  }

  /* hero + header text sizes */
  .title {
    font-size: 30px;
  }

  .header__marq-txt {
    font-size: 16px;
  }

  /* numbers + big labels */
  .benefits__num {
    font-size: 26px;
  }

  .serv__item-txt {
    font-size: 20px;
  }

  /* footer CONTACT US */
  .footer__div {
    font-size: 20px;
    letter-spacing: 3px;
    white-space: nowrap;   /* keep "CONTACT US" on one line */
    text-align: center;    /* optional: centre it */
  }

  /* UNIFIED SECTION TITLES + YELLOW SQUARE (ABOUT, BENEFITS, PORTFOLIO, SERVICES, CONTACT) */
  .section-title {
    position: relative;
    display: inline-block;
    font-size: 26px;
    line-height: 1.1;
    text-align: left;
    margin-bottom: 72px;      /* extra space so the square sits between title and text */
  }

  .section-title__square {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid #ffd54a;
    top: 5%;               /* < 100% = overlaps, > 100% = underneath */
    left: 80%;
    transform: translateX(-50%);
    z-index: -1;
  }
  /* ABOUT – spacing & layout */
  .about {
    padding-top: 40px;
  }

  .about__img {
    height: 40vh;
    margin-bottom: 20px;
    transform: none !important;
  }

  .about__img img {
    transform: none !important;
  }

  .about__txt {
    width: 100%;
    padding: 0 18px;       /* keeps the text nicely inside the screen */
  }

  .about__p {
    text-align: left;
  }

  /* BENEFITS – single column, left aligned */
  .benefits {
    padding-bottom: 20px;
  }

  .benefits__list {
    gap: 20px;
  }

  .benefits__item {
    width: 100% !important;
    text-align: left;
    padding: 0 18px;       /* match ABOUT padding */
  }

  .benefits__num {
    display: block;
    text-align: left;
    margin-bottom: 6px;
  }

  /* PORTFOLIO / WORK – full-height panels, clean join from BENEFITS */
  .work {
    padding-top: 60px;     /* reduced from big desktop spacing */
  }

  .work .section-title {
    padding: 0 18px;
  }

  .work__wrapp {
    display: flex;
    flex-direction: column;
    padding: 0;
    row-gap: 0;
    margin-top: 20px;
  }

  .work__item {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .work__item-img {
    width: 100%;
    height: 100%;
  }

  .work__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .work__item-num {
    font-size: 22px;
    left: 18px;
    bottom: 32px;
    top: auto;
    transform: none !important;  /* GSAP can't push it off-screen */
  }
}

/* SERVICES – mobile: arrow on the side, not over the text */
@media (max-width: 600px) {

  .serv {
    padding-top: 40px;
  }

  .serv .content {
    padding: 0 18px;
  }

  .serv__item {
    position: relative;
    padding: 28px 0;
  }

  /* arrow stays on the right side, smaller, still vertically centered */
  .serv__item-arrow {
    width: 40px;
    height: 40px;
    right: -100px;                 /* distance from right edge */
    top: 50%;
    transform: translateY(-50%); /* keep it centered vertically */
  }

  /* leave a clear lane for the arrow to move in */
  .serv__item-txt {
    font-size: 18px;
    padding-right: 100px;         /* space so text never goes under arrow */
    line-height: 1.3;
    text-align: left;
  }
}

/* Smooth scroll to #contact */
html { scroll-behavior: smooth; } /* makes anchor jumps smooth */  /* [web:188] */

/* Make sure header can anchor absolute children */
.header { position: relative; } /* position creates a containing block */ /* [web:179] */

.header__cta{
  position: absolute;
  left: 70px;
  bottom: 85px; /* keep above your moving marquee */
  z-index: 5;
  display: flex;
  gap: 14px;
  align-items: center;
}

.btn-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 18px;
  border-radius: 999px;

  background: #ffd54a;
  color: #0a0a0a;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 14px;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.btn-cta--ghost{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: none;
}

.btn-cta:hover{ filter: brightness(1.05); }
.btn-cta:active{ transform: translateY(1px); }


@media (max-width: 600px){
  .page-home .header{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .page-home .header__cta{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    margin: 50px auto 0;
    transform: translateY(10px);

    width: min(360px, calc(100% - 32px));
    display: flex;
    gap: 12px;
    justify-content: center;
    z-index: 9999;
  }

  
}

@media (max-width: 600px){
  .page-service .header{ position: relative; }

  .page-service .header__cta{
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;

    margin: 0;
    transform: none;
    width: auto;
    justify-content: center;
  }
}

  .btn-cta{
    flex: 1;
    padding: 12px 14px;
    font-size: 13px;
    justify-content: center;
  }
}

.header { position: relative; }


.btn-cta:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Content font (leave headings/buttons as Syne) */
.about__p,
.benefits__p,
.serv__item-text,
.contact__intro,
.contact__form,
.contact__form input,
.contact__form select,
.contact__form textarea,
.contact__form label,
.footer__meta {
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

@media (max-width: 600px) {
  .about__p, .benefits__p, .serv__item-text, .contact__intro, .footer__meta {
    font-size: 18px;
  }
}

/* Keep Services lines in the old font */
.serv__item-text {
  font-family: "Syne", sans-serif;
  font-weight: 800; /* matches your current bold look */
}
.serv__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.site-nav{
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 9999;

  background: transparent;
  border: none;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 18px;
}

.site-nav__brand{
  color: #fff;
  text-decoration: none;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.site-nav__menu{
  display: flex;
  gap: 16px;
}

.site-nav__menu a{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  opacity: 0.85;
}

.site-nav__menu a:hover{ opacity: 1; color:#ffd54a; }


.site-nav__toggle{
  display: none;
  border: 1px solid rgba(255,255,255,.15);
  background: transparent;
  color: #fff;
  padding: 8px 10px;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Anchor offset so headings don't hide under fixed nav */
#about, #benefits, #portfolio, #services, #contact, #contact-form{
  scroll-margin-top: 110px;
}

/* hide the button on desktop */
.site-nav__toggle{ display:none; background:transparent; border:none; padding:10px; }

/* screen-reader only text */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* hamburger icon using pseudo-elements */
.site-nav__burger{
  width: 26px;
  height: 2px;
  background: #fff;
  display: inline-block;
  position: relative;
}
.site-nav__burger::before,
.site-nav__burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 26px;
  height: 2px;
  background:#fff;
}
.site-nav__burger::before{ top:-8px; }
.site-nav__burger::after{ top: 8px; }

@media (max-width: 768px){
  .site-nav{
    right: 16px;
    justify-content: space-between;
    width: calc(100% - 32px);
  }

  .site-nav__toggle{ display:inline-flex; align-items:center; }

  .site-nav__menu{
    display:none;
    position:absolute;
    top: 44px;
    left: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    background: rgba(10,10,10,.92); /* if you truly want none, set transparent */
    padding: 8px 0;
  }

  .site-nav__menu a{
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.06);
  }

  .site-nav__menu.is-open{ display:flex; }
}

/* ===========================
   FINAL NAV OVERRIDE
   =========================== */

.site-nav{
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 99999;

  background: transparent;
  border: none;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-nav__brand{
  color: #fff;
  text-decoration: none;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 6px 22px rgba(0,0,0,.65);
}

/* Desktop links */
.site-nav__menu{
  display: flex;
  gap: 16px;
  align-items: center;
}

.site-nav__menu a{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  opacity: .85;
  text-shadow: 0 6px 22px rgba(0,0,0,.65);
}

.site-nav__menu a:hover{ opacity: 1; color: #ffd54a; }

/* Hide hamburger on desktop */
.site-nav__toggle{
  display: none;
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
}

/* SR-only label (keeps accessibility while showing only icon) */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Hamburger icon */
.site-nav__burger{
  width: 28px;
  height: 2px;
  background: #fff;
  display: inline-block;
  position: relative;
}
.site-nav__burger::before,
.site-nav__burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 28px;
  height: 2px;
  background:#fff;
}
.site-nav__burger::before{ top:-8px; }
.site-nav__burger::after{ top: 8px; }

/* Mobile */
@media (max-width: 768px){
  .site-nav__toggle{ display: inline-flex; align-items: center; }

  /* Hide links until hamburger is opened */
  .site-nav__menu{
    display: none;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;

    /* You said no background: keep it transparent */
    background: transparent;
    border: none;
    padding: 0;
  }

  .site-nav__menu a{
    padding: 12px 0;
  }

  .site-nav__menu.is-open{ display: flex; }
}

/* Anchor offset so sections don't hide under the nav */
#about, #benefits, #portfolio, #services, #contact, #contact-form{
  scroll-margin-top: 110px;
}

.page-legal .header__cta{ display:none !important; }


/* Service page spacing helpers */
.page-service .service-block{
  margin-top: 28px;
}

.page-service .service-block + .service-block{
  margin-top: 46px;
}

.page-service .service-subtitle{
  margin-top: 18px;
  font-size: 18px;
  color: #9e9e9e;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}

.page-service .service-list{
  margin-top: 14px;
  color: #bfbfbf;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 1.8;
}

.page-service .service-list li{
  margin-left: 18px;
  margin-bottom: 8px;
}

/* HOME: Services section text in yellow */
#services .serv__item-txt,
#services .serv__item-text{
  color: #ffd54a;
}

/* Optional: make the bottom divider slightly yellow too */
#services .serv__item{
  border-bottom-color: 53524d (54, 54, 51, 0.25);
}

/* Optional: hover state */
#services .serv__link:hover .serv__item-txt,
#services .serv__link:hover .serv__item-text{
  color: #53524d;
}

#services .serv__item-text { color: #ffd54a; }
#services .serv__slash { color: #9e9e9e; }

/* Services list: yellow text with grey outline */
#services .serv__item-text{
  color: #9e9e9e;
  -webkit-text-stroke: 0px #f7f6f6;
  paint-order: stroke fill; /* harmless if unsupported */
}

/* Keep just the slash grey (from earlier) */
#services .serv__slash{
  color: #ffd54a;
  -webkit-text-stroke: 0;
}