/* Homepage — mirrors uat.trackon.in layout. Shared tokens/components live in site.css */

/* ---------- Hero (HDFC-style: photo banner, headline + white buttons, finder card, overlapping track bar) ---------- */
.hhero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #4A0C0E;
  color: #fff;
  padding: 56px 0;
}

.hhero .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.hhero .slide.on {
  opacity: 1;
}

.hhero .slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.hhero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 6, 8, .85) 0%, rgba(30, 6, 8, .6) 35%, rgba(30, 6, 8, 0) 65%);
}

.hhero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
}

.hhero-copy {
  display: grid;
  min-width: 0;
}

.hcopy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
}

.hcopy.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.htitle {
  font-family: var(--h);
  font-size: clamp(30px, 3.3vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 16px;
  max-width: 580px;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.hsub {
  font-size: 15px;
  line-height: 1.55;
  color: #F3E3E3;
  max-width: 380px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 0;
  background: #fff;
  color: var(--red);
  font-family: var(--h);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  transition: background .15s, color .15s;
}

.hbtn span {
  color: var(--orange);
  font-size: 22px;
  line-height: 1;
  transition: transform .15s;
}

.hbtn:hover {
  background: #FFF4EC;
  color: var(--red);
}

.hbtn:hover span {
  transform: translateX(3px);
}

.hhero .dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hhero .dots button {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: width .3s, background .3s;
}

.hhero .dots button.on {
  width: 28px;
  background: #fff;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-height: calc(100vh - 120px);
  min-width: 177.77vh;
  pointer-events: none;
  object-fit: cover;
}

/* finder card */
.finder {
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  padding: 12px;
  box-shadow: none;
  width: 340px;
  box-sizing: border-box;
}

.f-radios {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.f-radios label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--h);
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}

.f-radios input {
  accent-color: var(--red);
  width: 14px;
  height: 14px;
  margin: 0;
}

.f-radios label:has(input:checked) {
  color: var(--red);
}

.f-box {
  background: #F6F2F1;
  border-radius: 8px;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.f-box select {
  height: 36px;
  width: 100%;
  border: 1px solid #E3DCD8;
  border-radius: 6px;
  padding: 0 32px 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") right 12px center no-repeat;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
}

.f-box select:focus {
  border-color: var(--red);
}

.f-box select:disabled {
  color: #9A928D;
  cursor: not-allowed;
  background-color: #FBF9F8;
}

.f-err {
  margin: 0;
  font-size: 12px;
  color: #D93025;
}

.f-err:empty {
  display: none;
}

.f-acts {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid #E6DEDA;
  margin-top: 2px;
}

.f-quote {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-family: var(--h);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin-top: 4px;
}

.f-quote:hover {
  background: var(--red-700);
}

.f-more {
  margin-top: 4px;
  font-family: var(--h);
  font-weight: 600;
  font-size: 13px;
  color: var(--red);
}

.f-more:hover {
  text-decoration: underline;
}

/* track bar overlapping the banner (in place of HDFC's search bar) */
.tbar-wrap {
  position: relative;
  z-index: 5;
  margin: -30px auto 50px;
}

.tbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 100px;
  padding: 6px 6px 6px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  border: 5px solid #FAD5C5;
}

.tb-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  padding-right: 14px;
  border-right: 1px solid var(--line);
}

.tb-label b {
  font-family: var(--h);
  font-size: 15px;
}

.tb-radios {
  display: flex;
  gap: 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.tb-radios label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.tb-radios input {
  accent-color: var(--red);
}

.tbar input#awb {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  padding: 0 6px;
}

.tb-go {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
  font-family: var(--h);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.tb-go span {
  font-size: 20px;
  margin-left: 4px;
}

.tb-go:hover {
  background: var(--orange-600);
}

.tb-branch {
  white-space: nowrap;
  font-family: var(--h);
  font-weight: 600;
  font-size: 14px;
  color: var(--red);
  padding: 0 8px;
}

.tb-branch:hover {
  text-decoration: underline;
}

/* ---------- Why choose Trackon (UAT strip) ---------- */
.why-box {
  padding: 10px 0 0;
}

.why-box h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  margin-bottom: 26px;
}

.why-box h2 img {
  height: clamp(30px, 3.2vw, 46px);
  width: auto;
  display: inline-block;
}

.why-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.why-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 20px;
  background: #fff;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  text-align: left;
}

.why-stat:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--orange-100);
}

.why-stat .ic {
  width: 46px;
  height: 46px;
  margin: 0 0 12px;
  border-radius: 12px;
  background: var(--orange-50);
  display: grid;
  place-items: center;
  padding: 8px;
}

