/* =========================================================

   GRUZOMUT.MD — MAIN STYLESHEET

   ========================================================= */



:root {

  --green: #22c55e;

  --green-dark: #16a34a;

  --green-hover: #12833c;

  --green-light: #ecfdf3;



  --black: #111827;

  --dark: #171a1f;

  --dark-soft: #22262d;



  --text: #171717;

  --text-soft: #60646c;

  --border: #e6e7e9;



  --white: #ffffff;

  --background: #f7f8f7;



  --container: 1240px;



  --radius-sm: 12px;

  --radius: 20px;

  --radius-lg: 28px;



  --shadow: 0 12px 35px rgba(0, 0, 0, 0.08);

  --transition: 180ms ease;

}





/* =========================================================

   RESET

   ========================================================= */



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;



  font-family:

    Inter,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    Roboto,

    Helvetica,

    Arial,

    sans-serif;



  color: var(--text);

  background: var(--white);



  line-height: 1.6;



  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



body.menu-open {

  overflow: hidden;

}



img {

  display: block;

  max-width: 100%;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

textarea,

select {

  font: inherit;

}



button {

  cursor: pointer;

}



h1,

h2,

h3,

p {

  margin-top: 0;

}



h1,

h2,

h3 {

  line-height: 1.1;

  letter-spacing: -0.03em;

}



h1 {

  margin-bottom: 24px;

  font-size: clamp(2.7rem, 5.2vw, 5.3rem);

}



h2 {

  margin-bottom: 20px;

  font-size: clamp(2rem, 3.4vw, 3.6rem);

}



h3 {

  font-size: 1.35rem;

}





/* =========================================================

   GLOBAL

   ========================================================= */



.container {

  width: min(calc(100% - 40px), var(--container));

  margin-inline: auto;

}



.section {

  padding: 110px 0;

}



.section-heading {

  max-width: 720px;

  margin-bottom: 48px;

}



.section-heading p:last-child {

  color: var(--text-soft);

  font-size: 1.1rem;

}



.eyebrow {

  display: inline-block;



  margin-bottom: 14px;



  color: var(--green-dark);



  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.small-note {

  color: var(--text-soft);

  font-size: 0.9rem;

}





/* =========================================================

   BUTTONS

   ========================================================= */



.button {

  display: inline-flex;



  min-height: 50px;

  padding: 12px 22px;



  align-items: center;

  justify-content: center;



  border: 1px solid transparent;

  border-radius: var(--radius-sm);



  font-weight: 750;

  line-height: 1;



  transition:

    transform var(--transition),

    background var(--transition),

    border-color var(--transition);

}



.button:hover {

  transform: translateY(-2px);

}



.button-primary {

  color: var(--white);

  background: var(--green-dark);

}



.button-primary:hover {

  background: var(--green-hover);

}



.button-secondary {

  color: var(--text);

  background: var(--white);

  border-color: #d5d7da;

}



.button-secondary:hover {

  border-color: #aeb2b7;

}



.button-light {

  color: var(--black);

  background: var(--white);

}



.button-large {

  min-height: 56px;

  padding: 16px 28px;

  border-radius: 14px;

}





/* =========================================================

   HEADER

   ========================================================= */



.site-header {

  position: sticky;

  z-index: 1000;

  top: 0;



  background: rgba(255, 255, 255, 0.94);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);



  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}



.header-inner {

  display: flex;



  min-height: 82px;



  align-items: center;

  justify-content: space-between;



  gap: 30px;

}



.logo {

  display: flex;

  flex-shrink: 0;

  align-items: center;

}



.logo img {

  width: auto;

  max-width: 175px;

  height: 50px;



  object-fit: contain;

}



.desktop-nav {

  display: flex;



  align-items: center;

  justify-content: center;



  gap: 30px;

}



.desktop-nav a,

.language-link {

  position: relative;



  font-size: 0.96rem;

  font-weight: 650;



  transition: color var(--transition);

}



.desktop-nav a:hover,

.language-link:hover {

  color: var(--green-dark);

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 15px;

}



.header-phone {

  white-space: nowrap;

}



/* Numărul separat pentru mobil */

.mobile-header-phone {

  display: none;

}



/* Hamburger */

.mobile-menu-button {

  display: none;



  width: 44px;

  height: 44px;



  padding: 10px;



  flex-shrink: 0;



  background: transparent;

  border: 0;

}



.mobile-menu-button span {

  display: block;



  width: 24px;

  height: 2px;



  margin: 5px 0;



  background: var(--black);

  border-radius: 2px;



  transition:

    transform 0.2s ease,

    opacity 0.2s ease;

}



/* Meniul mobil nu există vizual pe desktop */

.mobile-nav {

  display: none;

}





/* =========================================================

   HERO

   ========================================================= */



.hero {

  overflow: hidden;



  padding: 72px 0 90px;



  background:

    radial-gradient(

      circle at 15% 30%,

      rgba(34, 197, 94, 0.11),

      transparent 33%

    ),

    #f7faf7;

}



.hero-grid {

  display: grid;



  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.92fr);



  align-items: center;



  gap: 70px;

}



