/* Hindustan Towing — site-wide design system (v2, ground-up rebuild) */
:root{
  --ink:#14181f;
  --ink-soft:#5a5648;
  --paper:#f7f4ee;
  --surface:#ffffff;
  --surface-2:#efe9db;
  --line:#e3dcc8;
  --navy:#1c2a3a;
  --navy-2:#111a24;
  --accent:#c8372a;
  --accent-ink:#ffffff;
  --gold:#d99a2b;
  --good:#1f7a45;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(20,24,31,.06),0 10px 28px -14px rgba(20,24,31,.22);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body.ht-page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  padding-bottom:0;
}
body.ht-page img{max-width:100%;}
/* :where() keeps this at zero specificity so every single-class component
   rule below (.ht-call-pill, .ht-nav a, .ht-footer a, .ht-cta, ...) reliably
   wins its own color instead of silently losing to this default — without
   :where(), "body.ht-page a" (2 elements + 1 class) actually out-specifies
   a plain ".ht-nav a" (1 element + 1 class), which was making the header's
   call button render white-on-white... on red (invisible) and nav/footer
   links show accent-red instead of their intended colour. */
:where(body.ht-page) a{color:var(--accent);}
body.ht-page h1,body.ht-page h2,body.ht-page h3,body.ht-page h4,
.elementor-heading-title{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.16;
  color:var(--ink);
  text-transform:none;
}
/* H1 keeps a heavier weight for hero impact; H2-H4 stay a crisper semibold
   rather than the previous uniform bold, for a sharper, less "chunky" feel. */
#ht-content h1.elementor-heading-title{font-weight:700;letter-spacing:-.015em;}
body.ht-page .elementor-widget-text-editor,
body.ht-page .elementor-widget-text-editor p,
body.ht-page .ht-form-card,
body.ht-page .ht-footer,
.elementor-button{
  font-family:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.ht-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}
@media (max-width:800px){ body.ht-page{ padding-bottom:64px; } }

/* Elementor content area: full-bleed, no extra wrapper constraint */
#ht-content{width:100%;}
#ht-content .elementor-section.elementor-section-boxed > .elementor-container{max-width:var(--maxw);}

/* buttons rendered by Elementor's button widget already carry inline
   settings for colour; this just tunes shape/typography site-wide */
.elementor-button{
  font-family:'Poppins',sans-serif !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:700 !important;
  padding:14px 24px !important;
  border-radius:6px !important;
}
.elementor-icon-list-icon{color:var(--accent) !important;}

/* ============ CTA BUTTON ROWS (raw-HTML widget, replaces stacked
   Elementor button widgets so multiple CTAs sit on one inline row) ============ */
.ht-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:22px 0 0;}
.ht-cta{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:6px;
  font-family:'Poppins',sans-serif;text-transform:uppercase;font-weight:700;font-size:.88rem;
  letter-spacing:.02em;text-decoration:none;line-height:1;border:2px solid transparent;
  transition:filter .15s ease,background-color .15s ease,color .15s ease;}
