:root{
  --navy:#06345d;
  --blue:#0874d1;
  --light:#55a9ed;
  --white:#ffffff;
  --text:#102b46;
  --grey:#f4f7fa;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

.topbar{
  background:var(--navy);
  color:#fff;
  padding:8px 5%;
  font-size:14px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.nav{
  max-width:1400px;
  margin:auto;
  min-height:92px;
  padding:12px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.logo{
  font-size:34px;
  font-weight:900;
  color:var(--navy);
  line-height:.85;
}

.logo span{
  display:block;
  color:var(--light);
  font-size:18px;
  letter-spacing:2px;
}

nav{
  display:flex;
  align-items:center;
  gap:26px;
}

nav a{
  color:var(--navy);
  text-decoration:none;
  font-weight:700;
}

nav a:hover{color:var(--blue)}

.bid-btn,.btn{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  padding:14px 24px;
  font-weight:800;
  border-radius:3px;
}

.menu-btn{
  display:none;
  background:none;
  border:0;
  font-size:30px;
  color:var(--navy);
}

.hero{
  min-height:440px;
  background:linear-gradient(90deg,#052f55 0%,#075087 65%,#0874d1 100%);
  color:#fff;
  display:flex;
  align-items:center;
  padding:60px 6%;
}

.hero-inner{
  max-width:720px;
}

.hero h1{
  font-size:58px;
  line-height:1.03;
  margin:0 0 18px;
}

.hero p{
  font-size:21px;
  max-width:650px;
}

.section{
  max-width:1400px;
  margin:auto;
  padding:65px 5%;
}

.section h2{
  color:var(--navy);
  font-size:38px;
  margin:0 0 25px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.card{
  background:var(--grey);
  padding:30px;
  border-top:5px solid var(--blue);
  min-height:190px;
}

.card h3{
  color:var(--navy);
  margin-top:0;
}

.blue-section{
  background:var(--navy);
  color:#fff;
}

.blue-section h2{color:#fff}

footer{
  background:#042d50;
  color:#fff;
  padding:50px 6% 25px;
}

.footer-grid{
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1.3fr 1fr 1.4fr;
  gap:40px;
}

footer a{
  color:#fff;
  text-decoration:none;
}

.copyright{
  max-width:1400px;
  margin:35px auto 0;
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:20px;
  font-size:13px;
}

@media(max-width:850px){
  .topbar{font-size:12px}

  .nav{min-height:75px}

  .menu-btn{display:block}

  nav{
    display:none;
    position:absolute;
    top:75px;
    left:0;
    right:0;
    background:#fff;
    padding:25px;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
  }

  nav.open{display:flex}

  .hero{
    min-height:390px;
    padding:50px 7%;
  }

  .hero h1{font-size:40px}

  .hero p{font-size:18px}

  .cards{grid-template-columns:1fr}

  .footer-grid{grid-template-columns:1fr}

  .section{padding:45px 7%}
}

@media(max-width:480px){
  .hero h1{font-size:34px}
  .section h2{font-size:30px}
}

/* MOBILE HEADER IMPROVEMENTS */
@media(max-width:850px){

  .topbar{
    display:none;
  }

  header{
    position:sticky;
    top:0;
  }

  .nav{
    min-height:86px;
    padding:10px 18px;
    gap:12px;
  }

  .logo{
    font-size:31px;
    flex:1;
  }

  .logo span{
    font-size:17px;
  }

  .menu-btn{
    display:block;
    order:2;
    font-size:34px;
    padding:5px 10px;
    cursor:pointer;
  }

  .bid-btn{
    order:3;
    padding:12px 14px;
    font-size:13px;
    text-align:center;
  }

  nav{
    top:86px;
    padding:20px 28px 28px;
    gap:0;
    border-top:1px solid #e5e5e5;
  }

  nav a{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid #e9eef3;
    font-size:17px;
  }

  .hero{
    min-height:430px;
  }

  footer{
    padding:38px 7% 22px;
  }
}

.brand-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand-logo img{
  display:block;
  width:175px;
  height:auto;
  object-fit:contain;
}

@media(max-width:850px){
  .brand-logo{
    flex:1;
  }

  .brand-logo img{
    width:145px;
    max-height:78px;
    object-fit:contain;
  }
}

@media(max-width:480px){
  .brand-logo img{
    width:125px;
  }
}

.hero{
  background:
    linear-gradient(90deg,rgba(3,38,70,.92) 0%,rgba(3,45,80,.68) 42%,rgba(3,45,80,.18) 100%),
    url('/assets/images/hero-home.png') center center/cover no-repeat;
}

@media(max-width:850px){
  .hero{
    background:
      linear-gradient(90deg,rgba(3,38,70,.90),rgba(3,45,80,.48)),
      url('/assets/images/hero-home.png') center center/cover no-repeat;
    min-height:520px;
  }
}

/* LARGER TPM LOGO + SMALLER HEADER BID BUTTON */
@media(max-width:850px){

  .brand-logo img{
    width:190px;
    max-height:105px;
  }

  .brand-logo{
    flex:1;
  }

  .nav{
    min-height:112px;
    padding:8px 16px;
  }

  .menu-btn{
    font-size:32px;
    padding:5px 8px;
  }

  .bid-btn{
    padding:10px 11px;
    font-size:10px;
    line-height:1.2;
    max-width:120px;
  }

  nav{
    top:112px;
  }
}

@media(max-width:480px){

  .brand-logo img{
    width:180px;
  }

  .bid-btn{
    font-size:10px;
    padding:9px 9px;
    max-width:112px;
  }
}

/* EXTRA LARGE TPM LOGO */
@media(max-width:850px){
  .brand-logo img{
    width:230px;
    max-height:130px;
  }

  .nav{
    min-height:135px;
    padding:6px 14px;
  }

  nav{
    top:135px;
  }
}

@media(max-width:480px){
  .brand-logo img{
    width:215px;
    max-height:125px;
  }
}

/* MOBILE HEADER FINAL FIX */
@media(max-width:850px){
  .nav{
    width:100%;
    min-height:115px;
    padding:8px 12px;
    gap:8px;
    overflow:hidden;
  }

  .brand-logo{
    flex:1 1 auto;
    min-width:0;
  }

  .brand-logo img{
    width:190px;
    max-width:100%;
    max-height:105px;
  }

  .menu-btn{
    flex:0 0 48px;
    font-size:31px;
    padding:4px;
  }

  .bid-btn{
    flex:0 0 105px;
    max-width:105px;
    padding:9px 6px;
    font-size:10px;
    line-height:1.15;
    white-space:normal;
  }

  nav{
    top:115px;
  }
}

@media(max-width:480px){
  .brand-logo img{
    width:185px;
  }
}

/* TPM HOME CONTENT */

.asset-strip{
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:#07375f;
}

.asset-item{
  color:#fff;
  text-align:center;
  padding:24px 10px;
  border-right:1px solid rgba(255,255,255,.18);
  font-weight:700;
}

.asset-icon{
  display:block;
  font-size:30px;
  margin-bottom:8px;
}

.home-intro{
  background:#fff;
}

.home-intro-grid{
  max-width:1400px;
  margin:auto;
  padding:60px 5%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.intro-box{
  text-align:center;
  padding:30px;
  border:1px solid #dce7f0;
  background:#fff;
}

.intro-box h3{
  color:#07375f;
  font-size:23px;
  margin:10px 0;
}

.intro-icon{
  font-size:38px;
  color:#0874d1;
}

.experience{
  background:#f4f7fa;
}

.experience-inner{
  max-width:1400px;
  margin:auto;
  padding:65px 5%;
}

.experience h2{
  color:#07375f;
  font-size:42px;
  margin:0 0 20px;
}

.experience-lead{
  font-size:21px;
  max-width:950px;
}

.services-home{
  max-width:1400px;
  margin:auto;
  padding:65px 5%;
}

.services-home h2{
  color:#07375f;
  font-size:38px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.service-box{
  background:#07375f;
  color:#fff;
  padding:30px;
  min-height:190px;
}

.service-box h3{
  font-size:21px;
  margin-top:0;
}

.home-cta{
  background:#07375f;
  color:#fff;
  padding:50px 6%;
}

.home-cta-inner{
  max-width:1400px;
  margin:auto;
}

.home-cta h2{
  font-size:38px;
  margin:0 0 10px;
}

@media(max-width:850px){

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

  .asset-item{
    padding:18px 8px;
    font-size:13px;
  }

  .home-intro-grid{
    grid-template-columns:1fr;
    padding:40px 7%;
  }

  .intro-box{
    padding:25px 20px;
  }

  .experience-inner{
    padding:45px 7%;
  }

  .experience h2{
    font-size:32px;
  }

  .experience-lead{
    font-size:18px;
  }

  .services-home{
    padding:45px 7%;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .home-cta{
    padding:40px 7%;
  }

  .home-cta h2{
    font-size:30px;
  }
}

/* HOME MOBILE POLISH */
@media(max-width:850px){

  header{
    position:relative !important;
    top:auto !important;
  }

  nav{
    top:auto;
  }

  .intro-box{
    background:#f4f7fa;
    color:#17324a;
    border-top:5px solid #0784d7;
    text-align:left;
    margin:0;
  }

  .intro-box h3{
    color:#073f6c;
    font-size:25px;
  }

  .service-box{
    background:#f4f7fa;
    color:#17324a !important;
    border-top:5px solid #0784d7;
    padding:28px 24px;
    min-height:auto;
  }

  .service-box h3{
    color:#073f6c !important;
    font-size:25px;
  }

  .service-box p,
  .service-box li{
    color:#17324a !important;
    font-size:18px;
    line-height:1.55;
  }

  .services-home{
    background:#073f6c;
  }

  .services-home > h2{
    color:#fff;
  }
}

/* COMPACT MISSION AIM EXPERIENCE */
@media(max-width:850px){
  .intro-box{
    padding:24px 22px !important;
    margin:0 0 16px !important;
    min-height:0 !important;
  }

  .intro-box h3{
    margin:0 0 12px !important;
    font-size:22px !important;
  }

  .intro-box p{
    margin:0 !important;
    font-size:17px !important;
    line-height:1.55 !important;
  }

  .home-intro-grid{
    gap:0 !important;
    padding:30px 7% !important;
  }
}

/* FINAL COMPACT MISSION CARDS */
@media(max-width:850px){

  .home-intro-grid{
    display:block !important;
    padding:20px 7% !important;
  }

  .home-intro-grid .intro-box{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding:20px 22px !important;
    margin:0 0 14px !important;
  }

  .home-intro-grid .intro-box h3{
    margin:0 0 8px !important;
    padding:0 !important;
    font-size:21px !important;
    line-height:1.2 !important;
  }

  .home-intro-grid .intro-box p{
    margin:0 !important;
    padding:0 !important;
    font-size:16px !important;
    line-height:1.45 !important;
  }
}

/* MOBILE MISSION AIM EXPERIENCE - ACTUAL CARDS */
@media(max-width:850px){

  .cards{
    display:block !important;
    padding:20px 7% !important;
    margin:0 !important;
    gap:0 !important;
  }

  .cards .card{
    height:auto !important;
    min-height:0 !important;
    margin:0 0 14px !important;
    padding:20px 22px !important;
  }

  .cards .card h3{
    margin:0 0 10px !important;
    padding:0 !important;
    font-size:21px !important;
    line-height:1.25 !important;
  }

  .cards .card p{
    margin:0 !important;
    padding:0 !important;
    font-size:16px !important;
    line-height:1.5 !important;
  }
}

/* 60 YEARS EXPERIENCE SECTION */
@media(max-width:850px){

  .experience{
    background:#f4f7fa !important;
  }

  .experience-inner{
    padding:35px 7% !important;
  }

  .experience h2{
    font-size:34px !important;
    line-height:1.12 !important;
    color:#073f6c !important;
    margin:0 0 20px !important;
  }

  .experience p{
    font-size:17px !important;
    line-height:1.55 !important;
    color:#17324a !important;
  }
}

/* 60 YEARS - MOBILE FINAL */
@media(max-width:850px){

  .sixty-years{
    padding:30px 7% !important;
    margin:0 !important;
    background:#fff;
  }

  .sixty-years h2{
    margin:0 0 18px !important;
    font-size:34px !important;
    line-height:1.15 !important;
    color:#073f6c !important;
  }

  .sixty-years p{
    margin:0 0 16px !important;
    font-size:17px !important;
    line-height:1.5 !important;
    color:#17324a !important;
  }

  .sixty-years p:last-child{
    margin-bottom:0 !important;
  }
}

/* 60 YEARS - MOBILE FINAL */
@media(max-width:850px){
  .sixty-years{
    padding:30px 7% !important;
    margin:0 !important;
  }

  .sixty-years h2{
    margin:0 0 18px !important;
    font-size:34px !important;
    line-height:1.15 !important;
  }

  .sixty-years p{
    margin:0 0 16px !important;
    font-size:17px !important;
    line-height:1.5 !important;
  }

  .sixty-years p:last-child{
    margin-bottom:0 !important;
  }
}
@media(max-width:850px){
.sixty-years{padding:30px 7% !important;margin:0 !important;}
.sixty-years h2{margin:0 0 18px !important;font-size:34px !important;line-height:1.15 !important;}
.sixty-years p{margin:0 0 16px !important;font-size:17px !important;line-height:1.5 !important;}
.sixty-years p:last-child{margin-bottom:0 !important;}
}

/* REMOVE GAP BETWEEN 60 YEARS AND MISSION */
@media(max-width:850px){
  .sixty-years{
    padding-bottom:15px !important;
  }

  .sixty-years + .section{
    padding-top:15px !important;
    margin-top:0 !important;
  }

  .sixty-years + .section .cards{
    padding-top:0 !important;
  }
}

/* REMOVE GAP BETWEEN 60 YEARS AND MISSION */
@media(max-width:850px){
  .sixty-years{
    padding-bottom:15px !important;
  }

  .sixty-years + .section{
    padding-top:15px !important;
    margin-top:0 !important;
  }

  .sixty-years + .section .cards{
    padding-top:0 !important;
  }
}

/* REMOVE GAP BETWEEN 60 YEARS AND MISSION */
@media(max-width:850px){
  .sixty-years{
    padding-bottom:15px !important;
  }

  .sixty-years + .section{
    padding-top:15px !important;
    margin-top:0 !important;
  }

  .sixty-years + .section .cards{
    padding-top:0 !important;
  }
}

/* TPM HOME SERVICES */
.home-services{
  background:#073f6c !important;
}

.home-services > h2{
  color:#fff !important;
}

.home-services .card{
  background:#f4f7fa !important;
  border-top:5px solid #0784d7 !important;
}

.home-services .card h3{
  color:#073f6c !important;
}

.home-services .card p{
  color:#17324a !important;
}

@media(max-width:850px){
  .home-services{
    padding:28px 7% !important;
  }

  .home-services > h2{
    font-size:34px !important;
    margin:0 0 20px !important;
  }

  .home-services .cards{
    display:block !important;
    padding:0 !important;
  }

  .home-services .card{
    height:auto !important;
    min-height:0 !important;
    padding:22px !important;
    margin:0 0 15px !important;
  }

  .home-services .card h3{
    font-size:21px !important;
    margin:0 0 9px !important;
  }

  .home-services .card p{
    font-size:16px !important;
    line-height:1.5 !important;
    margin:0 !important;
  }
}

/* MOBILE MENU - KEEP HOME VISIBLE */
@media(max-width:850px){

  #mainNav.open{
    display:block !important;
    position:fixed !important;
    top:112px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:calc(100vh - 112px) !important;
    overflow-y:auto !important;
    padding:0 7% 18px !important;
    margin:0 !important;
    background:#fff !important;
    z-index:999999 !important;
  }

  #mainNav.open a{
    display:block !important;
    padding:15px 0 !important;
    margin:0 !important;
  }
}


  #mainNav.open a{
    display:block !important;
    padding:15px 0 !important;
    margin:0 !important;
  }
}

/* SERVICE CARD TEXT - FINAL */
.blue-section .card{
  background:#f4f7fa !important;
}

.blue-section .card h3{
  color:#073f6c !important;
}

.blue-section .card p{
  color:#17324a !important;
  opacity:1 !important;
}

@media(max-width:850px){
  .blue-section .card p{
    color:#17324a !important;
    font-size:16px !important;
    line-height:1.5 !important;
  }
}

/* ABOUT PAGE MOBILE POLISH */
@media(max-width:850px){
  body:has(.hero h1) .section > h2{
    font-size:30px;
    line-height:1.2;
  }
}

/* BUY PAGE MOBILE HERO */
@media(max-width:850px){
  .hero h1{
    font-size:42px;
    line-height:1.08;
  }
}

/* BUY HERO FINAL MOBILE SIZES */
@media(max-width:850px){
  .buy-title{
    font-size:30px !important;
    line-height:1.1 !important;
  }

  .buy-assets{
    font-size:38px !important;
    line-height:1.08 !important;
  }
}

/* BUY WITH CONFIDENCE - MATCH COMMERCIAL SIZE */
@media(max-width:850px){
  .buy-title{
    font-size:38px !important;
    line-height:1.08 !important;
  }
}

/* ===== SELL WHATSAPP VALUATION ===== */
.sell-whatsapp{
  margin:35px 0 45px;
  padding:30px;
  background:#f3f5f8;
  border-top:6px solid #1188df;
}

.sell-whatsapp h3{
  margin-top:0;
  color:#073f70;
}

.sell-whatsapp .btn{
  display:inline-block;
  margin:15px 0;
}

.sell-whatsapp .whatsapp-note{
  margin-bottom:0;
  font-size:18px;
}

@media(max-width:850px){
  .sell-whatsapp{
    padding:25px;
  }

  .sell-whatsapp h3{
    font-size:28px;
  }

  .sell-whatsapp .btn{
    width:100%;
    box-sizing:border-box;
    text-align:center;
    font-size:18px;
  }

  .sell-whatsapp .whatsapp-note{
    font-size:18px;
    line-height:1.5;
  }
}

/* TPM Auctions footer logo */
.footer-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin: 0 0 12px 0;
}

/* FINAL TPM FOOTER LOGO */
footer .footer-logo {
    display: block !important;
    width: 140px !important;
    max-width: 140px !important;
    height: 75px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 0 8px 0 !important;
}

footer img.footer-logo {
    width: 140px !important;
    max-width: 140px !important;
    height: 75px !important;
}

/* HARD FIX - TPM FOOTER LOGO ONLY */
footer .footer-grid > div:first-child {
    overflow: hidden !important;
}

footer .footer-grid > div:first-child img.footer-logo {
    display: block !important;
    width: 140px !important;
    min-width: 0 !important;
    max-width: 140px !important;
    height: 75px !important;
    min-height: 0 !important;
    max-height: 75px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
}

/* FINAL FOOTER CONTACT SPACING */
footer strong:first-child {
    font-size: 24px;
    line-height: 1.2;
}

footer h3 {
    margin-bottom: 12px;
}

footer h3 + p {
    margin-top: 0 !important;
}

/* Mobile */
@media (max-width:850px) {
    footer strong:first-child {
        font-size: 24px;
    }

    footer h3 {
        margin-bottom: 8px !important;
    }

    footer h3 + p {
        margin-top: 0 !important;
    }
}

/* ADDRESS SAME SIZE AS CONTACT US */
footer strong:first-child {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* FOOTER TYPOGRAPHY REPAIR */

/* Reset names/details */
footer p strong {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Address heading only */
footer p > strong:first-child {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* But names must remain normal */
footer h3 ~ p strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

/* Contact Us heading */
footer h3 {
    font-size: 28px !important;
    line-height: 1.2 !important;
}

/* Keep Contact Us close to Johan */
footer h3 + p {
    margin-top: 8px !important;
}

/* ===== TPM FINAL FOOTER CONTACT LAYOUT ===== */

/* Address + Contact Us headings */
footer .footer-grid > div:last-child > p:first-of-type > strong,
footer .footer-grid > div:last-child > h3 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* Address text */
footer .footer-grid > div:last-child > p:first-of-type {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
}

/* Contact Us spacing */
footer .footer-grid > div:last-child > h3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Johan, Paul and Luzya blocks */
footer .footer-grid > div:last-child > h3 ~ p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

/* Johan, Paul and Luzya names */
footer .footer-grid > div:last-child > h3 ~ p > strong {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
}

/* ===== FINAL MOBILE FOOTER SECTION SPACING ===== */

@media (max-width:850px) {

    footer .footer-grid {
        gap: 32px !important;
    }

    /* Remove excessive spacing around each footer column */
    footer .footer-grid > div {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Keep logo/tagline compact */
    footer .footer-logo {
        margin-bottom: 8px !important;
    }
}