.hero-description {

  max-width: 650px;



  margin-bottom: 30px;



  color: var(--text-soft);



  font-size: 1.18rem;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;



  gap: 12px;



  margin-bottom: 32px;

}



.hero-benefits {

  display: flex;

  flex-wrap: wrap;



  gap: 12px 25px;



  margin: 0;

  padding: 0;



  list-style: none;



  color: #3f454c;



  font-size: 0.94rem;

  font-weight: 600;

}



.hero-benefits li::before {

  content: "✓";



  margin-right: 8px;



  color: var(--green-dark);



  font-weight: 900;

}



.hero-media {

  position: relative;

}



.hero-media::before {

  content: "";



  position: absolute;

  z-index: 0;



  right: -25px;

  bottom: -25px;



  width: 75%;

  height: 75%;



  border-radius: var(--radius-lg);



  background: var(--green);

}



.hero-media img {

  position: relative;

  z-index: 1;



  width: 100%;

  aspect-ratio: 4 / 3;



  object-fit: cover;



  border-radius: var(--radius-lg);



  box-shadow: var(--shadow);

}





/* =========================================================

   SERVICE CARDS

   ========================================================= */



.services-section {

  background: var(--white);

}



.service-grid {

  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 24px;

}



.service-card {

  overflow: hidden;



  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius);



  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



.service-card:hover {

  transform: translateY(-5px);



  border-color: #ccd0d4;



  box-shadow: var(--shadow);

}



.service-card img {

  width: 100%;

  aspect-ratio: 16 / 10;



  object-fit: cover;

}



.card-content {

  padding: 25px;

}



.card-content h3 {

  margin-bottom: 10px;

}



.card-content p {

  min-height: 50px;



  margin-bottom: 18px;



  color: var(--text-soft);

}



.card-content span {

  color: var(--green-dark);



  font-weight: 750;

}





/* =========================================================

   SPLIT SECTIONS

   ========================================================= */



.split-section,

.packing-section {

  background: var(--background);

}



.split-grid {

  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  align-items: center;



  gap: 75px;

}



.split-media img {

  width: 100%;

  aspect-ratio: 4 / 3;



  object-fit: cover;



  border-radius: var(--radius-lg);

}



.split-content > p:not(.eyebrow):not(.small-note) {

  max-width: 620px;



  color: var(--text-soft);



  font-size: 1.08rem;

}



.link-list {

  display: grid;



  margin: 30px 0;

}



.link-list a {

  display: flex;



  padding: 16px 0;



  align-items: center;

  justify-content: space-between;



  border-bottom: 1px solid var(--border);



  font-weight: 700;



  transition: color var(--transition);

}



.link-list a:first-child {

  border-top: 1px solid var(--border);

}



.link-list a:hover {

  color: var(--green-dark);

}





/* =========================================================

   VEHICLES

   ========================================================= */



.vehicles-section {

  color: var(--white);

  background: var(--dark);

}



.section-heading-light p:last-child {

  color: #adb3bb;

}



.vehicles-section .eyebrow {

  color: #5ee487;

}



.vehicle-grid {

  display: grid;



  grid-template-columns: repeat(4, minmax(0, 1fr));



  gap: 20px;

}