.why-stat .ic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.why-stat b {
  display: block;
  font-family: var(--h);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.why-stat b small {
  font-size: 11px;
  color: var(--orange);
  font-weight: 700;
}

.why-stat .lbl {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

/* ---------- Ticks ---------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 12px;
}

.ticks.two {
  grid-template-columns: 1fr 1fr;
}

.ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--h);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.ticks .tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange-50);
  border: 1px solid var(--orange-100);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ticks .tick svg {
  stroke: var(--orange);
}

.ticks.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ticks.chips li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 14px 8px 8px;
  font-size: 13px;
}

/* ---------- Our Services tabs (UAT) ---------- */
.svc-tabs {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #FFF8F3, #FCFAF8);
  border-bottom: 1px solid var(--line);
}

.tabbar button {
  flex: 1 1 150px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--h);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s;
  position: relative;
  white-space: nowrap;
}

.tabbar button:hover {
  border-color: var(--orange-100);
}

.tabbar button[aria-selected="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(243, 112, 33, .7);
}

.tabbar button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--orange);
  border-bottom: 0;
}

.svc-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 480px;
}

.svc-panel[hidden] {
  display: none;
}

.svc-panel .ph {
  position: relative;
  min-height: 400px;
}

.svc-panel .ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-panel .ph .tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(20, 50, 50, .7);
  color: #fff;
  font-family: var(--h);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.svc-panel .ph .no {
  display: none;
}

.svc-panel .tx {
  padding: 44px 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.svc-panel h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  margin-bottom: 14px;
}

.svc-panel p {
  color: var(--muted);
  font-size: 15px;
}

.svc-panel .btn {
  margin-top: 26px;
}

/* ---------- International (UAT) ---------- */
.intl {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: center;
  padding: 40px;
  border-radius: 20px;
  background: radial-gradient(circle at 0% 0%, rgba(243, 112, 33, .3), transparent 40%), linear-gradient(135deg, var(--red), var(--red-900));
  box-shadow: var(--shadow-lg);
  color: #fff;
}

.intl .tx {
  padding: 8px 12px;
}

.intl h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  margin: 18px 0 14px;
}

.intl p {
  color: #F6DCD8;
  margin-bottom: 26px;
}

.intl .map {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #160707;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.intl .map img {
  width: 100%;
  height: auto;
}

.glass {
  position: absolute;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #F6DCD8;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
}

.glass b {
  color: #fff;
  font-family: var(--h);
  font-size: 14px;
}

.glass.g1 {
  top: 16px;
  right: 16px;
}

.glass.g2 {
  left: 16px;
  bottom: 16px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
}

/* ---------- Franchise (UAT) ---------- */
.franchise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.franchise .map {
  padding: 30px;
}

.franchise .map .eyebrow {
  color: var(--ink);
  font-size: 14px;
}

.franchise .map .eyebrow::before {
  background: var(--orange);
}

.mapbox {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #1A0707;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin: 0 auto;
}

.mapbox>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub {
  position: absolute;
  transform: translate(-11px, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .96);
  font-family: var(--h);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
  white-space: nowrap;
}

.hub.l {
  flex-direction: row-reverse;
  padding: 5px 6px 5px 10px;
  transform: translate(calc(-100% + 11px), -50%);
}

.hub i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(243, 112, 33, .3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(243, 112, 33, 0);
  }
}

.center-badge {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--h);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .15), var(--shadow-lg);
}

.center-badge b {
  display: block;
  font-size: 30px;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.1;
}

.center-badge b span {
  color: var(--orange);
  font-size: 18px;
}

.center-badge em {
  font-style: normal;
  color: var(--orange);
  font-size: 8px;
  margin-top: 3px;
}

.franchise .tx {
  position: relative;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(160deg, #fff, #FCFAF8);
}

.franchise .tx::before {
  display: none;
}

.franchise h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  margin-bottom: 16px;
}

.franchise p {
  color: var(--muted);
}

.franchise .stat-row {
  width: 100%;
}

/* ---------- Testimonials reel (UAT) ---------- */
.reel-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  margin-bottom: 36px;
}

.reel-wrap {
  position: relative;
}

.reel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 5);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reel-track::-webkit-scrollbar {
  display: none;
}

.reel {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  scroll-snap-align: start;
}

.reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: transform .5s ease, opacity .3s;
}

.reel:hover img {
  transform: scale(1.05);
  opacity: 1;
}

.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85));
}

.reel .play {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  padding-left: 3px;
}

.reel figcaption {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: #fff;
}

.reel figcaption span {
  font-family: var(--h);
  font-size: 11px;
  font-weight: 700;
  color: #FFC49E;
}

