/* ============================================================
   Global Horizon Shipping — Website Styles
   Converted from the approved design mockup (AS-IS)
   Fonts: Avenir → Nunito Sans | Minion → EB Garamond | Body: Arial
   ============================================================ */

:root{
  --blue:        #3070c0;
  --blue-dark:   #245c9f;
  --maroon:      #801030;
  --ink:         #1d1d1b;
  --dark:        #242221;
  --darker:      #100f0d;
  --band:        #e7e7e6;
  --grey-text:   #c9c8c6;
  --body-text:   #2b2b2b;
  --line:        #d8d8d6;
  --white:       #ffffff;

  --font-sans:  'Nunito Sans', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --font-serif: 'EB Garamond', 'Minion Pro', Georgia, serif;
  --font-body:  Arial, Helvetica, sans-serif;

  --container: 1560px;
  --header-h: 96px;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--body-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{
  width: min(var(--container), calc(100% - 5rem));
  margin-inline: auto;
}
@media (max-width:640px){
  .container{ width: calc(100% - 2.5rem); }
}

/* ------------------------------------------------------------
   Scroll-reveal system
   ------------------------------------------------------------ */
.reveal{
  opacity:0;
  transform: translateY(38px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

.reveal-left{ transform: translateX(-46px); }
.reveal-right{ transform: translateX(46px); }
.reveal-left.is-visible,
.reveal-right.is-visible{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-bg{ animation:none !important; }
}

/* ------------------------------------------------------------
   Header / Navigation
   ------------------------------------------------------------ */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display:flex;
  align-items:center;
  transition: background .45s var(--ease-soft), box-shadow .45s var(--ease-soft), height .45s var(--ease-soft);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.brand{ display:inline-flex; align-items:center; flex-shrink:0; }
.brand img{
  height:74px; width:auto;
  filter: drop-shadow(0 1px 6px rgba(8,20,40,.25));
  transition: height .45s var(--ease-soft);
}

.main-nav{ display:flex; align-items:center; gap: clamp(1.5rem, 3.4vw, 4.4rem); }
.main-nav a{
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .14em;
  color: var(--white);
  text-transform: uppercase;
  position: relative;
  padding: .5rem 0;
  transition: color .3s;
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a.active::after{ transform: scaleX(1); }

/* search */
.search{ display:flex; align-items:center; }
.search-toggle{
  background:none; border:0; cursor:pointer;
  color:var(--white);
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  transition: background .3s, color .3s, transform .3s;
}
.search-toggle:hover{ background: rgba(255,255,255,.14); transform: scale(1.08); }
.search-field{
  width:0; opacity:0;
  border:0; border-bottom:2px solid var(--white);
  background:transparent;
  color:var(--white);
  font-family: var(--font-sans);
  font-size:.95rem; letter-spacing:.06em;
  padding:.35rem .2rem;
  outline:none;
  transition: width .45s var(--ease-out), opacity .3s;
}
.search.open .search-field{ width:190px; opacity:1; }
.search-field::placeholder{ color: rgba(255,255,255,.65); }

/* scrolled state */
.site-header.scrolled{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(10,25,50,.12);
  height: 76px;
}
.site-header.scrolled .brand img{ height:52px; filter:none; }
.site-header.scrolled .main-nav a{ color: var(--ink); }
.site-header.scrolled .search-toggle{ color: var(--ink); }
.site-header.scrolled .search-toggle:hover{ background: rgba(36,34,33,.08); }
.site-header.scrolled .search-field{ border-color: var(--ink); color: var(--ink); }
.site-header.scrolled .search-field::placeholder{ color: rgba(0,0,0,.45); }

/* mobile nav */
.nav-toggle{ display:none; }
@media (max-width: 900px){
  .nav-toggle{
    display:block; background:none; border:0; cursor:pointer;
    width:44px; height:44px; position:relative; z-index:130;
  }
  .nav-toggle span{
    display:block; width:26px; height:2.5px; margin:5px auto;
    background: var(--white); transition:.35s var(--ease-out);
  }
  .site-header.scrolled .nav-toggle span,
  .site-header.nav-open .nav-toggle span{ background: var(--ink); }
  .site-header.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-header.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

  .main-nav{
    position: fixed; inset:0;
    background: rgba(255,255,255,.98);
    flex-direction: column;
    justify-content: center;
    gap: 2.4rem;
    transform: translateY(-102%);
    transition: transform .5s var(--ease-out);
    z-index:120;
  }
  .site-header.nav-open .main-nav{ transform:none; }
  .main-nav a{ color: var(--ink) !important; font-size:1.15rem; }
  .search{ display:none; }
}

/* ------------------------------------------------------------
   Hero — homepage
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height: clamp(560px, 48.7vw, 940px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background-size:cover;
  background-position:center;
  animation: heroZoom 18s var(--ease-soft) forwards;
}
@keyframes heroZoom{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}
.hero--home .hero-bg{ background-image:url('../images/hero-home.jpg'); }

.hero-title{
  font-family: var(--font-sans);
  font-weight: 900;
  color: var(--white);
  font-size: clamp(1.9rem, 3.65vw, 4.4rem);
  line-height: 1.22;
  max-width: 15em;
  padding-left: 2.2rem;
  border-left: 3px solid rgba(255,255,255,.55);
  text-shadow: 0 3px 22px rgba(4,16,38,.45);
  margin-top: 2.5rem;
}
.hero-title .line{
  display:block;
  overflow:hidden;
}
.hero-title .line > span{
  display:block;
  transform: translateY(110%);
  animation: lineUp 1s var(--ease-out) forwards;
  animation-delay: calc(.25s + var(--i) * .16s);
}
@keyframes lineUp{ to{ transform:none; } }

/* scroll hint */
.scroll-hint{
  position:absolute; left:50%; bottom:2rem;
  transform:translateX(-50%);
  width:26px; height:44px;
  border:2px solid rgba(255,255,255,.7);
  border-radius:14px;
  opacity:.85;
}
.scroll-hint::before{
  content:''; position:absolute; left:50%; top:8px;
  width:4px; height:9px; border-radius:2px;
  background:#fff; transform:translateX(-50%);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{
  0%{ opacity:1; transform:translate(-50%,0); }
  70%{ opacity:0; transform:translate(-50%,14px); }
  100%{ opacity:0; }
}

/* ------------------------------------------------------------
   Intro section (faded tanker backdrop)
   ------------------------------------------------------------ */
.intro{
  position:relative;
  padding: clamp(4rem, 7vw, 7.5rem) 0 clamp(4.5rem, 7vw, 8rem);
  text-align:center;
  overflow:hidden;
}
.intro::before{
  content:'';
  position:absolute; inset:0;
  background:url('../images/bg-ship-faded.png') center 32%/cover no-repeat;
  opacity:.8;
  z-index:-1;
}
.intro h1, .intro-heading{
  font-family: var(--font-sans);
  font-weight: 900;
  color: var(--blue);
  font-size: clamp(1.6rem, 2.3vw, 2.75rem);
  line-height:1.35;
}
.rule{
  width:86px; height:2px;
  background: var(--maroon);
  margin: 2.2rem auto;
  position:relative;
  overflow:hidden;
}
.rule::after{
  content:'';
  position:absolute; inset:0;
  background:#fff;
  transform:translateX(0);
  transition: transform 1.1s var(--ease-out) .3s;
}
.is-visible .rule::after,
.rule.is-visible::after{ transform:translateX(101%); }

.intro p{
  font-size: clamp(1rem, 1.12vw, 1.34rem);
  line-height:1.55;
  text-align:justify;
  text-align-last:center;
  max-width: 1500px;
  margin: 0 auto 1.6rem;
  color:#222;
}
.intro .tagline{
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--maroon);
  letter-spacing: .12em;
  font-size: clamp(1.05rem, 1.6vw, 1.9rem);
  margin: 2.8rem 0 2.9rem;
}
.cta-row{ display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; }

.btn{
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: .98rem;
  letter-spacing:.1em;
  text-transform: uppercase;
  padding: .95rem 2.4rem;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s, color .3s;
}
.btn .arr{ transition: transform .3s var(--ease-out); font-weight:800; }
.btn:hover .arr{ transform: translateX(5px); }
.btn-solid{
  background: var(--blue); color:#fff;
  box-shadow: 0 6px 20px rgba(48,112,192,.35);
}
.btn-solid:hover{
  background: var(--blue-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(48,112,192,.42);
}
.btn-outline{
  background:#fff; color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-outline:hover{
  background: var(--blue); color:#fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(48,112,192,.35);
}

/* ------------------------------------------------------------
   Section label (WHO WE ARE, GLOBAL COVERAGE, …)
   ------------------------------------------------------------ */
.label{
  font-family: var(--font-sans);
  font-weight: 900;
  color: var(--blue);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.35vw, 1.6rem);
  margin-bottom: 1.9rem;
}

/* ------------------------------------------------------------
   Who we are — split photo / text
   ------------------------------------------------------------ */
.split{
  display:grid;
  grid-template-columns: 49.5% 1fr;
  align-items:stretch;
}
.split-media{ overflow:hidden; }
.split-media img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease-soft);
}
.split-media:hover img{ transform: scale(1.05); }
.split-body{
  padding: clamp(2.5rem, 4.5vw, 5.5rem) clamp(1.6rem, 5.5vw, 8.5rem);
  align-self:center;
}
.split-body p{
  font-size: clamp(.98rem, 1.1vw, 1.32rem);
  line-height:1.55;
  text-align:justify;
  margin-bottom:1.5rem;
  color:#222;
}
.split-body p:last-child{ margin-bottom:0; }
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
  .split-media{ max-height: 430px; }
}