.vehicle-card {

  overflow: hidden;



  color: var(--white);



  background: var(--dark-soft);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: var(--radius);



  transition:

    transform var(--transition),

    border-color var(--transition);

}



.vehicle-card:hover {

  transform: translateY(-5px);



  border-color: rgba(94, 228, 135, 0.55);

}



.vehicle-card img {

  width: 100%;

  aspect-ratio: 16 / 10;



  object-fit: cover;

}



.vehicle-card-content {

  padding: 23px;

}



.vehicle-title {

  display: flex;



  align-items: baseline;

  justify-content: space-between;



  gap: 10px;

}



.vehicle-title h3 {

  margin-bottom: 14px;

}



.vehicle-title strong {

  color: #67e88f;



  font-size: 1.1rem;

}



.vehicle-card ul {

  margin: 0 0 22px;

  padding: 0;



  list-style: none;



  color: #bec3ca;



  font-size: 0.92rem;

}



.vehicle-card li {

  padding: 5px 0;

}



.vehicle-card a {

  color: #6aea92;



  font-weight: 750;

}



.section-action {

  margin-top: 38px;



  text-align: center;

}





/* =========================================================

   HAMALI

   ========================================================= */



.price-highlight {

  display: flex;

  flex-wrap: wrap;



  margin: 30px 0 5px;



  align-items: baseline;



  gap: 8px;

}



.price-highlight strong {

  color: var(--green-dark);



  font-size: clamp(2.2rem, 4vw, 3.5rem);

  line-height: 1;

}



.price-highlight span {

  color: var(--text-soft);



  font-weight: 650;

}





/* =========================================================

   PROCESS

   ========================================================= */



.process-section {

  background: var(--background);

}



.process-grid {

  display: grid;



  grid-template-columns: repeat(4, minmax(0, 1fr));



  gap: 20px;



  margin: 0;

  padding: 0;



  list-style: none;

}



.process-card {

  min-height: 230px;



  padding: 30px;



  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius);

}



.process-number {

  display: block;



  margin-bottom: 38px;



  color: var(--green-dark);



  font-size: 0.9rem;

  font-weight: 850;

}



.process-card h3 {

  margin-bottom: 12px;

}



.process-card p {

  margin-bottom: 0;



  color: var(--text-soft);

}





/* =========================================================

   PACKING / FEATURES

   ========================================================= */



.feature-list {

  display: grid;



  margin: 28px 0;

  padding: 0;



  gap: 10px;



  list-style: none;

}



.feature-list li::before {

  content: "✓";



  display: inline-flex;



  width: 24px;

  height: 24px;



  margin-right: 10px;



  align-items: center;

  justify-content: center;



  color: var(--green-dark);

  background: var(--green-light);

  border-radius: 50%;



  font-size: 0.8rem;

  font-weight: 900;

}



.inline-actions {

  display: flex;

  flex-wrap: wrap;



  align-items: center;



  gap: 22px;

}



.text-link {

  color: var(--green-dark);



  font-weight: 750;

}





/* =========================================================

   BUSINESS

   ========================================================= */



.business-section {

  background: var(--white);

}





/* =========================================================

   COVERAGE

   ========================================================= */



.coverage-section {

  background: #eff8f1;

}



.coverage-inner {

  display: grid;



  grid-template-columns: 1.15fr 0.85fr;



  align-items: center;



  gap: 80px;

}



.coverage-inner > div:first-child p:last-child {

  max-width: 670px;



  color: var(--text-soft);



  font-size: 1.08rem;

}



.coverage-prices {

  overflow: hidden;



  background: var(--white);

  border: 1px solid #dbe7dd;

  border-radius: var(--radius);

}



.coverage-prices div {

  display: flex;



  padding: 18px 22px;



  align-items: center;

  justify-content: space-between;



  gap: 20px;



  border-bottom: 1px solid var(--border);

}



.coverage-prices div:last-child {

  border-bottom: 0;

}



.coverage-prices span {

  color: var(--text-soft);

}



.coverage-prices strong {

  white-space: nowrap;

}





/* =========================================================

   FINAL CTA

   ========================================================= */



.final-cta {

  padding: 85px 0;



  color: var(--white);



  background: var(--green-dark);

}



.final-cta .eyebrow {

  color: #caffd9;

}



