/* Trackon — content pages (blog, company, support, tracking). Uses the tokens from site.css. */

/* ---------- Page hero ---------- */
.pg-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--red-900) 0%, var(--red) 58%, #B4302F 100%); padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px); }
.pg-hero::after { content: ""; position: absolute; z-index: 1; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 112, 33, .35), transparent 65%); pointer-events: none; }
.pg-hero.has-photo { background: var(--red-900); }
.pg-hero .pg-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.pg-hero.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(74, 12, 14, .94) 0%, rgba(74, 12, 14, .82) 45%, rgba(74, 12, 14, .35) 100%); }
.pg-hero .wrap { position: relative; z-index: 2; }
.pg-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--h); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFD9C2; margin-bottom: 16px; }
.pg-eyebrow a { color: #FFD9C2; }
.pg-eyebrow a:hover { color: #fff; }
.pg-eyebrow i { font-style: normal; opacity: .6; }
.pg-hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); font-weight: 800; line-height: 1.12; max-width: 900px; }
.pg-hero h1 .hl { color: var(--orange); }
.pg-hero .lede { margin-top: 18px; max-width: 680px; font-size: clamp(15.5px, 1.3vw, 18px); color: rgba(255, 255, 255, .86); line-height: 1.7; }
.pg-hero .pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pg-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.pg-meta span { display: inline-flex; align-items: center; gap: 7px; }
.pg-meta svg { width: 16px; height: 16px; color: var(--orange); }