.ht-cta i{font-size:.95em;}
.ht-cta-primary{background:var(--accent);color:#fff !important;border-color:var(--accent);}
.ht-cta-primary:hover{filter:brightness(1.08);}
.ht-cta-outline{background:transparent;border-color:var(--navy);color:var(--navy) !important;}
.ht-cta-outline:hover{background:var(--navy);color:#fff !important;}
.ht-cta-row-dark .ht-cta-outline{border-color:rgba(255,255,255,.55);color:#fff !important;}
.ht-cta-row-dark .ht-cta-outline:hover{background:#fff;color:var(--navy) !important;}
.ht-badge-row{margin:18px 0 0;line-height:2.2;}
.ht-badge-row span{border-radius:6px !important;}

/* ============ HEADER ============ */
.ht-header{
  position:sticky;top:0;z-index:200;
  background:var(--navy);
  border-bottom:3px solid var(--accent);
}
.ht-header-row{
  max-width:var(--maxw);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* Nav + social + call button live as one tight group on the right, instead
   of being spaced evenly across the full header width — with very
   different-width items, an even 4-way space-between reads as lopsided,
   oversized gaps rather than a clean, intentional layout. */
.ht-header-right{display:flex;align-items:center;gap:28px;}
.ht-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-height:76px;}
/* The logo file itself has a fair amount of transparent margin baked in,
   so simply enlarging the <img> box also enlarges the empty space around
   the mark. This wrapper renders the image taller than the visible box and
   clips the vertical overflow evenly (top+bottom), punching in on the
   built-in padding without touching the left/right edges or the artwork
   itself — a real crop needs the source file, but this reads noticeably
   bigger in the meantime. */
.ht-logo-wrap{height:76px;overflow:hidden;display:flex;align-items:center;flex-shrink:0;}
.ht-logo{height:112px;width:auto;max-width:340px;object-fit:contain;object-position:left center;display:block;}
.ht-logo-footer-wrap{height:82px;}
.ht-logo-footer{height:122px;max-width:340px;}
@media (max-width:880px){
  .ht-logo-wrap{height:64px;} .ht-logo{height:96px;}
  .ht-brand{min-height:64px;}
}
@media (max-width:480px){
  .ht-logo-wrap{height:54px;} .ht-logo{height:82px;max-width:250px;}
  .ht-brand{min-height:54px;}
}
.ht-brand-mark{
  width:40px;height:40px;border-radius:10px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.ht-brand-text{display:flex;flex-direction:column;line-height:1.05;}
.ht-brand-text strong{font-family:'Poppins',sans-serif;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;}
.ht-brand-text span{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;}

.ht-nav{display:flex;align-items:center;gap:24px;}
.ht-nav a{font-family:'Poppins',sans-serif;text-transform:uppercase;font-size:.9rem;letter-spacing:.03em;text-decoration:none;color:rgba(255,255,255,.82);border-bottom:2px solid transparent;padding-block:4px;}
.ht-nav a:hover,.ht-nav a.is-active{color:#fff;border-color:var(--accent);}
.ht-nav .ht-has-sub{position:relative;}
.ht-nav .ht-sub{display:none;position:absolute;top:100%;left:0;background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px;min-width:220px;box-shadow:var(--shadow);z-index:20;}
.ht-nav .ht-has-sub:hover .ht-sub{display:block;}
.ht-nav .ht-sub a{display:block;padding:8px 10px;border-bottom:none;font-size:.82rem;color:rgba(255,255,255,.78);}
.ht-nav .ht-sub a:hover{background:rgba(255,255,255,.06);color:#fff;}

.ht-header-cta{display:flex;align-items:center;gap:10px;}
.ht-call-pill{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;padding:9px 16px;border-radius:6px;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.9rem;white-space:nowrap;}
.ht-nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:6px;width:40px;height:40px;color:#fff;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;flex-shrink:0;}
.ht-mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 20px 16px;background:var(--navy-2);max-height:calc(100vh - 76px);overflow-y:auto;}
.ht-mobile-menu.open{display:flex;}
.ht-mobile-menu a{color:rgba(255,255,255,.88);text-decoration:none;padding:12px 4px;font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:.92rem;border-bottom:1px solid rgba(255,255,255,.08);}
.ht-mobile-menu .ht-social-row{margin:14px 0 4px;}
/* "Services" (or any nav item with children) collapses by default so the
   13 service links don't push the whole menu off-screen; tapping it opens
   just that section. */
.ht-mobile-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:rgba(255,255,255,.88);text-decoration:none;padding:12px 4px;font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:.92rem;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;}
.ht-chevron{transition:transform .2s ease;flex-shrink:0;}
.ht-mobile-toggle[aria-expanded="true"] .ht-chevron{transform:rotate(180deg);}
.ht-mobile-sub{max-height:0;overflow:hidden;transition:max-height .25s ease;display:flex;flex-direction:column;background:rgba(0,0,0,.15);}
.ht-mobile-sub.open{max-height:900px;}
.ht-mobile-sub a{padding:10px 4px 10px 20px;font-size:.82rem;color:rgba(255,255,255,.72);}
.ht-mobile-sub-all{font-weight:700;color:var(--gold) !important;}

/* Header social icons — smaller variant of the footer row, shown next to
   the call button on tablet/desktop; on phones they move into the slide-out
   menu instead of crowding the sticky bar. */
.ht-header-social{display:flex;gap:8px;}
.ht-header-social .ht-social-btn{width:34px;height:34px;border-radius:7px;}
.ht-header-social .ht-social-btn svg{width:16px;height:16px;}

/* The phone number stays visible at every width — only the horizontal nav
   links collapse behind the hamburger below 880px. */
@media (max-width:880px){
  .ht-nav{display:none;}
  .ht-nav-toggle{display:flex;}
  .ht-header-social{display:none;}
}
@media (max-width:560px){
  .ht-header-row{gap:10px;padding:12px 16px;}
  .ht-call-pill{padding:8px 12px;font-size:.78rem;gap:6px;}
  .ht-call-pill svg{width:13px;height:13px;}
}
@media (max-width:360px){
  .ht-call-pill{font-size:.7rem;padding:7px 9px;}
}

/* ============ MOBILE CALL BAR ============ */
.ht-callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:190;background:var(--navy);border-top:3px solid var(--accent);padding:10px 14px;gap:10px;}
.ht-callbar a{flex:1;text-align:center;padding:12px;border-radius:8px;text-decoration:none;font-family:'Poppins',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.03em;font-size:.9rem;}
.ht-callbar .call{background:var(--accent);color:#fff;}
.ht-callbar .wa{background:transparent;border:2px solid rgba(255,255,255,.35);color:#fff;}
@media (max-width:800px){ .ht-callbar{display:flex;} }

/* ============ FOOTER ============ */
.ht-footer{background:var(--navy-2);color:rgba(255,255,255,.75);}
.ht-footer-inner{max-width:var(--maxw);margin:0 auto;padding:48px 20px 24px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.1fr;gap:32px;}
@media (max-width:980px){ .ht-footer-inner{grid-template-columns:1fr 1fr 1fr;} }
@media (max-width:820px){ .ht-footer-inner{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .ht-footer-inner{grid-template-columns:1fr;} }
.ht-footer h4{font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:var(--gold);margin:0 0 14px;}
.ht-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.ht-footer a{text-decoration:none;color:inherit;font-size:.9rem;}
.ht-footer a:hover{color:#fff;}
.ht-footer-brand p{font-size:.88rem;max-width:34ch;color:rgba(255,255,255,.55);margin:10px 0 0;}
.ht-social-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.ht-social-btn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,transform .15s ease;}
.ht-social-btn svg{width:19px;height:19px;display:block;fill:currentColor;}
.ht-social-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px);}

/* ============ FOOTER BLOG ============ */
.ht-footer-blog li{display:flex;flex-direction:column;gap:2px;}
.ht-footer-blog a{font-weight:600;}
.ht-footer-blog time{font-size:.75rem;color:rgba(255,255,255,.45);}
.ht-footer-empty{font-size:.85rem;color:rgba(255,255,255,.45);margin:0;}
.ht-footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 20px;max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.78rem;color:rgba(255,255,255,.5);}
.ht-suburb-list{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.55);}

/* ============ QUOTE FORM (raw HTML widget, Contact page) ============ */
.ht-form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow);}
.ht-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){ .ht-field-row{grid-template-columns:1fr;} }
.ht-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.ht-field label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}
.ht-field input,.ht-field select,.ht-field textarea{font:inherit;font-size:.95rem;padding:11px 12px;border-radius:8px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);width:100%;}
.ht-field input:focus,.ht-field select:focus,.ht-field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.ht-submit{width:100%;font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:.95rem;padding:14px;border-radius:8px;border:none;background:var(--accent);color:#fff;cursor:pointer;}
.ht-submit:hover{filter:brightness(1.05);}
.ht-submit:disabled{opacity:.65;cursor:not-allowed;filter:none;}
/* Spam honeypot: present in the DOM (real form fields hidden with
   display:none are sometimes skipped by bots) but invisible and
   unreachable by keyboard for a real visitor. */
.ht-hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ============ IMAGE / CAROUSEL WIDGETS ============ */
#ht-content .elementor-widget-image img{border-radius:var(--radius-lg);box-shadow:var(--shadow);}
#ht-content .elementor-image-carousel-wrapper .swiper-slide img,
#ht-content .elementor-image-carousel .slick-slide img{border-radius:var(--radius);box-shadow:var(--shadow);height:220px;object-fit:cover;width:100%;}
#ht-content .elementor-image-carousel-wrapper .swiper-button-next,
#ht-content .elementor-image-carousel-wrapper .swiper-button-prev{color:var(--accent);}
#ht-content .swiper-pagination-bullet-active,
#ht-content .slick-dots li.slick-active button:before{background:var(--accent) !important;color:var(--accent) !important;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important;} }

/* ============ BLOG (blog-template.php — not an Elementor page) ============ */
.ht-blog-hero{background:var(--navy);padding:56px 20px;text-align:center;}
.ht-blog-hero-inner{max-width:760px;margin:0 auto;}
.ht-blog-eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;margin:0 0 8px;}
.ht-blog-hero h1{color:#fff;margin:0 0 10px;}
.ht-blog-intro{color:rgba(255,255,255,.72);margin:0;font-size:1.02rem;}
.ht-blog-back{display:inline-block;color:#fff !important;text-decoration:none;font-weight:600;font-size:.9rem;}
.ht-blog-list{max-width:var(--maxw);margin:0 auto;padding:48px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;}
.ht-blog-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.ht-blog-card-thumb{display:block;aspect-ratio:16/10;overflow:hidden;}
.ht-blog-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;}
.ht-blog-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ht-blog-meta{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:0;}
.ht-blog-card-body h2{margin:0;font-size:1.15rem;}
.ht-blog-card-body h2 a{color:var(--ink) !important;text-decoration:none;}
.ht-blog-card-body h2 a:hover{color:var(--accent) !important;}
.ht-blog-card-body p{color:var(--ink-soft);font-size:.92rem;margin:0;flex:1;}
.ht-blog-readmore{color:var(--accent) !important;font-weight:700;font-size:.88rem;text-decoration:none;}
.ht-blog-empty{max-width:var(--maxw);margin:0 auto;padding:0 20px;color:var(--ink-soft);}
.ht-blog-pagination{max-width:var(--maxw);margin:0 auto;padding:0 20px 56px;display:flex;gap:8px;flex-wrap:wrap;}
.ht-blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:8px;border:1.5px solid var(--line);color:var(--ink) !important;text-decoration:none;font-weight:600;font-size:.9rem;}
.ht-blog-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff !important;}
.ht-blog-pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent) !important;}
.ht-single-post{background:var(--paper);}
.ht-single-post-inner{max-width:760px;margin:0 auto;padding:48px 20px 64px;}
.ht-single-post-inner h1{margin:6px 0 20px;}
.ht-blog-thumb{margin:0 0 28px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
.ht-blog-thumb img{width:100%;display:block;margin:0;}
.ht-blog-content{font-size:1.02rem;line-height:1.75;color:var(--ink);}
.ht-blog-content p{margin:0 0 20px;}
.ht-blog-content h2,.ht-blog-content h3{margin:32px 0 14px;}
.ht-blog-content img{border-radius:var(--radius);}
.ht-blog-content a{text-decoration:underline;}
.ht-blog-content ul,.ht-blog-content ol{margin:0 0 20px;padding-left:22px;}