.final-cta h2 {

  margin-bottom: 12px;

}



.final-cta p:last-child {

  margin-bottom: 0;



  color: rgba(255, 255, 255, 0.83);

}



.final-cta-inner {

  display: flex;



  align-items: center;

  justify-content: space-between;



  gap: 50px;

}



.final-cta-action {

  display: flex;



  flex-direction: column;

  align-items: flex-end;



  gap: 14px;

}



.final-phone {

  color: var(--white);



  font-size: clamp(1.8rem, 3vw, 2.7rem);

  font-weight: 850;

  line-height: 1;

}





/* =========================================================

   FOOTER

   ========================================================= */



.site-footer {

  padding: 70px 0 25px;



  color: #d2d5da;



  background: #101215;

}



.footer-grid {

  display: grid;



  grid-template-columns: 1.5fr 1fr 1fr 1fr;



  gap: 55px;

}



.footer-brand img {

  width: auto;

  max-width: 180px;

  height: 54px;



  margin-bottom: 22px;



  object-fit: contain;

}



.footer-brand p {

  max-width: 330px;



  color: #989da5;

}



.footer-column {

  display: flex;



  flex-direction: column;



  align-items: flex-start;



  gap: 11px;

}



.footer-column h3 {

  margin-bottom: 8px;



  color: var(--white);



  font-size: 1rem;

}



.footer-column a {

  color: #b7bbc1;



  transition: color var(--transition);

}



.footer-column a:hover {

  color: #6aea92;

}



.footer-contact p {

  margin: 6px 0;



  color: #989da5;



  line-height: 1.5;

}



.footer-column .footer-phone {

  color: #6aea92;



  font-size: 1.2rem;

  font-weight: 800;

}



.footer-bottom {

  display: flex;



  margin-top: 60px;

  padding-top: 24px;



  justify-content: space-between;



  gap: 20px;



  color: #747982;



  border-top: 1px solid rgba(255, 255, 255, 0.08);



  font-size: 0.86rem;

}



.footer-bottom p {

  margin: 0;

}





/* =========================================================

   MOBILE CALL BAR

   ========================================================= */



.mobile-call-bar {

  display: none;

}





/* =========================================================

   ACCESSIBILITY

   ========================================================= */



a:focus-visible,

button:focus-visible {

  outline: 3px solid rgba(34, 197, 94, 0.4);

  outline-offset: 3px;

}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1050px) {



  .desktop-nav {

    gap: 18px;

  }



  .header-phone {

    display: none;

  }



  .hero-grid {

    grid-template-columns: 1fr 0.9fr;

    gap: 40px;

  }



  .vehicle-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .process-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .footer-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}





/* =========================================================

   MOBILE — FINAL

   ========================================================= */