/* ---------- Section helpers ---------- */
.pg-sec { padding: clamp(56px, 6vw, 88px) 0; }
.pg-sec.white { background: #fff; }
.pg-sec.tint { background: linear-gradient(180deg, #FFF8F3, #fff); }
.pg-head { max-width: 760px; margin-bottom: 40px; }
.pg-head.center { margin-inline: auto; text-align: center; }
.pg-head h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.pg-head p { margin-top: 14px; color: var(--muted); font-size: 16px; }
.pg-kicker { display: block; font-family: var(--h); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }

/* ---------- Blog index ---------- */
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.blog-filter button { font-family: var(--h); font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: all .2s; }
.blog-filter button:hover, .blog-filter button.on { background: var(--red); border-color: var(--red); color: #fff; }
.blog-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 40px; }
.blog-feature .bf-img { position: relative; min-height: 340px; }
.blog-feature .bf-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.blog-feature:hover .bf-img img { transform: scale(1.04); }
.blog-feature .bf-tx { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.blog-feature h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; margin: 12px 0 14px; }
.blog-feature p { color: var(--muted); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.post-card .pc-img { aspect-ratio: 16 / 9; overflow: hidden; background: #F3ECEA; }
.post-card .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.post-card:hover .pc-img img { transform: scale(1.06); }
.post-card .pc-tx { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 18px; font-weight: 700; line-height: 1.4; margin: 10px 0; }
.post-card p { font-size: 14.5px; color: var(--muted); flex: 1; }
.post-tag { display: inline-flex; align-self: flex-start; font-family: var(--h); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); background: #F8EEEE; border-radius: 999px; padding: 5px 11px; }
.post-date { font-size: 13px; color: var(--muted); margin-left: 10px; }
.read-more { margin-top: 16px; font-family: var(--h); font-weight: 700; font-size: 14px; color: var(--red); display: inline-flex; gap: 6px; }
.read-more i { font-style: normal; transition: transform .25s; }
.post-card:hover .read-more i, .blog-feature:hover .read-more i { transform: translateX(5px); }

/* ---------- Article ---------- */
.art-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.article { background: #fff; border-radius: 22px; padding: clamp(24px, 4vw, 56px); box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 16.5px; line-height: 1.85; }
.article > p:first-of-type { font-size: 18.5px; color: var(--ink); }
.article h2, .article h3, .article h4, .article h5 { font-family: var(--h); color: var(--ink); line-height: 1.3; margin: 38px 0 14px; scroll-margin-top: 110px; }
.article h2 { font-size: 26px; font-weight: 800; }
.article h3 { font-size: 22px; font-weight: 700; }
.article h4, .article h5 { font-size: 18px; font-weight: 700; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 18px 22px; padding: 0; }
.article li { margin-bottom: 9px; }
.article li::marker { color: var(--orange); font-weight: 700; }
.article a { color: var(--orange-600); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.article strong, .article b { color: var(--ink); }
.article table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.article td, .article th { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.article th { background: #FBF6F5; font-family: var(--h); }
.art-fig { margin: 30px 0; }
.art-fig img { width: 100%; border-radius: 16px; aspect-ratio: 16 / 9; object-fit: cover; }
.art-cover { margin: 0 0 30px; }
.art-cover img { width: 100%; border-radius: 18px; aspect-ratio: 21 / 9; object-fit: cover; }
.article .faq-block { margin-top: 44px; padding-top: 10px; border-top: 1px solid var(--line); }
.art-aside { position: sticky; top: 110px; display: grid; gap: 22px; }
.aside-card { background: #fff; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm); }
.aside-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toc a { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-2); padding: 7px 10px; border-radius: 8px; border-left: 2px solid transparent; transition: all .2s; }
.toc a:hover, .toc a.on { background: #FBF3F0; border-left-color: var(--orange); color: var(--red); }
.aside-cta { background: linear-gradient(150deg, var(--red-900), var(--red)); color: #fff; }
.aside-cta h4 { color: #fff; font-size: 18px; }
.aside-cta p { font-size: 14px; color: rgba(255, 255, 255, .82); margin-bottom: 16px; }
.share { display: flex; gap: 10px; }
.share a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #F8EEEE; color: var(--red); transition: all .2s; }
.share a:hover { background: var(--red); color: #fff; }
.share svg { width: 17px; height: 17px; }
.reading-bar { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--orange); z-index: 200; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(32px, 5vw, 60px); background: linear-gradient(130deg, var(--red-900), var(--red) 60%, #B4302F); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.cta-band::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 112, 33, .4), transparent 65%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; }
.cta-band p { color: rgba(255, 255, 255, .85); margin-top: 10px; max-width: 620px; }
.cta-band .pg-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1100px) {
  .art-wrap { grid-template-columns: 1fr; }
  .art-aside { position: static; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature .bf-img { min-height: 240px; }
  .cta-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article { font-size: 15.5px; }
}

/* ---------- Help cards (support, contact) ---------- */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.help-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #F0D9D6; }
.help-card .hc-ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #F8EEEE; color: var(--red); transition: all .3s; }
.help-card:hover .hc-ic { background: var(--red); color: #fff; }
.help-card .hc-ic svg { width: 24px; height: 24px; }
.help-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.help-card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.overlap { margin-top: -54px; position: relative; z-index: 2; }

/* ---------- Side tabs ---------- */
.tabs-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 34px; align-items: start; scroll-margin-top: 100px; }
.tab-list { position: sticky; top: 104px; display: grid; gap: 6px; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--shadow-sm); }
.tab-list button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-family: var(--h); font-weight: 600; font-size: 14px; color: var(--ink-2); background: none; border: 0; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: all .2s; }
.tab-list button svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; }
.tab-list button:hover { background: #FBF3F0; }
.tab-list button.on { background: linear-gradient(135deg, var(--red-900), var(--red)); color: #fff; }
.tab-list button.on svg { color: #FFD9C2; }
.tab-pane { background: #fff; border-radius: 22px; padding: clamp(24px, 3.5vw, 48px); box-shadow: var(--shadow-sm); }
.tab-pane > h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin-bottom: 8px; }
.tab-pane > .pane-sub { color: var(--muted); margin-bottom: 26px; }
.tab-pane .article { box-shadow: none; padding: 0; border-radius: 0; font-size: 15.5px; }
.tab-pane .article > p:first-of-type { font-size: 16px; color: var(--ink-2); }
.tab-pane .article table { font-size: 14px; }
.tab-pane .article tr:nth-child(even) td { background: #FCFAF9; }
.table-scroll { overflow-x: auto; border-radius: 12px; }
.note-box { display: flex; gap: 14px; background: #FFF6EF; border: 1px solid var(--orange-100); border-radius: 14px; padding: 16px 18px; margin: 18px 0; font-size: 14.5px; }
.note-box svg { width: 22px; height: 22px; color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.note-box.warn { background: #FDF0F0; border-color: #F3D0D0; }
.note-box.warn svg { color: var(--red); }

/* ---------- Download cards ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.doc-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fff; transition: all .25s; }
.doc-card:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.doc-card .dc-ic { width: 42px; height: 48px; flex-shrink: 0; border-radius: 8px; background: #FDECEC; color: var(--red); display: grid; place-items: center; font-family: var(--h); font-size: 10.5px; font-weight: 800; }
.doc-card b { display: block; font-family: var(--h); font-size: 14px; color: var(--ink); line-height: 1.35; }
.doc-card small { color: var(--muted); font-size: 12.5px; }
.doc-card .dl { margin-left: auto; color: var(--orange); }
.doc-card .dl svg { width: 20px; height: 20px; }

/* ---------- Volumetric calculator ---------- */
.vol-calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; background: linear-gradient(135deg, #FFF8F3, #fff); border: 1px solid var(--orange-100); border-radius: 18px; padding: 24px; margin: 22px 0; }
.vol-calc h3 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.vol-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vol-fields label, .vol-mode label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 700; font-family: var(--h); color: var(--ink-2); }
.vol-calc input, .vol-calc select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 15px; background: #fff; }
.vol-calc input:focus, .vol-calc select:focus { outline: 2px solid var(--orange-100); border-color: var(--orange); }
.vol-mode { margin-top: 10px; }
.vol-out { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(150deg, var(--red-900), var(--red)); color: #fff; border-radius: 16px; padding: 20px; }
.vol-out b { font-family: var(--h); font-size: 42px; font-weight: 800; line-height: 1; }
.vol-out span { font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 8px; }
.vol-figure { display: grid; grid-template-columns: 1fr 240px; gap: 22px; align-items: center; }
.vol-figure img, .fuel-img { border-radius: 14px; width: 100%; height: auto; }

/* ---------- Contact strip ---------- */
.contact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-strip > div { background: #fff; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm); }
.contact-strip h3 { font-size: 15px; font-weight: 800; margin: 12px 0 6px; }
.contact-strip p, .contact-strip a { font-size: 15px; color: var(--ink-2); }
.contact-strip a:hover { color: var(--orange); }
.contact-strip .hc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #F8EEEE; color: var(--red); }
.contact-strip .hc-ic svg { width: 22px; height: 22px; }

@media (max-width: 1100px) {
  .help-grid, .contact-strip { grid-template-columns: repeat(2, 1fr); }
  .tabs-layout { grid-template-columns: 1fr; }
  .tab-list { position: static; grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .vol-calc, .vol-figure { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .help-grid, .contact-strip, .doc-grid, .tab-list { grid-template-columns: 1fr; }
  .vol-fields { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Stats band ---------- */
.stat-band { display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.stat-band > div { padding: 26px 22px; text-align: center; border-right: 1px solid var(--line); }
.stat-band > div:last-child { border-right: 0; }
.stat-band b { display: block; font-family: var(--h); font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-band b em { font-style: normal; color: var(--orange); }
.stat-band small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }

/* ---------- Split story ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split.rev > :first-child { order: 2; }
.split-img { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-img .badge { position: absolute; left: 18px; bottom: 18px; background: rgba(255, 255, 255, .95); border-radius: 14px; padding: 12px 16px; font-family: var(--h); font-weight: 700; font-size: 13.5px; color: var(--ink); box-shadow: var(--shadow); }
.split-img .badge b { display: block; font-size: 22px; color: var(--red); }
.split-tx h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; margin-bottom: 18px; }
.split-tx p { color: var(--ink-2); font-size: 16px; line-height: 1.8; margin-bottom: 14px; }
.ticklist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ticklist li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink); }
.ticklist li::before { content: "✓"; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, #E2CFCD 0 8px, transparent 8px 14px); }
.tl-item { position: relative; padding-top: 70px; }
.tl-item::before { content: ""; position: absolute; top: 18px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); box-shadow: 0 0 0 6px var(--bg); }
.tl-item .yr { position: absolute; top: 14px; left: 34px; font-family: var(--h); font-weight: 800; font-size: 20px; color: var(--red); }
.tl-item h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
.tl-item p { font-size: 14px; color: var(--muted); }

/* ---------- Value / feature cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.c5 { grid-template-columns: repeat(5, 1fr); }
.v-card { position: relative; background: #fff; border-radius: 20px; padding: 28px 26px; border: 1px solid var(--line); overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.v-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, var(--red-900), var(--red)); opacity: 0; transition: opacity .35s; }
.v-card > * { position: relative; }
.v-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.v-card:hover::before { opacity: 1; }
.v-card:hover h3, .v-card:hover p { color: #fff; }
.v-card .vc-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: #F8EEEE; color: var(--red); margin-bottom: 18px; transition: all .35s; }
.v-card:hover .vc-ic { background: rgba(255, 255, 255, .15); color: #fff; }
.v-card .vc-ic svg { width: 26px; height: 26px; }
.v-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; transition: color .35s; }
.v-card p { font-size: 14.5px; color: var(--muted); line-height: 1.65; transition: color .35s; }
.vm-card { border-radius: 22px; padding: clamp(28px, 4vw, 44px); color: #fff; background: linear-gradient(140deg, var(--red-900), var(--red)); position: relative; overflow: hidden; }
.vm-card.alt { background: linear-gradient(140deg, #2B2B2B, #111); }
.vm-card::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 112, 33, .38), transparent 65%); }
.vm-card span { font-family: var(--h); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FFD9C2; }
.vm-card h3 { color: #fff; font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.35; margin-top: 10px; position: relative; }

/* ---------- Jobs ---------- */
.job-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.job-tools select, .job-tools input { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px; background: #fff; min-width: 220px; }
.job-list { display: grid; gap: 14px; }
.job { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; transition: all .25s; }
.job:hover { border-color: #F0D9D6; box-shadow: var(--shadow); transform: translateY(-2px); }
.job h3 { font-size: 18px; font-weight: 700; }
.job .job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.job .job-meta span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: #F6F2F0; border-radius: 999px; padding: 5px 12px; }
.job-empty { display: none; text-align: center; padding: 30px; color: var(--muted); background: #fff; border-radius: 18px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; background: #fff; border-radius: 20px; padding: 26px; border: 1px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); display: block; font-family: var(--h); font-size: 40px; font-weight: 800; color: #EBD3D3; line-height: 1; margin-bottom: 14px; }
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--muted); }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-card .nc-img { aspect-ratio: 16 / 9; overflow: hidden; background: #F3ECEA; position: relative; }
.news-card .nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.news-card:hover .nc-img img { transform: scale(1.06); }
.news-card .src { position: absolute; left: 14px; top: 14px; background: rgba(255, 255, 255, .95); border-radius: 999px; padding: 6px 12px; font-family: var(--h); font-size: 12px; font-weight: 800; color: var(--red); }
.news-card .nc-tx { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.news-card h3 { font-size: 17.5px; font-weight: 700; line-height: 1.4; margin: 8px 0 10px; }
.news-card p { font-size: 14.5px; color: var(--muted); flex: 1; }
.news-kind { font-family: var(--h); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.media-box { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: #fff; border-radius: 22px; padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); border-left: 5px solid var(--orange); }
.media-box h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.media-box p { color: var(--muted); }

@media (max-width: 1100px) {
  .stat-band { grid-template-columns: repeat(3, 1fr); }
  .stat-band > div:nth-child(3) { border-right: 0; }
  .split, .split.rev { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .timeline, .card-grid, .card-grid.c5, .news-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .timeline::before { display: none; }
  .media-box { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .timeline, .card-grid, .card-grid.c2, .card-grid.c5, .news-grid, .steps { grid-template-columns: 1fr; }
  .job { grid-template-columns: 1fr; }
}

/* ---------- FAQ spacing inside content pages ---------- */
.faq-list { display: grid; gap: 12px; margin-top: 18px; }
.faq-list .faq-item { margin: 0; border-radius: 14px; }
.article .faq-block h2 { margin-bottom: 6px; }
.article .faq-answer { margin: 0; }

/* ---------- Business enquiry block (same as homepage), scoped so service .ticks rules don't leak in ---------- */
.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 { position: relative; background: #F4F2F0; padding: 28px; }
.lead-box .ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.lead-box .ticks li { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--h); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); transition: none; }
.lead-box .ticks li:hover { transform: none; }
.lead-box .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; }
.lead-box .ticks .tick svg { stroke: var(--orange); }
.lead-box .ticks.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lead-box .ticks.chips li, .lead-box .ticks.chips li:hover { background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px 8px 8px; font-size: 13px; }
@media (max-width: 1100px) { .lead-box { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lead-box .l { padding: 26px 20px; } .lead-box .r { padding: 16px; } }

/* ---------- Spacing fixes ---------- */
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.split-tx .pg-actions { margin-top: 24px; }
.media-box .btn svg { margin-right: 4px; }
.job .btn { white-space: nowrap; }
.help-card h3 { margin-bottom: 6px; }
.pg-head + .card-grid, .pg-head + .news-grid, .pg-head + .blog-grid { margin-top: 0; }

/* ---------- FAQ page ---------- */
.faq-wrap { max-width: 980px; }
.faq-search { position: relative; margin-bottom: 26px; }
.faq-search svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); }
.faq-search input { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 18px 54px; font: inherit; font-size: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.faq-search input:focus { outline: 3px solid var(--orange-100); border-color: var(--orange); }
.faq-answer a { color: var(--orange-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-answer p, .faq-answer ul, .faq-answer ol { margin: 0 0 10px; }
.faq-answer ul, .faq-answer ol { padding-left: 20px; }

/* ---------- Contact ---------- */
.map-card { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: #F3ECEA; }
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Tracking ---------- */
.track-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: clamp(22px, 3vw, 36px); }
.track-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.track-tabs button { font-family: var(--h); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.track-tabs button.on { background: var(--red); border-color: var(--red); color: #fff; }
.track-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.track-form input, .track-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font: inherit; font-size: 16px; background: #FCFAF9; }
.track-form textarea { min-height: 110px; resize: vertical; }
.track-form input:focus, .track-form textarea:focus { outline: 3px solid var(--orange-100); border-color: var(--orange); background: #fff; }
.track-form .btn { align-self: start; padding: 16px 28px; }
.track-hint { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.track-err { margin-top: 10px; font-size: 14px; color: var(--red); min-height: 1em; }

/* ---------- 404 ---------- */
.nf { position: relative; overflow: hidden; min-height: calc(100vh - 180px); display: flex; align-items: center; padding: 70px 0; background: radial-gradient(circle at 85% 20%, rgba(243, 112, 33, .12), transparent 40%), linear-gradient(180deg, #FFF8F3, #fff); }
.nf-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.nf-code { font-family: var(--h); font-weight: 800; font-size: clamp(90px, 14vw, 180px); line-height: .9; letter-spacing: -.04em; background: linear-gradient(135deg, var(--red-900), var(--red) 55%, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; margin: 16px 0 12px; }
.nf p { color: var(--muted); font-size: 16.5px; max-width: 540px; }
.nf .pg-actions { margin-top: 26px; }
.nf-search { display: flex; gap: 10px; margin-top: 26px; max-width: 520px; }
.nf-search input { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 15px; background: #fff; }
.nf-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; max-width: 540px; }
.nf-links a { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-family: var(--h); font-weight: 600; font-size: 14px; color: var(--ink); transition: all .2s; }
.nf-links a:hover { border-color: var(--orange); color: var(--red); transform: translateX(3px); }
.nf-links a::before { content: "→"; color: var(--orange); }
.nf-visual { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1 / 1; }
.nf-visual img { width: 100%; height: 100%; object-fit: cover; }
.nf-visual .nf-tag { position: absolute; left: 20px; bottom: 20px; right: 20px; background: rgba(255, 255, 255, .96); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); font-family: var(--h); }
.nf-visual .nf-tag b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.nf-visual .nf-tag span { font-weight: 800; color: var(--red); font-size: 17px; }
@media (max-width: 1100px) { .nf-grid { grid-template-columns: 1fr; } .nf-visual { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .track-form { grid-template-columns: 1fr; } .nf-links { grid-template-columns: 1fr; } .nf-search { flex-direction: column; } }

/* ---------- Press photos: keep faces in frame ---------- */
.news-card.media .nc-img { aspect-ratio: 4 / 3; }
.news-card.media .nc-img img { object-position: 50% 12%; }

/* ---------- Gallery ---------- */
.blog-filter button em { font-style: normal; opacity: .6; margin-left: 4px; font-size: 12px; }
.g-grid { columns: 4 260px; column-gap: 16px; }
.g-tile { display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; background: #F3ECEA; border-radius: 16px; overflow: hidden; position: relative; cursor: zoom-in; break-inside: avoid; }
.g-tile img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.g-tile span { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 255, 255, .95); color: var(--red); font-family: var(--h); font-weight: 800; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: all .3s; }
.g-tile:hover img { transform: scale(1.05); }
.g-tile:hover span, .g-tile:focus-visible span { opacity: 1; transform: none; }
.g-tile[hidden] { display: none; }
.g-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.g-video { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.g-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #1a0d0c; object-fit: cover; }
.g-video figcaption { padding: 14px 18px; font-family: var(--h); font-weight: 700; font-size: 15px; }
.g-box { position: fixed; inset: 0; z-index: 9999; background: rgba(20, 8, 7, .92); display: flex; align-items: center; justify-content: center; padding: 60px 70px; }
.g-box[hidden] { display: none; }
.g-box figure { margin: 0; text-align: center; max-width: 100%; }
.g-box img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.g-box figcaption { color: #fff; opacity: .8; font-size: 14px; margin-top: 12px; }
.g-box button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s; }
.g-box button:hover { background: var(--orange); }
.g-x { top: 18px; right: 18px; }
.g-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.g-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Awards ---------- */
.aw-feature { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 44px); align-items: center; background: #fff; border-radius: 24px; padding: clamp(26px, 4vw, 46px); box-shadow: var(--shadow-lg); border-top: 5px solid var(--orange); }
.aw-feature h2 { font-size: clamp(24px, 3vw, 34px); margin: 6px 0 12px; }
.aw-feature p { color: var(--muted); max-width: 720px; }
.aw-feature .pg-actions { margin-top: 20px; }
.aw-medal { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #FFB36B, var(--orange) 45%, #C2410C); color: #fff; display: grid; place-items: center; align-content: center; gap: 4px; box-shadow: 0 14px 34px rgba(242, 106, 33, .35), inset 0 0 0 8px rgba(255, 255, 255, .25); }
.aw-medal svg { width: 54px; height: 54px; }
.aw-medal b { font-family: var(--h); font-size: 22px; font-weight: 800; }
.aw-tl { grid-template-columns: repeat(4, 1fr); }
.aw-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aw-ph { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.aw-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.aw-ph:hover img { transform: scale(1.06); }

/* ---------- Packaging guide ---------- */
.pk-list { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.pk-list h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.pk-list.no .ticklist li::before { content: "✕"; background: var(--red); }

@media (max-width: 960px) {
  .g-videos { grid-template-columns: 1fr; }
  .aw-feature { grid-template-columns: 1fr; text-align: center; }
  .aw-medal { margin: 0 auto; width: 120px; height: 120px; }
  .aw-feature .pg-actions { justify-content: center; }
  .aw-tl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .g-grid { columns: 2 140px; column-gap: 10px; }
  .g-tile { margin-bottom: 10px; border-radius: 12px; }
  .g-box { padding: 60px 10px; }
  .g-prev, .g-next { top: auto; bottom: 14px; transform: none; }
  .aw-tl { grid-template-columns: 1fr; }
}

/* ---------- Life at Trackon ---------- */
.btn .btn-ic { width: 15px; height: 15px; margin-right: 2px; }
.lt-jump { position: sticky; top: var(--nav-top, 64px); z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.lt-jump .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.lt-jump .wrap::-webkit-scrollbar { display: none; }
.lt-jump a { flex-shrink: 0; font-family: var(--h); font-weight: 700; font-size: 13px; color: var(--ink); padding: 8px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.lt-jump a:hover { background: #FFF1E6; color: var(--orange); }
#values, #inclusion, #growth, #wellness, #celebrations, #impact, #responsibility, #film { scroll-margin-top: 130px; }

.lt-values { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: stretch; }
.lt-vtabs { display: grid; gap: 10px; align-content: start; }
.lt-vtabs button { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-family: var(--h); font-weight: 700; font-size: 15.5px; color: var(--ink); cursor: pointer; transition: all .25s; }
.lt-vtabs button svg { width: 22px; height: 22px; color: var(--orange); flex-shrink: 0; transition: color .25s; }
.lt-vtabs button:hover { border-color: var(--orange); }
.lt-vtabs button.on { background: linear-gradient(135deg, var(--red-900), var(--red)); color: #fff; border-color: transparent; box-shadow: var(--shadow); }
.lt-vtabs button.on svg { color: #FFB36B; }
.lt-vpane { display: grid; grid-template-columns: 1.05fr 1fr; background: #FBF6F4; border-radius: 24px; overflow: hidden; min-height: 380px; animation: ltFade .45s ease; }
.lt-vpane[hidden] { display: none; }
.lt-vimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-vtx { padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.lt-vic { width: 54px; height: 54px; border-radius: 16px; background: var(--orange); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.lt-vic svg { width: 28px; height: 28px; }
.lt-vtx h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; margin-bottom: 12px; }
.lt-vtx .lead { font-family: var(--h); font-weight: 600; color: var(--red); font-size: 16.5px; margin-bottom: 10px; }
.lt-vtx p { color: var(--muted); }
@keyframes ltFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lt-collage { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 5 / 4; }
.lt-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.lt-collage img:first-child { grid-row: span 2; }
.split-tx .pg-actions { margin-top: 22px; }

.lt-growth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lt-gcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; overflow: hidden; transition: transform .35s, box-shadow .35s; }
.lt-gcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.lt-gcard > svg { position: relative; width: 34px; height: 34px; color: var(--orange); margin-bottom: 16px; }
.lt-gcard h3, .lt-gcard p { position: relative; }
.lt-gcard h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.lt-gcard p { color: var(--muted); font-size: 15px; }
.lt-gnum { position: absolute; right: 20px; top: 10px; font-family: var(--h); font-weight: 800; font-size: 64px; line-height: 1; color: #F6ECE8; }

.lt-banner { position: relative; background-size: cover; background-position: center 35%; padding: clamp(70px, 10vw, 130px) 0; }
.lt-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60, 10, 8, .88) 0%, rgba(60, 10, 8, .55) 50%, rgba(60, 10, 8, .1) 100%); }
.lt-banner .wrap { position: relative; }
.lt-banner-box { max-width: 520px; color: #fff; }
.lt-banner-box .pg-kicker { color: #FFB36B; }
.lt-banner-box h2 { color: #fff; font-size: clamp(28px, 3.6vw, 44px); margin: 8px 0 14px; }
.lt-banner-box p { color: rgba(255, 255, 255, .85); margin-bottom: 24px; }

.lt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.lt-feature { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s; }
.lt-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.lt-fimg { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.lt-fimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.lt-feature:hover .lt-fimg img { transform: scale(1.05); }
.lt-fimg span { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .96); color: var(--red); font-family: var(--h); font-weight: 800; font-size: 13px; padding: 8px 14px; border-radius: 999px; }
.lt-fimg span svg { width: 16px; height: 16px; color: var(--orange); }
.lt-ftx { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.lt-ftx h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.lt-ftx p { color: var(--muted); flex: 1; }
.lt-ftx .read { margin-top: 16px; font-family: var(--h); font-weight: 700; color: var(--orange); }

.lt-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
.lt-mo { position: relative; border-radius: 18px; overflow: hidden; display: block; }
.lt-mo:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.lt-mo:nth-child(4) { grid-column: span 2; }
.lt-mo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.lt-mo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(40, 8, 6, .75)); }
.lt-mo span { position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff; font-family: var(--h); font-weight: 800; font-size: 16px; }
.lt-mo:hover img { transform: scale(1.07); }

.lt-impact { background: linear-gradient(180deg, #FFF8F3, #FBF1EC); }
.lt-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.lt-focus div { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.lt-focus svg { width: 22px; height: 22px; color: var(--orange); flex-shrink: 0; }
.lt-focus b { font-family: var(--h); font-size: 15px; }

.lt-rtabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.lt-rtabs button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: var(--h); font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; transition: all .2s; }
.lt-rtabs button svg { width: 18px; height: 18px; color: var(--orange); }
.lt-rtabs button.on { background: var(--red); border-color: var(--red); color: #fff; }
.lt-rtabs button.on svg { color: #FFB36B; }
.lt-rpane { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 50px); align-items: center; animation: ltFade .45s ease; }
.lt-rpane[hidden] { display: none; }
.lt-rimg { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.lt-rimg img { width: 100%; height: 100%; object-fit: cover; }
.lt-rtx h3 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; margin-bottom: 12px; }
.lt-rtx > p { color: var(--muted); }
.lt-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 22px; }
.lt-facts div { border-left: 3px solid var(--orange); background: #FBF6F4; border-radius: 0 12px 12px 0; padding: 12px 14px; }
.lt-facts b { display: block; font-family: var(--h); font-size: 15px; color: var(--red); }
.lt-facts span { font-size: 13.5px; color: var(--muted); }

.lt-film { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 50px); align-items: center; }
.lt-video { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); background: #1a0d0c; }
.lt-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.lt-apply { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: linear-gradient(120deg, var(--red-900), var(--red) 60%, #C2410C); border-radius: 28px; padding: clamp(30px, 5vw, 56px); color: #fff; box-shadow: var(--shadow-lg); }
.lt-apply h2 { color: #fff; font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 10px; }
.lt-apply h2 .hl { color: #FFB36B; }
.lt-apply p { color: rgba(255, 255, 255, .85); }
.lt-apply a:not(.btn) { color: #fff; text-decoration: underline; }

@media (max-width: 960px) {
  .lt-values { grid-template-columns: 1fr; }
  .lt-vtabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .lt-vtabs button { flex-shrink: 0; padding: 12px 16px; font-size: 14px; }
  .lt-vpane, .lt-rpane, .lt-film, .lt-apply { grid-template-columns: 1fr; }
  .lt-vimg { aspect-ratio: 16 / 10; }
  .lt-growth { grid-template-columns: 1fr; }
  .lt-pair { grid-template-columns: 1fr; }
  .lt-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .lt-mo:nth-child(4) { grid-column: span 1; }
}
@media (max-width: 600px) {
  .lt-mosaic { grid-auto-rows: 140px; }
  .lt-mo:nth-child(1) { grid-row: span 1; }
  .lt-focus, .lt-facts { grid-template-columns: 1fr; }
  .lt-collage { aspect-ratio: auto; grid-template-rows: 180px 140px; }
}

/* ---------- Spacing fixes ---------- */
/* site.css zeroes padding-top on consecutive sections; content pages alternate backgrounds, so restore it */
section.pg-sec:not(.x1):not(.x2) + section[class*="sec"]:not(.x1):not(.x2):not(.x3),
section[class*="sec"]:not(.x1):not(.x2) + section.pg-sec:not(.x1):not(.x2):not(.x3),
.lt-banner + section.pg-sec:not(.x1):not(.x2):not(.x3) { padding-top: clamp(56px, 6vw, 88px); }
/* Timeline: year sits under the dot so the dashed line never runs through it */
.tl-item { padding-top: 84px; }
.tl-item .yr { top: 48px; left: 0; line-height: 1.2; }

/* ---------- FAQs (homepage panel layout, grouped by type) ---------- */
.fq-tools { display: grid; gap: 8px; max-width: 760px; margin: 0 auto 26px; }
.fq-tools .faq-search { margin: 0; }
.fq-count { text-align: center; font-size: 13.5px; color: var(--muted); min-height: 20px; }
.fq-tabs { position: sticky; top: var(--nav-top, 64px); z-index: 30; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 0; margin-bottom: 26px; background: var(--bg, #F8F6F5); }
.fq-tabs button { font-family: var(--h); font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: all .2s; }
.fq-tabs button em { font-style: normal; font-size: 11.5px; opacity: .6; margin-left: 3px; }
.fq-tabs button:hover { border-color: var(--orange); color: var(--orange); }
.fq-tabs button.on { background: var(--red); border-color: var(--red); color: #fff; }
.fq-tabs button.on em { opacity: .8; }
.fq-wrap.searching .fq-tabs button { opacity: .45; pointer-events: none; }
.fq-pane[hidden] { display: none; }
.fq-pane + .fq-pane { margin-top: 44px; }
.fq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--line); padding-bottom: 12px; margin-bottom: 22px; }
.fq-head h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; }
.fq-head span, .fq-sub span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.fq-group + .fq-group { margin-top: 34px; }
.fq-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fq-sub h3 { font-size: 17px; font-weight: 800; color: var(--red); }
.fq-sub h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: middle; }
.fq-link { margin-left: auto; font-family: var(--h); font-weight: 700; font-size: 13px; color: var(--orange); }
.fq-group[hidden], .fq-pane .faq-item[hidden] { display: none; }
.fq-pane .faq-answer, .fq-pane .faq-a p { padding: 0 20px 18px; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.fq-pane .faq-answer p { padding: 0; margin: 0 0 8px; }
.fq-empty { text-align: center; padding: 40px 20px; background: #fff; border-radius: 18px; border: 1px dashed var(--line); }
.fq-empty h3 { font-size: 20px; margin-bottom: 6px; }
.fq-empty[hidden] { display: none; }
.fq-pane mark { background: #FFE3CC; color: inherit; border-radius: 3px; padding: 0 2px; }
@media (max-width: 760px) {
  .fq-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .fq-tabs::-webkit-scrollbar { display: none; }
  .fq-tabs button { flex-shrink: 0; }
  .fq-head { flex-direction: column; gap: 4px; }
  .fq-link { margin-left: 0; }
}

/* ---------- Network stats band (same as the Partners/Franchise page) ---------- */
.fr-stats { position: relative; padding: 26px 0; background: #fff; border-bottom: 1px solid var(--line); }
.fr-stat-row { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.fr-stat { position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; justify-content: center; align-items: center; padding: 4px 14px; }
.fr-stat + .fr-stat::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(142, 27, 30, .18); }
.fr-stat-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--red); border: 1px solid var(--red); color: #fff; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s; }
.fr-stat-ic svg { width: 20px; height: 20px; }
.fr-stat:hover .fr-stat-ic { background: var(--orange); border-color: var(--orange); transform: translateY(-4px) rotate(-6deg); }
.fr-stat b { display: block; font-family: var(--h); font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; color: var(--red); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: end; }
.fr-stat b em { font-style: normal; color: var(--orange); }
.fr-stat small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2, #5b5554); white-space: nowrap; align-self: start; }
.fr-stats + section.pg-sec { padding-top: clamp(56px, 6vw, 88px); }
@media (max-width: 1100px) {
  .fr-stat-row { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .fr-stat { justify-content: start; padding-left: 22px; }
  .fr-stat:nth-child(4)::before { display: none; }
}
@media (max-width: 600px) {
  .fr-stats { padding: 22px 0; }
  .fr-stat-row { grid-template-columns: 1fr 1fr; }
  .fr-stat { column-gap: 10px; padding: 2px 4px 2px 12px; }
  .fr-stat::before { display: none; }
  .fr-stat:nth-child(even)::before { display: block; content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(142, 27, 30, .18); }
  .fr-stat:last-child { grid-column: 1 / -1; justify-content: center; padding-left: 4px; }
  .fr-stat-ic { width: 36px; height: 36px; border-radius: 10px; }
  .fr-stat-ic svg { width: 18px; height: 18px; }
  .fr-stat b { font-size: 21px; }
  .fr-stat small { font-size: 12.5px; }
}

/* ---------- Sticky sub-navs sit flush under the header ---------- */
.lt-jump, .fq-tabs { top: var(--hdr-b, 64px); transition: top .2s ease; }
.lt-jump { box-shadow: 0 8px 18px -14px rgba(74, 12, 14, .35); }
.lt-jump .wrap { justify-content: center; gap: 4px; padding-top: 8px; padding-bottom: 8px; }
.lt-jump a { font-size: 13.5px; padding: 8px 16px; }
.lt-jump a.on { background: var(--red); color: #fff; }
@media (max-width: 960px) { .lt-jump .wrap { justify-content: flex-start; } }

/* Long hero headlines (About Us) */
.pg-hero h1.h1-long { font-size: clamp(30px, 3.6vw, 48px); max-width: 900px; line-height: 1.15; }
.split-tx h2 { line-height: 1.2; }

/* Hero + stats band fit in the first screen */
.pg-hero { padding: clamp(44px, 5.5vw, 80px) 0 clamp(40px, 4.5vw, 64px); }
.pg-hero h1.h1-long { font-size: clamp(28px, 2.9vw, 44px); max-width: 1080px; line-height: 1.14; }
.pg-hero .lede { margin-top: 14px; }
.pg-hero .pg-actions { margin-top: 24px; }
@media (max-height: 760px) and (min-width: 961px) {
  .pg-hero { padding: 36px 0 34px; }
  .pg-hero h1.h1-long { font-size: clamp(26px, 2.5vw, 38px); }
}

/* Full-screen hero: fills the screen below the header, then the page continues */
.pg-hero { min-height: max(460px, calc(100vh - var(--hdr-top, 110px))); min-height: max(460px, calc(100svh - var(--hdr-top, 110px))); display: flex; align-items: center; padding: 56px 0; }
.pg-hero > .wrap { width: 100%; }
.pg-hero h1.h1-long { font-size: clamp(30px, 3.3vw, 52px); max-width: 1120px; }
@media (max-height: 760px) and (min-width: 961px) { .pg-hero { padding: 40px 0; } .pg-hero h1.h1-long { font-size: clamp(28px, 2.9vw, 42px); } }

/* 4-step timeline (About Us) */
.timeline.tl-4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 960px) { .timeline.tl-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .timeline.tl-4 { grid-template-columns: 1fr; } }

/* Laptops: keep content clear of the fixed Ship Now / Franchise Enquiry side tabs */
@media (min-width: 961px) {
  .pg-hero > .wrap, .pg-sec > .wrap, .pg-sec .wrap, .fr-stats > .wrap, .lt-banner > .wrap, .lt-jump > .wrap { width: min(var(--wrap), 100% - 128px); }
}
.split-tx h2 { font-size: clamp(26px, 2.5vw, 38px); }
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vm-card.alt h3 { font-size: clamp(18px, 1.6vw, 22px); }

/* Full-screen hero sized from the real window height (set by pages.js) */
.pg-hero { min-height: var(--hero-h, max(460px, calc(100vh - 110px))); }

/* Forced headline line breaks only on desktop/tablet; phones wrap naturally */
@media (max-width: 600px) { br.br-d { display: none; } }
.pg-hero h1.h1-long { max-width: none; }

/* Animated route at the bottom of page heroes (same as the service-page banners) */
.pg-hero .route { position: absolute; z-index: 2; left: 0; right: 0; bottom: 6px; height: 80px; width: min(1200px, 100% - 40px); margin: 0 auto; pointer-events: none; animation: pgRise .8s .6s both; }
.pg-hero .route svg { width: 100%; height: 100%; overflow: visible; }
.pg-hero .route-line { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-dasharray: 6 8; animation: pgDash 1.4s linear infinite; }
.pg-hero .route-veh > g { transform: scale(.76); }
.pg-hero .rp { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-family: var(--h); font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); padding: 4px 10px 4px 6px; border-radius: 100px; white-space: nowrap; }
.pg-hero .rp svg { width: 15px; height: 15px; color: var(--orange); }
.pg-hero .rp.from { right: calc(90.8333% + 6px); top: 77.5%; transform: translateY(-50%); }
.pg-hero .rp.to { left: calc(90.8333% + 6px); top: 37.5%; transform: translateY(-50%); }
.pg-hero.has-route { padding-bottom: 110px; }
@keyframes pgDash { to { stroke-dashoffset: -28; } }
@keyframes pgRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .pg-hero .route { display: none; } .pg-hero.has-route { padding-bottom: 56px; } }
@media (prefers-reduced-motion: reduce) { .pg-hero .route, .pg-hero .route-line { animation: none !important; } .pg-hero .route-veh { display: none; } }

/* Featured press release (News) */
.news-feature { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.news-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-feature .nf-img { position: relative; background: #ECEAF2; min-height: 300px; }
.news-feature .nf-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.news-feature .src { position: absolute; left: 16px; top: 16px; background: rgba(255, 255, 255, .95); border-radius: 999px; padding: 6px 12px; font-family: var(--h); font-size: 12px; font-weight: 800; color: var(--red); }
.news-feature .nf-tx { padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.news-feature h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; line-height: 1.25; margin: 10px 0 12px; }
.news-feature p { color: var(--muted); }
.news-feature .read-more { margin-top: 20px; }
@media (max-width: 860px) { .news-feature { grid-template-columns: 1fr; } .news-feature .nf-img { min-height: 0; aspect-ratio: 5 / 3; } }
/* Press release article */
.article .lead-sub { font-family: var(--h); font-weight: 600; font-size: 18px; color: var(--red); line-height: 1.5; }
.article .art-fig { margin: 22px 0 26px; }
.article .art-fig img { width: 100%; height: auto; border-radius: 18px; display: block; }
.article .art-fig figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.article blockquote { margin: 24px 0; padding: 20px 24px; background: #FFF6EF; border-left: 4px solid var(--orange); border-radius: 0 16px 16px 0; }
.article blockquote p { font-style: italic; margin: 0 0 10px; }
.article blockquote cite { font-style: normal; font-family: var(--h); font-weight: 700; font-size: 14px; color: var(--red); }
.article .art-source { padding: 14px 18px; border: 1px dashed var(--line); border-radius: 14px; }

/* ---------- Vision & Mission (text + illustration rows) ---------- */
.vm-sec .wrap { display: grid; gap: clamp(28px, 4vw, 48px); }
.vm-row { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(24px, 4vw, 56px); background: linear-gradient(135deg, #FFF8F3, #FFFFFF 60%); border: 1px solid #F6E3D8; border-radius: 28px; padding: clamp(28px, 4vw, 56px); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(142, 27, 30, .35); }
.vm-row::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 112, 33, .14), transparent 70%); top: -90px; left: -90px; pointer-events: none; }
.vm-row.rev { grid-template-columns: 1.15fr 1fr; background: linear-gradient(225deg, #FFF8F3, #FFFFFF 60%); }
.vm-row.rev::before { left: auto; right: -90px; }
.vm-tx { position: relative; }
.vm-tx h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 800; line-height: 1.05; margin: 8px 0 18px; }
.vm-tx .hl { color: var(--orange); }
.vm-lead { font-family: var(--h); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink); }
.vm-tags { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vm-tags li { font-family: var(--h); font-weight: 700; font-size: 13px; color: var(--red); background: #fff; border: 1px solid #F3D3C2; border-radius: 999px; padding: 8px 14px; }
.vm-tags li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-right: 8px; vertical-align: middle; }
.vm-art svg { width: 100%; height: auto; display: block; }
/* motion */
.vm-art .vm-ic { animation: vmFloat 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.vm-art .vm-ic.i2 { animation-delay: -1.2s; } .vm-art .vm-ic.i3 { animation-delay: -2.4s; } .vm-art .vm-ic.i4 { animation-delay: -3.6s; }
.vm-art .vm-cloud { animation: vmDrift 9s ease-in-out infinite; } .vm-art .vm-cloud.c2 { animation-delay: -3s; } .vm-art .vm-cloud.c3 { animation-delay: -6s; }
.vm-art .vm-dash path, .vm-art .vm-road { animation: vmDash 1.6s linear infinite; }
.vm-art .vm-bars .b, .vm-art .vm-chart .g { transform-box: fill-box; transform-origin: left center; animation: vmGrowX 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.vm-art .vm-chart .g { transform-origin: center bottom; animation-name: vmGrowY; }
.vm-art .b2, .vm-art .g2 { animation-delay: .15s; } .vm-art .b3, .vm-art .g3 { animation-delay: .3s; } .vm-art .b4, .vm-art .g4 { animation-delay: .45s; } .vm-art .b5 { animation-delay: .6s; }
.vm-art .vm-truck { animation: vmBump 1.4s ease-in-out infinite; }
.vm-art .vm-person { animation: vmFloat 6s ease-in-out infinite; animation-delay: -2s; }
@keyframes vmFloat { 50% { transform: translateY(-7px); } }
@keyframes vmDrift { 50% { transform: translateX(12px); } }
@keyframes vmDash { to { stroke-dashoffset: -22; } }
@keyframes vmGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vmGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vmBump { 50% { transform: translateY(-2px); } }
@media (max-width: 900px) {
  .vm-row, .vm-row.rev { grid-template-columns: 1fr; }
  .vm-row.rev .vm-art { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .vm-art * { animation: none !important; } }

/* Homepage-style FAQ panel on content pages */
.cs-faq .faq-cols .faq-answer { padding: 0 20px 18px; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.cs-faq .faq-cols .faq-answer p { margin: 0 0 8px; }

/* FAQ category tabs: always one line (compact; scrolls sideways if the screen is too narrow) */
.fq-tabs { flex-wrap: nowrap; justify-content: safe center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fq-tabs::-webkit-scrollbar { display: none; }
.fq-tabs button { flex-shrink: 0; font-size: 13px; padding: 8px 13px; white-space: nowrap; }
.fq-tabs button em { font-size: 11px; margin-left: 2px; }
@media (min-width: 1200px) { .fq-sec > .wrap { width: min(1500px, 100% - 96px); } }
.fq-tabs button { font-size: 12.5px; padding: 8px 11px; }
@media (min-width: 1200px) { .fq-sec > .wrap { width: min(1680px, 100% - 96px); } }
@media (max-width: 1599px) { .fq-tabs button em { display: none; } }
@media (max-width: 1440px) { .fq-tabs { gap: 4px; } .fq-tabs button { padding: 8px 9px; font-size: 12.5px; } }

/* Page-hero route city pills: size up with the screen */
@media (min-width: 1300px) {
  .pg-hero .rp { font-size: 13px; padding: 6px 13px 6px 8px; gap: 6px; }
  .pg-hero .rp svg { width: 16px; height: 16px; }
}
@media (min-width: 1460px) {
  .pg-hero .rp { font-size: 14px; padding: 8px 16px 8px 10px; gap: 7px; background: rgba(0, 0, 0, .4); }
  .pg-hero .rp svg { width: 18px; height: 18px; }
}

/* Page-hero route: lift the strip so the taller city pills never clip at the hero bottom */
@media (min-width: 761px) {
  .pg-hero .route { bottom: 26px; }
}

/* ---------- Holiday calendar: compact multi-column layout (no long vertical scroll) ---------- */
.hol-cal { overflow: visible; border-radius: 0; }
.hol-cal table { display: block; margin: 12px 0 0; font-size: 13.5px; }
.hol-cal thead { display: none; }                 /* header labels not needed in card layout */
.hol-cal tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.hol-cal tbody tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name date" "region date";
  align-items: start;
  column-gap: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
  overflow: hidden;
}
.hol-cal tbody tr:nth-child(even) td { background: transparent; }  /* override striping */
.hol-cal tbody td { border: 0 !important; padding: 0 !important; }
/* 1st cell = festival name, 2nd = region, 3rd = date */
.hol-cal tbody td:nth-child(1) { grid-area: name; min-width: 0; font-family: var(--h); font-weight: 700; color: var(--ink); font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; }
.hol-cal tbody td:nth-child(2) { grid-area: region; min-width: 0; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
.hol-cal tbody td:nth-child(3) {
  grid-area: date;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
  font-family: var(--h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--orange-600);
  background: var(--orange-50);
  border-radius: 999px !important;
  padding: 5px 12px !important;
}

@media (max-width: 760px) {
  .hol-cal tbody { grid-template-columns: 1fr; }
}