.reel blockquote {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.reel-next {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 24px;
  cursor: pointer;
  z-index: 3;
}

.reel-next:hover {
  background: var(--orange);
  color: #fff;
}

.reel-note {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 16px;
}

/* ---------- Business lead (UAT) ---------- */
.lead-box {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}

.lead-box .l {
  padding: 44px;
  background: radial-gradient(circle at 90% 100%, rgba(243, 112, 33, .14), transparent 50%), linear-gradient(160deg, #FFF6EF, #FFEEE2);
}

.lead-box .l h2 {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 800;
  margin: 18px 0 14px;
}

.lead-box .l>p {
  color: var(--muted);
  font-size: 15px;
}

.lead-box .note {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 26px 0 8px;
  padding: 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.lead-box .note .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  flex-shrink: 0;
}

.lead-box .note b {
  font-family: var(--h);
  font-size: 14.5px;
  color: var(--ink);
  display: block;
}

.lead-box .note small {
  color: var(--muted);
  font-size: 13px;
}

.lead-box .r {
  padding: 44px;
  position: relative;
}

.lead-box .step {
  position: absolute;
  top: 44px;
  right: 44px;
  font-family: var(--h);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-50);
  border: 1px solid var(--orange-100);
  padding: 5px 10px;
  border-radius: 100px;
}

.lead-box .r h3 {
  font-size: 28px;
  font-weight: 800;
  max-width: 75%;
}

.lead-box .r .sub {
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0 22px;
}

.lead-box .r .eyebrow {
  color: var(--ink);
}

.lead-box .r .eyebrow::before {
  background: var(--orange);
}

/* ---------- FAQ + clients (UAT) ---------- */
#faq {
  background: #fff;
}

.faq-cols.uat {
  gap: 12px;
}

.faq-cols.uat .faq-col {
  gap: 12px;
}

.faq-cols.uat .faq-item {
  background: #F8F5F2;
  border-color: #EEE8E2;
  border-radius: 6px;
}

.faq-cols.uat .faq-q {
  font-size: 14.5px;
  font-weight: 400;
  padding: 16px 18px;
}

.clients {
  background: #F9F9F9;
  padding: 40px 0;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee .track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee:hover .track {
  animation-play-state: paused;
}

.marquee img {
  height: 40px;
  width: auto;
  mix-blend-mode: multiply;
  transition: transform .2s;
}

.marquee img:hover {
  transform: translateY(-2px);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1240px) {
  .why-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .reel-track {
    grid-auto-columns: calc((100% - 20px) / 3);
  }
}

@media (max-width: 1100px) {

  .svc-panel,
  .intl,
  .franchise,
  .lead-box {
    grid-template-columns: 1fr;
  }

  .svc-panel {
    height: auto;
  }

  .hhero {
    padding: 40px 0 110px;
    min-height: calc(100vh - 120px);
  }

  .hhero-in {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .finder {
    max-width: 520px;
  }

  .hhero-shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .7) 100%);
  }

  .tb-branch {
    display: none;
  }

  .svc-panel .ph {
    min-height: 260px;
  }

  .franchise .tx::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .htitle {
    font-size: 26px;
  }

  .hsub {
    font-size: 16px;
  }



  .tbar {
    flex-wrap: wrap;
    padding: 14px;
    gap: 10px;
  }

  .tb-label {
    border: 0;
    padding: 0;
  }

  .tbar input#awb {
    flex: 1 1 100%;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
  }

  .tb-go {
    flex: 1 1 100%;
  }

  .hhero .dots {
    bottom: 70px;
  }

  .why-stats {
    grid-template-columns: 1fr 1fr;
  }

  .svc-panel .tx,
  .lead-box .l,
  .lead-box .r,
  .franchise .tx,
  .franchise .map {
    padding: 26px 20px;
  }

  .intl {
    padding: 20px;
  }

  .ticks.two {
    grid-template-columns: 1fr;
  }

  .lead-box .step {
    position: static;
    display: inline-block;
    margin-bottom: 12px;
  }

  .lead-box .r h3 {
    max-width: none;
  }

  .tabbar button {
    flex: 1 1 40%;
    padding: 11px 10px;
    font-size: 13px;
  }

  .center-badge {
    width: 96px;
    height: 96px;
    right: 12px;
    bottom: 12px;
  }

  .center-badge b {
    font-size: 22px;
  }

  .hub {
    font-size: 10px;
  }

  .reel-track {
    grid-auto-columns: 62%;
  }

  .reel-next {
    right: 4px;
  }
}

/* lead form panel (Xpressbees-style) */
.lead-box .r {
  background: #F4F2F0;
  padding: 28px;
}

@media (max-width: 600px) {
  .lead-box .r {
    padding: 16px;
  }
}
/* ---------- Hero alignment fixes (125% zoom / tablet / mobile) ---------- */
@media (min-width: 1101px) {
  /* keep the finder card clear of the fixed right-hand side tabs */
  .hhero-in { padding-right: 56px; box-sizing: border-box; }
  .hhero { min-height: clamp(520px, calc(100vh - 150px), 760px); }
  .hhero-copy { align-content: center; }
  .hcopy .htitle { max-width: min(580px, 100%); }
}
@media (max-width: 1100px) {
  .hhero { min-height: 0; padding: 36px 0 128px; align-items: flex-start; }
  .hhero-in { gap: 24px; justify-items: start; }
  .hhero-copy { width: 100%; }
  .hhero-copy .hcopy:first-child > div { max-width: 100%; }
  .finder { width: 100%; max-width: 520px; }
  .hhero .slide img { object-position: 75% 30%; }
  .hhero .dots { left: max(20px, calc((100% - var(--wrap, 1200px)) / 2)); transform: none; bottom: 84px; }
  .tbar-wrap { margin-top: -34px; }
}
@media (max-width: 600px) {
  .hhero { padding: 28px 0 124px; }
  .finder { max-width: none; }
  .hhero .dots { left: 20px; bottom: 82px; }
  .hcopy > div[style*="aspect-ratio"] { border-width: 8px !important; border-radius: 14px !important; }
}