@media (max-width: 768px) {



  body {

    overflow-x: hidden;



    /* spațiu pentru butonul permanent de jos */

    padding-bottom: 78px;

  }



  .container {

    width: 100%;

    max-width: none;



    padding-left: 20px;

    padding-right: 20px;

  }



  .section {

    padding: 64px 0;

  }





  /* =======================================================

     MOBILE HEADER

     ======================================================= */



  .site-header {

    position: sticky;

    z-index: 10000;



    top: 0;



    background: #ffffff;

  }



  .header-inner {

    display: flex;



    min-height: 74px;



    padding-top: 7px;

    padding-bottom: 7px;



    align-items: center;

    justify-content: space-between;



    gap: 8px;

  }



  .logo {

    flex-shrink: 0;

  }



  .logo img {

    display: block;



    width: 115px;

    max-width: 115px;

    height: auto;

  }



  .desktop-nav,

  .language-link,

  .header-phone {

    display: none;

  }



  .header-actions {

    display: flex;



    margin-left: auto;



    align-items: center;

    justify-content: flex-end;



    gap: 8px;

  }



  /* Numărul vizibil permanent sus */

  .mobile-header-phone {

    display: inline-flex;



    align-items: center;

    justify-content: center;



    margin-right: 5px;



    color: var(--green-dark);



    font-size: 13px;

    font-weight: 850;

    line-height: 1;



    white-space: nowrap;

  }



  /* Hamburger */

  .mobile-menu-button {

    display: flex;



    width: 44px;

    height: 44px;



    margin: 0;

    padding: 10px;



    flex-direction: column;

    flex-shrink: 0;



    align-items: center;

    justify-content: center;



    gap: 5px;



    border: 0;

    background: transparent;

  }



  .mobile-menu-button span {

    display: block;



    width: 24px;

    height: 2px;



    margin: 0;



    background: #111111;

    border-radius: 2px;

  }





  /* =======================================================

     HERO

     ======================================================= */



  .hero {

    padding: 32px 0 42px;

  }



  .hero-grid {

    display: grid;



    grid-template-columns: 1fr;



    gap: 28px;

  }



  .hero-content {

    order: 1;

  }



  .hero-media {

    order: 2;



    width: 100%;

  }



  .hero .eyebrow {

    display: block;



    margin-bottom: 14px;



    font-size: 11px;

    line-height: 1.4;

    letter-spacing: 0.12em;

  }



  .hero h1 {

    display: block;



    max-width: 100%;



    margin: 0 0 18px;



    font-size: clamp(36px, 9.5vw, 44px);

    line-height: 1.01;

    letter-spacing: -0.04em;

  }



  .hero-description {

    display: block;



    max-width: 100%;



    margin: 0 0 22px;



    font-size: 15px;

    line-height: 1.55;

  }



  .hero-actions {

    display: flex;



    margin-bottom: 22px;



    flex-direction: column;



    gap: 10px;

  }



  .hero-actions .button {

    width: 100%;

    min-height: 52px;

  }



  .hero-benefits {

    display: grid;



    margin: 0;



    gap: 9px;

  }



  .hero-benefits li {

    font-size: 14px;

    line-height: 1.4;

  }



  .hero-media {

    overflow: hidden;



    border-radius: 22px;

  }



  .hero-media::before {

    display: none;

  }



  .hero-media img {

    width: 100%;

    height: 360px;

    aspect-ratio: auto;



    object-fit: cover;

    object-position: center 48%;



    border-radius: 22px;

  }





  /* =======================================================

     SECTION TITLES

     ======================================================= */



  .section-heading {

    margin-bottom: 28px;

  }



  .section-heading h2,

  .split-content h2,

  .coverage-inner h2 {

    font-size: 36px;

    line-height: 1.03;

    letter-spacing: -0.035em;

  }



  .section-heading p,

  .split-content > p,

  .coverage-inner p {

    font-size: 15px;

    line-height: 1.55;

  }





  /* =======================================================

     SERVICES

     ======================================================= */



  .service-grid {

    grid-template-columns: 1fr;



    gap: 18px;

  }



  .service-card {

    width: 100%;

  }



  .service-card img {

    width: 100%;

    height: 240px;



    aspect-ratio: auto;



    object-fit: cover;

  }



  .card-content {

    padding: 22px;

  }



  .card-content h3 {

    font-size: 22px;

  }



  .card-content p {

    min-height: 0;

  }





  /* =======================================================

     SPLIT SECTIONS

     ======================================================= */



  .split-grid {

    grid-template-columns: 1fr;



    gap: 34px;

  }



  .split-media,

  .split-content {

    width: 100%;

  }



  .split-media img {

    width: 100%;

    height: 390px;



    aspect-ratio: auto;



    object-fit: cover;



    border-radius: 22px;

  }



  .split-content {

    padding: 0;

  }





  /* =======================================================

     VEHICLES

     ======================================================= */



  .vehicles-section {

    padding-top: 64px;

    padding-bottom: 64px;

  }



  .vehicle-grid {

    grid-template-columns: 1fr;



    gap: 18px;

  }



  .vehicle-card {

    width: 100%;

  }



  .vehicle-card img {

    width: 100%;

    height: 250px;



    aspect-ratio: auto;



    object-fit: cover;

  }



  .vehicle-card-content {

    padding: 22px;

  }



  .vehicle-title h3 {

    font-size: 22px;

  }



  .section-action {

    margin-top: 30px;

  }





  /* =======================================================

     HAMALI

     ======================================================= */



  .price-highlight {

    display: flex;



    flex-wrap: wrap;

    align-items: baseline;



    gap: 5px;

  }



  .price-highlight strong {

    font-size: 44px;

  }





  /* =======================================================

     PROCESS

     ======================================================= */



  .process-grid {

    grid-template-columns: 1fr;



    gap: 14px;

  }



  .process-card {

    min-height: auto;



    padding: 24px;

  }



  .process-number {

    margin-bottom: 25px;

  }





  /* =======================================================

     COVERAGE

     ======================================================= */



  .coverage-inner {

    grid-template-columns: 1fr;



    gap: 30px;

  }



  .coverage-prices {

    width: 100%;

  }





  /* =======================================================

     FINAL CTA

     ======================================================= */



  .final-cta {

    padding: 55px 0;

  }



  .final-cta-inner {

    display: grid;



    grid-template-columns: 1fr;



    gap: 30px;

  }



  .final-cta h2 {

    font-size: 38px;

    line-height: 1.02;

  }



  .final-cta-action {

    width: 100%;



    align-items: flex-start;



    text-align: left;

  }



  .final-phone {

    font-size: 34px;

  }



  .final-cta-action .button {

    width: 100%;

  }





  /* =======================================================

     FOOTER

     ======================================================= */



  .site-footer {

    padding-bottom: 30px;

  }



  .footer-grid {

    grid-template-columns: 1fr 1fr;



    gap: 35px 20px;

  }



  .footer-brand {

    grid-column: 1 / -1;

  }



  .footer-brand img {

    width: 125px;

    height: auto;

  }



  .footer-bottom {

    margin-bottom: 0;



    flex-direction: column;

    align-items: flex-start;



    gap: 8px;

  }





  /* =======================================================

     PERMANENT PHONE BAR

     ======================================================= */



  .mobile-call-bar {

    position: fixed;

    z-index: 20000;



    right: 12px;

    bottom: 10px;

    left: 12px;



    display: flex;



    min-height: 56px;

    padding: 0 18px;



    align-items: center;

    justify-content: center;



    gap: 7px;



    color: #ffffff;

    background: var(--green-dark);



    border-radius: 14px;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);



    font-size: 15px;

    font-weight: 800;



    text-decoration: none;

  }



  .mobile-call-bar:active {

    transform: scale(0.98);

  }

}