/* ------------------------------------------------------------
   Why choose GHS — dark section
   ------------------------------------------------------------ */
.why{
  background: var(--dark);
  color: var(--white);
  padding: clamp(4rem, 6.5vw, 7rem) 0;
}
.why-grid{
  display:grid;
  grid-template-columns: minmax(280px, 5fr) 9fr;
  gap: clamp(2.5rem, 4.5vw, 6rem);
}
.why-intro .label{ margin-bottom:2.2rem; }
.why-intro h2{
  font-family: var(--font-serif);
  font-weight:600;
  font-size: clamp(1.75rem, 2.5vw, 3rem);
  line-height:1.32;
}
.feature-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.6rem, 3.8vw, 4.6rem) clamp(2.2rem, 4vw, 5.5rem);
  border-left: 1px solid rgba(255,255,255,.22);
  padding-left: clamp(2.2rem, 4vw, 5.5rem);
}
.feature img{
  height:64px; width:auto;
  margin-bottom:1.35rem;
  transition: transform .45s var(--ease-out);
}
.feature:hover img{ transform: translateY(-6px) scale(1.06); }
.feature h3{
  font-family: var(--font-serif);
  font-weight:700;
  font-size: clamp(1.2rem, 1.55vw, 1.85rem);
  line-height:1.25;
  margin-bottom: .85rem;
}
.feature p{
  color: var(--grey-text);
  font-size: clamp(.92rem, .98vw, 1.18rem);
  line-height:1.5;
}
@media (max-width: 900px){
  .why-grid{ grid-template-columns:1fr; }
  .feature-grid{ border-left:0; padding-left:0; }
}
@media (max-width: 620px){
  .feature-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   Core cargo segments
   ------------------------------------------------------------ */
.cargo{
  background: var(--band);
  padding: clamp(3.2rem, 5vw, 5.5rem) 0 clamp(3.4rem, 5.4vw, 6rem);
  text-align:center;
}
.cargo h2{
  font-family: var(--font-serif);
  font-weight:700;
  color: var(--ink);
  font-size: clamp(1.5rem, 1.85vw, 2.2rem);
  margin-bottom: clamp(2.6rem, 4vw, 4.4rem);
}
.cargo-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.cargo-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.3rem;
  text-align:left;
}
.cargo-item img{
  height:74px; width:auto; flex-shrink:0;
  transition: transform .45s var(--ease-out);
}
.cargo-item:hover img{ transform: translateY(-6px) scale(1.07); }
.cargo-item span{
  font-family: var(--font-body);
  font-weight:700;
  color:var(--ink);
  font-size: clamp(1rem, 1.15vw, 1.38rem);
  line-height:1.3;
  max-width: 15em;
}
@media (max-width: 1000px){ .cargo-grid{ grid-template-columns:1fr 1fr; gap:2.6rem 1.4rem; } }
@media (max-width: 560px){ .cargo-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   Global coverage
   ------------------------------------------------------------ */
.coverage{
  padding: clamp(4rem, 6.5vw, 7.5rem) 0;
}
.coverage-grid{
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 5vw, 7rem);
  align-items:start;
}
.coverage-intro p{
  font-size: clamp(.98rem, 1.1vw, 1.32rem);
  line-height:1.55;
  text-align:justify;
  color:#222;
  margin-bottom: 2.4rem;
}
.region-list li{
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  transition: transform .35s var(--ease-out);
}
.region-list li:first-child{ border-top: 1px solid var(--line); }
.region-list li:hover{ transform: translateX(8px); }
.region-list img{
  width:58px; height:58px; border-radius:50%;
  transition: transform .4s var(--ease-out);
}
.region-list li:hover img{ transform: scale(1.12) rotate(-4deg); }
.region-list span{
  font-family: var(--font-serif);
  font-weight:700;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.35vw, 1.6rem);
}
.coverage-map{
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(15,30,60,.14);
}
.coverage-map img{
  width:100%;
  transition: transform 8s var(--ease-soft);
}
.coverage-map:hover img{ transform: scale(1.06); }
@media (max-width: 900px){
  .coverage-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   ABOUT page — hero
   ------------------------------------------------------------ */
.hero--page{
  min-height: clamp(360px, 32vw, 620px);
  align-items:center;
}
.hero--about .hero-bg{ background-image:url('../images/hero-about.jpg'); }
.page-title-wrap{
  margin-left:auto;
  position:relative;
  padding: 1.2rem 2.4rem;
  margin-top: 2.2rem;
}
.page-title-wrap::before{
  content:'';
  position:absolute; inset:0;
  border: 1px solid rgba(255,255,255,.55);
  transform: translate(14px, 14px);
  opacity:0;
  animation: frameIn 1s var(--ease-out) .75s forwards;
}
@keyframes frameIn{ to{ opacity:1; transform: translate(8px, 8px);} }
.page-title{
  font-family: var(--font-sans);
  font-weight:900;
  color:#fff;
  letter-spacing:.02em;
  font-size: clamp(3rem, 6.5vw, 7.8rem);
  line-height:1;
  text-shadow: 0 4px 26px rgba(4,16,38,.4);
  overflow:hidden;
}
.page-title span{
  display:block;
  transform: translateY(108%);
  animation: lineUp .9s var(--ease-out) .3s forwards;
}

/* ------------------------------------------------------------
   About body
   ------------------------------------------------------------ */
.about-block{
  padding: clamp(4rem, 6.5vw, 7.5rem) 0;
}
.about-grid{
  display:grid;
  grid-template-columns: 11fr 8fr;
  gap: clamp(2.5rem, 4.5vw, 6rem);
  align-items:start;
}
.about-copy p{
  font-size: clamp(.98rem, 1.1vw, 1.32rem);
  line-height:1.55;
  text-align:justify;
  margin-bottom:1.5rem;
  color:#222;
}
.about-photo{
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(15,30,60,.16);
}
.about-photo img{
  width:100%;
  transition: transform 1.2s var(--ease-soft);
}
.about-photo:hover img{ transform: scale(1.05); }
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   Strategic foundation — handshake banner
   ------------------------------------------------------------ */
.foundation{
  position:relative;
  color:#fff;
  padding: clamp(4rem, 7vw, 8.5rem) 0;
  background: url('../images/bg-handshake.jpg') center/cover no-repeat;
  isolation:isolate;
}
.foundation .label{ color:#fff; }
.foundation-copy{
  max-width: 860px;
}
.foundation-copy p{
  font-size: clamp(.98rem, 1.1vw, 1.32rem);
  line-height:1.55;
  text-align:justify;
  margin-bottom:1.5rem;
  text-shadow: 0 1px 12px rgba(10,20,40,.35);
}

/* ------------------------------------------------------------
   Vision / Mission
   ------------------------------------------------------------ */
.vm{ display:grid; grid-template-columns: 1fr 1fr; }
.vm-panel{
  padding: clamp(3.2rem, 5.5vw, 7rem) clamp(1.8rem, 5.5vw, 8rem);
  min-height: clamp(420px, 34vw, 660px);
  position:relative;
  overflow:hidden;
}
.vm-vision{ background: var(--dark); color:#fff; }
.vm-mission{
  background:#fff url('../images/bg-mission-ship.jpg') bottom center / 100% auto no-repeat;
  color: var(--ink);
}
.vm-panel img.vm-icon{
  height:104px; width:auto;
  margin-bottom: 2.6rem;
  transition: transform .5s var(--ease-out);
}
.vm-panel:hover img.vm-icon{ transform: translateY(-6px) scale(1.05); }
.vm-label{
  font-family: var(--font-sans);
  font-weight:900;
  color: var(--blue);
  letter-spacing:.1em;
  font-size: clamp(1.05rem, 1.3vw, 1.55rem);
  display:inline-block;
  padding-bottom:.55rem;
  border-bottom: 2px solid var(--blue);
  margin-bottom: 2.4rem;
}
.vm-text{
  font-family: var(--font-serif);
  font-weight:600;
  font-size: clamp(1.5rem, 2.15vw, 2.6rem);
  line-height:1.42;
  max-width: 14.5em;
}
@media (max-width: 860px){ .vm{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   Values
   ------------------------------------------------------------ */
.values{
  padding: clamp(4rem, 6.5vw, 7.5rem) 0 clamp(3.4rem, 5.4vw, 6rem);
  text-align:center;
}
.values .label{ margin-bottom: clamp(2.8rem, 4.6vw, 5rem); }
.values-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.8rem, 2.6vw, 3.4rem);
}
.value img{
  height:72px; width:auto;
  margin: 0 auto 1.5rem;
  transition: transform .45s var(--ease-out);
}
.value:hover img{ transform: translateY(-7px) scale(1.08); }
.value h3{
  font-family: var(--font-serif);
  font-weight:700;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.5vw, 1.8rem);
  margin-bottom: 1.1rem;
}
.value .tick{
  width:52px; height:1.5px;
  background: var(--maroon);
  margin: 0 auto 1.25rem;
}
.value p{
  font-size: clamp(.9rem, .95vw, 1.14rem);
  line-height:1.5;
  color:#333;
}
@media (max-width: 1000px){ .values-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .values-grid{ grid-template-columns: 1fr; max-width:340px; margin-inline:auto; } }

/* ------------------------------------------------------------
   Trusted by — logo carousel
   ------------------------------------------------------------ */
.trusted{
  padding: 0 0 clamp(4rem, 7vw, 8rem);
  text-align:center;
}
.trusted .label{ margin-bottom: clamp(2.4rem, 3.8vw, 4rem); }
.carousel{
  display:flex;
  align-items:center;
  gap: 1.4rem;
}
.car-btn{
  flex-shrink:0;
  width:52px; height:52px;
  border:1px solid var(--line);
  background:#fff;
  color:#9a9a98;
  font-size:1.3rem;
  cursor:pointer;
  display:grid; place-items:center;
  transition: all .3s var(--ease-out);
}
.car-btn:hover{ background: var(--blue); border-color:var(--blue); color:#fff; transform: scale(1.06); }
.car-viewport{
  overflow:hidden;
  flex:1;
}
.car-track{
  display:flex;
  will-change: transform;
}
.car-card{
  flex: 0 0 auto;
  width: clamp(200px, 20%, 300px);
  border: 1px solid #ececec;
  background:#fff;
  margin-right:-1px;
  padding: 1.4rem 1.6rem;
  display:grid;
  place-items:center;
  height: 158px;
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out), z-index 0s;
}
.car-card:hover{
  box-shadow: 0 14px 34px rgba(15,30,60,.12);
  transform: translateY(-4px);
  position:relative; z-index:2;
}
.car-card img{
  max-height: 96px;
  width:auto;
  object-fit:contain;
  filter: grayscale(35%);
  opacity:.92;
  transition: filter .35s, opacity .35s, transform .35s;
}
.car-card:hover img{ filter:none; opacity:1; transform: scale(1.05); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer{
  background: var(--dark);
  color:#fff;
}
.footer-grid{
  display:grid;
  grid-template-columns: 4fr 5fr 5fr;
  padding: clamp(3rem, 5vw, 5.5rem) 0;
  gap: clamp(2rem, 3.5vw, 4.5rem);
}
.footer-brand{
  display:flex; align-items:center;
}
.footer-brand img{
  height:118px; width:auto;
  transition: transform .5s var(--ease-out);
}
.footer-brand img:hover{ transform: scale(1.04); }
.office{
  border-left: 1px solid rgba(255,255,255,.25);
  padding-left: clamp(1.8rem, 3.2vw, 4rem);
}
.office h4{
  font-family: var(--font-serif);
  font-weight:700;
  color: #4b8fd8;
  font-size: clamp(1.2rem, 1.4vw, 1.65rem);
  margin-bottom: 1.15rem;
}
.office p{
  font-size: clamp(.95rem, 1.02vw, 1.22rem);
  line-height:1.6;
  color:#f2f2f0;
}
.office .email{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin-top: 1.6rem;
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .3s;
}
.office .email:hover{ color:#4b8fd8; }
.office .email svg{ flex-shrink:0; }
.copyright{
  background: var(--darker);
  padding: 1.15rem 0;
}
.copyright .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.copyright p{
  font-weight:700;
  font-size: clamp(.85rem, .92vw, 1.1rem);
}
.legal{ display:flex; gap: .6rem; align-items:center; flex-wrap:wrap; }
.legal a{
  font-size: clamp(.85rem, .92vw, 1.1rem);
  transition: color .3s;
}
.legal a:hover{ color:#4b8fd8; }
.legal .sep{ color:#777; padding: 0 .5rem; }
@media (max-width: 900px){
  .footer-grid{ grid-template-columns:1fr; }
  .office{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.2); padding-top:1.8rem; }
  .copyright .container{ justify-content:center; text-align:center; }
}

/* label color must win over section paragraph colors */
p.label{ color: var(--blue); }

/* back to top */
.to-top{
  position: fixed;
  right: 1.6rem; bottom: 1.6rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--blue);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(48,112,192,.4);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .4s, transform .4s, background .3s;
  z-index: 90;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background: var(--blue-dark); }