/* every hero state (video, 3 text slides) centres on the same axis as the finder card */
.hhero-copy { align-items: center; }
.hhero-copy .hcopy { align-self: center; }
.hhero-in { align-items: center; }
.hcopy > div[style*="aspect-ratio"] { margin: 0; }
@media (max-width: 1100px) {
  .hhero-copy .hcopy { align-self: start; }
  .hcopy > div[style*="aspect-ratio"] { max-width: 520px !important; }
  .htitle, .hsub { max-width: 520px; }
  .hhero .dots { left: max(20px, calc((100% - var(--wrap, 1200px)) / 2)); }
}

/* ---------- Hero fits one fold on tablet / phone; every slide state shares one box ---------- */
@media (min-width: 600px) and (max-width: 1100px) {
  .hhero { padding: 24px 0 96px; }
  .hhero-in { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: center; justify-items: stretch; }
  .hhero-copy { width: auto; }
  .hhero-copy .hcopy { align-self: center; }
  .hcopy > div[style*="aspect-ratio"] { max-width: 100% !important; border-width: 8px !important; border-radius: 14px !important; }
  .htitle { font-size: clamp(24px, 3.8vw, 34px); max-width: none; }
  .hsub { max-width: none; font-size: 15px; }
  .finder { width: 100%; max-width: none; }
  .hhero .dots { bottom: 66px; }
}
@media (max-width: 599px) {
  .hhero { padding: 18px 0 90px; }
  .hhero-in { gap: 16px; justify-items: stretch; }
  .hhero-copy .hcopy { align-self: start; }
  .hcopy > div[style*="aspect-ratio"] { max-width: 100% !important; min-width: 0; border-width: 6px !important; border-radius: 12px !important; }
  .htitle { font-size: 24px; margin-bottom: 10px; max-width: none; }
  .hsub { font-size: 14px; max-width: none; }
  .hbtns { margin-top: 14px; }
  .finder { width: 100%; max-width: none; padding: 10px; }
  .f-radios { margin-bottom: 8px; }
  .hhero .dots { bottom: 62px; }
}

/* ---------- Keep page content clear of the fixed side tabs (1101-1352px wide screens) ---------- */
@media (min-width: 1101px) and (max-width: 1552px) {
  .wrap { width: calc(100% - 152px); }
  .hhero-in { padding-right: 0; }
}