/* =========================================================

   SMALL MOBILE

   ========================================================= */



@media (max-width: 430px) {



  .container {

    padding-left: 16px;

    padding-right: 16px;

  }



  .hero {

    padding-top: 30px;

  }



  .hero h1 {

    font-size: 37px;

  }



  .hero-description {

    font-size: 15px;

  }



  .hero-media img {

    height: 340px;

  }



  .section {

    padding: 54px 0;

  }



  .section-heading h2,

  .split-content h2,

  .coverage-inner h2 {

    font-size: 32px;

  }



  .service-card img,

  .vehicle-card img {

    height: 220px;

  }



  .split-media img {

    height: 340px;

  }



  .footer-grid {

    grid-template-columns: 1fr;

  }



  .footer-brand {

    grid-column: auto;

  }



  .final-cta h2 {

    font-size: 34px;

  }

}





/* =========================================================

   VERY SMALL MOBILE

   ========================================================= */



@media (max-width: 380px) {



  .container {

    padding-left: 15px;

    padding-right: 15px;

  }



  .hero h1 {

    font-size: 34px;

  }



  .mobile-header-phone {

    margin-right: 2px;



    font-size: 12px;

  }



  .mobile-call-bar {

    right: 8px;

    bottom: 8px;

    left: 8px;

  }

}





/* =========================================================

   REDUCED MOTION

   ========================================================= */



@media (prefers-reduced-motion: reduce) {



  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

  }

}
/* =========================================================
   MOBILE NAVIGATION — FINAL
   ========================================================= */

@media (max-width: 768px) {

  .site-header {
    position: sticky;
    top: 0;
    z-index: 3000;
    overflow: visible;
  }

  .mobile-nav {
    display: none;
  }

  .mobile-nav.is-open {
    position: fixed;
    top: 74px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    height: calc(100dvh - 74px);

    padding: 8px 20px calc(90px + env(safe-area-inset-bottom));

    overflow-y: auto;
    overscroll-behavior: contain;

    background: #ffffff;
  }

  .mobile-nav.is-open > a {
    display: flex;

    width: 100%;
    min-height: 58px;
    padding: 0;

    align-items: center;

    color: #111111;
    border-bottom: 1px solid #e7e7e7;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .mobile-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.menu-open .mobile-menu-button span:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .mobile-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-call-bar {
    z-index: 4000;
  }
}

/* =========================================================
   INNER PAGES
   ========================================================= */
.subhero{padding:46px 0 76px;background:#f7faf7}.breadcrumbs{display:flex;gap:9px;align-items:center;margin-bottom:38px;color:var(--text-soft);font-size:.9rem}.breadcrumbs a:hover{color:var(--green-dark)}.subhero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);gap:64px;align-items:center}.subhero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}.narrow-copy{max-width:900px}.lead-copy{font-size:1.15rem;color:var(--text-soft)}.info-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.info-strip>*{padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:#fff}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.quick-card{display:flex;min-height:92px;padding:24px;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:var(--radius);background:#fff;transition:transform var(--transition),box-shadow var(--transition)}.quick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.quick-card span{color:var(--green-dark);font-size:1.5rem}
@media(max-width:768px){.subhero{padding:24px 0 48px}.breadcrumbs{margin-bottom:24px}.subhero-grid{grid-template-columns:1fr;gap:28px}.subhero-grid h1{font-size:clamp(36px,9.5vw,44px)}.subhero-media img{aspect-ratio:4/3}.quick-grid{grid-template-columns:1fr}.info-strip{align-items:flex-start;flex-direction:column}.site-footer{padding-bottom:100px}}


/* =========================================================
   PRODUCT CATALOG + TRANSPORT PRICING
   ========================================================= */
.catalog-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px}.catalog-heading h2{margin-bottom:10px}.catalog-heading p{max-width:720px;margin-bottom:0;color:var(--text-soft)}.product-catalog-soft{background:#fbf8f3}.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.shop-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-card{display:grid;grid-template-columns:96px minmax(0,1fr) auto;min-height:136px;padding:20px;align-items:center;gap:18px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.04)}.shop-card img{width:96px;height:96px;object-fit:contain;border-radius:14px;background:#fbf7f1}.shop-card h3{margin:0 0 10px;font-size:1.08rem}.shop-tags{display:flex;flex-wrap:wrap;gap:7px}.shop-tags span{padding:5px 9px;color:var(--text-soft);background:#f5f6f7;border-radius:999px;font-size:.82rem;font-weight:650}.shop-price{text-align:right;white-space:nowrap}.shop-price strong{display:block;color:#f28a16;font-size:1.55rem;line-height:1.1}.shop-price span{color:#8a8f96;font-size:.84rem}.transport-vehicle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.transport-vehicle-card{overflow:hidden;background:var(--dark-soft);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius)}.transport-vehicle-card img{width:100%;height:190px;object-fit:cover;background:#fff}.transport-vehicle-body{padding:22px}.transport-vehicle-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:18px}.transport-vehicle-title h3{margin:0;color:#fff}.transport-vehicle-title>strong{color:#67e88f;font-size:1.05rem}.vehicle-rate{padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}.vehicle-rate span,.vehicle-rate small{display:block;color:#aeb5bd}.vehicle-rate strong{display:block;margin:2px 0;color:#fff;font-size:1.08rem}.transport-vehicle-card .text-link{display:inline-block;margin-top:14px;color:#6aea92}.rate-note{max-width:850px;margin:28px 0 0;color:#adb3bb;font-size:.92rem}
@media(max-width:1050px){.transport-vehicle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.catalog-heading{align-items:flex-start;flex-direction:column}.shop-grid,.shop-grid-3,.transport-vehicle-grid{grid-template-columns:1fr}.shop-card{grid-template-columns:78px minmax(0,1fr) auto;padding:16px;gap:13px}.shop-card img{width:78px;height:78px}.shop-price strong{font-size:1.25rem}.transport-vehicle-card img{height:220px}}
@media(max-width:430px){.shop-card{grid-template-columns:70px minmax(0,1fr);}.shop-card img{width:70px;height:70px}.shop-price{grid-column:2;text-align:left}.shop-price strong{display:inline;margin-right:5px}}