/* ---------- Track bar on phones: card, not an oval ---------- */
@media (max-width: 600px) {
  .tbar-wrap { margin: -30px auto 32px; }
  .tbar { border-radius: 22px; border-width: 4px; padding: 14px 14px 16px; gap: 12px; align-items: center; }
  .tb-label { padding: 0; border: 0; }
  .tb-radios { gap: 12px; flex: 1 1 auto; justify-content: flex-end; font-size: 13px; }
  .tbar input#awb { flex: 1 1 100%; height: 46px; padding: 0 14px; }
  .tb-go { flex: 1 1 100%; height: 46px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .tbar-wrap { margin-bottom: 40px; }
}

/* ---------- Hero buttons: always side by side ---------- */
.hbtns { flex-wrap: nowrap; }
@media (max-width: 767px) {
  .hbtns { gap: 8px; }
  .hbtn { flex: 1 1 0; min-width: 0; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 13px; line-height: 1.25; text-align: center; }
  .hbtn span { font-size: 18px; flex-shrink: 0; }
}
@media (max-width: 380px) {
  .hbtn { font-size: 12px; padding: 9px 6px; }
  .hbtn span { display: none; }
}
@media (min-width: 600px) and (max-width: 699px) {
  .hhero-in { grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
  .hbtn { font-size: 12px; padding: 9px 6px; }
  .hbtn span { display: none; }
}

/* ---------- Slide dots: guaranteed gap below the video / copy / finder ---------- */
.hhero { padding-bottom: 112px; }
.hhero .dots { bottom: 54px; }
@media (min-width: 600px) and (max-width: 1100px) {
  .hhero { padding-bottom: 112px; }
  .hhero .dots { bottom: 54px; }
}
@media (max-width: 599px) {
  .hhero { padding-bottom: 106px; }
  .hhero .dots { bottom: 52px; }
}

/* ---------- Hero button labels stay on one line ---------- */
.hbtn { white-space: nowrap; }
@media (min-width: 600px) and (max-width: 767px) {
  .hbtn span { display: none; }
}

/* ---------- Hero text rhythm ---------- */
.htitle { text-wrap: balance; }
.hsub { text-wrap: pretty; }
@media (min-width: 600px) and (max-width: 1100px) {
  .hsub { max-width: 440px; }
  .hbtns { margin-top: 18px; }
}

/* ---------- Short windows (e.g. 150% browser zoom): compact hero so it fits one fold ---------- */
@media (max-height: 640px) and (min-width: 600px) {
  .hhero { min-height: 0; padding: 18px 0 74px; }
  .hhero .dots { bottom: 44px; }
  .htitle { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; }
  .hsub { font-size: 13px; }
  .hbtns { margin-top: 12px; }
  .hbtn { padding: 8px 12px; font-size: 13px; }
  .finder { padding: 10px; }
  .f-radios { margin-bottom: 6px; }
  .f-box select, .f-box input { height: 38px; }
  .hcopy > div[style*="aspect-ratio"] { max-width: min(100%, calc((100vh - 240px) * 1.78)) !important; border-width: 6px !important; border-radius: 12px !important; }
  .tbar-wrap { margin-top: -22px; }
}

/* ---------- Hero heading: lighter weight ---------- */
.htitle { font-weight: 600; letter-spacing: -.005em; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }

/* ---------- Uniform section heads: heading + one supporting line ---------- */
.why-box .sec-head h2 { display: block; margin-bottom: 0; }
.why-box .sec-head { margin-bottom: 30px; }
#testimonials .sec-head { margin-bottom: 30px; }
#faq .sec-head { margin-bottom: 32px; }

/* ---------- Instagram reels: cards + large viewer ---------- */
.reel-ig { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.reel-ig:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55); }
.reel-ig:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.reel-ig .play { width: 58px; height: 58px; font-size: 18px; transition: background .2s, transform .2s; }
.reel-ig:hover .play { background: var(--orange); border-color: var(--orange); transform: translate(-50%, -50%) scale(1.08); }
.reel-ig blockquote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.reel-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.reel-modal[hidden] { display: none; }
.rm-backdrop { position: absolute; inset: 0; background: rgba(20, 4, 6, .88); backdrop-filter: blur(6px); animation: rmFade .25s ease; }
.rm-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; animation: rmPop .3s cubic-bezier(.2, .8, .2, 1); }
.rm-frame { width: min(440px, 92vw, calc((100vh - 70px) * .5625)); aspect-ratio: 9 / 16; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.rm-frame video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.rm-nav, .rm-close { border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); transition: background .2s, color .2s; }
.rm-nav { width: 48px; height: 48px; font-size: 28px; line-height: 1; padding-bottom: 3px; }
.rm-nav:hover, .rm-close:hover { background: var(--orange); color: #fff; }
.rm-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; font-size: 26px; line-height: 1; z-index: 2; }
.rm-single .rm-nav { display: none; }
html.rm-open { overflow: hidden; }
@keyframes rmFade { from { opacity: 0; } }
@keyframes rmPop { from { opacity: 0; transform: scale(.94); } }
@media (max-width: 700px) {
  .rm-stage { gap: 0; }
  .rm-nav { position: absolute; bottom: 14px; z-index: 2; width: 42px; height: 42px; font-size: 24px; background: rgba(255, 255, 255, .92); }
  .rm-prev { left: 10px; } .rm-next { right: 10px; }
  .rm-close { top: 8px; right: 8px; }
  .rm-frame { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .rm-backdrop, .rm-stage { animation: none; } .reel-ig { transition: none; } }



/* Prevent hero image cropping */
.slide {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.slide img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
}

/* Slider wrapper */
.slides,
.slider,
.hero-slider,
.carousel-inner {
    height: auto;
}

/* ---------- Festive slide: banner image with the video in its red area ---------- */
.hhero .slide:not(.on) { pointer-events: none; }
.hhero .slide.fest {
  height: 100% !important;
  overflow: hidden !important;
  container-type: size;
  pointer-events: none;
  z-index: 3;
}
.hhero .slide.fest img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
}
/* The banner's red area starts where the people end (59% of the image), so its
   width is 41.5% of the rendered image: ~1.037x the hero height, or 41.5% of its width */
.fest-video {
  --red: max(103.7cqh, 41.47cqw);
  --fw: min(calc(var(--red) - 124px), calc((100cqh - 110px) * 1.2), 940px);
  position: absolute;
  width: var(--fw);
  /* sits a fixed 104px in from the right so it always clears the side tabs, and grows left into the red area */
  right: 104px;
  top: calc(50% - 16px);
  transform: translateY(-50%);
}
.fest-frame {
  box-sizing: border-box;
  padding: 6px;
  background: #FFF8E7;
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
.fest-greet {
  margin: calc(var(--fw) * .035) 0 0;
  text-align: center;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: clamp(26px, calc(var(--fw) * .078), 64px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-shadow: 0 3px 14px rgba(40, 0, 0, .55);
}
.fest-sub {
  margin: calc(var(--fw) * .028) 0 0;
  text-align: center;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-style: italic;
  font-size: clamp(15px, calc(var(--fw) * .036), 26px);
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(40, 0, 0, .55);
}
.fest-greet span { font-weight: 500; }
.fest-greet b { font-weight: 800; }
.fest-greet::after {
  content: "";
  display: block;
  width: 46%;
  height: 2px;
  margin: .32em auto 0;
  background: linear-gradient(90deg, transparent, #E9B949 20%, #E9B949 80%, transparent);
}
.fest-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  background: #000;
}
.hhero .slide.fest.on .fest-video { pointer-events: auto; }
.hhero .finder { transition: opacity .4s ease, visibility .4s; }
.hhero.fest-on .finder { opacity: 0; visibility: hidden; }
.hhero .dots { z-index: 4; }

@media (min-width: 768px) and (max-width: 1100px) {
  .hhero { min-height: 48vw; }
  .fest-video { top: calc(50% - 44px); }
  .fest-frame { padding: 5px; border-radius: 14px; }
  .fest-video iframe { border-radius: 10px; }
}

/* Phones: video on top, banner below it fading in from the hero colour */
@media (max-width: 767px) {
  .hhero { min-height: calc(155vw + 112px); }
  .hhero .slide.fest img {
    top: auto;
    bottom: 0;
    height: auto !important;
    aspect-ratio: 1080 / 1200;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
  }
  .fest-video {
    width: auto;
    left: 16px;
    right: 16px;
    top: 18px;
    transform: none;
  }
  .fest-frame { padding: 4px; border-radius: 11px; }
  .fest-video iframe { border-radius: 8px; }
  .fest-greet { font-size: 28px; margin-top: 10px; }
  .fest-sub { font-size: 15px; margin-top: 8px; }
}

/* Short laptop windows (scaled displays): the compact-hero rule above collapses the hero
   to its content, which squeezes the festive video. Keep it a proper banner height. */
@media (max-height: 640px) and (min-width: 768px) {
  .hhero { min-height: max(400px, calc(100vh - 130px)); }
  .fest-video { top: calc(50% - 12px); }
}

/* Finder card removed from the hero: let the copy use the full width on every breakpoint */
.hhero-in { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 767px) {
  /* without the finder the other slides would leave an empty band, so their photos fill the hero */
  .hhero .slide:not(.fest) { height: 100% !important; overflow: hidden !important; }
  .hhero .slide:not(.fest) img { height: 100% !important; object-fit: cover !important; object-position: 72% center !important; }
}

/* Why Choose Trackon stat tiles: centred content, larger icons */
.why-stat { text-align: center; }
.why-stat .ic { width: 64px; height: 64px; margin: 0 auto 14px; padding: 9px; }
.why-box .sec-head p { max-width: none; }
.why-box .sec-head { max-width: none; }

/* Service tabs: never more than two rows. Up to tablet width they sit three per row and
   a long name may wrap onto a second line inside its button */
@media (max-width: 900px) {
  .tabbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; }
  .tabbar button { white-space: normal; line-height: 1.25; padding: 9px 6px; font-size: 12.5px; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; }
}

/* Reel pop-up: Instagram-hosted reels */
.rm-frame.rm-ig { background: #fff; }
.rm-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.rm-ig-out { width: 100%; height: 100%; background: #000 center / cover no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 48px; }

/* 2026-10-22: festival videos above the footer, 3 columns */
#celebrations { padding-top: clamp(30px, 4vw, 56px); }
.vid-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.vid-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(23, 23, 23, .25); }
.vid-frame { position: relative; aspect-ratio: 16 / 9; background: #111; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-card figcaption { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font: 700 15.5px/1.3 var(--h); color: var(--ink); }
.vid-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; }
@media (max-width: 960px) { .vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vid-grid { grid-template-columns: 1fr; gap: 16px; } }
#celebrations .sec-head, #celebrations .sec-head p { max-width: none; }

/* 2026-10-22: smaller cards on the world map */
.intl .map .glass { padding: 7px 11px; font-size: 10.5px; border-radius: 10px; }
.intl .map .glass b { font-size: 12.5px; }
.intl .map .glass.g1 { top: 12px; right: 12px; }
.intl .map .glass.g2 { left: 12px; bottom: 12px; }

/* 2026-10-27: Diwali banner as slide 1 (greeting is part of the image, so no overlay and no copy on top) */
.hhero .slide.diwali.diwali img { object-position: 50% 30% !important; }
.hhero-shade { transition: opacity .6s ease; }
.hhero:has(.slide.diwali.on) .hhero-shade { opacity: 0; }
@media (max-width: 767px) {
  /* phone version is a tall layout made for the phone hero: greeting on top, family below */
  .hhero .slide.diwali.diwali img { object-position: 50% 0% !important; }
}

/* 2026-10-27: Diwali festive slide. The cleared wall in the banner runs from ~58% to ~87% of the image
   width (centre 72.5%). The image is centred with object-fit: cover, so its rendered width is
   max(slide width, slide height x 2.493); the video box is centred on 72.5% of that width. */
.hhero .slide.fest.diwali { background: #F9E8CB; }
.hhero .slide.fest.diwali img { object-position: 50% 50% !important; }
.hhero .slide.fest.diwali .fest-video {
  --wi: max(100cqw, 249.3cqh);
  --fw: min(calc(var(--wi) * .255), calc((100cqh - 170px) * 1.15), 760px);
  width: var(--fw);
  right: auto;
  left: calc((100cqw - var(--wi)) / 2 + var(--wi) * .725 - var(--fw) / 2);
  top: calc(50% - 22px);
}
.hhero .slide.fest.diwali .fest-greet { color: #8E1B1E; text-shadow: none; }
.hhero .slide.fest.diwali .fest-greet span { font-weight: 600; }
.hhero .slide.fest.diwali .fest-sub { color: #4A2A1C; text-shadow: none; font-style: normal; font-weight: 500; }
.hhero .slide.fest.diwali .fest-greet::after { background: linear-gradient(90deg, transparent, #D99A2B 20%, #D99A2B 80%, transparent); }
@media (max-width: 767px) {
  /* phones: video on top on the cream background, family photo below */
  .hhero .slide.fest.diwali .fest-video { width: auto; left: 16px; right: 16px; top: 18px; }
}

/* 2026-10-27 client feedback: "Happy" bold, less gap in the greeting */
.hhero .slide.fest.diwali .fest-greet span { font-weight: 800; }
.hhero .slide.fest.diwali .fest-greet { margin-top: calc(var(--fw) * .022); line-height: 1.05; }
.hhero .slide.fest.diwali .fest-greet::after { width: 38%; margin-top: .16em; }
.hhero .slide.fest.diwali .fest-sub { margin-top: calc(var(--fw) * .016); line-height: 1.3; }

@media (max-width: 767px) {
  /* Option A (default) on phones: video on top, greeting, family photo below; tighter and bigger */
  .hhero .slide.fest.diwali .fest-video { left: 12px; right: 12px; top: 12px; }
  .hhero .slide.fest.diwali .fest-greet { font-size: clamp(28px, 8.4vw, 36px); margin-top: 10px; }
  .hhero .slide.fest.diwali .fest-greet::after { margin-top: 6px; }
  .hhero .slide.fest.diwali .fest-sub { font-size: clamp(14px, 4vw, 16px); margin-top: 6px; }

  /* Option B (preview: add ?hero=b to the URL): family banner on top, greeting, video at the bottom */
  .hhero.hero-b .slide.fest.diwali img {
    top: 0; bottom: auto; height: auto !important; aspect-ratio: 1080 / 863; object-position: 50% 100% !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .hhero.hero-b .slide.fest.diwali .fest-video { top: calc(79.9cqw - 4px); display: flex; flex-direction: column; }
  .hhero.hero-b .slide.fest.diwali .fest-greet { order: 1; margin-top: 0; }
  .hhero.hero-b .slide.fest.diwali .fest-sub { order: 2; margin-bottom: 12px; }
  .hhero.hero-b .slide.fest.diwali .fest-frame { order: 3; }
}

/* 2026-10-27 client feedback: one phone layout for every home slide.
   Headline, text and buttons sit on maroon at the top; the photo (its own phone crop) sits below,
   fading into the maroon, like the festive slide. No more slicing a wide desktop photo. */
@media (max-width: 767px) {
  .hhero .slide.slide:not(.fest) { height: 100% !important; overflow: hidden !important; }
  .hhero .slide.slide:not(.fest) img {
    position: absolute !important; left: 0; right: 0; top: auto !important; bottom: 0 !important;
    width: 100% !important; height: auto !important; aspect-ratio: 9 / 10;
    object-fit: cover !important; object-position: 50% 50% !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%); mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
  }
  /* the doorstep-delivery photo is a tall portrait: keep the faces in frame */
  .hhero .slide.slide:nth-child(2) img { object-position: 50% 26% !important; }
  .hhero-shade { background: linear-gradient(180deg, rgba(74, 12, 14, .55) 0%, rgba(74, 12, 14, .25) 30%, rgba(74, 12, 14, 0) 44%) !important; }
  .hhero-copy .htitle { margin-bottom: 8px; }
  .hhero-copy .hsub { margin-bottom: 14px; }
}
@media (max-width: 767px) {
  /* a little breathing room between the menu bar and the headline */
  .hhero .hhero-in { padding-top: 10px; }
}

/* 2026-10-27: home photo slides on phones match the other pages: photo on top (no tint), text below on maroon.
   The text area is pushed below a square photo on every slide, so the hero keeps one height while slides rotate. */
@media (max-width: 767px) {
  .hhero .slide.slide:not(.fest) img {
    top: 0 !important; bottom: auto !important; aspect-ratio: 1 / 1;
    -webkit-mask-image: none; mask-image: none;
  }
  .hhero .slide.slide:not(.fest)::after { content: ""; position: absolute; left: 16px; top: 100vw; width: 56px; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
  .hhero-shade { display: none; }
  .hhero { align-items: flex-start !important; }
  .hhero .hhero-in { padding-top: calc(100vw - 6px) !important; }
  .hhero-copy .htitle, .hhero-copy .hsub { text-shadow: none !important; }
}

/* 2026-10-27 client feedback: phone photo slides show the whole scene (3:2 phone crops),
   the hero is only as tall as photo + text on those slides, and no fade over the Diwali faces. */
@media (max-width: 767px) {
  .hhero .slide.slide:not(.fest) img { aspect-ratio: 3 / 2; object-position: 50% 50% !important; }
  .hhero .slide.slide:not(.fest)::after { top: 66.667vw; }
  .hhero .hhero-in { padding-top: calc(66.667vw - 6px) !important; }
  .hhero:not(.fest-on) { min-height: 0 !important; }
  .hhero { transition: min-height .5s ease; }
  .hhero .slide.fest.diwali.diwali img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%); mask-image: linear-gradient(to bottom, transparent 0, #000 5%); }
}

/* 2026-10-28: short phone/tablet windows. The photo may not push the buttons under the sticky
   Ship Now / Franchise Enquiry bar, so its height is capped by the screen height as well as its width. */
@media (max-width: 767px) {
  .hhero { --ph: min(66.667vw, 46vh); --ph: min(66.667vw, 46svh); }
  .hhero .slide.slide:not(.fest) img { aspect-ratio: auto !important; height: var(--ph) !important; }
  .hhero .slide.slide:not(.fest)::after { top: var(--ph); }
  .hhero .hhero-in { padding-top: calc(var(--ph) - 6px) !important; }
}

/* 2026-10-28: Diwali slide on phones. The phone photo no longer carries an empty cream top
   (cropped off, seam softened in the file), so the family sits right under the greeting and the
   slide is only as tall as video + greeting + photo. */
@media (max-width: 767px) {
  .hhero.fest-on { min-height: calc(139.6vw + 88px) !important; }
  .hhero .slide.fest.diwali.diwali img:not(.x) { aspect-ratio: 1080 / 900; object-position: 50% 0% !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%); mask-image: linear-gradient(to bottom, transparent 0, #000 6%); }
}
/* 2026-10-28: Diwali phone photo re-cropped taller (fade kept above the heads) */
@media (max-width: 767px) {
  .hhero.fest-on { min-height: calc(144.2vw + 88px) !important; }
  .hhero .slide.fest.diwali.diwali img:not(.x) { aspect-ratio: 1080 / 950; -webkit-mask-image: none; mask-image: none; }
}
/* 2026-10-28: Diwali phone photo now cut straight from the original banner (no haze over the heads) */
@media (max-width: 767px) {
  .hhero.fest-on { min-height: calc(130.3vw + 88px) !important; }
  .hhero .slide.fest.diwali.diwali img:not(.x) { aspect-ratio: 1080 / 800; }
}

/* 2026-10-28: Diwali slide on phones, like the other slides: photo on top, greeting below it,
   video at the bottom. The photo fades into the cream only along its bottom edge (below the people). */
@media (max-width: 767px) {
  .hhero.fest-on { min-height: calc(130.32vw + 172px) !important; }
  .hhero .slide.fest.diwali.diwali img:not(.x) {
    top: 0 !important; bottom: auto !important; aspect-ratio: 1080 / 800; object-position: 50% 0% !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  }
  .hhero .slide.fest.diwali .fest-video { top: calc(74.07cqw + 6px); left: 12px; right: 12px; display: flex; flex-direction: column; }
  .hhero .slide.fest.diwali .fest-greet { order: 1; margin-top: 0; }
  .hhero .slide.fest.diwali .fest-sub { order: 2; margin: 6px 0 12px; }
  .hhero .slide.fest.diwali .fest-frame { order: 3; }
}

/* 2026-10-28 client feedback: desktop slides, lighter red on the left.
   The three newer photos already carry their own red fade, so the overlay on them is only a light
   wash for the text; the doorstep photo (no fade of its own) keeps a softer version of the old overlay. */
@media (min-width: 768px) {
  .hhero .hhero-shade { background: linear-gradient(90deg, rgba(122, 20, 24, .78) 0%, rgba(122, 20, 24, .62) 36%, rgba(122, 20, 24, .25) 56%, rgba(122, 20, 24, 0) 72%) !important; }
  .hhero:has(.slide.on img[src*="new-home-hero"]) .hhero-shade { background: linear-gradient(90deg, rgba(122, 20, 24, .22) 0%, rgba(122, 20, 24, .12) 34%, rgba(122, 20, 24, 0) 52%) !important; }
}